.feature {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
}

.feature img {
	width: 50%;
	max-width: 100%;
	height: auto;
	object-fit: cover;
}

.feature-details {
	width: 50%;
	padding: 20px;
	box-sizing: border-box;
	text-align: left; /* Ensures text is left-aligned for LTR languages */
	direction: ltr; /* Default direction for LTR languages */
}

.feature-details p {
	text-align: inherit !important; /* Ensures paragraphs follow the parent alignment */
}

html[dir="rtl"] .feature-details {
	text-align: right; /* Aligns text to the right for RTL languages */
	direction: rtl; /* Sets correct reading direction */
}

html[dir="rtl"] .feature-details p {
	text-align: inherit !important; /* Ensures paragraphs follow the correct alignment */
}

.feature-details h2 {
	color: #af44d2;
	font-weight: 500;
	margin-bottom: 0; /* Reduces space below h2 */
}

.feature-details h3 {
	padding: 0;
	margin-top: 0; /* Ensures no extra space above h3 */
}

@media (prefers-color-scheme: dark) {
	.feature-details h3 {
		color: #aaa; /* Light gray in dark mode */
	}
}

@media (max-width: 768px) {
	.feature {
		flex-direction: column;
		text-align: center;
	}

	.feature img {
		width: 100%;
	}

	.feature-details {
		width: 100%;
	}

	.mobileFeatureReversed {
		flex-direction: column-reverse;
	}
}

.title-and-icon {
	display: flex;
	align-items: center; 
	gap: 6px;
}

.title-and-icon img {
	width: 128px;
	height: 128px;
}

.title-and-icon h1 {
	font-size: 64px;
	font-weight: 600;
}

.hero {
	max-width: 90%;
}

.button {
	width: 160px;
}

@media only screen and (max-width: 600px) {
	.title-and-icon img {
		width: 96px;
		height: 96px;
	}
	
	.title-and-icon h1 {
		font-size: 48px;
		font-weight: 600;
	}
	
	.feature {
		padding: 0;
	}
	
	.feature img {
		width: 100% !important;
		max-width: 100% !important;
	}
	
	.hero {
		max-width: 100% !important;
		margin: 10px auto !important;
	}
	
	.button {
		width: 200px;
	}
	
	.product {
		padding: 0 !important;
	}
}

.product {
	display: flex;
	flex-direction: column; /* Ensures elements stack vertically */
	align-items: center; /* Centers content horizontally */
	justify-content: center; /* Centers content vertically */
	text-align: center; /* Ensures text inside is centered */
	padding: 0 20px; /* Adds left and right padding */
	max-width: 100%; /* Prevents content from overflowing */
	box-sizing: border-box; /* Ensures padding is included in width calculations */
}

@media (max-width: 768px) { /* Targets iPhone and small screens */
	.product {
		padding: 0 10px; /* Reduces side padding to fit content */
	}

	.product img {
		max-width: 80%; /* Ensures images are responsive */
		height: auto; /* Maintains aspect ratio */
	}

	.product h2 {
		font-size: 1.5rem; /* Adjust text size for smaller screens */
	}

	.product p {
		font-size: 1rem; /* Ensures readability on small screens */
	}
}

.feature-cloud {
	text-align: center; /* Centers the title */
	margin: 40px auto;
	max-width: 800px; /* Keeps content within a reasonable width */
}

.feature-cloud h2 {
	font-size: 2rem;
	margin-bottom: 20px;
}

.reviews {
	text-align: center; /* Centers the title */
	max-width: auto; /* Keeps content within a reasonable width */
}

.reviews h2 {
	font-size: 2rem;
	margin: auto;
	margin-bottom: 20px;
}

.feature-cloud-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px; /* Adds spacing between feature elements */
	padding: 20px;
}

.feature-cloud-list span {
	display: inline-block;
	font-size: calc(1rem + (1.5 - 1) * random()); /* Randomized font size */
	font-weight: bold;
	padding: 10px 15px;
	border-radius: 8px;
	color: white; /* Ensures text is visible */
	background-clip: padding-box; /* Ensures background covers the entire span */
	transition: transform 0.2s ease-in-out;
	filter: brightness(1.2);
}

.purple {
	background: linear-gradient(135deg, #7B1FA2, #D500F9) !important;
}

.blue {
	background: linear-gradient(135deg, #1976D2, #00B0FF) !important;
}

.pink {
	background: linear-gradient(135deg, #E91E63, #FF4081) !important;
}

/* RTL Support */
html[dir="rtl"] .feature-cloud-list {
	justify-content: flex-end; /* Aligns to the right for RTL languages */
}

.try-screens {
	display: flex;
	align-items: center; /* Aligns image and text vertically */
	justify-content: center; /* Centers the entire element inside its parent */
	gap: 15px; /* Adds spacing between image and text */
	text-align: left; /* Default left alignment for LTR */
	direction: ltr; /* Default text direction */
}

/* Ensures image stays at 110px and maintains aspect ratio */
.try-screens img {
	width: 110px;
	height: auto;
}

.try-screens p {
	margin: 0;
	padding-top: 20px;
	text-align: inherit !important; /* Ensures text follows parent alignment */
}

/* RTL Support */
html[dir="rtl"] .try-screens {
	flex-direction: row-reverse; /* Moves image to the right and text to the left */
	text-align: right;
	direction: rtl;
}

.screens-org {
	margin-top: 20px;
	padding-top: 10px;
	border-top: 1px solid #ccc;
	display: flex;
	align-items: center; /* Aligns image and text vertically */
	justify-content: center; /* Centers the entire element inside its parent */
	gap: 15px; /* Adds spacing between image and text */
	text-align: left; /* Default left alignment for LTR */
	direction: ltr; /* Default text direction */
}

@media (prefers-color-scheme: dark) {
	.screens-org {
		border-top: 1px solid #555;
	}
}

/* Ensures image stays at 110px and maintains aspect ratio */
.screens-org img {
	width: 80px;
	height: auto;
}

.screens-org p {
	margin: 0;
	padding-top: 20px;
	font-size: 14px !important;
	text-align: inherit !important; /* Ensures text follows parent alignment */
}

/* RTL Support */
html[dir="rtl"] .screens-org {
	flex-direction: row-reverse; /* Moves image to the right and text to the left */
	text-align: right;
	direction: rtl;
}

.requirements {
	font-size: 12px;
	color: #000; /* Default text color */
	text-align: left !important;
	padding: 10px;
	direction: ltr; /* Default direction */
}

@media (prefers-color-scheme: dark) {
	.requirements {
		color: #cccccc; /* Light gray in dark mode */
	}
}

.requirements h4 {
	font-size: 14px;
	font-weight: bold;
	color: #9C27B0; /* Purple color for heading */
	margin-bottom: 10px;
}

.requirements ul {
	padding-left: 20px; /* Ensures bullets have proper spacing */
	margin-bottom: 15px;
}

.requirements li {
	margin-bottom: 5px;
}

.requirements a {
	color: #9C27B0; /* Purple color for link */
	font-weight: bold;
	text-decoration: none;
}

.requirements a:hover {
	text-decoration: underline;
}

.requirements strong {
	font-weight: bold;
}

/* RTL Support */
html[dir="rtl"] .requirements {
	text-align: right !important; /* Align text to the right in RTL mode */
	direction: rtl; /* Switch text direction */
}

html[dir="rtl"] .requirements ul {
	padding-right: 20px; /* Adjust padding for RTL */
	padding-left: 0; /* Remove left padding */
}

h1, h2 {
	max-width: 900px;
}

/* REVIEWS */

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  justify-items: stretch;
  align-items: stretch;     /* 👈 Align items to fill row height */
  margin: 0 auto 3rem;
  width: 100%;
}

.review-card {
  background: #e5e7eb;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  text-align: left;
}

.review-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.stars {
  color: #facc15;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  text-align: left;
}

.review-title {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: #111;
  text-align: left;
}

.review-text {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 1rem;
  color: #333;
  text-align: left;
}

.reviewer {
  font-size: 0.85rem;
  font-weight: bold;
  color: #666;
  text-align: left;
}

/* RTL Support for Reviews */
html[dir="rtl"] .review-card,
html[dir="rtl"] .review-content,
html[dir="rtl"] .stars,
html[dir="rtl"] .review-title,
html[dir="rtl"] .review-text,
html[dir="rtl"] .reviewer {
	text-align: right;
	direction: rtl;
}

@media (prefers-color-scheme: dark) {
  .review-card {
	background: #1e1e1e;
	box-shadow: 0 2px 8px rgba(255, 255, 255, 0.05);
  }

  .stars {
	color: #facc15; /* Keep gold stars */
  }

  .review-title {
	color: #f5f5f5;
  }

  .review-text {
	color: #ccc;
  }

  .reviewer {
	color: #888;
  }
}