/* General Reset */
body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  
}

/* Custom Navbar Styling */
.custom-navbar {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  z-index: 1050; /* above slider */
}

/* Nav Links */
.navbar .nav-link {
  font-family: 'Finger Paint', cursive;
  font-weight: 400;
  font-size: 1.2rem;
  color: #333;
  transition: color 0.2s ease-in-out;
  padding: 0.5rem 1rem;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #1100ff;
}

/* Desktop Logo */
.main-logo {
  height: 90px;
  object-fit: contain;
}

/* Mobile Logo */
.mobile-logo {
  width: 70px;
  height: auto;
  object-fit: contain;
}

/* Banner Slider Fullscreen */
.banner-slider {
  position: relative;
  margin-top: 0; /* no negative margin */
  z-index: 1;
}

#heroCarousel,
#heroCarousel .carousel-inner,
#heroCarousel .carousel-item {
  height: 100vh;
}

#heroCarousel .carousel-item img {
  height: 100vh;
  width: 100%;
  object-fit: cover;
}

/* Caption */
.carousel-caption {
  background: rgba(0, 0, 0, 0.4);
  padding: 20px;
  border-radius: 10px;
  bottom: 20%;
}

.carousel-caption h1,
.carousel-caption p {
  color: #fff;
  font-family: 'Finger Paint', cursive;
}

.carousel-caption h1 {
  font-size: 3rem;
}

.carousel-caption p {
  font-size: 1.2rem;
}

/* Responsive Tweaks */
@media (max-width: 991.98px) {
  .navbar .nav-link {
    font-size: 1.05rem;
  }
  .carousel-caption h1 {
    font-size: 2rem;
  }
}

/* ===== Programs Section Styling ===== */
.programs-section {
background:
  radial-gradient(
    720px 300px at 12% 25%,
    rgba(255,159,67,0.35), /* warm orange */
    transparent 60%
  ),
  radial-gradient(
    720px 300px at 55% 15%,
    rgba(255,99,71,0.32), /* playful red */
    transparent 60%
  ),
  radial-gradient(
    740px 320px at 88% 30%,
    rgba(76,217,100,0.30), /* fresh green */
    transparent 60%
  ),
  radial-gradient(
    760px 320px at 70% 95%,
    rgba(46,204,113,0.28), /* leaf green base */
    transparent 60%
  ),
  linear-gradient(
    90deg,
    rgba(255,248,235,1),
    rgba(245,255,240,1)
  );

  border-radius: 28px;
  margin: 30px 30px;
  overflow: hidden;
}

.programs-decor {
  position: absolute;
  left: -40px;
  top: -40px;
  width: 220px;
  max-width: 40%;
  pointer-events: none;
}

.programs-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
}

.programs-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff6b6b;
  display: inline-block;
}

.programs-title {
  font-weight: 600;
  color: #121826;
}

.program-card {
  background: #fff;
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.program-icon {
  margin-bottom: 6px;
}

.icon-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #0c5a6b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
}

.program-name {
  font-weight: 600;
  margin: 0;
  color: #101828;
  text-align: center;
}

.program-desc {
  margin: 0 0 10px 0;
  color: #000000;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
}

.program-img {
  width: 100%;
  border-radius: 16px;
  height: 160px;
  object-fit: cover;
  margin-top: auto;
}

/* Responsive spacing */
@media (max-width: 991.98px) {
  .programs-section {
    margin: 30px 12px;
    border-radius: 20px;
  }
  .programs-decor {
    width: 160px;
    left: -30px;
    top: -30px;
  }
}

/* ===== Neon Modern States Section ===== */
.states-neon-section{
  padding: 40px 0;              /* compact height */
}

.states-neon-card{
  position: relative;
  border-radius: 26px;
  padding: 26px 22px;
  overflow: hidden;
  background: rgba(255,255,255,0.60);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.10);
}

/* Neon gradient background layer */
.states-neon-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(700px 260px at 12% 25%, rgba(0,229,255,0.28), transparent 60%),
    radial-gradient(700px 260px at 55% 15%, rgba(124,77,255,0.22), transparent 60%),
    radial-gradient(700px 280px at 88% 30%, rgba(255,45,214,0.22), transparent 60%),
    radial-gradient(700px 280px at 70% 95%, rgba(0,230,118,0.18), transparent 60%),
    linear-gradient(90deg, rgba(0,229,255,0.08), rgba(255,45,214,0.08));
  pointer-events:none;
}

/* Subtle noise-like overlay (soften neon) */
.states-neon-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.18), transparent 55%);
  opacity: 0.6;
  pointer-events:none;
}

.states-neon-head{
  position: relative;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom: 14px;
}

.states-neon-title{
  margin:0;
  font-weight: 900;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  color:#0B1220;
}

.states-neon-subtitle{
  margin:6px 0 0 0;
  color:#000000;
  font-size: 0.98rem;
}

.states-neon-pills{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.states-neon-pill{
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(16,24,40,0.10);
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 800;
  color:#0B1220;
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
}

/* Marquee container */
.neon-marquee{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 12px 0;
}

.neon-marquee::before,
.neon-marquee::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:70px;
  z-index:2;
  pointer-events:none;
}

.neon-marquee::before{
  left:0;
  background: linear-gradient(to right, rgba(255,255,255,0.95), rgba(255,255,255,0));
}
.neon-marquee::after{
  right:0;
  background: linear-gradient(to left, rgba(255,255,255,0.95), rgba(255,255,255,0));
}

.neon-track{
  position: relative;
  display:flex;
  gap:12px;
  width: max-content;
  animation: neonScroll 20s linear infinite;
}

.neon-marquee:hover .neon-track{
  animation-play-state: paused;
}

/* Neon chip */
.neon-chip{
  --glow:#00e5ff;
  position: relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  white-space: nowrap;

  padding: 10px 14px;
  border-radius: 999px;

  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(16,24,40,0.10);
  color:#0c5a6b;
  font-weight: 900;
  font-size: 0.92rem;

  box-shadow:
    0 10px 22px rgba(0,0,0,0.08),
    0 0 0 rgba(0,0,0,0);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

/* neon dot + glow halo */
.neon-chip::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background: var(--glow);
  box-shadow: 0 0 12px var(--glow), 0 0 28px color-mix(in srgb, var(--glow) 70%, transparent);
}

/* neon ring glow on hover */
.neon-chip:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--glow) 60%, rgba(16,24,40,0.10));
  box-shadow:
    0 14px 28px rgba(0,0,0,0.12),
    0 0 18px color-mix(in srgb, var(--glow) 55%, transparent),
    0 0 44px color-mix(in srgb, var(--glow) 40%, transparent);
}

.states-neon-cta{
  position: relative;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 14px;
}

@keyframes neonScroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 768px){
  .states-neon-section{ padding: 28px 0; }
  .states-neon-card{ padding: 20px 14px; border-radius: 20px; }
  .neon-track{ animation-duration: 26s; }
  .neon-chip{ padding: 9px 12px; font-size: 0.88rem; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .neon-track{ animation: none; }
}

/* ===== Activity Based Learning ===== */
.abl-section {
  padding: 60px 0;
}

.abl-head {
  margin-bottom: 30px;
}

.abl-title {
  font-weight: 900;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: #0B1220;
  margin-bottom: 8px;
}

.abl-subtitle {
  color: #000000;
  font-size: 1rem;
}

/* Card base */
.abl-card {
  border-radius: 26px;
  padding: 24px;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,0.10);
}

/* Icon (single, clean) */
.abl-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.abl-icon img {
  width: 24px;
  height: 24px;
}

/* Text */
.abl-card-title {
  font-weight: 900;
  font-size: 1.35rem;
  margin-bottom: 10px;
  color: #0B1220;
}

.abl-desc {
  color: #1D2939;
  opacity: 0.85;
  line-height: 1.55;
  margin-bottom: 18px;
}

/* Image */
.abl-img {
  width: 100%;
  object-fit: cover;
  border-radius: 18px;
}

/* Gradients */
.abl-math {
  background: linear-gradient(135deg, #c9f2ff, #e6e1ff);
}

.abl-language {
  background: linear-gradient(135deg, #fff1c9, #ffe0c7);
}

.abl-evs {
  background: linear-gradient(135deg, #d9ffe9, #c7ffe2);
}

/* Mobile */
@media (max-width: 768px) {
  .abl-section {
    padding: 40px 0;
  }
  
}

/* ===== Books / Curriculum Section ===== */
.books-section{
  background:
    radial-gradient(700px 280px at 15% 20%, rgba(255,61,0,0.22), transparent 60%),
    radial-gradient(700px 280px at 70% 15%, rgba(255,214,79,0.20), transparent 60%),
    radial-gradient(700px 280px at 85% 90%, rgba(0,229,255,0.16), transparent 60%),
    linear-gradient(90deg, rgba(255,61,0,0.06), rgba(0,229,255,0.06));
  padding: 60px 0;
  overflow: hidden;
}


.books-card{
  border-radius: 26px;
  padding: 28px;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.10);
  overflow: hidden;
  position: relative;
}

/* soft neon gradient background */
.books-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(700px 280px at 15% 20%, rgba(255,61,0,0.22), transparent 60%),
    radial-gradient(700px 280px at 70% 15%, rgba(255,214,79,0.20), transparent 60%),
    radial-gradient(700px 280px at 85% 90%, rgba(0,229,255,0.16), transparent 60%),
    linear-gradient(90deg, rgba(255,61,0,0.06), rgba(0,229,255,0.06));
  pointer-events:none;
}

.books-img-wrap{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 16px 35px rgba(0,0,0,0.12);
}

.books-img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.books-title{
  position: relative;
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  margin: 0 0 10px 0;
  color:#0B1220;
}

.books-subtitle{
  position: relative;
  margin: 0 0 18px 0;
  color:#000000;
  font-size: 1rem;
}

.books-points{
  position: relative;
  display: grid;
  gap: 12px;
}

.book-point{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(16,24,40,0.10);
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
}

.point-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0c5a6b;
  box-shadow: 0 0 12px rgba(0,229,255,0.55);
  margin-top: 6px;
  flex: 0 0 auto;
}

.book-point h5{
  margin: 0 0 4px 0;
  font-weight: 900;
  color:#101828;
  font-size: 1rem;
}

.book-point p{
  margin: 0;
  color:#000000;
  line-height: 1.5;
  font-size: 0.95rem;
}

.books-cta{
  position: relative;
  margin-top: 18px;
}

/* responsive */
@media (max-width: 768px){
  .books-section{ padding: 42px 0; }
  .books-card{ padding: 18px; border-radius: 20px; }
}
/* ===== Hero Image Section ===== */
.hero-image-section {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero-image {
  width: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* Mobile */
@media (max-width: 768px) {
  .hero-image {
    
  }
}
/* ===== Floating Header Container ===== */
.custom-navbar{
  width: max-content;
  margin: 18px auto 0 auto;   /* center it */
  padding: 0px 36px;
  border-radius: 999px;       /* pill shape */
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.12);
}

/* prevent full width */
.custom-navbar .container-fluid{
  padding: 0;
}

/* ===== Logo Circle ===== */
.logo-circle{
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}

.logo-circle img{
  width: 64px;
  height: auto;
}

/* spacing around logo */
.logo-pill{
  display: flex;
  align-items: center;
}

/* ===== Nav Links ===== */
.custom-navbar .nav-link{
  font-family: 'Finger Paint', cursive;
  font-size: 1.15rem;
  color: #333;
  padding: 8px 14px;
}

/* ===== Mobile ===== */
@media (max-width: 991px){
  .custom-navbar{
    width: calc(100% - 24px);
    border-radius: 22px;
  }

  .logo-circle{
    width: 68px;
    height: 68px;
  }

  .logo-circle img{
    width: 48px;
  }
}

/* =====================
   Why Choose Us – Outer Card
===================== */
.why-outer-section{
  padding: 30px 0;
}

.why-outer-card{
  background: #f7f0db;          /* same family as programs/books */
  border-radius: 36px;
  padding: 60px 40px;
  box-shadow: 0 20px 55px rgba(0,0,0,0.10);
}

/* Heading */
.why-tag{
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 1px;
  color: #ff2b7a;
}

.why-title{
  font-weight: 900;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin: 10px 0;
  color:#0b1220;
}

.why-title span{
  background: linear-gradient(90deg,#ff2b7a,#7c4dff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.why-subtitle{
  color:#000000;
  max-width: 720px;
  margin: 0 auto;
}

/* =====================
   Inner Cards (Neon)
===================== */
.why-card{
  background: #ffffff;
  border-radius: 26px;
  padding: 30px;
  height: 100%;
  position: relative;
  border: 1px solid rgba(16,24,40,0.08);
  box-shadow: 0 16px 40px rgba(0,0,0,0.10);
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
}

.why-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 26px 65px rgba(0,0,0,0.15);
}

/* neon glow */
.why-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  opacity:.35;
  filter: blur(28px);
}

/* neon variants */
.neon-blue::before{
  background: linear-gradient(135deg,#00e5ff,#7c4dff);
}
.neon-purple::before{
  background: linear-gradient(135deg,#7c4dff,#ff2bd6);
}
.neon-pink::before{
  background: linear-gradient(135deg,#ff2b7a,#ff9f43);
}

/* content above glow */
.why-card > *{
  position: relative;
  z-index: 1;
}

/* Icon */
.why-icon{
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 26px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
  margin-bottom: 16px;
}

/* Text */
.why-card-title{
  font-weight: 900;
  font-size: 1.25rem;
  margin-bottom: 10px;
  color:#101828;
}

.why-card-desc{
  color:#000000;
  line-height: 1.6;
  margin: 0;
}

/* Mobile */
@media (max-width:768px){
  .why-outer-card{
    padding: 40px 20px;
    border-radius: 24px;
  }
}

.top-cloud {
  background-image:
    url("https://www.kidscubepreschool.com/latest/assets/images/wave.png"),
    linear-gradient(
      180deg,
      #e7ccf1 0%,
      #dab4e8 45%,
      #cfa2de 100%
    );

background-position: top center; background-repeat: repeat-x; background-size: contain;
}

/* =====================
   Modern Full-Width Stats Strip
===================== */
.modern-stats{
  width: 100%;
  padding: 80px 0;
  position: relative;
  overflow: hidden;

  background-image:
    url("https://www.kidscubepreschool.com/latest/assets/images/wave.png"),
    linear-gradient(
      180deg,
      #e7ccf1 0%,
      #dab4e8 45%,
      #cfa2de 100%
    );

background-position: top center; background-repeat: repeat-x; background-size: contain;
}
/* subtle noise-ish overlay */
.modern-stats::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 20% 20%, rgba(0,0,0,0.03), transparent 40%);
  pointer-events:none;
  opacity: .6;
}

/* grid layout (more modern than rows) */
.stats-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  align-items: stretch;
}

/* tile */
.stat-tile{
  display:flex;
  align-items:center;
  gap: 18px;

  padding: 22px 22px;
  border-radius: 24px;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(16,24,40,0.08);
  backdrop-filter: blur(14px);

  box-shadow:
    0 16px 40px rgba(0,0,0,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.55);

  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.stat-tile:hover{
  transform: translateY(-6px);
  border-color: rgba(124,77,255,0.25);
  box-shadow:
    0 22px 60px rgba(0,0,0,0.12),
    0 0 26px rgba(124,77,255,0.18);
}

/* icon container */
.stat-icon{
  width: 62px;
  height: 62px;
  border-radius: 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 28px;

  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(16,24,40,0.08);
  box-shadow: 0 14px 35px rgba(0,0,0,0.10);
}

/* number & label */
.stat-number{
  font-weight: 500;
  font-size: clamp(1.9rem, 2.3vw, 2.6rem);
  color:#0b1220;
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat-label{
  margin-top: 6px;
  color:#000000;
  font-weight: 700;
  font-size: 1.02rem;
}

/* responsive */
@media (max-width: 992px){
  .stats-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (max-width: 576px){
  .modern-stats{ padding: 55px 0; }
  .stats-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .stat-tile{
    border-radius: 20px;
    padding: 18px;
  }
  .stat-icon{
    width: 56px;
    height: 56px;
    border-radius: 18px;
  }
}
 /* =====================
   Testimonials Section
===================== */
.testimonials-section{
  padding: 80px 0;
  background:
    radial-gradient(700px 300px at 10% 10%, rgba(0,229,255,0.10), transparent 60%),
    radial-gradient(700px 300px at 90% 30%, rgba(255,43,122,0.10), transparent 60%),
    #ffffff;
}

/* Header */
.testimonials-head{
  max-width: 720px;
  margin-bottom: 50px;
}

.testimonials-tag{
  display: inline-block;
  background: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.testimonials-title{
  font-weight: 900;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: #0b1220;
}

.testimonials-subtitle{
  color: #000000;
  margin-top: 10px;
}

/* Cards */
.testimonial-card{
  background: #ffffff;
  border-radius: 22px;
  padding: 28px;
  height: 100%;
  box-shadow: 0 18px 45px rgba(0,0,0,0.10);
  transition: transform .25s ease, box-shadow .25s ease;
}

.testimonial-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.14);
}

/* Stars */
.testimonial-stars{
  color: #ff9800;
  font-size: 1.1rem;
  letter-spacing: 2px;
  margin-bottom: 14px;
}

/* Text */
.testimonial-text{
  color: #000000;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 22px;
}

/* Author */
.testimonial-author strong{
  display: block;
  font-weight: 800;
  color: #101828;
}

.testimonial-author span{
  font-size: 0.85rem;
  color: #000000;
}

/* Rating summary */
.testimonials-rating{
  margin-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  font-weight: 700;
}

.rating-score{
  font-size: 1.2rem;
}

.rating-stars{
  color: #ff9800;
}

.rating-text{
  color: #000000;
  font-weight: 500;
}

/* Responsive */
@media (max-width: 768px){
  .testimonials-section{
    padding: 60px 0;
  }
}
/* ===== Center heading (no change to your existing styles, just ensure center) */
.testimonials-head{
  max-width: 820px;
}

/* ===== Auto-scroll marquee ===== */
.ts-marquee{
  position: relative;
  overflow: hidden;
  padding: 10px 0 6px;
  margin-top: 10px;
}

/* soft fade edges */
.ts-marquee::before,
.ts-marquee::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width: 80px;
  z-index: 2;
  pointer-events:none;
}
.ts-marquee::before{
  left:0;
  background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0));
}
.ts-marquee::after{
  right:0;
  background: linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0));
}

/* track */
.ts-track{
  display:flex;
  gap: 22px;
  width: max-content;
  animation: tsScroll 38s linear infinite;
}

/* pause on hover */
.ts-marquee:hover .ts-track{
  animation-play-state: paused;
}

/* make cards consistent width for smooth scrolling */
.ts-track .testimonial-card{
  flex: 0 0 420px;
}

/* responsive */
@media (max-width: 992px){
  .ts-track .testimonial-card{ flex-basis: 360px; }
}
@media (max-width: 576px){
  .ts-track .testimonial-card{ flex-basis: 300px; }
  .ts-marquee::before,
  .ts-marquee::after{ width: 40px; }
}

/* keyframes */
@keyframes tsScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* =====================
   Awards & Gallery
===================== */
.awards-gallery-section{
  padding: 80px 0;
  background:
    radial-gradient(700px 320px at 10% 20%, rgba(0,229,255,0.12), transparent 60%),
    radial-gradient(700px 320px at 90% 20%, rgba(255,43,122,0.12), transparent 60%),
    #ffffff;
}

.ag-head{
  max-width: 820px;
  margin: 0 auto 30px;
}

.ag-title{
  font-weight: 900;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color:#0b1220;
}

.ag-subtitle{
  color:#000000;
}

/* ===== Logos ===== */
.ag-logos{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  margin-bottom: 36px;
}

.ag-logo{
  padding: 14px 0;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(16,24,40,0.08);
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
  text-align:center;
  font-weight: 800;
}

/* ===== Auto-scroll Gallery ===== */
.ag-marquee{
  position: relative;
  overflow: hidden;
}

.ag-marquee::before,
.ag-marquee::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width: 80px;
  z-index: 2;
  pointer-events:none;
}

.ag-marquee::before{
  left:0;
  background: linear-gradient(90deg,#fff,transparent);
}

.ag-marquee::after{
  right:0;
  background: linear-gradient(270deg,#fff,transparent);
}

.ag-track{
  display:flex;
  gap: 22px;
  width: max-content;
  animation: agScroll 40s linear infinite;
}

.ag-marquee:hover .ag-track{
  animation-play-state: paused;
}

.ag-img-card{
  flex: 0 0 320px;
  border-radius: 24px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 18px 45px rgba(0,0,0,0.12);
  transition: transform .25s ease;
}

.ag-img-card:hover{
  transform: translateY(-6px);
}

.ag-img-card img{
  width:100%;
  height:100%;
  object-fit: cover;
}

/* Animation */
@keyframes agScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* Responsive */
@media (max-width: 992px){
  .ag-logos{ grid-template-columns: repeat(3,1fr); }
  .ag-img-card{ flex-basis: 300px; height: 210px; }
}

@media (max-width: 576px){
  .ag-logos{ grid-template-columns: repeat(2,1fr); }
  .ag-img-card{ flex-basis: 260px; height: 190px; }
}

/* =====================
   Modern Footer (same vibe as Awards & Achievements)
===================== */
.ag-footer{
  padding: 80px 0 26px;
  overflow: hidden;
 background-image:
    url("https://www.kidscubepreschool.com/latest/assets/images/wave.png"),
    linear-gradient(
      180deg,
      #e7ccf1 0%,
      #dab4e8 45%,
      #cfa2de 100%
    );

background-position: top center; background-repeat: repeat-x; background-size: contain;
}

/* Brand */
.agf-logo{
  width: 170px;
  height: auto;
  display:block;
  margin-bottom: 18px;
}

.agf-text{
  margin: 0 0 18px 0;
  color: #000000;
  font-weight: 500;
  line-height: 1.7;
  max-width: 720px;
}

/* Social */
.agf-social{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

.agf-social-btn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(16,24,40,0.08);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#0b1220;
  font-weight: 500;
  transition: transform .2s ease, box-shadow .2s ease;
}
.agf-social-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.12);
}

/* Contact */
.agf-title{
  font-weight: 500;
  font-size: 2rem;
  color:#0b1220;
  margin: 6px 0 14px;
}

.agf-contact{
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.agf-row{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color:#111827;
  font-weight: 700;
  line-height: 1.6;
}

.agf-ico{
  width: 22px;
  min-width: 22px;
  display:inline-flex;
  justify-content:center;
  margin-top: 2px;
}

.agf-contact a{
  color:#0b1220;
  text-decoration:none;
  font-weight: 900;
}
.agf-contact a:hover{ text-decoration: underline; }

/* Pills (matches award logo pill style) */
.agf-pills{
  margin-top: 18px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.agf-pill{
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.80);
  border: 1px solid rgba(16,24,40,0.08);
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
  font-weight: 850;
  color:#0b1220;
}

/* Divider + Bottom */
.agf-divider{
  margin-top: 34px;
  height: 1px;
  background: rgba(16,24,40,0.10);
}

.agf-bottom{
  text-align:center;
  padding-top: 18px;
  color:#000000;
  font-weight: 800;
}

/* Responsive */
@media (max-width: 768px){
  .ag-footer{
    margin: 18px 14px;
    padding: 60px 0 22px;
  }
  .agf-title{ font-size: 1.6rem; }
  .agf-logo{ width: 150px; }
}
/* ===== Floating Buttons ===== */
.fab-wrap{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Base button */
.fab{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid rgba(16,24,40,0.10);
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.14);
  font-weight: 900;
  color: #0b1220;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.fab:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 55px rgba(0,0,0,0.18);
}

/* WhatsApp */
.fab-wa{
  background: rgba(37, 211, 102, 0.95);
  color: #fff;
  border-color: rgba(37, 211, 102, 0.40);
}

/* Call */
.fab-call{
  background: rgba(0, 123, 255, 0.95);
  color: #fff;
  border-color: rgba(0, 123, 255, 0.35);
}

/* Desktop Go Top */
/* Go to top hidden by default */
.fab-top{
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
}

/* Visible state */
.fab-top.show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.fab-top-img{
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Keep buttons a bit higher on small screens if needed */
@media (max-width: 576px){
  .fab-wrap{ right: 14px; bottom: 14px; }
  .fab{ width: 54px; height: 54px; }
}

    /* ===== Contact Page (compact, matches index vibe) ===== */
    .contact-wrap{
      padding-top: 110px; /* space for fixed navbar */
      padding-bottom: 60px;
      background:
        radial-gradient(700px 280px at 15% 15%, rgba(0,229,255,0.12), transparent 60%),
        radial-gradient(700px 280px at 85% 25%, rgba(255,43,122,0.12), transparent 60%),
        radial-gradient(700px 280px at 70% 90%, rgba(0,230,118,0.10), transparent 60%),
        #ffffff;
    }

    .contact-head{
      max-width: 820px;
      margin: 0 auto 18px;
      text-align: center;
    }

    .contact-head h1{
      font-family: 'Finger Paint', cursive;
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      color: #0b1220;
      margin: 0 0 8px;
    }

    .contact-head p{
      margin: 0;
      color: #000000;
      font-weight: 500;
    }

    /* compact card */
    .contact-card{
      border-radius: 22px;
      padding: 18px;
      background: rgba(255,255,255,0.70);
      backdrop-filter: blur(14px);
      border: 1px solid rgba(16,24,40,0.10);
      box-shadow: 0 14px 35px rgba(0,0,0,0.10);
      position: relative;
      overflow: hidden;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .contact-card:hover{
      transform: translateY(-5px);
      border-color: rgba(124,77,255,0.25);
      box-shadow: 0 20px 55px rgba(0,0,0,0.14);
    }

    /* soft neon tint background */
    .contact-card::before{
      content:"";
      position:absolute;
      inset:-2px;
      opacity:.28;
      filter: blur(26px);
      pointer-events:none;
    }
    .cc-blue::before{ background: linear-gradient(135deg,#00e5ff,#7c4dff); }
    .cc-pink::before{ background: linear-gradient(135deg,#ff2b7a,#ff9f43); }
    .cc-purple::before{ background: linear-gradient(135deg,#7c4dff,#ff2bd6); }
    .cc-green::before{ background: linear-gradient(135deg,#00e676,#18ffff); }

    .contact-card > *{ position: relative; z-index: 1; }

    /* header row inside card */
    .cc-top{
      display:flex;
      align-items:center;
      gap: 12px;
      margin-bottom: 10px;
    }

    .cc-icon{
      width: 48px;
      height: 48px;
      border-radius: 16px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size: 22px;
      background: rgba(255,255,255,0.92);
      border: 1px solid rgba(16,24,40,0.08);
      box-shadow: 0 10px 24px rgba(0,0,0,0.10);
      flex: 0 0 auto;
    }

    .cc-title{
      font-weight: 500;
      font-size: 1.05rem;
      margin: 0;
      color:#101828;
    }

    .cc-text{
      margin: 0;
      color:#000000;
      font-weight: 500;
      line-height: 1.55;
      font-size: 0.95rem;
    }

    /* compact pill button */
    .cc-pill{
      display:inline-flex;
      align-items:center;
      gap: 10px;
      margin-top: 12px;
      padding: 10px 12px;
      border-radius: 999px;
      text-decoration:none;
      font-weight: 900;
      font-size: 0.95rem;
      color:#0b1220;
      background: rgba(255,255,255,0.85);
      border: 1px solid rgba(16,24,40,0.10);
      box-shadow: 0 10px 22px rgba(0,0,0,0.06);
      transition: transform .16s ease, box-shadow .16s ease;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .cc-pill:hover{
      transform: translateY(-2px);
      box-shadow: 0 16px 40px rgba(0,0,0,0.10);
    }

    /* Live Chat line (online effect) */
    .online-line{
      display:flex;
      align-items:center;
      gap: 10px;
      margin: 6px 0 10px;
      font-weight: 900;
      color:#1D2939;
    }
    .online-dot{
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 12px rgba(34,197,94,0.85);
      position: relative;
      flex: 0 0 auto;
    }
    .online-dot::after{
      content:"";
      position:absolute;
      inset:-10px;
      border-radius: 50%;
      border: 2px solid rgba(34,197,94,0.38);
      animation: pulse 1.35s ease-in-out infinite;
    }
    @keyframes pulse{
      0%   { transform: scale(0.5); opacity: 0.85; }
      70%  { transform: scale(1.15); opacity: 0; }
      100% { transform: scale(1.15); opacity: 0; }
    }

    /* WhatsApp compact CTA (chat-like, not huge) */
    .wa-compact{
      margin-top: 12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 18px;
      text-decoration:none;
      background: rgba(37,211,102,0.95);
      border: 1px solid rgba(37,211,102,0.35);
      box-shadow: 0 16px 40px rgba(0,0,0,0.14);
      color:#fff;
      font-weight: 500;
      transition: transform .16s ease, box-shadow .16s ease;
    }
    .wa-compact:hover{
      transform: translateY(-3px);
      box-shadow: 0 22px 55px rgba(0,0,0,0.18);
      color:#fff;
    }
    .wa-left{
      display:flex;
      flex-direction:column;
      gap: 2px;
    }
    .wa-left small{
      font-weight: 800;
      opacity: .95;
    }
    .wa-badge{
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.18);
      border: 1px solid rgba(255,255,255,0.25);
      font-weight: 500;
      white-space: nowrap;
    }

    /* responsive tighter spacing */
    @media (max-width: 576px){
      .contact-wrap{ padding-top: 95px; padding-bottom: 45px; }
      .contact-card{ padding: 16px; border-radius: 20px; }
      .cc-text{ font-size: 0.93rem; }
    }
/* =====================
   WhatsApp Button (Premium)
===================== */
.kc-wa-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;

  padding: 14px 16px;
  border-radius: 18px;
  text-decoration:none;

  background: rgba(37, 211, 102, 0.95);
  color: #ffffff;
  font-weight: 500;

  border: 1px solid rgba(37, 211, 102, 0.40);
  box-shadow: 0 18px 45px rgba(0,0,0,0.18);

  transition: transform .18s ease, box-shadow .18s ease;
}

.kc-wa-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 26px 65px rgba(0,0,0,0.25);
  color: #ffffff;
}

/* Left text */
.kc-wa-left{
  display:flex;
  flex-direction:column;
  gap: 2px;
}

.kc-wa-left small{
  font-size: 0.85rem;
  font-weight: 800;
  opacity: 0.95;
}

/* Online status */
.kc-wa-status{
  display:flex;
  align-items:center;
  gap: 8px;

  padding: 8px 12px;
  border-radius: 999px;

  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.25);

  font-weight: 500;
  white-space: nowrap;
}

/* Green dot pulse */
.kc-wa-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 14px rgba(34,197,94,0.85);
  position: relative;
}

.kc-wa-dot::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 50%;
  border: 2px solid rgba(34,197,94,0.35);
  animation: kcWaPulse 1.35s ease-in-out infinite;
}

@keyframes kcWaPulse{
  0%   { transform: scale(0.55); opacity: 0.85; }
  70%  { transform: scale(1.2); opacity: 0; }
  100% { transform: scale(1.2); opacity: 0; }
}

/* Mobile tuning */
@media (max-width: 576px){
  .kc-wa-btn{
    padding: 12px 14px;
    border-radius: 16px;
  }
  .kc-wa-left small{ font-size: 0.8rem; }
}

/* =========================
   ABOUT PAGE (ADD THIS BELOW your current CSS)
   Matches your neon/glass + rounded cards style
========================= */

/* page spacing because navbar is fixed/pill */
.about-hero-section{
  padding: 120px 0 60px;
  background:
    radial-gradient(700px 280px at 12% 18%, rgba(0,229,255,0.10), transparent 60%),
    radial-gradient(700px 280px at 86% 22%, rgba(255,43,122,0.10), transparent 60%),
    radial-gradient(700px 280px at 70% 92%, rgba(0,230,118,0.08), transparent 60%),
    #ffffff;
}

/* small badge */
.about-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(16,24,40,0.10);
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
  font-weight: 900;
  color:#0b1220;
  margin-bottom: 12px;
}

/* Hero typography */
.about-hero-title{
  font-weight: 500;
  font-size: clamp(2.0rem, 3.4vw, 3.1rem);
  color:#0b1220;
  margin: 10px 0 14px 0;
  letter-spacing: -0.02em;
}
.about-hero-title span{
  background: linear-gradient(90deg,#ff2b7a,#7c4dff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.about-hero-text{
  margin: 0 0 12px 0;
  color:#000000;
  font-weight: 500;
  line-height: 1.7;
}

/* Buttons */
.about-hero-actions{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin-top: 14px;
}
.about-btn{
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 500;
}
.about-hero-actions .btn-primary{
  box-shadow: 0 14px 35px rgba(0,0,0,0.12);
}
.about-hero-actions .btn-outline-primary{
  border-width: 2px;
}

/* Pills */
.about-hero-pills{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 16px;
}
.about-pill{
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.80);
  border: 1px solid rgba(16,24,40,0.10);
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
  font-weight: 900;
  color:#0b1220;
  font-size: 0.95rem;
}

/* Hero image */
.about-hero-image-wrap{
  border-radius: 28px;
  overflow:hidden;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(16,24,40,0.10);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.12);
}
.about-hero-image{
  width:100%;
  height: 420px;
  object-fit: cover;
  display:block;
}
@media (max-width: 991px){
  .about-hero-section{ padding: 0 0 45px; }
  .about-hero-image{ height: 320px; }
}

/* =======================
   Section headings (shared)
======================= */
.about-tag{
  display:inline-block;
  background: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 800;
  margin-bottom: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.about-section-title{
  font-weight: 500;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color:#0b1220;
  margin: 0 0 8px 0;
}
.about-section-subtitle{
  color:#000000;
  margin: 0 auto;
  max-width: 820px;
  font-weight: 500;
}
.about-section-title2{
  font-weight: 500;
  font-size: clamp(1.7rem, 2.7vw, 2.35rem);
  color:#0b1220;
  margin: 0 0 10px 0;
}
.about-text{
  color:#000000;
  font-weight: 500;
  line-height: 1.7;
  margin: 0 0 12px 0;
}

/* =======================
   Our Approach (Mission/Vision)
======================= */
.about-approach-section{
  padding: 70px 0;
  background: #ffffff;
}

.about-section-head{
  max-width: 860px;
  margin: 0 auto;
}

.approach-card{
  position: relative;
  border-radius: 28px;
  overflow:hidden;
  padding: 28px;
  height: 100%;
  box-shadow: 0 18px 45px rgba(0,0,0,0.12);
  border: 1px solid rgba(16,24,40,0.08);
}

/* subtle abstract background */
.approach-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  opacity: .35;
  filter: blur(30px);
  pointer-events:none;
}

/* color variants */
.approach-mission{
  background: linear-gradient(135deg, rgba(255,107,107,0.18), rgba(255,159,67,0.18)), #ffffff;
}
.approach-mission::before{
  background: linear-gradient(135deg,#ff2b7a,#ff9f43);
}
.approach-vision{
  background: linear-gradient(135deg, rgba(0,229,255,0.14), rgba(124,77,255,0.16)), #ffffff;
}
.approach-vision::before{
  background: linear-gradient(135deg,#00e5ff,#7c4dff);
}

/* keep content above glow */
.approach-card > *{
  position: relative;
  z-index: 1;
}

.approach-icon{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(16,24,40,0.08);
  box-shadow: 0 12px 30px rgba(0,0,0,0.10);
  margin-bottom: 12px;
}

.approach-title{
  font-weight: 500;
  font-size: 1.35rem;
  margin: 6px 0 10px 0;
  color:#101828;
}

.approach-text{
  color:#000000;
  font-weight: 500;
  line-height: 1.65;
  margin: 0 0 16px 0;
  max-width: 520px;
}

.approach-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 500;
  color:#0b1220;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(16,24,40,0.10);
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
  transition: transform .16s ease, box-shadow .16s ease;
}
.approach-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.10);
  color:#0b1220;
}

.approach-img{
  position:absolute;
  right: 20px;
  bottom: 0;
  width: 250px;
  max-width: 45%;
  height: auto;
  pointer-events:none;
  filter: drop-shadow(0 18px 35px rgba(0,0,0,0.18));
}
@media (max-width: 991px){
  .approach-img{
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 100%;
    margin-top: 18px;
    border-radius: 18px;
    overflow:hidden;
    filter: none;
  }
}

/* =======================
   Story / Timeline
======================= */
.about-story-section{
  padding: 70px 0;
  background:
    radial-gradient(700px 280px at 10% 25%, rgba(255,214,79,0.16), transparent 60%),
    radial-gradient(700px 280px at 88% 20%, rgba(0,229,255,0.10), transparent 60%),
    #ffffff;
}

.about-highlights{
  display:grid;
  gap: 12px;
  margin-top: 14px;
}

.about-highlight{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.80);
  border: 1px solid rgba(16,24,40,0.10);
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
}

.about-highlight .dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0c5a6b;
  box-shadow: 0 0 12px rgba(0,229,255,0.55);
  margin-top: 7px;
  flex: 0 0 auto;
}

.about-highlight h5{
  margin: 0 0 4px 0;
  font-weight: 500;
  color:#101828;
  font-size: 1rem;
}
.about-highlight p{
  margin: 0;
  color:#000000;
  line-height: 1.55;
  font-size: 0.95rem;
}

/* timeline card */
.about-timeline-card{
  border-radius: 28px;
  padding: 22px;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(16,24,40,0.10);
  box-shadow: 0 18px 45px rgba(0,0,0,0.12);
  overflow:hidden;
}

.about-timeline-title{
  font-weight: 500;
  margin: 0 0 14px 0;
  color:#0b1220;
}

.about-timeline{
  display:grid;
  gap: 12px;
}

.timeline-item{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(16,24,40,0.08);
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
}

.timeline-badge{
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.85rem;
  background: rgba(124,77,255,0.12);
  border: 1px solid rgba(124,77,255,0.25);
  color:#0b1220;
  flex: 0 0 auto;
}

.timeline-content h5{
  margin: 0 0 4px 0;
  font-weight: 500;
  color:#101828;
  font-size: 1rem;
}
.timeline-content p{
  margin: 0;
  color:#000000;
  line-height: 1.55;
  font-size: 0.95rem;
}

.about-story-img{
  width:100%;
  border-radius: 22px;
  margin-top: 14px;
  object-fit: cover;
  display:block;
}

/* =======================
   Franchise Benefits
======================= */
.franchise-benefits-section{
  padding: 70px 0;
  background: #ffffff;
}

.benefit-card{
  background: #ffffff;
  border-radius: 26px;
  padding: 26px;
  height: 100%;
  position: relative;
  border: 1px solid rgba(16,24,40,0.08);
  box-shadow: 0 16px 40px rgba(0,0,0,0.10);
  transition: transform .22s ease, box-shadow .22s ease;
  overflow:hidden;
}

.benefit-card:hover{
  transform: translateY(-7px);
  box-shadow: 0 26px 65px rgba(0,0,0,0.15);
}

.benefit-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  opacity:.22;
  filter: blur(28px);
  pointer-events:none;
  background: linear-gradient(135deg,#00e5ff,#ff2b7a);
}

.benefit-card > *{
  position: relative;
  z-index: 1;
}

.benefit-ico{
  width: 60px;
  height: 60px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 26px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(16,24,40,0.08);
  box-shadow: 0 12px 30px rgba(0,0,0,0.10);
  margin-bottom: 14px;
}

.benefit-card h4{
  font-weight: 500;
  color:#101828;
  margin: 0 0 8px 0;
  font-size: 1.2rem;
}

.benefit-card p{
  margin: 0;
  color:#000000;
  font-weight: 500;
  line-height: 1.6;
}

/* =======================
   Nature Approach section
======================= */
.about-nature-section{
  padding: 70px 0;
  background:
    radial-gradient(700px 280px at 14% 25%, rgba(0,230,118,0.10), transparent 60%),
    radial-gradient(700px 280px at 86% 25%, rgba(0,229,255,0.10), transparent 60%),
    #ffffff;
}

.nature-image-wrap{
  border-radius: 28px;
  overflow:hidden;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(16,24,40,0.10);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.12);
}
.nature-image{
  width:100%;
  height: 420px;
  object-fit: cover;
  display:block;
}
@media (max-width: 991px){
  .nature-image{ height: 320px; }
}

/* mini cards */
.mini-card{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  padding: 14px 16px;
  border-radius: 22px;
  background: rgba(255,255,255,0.80);
  border: 1px solid rgba(16,24,40,0.10);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}
.mini-ico{
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(16,24,40,0.08);
  box-shadow: 0 12px 30px rgba(0,0,0,0.10);
  flex: 0 0 auto;
}
.mini-card h5{
  margin: 0 0 4px 0;
  font-weight: 500;
  color:#101828;
  font-size: 1.05rem;
}
.mini-card p{
  margin: 0;
  color:#000000;
  font-weight: 500;
  line-height: 1.55;
  font-size: 0.95rem;
}

/* =======================
   Team
======================= */
.about-team-section{
  padding: 70px 0;
  background: #ffffff;
}

.team-card{
  border-radius: 26px;
  padding: 26px;
  height: 100%;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(16,24,40,0.10);
  box-shadow: 0 16px 40px rgba(0,0,0,0.10);
  transition: transform .22s ease, box-shadow .22s ease;
}
.team-card:hover{
  transform: translateY(-7px);
  box-shadow: 0 26px 65px rgba(0,0,0,0.15);
}
.team-ico{
  width: 60px;
  height: 60px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 26px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(16,24,40,0.08);
  box-shadow: 0 12px 30px rgba(0,0,0,0.10);
  margin-bottom: 14px;
}
.team-card h4{
  font-weight: 500;
  margin: 0 0 8px 0;
  color:#101828;
  font-size: 1.2rem;
}
.team-card p{
  margin: 0;
  color:#000000;
  font-weight: 500;
  line-height: 1.6;
}

/* =======================
   Final CTA
======================= */
.about-cta-section{
  padding: 60px 0 80px;
  background:
    radial-gradient(700px 280px at 15% 18%, rgba(255,43,122,0.10), transparent 60%),
    radial-gradient(700px 280px at 85% 28%, rgba(124,77,255,0.10), transparent 60%),
    #ffffff;
}

.about-cta-card{
  border-radius: 28px;
  padding: 26px;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(16,24,40,0.10);
  box-shadow: 0 18px 45px rgba(0,0,0,0.12);
  position: relative;
  overflow:hidden;
}

.about-cta-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  opacity: .28;
  filter: blur(28px);
  pointer-events:none;
  background: linear-gradient(135deg,#00e5ff,#ff2b7a);
}

.about-cta-card > *{
  position: relative;
  z-index: 1;
}

.about-cta-title{
  font-weight: 500;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  margin: 0 0 8px 0;
  color:#0b1220;
}
.about-cta-text{
  margin: 0;
  color:#000000;
  font-weight: 500;
  line-height: 1.65;
}

.about-cta-actions .btn{
  border-radius: 999px;
  font-weight: 500;
  padding: 12px 16px;
}

/* Mobile */
@media (max-width: 576px){
  .about-cta-card{ padding: 18px; border-radius: 22px; }
}

.about-btn{
  border-radius: 999px;
  font-weight: 600;
  padding: 12px 18px;
}

.about-wa-ani{
  position: relative;
  box-shadow: 0 14px 35px rgba(0,0,0,0.12);
}

.about-wa-ani span{
  display:inline-block;
  transition: transform .18s ease;
}

.about-wa-ani:hover span{
  transform: translateX(4px);
}

/* Hide toggler automatically on desktop (Bootstrap already does this) */
  @media (min-width: 992px) {
    .navbar-toggler {
      display: none;
    }
  }

  /* Ensure offcanvas overlays floating buttons */
  .offcanvas { z-index: 1055; }
  .offcanvas-backdrop { z-index: 1050; }

/* ===================== CSS (ADD TO assets/css/style.css) ===================== */
/* ===== BEST Menu Hover GIF (Stable Navbar, No Movement) ===== */
.menu-gif-link{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Text never moves */
.menu-text{
  position: relative;
  z-index: 2;
}

/* GIF floats below without taking space */
.menu-gif{
  position: absolute;
  bottom: 60%;
  left: 50%;
  width: 40px;     /* your gif size */
  height: 40px;    /* your gif size */
  transform: translateX(-50%) translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Show on hover */
.menu-gif-link:hover .menu-gif{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Desktop only */
@media (max-width: 991px){
  .menu-gif{
    display: none;
  }
}
/* ================= WOW STATES SECTION (UPDATED CSS) ================= */
.states-wow-section{
  padding: 44px 0;
}

.states-wow-card{
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: 26px;

  /* 🇮🇳 Indian Flag Inspired Gradient */
  background: radial-gradient( 120% 140% at 0% 0%, rgba(255, 153, 51, 0.22), transparent 55% ), /* Saffron */ radial-gradient( 120% 140% at 50% 50%, rgba(0, 56, 168, 0.14), transparent 60% ), /* Ashoka Chakra Blue (center) */ radial-gradient( 120% 140% at 100% 100%, rgba(19, 136, 8, 0.20), transparent 55% ), /* Green */ linear-gradient( 180deg, #ffffff, #f8fafc ); /* White base */

  border: 1px solid rgba(0,0,0,0.06);

  box-shadow:
    0 30px 80px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.7);

  backdrop-filter: blur(10px);
}


/* soft animated background blobs */
.states-wow-card::before,
.states-wow-card::after{
  content:"";
  position:absolute;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  filter: blur(40px);
  opacity: 0.35;
  z-index: 0;
  animation: blobFloat 10s ease-in-out infinite;
}

.states-wow-card::before{
  background: radial-gradient(circle, rgba(255,153,51,0.85), rgba(255,153,51,0));
}

.states-wow-card::after{
  background: radial-gradient(circle, rgba(19,136,8,0.75), rgba(19,136,8,0));
}

@keyframes blobFloat{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(20px, 18px) scale(1.06); }
}

.states-wow-top{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.states-wow-title{
  margin: 0;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.4px;
}

.states-wow-subtitle{
  margin: 8px 0 0;
  font-size: 16px;
  opacity: 0.78;
}

.states-wow-stats{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ================= WOW STAT CARDS ================= */
.wow-stat{
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;

  /* ✅ make them pop vs background */
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.96),
    rgba(255,255,255,0.86)
  );

  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 12px 30px rgba(0,0,0,0.10);
  transform: translateY(0);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  min-width: 165px;
}

/* animated glow ring */
.wow-stat::before{
  content:"";
  position:absolute;
  inset: -2px;
  border-radius: 20px;
  padding: 2px;
  background: linear-gradient(120deg, rgba(0,229,255,0), rgba(0,229,255,0.85), rgba(255,43,214,0.75), rgba(0,229,255,0));
  opacity: 0.0;
  transition: opacity 0.25s ease;
  z-index: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.wow-stat-icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 20px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0.6));
  box-shadow: 0 10px 20px rgba(0,0,0,0.06);
  z-index: 1;
}

.wow-stat-meta{ z-index: 1; }
.wow-stat-number{
  font-size: 20px;
  font-weight: 950;
  line-height: 1.05;
}
.wow-stat-label{
  font-size: 12px;
  opacity: 0.75;
  margin-top: 3px;
}

/* shine sweep */
.wow-stat-shine{
  position:absolute;
  top: -30%;
  left: -60%;
  width: 55%;
  height: 160%;
  background: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,0.70), rgba(255,255,255,0));
  transform: rotate(20deg);
  opacity: 0;
  z-index: 0;
}

/* hover wow */
.wow-stat:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(0,0,0,0.14);
}
.wow-stat:hover::before{
  opacity: 1;
}
.wow-stat:hover .wow-stat-shine{
  opacity: 1;
  animation: shineMove 0.9s ease forwards;
}

@keyframes shineMove{
  from{ left: -60%; }
  to{ left: 120%; }
}

/* subtle idle pulse */
.wow-stat{
  animation: softPulse 3.2s ease-in-out infinite;
}
.wow-stat--pink{ animation-delay: 0.4s; }

@keyframes softPulse{
  0%,100%{ box-shadow: 0 12px 30px rgba(0,0,0,0.10); }
  50%{ box-shadow: 0 18px 42px rgba(0,0,0,0.12); }
}

/* Marquee container look */
.modern-marquee{
  position: relative;
  z-index: 1;
  margin-top: 16px;
  border-radius: 18px;
  padding: 10px 0;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 991px){
  .states-wow-top{
    flex-direction: column;
    align-items: flex-start;
  }
  .states-wow-title{ font-size: 26px; }
  .states-wow-stats{
    justify-content: flex-start;
    width: 100%;
  }
}

@media (max-width: 576px){
  .states-wow-card{ padding: 18px; border-radius: 22px; }
  .states-wow-title{ font-size: 24px; }
  .states-wow-subtitle{ font-size: 14px; }
  .states-wow-stats{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .wow-stat{ min-width: 0; width: 100%; }
}
/* 🇮🇳 Tricolor animation ONLY for the word India */
.tricolor-animate{
  font-weight: 900;
  background: linear-gradient(
    90deg,
    #ff9933,   /* Saffron */
    #0038a8,   /* Ashoka Blue */
    #138808    /* Green */
  );

  background-size: 300% 100%;
  background-position: 0% 50%;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  animation: tricolorWave 10.5s ease-in-out infinite;
}

/* Smooth, calm wave */
@keyframes tricolorWave{
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}