/*
Theme Name: Dial a Virtual Assistant
Author: Open Digital Africa
Description: Custom WordPress theme for DAVA.
Version: 1.0
Text Domain: dava
*/



/* GLOBAL */
body {
  margin: 0;
  font-family: "Inter", sans-serif;
  color: #0b304a;
  background: #ffffff;
}

.container {
  width: 90%;
  max-width: 1280px;
  margin: auto;
}
 
/* NAVBAR */
.navbar {
  background: #ffffff;
  padding: 20px 0;
}


.nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  width: 140px;
}

.nav-links a {
  margin-left: 32px;
  text-decoration: none;
  color: #0b304a;
  font-weight: 500;
}

.contact-btn {
  background: #0fc3c9;
  padding: 10px 20px;
  border-radius: 6px;
  color: white !important;
}

/* HERO SECTION */
.hero-section {
  background: #eef3f7;
  padding: 80px 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.hero-left h1 {
  font-size: 44px;
  line-height: 1.15;
  margin: 0;
}

.hero-left h1 span {
  color: #008cbe;
}

.hero-left h2 {
  font-size: 24px;
  margin-top: 12px;
  font-weight: 400;
}

.hero-description {
  margin: 18px 0 30px;
  line-height: 1.6;
  width: 90%;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  margin-bottom: 30px;
}

.btn {
  padding: 14px 26px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}

.primary-btn {
  background: linear-gradient(90deg, #0043a8, #00c7b7);
  color: white;
}

.secondary-btn {
  border: 2px solid #0043a8;
  color: #0043a8;
  background: white;
}

.rating img {
  width: 20px;
  margin-left: 20px;
}

.rating span {
  font-size: 14px;
  color: #777;
}

/* RIGHT HERO IMAGE */
.hero-right {
  position: relative;
  display: flex;
  justify-content: center;
}

.circle-outline {
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: 3px solid #cdd9e8;
  position: absolute;
  top: 0;
  right: 10%;
}

.hero-img {
  width: 420px;
  position: relative;
  z-index: 10;
}













/* ===============================
   GLOBAL
================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #0b304a;
}

.container {
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}

/* ===============================
   NAVBAR
================================ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  /* border-bottom: 1px solid #e6edf5; */
}

.nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 78px;
}

.logo {
  width: 140px;
}

.nav-links {
  display: flex;
  align-items: center;
}

/* NAV LINKS */
.nav-links a {
  margin-left: 32px;
  text-decoration: none;
  color: #0b304a;
  font-weight: 500;
  position: relative;
}

/* CONTACT BUTTON */
.contact-btn {
  background: #0fc3c9;
  padding: 10px 20px;
  border-radius: 6px;
  color: white !important;
}

/* ===============================
   MEGA DROPDOWN (ABOUT US)
================================ */
.nav-item.has-dropdown {
  position: relative;
}

/* FULL-WIDTH STRIP */
.nav-dropdown-strip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);

  width: 40vw;
  background: #ffffff;
  border-top: 1px solid #e6edf5;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
  margin-top: 1.5vh;

  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
}

/* INNER ALIGNMENT */
.dropdown-inner {
  max-width: 1200px;
  margin: auto;
  padding: 20px 20px;
  display: flex;
  justify-content: center;
  gap: 42px;
}

/* DROPDOWN LINKS */
.dropdown-inner a {
  font-size: 14px;
  font-weight: 500;
  color: #00b3b8;
  text-decoration: none;
}

.dropdown-inner a:hover {
  text-decoration: underline;
}

/* SHOW ON HOVER */
.nav-item.has-dropdown:hover .nav-dropdown-strip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}





/* ===============================
   MOBILE NAV CONTROLS
================================ */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
}

.menu-toggle span {
  width: 24px;
  height: 2px;
  background: #0b304a;
  border-radius: 2px;
}

/* MOBILE MENU */
@media (max-width: 768px) {

  .menu-toggle {
    display: flex;
  }

  .nav-links {
    position: fixed;
    top: 78px;
    left: 0;
    width: 100%;
    background: white;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    gap: 20px;

    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s ease;
  }

  .nav-links.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-links a {
    margin-left: 0;
    font-size: 16px;
  }

  /* MOBILE DROPDOWN */
  .nav-item.has-dropdown {
    width: 100%;
  }

  .nav-dropdown-strip {
    position: static;
    width: 100%;
    transform: none;
    box-shadow: none;
    border: none;
    opacity: 1;
    visibility: visible;
    display: none;
  }

  .nav-item.has-dropdown.open .nav-dropdown-strip {
    display: block;
  }

  .dropdown-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0 0;
  }

  .contact-btn {
    width: 100%;
    text-align: center;
  }
}


.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
}

.menu-toggle span {
  width: 26px;
  height: 3px;
  background: #0b304a;
  border-radius: 2px;
}


@media (max-width: 900px) {

  .menu-toggle {
    display: flex;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    display: none;
    gap: 16px;
    z-index: 999;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    margin: 0;
    width: 100%;
  }

  /* DROPDOWN FIX FOR MOBILE */
  .nav-dropdown-strip {
    position: static;
    width: 100%;
    display: none;
    background: transparent;
    box-shadow: none;
    padding-left: 16px;
  }

  .has-dropdown.open .nav-dropdown-strip {
    display: block;
  }

  .dropdown-inner {
    flex-direction: column;
    gap: 12px;
  }
}


@media (max-width: 900px) {

  .menu-toggle {
    display: flex;
  }

  .nav-links {
    position: fixed;
    top: 78px;
    left: 0;
    width: 100%;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(12px);
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    gap: 18px;
    display: none;
    z-index: 999;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    margin: 0;
    width: 100%;
    font-size: 16px;
  }

  /* MOBILE DROPDOWN */
  .nav-dropdown-strip {
    position: static;
    width: 100%;
    display: none;
    box-shadow: none;
    background: transparent;
    padding-left: 16px;
  }

  .nav-item.has-dropdown.open .nav-dropdown-strip {
    display: block;
  }

  .dropdown-inner {
    flex-direction: column;
    gap: 12px;
  }

  .contact-btn {
    width: 100%;
    text-align: center;
  }
}







/* ===============================
   NAVBAR (UPDATED FOR WORDPRESS)
================================ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

.nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 78px;
}

/* WORDPRESS MENU FIX */
.nav-links ul {
  display: flex;
  align-items: center;
  list-style: none; /* Removes the dots from your screenshot */
  margin: 0;
  padding: 0;
}

.nav-links ul li {
  position: relative;
}

/* Exact Figma spacing and color for links */
.nav-links ul li a {
  margin-left: 32px;
  text-decoration: none;
  color: #0b304a;
  font-weight: 500;
  display: inline-block;
  transition: color 0.3s ease;
}

/* Contact Button Styling for WP Menu Item */
/* Target the LI that has the 'contact-btn' class assigned in Admin */
.nav-links ul li.contact-btn a {
  background: #0fc3c9;
  padding: 10px 20px;
  border-radius: 6px;
  color: white !important;
}

/* ===============================
   MEGA DROPDOWN (SUB-MENU)
================================ */
.nav-links ul .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);

  width: 40vw;
  background: #ffffff;
  border-top: 1px solid #e6edf5;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
  margin-top: 1.5vh;

  /* Mimics your .dropdown-inner flex layout */
  display: flex;
  justify-content: center;
  gap: 42px;
  padding: 20px;
  list-style: none;

  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
}

/* Dropdown link specific color */
.nav-links ul .sub-menu li a {
  margin: 0;
  font-size: 14px;
  color: #00b3b8;
}

/* Hover triggers */
.nav-links ul li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}













/* ===============================
   HERO SECTION
================================ */
.hero-section {
  background: #eef3f7;
  padding: 80px 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.hero-left h1 {
  font-size: 44px;
  line-height: 1.15;
}

.hero-left h1 span {
  color: #008cbe;
}

.hero-left h2 {
  font-size: 24px;
  margin-top: 12px;
  font-weight: 400;
}

.hero-description {
  margin: 18px 0 30px;
  line-height: 1.6;
  width: 90%;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  margin-bottom: 30px;
}

/* BUTTONS */
.btn {
  padding: 14px 26px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}

.primary-btn-one {
  background: linear-gradient(90deg, #0043a8, #00c7b7);
  color: white;
}

.secondary-btn-two {
  border: 2px solid #0043a8;
  color: #0043a8;
  background: white;
}


/* BUttons */
/* Base pill button styles */
.primary-btn-one,
.secondary-btn-two {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 50px; /* Creates the pill shape */
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  border: none; /* Reset border, will be overridden for secondary */
  min-width: 160px; /* Optional: ensures consistent width */
}

/* Your primary button with pill styling */
.primary-btn-one {
  background: linear-gradient(90deg, #0043a8, #00c7b7);
  color: white;
  box-shadow: 0 4px 15px rgba(0, 67, 168, 0.2);
}

.primary-btn-one:hover {
  background: linear-gradient(90deg, #003688, #00b3a4);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 67, 168, 0.3);
}

.primary-btn-one:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(0, 67, 168, 0.2);
}

/* Your secondary button with pill styling */
.secondary-btn-two {
  border: 2px solid #0043a8;
  color: #0043a8;
  background: white;
  padding: 12px 30px; /* Adjusted for border */
}

.secondary-btn-two:hover {
  background: #0043a8;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 67, 168, 0.15);
}

.secondary-btn-two:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(0, 67, 168, 0.1);
}

/* For links */
a.primary-btn-one,
a.secondary-btn-two {
  text-decoration: none;
}

/* For buttons */
button.primary-btn-one,
button.secondary-btn-two {
  font-family: inherit; /* Ensures font consistency */
}

/* Optional: Active/Focus states for accessibility */
.primary-btn-one:focus,
.secondary-btn-two:focus {
  outline: 2px solid rgba(0, 67, 168, 0.5);
  outline-offset: 2px;
}

/* Optional: Disabled states */
.primary-btn-one:disabled,
.secondary-btn-two:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.primary-btn-one:disabled:hover,
.secondary-btn-two:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Optional: Different sizes if needed */
.primary-btn-one.small,
.secondary-btn-two.small {
  padding: 10px 24px;
  font-size: 14px;
  min-width: 120px;
}

.primary-btn-one.large,
.secondary-btn-two.large {
  padding: 16px 40px;
  font-size: 18px;
  min-width: 200px;
}















/* RATING */
.rating img {
  width: 20px;
  margin-left: 20px;
}

.rating span {
  font-size: 14px;
  color: #777;
}

/* ===============================
   HERO IMAGE
================================ */
.hero-right {
  position: relative;
  display: flex;
  justify-content: center;
}

.circle-outline {
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: 3px solid #cdd9e8;
  position: absolute;
  top: 0;
  right: 10%;
}

.hero-img {
  width: 420px;
  position: relative;
  z-index: 10;
}













/* Services section */
/* Variables for Custom Colors */
:root {
    --dava-blue: #3641b6;
    --title-blue: #1D3E88; /* Deep Blue for Card Titles and Secondary Header */
    --light-bg: #f6f7ff;
    --text-color: #6b7280; /* Gray-600 */
    --primary-text: #1f2937; /* Gray-900 */
}

/* Base Styles */
.services-section {
    padding-top: 4rem; /* py-16 */
    padding-bottom: 4rem; /* py-16 */
    background-color: #ffffff;
}

/* Responsive Padding for the Section */
@media (min-width: 768px) {
    .services-section {
        padding-top: 6rem; /* md:py-24 */
        padding-bottom: 6rem; /* md:py-24 */
    }
}

/* Container for Content Width and Centering */
.container {
    max-width: 1280px; /* max-w-7xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
}

@media (min-width: 640px) {
    .container {
        padding-left: 1.5rem; /* sm:px-6 */
        padding-right: 1.5rem; /* sm:px-6 */
    }
}

@media (min-width: 1024px) {
    .container {
        padding-left: 2rem; /* lg:px-8 */
        padding-right: 2rem; /* lg:px-8 */
    }
}

/* Primary Header Styling */
.header-primary {
    text-align: center;
    margin-bottom: 3rem; /* mb-12 */
}

@media (min-width: 1024px) {
    .header-primary {
        margin-bottom: 4rem; /* lg:mb-16 */
    }
}

.header-primary-title {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 800; /* font-extrabold */
    color: var(--dava-blue);
    letter-spacing: -0.025em; /* tracking-tight */
    margin-bottom: 2rem; /* mb-4 */
    margin-top: 6rem;
    color: #1D3E88;
}

@media (min-width: 640px) {
    .header-primary-title {
        font-size: 2.25rem; /* sm:text-4xl */
    }
}

.header-primary-text {
    max-width: 56rem; /* max-w-4xl */
    margin-left: auto;
    margin-right: auto;
    color: var(--text-color);
    line-height: 1.625; /* leading-relaxed */
    margin-bottom: 2rem;
}

/* Secondary Header Styling */
.header-secondary {
    text-align: center;
    margin-bottom: 4rem; /* mb-10 */
}

.header-secondary-title {
    font-size: 1.25rem; /* text-xl */
    font-weight: 700; /* font-bold */
    color: var(--title-blue); /* Matches card titles */
}

@media (min-width: 640px) {
    .header-secondary-title {
        font-size: 1.5rem; /* sm:text-2xl */
    }
}

/* Services Grid (Layout) */
.services-grid {
    display: grid;
    /* Default to 1 column on mobile (grid-cols-1) */
    grid-template-columns: 1fr;
    gap: 1.5rem; /* gap-6 */
}

/* Tablet Layout (2 columns) - Starts at 768px (md:) */
@media (min-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr); /* md:grid-cols-2 */
    }
}

/* Desktop Layout (4 columns) - Starts at 1024px (lg:) */
@media (min-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(4, 1fr); /* lg:grid-cols-4 */
    }
}








/* --- SERVICES GRID --- */
.services-grid {
    display: grid;
    /* 4 columns on desktop as per your screenshot */
    grid-template-columns: repeat(4, 1fr); 
    gap: 24px; /* Space between cards */
    padding: 40px 0;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- SERVICE CARD --- */
.service-card {
    background-color: #f0f4ff; /* The soft light blue background */
    border-radius: 12px;
    padding: 30px 25px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    text-align: left; /* Essential: everything is left-aligned */
    height: 100%; /* Ensures all cards match height */
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

/* --- ICON STYLING --- */
.card-icon {
    margin-bottom: 20px;
}

.icon-img {
    width: 50px; /* Adjust based on your actual icon size */
    height: auto;
}

/* --- TYPOGRAPHY --- */
.card-title {
    font-size: 20px;
    font-weight: 800; /* Extra bold for the title */
    color: #1e3a8a;    /* Deep navy blue */
    margin-bottom: 12px;
    line-height: 1.3;
}

.card-description {
    font-size: 15px;
    color: #4b5563;    /* Professional slate grey */
    line-height: 1.6;
    margin: 0;
}

/* --- RESPONSIVE FIXES --- */
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }
}

@media (max-width: 600px) {
    .services-grid {
        grid-template-columns: 1fr; /* 1 column on mobile */
    }
}




/* --- GRID LAYOUT --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns as per Figma */
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* --- CARD STYLING --- */
.service-card {
    background-color: #f3f6ff; /* Soft blue-ish background from design */
    border-radius: 12px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Keeps everything left-aligned */
    text-align: left;
    height: 100%;
    box-sizing: border-box;
}

/* --- ICON SPACING --- */
.card-icon {
    margin-bottom: 24px; /* Space between icon and title */
}

.icon-img {
    width: 48px; /* Standard premium icon size */
    height: auto;
    display: block;
}

/* --- TEXT STYLING --- */
.card-title {
    font-size: 18px;
    font-weight: 800; /* Extra bold */
    color: #1a365d;    /* Dark navy blue */
    margin-bottom: 12px;
    line-height: 1.2;
}

.card-description {
    font-size: 14px;
    color: #4a5568;    /* Professional grey */
    line-height: 1.5;
    margin: 0;
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .services-grid { grid-template-columns: 1fr; }
}




/* --- THE CARD --- */
.service-card {
    background-color: #f0f4ff; /* The specific light blue tint from the image */
    border-radius: 12px;
    padding: 32px 28px;      /* Generous internal spacing */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Hard left-alignment for all elements */
    text-align: left;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid transparent; /* Keeps layout stable if you add a hover border */
}

/* --- THE ICON (Top Element) --- */
.card-icon {
    margin-bottom: 28px; /* Large gap before the title as seen in image */
}

.icon-img {
    width: 44px;  /* Sizing to match the visual weight of the icons */
    height: auto;
    display: block;
}

/* --- THE TEXT CONTENT --- */
.card-title {
    font-size: 19px;
    font-weight: 800;  /* Very bold as seen in the screenshot */
    color: #1D3E88;     /* Deep navy blue */
    margin-bottom: 14px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.card-description {
    font-size: 15px;
    color: #334155;     /* Dark slate grey for readability */
    line-height: 1.5;   /* Clean line spacing for body text */
    margin: 0;
}











/* SERVICE CATEGORIES SECTION */
.categories-section {
  padding: 120px 0;
  background: #fff;
}

.section-title {
  text-align: center;
  font-size: 42px;
  font-weight: 800;
  color: #0b1d4f;
  margin-bottom: 80px;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

.cat-card {
  background: #f8faff;
  border-radius: 20px;
  padding: 40px 24px;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(11, 29, 79, 0.06);
}

.cat-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 20px 40px rgba(11, 29, 79, 0.12);
}

.cat-card img {
  height: 80px;
  margin-bottom: 20px;
}

.cat-card p {
  font-size: 17px;
  font-weight: 600;
  color: #0b1d4f;
  margin: 0;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .testimonial-grid,
  .categories-grid {
    grid-template-columns: 1fr;
    gap: 60px;
    padding: 0 30px;
  }
  .testimonial-photo { order: -1; text-align: center; }
  .testimonial-text h2 { font-size: 44px; text-align: center; }
  .quote-mark { margin: 0 auto 32px; }
  .testimonial-text p { margin: 0 auto 40px; text-align: center; }
  .categories-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .testimonial-section { padding: 100px 0; }
  .categories-section { padding: 80px 0; }
  .section-title { font-size: 36px; margin-bottom: 60px; }
  .categories-grid { grid-template-columns: 1fr; }
  .cat-card { padding: 32px 20px; }
}




/* Premium Enhancements */
/* --- GRID CONTAINER --- */
.services-grid {
    perspective: 1000px; /* Enables 3D depth for the GSAP rotationX */
}

/* --- THE CARD --- */
.service-card {
    /* ... your existing styles ... */
    will-change: transform, opacity;
    transition: background-color 0.3s ease, transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* --- THE HOVER STATE (Premium Interaction) --- */
.service-card:hover {
    background-color: #e8eeff; /* Slightly deeper blue on hover */
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(30, 58, 138, 0.08);
}

/* --- ICON CONTAINER --- */
.card-icon {
    /* Ensures the icon has space to "float" without moving the text */
    height: 60px; 
    display: flex;
    align-items: center;
}






/* TESTIMONIAL SECTION */
.testimonial-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 450px;
}

.testimonial-left {
  background: linear-gradient(145deg, #0c2047, #0b2b6f);
  color: white;
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.testimonial-left h2 {
  font-size: 32px;
  margin-bottom: 25px;
}

.quote-icons span {
  font-size: 48px;
  color: #00d4c9;
  margin-right: 8px;
  font-weight: bold;
}

.testimonial-text {
  line-height: 1.7;
  margin: 20px 0 40px;
  max-width: 500px;
  font-size: 16px;
}

.testimonial-author .name {
  font-weight: 700;
  color: #28e0d6;
  font-size: 18px;
}

.testimonial-author .role {
  font-size: 14px;
  opacity: 0.85;
}

/* Right Image */
.testimonial-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* MOBILE */
@media (max-width: 900px) {
  .testimonial-section {
    grid-template-columns: 1fr;
  }

  .testimonial-right img {
    height: 350px;
    object-fit: cover;
  }

  .testimonial-left {
    padding: 50px 30px;
    text-align: left;
  }
}

@media (max-width: 600px) {
  .testimonial-left h2 {
    font-size: 26px;
  }

  .testimonial-text {
    font-size: 15px;
  }
}






/* --- SECTION STYLING --- */
.sc-group-section {
  padding: 80px 0;
  background-color: #ffffff;
  text-align: center;
  margin-top: 6rem;
  margin-bottom: 6rem;
}

.sc-group-container {
  max-width: 1000px; /* Tight container to match image spacing */
  margin: 0 auto;
  padding: 0 20px;
}

.sc-group-main-title {
  font-size: 36px;
  font-weight: 800;
  color: #1a365d;
  margin-bottom: 50px;
  margin-bottom: 4rem;
}

/* --- THE GRID --- */
.sc-group-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns across */
  gap: 20px;
  justify-content: center;
}

/* --- THE CARD --- */
.sc-group-card {
  background-color: #f5f7f9; /* Very light grey/blue background */
  border-radius: 16px;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  min-height: 200px;
}

.sc-group-card:hover {
  transform: translateY(-5px);
}

.sc-icon-box {
  height: 60px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.sc-icon-box img {
  width: 50px; /* Adjust size to match your SVGs */
  height: auto;
}

.sc-group-card p {
  font-size: 16px;
  font-weight: 700;
  color: #1e3a8a;
  margin: 0;
  line-height: 1.3;
}



/* --- THE GRID CONTAINER --- */
.sc-group-grid {
  display: grid;
  /* Creates exactly 3 columns of equal width */
  grid-template-columns: repeat(3, 1fr); 
  gap: 25px;
  max-width: 1100px;
  margin: 0 auto;
  justify-content: center;
}

/* --- THE CARD --- */
.sc-group-card {
  width: 100%; 
  background-color: #f5f7f9;
  border-radius: 20px;
  padding: 50px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* --- THE CENTERING LOGIC FOR BOTTOM 2 --- */

/* Tell the 7th card to span into the second column area slightly */
.sc-group-card:nth-child(7) {
  grid-column: 1 / 2;
  /* Move it right by half a column + half a gap */
  transform: translateX(55%); 
}

/* Tell the 8th card to shift right as well to stay next to it */
.sc-group-card:nth-child(8) {
  grid-column: 2 / 3;
  /* Move it right by half a column + half a gap */
  transform: translateX(45%); 
}

/* --- RESPONSIVE FIX --- */
@media (max-width: 900px) {
  .sc-group-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sc-group-card:nth-child(7),
  .sc-group-card:nth-child(8) {
    grid-column: auto;
    transform: none; /* Remove centering shift on mobile/tablet */
  }
}
/* Update your 7th card rule */
.sc-group-card:nth-child(7) {
  grid-column: 1 / 2;
  transform: translateX(55%); 
  margin-right: 30px; /* Adds space to the right of the first bottom card */
}

/* Update your 8th card rule */
.sc-group-card:nth-child(8) {
  grid-column: 2 / 3;
  transform: translateX(45%); 
  margin-left: 30px; /* Adds space to the left of the second bottom card */
}





/* hover effect */
.sc-group-card {
    position: relative;
    overflow: hidden;
    transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 1;
}

.sc-group-card:hover {
    /* Lift effect */
    transform: translateY(-12px) scale(1.03) !important; 
    background: #ffffff;
    
    /* Premium Deep Shadow with a hint of brand color */
    box-shadow: 0 20px 40px rgba(0, 194, 203, 0.15); 
}

/* Add a subtle shine sweep effect on hover */
.sc-group-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.6), transparent);
    transform: skewX(-25deg);
    transition: none;
}

.sc-group-card:hover::after {
    left: 150%;
    transition: all 0.8s ease;
}








.sc-group-main-title {
    will-change: transform, opacity, filter;
    /* This ensures the text looks crisp even while moving */
    -webkit-font-smoothing: antialiased; 
    margin-bottom: 60px;
}

/* Optional: Add a subtle gradient to the title for that Figma look */
.sc-group-main-title {
    background: linear-gradient(90deg, #1e3a8a 0%, #00c2cb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}



.sc-group-card {
    /* Ensure the card fills its grid space completely */
    width: 100%;
    min-height: 220px; /* Adjust based on your Figma design */
    box-sizing: border-box;
    
    /* This ensures smooth transitions if you have hover effects */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    
    /* This helps the browser render the card at full size correctly */
    transform: scale(1); 
}

/* Ensure the grid cells are equal */
.sc-group-grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch; /* Forces all cards in a row to be the same height */
}






/* --- MOBILE RESPONSIVE STACKING --- */
@media (max-width: 768px) {
  .sc-group-grid {
    /* Changes from 3 columns to 1 column */
    grid-template-columns: 1fr; 
    gap: 20px;
    padding: 0 15px;
  }

  /* Reset the "Diamond" centering for the last two cards */
  .sc-group-card:nth-child(7),
  .sc-group-card:nth-child(8) {
    grid-column: auto;   /* Makes them take up a normal single cell */
    transform: none;      /* Removes the desktop horizontal shift */
    margin-left: 0;       /* Removes the centering margin */
    margin-right: 0;      /* Removes the centering margin */
    width: 100%;          /* Ensures they fill the screen width */
  }
  
  .sc-group-card {
    padding: 30px 20px;   /* Slightly smaller padding for smaller screens */
  }
}


























/* CTA SECTION */
.cta-section {
  margin-top: 60px;
  padding: 40px 20px;
}

.cta-card {
  background: linear-gradient(150deg, #0d4ccb, #0dc5c0);
  padding: 35px;
  border-radius: 20px;
  max-width: 750px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}

.cta-left h3 {
  font-size: 28px;
}

.cta-btn {
  margin-top: 20px;
  padding: 12px 26px;
  background: white;
  color: #0d4ccb;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: bold;
}

.cta-right img {
  width: 130px;
}



















/* WHY SECTION */
.why-section {
  padding: 100px 0;
  background: linear-gradient(135deg, #1e3a8a 0%, #00c2cb 100%); /* Match your background gradient */
  text-align: center;
  color: white;
  border-bottom-left-radius: 50% 12%;
  border-bottom-right-radius: 50% 12%;
}

.why-title {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 50px;
}

.accordion-container {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* --- THE GLASS CARD --- */
.accordion-item {
  background: rgba(255, 255, 255, 0.1); /* Semi-transparent */
  backdrop-filter: blur(10px);         /* The "Glass" blur effect */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;                 /* Pill shape from design */
  overflow: hidden;
  transition: all 0.3s ease;
}

.accordion-header {
  width: 100%;
  padding: 20px 40px;
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-align: left;
}

.arrow {
  font-size: 12px;
  transition: transform 0.3s ease;
}

.arrow {
  display: inline-block; /* Essential for rotation to work */
  will-change: transform;
}

/* --- CONTENT AREA (Hidden by default) --- */
.accordion-content {
  max-height: 0; /* Important for GSAP/CSS animation */
  overflow: hidden;
  padding: 0 40px;
  text-align: left;
  opacity: 0;
}

.accordion-content p {
  padding-bottom: 25px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin: 0;
}

/* Active State */
.accordion-item.active {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.accordion-item.active .arrow {
  transform: rotate(180deg);
}




/* --- THE WRAPPER --- */
.feedback-section {
  width: 100% !important;
  padding: 100px 0;
  background-color: #ffffff;
  display: flex;
  justify-content: center; /* Horizontally centers the feedback-container */
}

.feedback-container {
  width: 100%;
  max-width: 1200px; /* Adjust this to match your site's width */
  margin: 0 auto;
  text-align: center;
}

.feedback-main-title {
  font-size: 42px;
  font-weight: 800;
  color: #1a365d;
  margin-bottom: 60px;
}

/* --- THE GRID ENGINE --- */
.feedback-grid {
  display: grid !important;
  /* Fixed 350px width ensures they aren't skinny */
  grid-template-columns: repeat(3, 350px) !important; 
  justify-content: center !important; /* Forces the columns to the middle */
  gap: 30px;
  width: 100%;
}

/* --- THE CARD --- */
.feedback-card {
  background-color: #f0f9ff;
  border: 1.5px solid #1e40af;
  border-radius: 30px;
  padding: 45px 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 480px;
  box-sizing: border-box;
}

.feedback-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 25px;
}

.google-brand-img {
  width: 110px; /* Adjust based on your logo image */
  height: auto;
  margin-bottom: 8px;
}

.google-label-text {
  font-size: 14px;
  font-weight: 700;
  color: #1e3a8a;
  margin-bottom: 5px;
}

.feedback-stars {
  color: #f59e0b;
  font-size: 22px;
  letter-spacing: 2px;
}

.feedback-body-text {
  font-size: 18px;
  line-height: 1.6;
  color: #1e3a8a;
  font-weight: 600;
  margin-bottom: 30px;
  flex-grow: 1; /* Pushes the author to the very bottom */
}

.feedback-author {
  font-size: 18px;
  font-weight: 800;
  color: #1a365d;
  margin-top: auto;
}

/* --- PAGINATION --- */
.feedback-pagination {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 50px;
}

.fb-dot {
  width: 12px;
  height: 12px;
  background-color: #bfdbfe;
  border-radius: 50%;
}

.fb-dot.active {
  background-color: #1e3a8a;
}

/* --- TABLET & MOBILE --- */
@media (max-width: 1150px) {
  .feedback-grid {
    grid-template-columns: repeat(2, 350px) !important;
  }
}

@media (max-width: 768px) {
  .feedback-grid {
    grid-template-columns: 1fr !important;
    max-width: 350px;
    margin: 0 auto !important;
  }
}





/* Pricing Section */
.pricing-section {
  padding: 100px 0;
  background-color: #f8fbff; /* Very light blue background */
  text-align: center;
}

.pricing-main-title {
  font-size: 42px;
  font-weight: 800;
  color: #1a365d;
  margin-bottom: 15px;
}

.pricing-subtitle {
  max-width: 800px;
  margin: 0 auto 60px;
  color: #5b769e;
  line-height: 1.6;
  font-size: 16px;
}

/* Grid Alignment */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto 80px;
  padding: 0 20px;
}

/* Card Styling */
.price-card {
  background: #ffffff;
  border-radius: 40px;
  padding: 50px 40px;
  box-shadow: 0 10px 30px rgba(26, 54, 93, 0.05);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
  border: 1px solid #e2e8f0;
}

.price-card:hover {
  transform: translateY(-10px);
}

.card-header h3 {
  color: #1a365d;
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 10px;
}

.price-amount {
  font-size: 48px;
  font-weight: 800;
  color: #00c2cb; /* Signature Teal */
  margin-bottom: 30px;
}

.price-amount span {
  font-size: 18px;
  color: #5b769e;
  font-weight: 500;
}

/* Features List */
.price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
  text-align: left;
  flex-grow: 1;
}

.price-features li {
  color: #1a365d;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  padding-left: 20px;
  position: relative;
}

.price-features li::before {
  content: "•";
  color: #00c2cb;
  position: absolute;
  left: 0;
  font-weight: 900;
}

/* Buttons */
.btn-signup {
  display: block;
  background: linear-gradient(90deg, #00c2cb 0%, #1e3a8a 100%);
  color: #fff;
  text-decoration: none;
  padding: 15px;
  border-radius: 12px;
  font-weight: 700;
  transition: opacity 0.3s;
}

.btn-signup:hover {
  opacity: 0.9;
}

/* Footer Help Section */
.pricing-help-footer h4 {
  font-size: 24px;
  color: #1a365d;
  margin-bottom: 30px;
}

.help-options {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.help-box {
  padding: 20px 40px;
  border-radius: 15px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-width: 280px;
}

.primary-help {
  background: linear-gradient(90deg, #00c2cb 0%, #1a365d 100%);
  color: white;
}

.secondary-help {
  border: 2px solid #1a365d;
  color: #1a365d;
}

.help-box strong {
  font-size: 18px;
  margin-bottom: 5px;
}

.help-box span {
  font-size: 13px;
  opacity: 0.9;
}



/* Premium */
.pricing-grid {
  /* ... existing styles ... */
  perspective: 1000px; /* Enables 3D depth for GSAP */
}

.price-card {
  /* ... existing styles ... */
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* Premium Shimmer Effect for the Featured Card */
.featured-card {
  position: relative;
  overflow: hidden;
  border: 2px solid #00c2cb !important;
}

.featured-card::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 20%;
  height: 200%;
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(30deg);
  transition: none;
}

/* Trigger shimmer on card entrance via GSAP or CSS */
.featured-card:hover::after {
  left: 120%;
  transition: all 0.7s ease-in-out;
}

/* Add this to your CSS */
.pricing-grid {
    perspective: 1200px; /* Required for the rotationX 3D effect in GSAP */
}

.price-card {
    will-change: transform, opacity;
    /* Remove any CSS transitions on 'all' or 'transform' to let GSAP lead */
    transition: box-shadow 0.3s ease, border-color 0.3s ease; 
}

/* Premium Button Hover Interaction */
.btn-signup {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.3s ease;
}

.btn-signup:hover {
    transform: scale(1.05);
}

/* The "Featured" Card Glow */
.featured-card {
    position: relative;
    z-index: 2; /* Sits slightly above others */
}

/* Premium CTA Pulsate & Glow */
.btn-signup {
    position: relative;
    overflow: hidden;
    /* This creates the 'Breathing' glow effect */
    animation: cta-pulse 3s infinite ease-in-out;
    box-shadow: 0 0 0 0 rgba(0, 194, 203, 0.4);
    transition: all 0.3s ease;
    z-index: 1;
}

/* The Continuous Pulse Animation */
@keyframes cta-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 194, 203, 0.5);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 20px 5px rgba(0, 194, 203, 0.2);
        transform: scale(1.02); /* Very subtle growth */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 194, 203, 0.5);
        transform: scale(1);
    }
}

/* The 'Glow Shimmer' that sweeps across the button */
.btn-signup::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    animation: shimmer 4s infinite;
}

@keyframes shimmer {
    0% { left: -150%; }
    20% { left: 150%; }
    100% { left: 150%; } /* Pause between shimmers */
}

/* Featured Card Button specifically (more aggressive glow) */
.featured-card .btn-signup {
    animation: featured-cta-pulse 2.5s infinite ease-in-out;
    background: linear-gradient(90deg, #00c2cb 0%, #1e3a8a 100%);
}

@keyframes featured-cta-pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 194, 203, 0.7); }
    50% { box-shadow: 0 0 25px 10px rgba(0, 194, 203, 0.3); }
    100% { box-shadow: 0 0 0 0 rgba(0, 194, 203, 0.7); }
}

/* Update your .btn-signup CSS */
.btn-signup {
    display: inline-block;
    padding: 16px 32px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    /* High-end gradient */
    background: linear-gradient(135deg, #00c2cb 0%, #1e3a8a 100%);
    color: white;
    position: relative;
    z-index: 1;
    /* Smooth transition for the magnetic effect */
    will-change: transform; 
}

/* A soft shadow aura that appears only on hover */
.btn-signup:hover::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(0, 194, 203, 0.4) 0%, rgba(0, 194, 203, 0) 70%);
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.3s ease;
}


.help-box-link {
  text-decoration: none; /* Removes underline */
  display: block;
  width: 100%;
  max-width: 400px;
}

.help-box {
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.05); /* Soft border for depth */
}

/* Premium Hover Lift */
.help-box-link:hover .help-box {
  transform: translateY(-8px);
  background-color: #ffffff;
  box-shadow: 0 15px 30px rgba(0, 194, 203, 0.15);
  border-color: #00c2cb;
}

.help-box-link:hover strong {
  color: #00c2cb; /* Text turns teal on hover */
  transition: color 0.3s ease;
}




/* Responsive */
@media (max-width: 1024px) {
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .pricing-grid .price-card:last-child { grid-column: span 2; max-width: 500px; margin: 0 auto; }
}

@media (max-width: 768px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .help-options { flex-direction: column; align-items: center; }
}


/* Mobile */
@media (max-width: 768px) {
  /* 1. Reset the Grid to stack vertically */
  .pricing-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    grid-template-columns: 1fr !important; /* Safety reset */
    gap: 30px !important;
    padding: 0 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 2. Fix Card Sizing so they aren't "stuck" or narrow */
  .price-card {
    width: 100% !important;
    max-width: 400px !important; /* Keeps them looking like cards, not full-width bars */
    min-height: auto !important; /* Allows card to grow with text */
    margin: 0 auto !important;
    padding: 40px 25px !important;
  }

  /* 3. Scale down the fonts so they don't wrap weirdly */
  .price-amount {
    font-size: 40px !important;
  }

  .pricing-main-title {
    font-size: 28px !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
  }

  /* 4. Fix the Help Section buttons */
  .help-options {
    flex-direction: column !important;
    gap: 15px !important;
    width: 100% !important;
    padding: 0 20px !important;
  }

  .help-box {
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
}








/* RATINGS SECTION */
.ratings-section {
  padding: 80px 0;
  background-color: #fff;
}

.ratings-grid {
  display: flex;
  justify-content: center;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.rating-card {
  flex: 1;
  max-width: 260px;
  background: #fff;
  border: 1.5px solid #1e3a8a; /* Deep blue border from your design */
  border-radius: 20px;
  padding: 0 20px 30px 20px;
  text-align: center;
  position: relative;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* The Circular Icon that sits on the border */
.platform-icon-wrap {
  width: 80px;
  height: 80px;
  background: #fff;
  border: 1.5px solid #1e3a8a;
  border-radius: 50%;
  margin: -40px auto 15px auto; /* Pulls it up halfway */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.platform-logo {
  width: 45px;
  height: auto;
}

.platform-name {
  font-size: 16px;
  font-weight: 700;
  color: #1a365d;
  margin-bottom: 10px;
}

.rating-score {
  font-size: 24px;
  font-weight: 800;
  color: #1a365d;
  margin-bottom: 2px;
}

.review-count {
  font-size: 14px;
  color: #5b769e;
  font-weight: 600;
  margin-bottom: 10px;
}

.rating-stars {
  color: #fbbf24;
  font-size: 16px;
  letter-spacing: 1px;
}

/* Hover Interaction */
.rating-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(30, 58, 138, 0.1);
  border-color: #00c2cb; /* Turns teal on hover */
}




/* Premium */
/* Update your rating-card styles */
.rating-card {
  will-change: transform, box-shadow;
  transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
}

.rating-card:hover {
  transform: translateY(-15px) scale(1.02);
  box-shadow: 0 20px 40px rgba(26, 54, 93, 0.12);
  border-color: #00c2cb; /* Matches your brand teal */
}

/* Make the logo spin slightly on hover */
.rating-card:hover .platform-icon-wrap {
  transform: translateY(-5px) rotate(10deg);
  border-color: #00c2cb;
  transition: all 0.5s ease;
}

/* Star glowing effect */
.rating-card:hover .rating-stars {
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.6);
  transform: scale(1.1);
  transition: transform 0.3s ease;
}


/* Mobile Responsiveness */
@media (max-width: 900px) {
  .ratings-grid {
    flex-wrap: wrap;
    gap: 60px 20px; /* More vertical gap for the popped icons */
  }
  .rating-card {
    flex: 0 1 45%;
  }
}










/* FAQ SECTION */
.faq-section {
  padding: 100px 0;
  background-color: #fff;
}

.faq-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

.faq-title {
  text-align: center;
  font-size: 42px;
  font-weight: 800;
  color: #1a365d;
  margin-bottom: 50px;
}

.faq-item {
  background-color: #f0f4f8; /* Light gray/blue pill background */
  border-radius: 50px;
  margin-bottom: 15px;
  overflow: hidden; /* Clips the answer when closed */
  transition: all 0.3s ease;
}

.faq-question {
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 700;
  color: #1a365d;
  font-size: 18px;
}

.faq-plus {
  font-size: 28px;
  color: #00c2cb; /* Your signature teal */
  transition: transform 0.4s ease;
  line-height: 1;
}

.faq-answer {
  max-height: 0; /* Hidden by default */
  opacity: 0;
  padding: 0 40px;
  color: #5b769e;
  line-height: 1.6;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Active State (controlled by JS) */
.faq-item.active {
  background-color: #e2e8f0;
}

.faq-item.active .faq-answer {
  max-height: 300px; /* Large enough for content */
  opacity: 1;
  padding-bottom: 30px;
}

.faq-item.active .faq-plus {
  transform: rotate(45deg); /* Turns + into x */
  color: #1a365d;
}
















.footer-final-cta {
  background: linear-gradient(135deg, #2d3e8f 0%, #1a7b8e 100%);
  color: #ffffff;
  padding: 80px 0 0;
  font-family: 'Inter', sans-serif;
}

.footer-cta-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 60px;
  margin-bottom: 60px;
  position: relative;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Vertical divider line between columns */
.footer-cta-wrapper::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-50%);
}

.footer-cta-left {
  flex: 1;
  min-width: 300px;
  text-align: center;
}

.footer-cta-left h2 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 20px 0;
  color: #ffffff;
}

.footer-cta-left p {
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 30px 0;
  opacity: 0.95;
  font-weight: 300;
}

.footer-btn-cta {
  display: inline-block;
  background: #ffffff;
  color: #2d3e8f;
  font-size: 18px;
  font-weight: 600;
  padding: 15px 50px;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.footer-btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* RIGHT SIDE */
.footer-cta-right {
  flex: 1;
  min-width: 300px;
  display: flex;
  gap: 80px;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Logo Contact Section */
.logo-contact {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-logo {
  margin-bottom: 0;
}

.footer-logo-img {
  height: 50px;
  width: auto;
}

.address {
  font-size: 14px;
  line-height: 1.8;
  opacity: 0.9;
  margin: 0;
  color: white;
}

/* Contacts Section */
.contacts {
  display: flex;
  flex-direction: column;
}

.contacts h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  margin-top: 0;
  color: white;
}

.contacts a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 8px;
  opacity: 0.9;
  transition: opacity 0.2s;
}

.contacts a:hover {
  opacity: 1;
}

/* Social Icons */
.social {
  display: flex;
  gap: 12px;
  margin-top: 15px;
  align-items: center;
}

.social a {
  width: 28px;
  height: 28px;
  background: white;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: #2d3e8f;
  text-decoration: none;
  transition: transform 0.2s;
  margin-bottom: 0;
}

.social a:hover {
  transform: translateY(-2px);
}

.social .username {
  color: white;
  font-size: 14px;
  opacity: 0.9;
  margin-left: 8px;
}

/* COPYRIGHT with dark background */
.copyright {
  background: #1e2870;
  text-align: center;
  font-size: 12px;
  color: white;
  opacity: 0.8;
  margin: 0 -40px;
  padding: 20px 40px;
}

/* RESPONSIVE – Flexbox */
@media (max-width: 1080px) {
  .footer-cta-wrapper { 
    justify-content: center; 
    flex-direction: column;
    align-items: center;
  }
  .footer-cta-wrapper::before {
    display: none;
  }
  .footer-cta-left {
    text-align: center;
    width: 100%;
  }
  .footer-cta-right { 
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .footer-cta-left h2 { 
    font-size: 36px; 
  }
  .footer-cta-left p { 
    font-size: 16px; 
  }
  .footer-btn-cta { 
    padding: 14px 40px; 
    font-size: 16px; 
  }
  .footer-final-cta { 
    padding: 60px 0 0; 
  }
  .cta-wrapper { 
    gap: 40px; 
    margin-bottom: 40px; 
  }
  .footer-cta-right {
    flex-direction: column;
    gap: 40px;
    width: 100%;
    align-items: center;
    text-align: center;
  }
  .logo-contact {
    align-items: center;
  }
  .contacts {
    align-items: center;
  }
  .social {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .footer-cta-left h2 { 
    font-size: 28px; 
  }
  .container { 
    padding: 0 20px; 
  }
  .copyright {
    margin: 0 -20px;
    padding: 20px;
  }
  .footer-cta-right {
    gap: 30px;
  }
}


.footer-final-cta {
  background: linear-gradient(135deg, #2d3e8f 0%, #1a7b8e 100%);
  color: #ffffff;
  padding: 80px 0 0;
  font-family: 'Inter', sans-serif;
}

/* Top CTA Section */
.footer-cta-top {
  text-align: center;
  margin-bottom: 80px;
}

.footer-cta-top h2 {
  font-size: 5.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 20px 0;
  color: #ffffff;
}

.footer-cta-top p {
  font-size: 2.5rem;
  line-height: 1.6;
  margin: 0 0 30px 0;
  opacity: 0.95;
  font-weight: 300;
}

.footer-btn-cta {
  display: inline-block;
  background: #ffffff;
  color: #1a7b8e;
  font-size: 2rem;
  font-weight: 600;
  padding: 15px 22rem;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.foooter-btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* Footer Content Wrapper */
.footer-cta-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 60px;
  margin-bottom: 60px;
  position: relative;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Vertical divider line between columns */
.footer-cta-wrapper::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-50%);
}

.footer-cta-left {
  flex: 1;
  min-width: 300px;
  align-items: left;
}

.footer-cta-right {
  flex: 1;
  min-width: 300px;
  align-items: start;
}

/* Logo Contact Section */
.logo-contact {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-logo {
  margin-bottom: 0;
}

.footer-logo-img {
  height: 50px;
  width: auto;
}

.address {
  font-size: 14px;
  line-height: 1.8;
  opacity: 0.9;
  margin: 0;
  color: white;
}

/* Contacts Section */
.contacts {
  display: flex;
  flex-direction: column;
}

.contacts h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  margin-top: 0;
  color: white;
}

.contacts a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 8px;
  opacity: 0.9;
  transition: opacity 0.2s;
}

.contacts a:hover {
  opacity: 1;
}

/* Social Icons */
.social {
  display: flex;
  gap: 12px;
  margin-top: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.social a {
  width: 28px;
  height: 28px;
  background: white;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: #2d3e8f;
  text-decoration: none;
  transition: transform 0.2s;
  margin-bottom: 0;
}

.social a:hover {
  transform: translateY(-2px);
}

.social .username {
  color: white;
  font-size: 14px;
  opacity: 0.9;
  margin-left: 0;
}

/* COPYRIGHT with dark background */
.copyright-section{
   background: #1e2870;
   width: 100%;
}
.copyright {
  background: #1e2870;
  text-align: center;
  font-size: 12px;
  color: white;
  opacity: 0.8;
  margin: 0 -40px;
  padding: 20px 40px;
}

/* RESPONSIVE */
@media (max-width: 1080px) {
  .footer-cta-wrapper { 
    justify-content: center; 
    flex-direction: column;
    align-items: center;
  }
  .footer-cta-wrapper::before {
    display: none;
  }
  .footer-cta-left,
  .footer-cta-right {
    width: 100%;
    text-align: center;
  }
  .logo-contact {
    align-items: center;
  }
  .contacts {
    align-items: center;
  }
  .social {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .footer-cta-top h2 { 
    font-size: 36px; 
  }
  .footer-cta-top p { 
    font-size: 16px; 
  }
  .footer-btn-cta { 
    padding: 14px 40px; 
    font-size: 16px; 
  }
  .footer-final-cta { 
    padding: 60px 0 0; 
  }
  .footer-cta-top {
    margin-bottom: 60px;
  }
  .footer-cta-wrapper { 
    gap: 40px; 
    margin-bottom: 40px; 
  }
}

@media (max-width: 480px) {
  .footer-cta-top h2 { 
    font-size: 28px; 
  }
  .container { 
    padding: 0 20px; 
  }
  .copyright {
    margin: 0 -20px;
    padding: 20px;
  }
}

.footer-big-text{
  font-size: 100rem;
}




/* ===============================
   FOOTER STYLING
================================ */
.site-footer {
    background-color: #ffffff;
    padding: 40px 0;
    border-top: 1px solid #e6edf5;
    margin-top: 60px;
}

.footer-content {
    display: flex;
    justify-content: center; /* Centers the copyright text */
    align-items: center;
}

.footer-info p {
    color: #0b304a; /* Matches your body text color */
    font-size: 14px;
    font-weight: 400;
    opacity: 0.8;
}







/* Animations */
.hero-left h1, .hero-left h2, .hero-description {
    /* Helps hardware acceleration for smoother GSAP movement */
    backface-visibility: hidden;
    will-change: transform, opacity;
}

.hero-buttons {
    /* Ensure nothing overlaps the buttons so they are always clickable */
    position: relative;
    z-index: 20;
}



/* Fix for invisible text in 'Why Partner' section */
.why-section .accordion-content p {
    color: #ffffff; /* Explicitly set to white to stand out against the gradient */
    padding: 20px 40px; /* Add padding so text doesn't touch the edges */
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    opacity: 1; /* Ensure it's not hidden by opacity */
    visibility: visible;
}

/* Ensure the container actually grows to show the text */
.accordion-item.active .accordion-content {
    max-height: 500px; /* Or use the JS dynamic height */
    padding-bottom: 20px;
}

/* Fix visibility for 'Why Partner' Section */
.why-section .accordion-content {
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background: rgba(255, 255, 255, 0.05); /* Slight tint to see the box */
}

.why-section .accordion-content p {
    color: #ffffff !important; /* Force white text */
    padding: 20px 30px !important;
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    opacity: 0; /* Start hidden for animation */
    transition: opacity 0.3s ease;
}

/* Show text when active */
.accordion-item.active .accordion-content p {
    opacity: 1;
}

/* Ensure the button text is also visible */
.accordion-header span {
    color: #ffffff;
    font-weight: 600;
}

/* Fix Contact Button Background */
.nav-links ul li.contact-btn {
    padding: 0; /* Remove default padding from LI */
    margin-left: 32px;
}

.nav-links ul li.contact-btn a {
    background: #0fc3c9 !important;
    padding: 10px 24px !important;
    border-radius: 6px;
    color: white !important;
    display: inline-block;
    line-height: 1;
}

/* Navbar Flex Fix */
.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

/* Mobile Menu Toggle Styling */
.menu-toggle {
    display: none; /* Hidden on Desktop */
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
}

.menu-toggle span {
    width: 25px;
    height: 3px;
    background: #0b304a;
    transition: 0.3s;
}

/* RESPONSIVE LOGIC */
@media (max-width: 991px) {
    .menu-toggle {
        display: flex;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%; /* Hidden off-screen */
        width: 280px;
        height: 100vh;
        background: white;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        transition: 0.4s ease;
        z-index: 1000;
        padding-top: 80px;
    }

    .nav-links.is-active {
        right: 0; /* Slide in */
    }

    .nav-links ul {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 30px;
    }

    .nav-links ul li {
        margin: 15px 0;
    }

    .nav-links ul li a {
        margin-left: 0;
        font-size: 18px;
    }
    
    .nav-links ul li.contact-btn {
        margin-left: 0;
        width: 80%;
    }
}

/* Fix for the teal blocky background in your screenshot */
.nav-links ul li.contact-btn {
    background: transparent !important; /* Remove background from the LI */
    padding: 0 !important;
    margin-left: 32px;
}

.nav-links ul li.contact-btn a {
    background: #0fc3c9 !important; /* Apply color only to the button link */
    padding: 10px 24px !important;
    border-radius: 6px;
    color: white !important;
    display: inline-block;
    line-height: 1.2;
}

/* Ensure the nav list stays horizontal on desktop */
.nav-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* MOBILE FIX: Keep your original responsiveness but add the 'active' trigger */
@media (max-width: 900px) {
  .menu-toggle {
    display: flex; /* Show the hamburger */
  }

  /* Your original nav-links class, now with a toggle-able state */
  .nav-links {
    position: fixed;
    top: 78px;
    left: 0;
    width: 100%;
    background: white;
    flex-direction: column;
    padding: 24px;
    display: none; /* Hidden by default */
    z-index: 999;
  }

  /* This is what the JS will trigger */
  .nav-links.active {
    display: flex;
  }

  .nav-links ul {
    flex-direction: column;
    width: 100%;
  }

  .nav-links ul li {
    margin: 10px 0;
  }

  .nav-links ul li.contact-btn {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }
}


















/* --- MOBILE LOGO & NAV ADJUSTMENTS --- */
@media (max-width: 900px) {
  /* Reduce logo size for mobile */
  .logo {
    width: 110px; /* Smaller than your 140px desktop size */
    height: auto;
  }

  .nav-content {
    height: 70px; /* Slightly tighter navbar height for mobile */
  }

  /* Fix the Contact Button teal background */
  .nav-links ul li.contact-btn {
    background: transparent !important; /* Remove the LI block background */
    padding: 0 !important;
    margin: 10px 0;
    width: 100%;
  }

  .nav-links ul li.contact-btn a {
    background: #0fc3c9 !important; /* Keep teal only on the button */
    padding: 12px 24px !important;
    border-radius: 6px;
    color: white !important;
    display: block; /* Makes it full width on mobile menu */
    text-align: center;
  }

  /* Handle the Mobile Menu Visibility */
  .nav-links {
    display: none; /* Hidden by default */
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background: white;
    padding: 20px;
    box-shadow: 0 10px 15px rgba(0,0,0,0.05);
    z-index: 1000;
  }

  /* Class added by JavaScript */
  .nav-links.active {
    display: block;
  }

  .nav-links ul {
    flex-direction: column;
    align-items: flex-start;
    list-style: none;
    padding: 0;
  }

  .nav-links ul li a {
    margin: 10px 0;
    display: block;
    font-size: 16px;
  }
}








#tidio-chat-iframe {
    bottom: 90px !important; /* Positions it above your custom toggle */
    right: 20px !important;
}
/* Hide the default button via CSS as a backup */
#tidio-chat { display: none !important; }







#chat-toggle-btn {
    background: transparent !important; /* Removes default button background */
    border: none !important;             /* Removes the black border/square */
    outline: none !important;            /* Removes focus outline */
    padding: 0 !important;               /* Ensures the image fills the space */
    cursor: pointer;
    box-shadow: none !important;         /* Removes any shadow that might look like a square */
}

#chat-toggle-btn img {
    display: block;
    width: 60px;  /* Match your Figma sizing */
    height: auto;
}