.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;
  }
}

/* Main tile */
.bf-sale-banner {
  margin: 32px auto 0;
  max-width: 1040px;
  padding: 42px 32px 34px;
  border-radius: 32px;
  background: linear-gradient(
	110deg,
	#f6a36b 0%,
	#e86cae 35%,
	#7b63ff 70%,
	#141733 100%
  );
  color: #ffffff;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* More prominent badge */
.bf-sale-label {
  background: rgba(255, 255, 255, 0.32);
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
  color: #ffffff;
  align-self: center;
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}

/* Text block */
.bf-sale-top {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.bf-sale-title {
  margin: 18px 0 10px;
  font-size: 32px;
  font-weight: 800;
}

.bf-sale-text {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.95);
}

.bf-sale-note {
  margin-top: 20px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}

/* Centered button */
.bf-sale-bottom {
  display: flex;
  justify-content: center;
}

.bf-sale-cta {
  display: inline-flex;
  flex-direction: column;
  padding: 14px 32px;
  border-radius: 999px;
  background: #ffffff;
  color: #0f0f1a;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
  transition: 0.2s ease;
  text-align: center;
}

.bf-sale-cta-main {
  font-size: 17px;
  font-weight: 700;
}

.bf-sale-cta-sub {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.65;
}

.bf-sale-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(0,0,0,0.45);
}

/* Mobile */
@media (max-width: 720px) {
  .bf-sale-banner {
	padding: 32px 20px 28px;
  }
  .bf-sale-title {
	font-size: 28px;
  }
  .bf-sale-label {
	font-size: 14px;
	padding: 8px 20px;
  }
}