/*
 * Takwine Agency Website Styles
 *
 * This stylesheet defines the core look and feel for the Takwine Agency
 * marketing site.  The design leans on a contemporary aesthetic with
 * vibrant colours, clean typography and subtle animations.  Arabic
 * typography is handled via the Cairo font and the document is set
 * right‑to‑left by default.  CSS variables are used to centralise the
 * colour palette, making it easy to tweak the theme in a single place.
 */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');

/* Root variables for colours and sizing */
:root {
  --primary: #0070f3; /* vibrant blue for buttons and highlights */
  --secondary: #f5a623; /* warm accent colour */
  --dark: #0a1931; /* dark blue used for headings and backgrounds */
  --light: #fefefe; /* near white for text backgrounds */
  --muted: #f4f4f4; /* light grey for section backgrounds */
  --border-radius: 8px;
  --transition-speed: 0.3s;
  --max-width: 1200px;
  --feature-bg: #ffffff; /* background for feature boxes */

  /* Gradients for services overview cards inspired by Heen Agency colours */
  --gradient1: linear-gradient(135deg, #F6D365, #FDA085);
  --gradient2: linear-gradient(135deg, #A1C4FD, #C2E9FB);
  --gradient3: linear-gradient(135deg, #F093FB, #F5576C);
  --gradient4: linear-gradient(135deg, #5EFCE8, #736EFE);
}

/* Global reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: 'Cairo', sans-serif;
  direction: rtl; /* set right‑to‑left direction for Arabic */
}

body {
  background: var(--light);
  color: var(--dark);
  line-height: 1.6;
  font-size: 16px;
}

/* Container for content */
.container {
  width: 90%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 0;
}

/* Navigation styles */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: var(--dark);
  color: var(--light);
  position: sticky;
  top: 0;
  z-index: 100;
}
/* Links container inside the navbar.  On larger screens links are displayed inline. */
.navbar .navbar-links {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Currency select container for easier styling */
.navbar .currency-select {
  display: flex;
  align-items: center;
}

/* Hamburger toggle button, hidden by default on large screens */
.menu-toggle {
  display: none;
  font-size: 1.5rem;
  background: none;
  border: none;
  color: var(--light);
  cursor: pointer;
}
/* ensure icon inherits color */
.menu-toggle i {
  pointer-events: none;
}
.navbar a {
  color: var(--light);
  text-decoration: none;
  margin-left: 1rem;
  font-weight: 600;
  transition: color var(--transition-speed);
}
.navbar a:hover {
  color: var(--secondary);
}
.navbar .logo {
  font-size: 1.5rem;
  font-weight: 700;
}
.navbar select {
  padding: 0.25rem;
  font-size: 0.9rem;
  border-radius: var(--border-radius);
  border: none;
}

/* Hero section */
/* Hero styling: reduce height so images don't overwhelm the page */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--light);
  min-height: 60vh;
  padding: 2rem;
}
.hero.overlay::before {
  /* lighter overlay to allow the hero image to remain visible while keeping text legible */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* reduce the opacity for a subtle shading without darkening the entire hero */
  background: rgba(0, 0, 0, 0.2);
  z-index: 0;
  /* ensure overlay does not block interactions with buttons or links */
  pointer-events: none;
}
.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  z-index: 1;
  color: var(--light);
  /* lighten text shadow to avoid overly dark appearance on the hero */
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}
.hero p {
  font-size: 1.2rem;
  z-index: 1;
  color: var(--light);
  /* lighten text shadow to avoid overly dark appearance on the hero */
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

/* Call-to-action button inside hero */
.cta-button {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.8rem 1.8rem;
  background: var(--secondary);
  color: var(--light);
  border-radius: var(--border-radius);
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--secondary);
  transition: background var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed);
  z-index: 1;
}
.cta-button:hover {
  background: var(--primary);
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Container for hero text to improve readability over busy backgrounds */
.hero-content {
  background: rgba(0, 0, 0, 0.5);
  padding: 1rem 2rem;
  border-radius: var(--border-radius);
  display: inline-block;
  color: var(--light);
}

/* ensure text inside hero-content inherits white colour */
.hero-content h1,
.hero-content p {
  color: var(--light);
}

/* Section headings */
.section-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: var(--dark);
  font-weight: 700;
}

/* Pricing cards */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.card {
  background: var(--light);
  border: 1px solid #e5e5e5;
  border-radius: var(--border-radius);
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
.card h3 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: var(--primary);
}
.card .price {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--secondary);
}
.card ul {
  list-style: none;
  margin-bottom: 1.5rem;
}
.card ul li {
  margin-bottom: 0.5rem;
  position: relative;
  padding-right: 1.5rem;
}
.card ul li::before {
  content: '\2714'; /* check mark */
  position: absolute;
  right: 0;
  color: var(--primary);
}
.card button {
  /* Increase padding and use bold Cairo font to make the order button stand out */
  padding: 0.9rem 1.8rem;
  background: var(--secondary);
  color: var(--light);
  border: 2px solid var(--secondary);
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: 1rem;
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  transition: background var(--transition-speed), color var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed);
}
.card button:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--light);
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Style anchor-based order buttons to match the appearance of regular buttons */
.card .order-btn {
  padding: 0.9rem 1.8rem;
  background: var(--secondary);
  color: var(--light);
  border: 2px solid var(--secondary);
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: 1rem;
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  transition: background var(--transition-speed), color var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed);
}
.card .order-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--light);
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Ensure animated ribbons are hidden now that they are no longer used */
.testimonials .ribbons {
  display: none;
}

/* Mobile responsive navigation improvements */
@media (max-width: 768px) {
  /* Keep the navbar items on a single row: logo and menu toggle remain side by side */
  .navbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
  }
  /* Show the hamburger button on small screens.  Align it to the far left of the
     header by pushing it away from the logo using auto margins.  This keeps
     the toggle on the opposite side of the logo when the document direction
     is RTL. */
  .menu-toggle {
    display: block;
    font-size: 1.6rem;
    margin-left: auto;
    margin-right: 0;
  }
  /* Hide the links container by default on mobile.  When opened it will
     display as a horizontal row that wraps onto multiple lines beneath
     the header. */
  .navbar .navbar-links {
    display: none;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 100%;
    margin-top: 0.5rem;
    background: var(--dark);
    padding: 0.5rem 0;
  }
  /* Display links when menu is opened */
  .navbar .navbar-links.open {
    display: flex;
  }
  /* Style the links inside the collapsed menu */
  .navbar .navbar-links a {
    margin: 0.5rem 0.75rem;
    color: var(--light);
    white-space: nowrap;
  }
  /* Currency selector sits within the collapsed menu and spans the full width. */
  .navbar .currency-select {
    width: 100%;
    margin: 0.5rem 0.75rem;
    display: flex;
    justify-content: center;
  }
  .navbar select {
    width: auto;
    padding: 0.25rem 0.5rem;
    margin: 0;
  }
}

/* Services section (for campaign pages) */
.service-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  margin-top: 2rem;
}
.service-section img {
  max-width: 500px;
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
}
.service-section .content {
  flex: 1;
}
.service-section .content h2 {
  font-size: 1.8rem;
  color: var(--primary);
  margin-bottom: 1rem;
}
.service-section .content p {
  margin-bottom: 1rem;
  color: #333;
}
.service-section .content ul {
  list-style: none;
}
.service-section .content ul li {
  margin-bottom: 0.5rem;
  position: relative;
  padding-right: 1.5rem;
}
.service-section .content ul li::before {
  content: '\2022';
  position: absolute;
  right: 0;
  color: var(--secondary);
}

/* Redesigned service intro section with icon points */
.service-intro {
  margin-top: 2rem;
}
.service-intro .service-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}
.service-image img {
  max-width: 420px;
  width: 100%;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.service-content {
  flex: 1;
}
.service-desc {
  margin-bottom: 1rem;
  color: #333;
  font-size: 1rem;
  line-height: 1.7;
}
.service-points {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.service-points .point {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  color: #333;
}
.service-points .point i {
  color: var(--secondary);
  font-size: 1.2rem;
}

/* Footer */
footer {
  background: var(--dark);
  color: var(--light);
  text-align: center;
  padding: 1rem 0;
  margin-top: 2rem;
}
footer p {
  margin: 0.5rem 0;
}

/* Links in the footer to legal pages */
.footer-links {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.footer-links a {
  color: var(--light);
  text-decoration: none;
  margin: 0 0.25rem;
}
.footer-links a:hover {
  color: var(--secondary);
  text-decoration: underline;
}
.footer-links span {
  margin: 0 0.25rem;
  color: var(--light);
}

/* Policy list styling used on legal pages to produce neat bullet points */
.policy-list {
  list-style-type: disc;
  margin-right: 1.5rem;
  padding-right: 0;
}
.policy-list li {
  margin-bottom: 0.5rem;
  line-height: 1.8;
}

/* Promotional popup advertisement */
.promo-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--light);
  border-radius: var(--border-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 2rem;
  max-width: 90%;
  width: 380px;
  z-index: 3000;
  display: none;
  text-align: center;
}
.promo-popup.show {
  display: block;
}
.promo-popup .promo-content h2 {
  margin-bottom: 0.5rem;
  color: var(--primary);
  font-size: 1.6rem;
}
.promo-popup .promo-content p {
  margin-bottom: 1rem;
  color: #333;
  font-size: 1rem;
  line-height: 1.5;
}
.promo-popup .promo-content .cta-button {
  margin-top: 1rem;
}
/* Close button for the promo popup */
.promo-popup .close-popup {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  font-size: 1.5rem;
  color: var(--dark);
  cursor: pointer;
}
/* Features grid under pricing or why choose us */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.feature-box {
  background: var(--feature-bg);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}
.feature-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.feature-box i {
  font-size: 2rem;
  color: var(--secondary);
  margin-bottom: 0.5rem;
}
.feature-box h4 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  color: var(--primary);
}
.feature-box p {
  font-size: 0.9rem;
  color: #555;
}

/* Horizontal carousel for feature items */
.carousel {
  overflow: hidden;
  margin-top: 2rem;
  position: relative;
}
.carousel-track {
  display: flex;
  align-items: stretch;
  /* Increase scrolling speed for the feature carousel */
  animation: scrollCarousel 20s linear infinite;
}
.carousel-item {
  flex: 0 0 auto;
  min-width: 220px;
  margin: 0 0.75rem;
}
@keyframes scrollCarousel {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Testimonials section with moving ribbons */
.testimonials {
  padding: 3rem 0;
  text-align: center;
  background: var(--muted);
}

/* Success stories section for campaign pages */
.success-stories {
  background: var(--muted);
  padding: 3rem 0;
  text-align: center;
}
.success-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
}
.success-card {
  background: var(--feature-bg);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  max-width: 320px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}
.success-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.success-card h4 {
  font-size: 1.3rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
}
.success-card p {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.6;
}

/* Gallery grid for poster designs page */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.gallery-grid img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}
.gallery-grid img:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

/* Design process section */
.design-process {
  margin-top: 4rem;
}
.process-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
}
.process-step {
  flex: 1 1 200px;
  max-width: 250px;
  background: var(--feature-bg);
  padding: 1.5rem;
  border-radius: var(--border-radius);
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}
.process-step:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.process-step i {
  font-size: 2rem;
  color: var(--secondary);
  margin-bottom: 0.5rem;
}
.process-step h4 {
  font-size: 1.2rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
}
.process-step p {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.5;
}
.testimonials .ribbons {
  overflow: hidden;
  width: 100%;
  position: relative;
  margin-bottom: 2rem;
}
.testimonials .ribbon {
  display: block;
  white-space: nowrap;
  font-weight: 700;
  padding: 0.5rem 0;
  font-size: 1rem;
  animation: ribbonScroll 20s linear infinite;
}
.testimonials .ribbon:nth-child(1) {
  background: #fde5ec;
  color: #c94b62;
}
.testimonials .ribbon:nth-child(2) {
  background: #e8e6fd;
  color: #5a4bc9;
  animation-direction: reverse;
}
@keyframes ribbonScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.testimonials .testimonial-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-top: 1rem;
}
.testimonials .testimonial-card {
  background: var(--feature-bg);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  max-width: 320px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}
.testimonials .testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.testimonials .testimonial-card .quote {
  font-style: italic;
  margin-bottom: 1rem;
  color: #333;
  line-height: 1.6;
}
.testimonials .testimonial-card .author {
  font-weight: 600;
  color: var(--primary);
  font-size: 0.9rem;
}

/* Layout for testimonial content: image + cards */
.testimonials .testimonial-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 1rem;
}
.testimonials .testimonial-image img {
  max-width: 380px;
  width: 100%;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Benefits dark section */
.benefits-section {
  background: var(--dark);
  color: var(--light);
  padding: 4rem 0;
}
.benefits-section .container {
  max-width: var(--max-width);
  margin: 0 auto;
  width: 90%;
}
.benefits-content {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}
.benefits-heading {
  flex: 1 1 40%;
}
.benefits-heading h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--light);
}
.benefits-heading p {
  font-size: 1rem;
  color: #d5dbe3;
  line-height: 1.7;
}
.benefits-grid {
  flex: 1 1 55%;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.benefit-box {
  background: #0d274d;
  border-radius: var(--border-radius);
  padding: 1.5rem;
  flex: 1 1 250px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}
.benefit-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
.benefit-box i {
  font-size: 2rem;
  color: var(--secondary);
  margin-bottom: 0.5rem;
}
.benefit-box h4 {
  font-size: 1.3rem;
  color: var(--light);
  margin-bottom: 0.5rem;
}
.benefit-box p {
  font-size: 0.9rem;
  color: #d5dbe3;
  line-height: 1.6;
}

/* Enhanced benefits card to mimic modern dark design */
.benefits-card {
  background: #0d274d;
  border-radius: 1.5rem;
  padding: 3rem 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.benefits-card .benefits-heading h2 {
  font-size: 2.2rem;
  margin-bottom: 1rem;
  color: var(--light);
}
.benefits-card .benefits-heading p {
  font-size: 1rem;
  color: #d5dbe3;
  line-height: 1.7;
  margin-bottom: 2rem;
}
.benefits-stars {
  position: absolute;
  top: 1rem;
  /* position on the left side since RTL layout */
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  opacity: 0.2;
  pointer-events: none;
}
.benefits-stars i {
  font-size: 3rem;
  color: var(--secondary);
}

/* Section subtitle for feature headings under pricing */
.section-subtitle {
  text-align: center;
  font-size: 1.6rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: var(--primary);
  font-weight: 700;
}

/* Scroll animation: elements fade and slide into place */
[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-speed) ease-out, transform var(--transition-speed) ease-out;
}
[data-animate].animated {
  opacity: 1;
  transform: translateY(0);
}

/* About section inspired by modern layout */
.about-section {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  margin-top: 2rem;
}
.about-section .about-left {
  flex: 1;
  min-width: 280px;
}
.about-section .about-left h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--dark);
}
.about-section .about-left p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #333;
}
.gradient-text {
  background: linear-gradient(90deg, #00aaff, #7f3de5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.about-section .about-right {
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.about-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--feature-bg);
  border-radius: var(--border-radius);
  padding: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}
.about-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.about-item i {
  font-size: 1.8rem;
  color: var(--secondary);
  margin-top: 0.2rem;
}
.about-item h4 {
  font-size: 1.2rem;
  color: var(--primary);
  margin-bottom: 0.3rem;
}
.about-item p {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.4;
}

/* Counters section */
.counters {
  background: var(--muted);
  padding: 3rem 0;
  text-align: center;
}
.counters .counter-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 2rem;
  max-width: var(--max-width);
  margin: 0 auto;
}
.counter-box {
  flex: 1;
  min-width: 200px;
}
.counter-box .counter {
  font-size: 3rem;
  color: var(--primary);
  font-weight: 700;
}
.counter-box p {
  font-size: 1.1rem;
  color: var(--dark);
}

/* FAQ section */
.faq {
  margin-top: 3rem;
}
/* FAQ styling: use details/summary for collapsible questions */
.faq details {
  border: 1px solid #ddd;
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: var(--feature-bg);
  overflow: hidden;
  transition: box-shadow var(--transition-speed);
}
.faq details:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.faq summary {
  font-weight: 600;
  cursor: pointer;
  position: relative;
  padding-right: 2rem;
  outline: none;
}
/* caret icon for FAQ */
.faq summary::after {
  content: '\f078'; /* Font Awesome caret-down icon */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  right: 0;
  top: 0;
  color: var(--secondary);
  transition: transform var(--transition-speed);
}
.faq details[open] summary::after {
  transform: rotate(180deg);
}
.faq p {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.6;
}

/* Top bar with contact and social icons */
.top-bar {
  background: var(--secondary);
  color: var(--light);
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 2rem;
}
.top-bar .contact-info a,
.top-bar .social-icons a {
  color: var(--light);
  text-decoration: none;
  margin-left: 1rem;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
}
.top-bar .contact-info a i {
  margin-left: 0.3rem;
}
.top-bar .social-icons a {
  font-size: 1rem;
  margin-left: 0.5rem;
}
.top-bar .social-icons a:hover {
  color: var(--dark);
}

/* Wave under hero */
.hero-wave svg {
  display: block;
  width: 100%;
  height: 60px;
}

/* Services overview section with gradient cards */
.services-overview {
  position: relative;
  background: var(--muted);
  padding: 4rem 0 0;
}
.services-overview .section-title {
  color: var(--dark);
}
.services-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
}
.service-card {
  flex: 1 1 220px;
  max-width: 280px;
  padding: 2rem 1.5rem;
  border-radius: 1.2rem;
  color: var(--light);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
  text-align: center;
  direction: rtl;
}
.service-card i {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  color: var(--light);
}
.service-card h4 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: var(--light);
}
.service-card p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
.service-card.gradient-1 { background: var(--gradient1); }
.service-card.gradient-2 { background: var(--gradient2); }
.service-card.gradient-3 { background: var(--gradient3); }
.service-card.gradient-4 { background: var(--gradient4); }

/* Wave separator for services overview */
.services-overview .wave-down svg {
  display: block;
  width: 100%;
  height: 80px;
}

/* Comparison section styling */
.comparison {
  background: var(--muted);
  padding: 4rem 0;
}
.comparison-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
}
.comparison-card {
  flex: 1 1 280px;
  border-radius: var(--border-radius);
  padding: 2rem;
  color: var(--light);
}
.comparison-card.positive {
  background: linear-gradient(135deg, #0db14b, #17c671);
}
.comparison-card.negative {
  background: linear-gradient(135deg, #e63946, #f75c4c);
}
.comparison-card h3 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
.comparison-card ul {
  list-style: none;
}
.comparison-card ul li {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
}
.comparison-card ul li i {
  font-size: 1rem;
}

/* Floating WhatsApp button */
/* Floating WhatsApp button */
/* The button gently bounces up and down to draw attention,
   and slightly enlarges on hover. */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 50px;
  height: 50px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  z-index: 1000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  animation: whatsapp-bounce 2.5s ease-in-out infinite;
  transition: transform var(--transition-speed);
}
.whatsapp-float:hover {
  transform: scale(1.05) translateY(-3px);
}

@keyframes whatsapp-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Responsive tweaks */
@media (max-width: 600px) {
  .hero h1 {
    font-size: 1.8rem;
  }
  .hero p {
    font-size: 1rem;
  }
  .navbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  /* When collapsed on very small screens, ensure links stack vertically inside the dropdown */
  .navbar .navbar-links {
    flex-direction: column;
  }
  .navbar a {
    margin: 0.5rem 1rem;
  }
}

/* FAQ animation styles */
/* Style the details element to have a subtle border and animated content reveal */
details {
  margin: 0.5rem 0;
  border: 1px solid #e0e0e0;
  border-radius: var(--border-radius);
  padding: 0.75rem 1rem;
  background: #fff;
  transition: background 0.3s ease;
}
details[open] {
  background: #f9f9f9;
}
details summary {
  font-weight: 600;
  cursor: pointer;
  position: relative;
  list-style: none;
}
/* Add a simple arrow indicator using CSS */
details summary::after {
  content: '\25BC'; /* Downward triangle */
  position: absolute;
  left: 0.5rem;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}
/* Rotate arrow when open */
details[open] summary::after {
  transform: rotate(180deg);
}
/* Animate the reveal of the content inside details */
details[open] summary + * {
  animation: fadeSlide 0.4s ease;
}
@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
 * Section separators
 * Add a subtle gradient line between consecutive sections to delineate content areas.
 * The line fades at the edges for a clean, elegant look.
 */
/* Only apply separators between content containers, not on hero sections */
section.container:not(:last-of-type)::after {
  content: "";
  display: block;
  width: 70%;
  height: 2px;
  margin: 3rem auto;
  background: linear-gradient(to right, transparent, var(--secondary), transparent);
  border-radius: 1px;
}