:root{
      --brand: #0d6efd;
      --muted: #c8d6e4;
    }
 
    .navbar {
    background: white !important;
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 9999 !important;
}
.hero {
    padding-top: 120px !important; 
}

    /* PARTICLE BACKGROUND */
    #particles-js {
      position: fixed;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #051622, #083044, #09435f);
      top: 0;
      left: 0;
      z-index: 0;
    }

    body > *:not(#particles-js) {
      position: relative;
      z-index: 5;
    }

    body {
      font-family: Inter, system-ui;
      margin: 0;
      padding: 0;
      color: #e9f4ff;
    }

    /* NAVBAR */
    .navbar {
      background: white !important;
      z-index: 1000;
    }
    .navbar * { color: #18222d !important; }
    .navbar-brand strong { color: var(--brand); }

    .custom-nav .nav-link {
      position: relative;
      padding: 8px 14px;
      font-weight: 500;
      transition: .3s;
    }
    .custom-nav .nav-link:hover { color: var(--brand) !important; }

    /* Contact Button */
    .contact-btn {
      background: var(--brand);
      border: none;
      padding: 8px 20px;
      color: #fff;
      border-radius: 10px;
      font-weight: 600;
      transition: .3s;
      box-shadow: 0 4px 15px rgba(13,110,253,0.25);
    }

    /* HERO */
    .hero {
      padding: 5.5rem 0 4rem;
    }

    .hero h1 {
      color: #ffffff;
      text-shadow: 0 0 10px rgba(0,0,0,0.5);
    }

    .feature-badge {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.3);
      color: #ffffff;
      padding: 6px 10px;
      border-radius: 999px;
      font-size:.8rem;
      display:inline-flex;
      gap:.5rem;
      align-items:center;
    }

    .hero ul li { color: #ffffff !important; }
    .hero ul li i { color: #4dffb8 !important; }

  

    /* DASHBOARD IMAGE (more up + floating) */
.hero-dash-img {
  width: 95%;
  position: relative;
  left: 35px;              /* more right */
  top: 10px;              /* more up */
  z-index: 1;
  filter: drop-shadow(0px 18px 35px rgba(0,0,0,0.5));
  border-radius: 14px;
  transition: transform .4s ease;
}

.hero-dash-img:hover {
  transform: translateY(-6px);
}


/* MOBILE IMAGE (bigger + more up + floating) */
.hero-phone-front {
  position: absolute;
  width: 65%;              /* bigger */
  right: -20px;
  top: -125px;              /* more up */
  z-index: 3;
  filter: drop-shadow(0px 15px 35px rgba(0,0,0,0.6));
  transition: transform .4s ease;
}

.hero-phone-front:hover {
  transform: translateY(-8px);
}

/* Floating effect on both */
.col-lg-6.position-relative:hover .hero-dash-img {
  transform: translateY(-6px) scale(1.02);
}

.col-lg-6.position-relative:hover .hero-phone-front { 
  transform: translateY(-10px) scale(1.03);
}

    /* MODULES */
    #modules h2 { color: #ffffff !important; }


/* SECTION WRAPPER */
.modules-clean {
    background: #ffffff;
    padding: 90px 0;
}

/* Heading */
.modules-clean h2 {
    font-weight: 700;
    color: #1a1a1a;
}

/* Clean Pastel Card Style */
.clean-card {
    background: #f5f9fc;
    border-radius: 22px;
    padding: 40px 32px;
    text-align: center;
    transition: .3s ease;
    border: 1px solid #edf3f7;
    box-shadow: 0px 4px 20px rgba(0,0,0,0.05);
}

/* Card hover */
.clean-card:hover {
    transform: translateY(-8px);
    box-shadow: 0px 12px 35px rgba(0,0,0,0.10);
}

/* Individual Card Background Colors */
.bg-green { background: #e6f8f6; }
.bg-pink  { background: #fdecef; }
.bg-blue  { background: #e9edff; }
.bg-yellow{ background: #fff7e1; }

/* Card Icon Wrapper */
.clean-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}

/* Icon Colors */
.icon-green  { background:#d3f2ee; color:#0cae8f; }
.icon-pink   { background:#fbd4dc; color:#e4406f; }
.icon-blue   { background:#d6dcff; color:#5360ff; }
.icon-yellow { background:#ffeab3; color:#d29d00; }

/* Button inside card */
.card-btn {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 12px;
    font-size: 14px;
    margin-top: 12px;
    font-weight: 600;
}

.btn-green  { background:#c9f0e8; color:#0f9d80; }
.btn-pink   { background:#f8c4d0; color:#d82657; }
.btn-blue   { background:#cdd3ff; color:#3a4bff; }
.btn-yellow { background:#ffe099; color:#b88600; }
.clean-card h5,
.clean-card p,
.clean-card ul li {
    color: #1a1a1a !important;
}
.clean-card ul {
    color: #1a1a1a !important;
}

.clean-icon i {
    color: inherit !important;
}


/* ===========================
   DARKER CLEAN PASTEL + GLASS
   =========================== */

/* Base Glass */
.clean-card {
    border-radius: 22px;
    padding: 40px 32px;
    text-align: center;
    transition: .4s ease;
    border: 1px solid rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0px 8px 30px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
}

/* Hover Shine */
.clean-card::after {
    content: "";
    position: absolute;
    top: -120%;
    left: -120%;
    width: 250%;
    height: 250%;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.35) 45%,
        rgba(255,255,255,0.85) 50%,
        rgba(255,255,255,0.4) 55%,
        rgba(255,255,255,0) 100%
    );
    transform: rotate(25deg);
    transition: .6s ease-in-out;
    opacity: 0;
}

.clean-card:hover::after {
    top: -30%;
    left: -30%;
    opacity: 1;
}

/* Hover Lift */
.clean-card:hover {
    transform: translateY(-10px);
    box-shadow: 0px 15px 45px rgba(0,0,0,0.12);
}

/* ========================
    DARKER CARD BACKGROUNDS
   ======================== */

/* GOLD (mint green) */
.bg-green { background: rgba(180,243,234,0.75) !important; }
.icon-green { background:#94e9d8; color:#078a6d; }
.btn-green  { background:#88e3d1; color:#066955; }

/* DIAMOND (raspberry pink) */
.bg-pink  { background: rgba(255,220,230,0.75) !important; }
.icon-pink { background:#ffc5d4; color:#c41d52; }
.btn-pink   { background:#ffb3c8; color:#a1123e; }

/* PLATINUM (lavender blue) */
.bg-blue  { background: rgba(214,220,255,0.75) !important; }
.icon-blue { background:#c6cdff; color:#434eff; }
.btn-blue  { background:#b8c1ff; color:#343fff; }

/* Text color dark */
.clean-card h5,
.clean-card p,
.clean-card ul li {
    color: #1a1a1a !important;
}

.clean-card ul {
    padding-left: 20px !important;  /* equal left offset */
    margin: 0 !important;
    list-style-type: disc;
}

.clean-card ul li {
    margin: 3px 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
    list-style-position: outside !important;  /* bullets align perfectly */
}
.blue-text {
  color: #007bff;   /* Bootstrap blue */
}
/* SECTION BACKGROUND */
.snake-row-section {
  padding: 150px 0;
  background: linear-gradient(135deg, #eef2f7, #d9e4f5);
  position: relative;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
}

/* soft glow blobs */
.snake-row-section::before,
.snake-row-section::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.7;
}

.snake-row-section::before {
  width: 260px;
  height: 260px;
  background: rgba(255, 255, 255, 0.6);
  top: -80px;
  left: -60px;
}

.snake-row-section::after {
  width: 320px;
  height: 320px;
  background: rgba(255, 255, 255, 0.5);
  bottom: -100px;
  right: -80px;
}

.snake-row-title {
  text-align: center;
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 50px;
  position: relative;
  z-index: 2;
}

.snake-row-title span {
  color: #ff6b00;
}

/* WRAPPER */
.snake-row-wrapper {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px 10px;
}

/* SNAKE LINE SVG */
.snake-row-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 220px;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}

/* STEPS IN ONE ROW */
.snake-row-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  position: relative;
  z-index: 2;
}

/* EACH STEP */
.snake-row-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  flex: 1;
}

/* "up" = card upar, icon niche (already by default) */
/* "down" = icon upar, card niche (reverse column) */
.snake-row-step.down {
  flex-direction: column-reverse;
}

/* ICONS */
.snake-row-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.bg-yellow { background: #f7b731; box-shadow: 0 10px 24px #f7b73166; }
.bg-red    { background: #fc5c65; box-shadow: 0 10px 24px #fc5c6566; }
.bg-blue   { background: #3867d6; box-shadow: 0 10px 24px #3867d666; }
.bg-green  { background: #20bf6b; box-shadow: 0 10px 24px #20bf6b66; }

/* CARDS */
.snake-row-card {
  width: 230px;
  padding: 18px 20px;
  border-radius: 18px;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  transition: 0.3s ease;
  transform: translateY(0);
  opacity: 0;                 /* for scroll animation */
}

/* gradients */
.yellow-card { background: linear-gradient(135deg, #ffda4d, #ffae00); }
.red-card    { background: linear-gradient(135deg, #ff6a6a, #d93636); }
.blue-card   { background: linear-gradient(135deg, #5a8cff, #3456c0); }
.green-card  { background: linear-gradient(135deg, #48e695, #20bf6b); }

.snake-row-card h3 {
  font-size: 18px;
  margin-bottom: 6px;
  font-weight: 600;
}

.snake-row-card p {
  font-size: 14px;
  line-height: 21px;
}

/* hover effect */
.snake-row-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.25);
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .snake-row-steps {
    flex-direction: column;
    gap: 40px;
  }

  .snake-row-line {
    height: 340px;
  }

  .snake-row-step,
  .snake-row-card {
    width: 100%;
    max-width: 320px;
  }
}


.snake-row-title {
  color: #000; /* Black */
}

.snake-corner {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
}

/* TOP RIGHT */
.snake-corner-2 {
  top: -180px;
  right: -100px;
  width: 580px; 
  animation: float2 7s ease-in-out infinite;
}

/* TOP LEFT */
.snake-corner-1 {
  top: -180px;
  left: -230px;
  width: 600px; 
  animation: float1 6s ease-in-out infinite;
}

@keyframes float2 {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

@keyframes float1 {
  0% { transform: translateY(0); }
  50% { transform: translateY(25px); }
  100% { transform: translateY(0); }
}

.why-us-section {
  background: #fafafa;
}

.highlight {
  color: #000; /* black */
}

.why-list {
  list-style: none;
  padding-left: 0;
}

.why-list li {
  font-size: 17px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  font-weight: 500;
  color: #000; /* black text */
}

.why-list li i {
  font-size: 22px;
  margin-right: 12px;
  color: #28a745;
}

.why-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.35s ease;
  border: 1px solid #eee;
  color: #000; /* card text black */
}

.why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0px 12px 40px rgba(0,0,0,0.1);
}


.why-us-section {
  background: #fafafa;
}

.highlight {
  color: #007bff;
}

.why-list {
  list-style: none;
  padding-left: 0;
}

.why-list li {
  font-size: 17px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  font-weight: 500;
}

.why-list li i {
  font-size: 22px;
  margin-right: 12px;
  color: #28a745;
}

.why-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.35s ease;
  border: 1px solid #eee;
}

.why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0px 12px 40px rgba(0,0,0,0.1);
}

/* ROUND LEFT IMAGE */
.why-left-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #eee;
}


.card-color {
  background: #f6f9ff !important;  
}

/* Slider container (one card visible) */
.one-card-slider {
  width: 100%;
  overflow: hidden;
  display: flex;
  transition: transform 0.5s ease;
}

/* Each card = 100% width */
.slider-card {
  min-width: 100%;
  transition: transform 0.5s ease;
}

/* Arrow buttons */
.arrow-btn {
  background: #e9eefc;
  border: none;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 20px;
  cursor: pointer;
  transition: 0.3s;
}
.arrow-btn:hover {
  background: #cdd9ff;
}


.bottom-flip-img {
  position: absolute;
  bottom: -60px;          /* section ke thoda niche stick */
  left: 50%;
  transform: translateX(-50%) rotate(180deg); /* ULTA + center */
  width: 100%;            /* full width shape ke liye */
  max-width: 1000px;      /* limit so big device me sahi lage */
  opacity: 1;
  pointer-events: none;
  z-index: 3;
}
.bottom-flip-img {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  width: 100%;
  max-width: 1600px;
  opacity: 1;
  z-index: 1;  /* 👈 lowered so content stays on top */
  pointer-events: none;
}
.snake-row-wrapper,
.snake-row-steps,
.why-list,
.slider-card,
.why-card {
  position: relative;
  z-index: 5;   /* content above image */
}


    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    body {
      background: #020821;
      color: #fff;
    }

    /* SECTION WRAPPER */
    .packages-section {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      background: radial-gradient(circle at top left, #243c7a 0, #020821 45%, #000111 100%);
    }

    .packages-container {
      width: 100%;
      max-width: 1200px;
    }

    .packages-title {
      text-align: center;
      margin-bottom: 40px;
    }

    .packages-title h2 {
      font-size: 38px;
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    .packages-title h2 span {
      color: #f5c76a;
    }

    .packages-title p {
      margin-top: 8px;
      font-size: 14px;
      opacity: 0.75;
    }

    /* GRID */
    .packages-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 26px;
    }

    @media (max-width: 1024px) {
      .packages-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 640px) {
      .packages-grid {
        grid-template-columns: 1fr;
      }
    }

    /* CARD BASE (ALL CARDS NOW PRIMARY STYLE) */
    .pricing-card {
      position: relative;
      background: linear-gradient(135deg, #0f172a 0%, #152b7a 50%, #243bff 100%);
      color: #f9fafb;
      border-radius: 25px;
      padding: 32px 26px 40px;
      cursor: pointer;
      overflow: hidden;
      transition: transform .25s ease, box-shadow .25s ease;
    }

    .pricing-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 25px 55px rgba(0, 0, 0, 0.55);
    }

    .pricing-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }

    .plan-name {
      font-size: 20px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .pill-tag {
      font-size: 11px;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.1);
      color: white;
      font-weight: 600;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    .pricing-card-main-price {
      font-size: 38px;
      font-weight: 800;
      margin-top: 10px;
      line-height: 1;
    }

    .pricing-card-main-price span.currency {
      font-size: 22px;
      margin-right: 3px;
    }

    .pricing-card-main-price span.decimal {
      font-size: 16px;
      font-weight: 700;
    }

    .per-text {
      margin-top: 4px;
      font-size: 14px;
      opacity: 0.85;
    }

    .features {
      margin-top: 20px;
      list-style: none;
      font-size: 15px;
    }

    .features li {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }

    .features li::before {
      content: "✓";
      font-size: 14px;
      color: #9bf3ff;
    }

    /* BUY NOW BUTTON */
    /* .buy-btn {
      margin-top: 22px;
      background: #f5c76a;
      color: #091226;
      padding: 12px 18px;
      width: 100%;
      text-align: center;
      border-radius: 12px;
      font-weight: 700;
      font-size: 15px;
      cursor: pointer;
      transition: background .25s ease, transform .2s ease;
    }

    .buy-btn:hover {
      background: #ffe5a3;
      transform: translateY(-3px);
    } */
.buy-btn {
  margin-top: 22px;
  background: #f5c76a;    
  color: #091226;
  padding: 12px 18px;
  width: 100%;
  text-align: center;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;

  /* ONLY golden border added */
  border: 2px solid #ffd37a;

  transition: background .25s ease, transform .2s ease, border-color .25s ease;
}

.buy-btn:hover {
  background: #ffe5a3;     
  border-color: #ffe7b3;  
  transform: translateY(-3px);
}

    /* GOLDEN MOVING BORDER */
    .pricing-card::before {
      content: "";
      position: absolute;
      inset: -2px;
      border-radius: inherit;
      padding: 2px;
      background: conic-gradient(
        from 0deg,
        rgba(255, 215, 128, 0) 0deg,
        rgba(255, 215, 128, 0.7) 60deg,
        rgba(255, 230, 180, 1) 120deg,
        rgba(255, 215, 128, 0.8) 180deg,
        rgba(255, 215, 128, 0) 240deg,
        rgba(255, 215, 128, 0.5) 300deg,
        rgba(255, 215, 128, 0) 360deg
      );
      mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      mask-composite: exclude;
      -webkit-mask-composite: xor;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }

    .pricing-card.active::before {
      opacity: 1;
      animation: spinBorder 2.5s linear infinite;
    }

    @keyframes spinBorder {
      to {
        transform: rotate(360deg);
      }
    }


    /* SIDE NEON BORDER LIKE FRESHWORKS */
.pricing-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
}

/* Outer neon border */
.pricing-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.8px solid rgba(0, 180, 255, 0.55); /* neon blue */
  pointer-events: none;
}

/* Optional glow on hover */
.pricing-card:hover::after {
  border-color: rgba(0, 200, 255, 0.85);
  box-shadow: 0 0 20px rgba(0, 200, 255, 0.2);
}


/* Section */
.testimonial-section {
  padding: 80px 0;
  background: #dee8fd;
}

/* Left Text */
.small-title {
  font-size: 14px;
  text-transform: uppercase;
  color: #6c6f80;
  margin-bottom: 6px;
  font-weight: 600;
}

.main-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
}

.sub-text {
  color: #737791;
  margin-top: 15px;
}

/* Testimonial Card */
.testimonial-card {
  background: #fff;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.06);
}

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

.small-badge {
  background: rgba(65,105,255,0.08);
  color: #4169ff;
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 20px;
}

.dots span {
  width: 6px;
  height: 6px;
  background: #d1d4e5;
  margin-left: 4px;
  border-radius: 50%;
  display: inline-block;
}

.quote {
  font-size: 18px;
  margin: 25px 0;
  color: #1c1f2b;
  line-height: 1.7;
}

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

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.avatar {
  width: 55px;
  height: 55px;
  border-radius: 50%;
}

.name {
  margin: 0;
  font-weight: 600;
}

.role {
  margin: 0;
  color: #7e8299;
  font-size: 14px;
}

/* Arrows */
.arrow-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #d9dde8;
  background: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}

.arrow-btn.active,
.arrow-btn:hover {
  background: #4169ff;
  color: #fff;
  border-color: #4169ff;
}

/* Subscribe Box */
.subscribe-box {
  background: #b0d7f8;
  padding: 50px;
  border-radius: 20px;
  margin-top: 50px;
  position: relative;
}

.subscribe-title {
  font-size: 22px;
  margin-bottom: 25px;
  color: #22304e;
  max-width: 600px;
}

.subscribe-form {
  display: flex;
  gap: 15px;

}

.subscribe-form input {
  flex: 1;
  padding: 14px 20px;
  border-radius: 10px;
  border: none;
  font-size: 16px;
}

.subscribe-btn {
  background: #ff7d5c;
  color: #fff;
  border: none;
  padding: 12px 25px;
  border-radius: 10px;
  font-size: 16px;
  cursor: pointer;
}

.subscribe-btn:hover {
  background: #ff663c;
}

/* Paper Plane */
.plane-btn {
  position: absolute;
  right: 30px;
  bottom: 30px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #4c7dff;
  color: #fff;
  border: none;
  font-size: 20px;
  box-shadow: 0 15px 30px rgba(76,125,255,0.4);
}

/* VIDEO SECTION */
.edu-video-section {
    width: 100%;
    padding: 210px 0 90px;
    background: #fff;
    position: relative; 
   /* FIXED — absolute removed */
}

/* Curvy background */
.curve-bg {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Shapes */
.shape {
    position: absolute;
    z-index: 2;
}


.left-shape {
    left: 20%;
    top: 250px;
    width: 200px;
}

.right-shape {
    right: 25%;
    top: -40px;
    width: 130px;
}

/* Main Video Frame */
.video-container {
    position: relative;
    display: flex;
    justify-content: center;
    z-index: 5;
}

.video-frame {
    width: 600px;
    border-radius: 40px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.video-thumb {
    width: 100%;
}

.play-btn {
    width: 80px;
    height: 80px;
    background: #ff4d73;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
}

.play-btn i {
    font-size: 32px;
    color: #fff;
}

/* STATS SECTION */
.stats-section {
    width: 100%;
    padding: 90px 0 80px;
    background: #fff;
    position: relative;
}

.stats-container {

    width: 90%;
    max-width: 1100px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.stat-box {
    background: #fff;
    border-radius: 20px;
    padding: 35px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.06);
}

.box-1 { background: #d0e8e2; }
.box-2 { background: #fae0e0; }
.box-3 { background: #eadcfa; }
.box-4 { background: #fef2d6; }

.stat-box h2 {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 10px;
}

.stat-box p {
    font-size: 14px;
    letter-spacing: 1px;
}

@media(max-width: 768px) {
    .stats-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 480px) {
    .stats-container {
        grid-template-columns: 1fr;
    }
}


 .quote-icon {
    width: 55px; 
    height: auto;
    margin-bottom: 10px;
    display: block;
}

.testimonial-item { 
  display: none; 
}

.testimonial-item.active {
  display: block;
}



.contact-btn {
    padding: 10px 22px;
    background: #3f6bcb;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}
.arrows {
  display: flex;
  justify-content: flex-end; /* Right align */
  gap: 10px;
  top: -20px; /* space between buttons */
}

.arrow-btn {
  padding: 8px 15px;
  font-size: 20px;
  cursor: pointer;
}

/* MAIN FOOTER */
.footer-section {
    background: #0A0A0A;
    padding: 80px 0 40px;
    color: #fff;
}

/* GRID */
.footer-container {
    max-width: 1150px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 40px;
}

/* LOGO SECTION */
.footer-logo {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 12px;
}

.footer-col p {
    color: #B5B5B5;
    line-height: 1.6;
}

/* HEADINGS */
.footer-col h4 {
    font-weight: 600;
    margin-bottom: 18px;
    font-size: 18px;
    color: #fff;
}

/* LIST */
.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin: 10px 0;
    color: #B5B5B5;
    cursor: pointer;
    transition: 0.3s;
}

.footer-col ul li:hover {
    color: #ffffff;
    padding-left: 4px;
}

/* SOCIAL ICONS */
.social-icons span {
    background: #1A1A1A;
    border: 1px solid #2A2A2A;
    padding: 10px 12px;
    margin-right: 10px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.social-icons span:hover {
    background: #ffffff;
    color: #000;
}

/* APP BUTTON IMAGE */
.store-btn {
    width: 160px;
    border: none !important;
    border-radius: 8px;
    display: block;
    margin-top: -30px;
}

/* LOGIN LINK */
.login-link {
    text-align: center;
    margin-top: 12px;
    color: #fff;
    font-size: 14px;
}

.login-link a {
    color: #fff;
    text-decoration: underline;
    font-weight: 500;
}

/* COPYRIGHT */
.footer-copy {
    text-align: center;
    margin-top: 40px;
    color: #777;
    font-size: 14px;
}

/* ============================================= */
/*          FIX ALL FOOTER LINKS COLOR           */
/* ============================================= */

.footer-section a,
.footer-section ul li a,
.footer-col a,
.footer-col ul li a {
    color: #ffffff !important;
    text-decoration: none !important;
}

.footer-section a:hover,
.footer-section ul li a:hover,
.footer-col a:hover,
.footer-col ul li a:hover {
    color: #f39c12 !important;
    padding-left: 4px;
}

.footer-col ul li a,
.footer-col ul li a:link,
.footer-col ul li a:visited {
    color: #B5B5B5 !important;  /* Light gray */
    text-decoration: none !important;
}

.footer-col ul li a:hover {
    color: #ffffff !important;  /* Hover white */
}