/* ══════════════════════════════════════════════════════
   BUNNYHOP HOMEPAGE — Production Quality
   Fonts: Fredoka (headings) + Nunito (body)
   Colours: #1A5CB0 Blue | #FF8C00 Orange
   ══════════════════════════════════════════════════════ */
:root {
    --blue: #1A5CB0;
    --blue-dark: #0E3A78;
    --blue-mid: #2471D4;
    --blue-pale: #F0F6FF;
    --blue-light: #EBF3FF;
    --orange: #FF8C00;
    --orange-dk: #D97000;
    --orange-lt: #FFF4E5;
    --coral: #FF6F61;
    --mint: #00C9A7;
    --sun: #FFD000;
    --green: #3DB87A;
    --green-lt: #EDFBF3;
    --cream: #FFFDF6;
    --warm: #FFF8EE;
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-700: #374151;
    --dark: #1C1C2E;
    --radius: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 50px;
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.09);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.13);
    --shadow-blue: 0 12px 40px rgba(26, 92, 176, 0.22);
    --shadow-orange: 0 12px 36px rgba(255, 140, 0, 0.28);
    --t: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%
}

body {
    font-family: 'Nunito', sans-serif;
    background: var(--cream);
    color: var(--dark);
    overflow-x: hidden;
    line-height: 1.6
}

h1,
h2,
h3,
h4,
h5 {
    font-family: 'Fredoka', sans-serif;
    line-height: 1.15
}

a {
    text-decoration: none;
    color: inherit
}

img {
    max-width: 100%;
    display: block
}

ul {
    list-style: none
}

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

.section {
    padding: 40px 0
}

.section-sm {
    padding: 56px 0
}

.text-center {
    text-align: center
}

/* Section label pill */
.s-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--orange-lt);
    border: 2px solid rgba(255, 140, 0, .25);
    border-radius: var(--radius-pill);
    padding: 5px 16px;
    font-size: 12px;
    font-weight: 800;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: .6px;
}

.s-label.blue {
    background: var(--blue-pale);
    border-color: rgba(26, 92, 176, .2);
    color: var(--blue)
}

.s-label.white {
    background: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .4);
    color: #fff
}

.s-label.green {
    background: var(--green-lt);
    border-color: rgba(61, 184, 122, .25);
    color: var(--green)
}

.s-label svg {
    width: 13px;
    height: 13px;
    fill: currentColor;
    flex-shrink: 0
}

/* Section heading */
.s-head {
    margin-bottom: 52px
}

.s-head .s-label {
    margin-bottom: 14px
}

.s-head h2 {
    font-size: clamp(30px, 4vw, 50px);
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 14px
}

.s-head h2 mark {
    background: none;
    color: var(--orange)
}

.s-head p {
    font-size: 17px;
    color: var(--gray-500);
    max-width: 560px;
    line-height: 1.75
}

.s-head.center {
    text-align: center
}

.s-head.center p {
    margin: 0 auto
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: var(--radius-pill);
    font-family: 'Fredoka', sans-serif;
    font-size: 17px;
    font-weight: 600;
    transition: var(--t);
    border: 2.5px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}

.btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform .3s
}

.btn:hover svg {
    transform: translateX(3px)
}

.btn-orange {
    background: var(--orange);
    color: #fff;
    border-color: var(--orange);
    box-shadow: var(--shadow-orange)
}

.btn-orange:hover {
    background: var(--orange-dk);
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(255, 140, 0, .42)
}

.btn-blue {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
    box-shadow: var(--shadow-blue)
}

.btn-blue:hover {
    background: var(--blue-dark);
    transform: translateY(-3px)
}

.btn-outline-blue {
    background: transparent;
    color: var(--blue);
    border-color: var(--blue)
}

.btn-outline-blue:hover {
    background: var(--blue);
    color: #fff;
    transform: translateY(-2px)
}

.btn-white {
    background: #fff;
    color: var(--orange);
    border-color: #fff;
    font-weight: 800
}

.btn-white:hover {
    background: var(--orange-lt);
    transform: translateY(-2px)
}

.btn-outline-white {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .65)
}

.btn-outline-white:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #fff
}

.btn-sm {
    padding: 9px 20px;
    font-size: 15px
}

.btn-lg {
    padding: 16px 36px;
    font-size: 19px
}

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.4, 0, .2, 1), transform .7s cubic-bezier(.4, 0, .2, 1)
}

.reveal.from-left {
    transform: translateX(-28px)
}

.reveal.from-right {
    transform: translateX(28px)
}

.reveal.in {
    opacity: 1;
    transform: translate(0)
}

.d1 {
    transition-delay: .1s
}

.d2 {
    transition-delay: .2s
}

.d3 {
    transition-delay: .3s
}

.d4 {
    transition-delay: .4s
}

.d5 {
    transition-delay: .5s
}

/* Animations */
@keyframes float {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-12px)
    }
}

@keyframes float-sm {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-7px)
    }
}

@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: .5
    }

    100% {
        transform: scale(1.6);
        opacity: 0
    }
}

@keyframes spin-slow {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0
    }

    100% {
        background-position: 200% 0
    }
}

@keyframes bounce-arrow {

    0%,
    100% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(5px)
    }
}

@keyframes blob-move {

    0%,
    100% {
        border-radius: 60% 40% 70% 30%/50% 60% 40% 70%
    }

    50% {
        border-radius: 30% 60% 40% 70%/60% 30% 70% 40%
    }
}

/* ══════════════════════════════════════════════════════
   TOP BAR
   ══════════════════════════════════════════════════════ */
.topbar {
    background: var(--blue-dark);
    padding: 8px 0;
    font-size: 13px;
    font-weight: 600
}

.topbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px
}

.tb-left {
    display: flex;
    align-items: center;
    gap: 18px;
    color: rgba(255, 255, 255, .8)
}

.tb-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px
}

.tb-item svg {
    width: 13px;
    height: 13px;
    fill: var(--orange);
    flex-shrink: 0
}

.tb-right {
    display: flex;
    align-items: center;
    gap: 8px
}

.tb-phone {
    color: #fff;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px
}

.tb-phone svg {
    width: 13px;
    height: 13px;
    fill: #fff
}

.tb-wa {
    background: #25D366;
    color: #fff;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: var(--t)
}

.tb-wa svg {
    width: 13px;
    height: 13px;
    fill: #fff
}

.tb-wa:hover {
    background: #1ebe5a;
    color: #fff;
    transform: translateY(-1px)
}

@media(max-width:767px) {
    .tb-left {
        display: none
    }
}

/* ══════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════ */
.site-header {
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 900;
    box-shadow: 0 2px 20px rgba(0, 0, 0, .07)
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    gap: 16px
}

.site-logo {
    max-height: 58px;
    width: auto
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    padding: 0;
    margin: 0
}

.site-nav>li {
    position: relative
}

.site-nav>li>a {
    padding: 8px 12px;
    border-radius: 9px;
    font-family: 'Fredoka', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-700);
    transition: var(--t);
    display: block;
    white-space: nowrap;
}

.site-nav>li>a:hover,
.site-nav>li.active>a {
    background: var(--blue-pale);
    color: var(--blue)
}

.site-nav>li.bunny-nav>a {
    color: var(--orange) !important;
    font-weight: 700
}

.site-nav>li.bunny-nav>a:hover {
    background: var(--orange-lt) !important
}

.site-nav .has-sub>a::after {
    content: ' ▾';
    font-size: 10px;
    opacity: .5
}

.site-nav .sub-menu {
    display: none;
    position: absolute;
    top: calc(100% + -1px);
    left: 0;
    background: #fff;
    border-radius: 16px;
    min-width: 215px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .13);
    padding: 8px;
    list-style: none;
    z-index: 200;
    border: 1px solid rgba(0, 0, 0, .05)
}

.site-nav>li:hover .sub-menu {
    display: block
}

.site-nav .sub-menu li a {
    display: block;
    padding: 9px 14px;
    border-radius: 9px;
    font-family: 'Fredoka', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-700);
    transition: var(--t)
}

.site-nav .sub-menu li a:hover {
    background: var(--blue-pale);
    color: var(--blue)
}

.header-cta {
    background: var(--orange);
    color: #fff;
    border-radius: var(--radius-pill);
    padding: 10px 22px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 15px;
    box-shadow: var(--shadow-orange);
    margin-left: 6px;
    transition: var(--t);
    display: inline-block;
    white-space: nowrap
}

.header-cta:hover {
    background: var(--orange-dk);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255, 140, 0, .42)
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer
}

.hamburger span {
    display: block;
    width: 24px;
    height: 2.5px;
    background: var(--gray-700);
    border-radius: 3px;
    transition: var(--t)
}


/* ─── MOBILE NAV ───────────────────────────────────── */
.mobile-nav{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:#fff;
  z-index:1000;
  padding:24px;
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
  overflow-y:auto;
}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:32px;
  padding-bottom:20px;
  border-bottom:1px solid var(--gray-100);
}
.mobile-close{
  width:40px;height:40px;
  background:var(--gray-100);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  color:var(--gray-700);
  cursor:pointer;border:none;
}
.mobile-nav-links{display:flex;flex-direction:column;gap:4px;flex:1}
.mobile-nav-links a{
  padding:14px 16px;
  border-radius:var(--radius);
  font-size:17px;font-weight:700;
  color:var(--gray-700);
  border-bottom:1px solid var(--gray-100);
  display:flex;align-items:center;justify-content:space-between;
}
.mobile-nav-links a:hover{background:var(--blue-pale);color:var(--blue)}
.mobile-nav-links .buddy-link{color:var(--orange)!important}
.mobile-nav-cta{
  margin-top:24px;
  background:var(--orange);
  color:#fff;
  padding:16px;
  border-radius:var(--radius-lg);
  font-family:'Fredoka',sans-serif;
  font-size:19px;font-weight:600;
  text-align:center;
  box-shadow:var(--shadow-orange);
}
.mobile-contact{
  margin-top:16px;
  background:var(--blue-pale);
  border-radius:var(--radius);
  padding:16px;
  font-size:14px;
  color:var(--blue);
  font-weight:700;
  text-align:center;
}

/* ══════════════════════════════════════════════════════
   HERO SECTION — Slider (desktop) + Video (mobile)
   ══════════════════════════════════════════════════════ */
.hero {
    position: relative;
    min-height: 72vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 80px 0 60px;
    background: #0E3A78;
    /* fallback while image loads */
}

/* ── DESKTOP SLIDER ─────────────────────── */
.hero-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
    height: 72vh;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.hero-slide.active {
    opacity: 1
}

/* Slide images — replace with real school photos */
.hs-1 {
    background-image: url('https://lh3.googleusercontent.com/gps-cs-s/APNQkAFUyysR0M-BUIkqBT-c4nT_BRHjN_dz4wvZfskDGEsukBxu03BWt4eKf2YEoIVKrqB9U9_BRzN7cN5PTmRTB0_mZytdKfYOdUrNt63vlG4HRnqjeJudUR5VtyKbeJYMV9K2eq72=s680-w680-h510')
}

.hs-2 {
    background-image: url('https://lh3.googleusercontent.com/gps-cs-s/APNQkAFUyysR0M-BUIkqBT-c4nT_BRHjN_dz4wvZfskDGEsukBxu03BWt4eKf2YEoIVKrqB9U9_BRzN7cN5PTmRTB0_mZytdKfYOdUrNt63vlG4HRnqjeJudUR5VtyKbeJYMV9K2eq72=s680-w680-h510')
}

.hs-3 {
    background-image: url('https://lh3.googleusercontent.com/gps-cs-s/APNQkAFUyysR0M-BUIkqBT-c4nT_BRHjN_dz4wvZfskDGEsukBxu03BWt4eKf2YEoIVKrqB9U9_BRzN7cN5PTmRTB0_mZytdKfYOdUrNt63vlG4HRnqjeJudUR5VtyKbeJYMV9K2eq72=s680-w680-h510')
}

/* Overlay on top of each slide */
.hero-slider-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(110deg,
            rgba(14, 58, 120, 0.82) 0%,
            rgba(14, 58, 120, 0.60) 45%,
            rgba(14, 58, 120, 0.30) 100%);
}

/* Slider dots */
.hero-slider-dots {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.hsd {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .4);
    border: 2px solid rgba(255, 255, 255, .6);
    cursor: pointer;
    transition: all .3s;
}

.hsd.active {
    background: #fff;
    border-color: #fff;
    transform: scale(1.2)
}

/* Slider arrows */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, .15);
    border: 2px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all .3s;
    backdrop-filter: blur(4px);
}

.hero-arrow svg {
    width: 22px;
    height: 22px;
    fill: #fff
}

.hero-arrow:hover {
    background: var(--orange);
    border-color: var(--orange)
}

.ha-prev {
    left: 24px
}

.ha-next {
    right: 24px
}

@media(max-width:767px) {
    .hero-arrow {
        display: none
    }
}

/* ── MOBILE VIDEO ───────────────────────── */
.hero-video-mobile {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-video-mobile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Video overlay — darker for text readability */
.hero-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(150deg,
            rgba(14, 58, 120, 0.78) 0%,
            rgba(14, 58, 120, 0.55) 100%);
}

/* ── On mobile: hide slider, show video ─── */
@media(max-width:767px) {
    .hero-slider {
        display: none
    }

    .hero-video-mobile {
        display: block
    }

    .hero-dots {
        display: none
    }

    .hero-slider-dots {
        display: none
    }
}

/* Dot grid (desktop only) */
.hero-dots {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image: radial-gradient(circle, rgba(255, 255, 255, .06) 1.5px, transparent 1.5px);
    background-size: 28px 28px;
    pointer-events: none
}

/* Remove old blobs — not needed with real images */
.hero-blob-1,
.hero-blob-2,
.hero-blob-3 {
    display: none
}

/* Decorative CSS stars */
.deco-star {
    position: absolute;
    background: var(--sun);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    opacity: .45;
}

.ds1 {
    width: 28px;
    height: 28px;
    top: 18%;
    left: 7%;
    animation: float-sm 5s ease-in-out infinite .5s
}

.ds2 {
    width: 18px;
    height: 18px;
    top: 72%;
    left: 5%;
    animation: float-sm 7s ease-in-out infinite 1s
}

.ds3 {
    width: 22px;
    height: 22px;
    top: 15%;
    right: 8%;
    animation: float-sm 6s ease-in-out infinite 1.5s
}

.ds4 {
    width: 14px;
    height: 14px;
    top: 65%;
    right: 10%;
    animation: float-sm 8s ease-in-out infinite 2s
}

/* Hero layout */
.hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 2;
    margin-top: -100px;
}

/* Admission badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, .15);
    border: 2px solid rgba(255, 255, 255, .45);
    border-radius: var(--radius-pill);
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 22px;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
}

.badge-pulse {
    width: 9px;
    height: 9px;
    background: var(--orange);
    border-radius: 50%;
    position: relative;
    flex-shrink: 0
}

.badge-pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--orange);
    animation: pulse-ring 1.8s ease-out infinite
}

.hero h1 {
    font-size: clamp(38px, 5.5vw, 66px);
    font-weight: 700;
    color: #fff;
    line-height: 1.08;
    margin-bottom: 20px
}

.hero h1 .hl {
    color: var(--sun);
    position: relative;
    display: inline-block
}

.hero h1 .hl::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    right: 0;
    height: 5px;
    background: var(--sun);
    border-radius: 4px;
    opacity: .35
}

.hero-desc {
    font-size: 18px;
    color: rgba(255, 255, 255, .88);
    line-height: 1.75;
    max-width: 510px;
    margin-bottom: 34px
}

.hero-desc strong {
    color: var(--sun);
    font-weight: 800
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 36px
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.trust-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, .15);
    border: 1.5px solid rgba(255, 255, 255, .35);
    border-radius: 11px;
    padding: 7px 13px;
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    backdrop-filter: blur(8px);
}

.trust-chip svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0
}

/* Hero visual */
.hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.bunny-stage {
    width: 340px;
    height: 340px;
    background: linear-gradient(135deg, #FFE8C8, #FFF6EC);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 24px 64px rgba(255, 140, 0, .2);
}

.bunny-stage {
    display: none;
}

@media (min-width: 576px) {
    .bunny-stage {
        display: flex;
    }
}

.bunny-stage::before {
    content: '';
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    border: 3px dashed rgba(255, 140, 0, .28);
    animation: spin-slow 22s linear infinite;
}

.bunny-stage::after {
    content: '';
    position: absolute;
    inset: -36px;
    border-radius: 50%;
    border: 1.5px dashed rgba(255, 140, 0, .13);
    animation: spin-slow 35s linear infinite reverse;
}

.bunny-img {
    width: 230px;
    height: auto;
    position: relative;
    z-index: 2;
    animation: float 4.5s ease-in-out infinite;
    filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
}

/* Speech bubble */
.bunny-bubble {
    position: absolute;
    top: -24px;
    right: -103px;
    background: #fff;
    border-radius: 18px 18px 18px 4px;
    padding: 12px 18px;
    box-shadow: var(--shadow);
    font-family: 'Fredoka', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--blue);
    white-space: nowrap;
    animation: float-sm 4s ease-in-out infinite .5s;
    z-index: 5;
}

.bunny-bubble::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 16px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 12px solid #fff
}

/* Floating info cards */
.fcard {
    position: absolute;
    background: #fff;
    border-radius: var(--radius);
    padding: 12px 16px;
    box-shadow: var(--shadow);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: float-sm 5.5s ease-in-out infinite;
}

.fcard:nth-child(odd) {
    animation-duration: 4.5s;
    animation-delay: .8s
}

.fc-pos-1 {
    top: -10px;
    left: -8px
}

.fc-pos-2 {
    bottom: 30px;
    right: -72px
}

.fc-pos-3 {
    bottom: -10px;
    left: -44px
}

.fcard-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.fcard-icon svg {
    width: 20px;
    height: 20px
}

.fi-orange {
    background: var(--orange-lt)
}

.fi-orange svg {
    fill: var(--orange)
}

.fi-blue {
    background: var(--blue-pale)
}

.fi-blue svg {
    fill: var(--blue)
}

.fi-green {
    background: var(--green-lt)
}

.fi-green svg {
    fill: var(--green)
}

.fcard-label {
    font-size: 11px;
    color: var(--gray-400);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px
}

.fcard-val {
    font-family: 'Fredoka', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    line-height: 1
}

/* ══════════════════════════════════════════════════════
   HERO VIDEO (mobile) — hidden on desktop
   ══════════════════════════════════════════════════════ */
.hero-video-mobile {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-video-mobile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .2;
}

@media(max-width:767px) {
    .hero-video-mobile {
        display: block
    }

    .hero-dots {
        display: none
    }
}

/* ══════════════════════════════════════════════════════
   STATS BAR
   ══════════════════════════════════════════════════════ */
.stats-bar {
    background: var(--blue);
    padding: 28px 0;
    position: relative;
    overflow: hidden
}

.stats-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--blue-dark), var(--blue), var(--blue-mid));
    opacity: .55
}

.stats-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: relative;
    z-index: 1
}

.stat-it {
    text-align: center;
    padding: 16px 12px;
    border-right: 1px solid rgba(255, 255, 255, .15)
}

.stat-it:last-child {
    border-right: none
}

.stat-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, .12);
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px
}

.stat-icon svg {
    width: 24px;
    height: 24px;
    fill: #fff
}

.stat-num {
    font-family: 'Fredoka', sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    margin-bottom: 4px
}

.stat-lbl {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .75);
    font-weight: 700;
    letter-spacing: .3px
}

/* ══════════════════════════════════════════════════════
   ABOUT
   ══════════════════════════════════════════════════════ */
.about-section {
    background: #fff;
    overflow: hidden
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center
}

/* Photo mosaic */
.mosaic {
    position: relative;
    height: 500px
}

.mosaic-main {
    position: absolute;
    top: 0;
    left: 0;
    width: 66%;
    height: 78%;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg)
}

.mosaic-sm1 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 47%;
    height: 44%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow)
}

.mosaic-sm2 {
    position: absolute;
    top: 0;
    right: 0;
    width: 41%;
    height: 46%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow)
}

.mosaic-sm3 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40%;
    height: 44%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow)
}

.photo-ph {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, .75)
}

.photo-ph svg {
    width: 32px;
    height: 32px;
    fill: rgba(255, 255, 255, .7)
}

.ph-a {
    background: linear-gradient(135deg, #3B82F6, #1D4ED8)
}

.ph-b {
    background: linear-gradient(135deg, #F97316, #C2410C)
}

.ph-c {
    background: linear-gradient(135deg, #10B981, #065F46)
}

.ph-d {
    background: linear-gradient(135deg, #8B5CF6, #5B21B6)
}

.mosaic-badge {
    position: absolute;
    top: 46%;
    left: -32px;
    background: #fff;
    border-radius: 18px;
    padding: 16px 22px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .14);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 14px;
}

.mb-num {
    font-family: 'Fredoka', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--blue)
}

.mb-lbl {
    font-size: 11px;
    color: var(--gray-400);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px
}

.stars-row {
    display: flex;
    gap: 2px;
    margin-top: 4px
}

.stars-row svg {
    width: 13px;
    height: 13px;
    fill: var(--sun)
}

.about-pills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    margin: 28px 0
}

.a-pill {
    background: var(--blue-pale);
    border-radius: var(--radius);
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    transition: var(--t)
}

.a-pill:hover {
    background: var(--blue-light);
    transform: translateY(-2px)
}

.a-pill-icon {
    width: 38px;
    height: 38px;
    background: var(--blue);
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.a-pill-icon svg {
    width: 19px;
    height: 19px;
    fill: #fff
}

.a-pill-txt {
    font-size: 13px;
    font-weight: 700;
    color: var(--gray-700);
    line-height: 1.4
}

/* ══════════════════════════════════════════════════════
   BUNNY / MEET BUNNY — USP SECTION
   ══════════════════════════════════════════════════════ */
.bunny-section {
    background: linear-gradient(155deg, #FFF9F2 0%, var(--cream) 50%, #FFF3EC 100%);
    position: relative;
    overflow: hidden;
    padding: 88px 0;
}

.bunny-bg-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 140, 0, .07), transparent 70%);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none
}

.bunny-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center
}

.bunny-ring-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.bunny-ring {
    width: 390px;
    height: 390px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFE0B2, #FFF8EE);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 24px 64px rgba(255, 140, 0, .18);
}

.bunny-ring::before {
    content: '';
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    border: 3px dashed rgba(255, 140, 0, .28);
    animation: spin-slow 22s linear infinite
}

.bunny-ring::after {
    content: '';
    position: absolute;
    inset: -38px;
    border-radius: 50%;
    border: 1.5px dashed rgba(255, 140, 0, .12);
    animation: spin-slow 38s linear infinite reverse
}

.bunny-char-img {
    width: 240px;
    height: auto;
    animation: float 4.5s ease-in-out infinite;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .15));
    position: relative;
    z-index: 2;
}

/* Orbiting badges */
.b-orb {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow)
}

.b-orb svg {
    fill: currentColor
}

.bo-1 {
    width: 62px;
    height: 62px;
    top: 16px;
    right: 16px;
    animation: float-sm 5s ease-in-out infinite .5s;
    color: var(--sun)
}

.bo-1 svg {
    width: 28px;
    height: 28px
}

.bo-2 {
    width: 52px;
    height: 52px;
    top: 50%;
    left: -10px;
    animation: float-sm 4.5s ease-in-out infinite 1s;
    color: var(--mint)
}

.bo-2 svg {
    width: 24px;
    height: 24px
}

.bo-3 {
    width: 48px;
    height: 48px;
    bottom: 24px;
    right: 4px;
    animation: float-sm 6s ease-in-out infinite 2s;
    color: var(--coral)
}

.bo-3 svg {
    width: 22px;
    height: 22px
}

.bo-4 {
    width: 44px;
    height: 44px;
    bottom: 36px;
    left: 18px;
    animation: float-sm 4s ease-in-out infinite 1.5s;
    color: var(--blue)
}

.bo-4 svg {
    width: 20px;
    height: 20px
}

.bunny-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 28px
}

.bf-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 18px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .07);
    display: flex;
    align-items: flex-start;
    gap: 13px;
    transition: var(--t);
    border: 1.5px solid transparent;
}

.bf-card:hover {
    border-color: rgba(255, 140, 0, .22);
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(255, 140, 0, .1)
}

.bf-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.bf-icon svg {
    width: 22px;
    height: 22px
}

.bfi-o {
    background: var(--orange-lt)
}

.bfi-o svg {
    fill: var(--orange)
}

.bfi-b {
    background: var(--blue-pale)
}

.bfi-b svg {
    fill: var(--blue)
}

.bfi-g {
    background: var(--green-lt)
}

.bfi-g svg {
    fill: var(--green)
}

.bfi-p {
    background: #FFF0F4
}

.bfi-p svg {
    fill: var(--coral)
}

.bf-txt h5 {
    font-family: 'Fredoka', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 3px
}

.bf-txt p {
    font-size: 12.5px;
    color: var(--gray-500);
    line-height: 1.5;
    margin: 0
}

.bunny-quote {
    background: linear-gradient(135deg, var(--orange), #FF5C00);
    border-radius: var(--radius-lg);
    padding: 22px 26px;
    margin-top: 22px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.bunny-quote::before {
    content: '"';
    font-family: 'Fredoka', sans-serif;
    font-size: 90px;
    position: absolute;
    top: -8px;
    left: 14px;
    opacity: .18;
    line-height: 1
}

.bunny-quote p {
    font-size: 15px;
    line-height: 1.7;
    font-style: italic;
    position: relative;
    z-index: 1
}

.bunny-quote cite {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
    opacity: .85;
    position: relative;
    z-index: 1
}

/* ══════════════════════════════════════════════════════
   CLASSES — 6 cards (+ Day Care)
   ══════════════════════════════════════════════════════ */
.classes-section {
    background: var(--cream);
    overflow: hidden
}

.classes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 52px;
}

.class-card {
    background: #fff;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .07);
    transition: var(--t);
    cursor: pointer;
    border: 2px solid transparent;
}

.class-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg)
}

.cc-head {
    height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    gap: 11px;
}

.cc-head::before {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    bottom: -60px;
    right: -40px
}

.cc-head::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    top: -30px;
    left: -20px
}

.cc-icon {
    width: 66px;
    height: 66px;
    background: rgba(255, 255, 255, .2);
    border-radius: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(4px)
}

.cc-icon svg {
    width: 34px;
    height: 34px;
    fill: #fff
}

.cc-age {
    background: rgba(255, 255, 255, .22);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, .3)
}

.cc-body {
    padding: 18px 18px 22px
}

.cc-name {
    font-family: 'Fredoka', sans-serif;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 7px;
    color: var(--dark)
}

.cc-desc {
    font-size: 13px;
    color: var(--gray-500);
    line-height: 1.55;
    margin-bottom: 14px
}

.cc-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13.5px;
    font-weight: 800;
    transition: gap .25s
}

.cc-link svg {
    width: 15px;
    height: 15px;
    transition: transform .25s;
    fill: currentColor
}

.class-card:hover .cc-link svg {
    transform: translateX(4px)
}

/* Class colour themes */
.ct-1 {
    background: linear-gradient(135deg, #F97316, #EA580C)
}

.ct-1 .cc-name {
    color: #C2410C
}

.ct-1 .cc-link {
    color: #C2410C
}

.ct-2 {
    background: linear-gradient(135deg, #3B82F6, #1D4ED8)
}

.ct-2 .cc-name {
    color: #1D4ED8
}

.ct-2 .cc-link {
    color: #1D4ED8
}

.ct-3 {
    background: linear-gradient(135deg, #10B981, #065F46)
}

.ct-3 .cc-name {
    color: #065F46
}

.ct-3 .cc-link {
    color: #065F46
}

.ct-4 {
    background: linear-gradient(135deg, #8B5CF6, #5B21B6)
}

.ct-4 .cc-name {
    color: #5B21B6
}

.ct-4 .cc-link {
    color: #5B21B6
}

.ct-5 {
    background: linear-gradient(135deg, #EF4444, #B91C1C)
}

.ct-5 .cc-name {
    color: #B91C1C
}

.ct-5 .cc-link {
    color: #B91C1C
}

/* Day Care — special full-width card */
.ct-6 {
    background: linear-gradient(135deg, #0E3A78, var(--blue))
}

.ct-6 .cc-name {
    color: var(--blue)
}

.ct-6 .cc-link {
    color: var(--blue)
}

.class-card.daycare-card {
    grid-column: span 3
}

.daycare-card .cc-head {
    height: 130px;
    flex-direction: row;
    justify-content: center;
    gap: 24px
}

.daycare-card .cc-body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    align-items: center;
    padding: 24px 28px
}

.dc-features {
    display: flex;
    flex-direction: column;
    gap: 8px;
    grid-column: span 2
}

.dc-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--gray-700)
}

.dc-feature svg {
    width: 16px;
    height: 16px;
    fill: var(--blue);
    flex-shrink: 0
}

/* ══════════════════════════════════════════════════════
   FACILITIES / WHY CHOOSE
   ══════════════════════════════════════════════════════ */
.fac-section {
    background: #fff
}

.fac-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 52px
}

.fac-card {
    background: var(--blue-pale);
    border-radius: var(--radius-xl);
    padding: 26px 20px;
    transition: var(--t);
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
}

.fac-card::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(26, 92, 176, .05);
    bottom: -28px;
    right: -28px
}

.fac-card:hover {
    background: #fff;
    border-color: var(--blue);
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(26, 92, 176, .12)
}

.fac-card:hover .fac-icon {
    background: var(--blue);
    transform: scale(1.08) rotate(-5deg)
}

.fac-card:hover .fac-icon svg {
    fill: #fff
}

.fac-icon {
    width: 60px;
    height: 60px;
    background: rgba(26, 92, 176, .1);
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    transition: var(--t)
}

.fac-icon svg {
    width: 28px;
    height: 28px;
    fill: var(--blue);
    transition: fill .3s
}

.fac-title {
    font-family: 'Fredoka', sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 9px;
    color: var(--dark)
}

.fac-desc {
    font-size: 13px;
    color: var(--gray-500);
    line-height: 1.65
}

/* ══════════════════════════════════════════════════════
   GALLERY PREVIEW
   ══════════════════════════════════════════════════════ */
.gallery-section {
    background: var(--cream)
}

.gal-mosaic {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 260px 260px;
    gap: 16px;
    margin-top: 52px;
}

.gal-cell {
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    cursor: zoom-in;
}

.gal-cell.tall {
    grid-row: span 2
}

.gal-ph {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform .5s;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, .7)
}

.gal-ph svg {
    width: 36px;
    height: 36px;
    fill: rgba(255, 255, 255, .7)
}

.gal-cell:hover .gal-ph {
    transform: scale(1.07)
}

.gal-ov {
    position: absolute;
    inset: 0;
    background: rgba(26, 92, 176, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s
}

.gal-cell:hover .gal-ov {
    opacity: 1
}

.gal-ov svg {
    width: 34px;
    height: 34px;
    fill: #fff
}

.ga {
    background: linear-gradient(135deg, #3B82F6, #1D4ED8)
}

.gb {
    background: linear-gradient(135deg, #10B981, #065F46)
}

.gc {
    background: linear-gradient(135deg, #F97316, #C2410C)
}

.gd {
    background: linear-gradient(135deg, #8B5CF6, #4C1D95)
}

.ge {
    background: linear-gradient(135deg, #EF4444, #991B1B)
}


/* ══════════════════════════════════════════════════════
   ZOOM OVERLAY
   ══════════════════════════════════════════════════════ */
#gal-zoom-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .85);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease;
    cursor: zoom-out;
}

#gal-zoom-box {
    width: 80vw;
    max-width: 700px;
    height: 70vh;
    border-radius: var(--radius-lg, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    animation: gal-zoom-in .3s ease;
}

#gal-zoom-label {
    font-size: 20px;
    font-weight: 700;
    color: rgba(255, 255, 255, .85);
    letter-spacing: .5px;
}

@keyframes gal-zoom-in {
    from {
        transform: scale(.85);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}


/* ══════════════════════════════════════════════════════
   GOOGLE REVIEWS SECTION
   ══════════════════════════════════════════════════════ */
.reviews-section {
    background: #fff
}

/* Google badge */
.google-rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: var(--cream);
    border: 2px solid rgba(26, 92, 176, .12);
    border-radius: var(--radius-lg);
    padding: 18px 28px;
    margin-bottom: 48px;
    box-shadow: var(--shadow);
}

.grb-logo svg {
    width: 80px;
    height: auto
}

.grb-divider {
    width: 1.5px;
    height: 48px;
    background: var(--gray-100)
}

.grb-score {
    font-family: 'Fredoka', sans-serif;
    font-size: 52px;
    font-weight: 700;
    color: var(--dark);
    line-height: 1
}

.grb-right {}

.grb-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 4px
}

.grb-stars svg {
    width: 20px;
    height: 20px;
    fill: #FBBC04
}

.grb-count {
    font-size: 13px;
    color: var(--gray-500);
    font-weight: 600
}

.grb-link {
    font-size: 13px;
    color: var(--blue);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px
}

.grb-link svg {
    width: 13px;
    height: 13px;
    fill: var(--blue)
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px
}

.review-card {
    /* background: var(--cream); */
    background: #fff;
    border-radius: var(--radius-xl);
    padding: 24px;
    border: 1.5px solid var(--gray-100);
    transition: var(--t);
    position: relative;
}

.review-card:hover {
    background: #fff;
    box-shadow: var(--shadow);
    transform: translateY(-5px)
}

/* Google G top-right */
.review-card::after {
    content: 'G';
    position: absolute;
    top: 16px;
    right: 18px;
    font-family: 'Fredoka', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: rgba(66, 133, 244, .2);
}

.rev-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 12px
}

.rev-stars svg {
    width: 16px;
    height: 16px;
    fill: #FBBC04
}

.rev-text {
    font-size: 14px;
    color: var(--gray-700);
    line-height: 1.7;
    margin-bottom: 16px;
    font-style: italic
}

.rev-author {
    display: flex;
    align-items: center;
    gap: 11px
}

.rev-av {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fredoka', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.rev-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--dark)
}

.rev-date {
    font-size: 12px;
    color: var(--gray-400);
    margin-top: 2px
}

/* ══════════════════════════════════════════════════════
   TESTIMONIALS (parents)
   ══════════════════════════════════════════════════════ */
.testi-section {
    /* background: linear-gradient(135deg, var(--blue-dark), var(--blue), var(--blue-mid)); */
    /* background : #FFFDF6; */
    background: linear-gradient(160deg, #FFF9F2 0%, #FFFDF6 50%, #FFF3EC 100%);
    padding: 40px 0;
    position: relative;
    overflow: hidden;
}

.testi-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .05) 1.5px, transparent 1.5px);
    background-size: 28px 28px
}

.testi-star-deco {
    position: absolute;
    background: rgba(255, 208, 0, .28);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)
}

.tsd-1 {
    width: 38px;
    height: 38px;
    top: 12%;
    left: 5%;
    animation: float-sm 4s ease-in-out infinite
}

.tsd-2 {
    width: 22px;
    height: 22px;
    top: 72%;
    left: 8%;
    animation: float-sm 6s ease-in-out infinite .5s
}

.tsd-3 {
    width: 30px;
    height: 30px;
    top: 16%;
    right: 7%;
    animation: float-sm 5s ease-in-out infinite 1s
}

.tsd-4 {
    width: 18px;
    height: 18px;
    top: 65%;
    right: 9%;
    animation: float-sm 7s ease-in-out infinite 1.5s
}

.testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 52px;
    position: relative;
    z-index: 1
}

.testi-card {
    background: rgba(255, 255, 255, .09);
    backdrop-filter: blur(16px);
    border: 1.5px solid rgba(255, 255, 255, .18);
    border-radius: var(--radius-xl);
    padding: 28px;
    transition: var(--t);
}

.testi-card:hover {
    background: rgba(255, 255, 255, .16);
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, .35)
}

.t-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 14px
}

.t-stars svg {
    width: 17px;
    height: 17px;
    fill: var(--sun)
}

.t-quote {
    font-size: 14.5px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .9);
    font-style: italic;
    margin-bottom: 20px
}

.t-author {
    display: flex;
    align-items: center;
    gap: 13px
}

.t-av {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fredoka', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    border: 2.5px solid rgba(255, 255, 255, .3)
}

.t-name {
    font-size: 14.5px;
    font-weight: 800;
    color: #fff
}

.t-class {
    font-size: 12px;
    color: rgba(255, 255, 255, .6);
    margin-top: 2px
}

/* ══════════════════════════════════════════════════════
   INSTAGRAM FEED SECTION
   ══════════════════════════════════════════════════════ */
.insta-section {
    background: var(--cream);
    padding: 40px 0
}

.insta-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 16px
}

.insta-brand {
    display: flex;
    align-items: center;
    gap: 16px
}

.insta-logo-wrap {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #833AB4, #FD1D1D, #FCAF45);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.insta-logo-wrap svg {
    width: 28px;
    height: 28px;
    fill: #fff
}

.insta-handle {
    font-family: 'Fredoka', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--dark)
}

.insta-sub {
    font-size: 13px;
    color: var(--gray-500);
    margin-top: 2px
}

.insta-follow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #833AB4, #FD1D1D, #FCAF45);
    color: #fff;
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    font-family: 'Fredoka', sans-serif;
    font-size: 15px;
    font-weight: 700;
    transition: var(--t);
}

.insta-follow:hover {
    opacity: .88;
    transform: translateY(-2px);
    color: #fff
}

.insta-follow svg {
    width: 17px;
    height: 17px;
    fill: #fff
}

.insta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.insta-post {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 1;
    cursor: pointer;
}

.insta-ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .45s;
}

.insta-post:hover .insta-ph {
    transform: scale(1.07)
}

.insta-ov {
    position: absolute;
    inset: 0;
    background: rgba(131, 58, 180, .55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transition: opacity .3s;
}

.insta-post:hover .insta-ov {
    opacity: 1
}

.insta-ov svg {
    width: 28px;
    height: 28px;
    fill: #fff
}

.insta-ov span {
    font-family: 'Fredoka', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #fff
}

/* Post BGs */
.ip1 {
    background: linear-gradient(135deg, #4F46E5, #7C3AED)
}

.ip2 {
    background: linear-gradient(135deg, #059669, #047857)
}

.ip3 {
    background: linear-gradient(135deg, #DC2626, #B91C1C)
}

.ip4 {
    background: linear-gradient(135deg, #D97706, #B45309)
}

.ip5 {
    background: linear-gradient(135deg, #0284C7, #0369A1)
}

.ip6 {
    background: linear-gradient(135deg, #BE185D, #9D174D)
}

.insta-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, .65));
    padding: 16px 10px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    transform: translateY(100%);
    transition: transform .3s
}

.insta-post:hover .insta-caption {
    transform: translateY(0)
}

/* ══════════════════════════════════════════════════════
   ADMISSION CTA
   ══════════════════════════════════════════════════════ */
.cta-section {
    background: var(--cream);
    padding: 0 0 88px
}

.cta-block {
    background: linear-gradient(135deg, var(--orange), #FF4500);
    border-radius: var(--radius-xl);
    padding: 64px 56px;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: center;
    box-shadow: 0 20px 60px rgba(255, 140, 0, .32);
}

.cta-block::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: rgba(255, 255, 255, .07);
    border-radius: 50%;
    right: -80px;
    top: 50%;
    transform: translateY(-50%)
}

.cta-deco-1 {
    position: absolute;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, .11);
    border-radius: 16px;
    top: 22px;
    right: 270px;
    transform: rotate(15deg)
}

.cta-deco-2 {
    position: absolute;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, .08);
    border-radius: 50%;
    bottom: 20px;
    left: 36%
}

.cta-txt {
    position: relative;
    z-index: 1
}

.cta-txt h2 {
    font-family: 'Fredoka', sans-serif;
    font-size: clamp(26px, 3.5vw, 44px);
    color: #fff;
    margin-bottom: 8px
}

.cta-txt p {
    font-size: 17px;
    color: rgba(255, 255, 255, .85)
}

.cta-acts {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    z-index: 1;
    flex-shrink: 0
}

/* Bunny illustration inside CTA */
.cta-bunny-img {
    position: absolute;
    right: 360px;
    bottom: -10px;
    width: 160px;
    opacity: .25;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════
   BLOG PREVIEW
   ══════════════════════════════════════════════════════ */
.blog-section {
    background: #fff
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 52px
}

.blog-card {
    background: var(--cream);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: var(--t);
    border: 2px solid transparent;
    cursor: pointer
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--orange)
}

.blog-thumb {
    height: 196px;
    position: relative;
    overflow: hidden
}

.blog-ph {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, .75);
    transition: transform .5s
}

.blog-ph svg {
    width: 36px;
    height: 36px;
    fill: rgba(255, 255, 255, .7)
}

.blog-card:hover .blog-ph {
    transform: scale(1.06)
}

.blog-cat {
    position: absolute;
    top: 13px;
    left: 13px;
    background: var(--orange);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 13px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .4px
}

.blog-body {
    padding: 20px
}

.blog-meta {
    font-size: 12px;
    color: var(--gray-400);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px
}

.blog-meta svg {
    width: 12px;
    height: 12px;
    fill: var(--gray-400)
}

.blog-title {
    font-family: 'Fredoka', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 9px;
    line-height: 1.3
}

.blog-excerpt {
    font-size: 13px;
    color: var(--gray-500);
    line-height: 1.65;
    margin-bottom: 14px
}

.blog-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--blue);
    transition: gap .25s
}

.blog-more svg {
    width: 14px;
    height: 14px;
    fill: var(--blue);
    transition: transform .25s
}

.blog-card:hover .blog-more svg {
    transform: translateX(4px)
}

/* ══════════════════════════════════════════════════════
   CONTACT SNIPPET
   ══════════════════════════════════════════════════════ */
.contact-strip {
    background: var(--blue-pale);
    padding: 56px 0
}

.contact-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center
}

.contact-items {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.c-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    background: #fff;
    border-radius: var(--radius);
    padding: 15px 18px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
    transition: var(--t)
}

.c-item:hover {
    box-shadow: var(--shadow);
    transform: translateX(4px)
}

.c-icon {
    width: 42px;
    height: 42px;
    background: var(--blue-light);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.c-icon svg {
    width: 20px;
    height: 20px;
    fill: var(--blue)
}

.c-lbl {
    font-size: 11px;
    color: var(--gray-400);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px
}

.c-val {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--dark);
    margin-top: 2px
}

.c-val a {
    color: var(--blue)
}

.map-box {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    height: 300px
}

.map-ph {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px
}

.map-ph svg {
    width: 44px;
    height: 44px;
    fill: var(--blue);
    opacity: .55
}

.map-ph p {
    font-size: 14px;
    font-weight: 700;
    color: var(--blue);
    opacity: .65
}

/* ══════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════ */
footer {
    background: linear-gradient(160deg, #0D1F40, #0A1628);
    padding: 20px 0 0;
    position: relative;
    overflow: hidden
}

footer::before {
    content: '';
    position: absolute;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(26, 92, 176, .14), transparent 70%);
    top: -100px;
    right: -80px;
    border-radius: 50%;
    pointer-events: none
}

.footer-grid {
    display: grid;
    grid-template-columns: 2.2fr 1fr 1fr 1.6fr;
    gap: 48px;
    position: relative;
    z-index: 1
}

.footer-logo {
    max-height: 58px;
    width: auto;
    margin-bottom: 16px
}

.footer-desc {
    font-size: 13.5px;
    color: rgba(255, 255, 255, .52);
    line-height: 1.75;
    margin-bottom: 20px
}

.social-row {
    display: flex;
    gap: 9px
}

.soc-btn {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, .08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--t)
}

.soc-btn svg {
    width: 15px;
    height: 15px;
    fill: rgba(255, 255, 255, .6);
    transition: fill .3s
}

.soc-btn:hover {
    background: var(--orange);
    transform: translateY(-3px)
}

.soc-btn:hover svg {
    fill: #fff
}

.f-col-title {
    font-family: 'Fredoka', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 18px
}

.f-links {
    display: flex;
    flex-direction: column;
    gap: 9px
}

.f-links a {
    font-size: 13.5px;
    color: rgba(255, 255, 255, .52);
    transition: var(--t);
    display: flex;
    align-items: center;
    gap: 6px
}

.f-links a::before {
    content: '';
    width: 5px;
    height: 5px;
    background: var(--orange);
    border-radius: 50%;
    opacity: 0;
    transition: opacity .2s;
    flex-shrink: 0
}

.f-links a:hover {
    color: rgba(255, 255, 255, .9);
    padding-left: 3px
}

.f-links a:hover::before {
    opacity: 1
}

.f-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 12px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .52);
    line-height: 1.6
}

.f-contact-item svg {
    width: 15px;
    height: 15px;
    fill: var(--orange);
    margin-top: 2px;
    flex-shrink: 0
}

.f-contact-item a {
    color: rgba(255, 255, 255, .75)
}

.f-contact-item a:hover {
    color: var(--orange)
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .07);
    margin-top: 48px;
    padding: 18px 0;
    position: relative;
    z-index: 1
}

.footer-bottom .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px
}

.f-copy {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .3)
}

.f-copy a {
    color: var(--orange)
}

.f-policy {
    display: flex;
    gap: 18px
}

.f-policy a {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .3)
}

.f-policy a:hover {
    color: rgba(255, 255, 255, .6)
}

/* ══════════════════════════════════════════════════════
   WHATSAPP FLOAT
   ══════════════════════════════════════════════════════ */
.wa-float {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 58px;
    height: 58px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 24px rgba(37, 211, 102, .5);
    z-index: 800;
    transition: var(--t);
}

.wa-float svg {
    width: 30px;
    height: 30px;
    fill: #fff
}

.wa-float:hover {
    transform: scale(1.12);
    background: #1ebe5a
}

.wa-float::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #25D366;
    animation: pulse-ring 2.5s ease-out infinite
}

/* ══════════════════════════════════════════════════════
   MOBILE FIXED CTA BAR — appears only on mobile
   ══════════════════════════════════════════════════════ */
.mobile-cta-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 850;
    background: #fff;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .12);
    padding: 10px 16px;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mcta-call {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: var(--blue);
    color: #fff;
    border-radius: 12px;
    padding: 13px;
    font-family: 'Fredoka', sans-serif;
    font-size: 16px;
    font-weight: 700;
}

.mcta-call svg {
    width: 18px;
    height: 18px;
    fill: #fff
}

.mcta-enquire {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: var(--orange);
    color: #fff;
    border-radius: 12px;
    padding: 13px;
    font-family: 'Fredoka', sans-serif;
    font-size: 16px;
    font-weight: 700;
}

.mcta-enquire svg {
    width: 18px;
    height: 18px;
    fill: #fff
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */
@media(max-width:991px) {
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 36px;
        text-align: center
    }

    .hero-content {
        order: 2
    }

    .hero-visual {
        order: 1
    }

    .hero-desc {
        margin: 0 auto 30px
    }

    .hero-actions {
        justify-content: center
    }

    .hero-trust {
        justify-content: center
    }

    .fcard {
        display: none
    }

    .bunny-bubble {
        display: none
    }

    .about-grid,
    .bunny-grid {
        grid-template-columns: 1fr;
        gap: 48px
    }

    .mosaic {
        height: 360px
    }

    .classes-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .class-card.daycare-card {
        grid-column: span 2
    }

    .daycare-card .cc-body {
        grid-template-columns: 1fr;
        gap: 14px
    }

    .fac-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .gal-mosaic {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto
    }

    .gal-cell.tall {
        grid-row: span 1
    }

    .reviews-grid,
    .testi-grid,
    .blog-grid {
        grid-template-columns: 1fr
    }

    .insta-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr
    }

    .cta-block {
        grid-template-columns: 1fr;
        text-align: center
    }

    .cta-acts {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center
    }

    .contact-inner {
        grid-template-columns: 1fr
    }

    .stats-inner {
        grid-template-columns: repeat(2, 1fr)
    }

    .stat-it:nth-child(2) {
        border-right: none
    }

    .stat-it:nth-child(3) {
        border-right: 1px solid rgba(255, 255, 255, .15);
        border-top: 1px solid rgba(255, 255, 255, .15)
    }

    .stat-it:nth-child(4) {
        border-right: none;
        border-top: 1px solid rgba(255, 255, 255, .15)
    }
}

@media(max-width:767px) {
    .hamburger {
        display: flex !important
    }

    .site-nav {
        display: none !important
    }

    .header-cta-desktop {
        display: none
    }

    body {
        font-size: 15px
    }

    .container {
        padding: 0 16px
    }

    .section {
        padding: 60px 0
    }

    .hero {
        padding: 72px 0 44px;
        min-height: auto
    }


    .hero h1 {
        font-size: 34px
    }

    .hero-desc {
        font-size: 16px
    }

    .bunny-ring {
        width: 280px;
        height: 280px
    }

    .bunny-char-img {
        width: 180px
    }

    .mosaic-sm2,
    .mosaic-sm3 {
        display: none
    }

    .mosaic {
        height: 280px
    }

    .mosaic-badge {
        display: none
    }

    .bunny-ring-wrap .bunny-ring {
        width: 260px;
        height: 260px
    }

    .bunny-char-img {
        width: 160px
    }

    .classes-grid {
        grid-template-columns: 1fr
    }

    .class-card.daycare-card {
        grid-column: span 1
    }

    .daycare-card .cc-head {
        flex-direction: column;
        height: 130px
    }

    .bunny-features {
        grid-template-columns: 1fr
    }

    .about-pills {
        grid-template-columns: 1fr
    }

    .insta-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px
    }

    .insta-header {
        flex-direction: column;
        align-items: flex-start
    }

    .google-rating-badge {
        flex-wrap: wrap;
        gap: 12px
    }

    .cta-block {
        padding: 36px 24px;
        border-radius: var(--radius-xl)
    }

    .footer-grid {
        grid-template-columns: 1fr
    }

    .wa-float {
        bottom: 88px;
        right: 16px;
        width: 52px;
        height: 52px
    }

    .wa-float svg {
        width: 26px;
        height: 26px
    }

    .mobile-cta-bar {
        display: grid
    }

    /* Add bottom padding to body so content isn't hidden behind fixed bar */
    main {
        padding-bottom: 70px
    }
}

@media(max-width:400px) {
    .hero h1 {
        font-size: 29px
    }

    .btn {
        font-size: 15px;
        padding: 12px 20px
    }

    .insta-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .stat-num {
        font-size: 32px
    }
}

/* ============================================================
   BUNNYHOP — Stats Bar  (Animated Option 3)
   File: public/css/stats-bar.css
   ============================================================ */

/* ── Keyframes ─────────────────────────────────────────── */
@keyframes bh-stat-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bh-icon-pop {
    0% {
        transform: scale(0.4);
        opacity: 0;
    }

    65% {
        transform: scale(1.18);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bh-ring-pulse {
    0% {
        transform: scale(1);
        opacity: 0.55;
    }

    70% {
        transform: scale(1.6);
        opacity: 0;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

@keyframes bh-shimmer-slide {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 300% 50%;
    }
}

@keyframes bh-num-tick {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* ── Section wrapper ───────────────────────────────────── */
.bh-stats-bar {
    background: #ffffff;
    border-top: 1px solid rgba(26, 92, 176, 0.07);
    border-bottom: 1px solid rgba(26, 92, 176, 0.07);
    padding: 0;
    position: relative;
    overflow: hidden;
}

/* ── Inner grid ────────────────────────────────────────── */
.bh-stats-inner {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: nowrap;
    padding: 0 8px;
}

/* ── Each stat item ────────────────────────────────────── */
.bh-stat-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 28px 20px;
    flex: 1;
    position: relative;
    cursor: default;
    border-radius: 0;
    transition: background 0.25s ease, border-radius 0.25s ease;

    /* Hidden until JS triggers animation */
    opacity: 0;
    transform: translateY(20px);
}

/* Divider between items */
.bh-stat-item+.bh-stat-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 48px;
    width: 1px;
    background: rgba(26, 92, 176, 0.10);
}

/* Hover state */
.bh-stat-item:hover {
    background: #F8FAFF;
    border-radius: 12px;
}

/* Visible state — triggered by JS IntersectionObserver */
.bh-stat-item.bh-stat-in {
    animation: bh-stat-slide-up 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ── Circle icon ───────────────────────────────────────── */
.bh-stat-circle {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.bh-stat-circle svg {
    width: 28px;
    height: 28px;
    position: relative;
    z-index: 1;
    /* Hidden — animated in after slide */
    opacity: 0;
}

/* Icon pop triggers after slide-in completes */
.bh-stat-item.bh-stat-in .bh-stat-circle svg {
    animation: bh-icon-pop 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

/* Pulse ring — repeating after icon appears */
.bh-stat-circle::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: 0;
}

.bh-stat-item.bh-stat-in .bh-stat-circle::after {
    animation: bh-ring-pulse 2.6s ease-out 0.75s infinite;
}

/* Stagger ring pulse per item */
.bh-stat-item:nth-child(2).bh-stat-in .bh-stat-circle::after {
    animation-delay: 1.0s;
}

.bh-stat-item:nth-child(3).bh-stat-in .bh-stat-circle::after {
    animation-delay: 1.25s;
}

.bh-stat-item:nth-child(4).bh-stat-in .bh-stat-circle::after {
    animation-delay: 1.5s;
}

/* ── Colour themes ─────────────────────────────────────── */
.bsc-orange {
    background: #FFF4E5;
    color: #FF8C00;
}

.bsc-orange svg {
    fill: #FF8C00;
}

.bsc-blue {
    background: #EBF3FF;
    color: #1A5CB0;
}

.bsc-blue svg {
    fill: #1A5CB0;
}

.bsc-green {
    background: #EDFBF3;
    color: #3DB87A;
}

.bsc-green svg {
    fill: #3DB87A;
}

.bsc-yellow {
    background: #FFFBEB;
    color: #F59E0B;
}

.bsc-yellow svg {
    fill: #F59E0B;
}

/* ── Text ──────────────────────────────────────────────── */
.bh-stat-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bh-stat-num {
    font-family: 'Fredoka', sans-serif;
    font-size: 34px;
    font-weight: 700;
    color: #1C1C2E;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    transition: transform 0.12s ease;
    min-width: 64px;
}

/* Tick bounce during count-up */
.bh-stat-num.bh-tick {
    animation: bh-num-tick 0.12s ease;
}

.bh-stat-lbl {
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #6B7280;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

/* ── Shimmer bar (bottom) ──────────────────────────────── */
.bh-stats-shimmer {
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg,
            #FF8C00 0%,
            #1A5CB0 25%,
            #3DB87A 50%,
            #F59E0B 75%,
            #FF8C00 100%);
    background-size: 300% 100%;
    animation: bh-shimmer-slide 4s linear infinite;
    border-radius: 0 0 4px 4px;
}

/* ── Responsive ────────────────────────────────────────── */

/* Tablet — 2x2 grid */
@media (max-width: 991px) {
    .bh-stats-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        flex-wrap: unset;
    }

    .bh-stat-item {
        flex: unset;
        padding: 24px 18px;
    }

    .bh-stat-item+.bh-stat-item::before {
        display: none;
    }

    .bh-stat-item:nth-child(1) {
        border-right: 1px solid rgba(26, 92, 176, .10);
        border-bottom: 1px solid rgba(26, 92, 176, .10);
    }

    .bh-stat-item:nth-child(2) {
        border-bottom: 1px solid rgba(26, 92, 176, .10);
    }

    .bh-stat-item:nth-child(3) {
        border-right: 1px solid rgba(26, 92, 176, .10);
    }
}

/* Mobile — 2 columns × 2 rows grid */
@media (max-width: 600px) {
    .bh-stats-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        flex-wrap: unset;
    }

    .bh-stat-item {
        flex: unset;
        padding: 20px 14px;
        gap: 12px;
        justify-content: flex-start;
    }

    /* Dividers: right border on col 1, bottom border on row 1 */
    .bh-stat-item+.bh-stat-item::before {
        display: none;
    }

    .bh-stat-item:nth-child(1) {
        border-right: 1px solid rgba(26, 92, 176, .10);
        border-bottom: 1px solid rgba(26, 92, 176, .10);
    }

    .bh-stat-item:nth-child(2) {
        border-bottom: 1px solid rgba(26, 92, 176, .10);
    }

    .bh-stat-item:nth-child(3) {
        border-right: 1px solid rgba(26, 92, 176, .10);
    }

    .bh-stat-circle {
        width: 48px;
        height: 48px;
    }

    .bh-stat-circle svg {
        width: 22px;
        height: 22px;
    }

    .bh-stat-num {
        font-size: 26px;
        min-width: 48px;
    }

    .bh-stat-lbl {
        font-size: 12px;
        white-space: normal;
    }
}

/* ============================================================
   BUNNYHOP — About Section  (Option 5 · Original)
   File: public/css/about-section.css
   ============================================================ */

/* ── Keyframes ─────────────────────────────────────────── */
@keyframes bh-ab-slide-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bh-ab-slide-left {
    from {
        opacity: 0;
        transform: translateX(-24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bh-ab-slide-right {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bh-pill-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bh-photo-in {
    from {
        opacity: 0;
        transform: translateY(16px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── Section ───────────────────────────────────────────── */
.bh-about {
    background: #FFFDF6;
    padding: 40px 0;
}

/* ── Card ──────────────────────────────────────────────── */
.bh-about-card {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #E5E7EB;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .07);

    /* hidden until scroll trigger */
    opacity: 0;
}

.bh-about.bh-in .bh-about-card {
    animation: bh-ab-slide-up .6s cubic-bezier(.4, 0, .2, 1) .05s forwards;
}

/* ── Top ───────────────────────────────────────────────── */
.bh-about-top {
    background: linear-gradient(135deg, #FFF8EE, #EBF3FF);
    padding: 28px 32px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 28px;
    align-items: center;
}

/* ── Story ─────────────────────────────────────────────── */
.bh-about-story {
    opacity: 0;
}

.bh-about.bh-in .bh-about-story {
    animation: bh-ab-slide-left .6s cubic-bezier(.4, 0, .2, 1) .2s forwards;
}

/* Label */
.bh-about-lbl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FFF4E5;
    border: 1.5px solid rgba(255, 140, 0, .25);
    border-radius: 50px;
    padding: 4px 14px;
    font-family: 'Nunito', sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: #FF8C00;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 12px;
}

.bh-about-lbl svg {
    width: 11px;
    height: 11px;
    fill: #FF8C00;
}

/* Heading */
.bh-about-h2 {
    font-family: 'Fredoka', sans-serif;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 700;
    color: #1C1C2E;
    line-height: 1.2;
    margin-bottom: 12px;
}

.bh-about-h2 span {
    color: #FF8C00;
}

/* Para */
.bh-about-p {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: #6B7280;
    line-height: 1.75;
    margin-bottom: 16px;
    max-width: 520px;
}

.bh-about-p strong {
    color: #1A5CB0;
    font-weight: 800;
}

/* Pills */
.bh-about-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.bh-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 50px;
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    font-weight: 700;
    border: 1.5px solid transparent;
    transition: all .25s ease;
    /* stagger set inline via JS */
    opacity: 0;
}

.bh-about.bh-in .bh-pill {
    animation: bh-pill-in .4s ease forwards;
}

.bh-pill svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
    flex-shrink: 0;
}

.bh-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}

.bh-pill-b {
    background: #EBF3FF;
    color: #1A5CB0;
    border-color: rgba(26, 92, 176, .18);
}

.bh-pill-o {
    background: #FFF4E5;
    color: #FF8C00;
    border-color: rgba(255, 140, 0, .18);
}

.bh-pill-g {
    background: #EDFBF3;
    color: #3DB87A;
    border-color: rgba(61, 184, 122, .18);
}

/* Button */
.bh-about-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #1A5CB0;
    color: #fff;
    padding: 11px 24px;
    border-radius: 50px;
    font-family: 'Fredoka', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease;
    box-shadow: 0 6px 20px rgba(26, 92, 176, .22);
}

.bh-about-btn svg {
    width: 16px;
    height: 16px;
    fill: #fff;
    transition: transform .3s;
}

.bh-about-btn:hover {
    background: #0E3A78;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(26, 92, 176, .32);
}

.bh-about-btn:hover svg {
    transform: translateX(4px);
}

/* ── Team cards wrapper ────────────────────────────────── */
.bh-team-cards {
    display: flex;
    flex-direction: row;
    gap: 14px;
    flex-shrink: 0;
    opacity: 0;
}

.bh-about.bh-in .bh-team-cards {
    animation: bh-ab-slide-right .6s cubic-bezier(.4, 0, .2, 1) .25s forwards;
}

/* ── Individual member card ────────────────────────────── */
.bh-member-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: #fff;
    border-radius: 14px;
    padding: 16px 14px;
    border: 1.5px solid #F3F4F6;
    width: 200px;
    transition: all .25s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}

.bh-member-card:hover {
    border-color: rgba(26, 92, 176, .2);
    box-shadow: 0 8px 24px rgba(26, 92, 176, .10);
    transform: translateY(-3px);
}

/* Photo */
.bh-member-img-wrap {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    overflow: hidden;
    border: 3px solid #1A5CB0;
    flex-shrink: 0;
    position: relative;
}

.bh-member-card:nth-child(2) .bh-member-img-wrap {
    border-color: #FF8C00;
}

.bh-member-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.bh-member-fallback {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    font-family: 'Fredoka', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: rgba(255, 255, 255, .55);
}

.bh-mf-blue {
    background: linear-gradient(160deg, #1A5CB0, #0E3A78);
}

.bh-mf-orange {
    background: linear-gradient(160deg, #FF8C00, #D97000);
}

/* Name / role */
.bh-member-name {
    font-family: 'Fredoka', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1A5CB0;
    text-align: center;
    line-height: 1.2;
}

.bh-member-card:nth-child(2) .bh-member-name {
    color: #FF8C00;
}

.bh-member-role {
    font-family: 'Nunito', sans-serif;
    font-size: 11px;
    color: #9CA3AF;
    text-align: center;
    font-weight: 600;
}

/* Quote box */
.bh-member-quote {
    background: #F8FAFF;
    border-radius: 8px;
    padding: 7px 10px;
    border-left: 3px solid #1A5CB0;
    width: 100%;
}

.bh-member-card:nth-child(2) .bh-member-quote {
    background: #FFF9F2;
    border-left-color: #FF8C00;
}

.bh-member-quote p {
    font-family: 'Nunito', sans-serif;
    font-size: 10px;
    color: #6B7280;
    font-style: italic;
    line-height: 1.55;
    margin: 0;
}

/* ── Photo strip ───────────────────────────────────────── */
.bh-about-photos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: 200px;
    border-top: 2px solid rgba(255, 255, 255, .6);
}

.bh-photo {
    position: relative;
    overflow: hidden;
    opacity: 0;
}

.bh-photo+.bh-photo {
    border-left: 2px solid rgba(255, 255, 255, .5);
}

/* Scroll-triggered entrance — staggered */
.bh-about.bh-in .bh-photo:nth-child(1) {
    animation: bh-photo-in .5s ease .45s forwards;
}

.bh-about.bh-in .bh-photo:nth-child(2) {
    animation: bh-photo-in .5s ease .58s forwards;
}

.bh-about.bh-in .bh-photo:nth-child(3) {
    animation: bh-photo-in .5s ease .71s forwards;
}

/* Image */
.bh-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .45s ease;
}

.bh-photo:hover img {
    transform: scale(1.06);
}

/* Fallback placeholder */
.bh-photo-ph {
    position: absolute;
    inset: 0;
    display: none;
    /* shown via onerror */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, .75);
}

.bh-photo-ph svg {
    width: 28px;
    height: 28px;
    fill: rgba(255, 255, 255, .7);
}

.bh-ph-a {
    background: linear-gradient(135deg, #3B82F6, #1D4ED8);
}

.bh-ph-b {
    background: linear-gradient(135deg, #F97316, #C2410C);
}

.bh-ph-c {
    background: linear-gradient(135deg, #10B981, #065F46);
}

/* ── Responsive ────────────────────────────────────────── */

/* Tablet */
@media (max-width: 991px) {
    .bh-about-top {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Cards go side by side in a row */
    .bh-team-cards {
        flex-direction: row;
        justify-content: center;
        gap: 16px;
    }

    .bh-member-card {
        width: 160px;
    }

    .bh-about-photos {
        height: 180px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .bh-about {
        padding: 64px 0;
    }

    .bh-about-top {
        padding: 22px 20px;
        gap: 20px;
    }

    .bh-about-h2 {
        font-size: 24px;
    }

    .bh-about-p {
        font-size: 13.5px;
    }

    .bh-pill {
        font-size: 11.5px;
        padding: 5px 11px;
    }

    /* Both cards side by side, equal width */
    .bh-team-cards {
        flex-direction: row;
        justify-content: center;
        gap: 12px;
        flex-wrap: nowrap;
    }

    .bh-member-card {
        width: calc(50% - 6px);
        min-width: 0;
        padding: 14px 10px;
    }

    .bh-member-img-wrap {
        width: 60px;
        height: 60px;
        border-radius: 12px;
    }

    .bh-member-name {
        font-size: 13px;
    }

    /* Hide quote on mobile to keep cards compact */
    .bh-member-quote {
        display: none;
    }

    .bh-about-photos {
        height: 150px;
    }

    .bh-photo-ph {
        font-size: 11px;
    }
}

/* Extra small */
@media (max-width: 400px) {
    .bh-about-photos {
        height: 120px;
    }

    .bh-member-img-wrap {
        width: 52px;
        height: 52px;
    }
}


/* ============================================================
   BUNNYHOP — Meet Bunny Section  (Option 5)
   File: public/css/meet-bunny.css
   ============================================================ */

/* ── Keyframes ─────────────────────────────────────────── */
@keyframes bh-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }
}

@keyframes bh-float-sm {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

@keyframes bh-spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes bh-spin-rev {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@keyframes bh-orb-pulse {

    0%,
    100% {
        box-shadow: 0 4px 16px rgba(0, 0, 0, .10);
    }

    50% {
        box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
    }
}

@keyframes bh-card-in {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bh-quote-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bh-ring-in {
    from {
        opacity: 0;
        transform: scale(.88);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ── Section ───────────────────────────────────────────── */
.bh-bunny-section {
    background: linear-gradient(160deg, #FFF9F2 0%, #FFFDF6 50%, #FFF3EC 100%);
    padding: 40px 0;
    position: relative;
    overflow: hidden;
}

/* Soft radial glow behind ring */
.bh-bunny-section::before {
    content: '';
    position: absolute;
    width: 640px;
    height: 640px;
    background: radial-gradient(circle, rgba(255, 140, 0, .07), transparent 70%);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* ── Top area ──────────────────────────────────────────── */
.bh-bunny-top {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 64px;
    align-items: center;
    margin-bottom: 52px;
}

/* ── Bunny visual / ring ───────────────────────────────── */
.bh-bunny-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    /* hidden until JS fires */
    opacity: 0;
}

.bh-bunny-section.bh-in .bh-bunny-visual {
    animation: bh-ring-in .7s cubic-bezier(.4, 0, .2, 1) .1s forwards;
}

.bh-bunny-ring {
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFE0B2, #FFF8EE);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 28px 72px rgba(255, 140, 0, .18);
}

/* Rotating dashed rings */
.bh-bunny-ring::before {
    content: '';
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    border: 2.5px dashed rgba(255, 140, 0, .30);
    animation: bh-spin-slow 22s linear infinite;
}

.bh-bunny-ring::after {
    content: '';
    position: absolute;
    inset: -38px;
    border-radius: 50%;
    border: 1.5px dashed rgba(255, 140, 0, .14);
    animation: bh-spin-rev 34s linear infinite;
}

/* Bunny character image */
.bh-bunny-char {
    width: 230px;
    height: auto;
    position: relative;
    z-index: 2;
    animation: bh-float 4.5s ease-in-out infinite;
    filter: drop-shadow(0 18px 36px rgba(0, 0, 0, .15));
}

/* Fallback */
.bh-bunny-fallback {
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: rgba(255, 140, 0, .1);
    display: none;
    /* shown via onerror */
    align-items: center;
    justify-content: center;
    font-family: 'Fredoka', sans-serif;
    font-size: 80px;
    font-weight: 700;
    color: rgba(255, 140, 0, .25);
    position: relative;
    z-index: 2;
}

/* ── Orbiting icon bubbles ─────────────────────────────── */
.bh-orb {
    position: absolute;
    /* border-radius: 50%; */
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: #fff; */
    /* box-shadow: 0 6px 20px rgba(0,0,0,.10); */
    z-index: 3;
    /* animation: bh-float-sm 5s ease-in-out infinite, bh-orb-pulse 5s ease-in-out infinite; */
}

.bh-orb svg {
    position: relative;
    z-index: 1;
}

.bh-orb-1 {
    width: 80px;
    height: 80px;
    top: 14px;
    right: -40px;
    animation-delay: .4s;
}

.bh-orb-1 svg {
    width: 26px;
    height: 26px;
    fill: #FFD000;
}

.bh-orb-2 {
    width: 80px;
    height: 80px;
    top: 12%;
    left: -14px;
    transform: translateY(-50%);
    animation-delay: 1.0s;
}

.bh-orb-2 svg {
    width: 22px;
    height: 22px;
    fill: #EC4899;
}

.bh-orb-3 {
    width: 80px;
    height: 80px;
    bottom: 20px;
    right: 0px;
    animation-delay: 1.6s;
}

.bh-orb-3 svg {
    width: 20px;
    height: 20px;
    fill: #FF8C00;
}

.bh-orb-4 {
    width: 80px;
    height: 80px;
    bottom: 30px;
    left: 20px;
    animation-delay: 2.2s;
}

.bh-orb-4 svg {
    width: 18px;
    height: 18px;
    fill: #1A5CB0;
}

/* ── Content ───────────────────────────────────────────── */
.bh-bunny-content {
    opacity: 0;
}

.bh-bunny-section.bh-in .bh-bunny-content {
    animation: bh-card-in .65s ease .25s forwards;
}

/* Label */
.bh-bunny-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #FFF4E5;
    border: 1.5px solid rgba(255, 140, 0, .25);
    border-radius: 50px;
    padding: 6px 18px;
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: #FF8C00;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 18px;
}

.bh-bunny-label svg {
    width: 13px;
    height: 13px;
    fill: #FF8C00;
}

/* Title */
.bh-bunny-title {
    font-family: 'Fredoka', sans-serif;
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 700;
    color: #1C1C2E;
    line-height: 1.15;
    margin-bottom: 18px;
}

.bh-bunny-name {
    color: #FF8C00;
}

/* Description */
.bh-bunny-desc {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    color: #6B7280;
    line-height: 1.80;
    max-width: 520px;
    margin-bottom: 30px;
}

.bh-bunny-desc strong {
    color: #1A5CB0;
    font-weight: 800;
}

/* CTA button */
.bh-bunny-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FF8C00;
    color: #fff;
    padding: 13px 28px;
    border-radius: 50px;
    font-family: 'Fredoka', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease;
    box-shadow: 0 8px 24px rgba(255, 140, 0, .30);
}

.bh-bunny-btn svg {
    width: 18px;
    height: 18px;
    fill: #fff;
    transition: transform .3s;
}

.bh-bunny-btn:hover {
    background: #D97000;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(255, 140, 0, .42);
}

.bh-bunny-btn:hover svg {
    transform: translateX(4px);
}

/* ── Feature cards strip ───────────────────────────────── */
.bh-bunny-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 28px;
}

.bh-bcard {
    background: #fff;
    border-radius: 20px;
    padding: 26px 22px;
    border: 1.5px solid rgba(0, 0, 0, .06);
    transition: all .3s ease;
    position: relative;
    overflow: hidden;
    /* hidden until scroll trigger */
    opacity: 0;
    transform: translateY(22px);
}

/* Decorative corner circle */
.bh-bcard::before {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    bottom: -28px;
    right: -28px;
    opacity: .05;
    transition: opacity .3s;
}

.bh-bcard:hover::before {
    opacity: .10;
}

.bh-bcard-1::before {
    background: #FF8C00;
}

.bh-bcard-2::before {
    background: #1A5CB0;
}

.bh-bcard-3::before {
    background: #3DB87A;
}

.bh-bcard-4::before {
    background: #EC4899;
}

/* Hover lift */
.bh-bcard:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .10);
}

.bh-bcard-1:hover {
    border-color: rgba(255, 140, 0, .25);
    box-shadow: 0 16px 40px rgba(255, 140, 0, .12);
}

.bh-bcard-2:hover {
    border-color: rgba(26, 92, 176, .22);
    box-shadow: 0 16px 40px rgba(26, 92, 176, .10);
}

.bh-bcard-3:hover {
    border-color: rgba(61, 184, 122, .22);
    box-shadow: 0 16px 40px rgba(61, 184, 122, .10);
}

.bh-bcard-4:hover {
    border-color: rgba(236, 72, 153, .22);
    box-shadow: 0 16px 40px rgba(236, 72, 153, .10);
}

/* Icon */
.bh-bcard-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    transition: transform .3s;
}

.bh-bcard:hover .bh-bcard-icon {
    transform: scale(1.1) rotate(-5deg);
}

.bh-bcard-icon svg {
    width: 26px;
    height: 26px;
}

.bh-bci-orange {
    background: #FFF4E5;
}

.bh-bci-orange svg {
    fill: #FF8C00;
}

.bh-bci-blue {
    background: #EBF3FF;
}

.bh-bci-blue svg {
    fill: #1A5CB0;
}

.bh-bci-green {
    background: #EDFBF3;
}

.bh-bci-green svg {
    fill: #3DB87A;
}

.bh-bci-pink {
    background: #FFF0F4;
}

.bh-bci-pink svg {
    fill: #EC4899;
}

/* Card text */
.bh-bcard-title {
    font-family: 'Fredoka', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #1C1C2E;
    margin-bottom: 8px;
    line-height: 1.2;
}

.bh-bcard-desc {
    font-family: 'Nunito', sans-serif;
    font-size: 13.5px;
    color: #6B7280;
    line-height: 1.65;
    margin: 0;
}

/* Staggered card entrance */
.bh-bunny-section.bh-in .bh-bcard-1 {
    animation: bh-card-in .55s ease .35s forwards;
}

.bh-bunny-section.bh-in .bh-bcard-2 {
    animation: bh-card-in .55s ease .48s forwards;
}

.bh-bunny-section.bh-in .bh-bcard-3 {
    animation: bh-card-in .55s ease .61s forwards;
}

.bh-bunny-section.bh-in .bh-bcard-4 {
    animation: bh-card-in .55s ease .74s forwards;
}

/* ── Quote banner ──────────────────────────────────────── */
.bh-bunny-quote {
    background: linear-gradient(135deg, #FF8C00 0%, #FF5000 100%);
    border-radius: 24px;
    padding: 16px 26px;
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 24px;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(255, 140, 0, .30);
    opacity: 0;
}

.bh-bunny-section.bh-in .bh-bunny-quote {
    animation: bh-quote-in .65s ease .85s forwards;
}

/* Decorative shapes inside banner */
.bh-bunny-quote::before {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    right: -60px;
    top: 50%;
    transform: translateY(-50%);
}

.bh-bunny-quote::after {
    content: '';
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    left: 38%;
    bottom: -40px;
}

/* Quote left content */
.bh-quote-left {
    position: relative;
    z-index: 2;
}

.bh-quote-mark-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, .18);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.bh-quote-mark-icon svg {
    width: 20px;
    height: 20px;
    fill: #fff;
}

.bh-quote-text {
    font-family: 'Nunito', sans-serif;
    font-size: 17px;
    font-style: italic;
    color: #fff;
    line-height: 1.70;
    margin-bottom: 8px;
}

.bh-quote-text strong {
    font-style: normal;
    font-weight: 800;
    color: #FFD000;
}

/* Author row */
.bh-quote-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bh-quote-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .20);
    border: 2.5px solid rgba(255, 255, 255, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fredoka', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.bh-quote-name {
    font-family: 'Nunito', sans-serif;
    font-size: 14.5px;
    font-weight: 800;
    color: #fff;
}

.bh-quote-class {
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    color: rgba(255, 255, 255, .70);
    margin-top: 2px;
}

/* Right: Bunny watermark */
.bh-quote-right {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.bh-quote-bunny {
    width: 160px;
    height: auto;
    opacity: .22;
    filter: brightness(10);
    pointer-events: none;
}

/* ── Responsive ────────────────────────────────────────── */

/* Large tablet */
@media (max-width: 1100px) {
    .bh-bunny-top {
        grid-template-columns: 340px 1fr;
        gap: 48px;
    }

    .bh-bunny-ring {
        width: 280px;
        height: 280px;
    }

    .bh-bunny-char {
        width: 190px;
    }
}

/* Tablet */
@media (max-width: 991px) {
    .bh-bunny-top {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .bh-bunny-visual {
        justify-content: center;
    }

    .bh-bunny-ring {
        width: 260px;
        height: 260px;
    }

    .bh-bunny-char {
        width: 170px;
    }

    .bh-bunny-label {
        margin: 0 auto 18px;
    }

    .bh-bunny-desc {
        margin: 0 auto 28px;
    }

    .bh-bunny-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .bh-bunny-quote {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 28px 32px;
    }

    .bh-quote-right {
        display: none;
    }

    .bh-quote-author {
        justify-content: center;
    }

    .bh-quote-mark-icon {
        margin: 0 auto 14px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .bh-bunny-section {
        padding: 64px 0;
    }

    .bh-bunny-ring {
        width: 220px;
        height: 220px;
    }

    .bh-bunny-char {
        width: 140px;
    }

    .bh-bunny-title {
        font-size: 28px;
    }

    .bh-bunny-desc {
        font-size: 15px;
    }

    .bh-bunny-cards {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .bh-bcard {
        padding: 20px 16px;
    }

    .bh-bcard-icon {
        width: 44px;
        height: 44px;
        border-radius: 13px;
        margin-bottom: 14px;
    }

    .bh-bcard-icon svg {
        width: 22px;
        height: 22px;
    }

    .bh-bcard-title {
        font-size: 16px;
    }

    .bh-bcard-desc {
        font-size: 12.5px;
    }

    .bh-bunny-quote {
        padding: 24px 20px;
        border-radius: 18px;
    }

    .bh-quote-text {
        font-size: 15px;
    }

    /* orbs: smaller on mobile */
    .bh-orb-1 {
        width: 46px;
        height: 46px;
    }

    .bh-orb-1 svg {
        width: 20px;
        height: 20px;
    }

    .bh-orb-2 {
        width: 40px;
        height: 40px;
    }

    .bh-orb-3 {
        width: 36px;
        height: 36px;
    }

    .bh-orb-4 {
        width: 34px;
        height: 34px;
    }
}

/* Extra small */
@media (max-width: 400px) {
    .bh-bunny-cards {
        grid-template-columns: 1fr;
    }

    .bh-bunny-ring {
        width: 200px;
        height: 200px;
    }

    .bh-bunny-char {
        width: 128px;
    }
}

/* ============================================================
   BUNNYHOP — Meet Bunny Section  (Option 5)
   File: public/css/meet-bunny.css
   ============================================================ */

/* ============================================================
   BUNNYHOP — Classes Section  (Option 4 · Magazine 3+2)
   File: public/css/classes-section.css
   ============================================================ */

@keyframes bh-cls-up {
    from {
        opacity: 0;
        transform: translateY(26px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bh-dc-in {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Section */
.bh-cls {
    background: #FFFDF6;
    padding: 40px 0;
}

/* Heading */
.bh-cls-head {
    text-align: center;
    margin-bottom: 52px;
    opacity: 0;
}

.bh-cls.bh-in .bh-cls-head {
    animation: bh-cls-up .6s ease .05s forwards;
}

.bh-cls-lbl {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #EBF3FF;
    border: 1.5px solid rgba(26, 92, 176, .2);
    border-radius: 50px;
    padding: 5px 18px;
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: #1A5CB0;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 14px;
}

.bh-cls-lbl svg {
    width: 13px;
    height: 13px;
    fill: #1A5CB0;
}

.bh-cls-title {
    font-family: 'Fredoka', sans-serif;
    font-size: clamp(28px, 3.8vw, 46px);
    font-weight: 700;
    color: #1C1C2E;
    line-height: 1.15;
    margin-bottom: 14px;
}

.bh-cls-title span {
    color: #FF8C00;
}

.bh-cls-sub {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    color: #6B7280;
    line-height: 1.75;
    max-width: 580px;
    margin: 0 auto;
}

/* Rows */
.bh-cls-row {
    display: grid;
    gap: 18px;
    margin-bottom: 18px;
}

.bh-cls-r1 {
    grid-template-columns: repeat(3, 1fr);
}

.bh-cls-r2 {
    grid-template-columns: repeat(2, 1fr);
}

/* Card base */
.bh-cls-card {
    background: #fff;
    border-radius: 22px;
    text-align: center;
    padding-top: 18px;
    border: 1.5px solid transparent;
    box-shadow: 0 6px 28px rgba(0, 0, 0, .07);
    position: relative;
    overflow: hidden;
    transition: transform .32s ease, box-shadow .32s ease;
    opacity: 0;
}

.bh-cls.bh-in .bh-cls-card {
    animation: bh-cls-up .55s ease forwards;
}

.bh-cls-r1 .bh-cls-card:nth-child(1) {
    animation-delay: .12s;
}

.bh-cls-r1 .bh-cls-card:nth-child(2) {
    animation-delay: .22s;
}

.bh-cls-r1 .bh-cls-card:nth-child(3) {
    animation-delay: .32s;
}

.bh-cls-r2 .bh-cls-card:nth-child(1) {
    animation-delay: .42s;
}

.bh-cls-r2 .bh-cls-card:nth-child(2) {
    animation-delay: .52s;
}

.bh-cls-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 52px rgba(0, 0, 0, .13);
}

/* Colour wash */
.bh-cls-wash {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 130px;
    border-radius: 22px 22px 0 0;
    opacity: .09;
    pointer-events: none;
}

/* Bunny image */
.bh-cls-img-wrap {
    width: 160px;
    height: 160px;
    margin: 0 auto 6px;
    position: relative;
    z-index: 2;
}

.bh-cls-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    display: block;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .18));
    transition: transform .4s ease;
}

.bh-cls-card:hover .bh-cls-img {
    transform: translateY(-8px) scale(1.05);
}

.bh-cls-img-ph {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-family: 'Fredoka', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, .6);
}

/* Badge */
.bh-cls-badge {
    display: inline-block;
    font-family: 'Fredoka', sans-serif;
    font-size: 18px;
    font-weight: 700;
    padding: 7px 24px;
    border-radius: 50px;
    border: 2.5px dashed rgba(255, 255, 255, .55);
    position: relative;
    z-index: 2;
    margin-bottom: 2px;
}

/* Body */
.bh-cls-body {
    padding: 12px 20px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
}

.bh-cls-desc {
    font-family: 'Nunito', sans-serif;
    font-size: 13.5px;
    color: #6B7280;
    line-height: 1.65;
    margin: 0;
    max-width: 260px;
}

.bh-cls-age {
    display: inline-block;
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    font-weight: 800;
    padding: 5px 16px;
    border-radius: 50px;
    border: 1.5px solid;
}

.bh-cls-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    justify-content: center;
    padding: 12px 0;
    border-radius: 14px;
    font-family: 'Fredoka', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all .28s ease;
}

.bh-cls-btn svg {
    width: 16px;
    height: 16px;
    fill: #fff;
    transition: transform .25s;
}

.bh-cls-btn:hover {
    opacity: .88;
    transform: translateY(-2px);
}

.bh-cls-btn:hover svg {
    transform: translateX(4px);
}

/* ── Colour themes ── */
.bh-c1:hover {
    border-color: rgba(124, 58, 237, .25);
}

.bh-c1 .bh-cls-wash {
    background: #7C3AED;
}

.bh-c1 .bh-cls-img-ph {
    background: radial-gradient(circle at 40% 40%, #D8C8FF, #B8A0FF);
}

.bh-bd-1 {
    background: #7C3AED;
    color: #fff;
}

.bh-ag-1 {
    background: #EDE9FE;
    color: #6D28D9;
    border-color: #C4B5FD;
}

.bh-bt-1 {
    background: #7C3AED;
    color: #fff;
    box-shadow: 0 6px 18px rgba(124, 58, 237, .30);
}

.bh-bt-1:hover {
    background: #6D28D9;
    color: #fff;
}

.bh-c2:hover {
    border-color: rgba(37, 99, 235, .25);
}

.bh-c2 .bh-cls-wash {
    background: #2563EB;
}

.bh-c2 .bh-cls-img-ph {
    background: radial-gradient(circle at 40% 40%, #B8DEFF, #8EC8FF);
}

.bh-bd-2 {
    background: #2563EB;
    color: #fff;
}

.bh-ag-2 {
    background: #DBEAFE;
    color: #1D4ED8;
    border-color: #93C5FD;
}

.bh-bt-2 {
    background: #2563EB;
    color: #fff;
    box-shadow: 0 6px 18px rgba(37, 99, 235, .28);
}

.bh-bt-2:hover {
    background: #1D4ED8;
    color: #fff;
}

.bh-c3:hover {
    border-color: rgba(219, 39, 119, .25);
}

.bh-c3 .bh-cls-wash {
    background: #DB2777;
}

.bh-c3 .bh-cls-img-ph {
    background: radial-gradient(circle at 40% 40%, #FFB8C8, #FF8FAB);
}

.bh-bd-3 {
    background: #DB2777;
    color: #fff;
}

.bh-ag-3 {
    background: #FCE7F3;
    color: #BE185D;
    border-color: #F9A8D4;
}

.bh-bt-3 {
    background: #DB2777;
    color: #fff;
    box-shadow: 0 6px 18px rgba(219, 39, 119, .28);
}

.bh-bt-3:hover {
    background: #BE185D;
    color: #fff;
}

.bh-c4:hover {
    border-color: rgba(22, 163, 74, .25);
}

.bh-c4 .bh-cls-wash {
    background: #16A34A;
}

.bh-c4 .bh-cls-img-ph {
    background: radial-gradient(circle at 40% 40%, #C8F0C0, #90DC88);
}

.bh-bd-4 {
    background: #16A34A;
    color: #fff;
}

.bh-ag-4 {
    background: #DCFCE7;
    color: #15803D;
    border-color: #86EFAC;
}

.bh-bt-4 {
    background: #16A34A;
    color: #fff;
    box-shadow: 0 6px 18px rgba(22, 163, 74, .28);
}

.bh-bt-4:hover {
    background: #15803D;
    color: #fff;
}

.bh-c5:hover {
    border-color: rgba(217, 119, 6, .25);
}

.bh-c5 .bh-cls-wash {
    background: #D97706;
}

.bh-c5 .bh-cls-img-ph {
    background: radial-gradient(circle at 40% 40%, #FFE890, #FFD040);
}

.bh-bd-5 {
    background: #D97706;
    color: #fff;
}

.bh-ag-5 {
    background: #FEF3C7;
    color: #B45309;
    border-color: #FCD34D;
}

.bh-bt-5 {
    background: #D97706;
    color: #fff;
    box-shadow: 0 6px 18px rgba(217, 119, 6, .28);
}

.bh-bt-5:hover {
    background: #B45309;
    color: #fff;
}

/* ── Day Care strip ── */
.bh-daycare-strip {
    background: linear-gradient(135deg, #0E3A78 0%, #1A5CB0 100%);
    border-radius: 22px;
    padding: 32px 36px;
    display: grid;
    grid-template-columns: 160px 1fr auto;
    gap: 28px;
    align-items: center;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(14, 58, 120, .28);
    opacity: 0;
}

.bh-cls.bh-in .bh-daycare-strip {
    animation: bh-dc-in .6s ease .62s forwards;
}

.bh-daycare-strip::before {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    right: -60px;
    top: 50%;
    transform: translateY(-50%);
}

.bh-dc-img-wrap {
    width: 160px;
    height: 160px;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.bh-dc-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    display: block;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .25));
    transition: transform .4s ease;
}

.bh-daycare-strip:hover .bh-dc-img {
    transform: translateY(-6px) scale(1.04);
}

.bh-dc-img-ph {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, #A0EEE8, #60D8D0);
    display: none;
    align-items: center;
    justify-content: center;
    font-family: 'Fredoka', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: rgba(255, 255, 255, .6);
}

.bh-dc-info {
    position: relative;
    z-index: 2;
}

.bh-dc-lbl {
    font-family: 'Nunito', sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: rgba(255, 255, 255, .6);
    text-transform: uppercase;
    letter-spacing: .7px;
    margin-bottom: 6px;
}

.bh-dc-title {
    font-family: 'Fredoka', sans-serif;
    font-size: clamp(20px, 2.5vw, 30px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
    line-height: 1.15;
}

.bh-dc-desc {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, .75);
    line-height: 1.70;
    margin-bottom: 14px;
    max-width: 480px;
}

.bh-dc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bh-dc-chips span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 13px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, .2);
}

.bh-dc-chips span svg {
    width: 13px;
    height: 13px;
    fill: rgba(255, 255, 255, .8);
}

.bh-dc-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.bh-dc-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FF8C00;
    color: #fff;
    padding: 13px 26px;
    border-radius: 50px;
    font-family: 'Fredoka', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(255, 140, 0, .38);
    transition: all .3s ease;
}

.bh-dc-cta svg {
    width: 16px;
    height: 16px;
    fill: #fff;
    transition: transform .25s;
}

.bh-dc-cta:hover {
    background: #D97000;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(255, 140, 0, .48);
}

.bh-dc-cta:hover svg {
    transform: translateX(4px);
}

.bh-dc-learn {
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, .6);
    text-decoration: none;
    transition: color .2s;
}

.bh-dc-learn:hover {
    color: #fff;
}

/* Bottom CTA */
.bh-cls-cta {
    text-align: center;
    opacity: 0;
}

.bh-cls.bh-in .bh-cls-cta {
    animation: bh-cls-up .5s ease .78s forwards;
}

.bh-cls-cta p {
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    color: #9CA3AF;
    margin-bottom: 14px;
}

.bh-cls-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #1A5CB0;
    padding: 12px 28px;
    border-radius: 50px;
    border: 2px solid #1A5CB0;
    font-family: 'Fredoka', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease;
}

.bh-cls-all svg {
    width: 17px;
    height: 17px;
    fill: #1A5CB0;
    transition: all .3s;
}

.bh-cls-all:hover {
    background: #1A5CB0;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(26, 92, 176, .25);
}

.bh-cls-all:hover svg {
    fill: #fff;
    transform: translateX(3px);
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .bh-cls-r1 {
        grid-template-columns: repeat(2, 1fr);
    }

    .bh-cls-r1 .bh-cls-card:nth-child(3) {
        grid-column: span 2;
    }

    .bh-daycare-strip {
        grid-template-columns: 130px 1fr;
        grid-template-rows: auto auto;
        padding: 28px;
        gap: 20px;
    }

    .bh-dc-img-wrap {
        width: 130px;
        height: 130px;
    }

    .bh-dc-actions {
        grid-column: span 2;
        flex-direction: row;
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .bh-cls {
        padding: 64px 0;
    }

    .bh-cls-title {
        font-size: 26px;
    }

    .bh-cls-row {
        gap: 14px;
        margin-bottom: 14px;
    }

    .bh-cls-r1 {
        grid-template-columns: repeat(2, 1fr);
    }

    .bh-cls-r1 .bh-cls-card:nth-child(3) {
        grid-column: span 2;
    }

    .bh-cls-r2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .bh-cls-img-wrap {
        width: 120px;
        height: 120px;
    }

    .bh-cls-badge {
        font-size: 15px;
        padding: 6px 18px;
    }

    .bh-cls-body {
        padding: 10px 14px 18px;
        gap: 9px;
    }

    .bh-cls-desc {
        font-size: 12.5px;
    }

    .bh-cls-btn {
        font-size: 14px;
        padding: 10px 0;
    }

    .bh-daycare-strip {
        grid-template-columns: 1fr;
        padding: 24px 20px;
        gap: 16px;
    }

    .bh-dc-img-wrap {
        width: 110px;
        height: 110px;
        margin: 0 auto;
    }

    .bh-dc-title {
        font-size: 20px;
    }

    .bh-dc-actions {
        grid-column: 1;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .bh-dc-cta {
        justify-content: center;
    }

    .bh-dc-learn {
        text-align: center;
    }
}

@media (max-width: 400px) {
    .bh-cls-r1 {
        grid-template-columns: 1fr;
    }

    .bh-cls-r1 .bh-cls-card:nth-child(3) {
        grid-column: span 1;
    }

    .bh-cls-r2 {
        grid-template-columns: 1fr;
    }

    .bh-cls-img-wrap {
        width: 100px;
        height: 100px;
    }
}

/* ============================================================
   BUNNYHOP — Classes Section  (Option 4 · Magazine 3+2)
   File: public/css/classes-section.css
   ============================================================ */

/* ============================================================
   BUNNYHOP — Facilities Section  (Option 2 · Horizontal Cards)
   File: public/css/facilities-section.css
   ============================================================ */

/* ── Keyframes ─────────────────────────────────────────── */
@keyframes bh-fac-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bh-fac-left {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bh-fac-right {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ── Section ───────────────────────────────────────────── */
.bh-fac {
    background: #fff;
    padding: 40px 0;
}

/* ── Heading ───────────────────────────────────────────── */
.bh-fac-head {
    text-align: center;
    margin-bottom: 52px;
    opacity: 0;
}

.bh-fac.bh-in .bh-fac-head {
    animation: bh-fac-up .6s ease .05s forwards;
}

.bh-fac-lbl {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #FFF4E5;
    border: 1.5px solid rgba(255, 140, 0, .25);
    border-radius: 50px;
    padding: 5px 18px;
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: #FF8C00;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 14px;
}

.bh-fac-lbl svg {
    width: 13px;
    height: 13px;
    fill: #FF8C00;
}

.bh-fac-title {
    font-family: 'Fredoka', sans-serif;
    font-size: clamp(28px, 3.8vw, 46px);
    font-weight: 700;
    color: #1C1C2E;
    line-height: 1.15;
    margin-bottom: 14px;
}

.bh-fac-title span {
    color: #FF8C00;
}

.bh-fac-sub {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    color: #6B7280;
    line-height: 1.75;
    max-width: 560px;
    margin: 0 auto;
}

/* ── Cards grid ────────────────────────────────────────── */
.bh-fac-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* ── Individual card ───────────────────────────────────── */
.bh-fac-card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 20px;
    background: #F9FAFB;
    border-radius: 18px;
    border: 1.5px solid transparent;
    transition: all .3s ease;
    /* hidden until scroll trigger */
    opacity: 0;
}

/* Stagger: left column slides from left, right column from right */
.bh-fac.bh-in .bh-fac-card:nth-child(odd) {
    animation: bh-fac-left .55s ease forwards;
}

.bh-fac.bh-in .bh-fac-card:nth-child(even) {
    animation: bh-fac-right .55s ease forwards;
}

/* Row stagger delays */
.bh-fac-card:nth-child(1) {
    animation-delay: .12s;
}

.bh-fac-card:nth-child(2) {
    animation-delay: .12s;
}

.bh-fac-card:nth-child(3) {
    animation-delay: .24s;
}

.bh-fac-card:nth-child(4) {
    animation-delay: .24s;
}

.bh-fac-card:nth-child(5) {
    animation-delay: .36s;
}

.bh-fac-card:nth-child(6) {
    animation-delay: .36s;
}

.bh-fac-card:nth-child(7) {
    animation-delay: .48s;
}

.bh-fac-card:nth-child(8) {
    animation-delay: .48s;
}

/* Hover — slide right + white bg + coloured border */
.bh-fac-card:hover {
    background: #fff;
    transform: translateX(6px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .09);
}

/* Match hover border to icon colour */
.bh-fac-card:hover:has(.bh-fi-blue) {
    border-color: rgba(26, 92, 176, .22);
}

.bh-fac-card:hover:has(.bh-fi-orange) {
    border-color: rgba(255, 140, 0, .22);
}

.bh-fac-card:hover:has(.bh-fi-green) {
    border-color: rgba(61, 184, 122, .22);
}

.bh-fac-card:hover:has(.bh-fi-purple) {
    border-color: rgba(124, 58, 237, .22);
}

.bh-fac-card:hover:has(.bh-fi-red) {
    border-color: rgba(239, 68, 68, .22);
}

.bh-fac-card:hover:has(.bh-fi-teal) {
    border-color: rgba(8, 145, 178, .22);
}

.bh-fac-card:hover:has(.bh-fi-amber) {
    border-color: rgba(217, 119, 6, .22);
}

.bh-fac-card:hover:has(.bh-fi-pink) {
    border-color: rgba(219, 39, 119, .22);
}

/* ── Icon box ──────────────────────────────────────────── */
.bh-fac-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .3s ease;
}

.bh-fac-card:hover .bh-fac-icon {
    transform: scale(1.1) rotate(-5deg);
}

.bh-fac-icon svg {
    width: 26px;
    height: 26px;
}

/* Colour themes */
.bh-fi-blue {
    background: #EBF3FF;
}

.bh-fi-blue svg {
    fill: #1A5CB0;
}

.bh-fi-orange {
    background: #FFF4E5;
}

.bh-fi-orange svg {
    fill: #FF8C00;
}

.bh-fi-green {
    background: #EDFBF3;
}

.bh-fi-green svg {
    fill: #3DB87A;
}

.bh-fi-purple {
    background: #F5F3FF;
}

.bh-fi-purple svg {
    fill: #7C3AED;
}

.bh-fi-red {
    background: #FEF2F2;
}

.bh-fi-red svg {
    fill: #EF4444;
}

.bh-fi-teal {
    background: #ECFEFF;
}

.bh-fi-teal svg {
    fill: #0891B2;
}

.bh-fi-amber {
    background: #FFFBEB;
}

.bh-fi-amber svg {
    fill: #D97706;
}

.bh-fi-pink {
    background: #FDF2F8;
}

.bh-fi-pink svg {
    fill: #DB2777;
}

/* ── Card text ─────────────────────────────────────────── */
.bh-fac-text {
    flex: 1;
}

.bh-fac-name {
    font-family: 'Fredoka', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #1C1C2E;
    margin-bottom: 7px;
    line-height: 1.2;
}

.bh-fac-desc {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: #6B7280;
    line-height: 1.70;
    margin: 0;
}

/* ── Responsive ────────────────────────────────────────── */

/* Tablet — still 2 columns */
@media (max-width: 991px) {
    .bh-fac-grid {
        gap: 14px;
    }

    .bh-fac-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .bh-fac-icon svg {
        width: 22px;
        height: 22px;
    }

    .bh-fac-card {
        padding: 18px 16px;
        gap: 14px;
    }

    .bh-fac-name {
        font-size: 17px;
    }

    .bh-fac-desc {
        font-size: 13px;
    }
}

/* Mobile — single column */
@media (max-width: 600px) {
    .bh-fac {
        padding: 64px 0;
    }

    .bh-fac-head {
        margin-bottom: 36px;
    }

    .bh-fac-title {
        font-size: 26px;
    }

    .bh-fac-sub {
        font-size: 14px;
    }

    .bh-fac-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .bh-fac-card {
        padding: 16px 14px;
        gap: 13px;
    }

    /* Remove translateX hover on mobile — use translateY instead */
    .bh-fac-card:hover {
        transform: translateY(-3px);
    }

    .bh-fac-icon {
        width: 46px;
        height: 46px;
        border-radius: 13px;
    }

    .bh-fac-icon svg {
        width: 21px;
        height: 21px;
    }

    .bh-fac-name {
        font-size: 16px;
    }

    .bh-fac-desc {
        font-size: 13px;
    }
}

/* Extra small */
@media (max-width: 400px) {
    .bh-fac-card {
        padding: 14px 12px;
        gap: 11px;
    }

    .bh-fac-icon {
        width: 42px;
        height: 42px;
    }
}

/* ============================================================
   BUNNYHOP — Facilities Section  (Option 2 · Horizontal Cards)
   File: public/css/facilities-section.css
   ============================================================ */

/* ============================================================
   BUNNYHOP — Gallery Preview  (Option 2 · Main + Thumbs)
   File: public/css/gallery-preview.css
   ============================================================ */

/* ── Keyframes ─────────────────────────────────────────── */
@keyframes bh-gal-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bh-gal-fade {
    from {
        opacity: 0;
        transform: scale(1.02);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ── Section ───────────────────────────────────────────── */
.bh-gal {
    background: #F9FAFB;
    padding: 96px 0;
}

/* ── Heading ───────────────────────────────────────────── */
.bh-gal-head {
    text-align: center;
    margin-bottom: 48px;
    opacity: 0;
}

.bh-gal.bh-in .bh-gal-head {
    animation: bh-gal-up .6s ease .05s forwards;
}

.bh-gal-lbl {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #EBF3FF;
    border: 1.5px solid rgba(26, 92, 176, .2);
    border-radius: 50px;
    padding: 5px 18px;
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: #1A5CB0;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 14px;
}

.bh-gal-lbl svg {
    width: 13px;
    height: 13px;
    fill: #1A5CB0;
}

.bh-gal-title {
    font-family: 'Fredoka', sans-serif;
    font-size: clamp(28px, 3.8vw, 46px);
    font-weight: 700;
    color: #1C1C2E;
    line-height: 1.15;
    margin-bottom: 14px;
}

.bh-gal-title span {
    color: #FF8C00;
}

.bh-gal-sub {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    color: #6B7280;
    line-height: 1.75;
    max-width: 480px;
    margin: 0 auto;
}

/* ── Viewer layout ─────────────────────────────────────── */
.bh-gal-viewer {
    display: grid;
    grid-template-columns: 1fr 130px;
    gap: 14px;
    margin-bottom: 20px;
    opacity: 0;
}

.bh-gal.bh-in .bh-gal-viewer {
    animation: bh-gal-up .65s ease .2s forwards;
}

/* ── Main image panel ──────────────────────────────────── */
.bh-gal-main {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #1C1C2E;
    aspect-ratio: 16/9;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .16);
}

/* ── Slides ────────────────────────────────────────────── */
.bh-gal-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
}

.bh-gal-slide.active {
    opacity: 1;
    pointer-events: auto;
    animation: bh-gal-fade .5s ease;
}

.bh-gal-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Placeholder colours */
.bh-gal-ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bh-gal-ph svg {
    width: 48px;
    height: 48px;
    fill: rgba(255, 255, 255, .35);
}

.bh-gph-1 {
    background: linear-gradient(135deg, #3B82F6, #1D4ED8);
}

.bh-gph-2 {
    background: linear-gradient(135deg, #10B981, #065F46);
}

.bh-gph-3 {
    background: linear-gradient(135deg, #F97316, #C2410C);
}

.bh-gph-4 {
    background: linear-gradient(135deg, #8B5CF6, #5B21B6);
}

.bh-gph-5 {
    background: linear-gradient(135deg, #EF4444, #991B1B);
}

.bh-gph-6 {
    background: linear-gradient(135deg, #0891B2, #0E7490);
}

.bh-gph-7 {
    background: linear-gradient(135deg, #D97706, #B45309);
}

.bh-gph-8 {
    background: linear-gradient(135deg, #DB2777, #9D174D);
}

/* Caption overlay */
.bh-gal-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, .65));
    padding: 40px 20px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bh-gal-cat {
    font-family: 'Nunito', sans-serif;
    font-size: 11px;
    font-weight: 800;
    background: #FF8C00;
    color: #fff;
    padding: 3px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .4px;
    flex-shrink: 0;
}

.bh-gal-cap-title {
    font-family: 'Fredoka', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
}

/* ── Arrow buttons ─────────────────────────────────────── */
.bh-gal-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .25s ease;
    z-index: 5;
}

.bh-gal-arrow svg {
    width: 22px;
    height: 22px;
}

.bh-gal-prev {
    left: 14px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
}

.bh-gal-prev svg {
    fill: #1A5CB0;
}

.bh-gal-prev:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.08);
}

.bh-gal-next {
    right: 14px;
    background: #1A5CB0;
    box-shadow: 0 4px 14px rgba(26, 92, 176, .40);
}

.bh-gal-next svg {
    fill: #fff;
}

.bh-gal-next:hover {
    background: #0E3A78;
    transform: translateY(-50%) scale(1.08);
}

/* ── Counter badge ─────────────────────────────────────── */
.bh-gal-counter {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(6px);
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .2);
    z-index: 5;
}

/* ── Thumbnails panel ──────────────────────────────────── */
.bh-gal-thumbs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bh-gal-thumb {
    width: 100%;
    flex: 1;
    border-radius: 12px;
    overflow: hidden;
    border: 2.5px solid transparent;
    cursor: pointer;
    padding: 0;
    background: none;
    transition: all .25s ease;
    position: relative;
    min-height: 0;
}

.bh-gal-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .3s ease;
}

.bh-gal-thumb:hover img {
    transform: scale(1.06);
}

/* Active thumb */
.bh-gal-thumb.active {
    border-color: #1A5CB0;
    box-shadow: 0 4px 16px rgba(26, 92, 176, .30);
}

.bh-gal-thumb.active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(26, 92, 176, .12);
    border-radius: 10px;
    pointer-events: none;
}

/* Thumbnail placeholder */
.bh-gal-tph {
    width: 100%;
    height: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bh-gal-tph svg {
    width: 18px;
    height: 18px;
    fill: rgba(255, 255, 255, .5);
}

/* Non-active thumb: slight dim */
.bh-gal-thumb:not(.active) {
    opacity: .72;
}

.bh-gal-thumb:not(.active):hover {
    opacity: 1;
}

/* ── Footer row ────────────────────────────────────────── */
.bh-gal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
}

.bh-gal.bh-in .bh-gal-foot {
    animation: bh-gal-up .5s ease .4s forwards;
}

/* Dots */
.bh-gal-dots {
    display: flex;
    gap: 7px;
    align-items: center;
}

.bh-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    padding: 0;
    background: rgba(26, 92, 176, .22);
    transition: all .3s ease;
}

.bh-dot.active {
    background: #1A5CB0;
    width: 22px;
    border-radius: 4px;
}

/* View all CTA */
.bh-gal-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    color: #1A5CB0;
    padding: 11px 24px;
    border-radius: 50px;
    border: 2px solid #1A5CB0;
    font-family: 'Fredoka', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease;
}

.bh-gal-cta svg {
    width: 16px;
    height: 16px;
    fill: #1A5CB0;
    transition: all .3s;
}

.bh-gal-cta:hover {
    background: #1A5CB0;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(26, 92, 176, .25);
}

.bh-gal-cta:hover svg {
    fill: #fff;
    transform: scale(1.1);
}

/* ── Responsive ────────────────────────────────────────── */

/* Tablet — smaller thumbs */
@media (max-width: 991px) {
    .bh-gal-viewer {
        grid-template-columns: 1fr 100px;
        gap: 10px;
    }

    .bh-gal-thumb {
        border-radius: 10px;
    }

    .bh-gal-tph {
        min-height: 40px;
    }

    .bh-gal-arrow {
        width: 38px;
        height: 38px;
    }

    .bh-gal-arrow svg {
        width: 19px;
        height: 19px;
    }
}

/* Mobile — thumbs move BELOW main image, horizontal row */
@media (max-width: 600px) {
    .bh-gal {
        padding: 64px 0;
    }

    .bh-gal-head {
        margin-bottom: 32px;
    }

    .bh-gal-title {
        font-size: 26px;
    }

    .bh-gal-sub {
        font-size: 14px;
    }

    /* Stack: main on top, thumbs row below */
    .bh-gal-viewer {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: 10px;
    }

    /* Thumbs become horizontal scroll row */
    .bh-gal-thumbs {
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .bh-gal-thumbs::-webkit-scrollbar {
        height: 3px;
    }

    .bh-gal-thumbs::-webkit-scrollbar-track {
        background: #F3F4F6;
        border-radius: 4px;
    }

    .bh-gal-thumbs::-webkit-scrollbar-thumb {
        background: #1A5CB0;
        border-radius: 4px;
    }

    .bh-gal-thumb {
        flex: 0 0 72px;
        width: 72px;
        height: 56px;
        scroll-snap-align: start;
        border-radius: 9px;
    }

    .bh-gal-tph {
        min-height: 56px;
    }

    .bh-gal-main {
        aspect-ratio: 4/3;
        border-radius: 16px;
    }

    .bh-gal-arrow {
        width: 36px;
        height: 36px;
    }

    .bh-gal-prev {
        left: 10px;
    }

    .bh-gal-next {
        right: 10px;
    }

    .bh-gal-arrow svg {
        width: 18px;
        height: 18px;
    }

    .bh-gal-cap-title {
        font-size: 14px;
    }

    .bh-gal-foot {
        flex-direction: column;
        gap: 14px;
        align-items: center;
    }
}

/* ============================================================
   BUNNYHOP — Gallery Preview  (Option 2 · Main + Thumbs)
   File: public/css/gallery-preview.css
   ============================================================ */



/* ── Gallery grid cards ──────────────────────────────── */
.bh-gallery-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    cursor: pointer;
    background: #e5e7eb;
    aspect-ratio: 4 / 3;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}

.bh-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}

.bh-gallery-thumb:hover img {
    transform: scale(1.07);
}

.bh-gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(26, 92, 176, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s ease;
}

.bh-gallery-thumb:hover .bh-gallery-overlay {
    opacity: 1;
}

.bh-gallery-overlay svg {
    width: 36px;
    height: 36px;
    fill: #fff;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3));
}

/* ── Lightbox ─────────────────────────────────────────── */
.bh-lb {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    /* hidden by default */
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

.bh-lb.open {
    opacity: 1;
    pointer-events: auto;
}

/* Backdrop */
.bh-lb-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 16, 30, .92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Wrapper */
.bh-lb-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 60px 80px 90px;
    gap: 14px;
}

/* Close button */
.bh-lb-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    border: 1.5px solid rgba(255, 255, 255, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease;
    z-index: 10;
}

.bh-lb-close svg {
    width: 22px;
    height: 22px;
    fill: #fff;
}

.bh-lb-close:hover {
    background: rgba(255, 255, 255, .25);
    transform: scale(1.08);
}

/* Counter */
.bh-lb-counter {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
}

/* Arrows */
.bh-lb-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .25s ease;
    z-index: 10;
}

.bh-lb-arrow svg {
    width: 26px;
    height: 26px;
    fill: #fff;
}

.bh-lb-prev {
    left: 16px;
    background: rgba(255, 255, 255, .1);
}

.bh-lb-next {
    right: 16px;
    background: #1A5CB0;
    border-color: #1A5CB0;
}

.bh-lb-arrow:hover {
    transform: translateY(-50%) scale(1.1);
}

.bh-lb-prev:hover {
    background: rgba(255, 255, 255, .22);
}

.bh-lb-next:hover {
    background: #0E3A78;
}

.bh-lb-arrow:disabled {
    opacity: .3;
    pointer-events: none;
}

/* Image stage */
.bh-lb-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    max-height: calc(100vh - 200px);
    overflow: hidden;
}

.bh-lb-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
    transition: opacity .3s ease, transform .3s ease;
    display: block;
}

.bh-lb-img.loading {
    opacity: 0;
    transform: scale(.97);
}

.bh-lb-img.slide-left {
    animation: bh-lb-slide-left .3s ease forwards;
}

.bh-lb-img.slide-right {
    animation: bh-lb-slide-right .3s ease forwards;
}

@keyframes bh-lb-slide-left {
    from {
        opacity: 0;
        transform: translateX(40px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes bh-lb-slide-right {
    from {
        opacity: 0;
        transform: translateX(-40px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Spinner */
.bh-lb-spinner {
    position: absolute;
    display: none;
    align-items: center;
    justify-content: center;
}

.bh-lb-spinner.show {
    display: flex;
}

.bh-lb-spin-ring {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, .15);
    border-top-color: #1A5CB0;
    border-radius: 50%;
    animation: bh-lb-spin 0.8s linear infinite;
}

@keyframes bh-lb-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Caption */
.bh-lb-caption {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, .75);
    text-align: center;
    min-height: 20px;
}

/* Thumbnail strip */
.bh-lb-thumbstrip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 6px;
    max-width: 100%;
}

.bh-lb-thumbstrip::-webkit-scrollbar {
    height: 3px;
}

.bh-lb-thumbstrip::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .08);
    border-radius: 4px;
}

.bh-lb-thumbstrip::-webkit-scrollbar-thumb {
    background: #1A5CB0;
    border-radius: 4px;
}

.bh-lb-tstumb {
    width: 56px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    opacity: .5;
    border: 2px solid transparent;
    scroll-snap-align: start;
    transition: all .2s ease;
}

.bh-lb-tstumb:hover {
    opacity: .85;
}

.bh-lb-tstumb.active {
    opacity: 1;
    border-color: #1A5CB0;
    box-shadow: 0 0 0 2px rgba(26, 92, 176, .4);
}

/* ── Mobile responsive ────────────────────────────── */
@media (max-width: 600px) {
    .bh-lb-wrap {
        padding: 56px 8px 80px;
        gap: 10px;
    }

    .bh-lb-arrow {
        width: 42px;
        height: 42px;
    }

    .bh-lb-arrow svg {
        width: 20px;
        height: 20px;
    }

    .bh-lb-prev {
        left: 6px;
    }

    .bh-lb-next {
        right: 6px;
    }

    .bh-lb-stage {
        max-height: calc(100vh - 180px);
    }

    .bh-lb-img {
        border-radius: 8px;
    }

    .bh-lb-tstumb {
        width: 46px;
        height: 34px;
        border-radius: 6px;
    }

    .bh-lb-caption {
        font-size: 12px;
    }

    .bh-lb-counter {
        font-size: 12px;
        padding: 4px 11px;
    }
}


.bh-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
}

.bh-gallery-thumb {
    aspect-ratio: 4 / 3;
    background: #f5f5f5;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}

.bh-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* FIXED */
    display: block;
}

/* Lightbox */
.bh-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.bh-lightbox.active {
    display: flex;
}

.bh-lightbox img {
    max-width: 90%;
    max-height: 80%;
}

.bh-lb-close {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
}

.bh-lb-thumb {
    position: absolute;
    bottom: 20px;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    max-width: 90%;
}

.bh-lb-thumb img {
    height: 60px;
    border-radius: 6px;
    cursor: pointer;
}

/* ============================================================
   BUNNYHOP — Gallery Preview  (Option 2 · Main + Thumbs)
   File: public/css/gallery-preview.css
   ============================================================ */


/* ============================================================
   BUNNYHOP — Events / Camps Section
   File: public/css/events-section.css
   ============================================================ */

@keyframes bh-ev-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Section ───────────────────────────────────────────── */
.bh-ev {
    background: #F9FAFB;
    padding: 40px 0;
}

/* ── Heading ───────────────────────────────────────────── */
.bh-ev-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 40px;
    opacity: 0;
}

.bh-ev.bh-in .bh-ev-head {
    animation: bh-ev-up .6s ease .05s forwards;
}

.bh-ev-lbl {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #FFF4E5;
    border: 1.5px solid rgba(255, 140, 0, .22);
    border-radius: 50px;
    padding: 5px 16px;
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: #FF8C00;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 12px;
}

.bh-ev-lbl svg {
    width: 13px;
    height: 13px;
    fill: #FF8C00;
}

.bh-ev-title {
    font-family: 'Fredoka', sans-serif;
    font-size: clamp(26px, 3.5vw, 42px);
    font-weight: 700;
    color: #1C1C2E;
    line-height: 1.15;
    margin-bottom: 8px;
}

.bh-ev-title span {
    color: #FF8C00;
}

.bh-ev-sub {
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    color: #6B7280;
    line-height: 1.6;
    max-width: 440px;
}

.bh-ev-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background: transparent;
    color: #1A5CB0;
    padding: 10px 22px;
    border-radius: 50px;
    border: 2px solid #1A5CB0;
    font-family: 'Fredoka', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s;
    white-space: nowrap;
}

.bh-ev-all svg {
    width: 16px;
    height: 16px;
    fill: #1A5CB0;
    transition: transform .25s;
}

.bh-ev-all:hover {
    background: #1A5CB0;
    color: #fff;
    box-shadow: 0 8px 24px rgba(26, 92, 176, .25);
    transform: translateY(-2px);
}

.bh-ev-all:hover svg {
    fill: #fff;
    transform: translateX(4px);
}

/* ── Slider wrapper ────────────────────────────────────── */
.bh-ev-slider-wrap {
    position: relative;
    opacity: 0;
}

.bh-ev.bh-in .bh-ev-slider-wrap {
    animation: bh-ev-up .6s ease .2s forwards;
}

/* ── Track ─────────────────────────────────────────────── */
.bh-ev-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

/* ── Card ──────────────────────────────────────────────── */
.bh-ev-card {
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    border: 1.5px solid #F3F4F6;
    box-shadow: 0 6px 28px rgba(0, 0, 0, .07);
    transition: transform .32s ease, box-shadow .32s ease;
    display: flex;
    flex-direction: column;
}

.bh-ev-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 52px rgba(0, 0, 0, .12);
    border-color: var(--ev-color);
}

/* ── Image area ────────────────────────────────────────── */
.bh-ev-img-wrap {
    position: relative;
    height: 180px;
    overflow: hidden;
    flex-shrink: 0;
}

.bh-ev-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .45s ease;
}

.bh-ev-card:hover .bh-ev-img {
    transform: scale(1.06);
}

/* Placeholder wash */
.bh-ev-img-ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .9;
}

.bh-ev-img-ph svg {
    width: 64px;
    height: 64px;
    fill: rgba(255, 255, 255, .55);
}

/* Date badge — top right corner */
.bh-ev-date-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #fff;
    border-radius: 12px;
    padding: 6px 11px;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
    line-height: 1;
    min-width: 44px;
}

.bh-ev-date-day {
    display: block;
    font-family: 'Fredoka', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--ev-color);
    line-height: 1;
}

.bh-ev-date-mon {
    display: block;
    font-family: 'Nunito', sans-serif;
    font-size: 10px;
    font-weight: 800;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-top: 2px;
}

/* Status ribbon */
.bh-ev-ribbon {
    position: absolute;
    top: 14px;
    left: 0;
    font-family: 'Nunito', sans-serif;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 5px 14px 5px 12px;
    border-radius: 0 20px 20px 0;
    color: #fff;
}

.bh-ev-ribbon-live {
    background: #EF4444;
}

.bh-ev-ribbon-open {
    background: #22C55E;
}

/* ── Card body ─────────────────────────────────────────── */
.bh-ev-body {
    padding: 20px 20px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
}

/* Category pill */
.bh-ev-cat {
    display: inline-flex;
    align-items: center;
    font-family: 'Nunito', sans-serif;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: .4px;
    width: fit-content;
}

/* Title */
.bh-ev-name {
    font-family: 'Fredoka', sans-serif;
    font-size: 21px;
    font-weight: 700;
    color: #1C1C2E;
    line-height: 1.2;
    margin: 0;
}

/* Description */
.bh-ev-desc {
    font-family: 'Nunito', sans-serif;
    font-size: 13.5px;
    color: #6B7280;
    line-height: 1.65;
    margin: 0;
    flex: 1;
}

/* Meta items */
.bh-ev-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bh-ev-meta-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #4B5563;
}

.bh-ev-meta-item svg {
    width: 15px;
    height: 15px;
    fill: #9CA3AF;
    flex-shrink: 0;
}

.bh-ev-price {
    font-weight: 800;
}

/* Urgency badge */
.bh-ev-urgency {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #FEF2F2;
    color: #EF4444;
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1.5px solid rgba(239, 68, 68, .2);
    width: fit-content;
}

.bh-ev-urgency svg {
    width: 14px;
    height: 14px;
    fill: #EF4444;
}

/* CTA button */
.bh-ev-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
    padding: 13px 0;
    border-radius: 14px;
    font-family: 'Fredoka', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all .28s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
    margin-top: auto;
}

.bh-ev-btn svg {
    width: 17px;
    height: 17px;
    fill: #fff;
    transition: transform .25s;
}

.bh-ev-btn:hover {
    opacity: .88;
    transform: translateY(-2px);
    color: #fff;
}

.bh-ev-btn:hover svg {
    transform: translateX(4px);
}

/* ── Prev / Next arrows ────────────────────────────────── */
.bh-ev-arrow {
    display: none;
    /* shown only when more than 3 events */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all .25s ease;
    z-index: 5;
}

.bh-ev-arrow svg {
    width: 22px;
    height: 22px;
}

.bh-ev-prev {
    left: -22px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}

.bh-ev-prev svg {
    fill: #1A5CB0;
}

.bh-ev-next {
    right: -22px;
    background: #1A5CB0;
    box-shadow: 0 4px 16px rgba(26, 92, 176, .35);
}

.bh-ev-next svg {
    fill: #fff;
}

.bh-ev-arrow.visible {
    display: flex;
}

.bh-ev-arrow:hover {
    transform: translateY(-50%) scale(1.1);
}

.bh-ev-arrow:disabled {
    opacity: .35;
    pointer-events: none;
}

/* ── Dots ──────────────────────────────────────────────── */
.bh-ev-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 24px;
    opacity: 0;
}

.bh-ev.bh-in .bh-ev-dots {
    animation: bh-ev-up .5s ease .35s forwards;
}

.bh-ev-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    padding: 0;
    background: rgba(26, 92, 176, .2);
    transition: all .3s ease;
}

.bh-ev-dot.active {
    background: #FF8C00;
    width: 24px;
    border-radius: 4px;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 991px) {
    .bh-ev-track {
        grid-template-columns: repeat(2, 1fr);
    }

    .bh-ev-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .bh-ev-head-right {
        align-self: flex-start;
    }
}

@media (max-width: 600px) {
    .bh-ev {
        padding: 64px 0;
    }

    .bh-ev-title {
        font-size: 26px;
    }

    .bh-ev-track {
        grid-template-columns: 1fr;
    }

    .bh-ev-img-wrap {
        height: 160px;
    }

    .bh-ev-name {
        font-size: 19px;
    }

    .bh-ev-dots {
        margin-top: 18px;
    }

    .bh-ev-prev {
        left: -14px;
        width: 38px;
        height: 38px;
    }

    .bh-ev-next {
        right: -14px;
        width: 38px;
        height: 38px;
    }
}


/* ============================================================
   BUNNYHOP — Events / Camps Section
   File: public/css/events-section.css
   ============================================================ */


/* ============================================================
   BUNNYHOP — Admission Enquiry Form Section
   File: public/css/admission-form.css
   ============================================================ */

@keyframes bh-enq-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bh-enq-pop {
    0% {
        opacity: 0;
        transform: scale(.92);
    }

    70% {
        transform: scale(1.03);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ── Section ───────────────────────────────────────────── */
.bh-enq {
    background: linear-gradient(160deg, #0E3A78 0%, #1A5CB0 100%);
    padding: 40px 0;
    position: relative;
    overflow: hidden;
}

/* Decorative circles */
.bh-enq::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
    top: -200px;
    right: -100px;
    pointer-events: none;
}

.bh-enq::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .03);
    bottom: -100px;
    left: -80px;
    pointer-events: none;
}

/* ── Two-column layout ─────────────────────────────────── */
.bh-enq-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    position: relative;
    z-index: 1;
    /* hidden until scroll trigger */
    opacity: 0;
}

.bh-enq.bh-in .bh-enq-wrap {
    animation: bh-enq-up .65s ease .05s forwards;
}

/* ── Left copy panel ───────────────────────────────────── */
.bh-enq-lbl {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, .12);
    border: 1.5px solid rgba(255, 255, 255, .22);
    border-radius: 50px;
    padding: 5px 16px;
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 16px;
}

.bh-enq-lbl svg {
    width: 13px;
    height: 13px;
    fill: #FF8C00;
}

.bh-enq-title {
    font-family: 'Fredoka', sans-serif;
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 18px;
}

.bh-enq-title span {
    color: #FF8C00;
}

.bh-enq-desc {
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    color: rgba(255, 255, 255, .78);
    line-height: 1.75;
    margin-bottom: 28px;
}

/* Trust points */
.bh-enq-trust {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 32px;
}

.bh-enq-trust li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
}

.bh-enq-trust-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bh-enq-trust-icon svg {
    width: 18px;
    height: 18px;
    fill: #FF8C00;
}

/* Quick contact links */
.bh-enq-quick {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bh-enq-quick-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    padding: 12px 16px;
    text-decoration: none;
    transition: all .25s ease;
}

.bh-enq-quick-item:hover {
    background: rgba(255, 255, 255, .14);
    transform: translateX(4px);
}

.bh-enq-qi-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bh-enq-qi-icon svg {
    width: 20px;
    height: 20px;
    fill: #fff;
}

.bh-qi-green {
    background: rgba(34, 197, 94, .25);
}

.bh-enq-qi-label {
    font-family: 'Nunito', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, .6);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.bh-enq-qi-val {
    font-family: 'Fredoka', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-top: 2px;
}

/* ── Form card ─────────────────────────────────────────── */
.bh-enq-form-wrap {
    background: #fff;
    border-radius: 24px;
    padding: 36px 32px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .22);
}

.bh-enq-form-head {
    margin-bottom: 24px;
}

.bh-enq-form-title {
    font-family: 'Fredoka', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #1C1C2E;
    margin-bottom: 4px;
}

.bh-enq-form-sub {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: #9CA3AF;
}

/* Rows */
.bh-enq-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* Field */
.bh-enq-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.bh-enq-label {
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}

.bh-enq-label span {
    color: #EF4444;
}

.bh-enq-optional {
    color: #9CA3AF;
    font-weight: 600;
}

/* Input wrapper */
.bh-enq-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.bh-enq-input-wrap>svg:first-child {
    position: absolute;
    left: 13px;
    width: 17px;
    height: 17px;
    fill: #9CA3AF;
    pointer-events: none;
    flex-shrink: 0;
}

/* Input */
.bh-enq-input {
    width: 100%;
    padding: 12px 14px 12px 40px;
    border: 1.5px solid #E5E7EB;
    border-radius: 12px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: #1C1C2E;
    background: #F9FAFB;
    transition: all .25s ease;
    outline: none;
    appearance: none;
}

.bh-enq-input::placeholder {
    color: #9CA3AF;
}

.bh-enq-input:focus {
    border-color: #1A5CB0;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(26, 92, 176, .1);
}

.bh-enq-input.error {
    border-color: #EF4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .1);
}

/* Highlighted phone field */
.bh-enq-input-highlight {
    border-color: #1A5CB0;
    background: #F0F6FF;
}

/* Select specific */
.bh-enq-select-wrap {
    position: relative;
}

.bh-enq-select {
    cursor: pointer;
    padding-right: 36px;
}

.bh-enq-chevron {
    position: absolute;
    right: 12px;
    width: 16px;
    height: 16px;
    fill: #9CA3AF;
    pointer-events: none;
}

/* Error message */
.bh-enq-error {
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #EF4444;
    min-height: 16px;
}

/* Submit button */
.bh-enq-submit {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #FF8C00, #FF5000);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-family: 'Fredoka', sans-serif;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
    box-shadow: 0 8px 24px rgba(255, 140, 0, .35);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bh-enq-submit-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bh-enq-submit-text svg {
    width: 20px;
    height: 20px;
    fill: #fff;
}

.bh-enq-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(255, 140, 0, .45);
}

.bh-enq-submit:active {
    transform: translateY(0);
}

.bh-enq-submit:disabled {
    opacity: .6;
    pointer-events: none;
}

/* Loading spinner */
.bh-enq-submit-loading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bh-enq-spinner {
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: bh-enq-spin .8s linear infinite;
    flex-shrink: 0;
}

@keyframes bh-enq-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Privacy note */
.bh-enq-privacy {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    color: #9CA3AF;
    text-align: center;
    justify-content: center;
}

.bh-enq-privacy svg {
    width: 14px;
    height: 14px;
    fill: #9CA3AF;
    flex-shrink: 0;
}

/* ── Success state ─────────────────────────────────────── */
.bh-enq-success {
    text-align: center;
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    animation: bh-enq-pop .5s ease;
}

.bh-enq-success-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #DCFCE7;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bh-enq-success-icon svg {
    width: 36px;
    height: 36px;
    fill: #16A34A;
}

.bh-enq-success-title {
    font-family: 'Fredoka', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #1C1C2E;
}

.bh-enq-success-msg {
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    color: #6B7280;
    line-height: 1.7;
}

.bh-enq-success-msg strong {
    color: #1A5CB0;
}

.bh-enq-success-link {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1A5CB0;
    text-decoration: none;
    border-bottom: 2px solid rgba(26, 92, 176, .3);
    padding-bottom: 2px;
    transition: border-color .2s;
}

.bh-enq-success-link:hover {
    border-color: #1A5CB0;
}

/* ── Responsive ────────────────────────────────────────── */

@media (max-width: 991px) {
    .bh-enq-wrap {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .bh-enq-title {
        font-size: 30px;
    }

    .bh-enq-quick {
        flex-direction: row;
    }

    .bh-enq-quick-item {
        flex: 1;
    }
}

@media (max-width: 600px) {
    .bh-enq {
        padding: 64px 0;
    }

    .bh-enq-title {
        font-size: 26px;
    }

    .bh-enq-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .bh-enq-form-wrap {
        padding: 24px 18px;
        border-radius: 18px;
    }

    .bh-enq-form-title {
        font-size: 20px;
    }

    .bh-enq-submit {
        font-size: 16px;
        padding: 14px 20px;
    }

    .bh-enq-quick {
        flex-direction: column;
    }

    .bh-enq-quick-item {
        flex: auto;
    }
}

/* ============================================================
   BUNNYHOP — Admission Enquiry Form Section
   File: public/css/admission-form.css
   ============================================================ */


/* ============================================================
   BUNNYHOP — Contact Snippet + Map Section
   File: public/css/contact-snippet.css
   ============================================================ */

@keyframes bh-ct-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Section ─────────────────────────────────────────────── */
.bh-contact {
    background: linear-gradient(160deg, #0E3A78 0%, #1A5CB0 100%);
    padding: 40px 0;
    position: relative;
    overflow: hidden;
}

.bh-contact::before {
    content: '';
    position: absolute;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
    top: -160px;
    right: -100px;
    pointer-events: none;
}

.bh-contact::after {
    content: '';
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .03);
    bottom: -80px;
    left: -60px;
    pointer-events: none;
}

/* ── Two-column layout ───────────────────────────────────── */
.bh-contact-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: stretch;
    position: relative;
    z-index: 1;
    opacity: 0;
}

.bh-contact.bh-in .bh-contact-wrap {
    animation: bh-ct-up .65s ease .05s forwards;
}

/* ── Left: Info ──────────────────────────────────────────── */
.bh-contact-lbl {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, .12);
    border: 1.5px solid rgba(255, 255, 255, .22);
    border-radius: 50px;
    padding: 5px 16px;
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 16px;
}

.bh-contact-lbl svg {
    width: 13px;
    height: 13px;
    fill: #FF8C00;
}

.bh-contact-title {
    font-family: 'Fredoka', sans-serif;
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 14px;
}

.bh-contact-title span {
    color: #FF8C00;
}

.bh-contact-desc {
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    color: rgba(255, 255, 255, .75);
    line-height: 1.72;
    margin-bottom: 28px;
    max-width: 400px;
}

/* ── Contact items ───────────────────────────────────────── */
.bh-contact-items {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 32px;
}

.bh-ci {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    padding: 14px 16px;
    text-decoration: none;
    transition: all .25s ease;
}

a.bh-ci-link:hover {
    background: rgba(255, 255, 255, .14);
    transform: translateX(4px);
    border-color: rgba(255, 255, 255, .22);
}

.bh-ci-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bh-ci-icon svg {
    width: 20px;
    height: 20px;
    fill: #fff;
}

.bh-ci-blue {
    background: rgba(26, 92, 176, .5);
    border: 1px solid rgba(255, 255, 255, .15);
}

.bh-ci-orange {
    background: rgba(255, 140, 0, .5);
    border: 1px solid rgba(255, 140, 0, .3);
}

.bh-ci-green {
    background: rgba(34, 197, 94, .4);
    border: 1px solid rgba(34, 197, 94, .3);
}

.bh-ci-purple {
    background: rgba(139, 92, 246, .4);
    border: 1px solid rgba(139, 92, 246, .3);
}

.bh-ci-body {}

.bh-ci-label {
    font-family: 'Nunito', sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: rgba(255, 255, 255, .55);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 3px;
}

.bh-ci-value {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    line-height: 1.5;
}

/* ── CTA buttons ─────────────────────────────────────────── */
.bh-contact-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.bh-contact-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FF8C00;
    color: #fff;
    padding: 13px 24px;
    border-radius: 50px;
    font-family: 'Fredoka', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease;
    box-shadow: 0 8px 24px rgba(255, 140, 0, .35);
}

.bh-contact-btn-primary svg {
    width: 17px;
    height: 17px;
    fill: #fff;
}

.bh-contact-btn-primary:hover {
    background: #D97000;
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(255, 140, 0, .45);
    color: #fff;
}

.bh-contact-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #fff;
    padding: 13px 24px;
    border-radius: 50px;
    border: 2px solid rgba(255, 255, 255, .4);
    font-family: 'Fredoka', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease;
}

.bh-contact-btn-outline:hover {
    background: rgba(255, 255, 255, .1);
    border-color: #fff;
    color: #fff;
    transform: translateY(-2px);
}

/* ── Map ─────────────────────────────────────────────────── */
.bh-contact-map {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    min-height: 420px;
    box-shadow: 0 24px 72px rgba(0, 0, 0, .25);
    border: 3px solid rgba(255, 255, 255, .12);
}

.bh-contact-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Map badge overlay */
.bh-map-badge {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: #fff;
    border-radius: 14px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    z-index: 2;
}

.bh-map-badge-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #EBF3FF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bh-map-badge-icon svg {
    width: 18px;
    height: 18px;
    fill: #1A5CB0;
}

.bh-map-badge-name {
    font-family: 'Fredoka', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1C1C2E;
    line-height: 1.2;
}

.bh-map-badge-loc {
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    color: #9CA3AF;
    margin-top: 2px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 991px) {
    .bh-contact-wrap {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .bh-contact-map {
        min-height: 320px;
    }
}

@media (max-width: 600px) {
    .bh-contact {
        padding: 64px 0;
    }

    .bh-contact-title {
        font-size: 26px;
    }

    .bh-contact-desc {
        font-size: 14px;
    }

    .bh-contact-map {
        min-height: 260px;
        border-radius: 18px;
    }

    .bh-ci {
        padding: 12px 13px;
        gap: 11px;
    }

    .bh-ci-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .bh-ci-value {
        font-size: 13px;
    }

    .bh-contact-ctas {
        flex-direction: column;
        gap: 10px;
    }

    .bh-contact-btn-primary,
    .bh-contact-btn-outline {
        justify-content: center;
    }
}


/* ============================================================
   BUNNYHOP — Contact Snippet + Map Section
   File: public/css/contact-snippet.css
   ============================================================ */


/* ============================================================
   BUNNYHOP — Footer
   File: public/css/footer.css
   ============================================================ */

/* ── Footer body ─────────────────────────────────────────── */
.bh-footer {
    background: #0E1E3D;
    font-family: 'Nunito', sans-serif;
}

.bh-footer-body {
    padding: 20px 0 52px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* ── Grid ────────────────────────────────────────────────── */
.bh-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
    gap: 48px;
}

/* ── Brand column ────────────────────────────────────────── */
.bh-footer-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    margin-bottom: 18px;
}

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

/* Logo fallback text */
.bh-footer-logo-fallback {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bh-fl-icon {
    font-size: 32px;
}

.bh-fl-name {
    font-family: 'Fredoka', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.bh-fl-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, .55);
    margin-top: 2px;
}

.bh-footer-tagline {
    font-size: 14px;
    color: rgba(255, 255, 255, .60);
    line-height: 1.75;
    margin-bottom: 22px;
    max-width: 280px;
}

.bh-footer-tagline strong {
    color: #FF8C00;
    font-weight: 700;
}

/* Social icons */
.bh-footer-socials {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.bh-social {
    width: 38px;
    height: 38px;
    border-radius: 50%;
background: #fff;
  border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all .25s ease;
}

.bh-social svg {
    width: 16px;
    height: 16px;
    fill: rgba(255, 255, 255, .7);
}

.bh-social:hover {
    transform: translateY(-3px);
}

.bh-social:hover svg {
    fill: #fff;
}

.bh-social:nth-child(1):hover {
    background: #E1306C;
    border-color: #E1306C;
}

.bh-social:nth-child(2):hover {
    background: #1877F2;
    border-color: #1877F2;
}

.bh-social-wa:hover {
    background: #25D366 !important;
    border-color: #25D366 !important;
}

.bh-social-g:hover {
    background: #4285F4 !important;
    border-color: #4285F4 !important;
}

/* Rating */
.bh-footer-rating {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bh-footer-stars {
    display: flex;
    gap: 2px;
}

.bh-footer-stars svg {
    width: 14px;
    height: 14px;
    fill: #FBBC04;
}

.bh-footer-rating-text {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, .55);
}

/* ── Nav columns ─────────────────────────────────────────── */
.bh-footer-col-title {
    font-family: 'Fredoka', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 12px;
}

.bh-footer-col-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2.5px;
    background: #FF8C00;
    border-radius: 2px;
}

.bh-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bh-footer-links a {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, .58);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all .2s ease;
}

.bh-footer-links a::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 140, 0, .4);
    flex-shrink: 0;
    transition: background .2s;
}

.bh-footer-links a:hover {
    color: #FF8C00;
    transform: translateX(4px);
}

.bh-footer-links a:hover::before {
    background: #FF8C00;
}

/* ── Contact column ──────────────────────────────────────── */
.bh-footer-contact-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 22px;
}

.bh-fci {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .60);
    line-height: 1.55;
    text-decoration: none;
    transition: color .2s;
}

.bh-fci svg {
    width: 16px;
    height: 16px;
    fill: #FF8C00;
    flex-shrink: 0;
    margin-top: 2px;
}

.bh-fci-link:hover {
    color: #FF8C00;
}

/* Admission CTA */
.bh-footer-admission-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, #FF8C00, #FF5000);
    color: #fff;
    padding: 11px 20px;
    border-radius: 12px;
    font-family: 'Fredoka', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all .28s ease;
    box-shadow: 0 6px 20px rgba(255, 140, 0, .30);
}

.bh-footer-admission-btn svg {
    width: 16px;
    height: 16px;
    fill: #fff;
}

.bh-footer-admission-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 140, 0, .40);
    color: #fff;
}

/* ── Bottom bar ──────────────────────────────────────────── */
.bh-footer-bar {
    padding: 18px 0;
    background: #081429;
}

.bh-footer-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.bh-footer-copy {
    font-size: 13px;
    color: rgba(255, 255, 255, .40);
    margin: 0;
}

.bh-footer-founder {
    margin-left: 8px;
    color: rgba(255, 140, 0, .60);
}

.bh-footer-bar-links {
    display: flex;
    gap: 20px;
}

.bh-footer-bar-links a {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .38);
    text-decoration: none;
    transition: color .2s;
}

.bh-footer-bar-links a:hover {
    color: rgba(255, 255, 255, .75);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
    .bh-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px 48px;
    }
}

@media (max-width: 600px) {
    .bh-footer-body {
        padding: 20px 0 40px;
    }

    .bh-footer-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .bh-footer-tagline {
        max-width: 100%;
    }

    .bh-footer-bar-inner {
        flex-direction: column;
        text-align: center;
    }

    .bh-footer-founder {
        display: block;
        margin-left: 0;
        margin-top: 4px;
    }
}


/* ============================================================
   BUNNYHOP — Footer
   File: public/css/footer.css
   ============================================================ */


   /* BunnyHop — Class Detail Page | public/css/class-detail.css
   Icons: Font Awesome 6 Free — no SVG width/height rules needed */

@keyframes bh-cd-spin { to { transform: rotate(360deg); } }
@keyframes bh-cd-pop  { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:scale(1); } }

/* ── HERO ──────────────────────────────────────────────── */
.bh-cd-hero { padding: 28px 0 0; position: relative; overflow: hidden; }
.bh-cd-circle1, .bh-cd-circle2 { position: absolute; border-radius: 50%; pointer-events: none; }
.bh-cd-circle1 { width: 400px; height: 400px; background: rgba(255,255,255,.06); top: -130px; right: -90px; }
.bh-cd-circle2 { width: 240px; height: 240px; background: rgba(255,255,255,.04); bottom: -70px; left: 4%; }

/* Breadcrumb */
.bh-cd-breadcrumb { display: flex; align-items: center; gap: 6px; font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.6); margin-bottom: 22px; flex-wrap: wrap; }
.bh-cd-breadcrumb a { color: rgba(255,255,255,.72); text-decoration: none; transition: color .2s; }
.bh-cd-breadcrumb a:hover { color: #fff; }
.bh-cd-breadcrumb span:last-child { color: #fff; }
.bh-cd-bc-icon { font-size: 10px; color: rgba(255,255,255,.4); }

/* Hero grid */
.bh-cd-hero-grid { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: flex-end; }

/* Badges */
.bh-cd-badge-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.bh-cd-badge-class { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.28); border-radius: 50px; padding: 5px 16px; font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: .4px; }
.bh-cd-badge-status { background: #FF8C00; border-radius: 50px; padding: 5px 16px; font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 800; color: #fff; }

/* Hero text */
.bh-cd-hero-title { font-family: 'Fredoka', sans-serif; font-size: clamp(32px, 5vw, 52px); font-weight: 700; color: #fff; line-height: 1.05; margin-bottom: 8px; }
.bh-cd-hero-tagline { font-family: 'Fredoka', sans-serif; font-size: 19px; font-weight: 500; color: rgba(255,255,255,.88); margin-bottom: 12px; }
.bh-cd-hero-desc { font-family: 'Nunito', sans-serif; font-size: 14.5px; color: rgba(255,255,255,.75); line-height: 1.75; margin-bottom: 24px; max-width: 490px; }

/* Stats row */
.bh-cd-stats { display: inline-flex; align-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 16px; padding: 14px 20px; margin-bottom: 24px; flex-wrap: wrap; }
.bh-cd-stat { text-align: center; padding: 0 18px; }
.bh-cd-stat-val { font-family: 'Fredoka', sans-serif; font-size: 17px; font-weight: 700; color: #fff; white-space: nowrap; }
.bh-cd-stat-lbl { font-family: 'Nunito', sans-serif; font-size: 10px; font-weight: 700; color: rgba(255,255,255,.58); text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }
.bh-cd-stat-div { width: 1px; height: 38px; background: rgba(255,255,255,.22); flex-shrink: 0; }

/* CTAs */
.bh-cd-ctas { display: flex; gap: 12px; flex-wrap: wrap; padding-bottom: 36px; }
.bh-cd-cta-primary { display: inline-flex; align-items: center; gap: 8px; background: #FF8C00; color: #fff; padding: 13px 26px; border-radius: 50px; font-family: 'Fredoka', sans-serif; font-size: 16px; font-weight: 600; text-decoration: none; transition: all .3s; box-shadow: 0 8px 24px rgba(255,140,0,.38); }
.bh-cd-cta-primary .bh-cd-cta-icon { font-size: 14px; transition: transform .25s; }
.bh-cd-cta-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(255,140,0,.48); color: #fff; }
.bh-cd-cta-primary:hover .bh-cd-cta-icon { transform: translateX(4px); }
.bh-cd-cta-outline { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #fff; padding: 13px 24px; border-radius: 50px; border: 2px solid rgba(255,255,255,.42); font-family: 'Fredoka', sans-serif; font-size: 16px; font-weight: 600; text-decoration: none; transition: all .3s; }
.bh-cd-cta-outline .bh-cd-cta-icon { font-size: 16px; }
.bh-cd-cta-outline:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; transform: translateY(-2px); }

/* Bunny ring */
.bh-cd-hero-right { }
.bh-cd-bunny-ring { width: 380px; height: 380px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; position: relative; transition: transform .4s; }
.bh-cd-bunny-ring:hover { transform: scale(1.03); }
.bh-cd-bunny-img { width: 100%; height: 100%;  }
.bh-cd-bunny-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.bh-cd-bunny-ph-icon { font-size: 80px; color: rgba(255,255,255,.3); }

/* ── BODY ──────────────────────────────────────────────── */
.bh-cd-body { background: #F9FAFB; padding: 48px 0 88px; }
.bh-cd-body-grid { display: grid; grid-template-columns: 1fr 310px; gap: 28px; align-items: start; }
.bh-cd-main { display: flex; flex-direction: column; gap: 0; }

/* Section card */
.bh-cd-section { background: #fff; border-radius: 20px; padding: 36px; margin-bottom: 24px; border: 0.5px solid #E5E7EB; box-shadow: 0 4px 20px rgba(0,0,0,.05); }
.bh-cd-section-head { margin-bottom: 28px; }
.bh-cd-section-lbl { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid; border-radius: 50px; padding: 5px 16px; font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 14px; }
.bh-cd-lbl-icon { font-size: 12px; }
.bh-cd-section-title { font-family: 'Fredoka', sans-serif; font-size: clamp(22px, 2.8vw, 30px); font-weight: 700; color: #1C1C2E; margin-bottom: 8px; }
.bh-cd-section-desc { font-family: 'Nunito', sans-serif; font-size: 14.5px; color: #6B7280; line-height: 1.72; }

/* Curriculum */
.bh-cd-curriculum-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bh-cd-curr-card { border-radius: 14px; padding: 20px; border: 1px solid rgba(0,0,0,.05); transition: all .3s ease; }
.bh-cd-curr-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.09); }
.bh-cd-curr-icon-wrap { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.bh-cd-curr-fa { font-size: 20px; }
.bh-cd-curr-title { font-family: 'Fredoka', sans-serif; font-size: 16px; font-weight: 700; color: #1C1C2E; margin-bottom: 6px; }
.bh-cd-curr-desc { font-family: 'Nunito', sans-serif; font-size: 12.5px; color: #6B7280; line-height: 1.65; }

/* Timeline */
.bh-cd-timeline { display: flex; flex-direction: column; }
.bh-cd-slot { display: flex; gap: 16px; align-items: flex-start; }
.bh-cd-slot-left { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.bh-cd-slot-dot { width: 44px; height: 44px; border-radius: 50%; border: 2px solid; display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1; }
.bh-cd-slot-fa { font-size: 16px; }
.bh-cd-slot-line { width: 2px; flex: 1; min-height: 24px; margin: 4px 0; }
.bh-cd-slot-right { padding: 10px 0 22px; }
.bh-cd-slot.last .bh-cd-slot-right { padding-bottom: 0; }
.bh-cd-slot-time { font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.bh-cd-slot-name { font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 700; color: #1C1C2E; }

/* Facilities */
.bh-cd-facilities-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.bh-cd-facility-card { display: flex; align-items: flex-start; gap: 14px; border-radius: 14px; padding: 16px; border: 1px solid; transition: all .28s; }
.bh-cd-facility-card:hover { transform: translateX(4px); }
.bh-cd-facility-icon-wrap { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bh-cd-facility-fa { font-size: 18px; }
.bh-cd-facility-title { font-family: 'Nunito', sans-serif; font-size: 13.5px; font-weight: 700; color: #1C1C2E; margin-bottom: 4px; }
.bh-cd-facility-desc { font-family: 'Nunito', sans-serif; font-size: 12px; color: #6B7280; line-height: 1.55; }

/* Testimonials */
.bh-cd-testimonials { overflow: hidden; }
.bh-cd-testi-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; transition: transform .4s cubic-bezier(.4,0,.2,1); }
.bh-cd-testi-card { background: #F9FAFB; border-radius: 16px; padding: 22px; border: 1px solid #E5E7EB; transition: all .3s; }
.bh-cd-testi-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,.09); }
.bh-cd-testi-stars { display: flex; gap: 3px; margin-bottom: 12px; color: #FBBC04; font-size: 14px; }
.bh-cd-testi-text { font-family: 'Nunito', sans-serif; font-size: 13px; color: #374151; line-height: 1.75; font-style: italic; margin-bottom: 16px; }
.bh-cd-testi-author { display: flex; align-items: center; gap: 10px; }
.bh-cd-testi-av { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Fredoka', sans-serif; font-size: 16px; font-weight: 700; color: #fff; flex-shrink: 0; }
.bh-cd-testi-name { font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 700; color: #1C1C2E; }
.bh-cd-testi-role { font-family: 'Nunito', sans-serif; font-size: 11px; color: #9CA3AF; margin-top: 2px; }
.bh-cd-testi-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.bh-cd-testi-dots { display: flex; gap: 6px; }
.bh-cd-testi-dot { width: 8px; height: 8px; border-radius: 50%; border: none; cursor: pointer; background: #D1D5DB; transition: all .3s; padding: 0; }
.bh-cd-testi-dot.active { width: 24px; border-radius: 4px; background: #FF8C00; }
.bh-cd-testi-arrows { display: flex; gap: 8px; }
.bh-cd-testi-arr { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #E5E7EB; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .25s; font-size: 14px; color: #6B7280; }
.bh-cd-testi-arr:hover { border-color: #1A5CB0; color: #1A5CB0; }
.bh-cd-testi-arr-next { color: #fff; }

/* Gallery */
.bh-cd-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bh-cd-gthumb { aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; position: relative; cursor: pointer; background: #E5E7EB; }
.bh-cd-gthumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.bh-cd-gthumb:hover img { transform: scale(1.07); }
.bh-cd-gthumb-overlay { position: absolute; inset: 0; background: rgba(26,92,176,.45); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s; }
.bh-cd-gthumb:hover .bh-cd-gthumb-overlay { opacity: 1; }
.bh-cd-gthumb-fa { font-size: 26px; color: #fff; }
.bh-cd-gthumb-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.bh-cd-gthumb-ph-fa { font-size: 30px; opacity: .3; }
.bh-cd-gthumb-ph-lbl { font-family: 'Nunito', sans-serif; font-size: 11px; font-weight: 700; opacity: .6; }
.bh-cd-gallery-cta { text-align: center; margin-top: 18px; }
.bh-cd-gallery-link { display: inline-flex; align-items: center; gap: 6px; font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 700; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; transition: opacity .2s; }
.bh-cd-gallery-link:hover { opacity: .75; }
.bh-cd-gallery-arr { font-size: 12px; }

/* FAQs */
.bh-cd-faq-list { display: flex; flex-direction: column; gap: 10px; }
.bh-cd-faq-item { background: #F9FAFB; border-radius: 14px; border: 1px solid #E5E7EB; overflow: hidden; }
.bh-cd-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 20px; background: none; border: none; cursor: pointer; font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 700; color: #1C1C2E; text-align: left; transition: color .2s; }
.bh-cd-faq-q:hover, .bh-cd-faq-q[aria-expanded="true"] { color: var(--fqc); }
.bh-cd-faq-chevron { font-size: 14px; color: #9CA3AF; flex-shrink: 0; transition: transform .3s; }
.bh-cd-faq-q[aria-expanded="true"] .bh-cd-faq-chevron { transform: rotate(180deg); color: var(--fqc); }
.bh-cd-faq-a { padding: 0 20px 17px; font-family: 'Nunito', sans-serif; font-size: 14.5px; color: #4B5563; line-height: 1.75; }
.bh-cd-faq-a p { margin: 0; }

/* Enquiry form */
.bh-cd-enq-section { background: linear-gradient(160deg, #F8FAFF, #EBF3FF); border: 1.5px solid; }
.bh-cd-enq-head { text-align: center; margin-bottom: 28px; }
.bh-cd-enq-title { font-family: 'Fredoka', sans-serif; font-size: clamp(22px, 3vw, 30px); font-weight: 700; color: #1C1C2E; margin-bottom: 6px; }
.bh-cd-enq-sub { font-family: 'Nunito', sans-serif; font-size: 14px; color: #6B7280; }
.bh-cd-enq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.bh-cd-enq-field { display: flex; flex-direction: column; gap: 6px; }
.bh-cd-enq-field label { font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 700; color: #374151; }
.bh-cd-enq-field input, .bh-cd-enq-field select { padding: 12px 14px; border-radius: 12px; border: 1.5px solid #E5E7EB; background: #fff; font-family: 'Nunito', sans-serif; font-size: 14px; color: #1C1C2E; outline: none; transition: all .25s; appearance: none; width: 100%; }
.bh-cd-enq-field input:focus, .bh-cd-enq-field select:focus { border-color: #1A5CB0; box-shadow: 0 0 0 3px rgba(26,92,176,.1); }
.bh-cd-enq-err { font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 700; color: #EF4444; min-height: 16px; }
.bh-cd-enq-submit { width: 100%; padding: 15px 24px; border: none; border-radius: 14px; cursor: pointer; font-family: 'Fredoka', sans-serif; font-size: 18px; font-weight: 600; color: #fff; transition: all .3s; box-shadow: 0 8px 28px rgba(0,0,0,.18); margin-top: 8px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.bh-cd-enq-submit:hover { transform: translateY(-3px); opacity: .9; }
.bh-cd-enq-btn-loading { display: flex; align-items: center; gap: 10px; }
.bh-cd-spinner { width: 20px; height: 20px; border: 2.5px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: bh-cd-spin .8s linear infinite; }
.bh-cd-enq-privacy { display: flex; align-items: center; justify-content: center; gap: 6px; font-family: 'Nunito', sans-serif; font-size: 12px; color: #9CA3AF; }
.bh-cd-privacy-icon { font-size: 12px; }
.bh-cd-enq-success { text-align: center; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; animation: bh-cd-pop .4s ease; }
.bh-cd-enq-success-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.bh-cd-success-fa { font-size: 30px; color: #16A34A; }
.bh-cd-enq-success h3 { font-family: 'Fredoka', sans-serif; font-size: 24px; font-weight: 700; color: #1C1C2E; }
.bh-cd-enq-success p { font-family: 'Nunito', sans-serif; font-size: 14px; color: #6B7280; line-height: 1.7; }
.bh-cd-enq-success p strong { color: #1A5CB0; }
.bh-cd-success-link { display: inline-flex; align-items: center; gap: 6px; font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 700; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; }

/* ── SIDEBAR ──────────────────────────────────────────── */
.bh-cd-sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 24px; }
.bh-cd-sb-card { background: #fff; border-radius: 18px; padding: 20px; border: 0.5px solid #E5E7EB; box-shadow: 0 4px 20px rgba(0,0,0,.05); }
.bh-cd-sb-title { font-family: 'Fredoka', sans-serif; font-size: 16px; font-weight: 700; color: #1C1C2E; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2.5px solid; display: flex; align-items: center; gap: 8px; }
.bh-cd-sb-title-icon { font-size: 14px; opacity: .75; }
.bh-cd-fee-list { display: flex; flex-direction: column; }
.bh-cd-fee-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 0.5px solid #F3F4F6; }
.bh-cd-fee-row:last-child { border-bottom: none; }
.bh-cd-fee-label { font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 700; color: #374151; }
.bh-cd-fee-note { font-family: 'Nunito', sans-serif; font-size: 11px; color: #9CA3AF; margin-top: 2px; }
.bh-cd-fee-val { font-family: 'Fredoka', sans-serif; font-size: 18px; font-weight: 700; white-space: nowrap; }
.bh-cd-fee-disclaimer { font-family: 'Nunito', sans-serif; font-size: 11px; color: #9CA3AF; margin-top: 12px; line-height: 1.5; }
.bh-cd-sb-field { margin-bottom: 10px; }
.bh-cd-sb-field input, .bh-cd-sb-field select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1.5px solid #E5E7EB; background: #F9FAFB; font-family: 'Nunito', sans-serif; font-size: 13px; color: #1C1C2E; outline: none; transition: all .25s; appearance: none; }
.bh-cd-sb-field input:focus, .bh-cd-sb-field select:focus { border-color: #1A5CB0; background: #fff; box-shadow: 0 0 0 3px rgba(26,92,176,.1); }
.bh-cd-sb-submit { width: 100%; padding: 12px 0; border: none; border-radius: 12px; font-family: 'Fredoka', sans-serif; font-size: 15px; font-weight: 600; color: #fff; cursor: pointer; transition: all .28s; display: flex; align-items: center; justify-content: center; gap: 7px; }
.bh-cd-sb-submit:hover { opacity: .88; transform: translateY(-2px); }
.bh-cd-sb-submit-icon { font-size: 13px; }
.bh-cd-sb-success { padding: 8px 0; }
.bh-cd-sb-success-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bh-cd-sb-check { font-size: 28px; color: #16A34A; }
.bh-cd-sb-success p { font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 600; color: #16A34A; text-align: center; }
.bh-cd-sb-admission { text-align: center; padding: 22px 20px; }
.bh-cd-sb-adm-icon { margin-bottom: 10px; }
.bh-cd-adm-fa { font-size: 28px; }
.bh-cd-sb-adm-title { font-family: 'Fredoka', sans-serif; font-size: 17px; font-weight: 700; color: #1C1C2E; margin-bottom: 7px; }
.bh-cd-sb-adm-text { font-family: 'Nunito', sans-serif; font-size: 13px; color: #6B7280; line-height: 1.65; margin-bottom: 14px; }
.bh-cd-sb-call-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; border-radius: 12px; color: #fff; font-family: 'Fredoka', sans-serif; font-size: 14px; font-weight: 600; text-decoration: none; transition: all .28s; }
.bh-cd-call-icon { font-size: 13px; }
.bh-cd-sb-call-btn:hover { opacity: .88; transform: translateY(-2px); color: #fff; }
.bh-cd-other-list { display: flex; flex-direction: column; gap: 7px; }
.bh-cd-other-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; text-decoration: none; background: #F9FAFB; border: 0.5px solid #E5E7EB; transition: all .25s; }
.bh-cd-other-item:hover { background: #EBF3FF; border-color: #1A5CB0; transform: translateX(4px); }
.bh-cd-other-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.bh-cd-other-info { flex: 1; }
.bh-cd-other-name { font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 700; color: #1C1C2E; }
.bh-cd-other-age { font-family: 'Nunito', sans-serif; font-size: 11px; color: #9CA3AF; margin-top: 2px; }
.bh-cd-other-arr { font-size: 12px; color: #9CA3AF; flex-shrink: 0; }

/* ── LIGHTBOX ─────────────────────────────────────────── */
.bh-cd-lb { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .3s; }
.bh-cd-lb.open { opacity: 1; pointer-events: auto; }
.bh-cd-lb-backdrop { position: absolute; inset: 0; background: rgba(10,16,30,.92); backdrop-filter: blur(6px); }
.bh-cd-lb-wrap { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; padding: 0 16px; max-width: 90vw; }
.bh-cd-lb-stage { flex: 1; max-height: 82vh; display: flex; align-items: center; justify-content: center; }
.bh-cd-lb-stage img { max-width: 100%; max-height: 82vh; border-radius: 12px; box-shadow: 0 24px 80px rgba(0,0,0,.5); }
.bh-cd-lb-close { position: absolute; top: -44px; right: 0; background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.25); color: #fff; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.bh-cd-lb-prev, .bh-cd-lb-next { width: 50px; height: 50px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; border: none; flex-shrink: 0; transition: all .25s; font-size: 18px; color: #fff; }
.bh-cd-lb-prev { background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.25); }
.bh-cd-lb-prev:hover, .bh-cd-lb-next:hover { transform: scale(1.1); }

/* ── RESPONSIVE ───────────────────────────────────────── */

/* Tablet landscape */
@media (max-width: 1100px) {
    .bh-cd-body-grid { grid-template-columns: 1fr 268px; }
}

/* Tablet portrait — sidebar moves below, Bunny hidden */
@media (max-width: 900px) {
    .bh-cd-hero-grid    { grid-template-columns: 1fr; }
    .bh-cd-hero-right   { display: none; }

    /* Body: single column, sidebar falls naturally below main content */
    .bh-cd-body-grid    { grid-template-columns: 1fr; gap: 0; }
    .bh-cd-sidebar      { position: static; 
                          display: grid; grid-template-columns: 1fr 1fr;
                          gap: 14px; margin-top: 4px; }

    /* Testimonials: 1 card visible at a time */
    .bh-cd-testi-track  { grid-template-columns: 1fr; }

    /* Curriculum: keep 2 cols on tablet */
    .bh-cd-curriculum-grid  { grid-template-columns: 1fr 1fr; }
    /* Facilities: keep 2 cols on tablet */
    .bh-cd-facilities-grid  { grid-template-columns: 1fr 1fr; }
}

/* Mobile — everything below 600px */
@media (max-width: 600px) {

    /* Body spacing */
    .bh-cd-body     { padding: 24px 0 60px; }
    .bh-cd-section  { padding: 20px 14px; margin-bottom: 14px; border-radius: 14px; }

    /* Hero */
    .bh-cd-hero-title   { font-size: 28px; }
    .bh-cd-hero-tagline { font-size: 16px; margin-bottom: 8px; }
    .bh-cd-hero-desc    { font-size: 13.5px; margin-bottom: 16px; }
    .bh-cd-breadcrumb   { margin-bottom: 14px; }

    /* Stats: 2×2 grid instead of row */
    .bh-cd-stats    { display: grid; grid-template-columns: 1fr 1fr;
                      gap: 0; width: 100%; padding: 10px 0; border-radius: 12px; }
    .bh-cd-stat     { padding: 10px 12px; border-right: 1px solid rgba(255,255,255,.15);
                      border-bottom: 1px solid rgba(255,255,255,.15); }
    .bh-cd-stat:nth-child(2n) { border-right: none; }
    .bh-cd-stat:nth-child(3),
    .bh-cd-stat:nth-child(4) { border-bottom: none; }
    .bh-cd-stat-div { display: none; }
    .bh-cd-stat-val { font-size: 14px; }
    .bh-cd-stat-lbl { font-size: 9px; }

    /* CTAs: side by side, smaller */
    .bh-cd-ctas         { gap: 8px; padding-bottom: 24px; }
    .bh-cd-cta-primary,
    .bh-cd-cta-outline  { padding: 11px 18px; font-size: 14px; flex: 1; justify-content: center; }

    /* Sidebar: stacked single col on mobile */
    .bh-cd-sidebar  { grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; }

    /* Hide "Other Programs" sidebar card on mobile — it's redundant on small screens */
    .bh-cd-sb-card:last-child { display: none; }

    /* Section labels */
    .bh-cd-section-title { font-size: 20px; }
    .bh-cd-section-desc  { font-size: 13px; }

    /* Curriculum: HORIZONTAL 2 cols — compact cards */
    .bh-cd-curriculum-grid  { grid-template-columns: 1fr 1fr; gap: 10px; }
    .bh-cd-curr-card        { padding: 14px 12px; }
    .bh-cd-curr-icon-wrap   { width: 36px; height: 36px; border-radius: 10px; margin-bottom: 8px; }
    .bh-cd-curr-fa          { font-size: 16px; }
    .bh-cd-curr-title       { font-size: 13px; margin-bottom: 4px; }
    .bh-cd-curr-desc        { font-size: 11.5px; line-height: 1.5; }

    /* Timeline: compact */
    .bh-cd-slot-dot         { width: 36px; height: 36px; }
    .bh-cd-slot-fa          { font-size: 14px; }
    .bh-cd-slot-time        { font-size: 10px; }
    .bh-cd-slot-name        { font-size: 13.5px; }
    .bh-cd-slot-right       { padding: 8px 0 16px; }

    /* Facilities: HORIZONTAL 2 cols — compact */
    .bh-cd-facilities-grid  { grid-template-columns: 1fr 1fr; gap: 8px; }
    .bh-cd-facility-card    { flex-direction: column; padding: 12px 10px; gap: 8px; }
    .bh-cd-facility-icon-wrap { width: 36px; height: 36px; border-radius: 10px; }
    .bh-cd-facility-fa      { font-size: 16px; }
    .bh-cd-facility-title   { font-size: 12px; margin-bottom: 2px; }
    .bh-cd-facility-desc    { font-size: 11px; line-height: 1.45; }

    /* Testimonials */
    .bh-cd-testi-card   { padding: 16px; }
    .bh-cd-testi-text   { font-size: 12.5px; }

    /* Gallery: 2 cols */
    .bh-cd-gallery-grid { grid-template-columns: 1fr 1fr; gap: 8px; }

    /* FAQ */
    .bh-cd-faq-q        { font-size: 13.5px; padding: 14px 16px; }
    .bh-cd-faq-a        { padding: 0 16px 14px; font-size: 13px; }

    /* Enquiry form */
    .bh-cd-enq-row      { grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
    .bh-cd-enq-submit   { font-size: 16px; padding: 13px 20px; }
    .bh-cd-enq-title    { font-size: 22px; }

    /* Sidebar cards compact on mobile */
    .bh-cd-sb-card      { padding: 16px; border-radius: 14px; }
    .bh-cd-sb-title     { font-size: 14px; margin-bottom: 12px; padding-bottom: 10px; }
    .bh-cd-fee-val      { font-size: 15px; }
    .bh-cd-fee-label    { font-size: 12px; }
    .bh-cd-sb-adm-title { font-size: 15px; }
    .bh-cd-sb-adm-text  { font-size: 12px; }

    /* Lightbox prev/next smaller */
    .bh-cd-lb-prev,
    .bh-cd-lb-next  { width: 38px; height: 38px; font-size: 14px; }
}

   /* BunnyHop — Class Detail Page | public/css/class-detail.css
   Icons: Font Awesome 6 Free — no SVG width/height rules needed */


   @media (max-width: 767px) {
    .bh-footer-col {
        display: none !important;
    }
}

.text-danger{color: #ff0000;}