/* =========================================================
   SPARKLES KINDERGARTEN
   DARK PREMIUM GLASS THEME
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

:root {

    --bg: #07151b;
    --bg-2: #0a1b22;
    --bg-3: #0d2329;

    --text: #f7f7f2;
    --text-soft: #aebfc1;
    --text-muted: #819497;

    --pink: #f28eae;
    --pink-dark: #e96d96;

    --mint: #8edbc2;
    --mint-dark: #65bea4;

    --yellow: #f5d77c;
    --peach: #f4b29f;

    --glass: rgba(255,255,255,.065);
    --glass-strong: rgba(255,255,255,.09);
    --glass-border: rgba(255,255,255,.12);

    --white-border: rgba(255,255,255,.16);

    --container: 1200px;

    --radius-xl: 34px;
    --radius-lg: 28px;
    --radius-md: 20px;
    --radius-sm: 14px;

    --shadow:
        0 25px 70px rgba(0,0,0,.25);

    --transition:
        all .3s ease;
}


/* =========================================================
   RESET
   ========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(242,142,174,.07),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 30%,
            rgba(142,219,194,.055),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            var(--bg),
            var(--bg-2) 55%,
            var(--bg)
        );

    color: var(--text);

    font-family:
        "DM Sans",
        sans-serif;

    overflow-x: hidden;
}

img {
    max-width: 100%;
}

a {
    color: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   BACKGROUND SCENE
   ========================================================= */

.background-scene {
    position: fixed;
    inset: 0;

    z-index: -1;

    overflow: hidden;

    pointer-events: none;
}


/* BUBBLES */

.bubble {
    position: absolute;

    display: block;

    border-radius: 50%;

    pointer-events: none;

    opacity: .18;

    animation:
        bubbleFloat 18s ease-in-out infinite;
}

.bubble-1 {
    width: 110px;
    height: 110px;

    top: 15%;
    left: 4%;

    background:
        rgba(242,142,174,.18);

    filter: blur(1px);

    animation-duration: 19s;
}

.bubble-2 {
    width: 70px;
    height: 70px;

    top: 42%;
    right: 7%;

    background:
        rgba(142,219,194,.20);

    animation-duration: 15s;
    animation-delay: -4s;
}

.bubble-3 {
    width: 42px;
    height: 42px;

    top: 72%;
    left: 12%;

    background:
        rgba(245,215,124,.20);

    animation-duration: 13s;
    animation-delay: -6s;
}

.bubble-4 {
    width: 150px;
    height: 150px;

    top: 78%;
    right: -50px;

    background:
        rgba(244,178,159,.11);

    filter: blur(3px);

    animation-duration: 23s;
}

.bubble-5 {
    width: 35px;
    height: 35px;

    top: 25%;
    right: 28%;

    background:
        rgba(255,255,255,.13);

    animation-duration: 11s;
    animation-delay: -3s;
}


@keyframes bubbleFloat {

    0% {
        transform:
            translate3d(0,0,0);
    }

    50% {
        transform:
            translate3d(25px,-45px,0);
    }

    100% {
        transform:
            translate3d(-15px,-90px,0);
    }
}


/* GLOWING BLOBS */

.glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

    pointer-events: none;
}

.glow-pink {
    width: 280px;
    height: 280px;

    top: 4%;
    left: -130px;

    background:
        rgba(242,142,174,.08);
}

.glow-mint {
    width: 300px;
    height: 300px;

    top: 38%;
    right: -160px;

    background:
        rgba(142,219,194,.065);
}

.glow-yellow {
    width: 230px;
    height: 230px;

    bottom: 4%;
    left: 35%;

    background:
        rgba(245,215,124,.045);
}


/* SPARKLES */

.sparkle {
    position: absolute;

    color: rgba(255,255,255,.25);

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    animation:
        sparklePulse 4s ease-in-out infinite;
}

.sparkle-1 {
    top: 17%;
    left: 24%;
    font-size: 19px;
}

.sparkle-2 {
    top: 33%;
    right: 18%;
    font-size: 27px;
    animation-delay: -1s;
}

.sparkle-3 {
    bottom: 20%;
    left: 8%;
    font-size: 16px;
    animation-delay: -2s;
}

.sparkle-4 {
    bottom: 35%;
    right: 31%;
    font-size: 30px;
    animation-delay: -3s;
}

@keyframes sparklePulse {

    0%,
    100% {
        opacity: .15;
        transform: scale(.8);
    }

    50% {
        opacity: .45;
        transform: scale(1.15);
    }
}


/* =========================================================
   CONTAINER
   ========================================================= */

.section-container {
    width: min(
        var(--container),
        calc(100% - 48px)
    );

    margin: 0 auto;
}


/* =========================================================
   NAVBAR
   ========================================================= */

.site-header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 9999;

    padding: 15px 22px;

    background: transparent;

    pointer-events: none;
}

.nav-container {
    position: relative;

    width: min(
        1380px,
        100%
    );

    min-height: 72px;

    margin: 0 auto;

    padding: 0 12px 0 24px;

    display: flex;
    align-items: center;

    background:
        rgba(7,21,27,.80);

    border:
        1px solid rgba(255,255,255,.10);

    border-radius: 23px;

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        0 15px 40px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.06);

    pointer-events: auto;
}


/* LOGO */

.brand {
    position: relative;

    z-index: 2;

    display: flex;
    align-items: center;

    flex-shrink: 0;
}

.brand img {
    display: block;

    width: 185px;

    height: auto;

    object-fit: contain;
}


/* NAV */

.nav-menu {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 4px;
}

.nav-menu > a {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 43px;

    padding: 0 14px;

    color: #dbe6e5;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 14.5px;

    font-weight: 600;

    line-height: 1;

    text-decoration: none;

    border-radius: 13px;

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

.nav-menu > a:hover {
    color: var(--pink);

    background:
        rgba(242,142,174,.07);
}

.nav-menu > a.active {
    color: var(--pink);

    background:
        rgba(242,142,174,.09);
}


/* SOCIALS */

.nav-menu .social-pill {
    gap: 7px;

    color: var(--mint);

    padding:
        0 15px;

    border:
        1px solid rgba(142,219,194,.14);

    border-radius: 999px;

    background:
        rgba(142,219,194,.06);
}

.nav-menu .social-pill:hover {
    color: var(--bg);

    background:
        var(--mint);

    transform:
        translateY(-2px);
}


/* ENQUIRE */

.nav-menu .enquire-pill {
    margin-left: 6px;

    gap: 8px;

    color: var(--bg);

    padding:
        0 19px;

    font-weight: 700;

    background:
        linear-gradient(
            135deg,
            var(--pink),
            var(--peach)
        );

    border-radius: 999px;

    box-shadow:
        0 8px 22px rgba(242,142,174,.15);
}

.nav-menu .enquire-pill:hover {
    color: var(--bg);

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 28px rgba(242,142,174,.25);
}


/* HAMBURGER */

.hamburger {
    display: none;

    width: 48px;
    height: 48px;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius: 15px;

    background:
        rgba(255,255,255,.055);

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 5px;

    cursor: pointer;
}

.hamburger span {
    width: 22px;
    height: 2.5px;

    border-radius: 10px;

    background: var(--pink);

    transition:
        transform .3s ease,
        opacity .2s ease;
}

.hamburger.active span:nth-child(1) {
    transform:
        translateY(7.5px)
        rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform:
        translateY(-7.5px)
        rotate(-45deg);
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    position: relative;

    min-height: 850px;

    display: flex;
    align-items: center;

    padding:
        145px 0 95px;

    overflow: hidden;
}

.hero-container {
    width: min(
        var(--container),
        calc(100% - 48px)
    );

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1fr
        .9fr;

    gap: 70px;

    align-items: center;
}


/* HERO CONTENT */

.hero-content {
    position: relative;

    z-index: 2;
}

.hero-eyebrow,
.section-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    color: var(--mint);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;
}

.eyebrow-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--pink);

    box-shadow:
        0 0 14px rgba(242,142,174,.7);
}


.hero h1 {
    max-width: 720px;

    margin-top: 22px;

    color: var(--text);

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size:
        clamp(48px, 6vw, 78px);

    font-weight: 800;

    line-height: 1.02;

    letter-spacing: -3px;
}

.hero h1 span {
    display: block;

    color: var(--pink);
}


.hero-description {
    max-width: 610px;

    margin-top: 27px;

    color: var(--text-soft);

    font-size: 17px;

    line-height: 1.8;
}


/* HERO BUTTONS */

.hero-actions {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 34px;
}


/* BUTTON */

.btn {
    min-height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    padding:
        0 22px;

    border-radius: 999px;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

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

.btn-primary {
    color: var(--bg);

    background:
        linear-gradient(
            135deg,
            var(--pink),
            var(--peach)
        );

    box-shadow:
        0 10px 28px rgba(242,142,174,.16);
}

.btn-primary:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 15px 32px rgba(242,142,174,.25);
}

.btn-secondary {
    color: var(--text);

    background:
        var(--glass);

    border:
        1px solid var(--glass-border);

    backdrop-filter:
        blur(12px);
}

.btn-secondary:hover {
    transform:
        translateY(-2px);

    background:
        var(--glass-strong);
}


/* HERO VALUES */

.hero-values {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-top: 34px;

    color: var(--text-muted);

    font-size: 12px;

    font-weight: 600;

    letter-spacing: .4px;
}

.hero-values i {
    font-size: 4px;

    color: var(--pink);
}


/* =========================================================
   HERO VISUAL
   ========================================================= */

.hero-visual {
    position: relative;

    min-height: 560px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-glass-card {
    position: relative;

    width: min(
        440px,
        100%
    );

    padding: 16px;

    background:
        rgba(255,255,255,.065);

    border:
        1px solid rgba(255,255,255,.13);

    border-radius:
        34px;

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    box-shadow:
        0 35px 90px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.08);

    transform:
        rotate(1.5deg);
}


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

    padding:
        7px 8px 14px;

    color: var(--text-muted);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;
}

.hero-card-star {
    color: var(--yellow);

    font-size: 18px;
}


.hero-image-wrap {
    overflow: hidden;

    border-radius:
        25px;

    background:
        linear-gradient(
            145deg,
            rgba(242,142,174,.13),
            rgba(142,219,194,.10)
        );
}

.hero-image-wrap img {
    display: block;

    width: 100%;

    height: 430px;

    object-fit: cover;
}


.hero-card-bottom {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 12px;

    padding:
        17px 8px 5px;
}

.hero-card-bottom div {
    display: flex;

    flex-direction: column;

    gap: 3px;
}

.hero-card-bottom strong {
    color: var(--text);

    font-size: 13px;
}

.hero-card-bottom span {
    color: var(--text-muted);

    font-size: 11px;
}


/* ORBITS */

.hero-orbit {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(242,142,174,.13);
}

.orbit-one {
    width: 500px;
    height: 500px;
}

.orbit-two {
    width: 610px;
    height: 610px;

    border-color:
        rgba(142,219,194,.07);
}


/* FLOATING NOTES */

.floating-note {
    position: absolute;

    display: flex;
    align-items: center;

    gap: 11px;

    padding:
        13px 16px;

    background:
        rgba(7,21,27,.76);

    border:
        1px solid rgba(255,255,255,.11);

    border-radius:
        17px;

    backdrop-filter:
        blur(15px);

    box-shadow:
        0 18px 35px rgba(0,0,0,.20);
}

.floating-note strong {
    display: block;

    color: var(--text);

    font-size: 11px;
}

.floating-note small {
    display: block;

    margin-top: 3px;

    color: var(--text-muted);

    font-size: 9px;
}

.note-icon {
    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    color: var(--bg);

    background:
        var(--pink);
}

.note-two .note-icon {
    background:
        var(--mint);
}

.note-one {
    top: 21%;
    left: -5%;
}

.note-two {
    right: -4%;
    bottom: 20%;
}


/* =========================================================
   SECTION HEADINGS
   ========================================================= */

.centered {
    text-align: center;
}

.section-heading {
    max-width: 700px;

    margin:
        0 auto 55px;
}

.section-heading h2,
.about-content h2,
.final-cta h2,
.after-school-content h2 {
    margin-top: 17px;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size:
        clamp(32px, 4vw, 50px);

    line-height: 1.1;

    letter-spacing: -1.8px;
}

.section-heading h2 span,
.about-content h2 span,
.final-cta h2 span,
.after-school-content h2 span {
    color: var(--pink);
}

.section-heading p {
    margin-top: 18px;

    color: var(--text-soft);

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   INTRO / PROGRAMS
   ========================================================= */

.intro-section {
    position: relative;

    padding:
        115px 0;
}

.program-grid {
    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 18px;
}

.glass-card {
    background:
        var(--glass);

    border:
        1px solid var(--glass-border);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        0 20px 55px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.05);

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

.glass-card:hover {
    transform:
        translateY(-6px);

    background:
        rgba(255,255,255,.085);

    border-color:
        rgba(255,255,255,.17);
}

.program-card {
    position: relative;

    min-height: 335px;

    padding: 25px;

    border-radius:
        var(--radius-lg);

    overflow: hidden;
}

.program-card::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    right: -45px;
    bottom: -45px;

    border-radius: 50%;

    opacity: .13;
}

.pink-card::after {
    background:
        var(--pink);
}

.mint-card::after {
    background:
        var(--mint);
}

.yellow-card::after {
    background:
        var(--yellow);
}

.peach-card::after {
    background:
        var(--peach);
}

.program-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    color: var(--bg);

    font-size: 17px;
}

.pink-card .program-icon {
    background: var(--pink);
}

.mint-card .program-icon {
    background: var(--mint);
}

.yellow-card .program-icon {
    background: var(--yellow);
}

.peach-card .program-icon {
    background: var(--peach);
}

.program-number {
    position: absolute;

    top: 28px;
    right: 25px;

    color: var(--text-muted);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;
}

.program-card h3 {
    margin-top: 38px;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: 21px;

    font-weight: 700;
}

.program-card p {
    margin-top: 13px;

    color: var(--text-muted);

    font-size: 13px;

    line-height: 1.7;
}

.program-card a {
    position: absolute;

    left: 25px;
    bottom: 25px;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: var(--text);

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;
}

.program-card a i {
    color: var(--pink);

    transition:
        transform .25s ease;
}

.program-card:hover a i {
    transform:
        translateX(4px);
}


/* =========================================================
   AFTER SCHOOL
   ========================================================= */

.after-school-section {
    padding:
        70px 0 120px;
}

.after-school-card {
    position: relative;

    min-height: 500px;

    display: grid;

    grid-template-columns:
        1.1fr
        .9fr;

    gap: 50px;

    align-items: center;

    padding:
        65px;

    overflow: hidden;

    border-radius:
        36px;

    background:
        linear-gradient(
            135deg,
            rgba(242,142,174,.12),
            rgba(142,219,194,.08)
        );

    border:
        1px solid rgba(255,255,255,.13);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    box-shadow:
        0 35px 80px rgba(0,0,0,.25);
}

.after-school-card::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(245,215,124,.10),
            transparent 25%
        );

    pointer-events: none;
}

.featured-label {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding:
        8px 12px;

    color: var(--yellow);

    background:
        rgba(245,215,124,.07);

    border:
        1px solid rgba(245,215,124,.13);

    border-radius: 999px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.2px;
}

.after-school-content h2 {
    max-width: 580px;
}

.after-school-content > p {
    max-width: 570px;

    margin-top: 20px;

    color: var(--text-soft);

    font-size: 15px;

    line-height: 1.8;
}

.after-school-highlight {
    color: var(--text) !important;
}

.after-school-content .btn {
    margin-top: 25px;
}

.btn-light {
    color: var(--bg);

    background:
        var(--text);
}

.btn-light:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 12px 30px rgba(255,255,255,.12);
}


/* FEATURES */

.after-school-features {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 13px;
}

.feature-glass {
    min-height: 135px;

    display: flex;

    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;

    gap: 15px;

    padding: 20px;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius:
        20px;

    background:
        rgba(255,255,255,.055);

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);
}

.feature-glass i {
    color: var(--mint);

    font-size: 20px;
}

.feature-glass span {
    color: var(--text);

    font-size: 12px;

    font-weight: 600;
}


/* ORBS */

.after-school-orb {
    position: absolute;

    border-radius: 50%;

    filter: blur(2px);

    pointer-events: none;
}

.after-school-orb.orb-one {
    width: 230px;
    height: 230px;

    right: -100px;
    top: -90px;

    background:
        rgba(242,142,174,.10);
}

.after-school-orb.orb-two {
    width: 160px;
    height: 160px;

    left: 42%;
    bottom: -90px;

    background:
        rgba(142,219,194,.08);
}


/* =========================================================
   ABOUT PREVIEW
   ========================================================= */

.about-preview {
    padding: 35px 0 80px;
}

.about-grid {
    display: grid;

    grid-template-columns:
        .9fr
        1fr;

    gap: 90px;

    align-items: center;
}

.about-image-area {
    position: relative;

    padding:
        20px;
}

.about-image-card {
    overflow: hidden;

    border-radius:
        34px;

    border:
        1px solid rgba(255,255,255,.12);

    background:
        var(--glass);

    box-shadow:
        var(--shadow);
}

.about-image-card img {
    display: block;

    width: 100%;

    height: 500px;

    object-fit: cover;
}

.about-small-card {
    position: absolute;

    right: -5px;
    bottom: 0;

    display: flex;
    align-items: center;

    gap: 11px;

    padding:
        13px 17px;

    background:
        rgba(7,21,27,.85);

    border:
        1px solid rgba(255,255,255,.11);

    border-radius:
        17px;

    backdrop-filter:
        blur(15px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.22);
}

.about-small-card > span {
    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    color: var(--bg);

    background:
        var(--yellow);
}

.about-small-card strong {
    display: block;

    color: var(--text);

    font-size: 11px;
}

.about-small-card small {
    display: block;

    color: var(--text-muted);

    font-size: 9px;
}

.about-content > p {
    max-width: 620px;

    margin-top: 20px;

    color: var(--text-soft);

    font-size: 15px;

    line-height: 1.8;
}

.about-points {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 13px;

    margin-top: 28px;
}

.about-points div {
    display: flex;
    align-items: center;

    gap: 9px;

    color: var(--text-soft);

    font-size: 12px;
}

.about-points i {
    width: 23px;
    height: 23px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: var(--bg);

    background:
        var(--mint);

    font-size: 9px;
}

.text-link {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-top: 28px;

    color: var(--pink);

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;
}

.text-link i {
    transition:
        transform .25s ease;
}

.text-link:hover i {
    transform:
        translateX(5px);
}


/* =========================================================
   ACTIVITIES
   ========================================================= */

.activities-section {
    padding:
        100px 0 120px;
}

.activity-grid {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 18px;
}

.activity-card {
    padding:
        30px;

    min-height: 235px;

    border-radius:
        var(--radius-lg);
}

.activity-icon {
    width: 53px;
    height: 53px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 17px;

    color: var(--bg);

    font-size: 18px;
}

.pink-icon {
    background:
        var(--pink);
}

.mint-icon {
    background:
        var(--mint);
}

.yellow-icon {
    background:
        var(--yellow);
}

.activity-card h3 {
    margin-top: 30px;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: 20px;
}

.activity-card p {
    margin-top: 10px;

    color: var(--text-muted);

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.final-cta {
    padding:
        40px 0 120px;
}

.final-cta-card {
    position: relative;

    overflow: hidden;

    padding:
        75px 50px;

    text-align: center;

    border-radius:
        35px;

    background:
        linear-gradient(
            135deg,
            rgba(242,142,174,.10),
            rgba(142,219,194,.07)
        );

    border:
        1px solid rgba(255,255,255,.11);

    box-shadow:
        var(--shadow);

    backdrop-filter:
        blur(18px);
}

.final-cta-card::before,
.final-cta-card::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.final-cta-card::before {
    width: 220px;
    height: 220px;

    top: -130px;
    left: -80px;

    background:
        rgba(242,142,174,.09);

    filter: blur(5px);
}

.final-cta-card::after {
    width: 180px;
    height: 180px;

    right: -70px;
    bottom: -100px;

    background:
        rgba(142,219,194,.08);

    filter: blur(5px);
}

.final-cta-card h2 {
    max-width: 720px;

    margin-left: auto;
    margin-right: auto;
}

.final-cta-card p {
    max-width: 600px;

    margin:
        20px auto 0;

    color: var(--text-soft);

    font-size: 15px;

    line-height: 1.8;
}

.cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-top: 30px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    background:
        #050f14;

    border-top:
        1px solid rgba(255,255,255,.07);
}

.footer-container {
    width: min(
        var(--container),
        calc(100% - 48px)
    );

    margin: 0 auto;

    padding:
        70px 0 55px;

    display: grid;

    grid-template-columns:
        1.4fr
        1fr
        1fr
        1.3fr;

    gap: 45px;
}

.footer-brand img {
    width: 105px;
}

.footer-brand p {
    margin-top: 16px;

    color: var(--text-muted);

    font-size: 12px;
}

.footer-column {
    display: flex;

    flex-direction: column;

    gap: 11px;
}

.footer-column h3 {
    margin-bottom: 8px;

    color: var(--text);

    font-size: 12px;

    letter-spacing: 1px;
}

.footer-column a,
.footer-column span {
    color: var(--text-muted);

    font-size: 12px;

    line-height: 1.6;

    text-decoration: none;

    transition:
        color .2s ease;
}

.footer-column a:hover {
    color: var(--pink);
}

.footer-bottom {
    width: min(
        var(--container),
        calc(100% - 48px)
    );

    margin: 0 auto;

    padding:
        22px 0;

    border-top:
        1px solid rgba(255,255,255,.06);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.footer-bottom p {
    color: #64777a;

    font-size: 10px;
}

.footer-socials {
    display: flex;

    gap: 8px;
}

.footer-socials a {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: var(--text-muted);

    background:
        rgba(255,255,255,.05);

    border:
        1px solid rgba(255,255,255,.07);

    text-decoration: none;

    transition:
        color .2s ease,
        background .2s ease;
}

.footer-socials a:hover {
    color: var(--bg);

    background:
        var(--pink);
}


/* =========================================================
   WHATSAPP
   ========================================================= */

.whatsapp-float {
    position: fixed;

    right: 22px;
    bottom: 22px;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 9998;

    color: #fff;

    background:
        #25D366;

    border-radius: 50%;

    font-size: 29px;

    text-decoration: none;

    box-shadow:
        0 8px 25px rgba(37,211,102,.22);

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

.whatsapp-float:hover {
    transform:
        scale(1.06);

    box-shadow:
        0 12px 30px rgba(37,211,102,.32);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .site-header {
        padding:
            12px 16px;
    }

    .brand img {
        width: 165px;
    }

    .nav-menu > a {
        padding:
            0 10px;

        font-size: 13px;
    }

    .hero-container {
        gap: 35px;
    }

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

    .after-school-card {
        padding:
            45px;
    }
}


/* =========================================================
   MOBILE NAV
   ========================================================= */

@media (max-width: 850px) {

    .site-header {
        padding:
            9px 11px;
    }

    .nav-container {
        min-height: 63px;

        padding:
            0 9px 0 16px;

        border-radius:
            18px;
    }

    .brand img {
        width: 150px;
    }

    .hamburger {
        display: flex;
    }

    .nav-menu {
        position: absolute;

        top:
            calc(100% + 9px);

        left: 0;
        right: 0;

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 5px;

        padding: 10px;

        background:
            rgba(7,21,27,.96);

        border:
            1px solid rgba(255,255,255,.10);

        border-radius:
            20px;

        backdrop-filter:
            blur(20px);

        box-shadow:
            0 20px 45px rgba(0,0,0,.28);

        opacity: 0;

        visibility: hidden;

        transform:
            translateY(-8px)
            scale(.98);

        transition:
            opacity .25s ease,
            visibility .25s ease,
            transform .25s ease;
    }

    .nav-menu.active {
        opacity: 1;

        visibility: visible;

        transform:
            translateY(0)
            scale(1);
    }

    .nav-menu > a {
        width: 100%;

        min-height: 46px;

        justify-content: center;

        text-align: center;

        font-size: 15px;

        color: var(--text);
    }

    .nav-menu .social-pill {
        width: 100%;

        justify-content: center;
    }

    .nav-menu .enquire-pill {
        width: 100%;

        margin:
            2px 0 0;
    }


    /* HERO */

    .hero {
        min-height: auto;

        padding:
            135px 0 80px;
    }

    .hero-container {
        grid-template-columns:
            1fr;

        gap: 65px;
    }

    .hero-content {
        text-align: center;
    }

    .hero-eyebrow {
        justify-content: center;
    }

    .hero h1 {
        font-size:
            clamp(42px, 10vw, 62px);

        letter-spacing:
            -2px;
    }

    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-values {
        justify-content: center;

        flex-wrap: wrap;
    }

    .hero-visual {
        min-height: 500px;
    }

    .hero-glass-card {
        width:
            min(400px,90%);
    }

    .note-one {
        left: 0;
    }

    .note-two {
        right: 0;
    }


    /* SECTIONS */

    .intro-section,
    .about-preview,
    .activities-section {
        padding:
            80px 0;
    }

    .after-school-section {
        padding:
            40px 0 80px;
    }

    .about-grid {
        grid-template-columns:
            1fr;

        gap: 55px;
    }

    .about-image-area {
        max-width:
            600px;

        margin: 0 auto;
    }

    .about-content {
        text-align: center;
    }

    .about-points {
        text-align: left;
    }

    .text-link {
        justify-content: center;
    }


    .after-school-card {
        grid-template-columns:
            1fr;

        gap: 35px;

        padding:
            40px 30px;
    }

    .after-school-content {
        text-align: center;
    }

    .after-school-content .featured-label {
        margin:
            0 auto;
    }

    .after-school-features {
        max-width:
            600px;

        width: 100%;

        margin:
            0 auto;
    }

    .activity-grid {
        grid-template-columns:
            1fr;
    }


    /* FOOTER */

    .footer-container {
        grid-template-columns:
            1fr 1fr;

        gap:
            40px 25px;
    }

    .footer-brand {
        grid-column:
            1 / -1;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .section-container,
    .hero-container,
    .footer-container,
    .footer-bottom {
        width:
            calc(100% - 32px);
    }

    .hero {
        padding-top:
            125px;
    }

    .hero h1 {
        font-size:
            40px;

        line-height:
            1.08;
    }

    .hero-description {
        font-size:
            14px;
    }

    .hero-actions {
        flex-direction:
            column;
    }

    .hero-actions .btn {
        width:
            100%;
    }

    .hero-values {
        gap:
            8px;
    }

    .hero-visual {
        min-height:
            430px;
    }

    .hero-glass-card {
        width:
            92%;
    }

    .hero-image-wrap img {
        height:
            350px;
    }

    .floating-note {
        padding:
            10px 12px;
    }

    .floating-note small {
        display:
            none;
    }

    .note-one {
        left:
            -3px;
    }

    .note-two {
        right:
            -3px;
    }

    .program-grid {
        grid-template-columns:
            1fr;
    }

    .program-card {
        min-height:
            300px;
    }

    .section-heading {
        margin-bottom:
            38px;
    }

    .section-heading h2,
    .about-content h2,
    .final-cta h2,
    .after-school-content h2 {
        font-size:
            32px;
    }

    .after-school-card {
        padding:
            35px 22px;

        border-radius:
            27px;
    }

    .after-school-features {
        grid-template-columns:
            1fr 1fr;
    }

    .feature-glass {
        min-height:
            115px;

        padding:
            15px;
    }

    .about-image-card img {
        height:
            390px;
    }

    .about-points {
        grid-template-columns:
            1fr;
    }

    .final-cta {
        padding-bottom:
            80px;
    }

    .final-cta-card {
        padding:
            55px 22px;

        border-radius:
            27px;
    }

    .cta-actions {
        flex-direction:
            column;
    }

    .cta-actions .btn {
        width:
            100%;
    }

    .footer-container {
        grid-template-columns:
            1fr;

        text-align:
            center;
    }

    .footer-brand {
        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;
    }

    .footer-column {
        align-items:
            center;
    }

    .footer-bottom {
        flex-direction:
            column;

        text-align:
            center;
    }

    .whatsapp-float {
        width:
            54px;

        height:
            54px;

        right:
            16px;

        bottom:
            16px;

        font-size:
            27px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;
    }

}

/* =========================================================
   FINAL HERO SPACING + DARK BACKGROUND FIX
   ========================================================= */

/* Remove any old white page background */
html,
body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100% !important;

    background:
        #07151b !important;

    color: var(--text) !important;
}

/* Make sure the entire page stays dark */
body {
    overflow-x: hidden !important;
}

/* Fixed navbar should sit directly over the dark background */
.site-header {
    top: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* =========================================================
   HERO — REDUCE EMPTY SPACE
   ========================================================= */

.hero {
    min-height: 780px !important;

    height: auto !important;

    margin: 0 !important;

    padding:
        125px 0 65px !important;

    display: flex !important;
    align-items: center !important;

    background:
        transparent !important;

    overflow: hidden !important;
}

.hero-container {
    width: min(
        1200px,
        calc(100% - 48px)
    ) !important;

    margin: 0 auto !important;

    gap: 45px !important;

    align-items: center !important;
}

/* Move hero text slightly upward */
.hero-content {
    transform: translateY(-15px) !important;
}

/* Keep image from sitting too low */
.hero-visual {
    min-height: 500px !important;

    transform:
        translateY(-5px) !important;
}

/* Reduce the huge orbit area */
.hero-orbit.orbit-one {
    width: 470px !important;
    height: 470px !important;
}

.hero-orbit.orbit-two {
    width: 570px !important;
    height: 570px !important;
}


/* =========================================================
   REMOVE UNWANTED WHITE SPACE AFTER HERO
   ========================================================= */

.hero-bottom-glow {
    display: none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 850px) {

    .hero {
        min-height: auto !important;

        padding:
            120px 0 65px !important;
    }

    .hero-content {
        transform: none !important;
    }

    .hero-visual {
        min-height: 460px !important;

        transform: none !important;
    }
}


@media (max-width: 600px) {

    .hero {
        padding:
            110px 0 55px !important;
    }

    .hero-container {
        gap: 40px !important;
    }

    .hero-visual {
        min-height: 420px !important;
    }
}

/* =========================================================
   FINAL OVERSCROLL / WHITE STRETCH FIX
   ========================================================= */

/* The entire document must use the dark theme */
html {
    background: #07151b !important;

    /* Prevent browser overscroll bounce */
    overscroll-behavior-y: none !important;
}

body {
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;

    background:
        #07151b !important;

    overflow-x: hidden !important;

    /* Prevent vertical rubber-band stretching */
    overscroll-behavior-y: none !important;
}


/* Make the main page background continuous */
main {
    background: transparent !important;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    background:
        transparent !important;

    margin: 0 !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    margin: 0 !important;

    background:
        #050f14 !important;
}


/* Make sure nothing creates a white strip after footer */
.site-footer::before,
.site-footer::after {
    background: transparent !important;
}


/* =========================================================
   REMOVE POSSIBLE OLD WHITE SECTION BACKGROUNDS
   ========================================================= */

.hero-bottom-glow {
    background: transparent !important;
}


/* =========================================================
   MOBILE / TOUCH DEVICES
   ========================================================= */

@media (max-width: 850px) {

    html,
    body {
        background: #07151b !important;

        overscroll-behavior-y: none !important;
    }

}

/* =========================================================
   HERO → PROGRAMS SPACING FIX
   ========================================================= */

/* Reduce the bottom space of the hero */
.hero {
    min-height: auto !important;
    height: auto !important;

    padding-top: 125px !important;
    padding-bottom: 35px !important;

    margin-bottom: 0 !important;
}


/* Keep hero content vertically balanced */
.hero-container {
    margin-bottom: 0 !important;
}


/* Remove unnecessary visual height */
.hero-visual {
    min-height: 480px !important;
}


/* Programs section should start much closer */
.intro-section {
    padding-top: 55px !important;
    padding-bottom: 85px !important;

    margin-top: 0 !important;
}


/* Heading spacing */
.intro-section .section-heading {
    margin-top: 0 !important;
    margin-bottom: 38px !important;
}


/* Reduce heading internal spacing */
.intro-section .section-heading h2 {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
}

.intro-section .section-heading p {
    margin-top: 10px !important;
}


/* Cards come closer to the heading */
.intro-section .program-grid {
    margin-top: 0 !important;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 851px) {

    .hero {
        padding-top: 115px !important;
        padding-bottom: 25px !important;
    }

    .hero-container {
        gap: 35px !important;
    }

    .hero-content {
        transform: translateY(-5px) !important;
    }

    .hero-visual {
        min-height: 455px !important;
    }

    .intro-section {
        padding-top: 45px !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 850px) {

    .hero {
        padding-top: 110px !important;
        padding-bottom: 40px !important;
    }

    .hero-visual {
        min-height: 420px !important;
    }

    .intro-section {
        padding-top: 45px !important;
    }
}

/* =========================================================
   MOBILE NAVBAR — LOGO LEFT / HAMBURGER RIGHT
   ========================================================= */

@media (max-width: 850px) {

    .site-header {
        padding: 9px 11px !important;
    }

    .nav-container {
        width: 100% !important;

        min-height: 63px !important;

        padding:
            0 10px 0 16px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        border-radius: 18px !important;
    }

    /* Logo stays on the LEFT */
    .brand {
        margin: 0 !important;

        display: flex !important;
        align-items: center !important;

        flex-shrink: 0 !important;
    }

    .brand img {
        width: 150px !important;
        height: auto !important;
    }

    /* Hamburger goes completely to the RIGHT */
    .hamburger {
        display: flex !important;

        margin-left: auto !important;

        flex-shrink: 0 !important;

        width: 48px !important;
        height: 48px !important;

        align-items: center !important;
        justify-content: center !important;

        padding: 0 !important;
    }

    /* Mobile dropdown */
    .nav-menu {
        position: absolute !important;

        top: calc(100% + 9px) !important;

        left: 0 !important;
        right: 0 !important;

        width: 100% !important;

        margin: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        gap: 5px !important;

        padding: 10px !important;

        opacity: 0 !important;
        visibility: hidden !important;

        transform:
            translateY(-8px)
            scale(.98) !important;

        transition:
            opacity .25s ease,
            visibility .25s ease,
            transform .25s ease !important;
    }

    .nav-menu.active {
        opacity: 1 !important;
        visibility: visible !important;

        transform:
            translateY(0)
            scale(1) !important;
    }

    .nav-menu > a {
        width: 100% !important;

        min-height: 46px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;
    }

}

/* =========================================================
   PROGRAMS → AFTER-SCHOOL SPACING
   ========================================================= */

/* Remove excessive space below the 4 program cards */
.intro-section {
    padding-bottom: 25px !important;
    margin-bottom: 0 !important;
}

/* Bring After-School section directly closer */
.after-school-section {
    padding-top: 20px !important;
    margin-top: 0 !important;
}

/* Prevent any hidden margin from the program grid */
.program-grid {
    margin-bottom: 0 !important;
}

/* Prevent the featured card from getting pushed down */
.after-school-card {
    margin-top: 0 !important;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 851px) {

    .intro-section {
        padding-bottom: 20px !important;
    }

    .after-school-section {
        padding-top: 15px !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 850px) {

    .intro-section {
        padding-bottom: 30px !important;
    }

    .after-school-section {
        padding-top: 15px !important;
    }
}

/* =========================================================
   AFTER-SCHOOL FEATURE TILES — PREMIUM VERSION
   ========================================================= */

.after-school-features {
    position: relative;
    z-index: 3;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 16px;

    width: 100%;
}


/* MAIN TILE */

.feature-glass {
    position: relative;

    min-height: 175px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 22px;

    overflow: hidden;

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.095),
            rgba(255,255,255,.035)
        );

    border:
        1px solid rgba(255,255,255,.13);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.08);

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


/* LARGE SOFT GLOW INSIDE CARD */

.feature-glass::before {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    right: -55px;
    top: -55px;

    border-radius: 50%;

    opacity: .15;

    filter: blur(2px);

    transition:
        transform .45s ease,
        opacity .35s ease;
}


/* BOTTOM ACCENT */

.feature-glass::after {
    content: "";

    position: absolute;

    left: 22px;
    right: 22px;
    bottom: 0;

    height: 2px;

    border-radius: 10px;

    opacity: .65;
}


/* =========================================================
   INDIVIDUAL COLORS
   ========================================================= */

.feature-evening::before {
    background:
        var(--pink);
}

.feature-evening::after {
    background:
        var(--pink);
}


.feature-safe::before {
    background:
        var(--mint);
}

.feature-safe::after {
    background:
        var(--mint);
}


.feature-activities::before {
    background:
        var(--yellow);
}

.feature-activities::after {
    background:
        var(--yellow);
}


.feature-open::before {
    background:
        var(--peach);
}

.feature-open::after {
    background:
        var(--peach);
}


/* =========================================================
   HOVER
   ========================================================= */

.feature-glass:hover {
    transform:
        translateY(-7px);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.13),
            rgba(255,255,255,.055)
        );

    border-color:
        rgba(255,255,255,.22);

    box-shadow:
        0 25px 55px rgba(0,0,0,.27),
        inset 0 1px 0 rgba(255,255,255,.11);
}

.feature-glass:hover::before {
    transform:
        scale(1.35);

    opacity: .22;
}


/* =========================================================
   NUMBER
   ========================================================= */

.feature-number {
    position: absolute;

    top: 19px;
    right: 20px;

    color:
        rgba(255,255,255,.28);

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


/* =========================================================
   ICON
   ========================================================= */

.feature-icon {
    position: relative;
    z-index: 2;

    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 17px;

    font-size: 20px;

    box-shadow:
        0 8px 20px rgba(0,0,0,.14);

    transition:
        transform .35s ease;
}


.feature-evening .feature-icon {
    color: #ffe8ef;

    background:
        rgba(242,142,174,.17);

    border:
        1px solid rgba(242,142,174,.22);
}

.feature-safe .feature-icon {
    color: #d7fff1;

    background:
        rgba(142,219,194,.16);

    border:
        1px solid rgba(142,219,194,.22);
}

.feature-activities .feature-icon {
    color: #fff3bf;

    background:
        rgba(245,215,124,.16);

    border:
        1px solid rgba(245,215,124,.22);
}

.feature-open .feature-icon {
    color: #ffe1d7;

    background:
        rgba(244,178,159,.16);

    border:
        1px solid rgba(244,178,159,.22);
}


.feature-glass:hover .feature-icon {
    transform:
        rotate(-5deg)
        scale(1.08);
}


/* =========================================================
   TEXT
   ========================================================= */

.feature-text {
    position: relative;
    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 5px;

    margin-top: 15px;
}

.feature-text strong {
    color:
        var(--text);

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: 13px;

    font-weight: 700;

    line-height: 1.3;
}

.feature-text span {
    color:
        var(--text-muted);

    font-size: 10.5px;

    line-height: 1.4;
}


/* =========================================================
   ARROW
   ========================================================= */

.feature-arrow {
    position: absolute;

    right: 20px;
    bottom: 19px;

    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color:
        rgba(255,255,255,.55);

    background:
        rgba(255,255,255,.055);

    border:
        1px solid rgba(255,255,255,.08);

    font-size: 9px;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;
}

.feature-glass:hover .feature-arrow {
    transform:
        translate(3px,-3px);

    color:
        var(--text);

    background:
        rgba(255,255,255,.12);
}

/* Hide After-School card numbers */
.after-school-features .feature-number {
    display: none !important;
}

/* =========================================================
   AFTER-SCHOOL CARDS — SQUARE MOBILE SHAPE
   ========================================================= */

@media (max-width: 850px) {

    .after-school-features {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .after-school-features .feature-glass {
        width: 100% !important;

        /* Square cards */
        aspect-ratio: 1 / 1 !important;

        min-height: 0 !important;
        height: auto !important;

        box-sizing: border-box !important;

        padding: 16px !important;

        border-radius: 20px !important;
    }

}


/* Smaller phones */
@media (max-width: 480px) {

    .after-school-features {
        gap: 10px !important;
    }

    .after-school-features .feature-glass {
        aspect-ratio: 1 / 1 !important;

        padding: 14px !important;

        border-radius: 18px !important;
    }

}

/* =========================================================
   AFTER-SCHOOL CARDS — CLEAN UNIFORM MOBILE DESIGN
   ========================================================= */

@media (max-width: 850px) {

    .after-school-features {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .after-school-features .feature-glass {
        aspect-ratio: 1 / 1 !important;
        min-height: 0 !important;
        height: auto !important;

        box-sizing: border-box !important;

        padding: 17px !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;

        border-radius: 20px !important;
    }


    /* -------------------------
       UNIFORM ICON
       ------------------------- */

    .after-school-features .feature-icon {
        width: 46px !important;
        height: 46px !important;

        min-width: 46px !important;
        min-height: 46px !important;

        padding: 0 !important;
        margin: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 14px !important;

        box-sizing: border-box !important;

        font-size: 17px !important;
        line-height: 1 !important;
    }


    /* -------------------------
       TEXT GROUP
       ------------------------- */

    .after-school-features .feature-text {
        width: 100% !important;

        margin-top: 10px !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 4px !important;

        align-items: flex-start !important;
    }


    /* -------------------------
       TITLE
       ------------------------- */

    .after-school-features .feature-text strong {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        font-family:
            "Manrope",
            sans-serif !important;

        font-size: 12.5px !important;

        font-weight: 800 !important;

        line-height: 1.25 !important;

        letter-spacing: -0.25px !important;

        color: #f7f9fa !important;
    }


    /* -------------------------
       DESCRIPTION
       ------------------------- */

    .after-school-features .feature-text span {
        display: block !important;

        width: 100% !important;

        max-width: 115px !important;

        margin: 0 !important;
        padding: 0 !important;

        font-family:
            "DM Sans",
            sans-serif !important;

        font-size: 9.5px !important;

        font-weight: 500 !important;

        line-height: 1.4 !important;

        letter-spacing: 0 !important;

        color:
            rgba(215,228,232,.58) !important;
    }


    /* -------------------------
       REMOVE OLD ARROW
       ------------------------- */

    .after-school-features .feature-arrow {
        display: none !important;
    }


    /* -------------------------
       REMOVE NUMBER
       ------------------------- */

    .after-school-features .feature-number {
        display: none !important;
    }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

    .after-school-features {
        gap: 10px !important;
    }

    .after-school-features .feature-glass {
        padding: 15px !important;
        border-radius: 18px !important;
    }

    .after-school-features .feature-icon {
        width: 44px !important;
        height: 44px !important;

        min-width: 44px !important;
        min-height: 44px !important;

        border-radius: 13px !important;

        font-size: 16px !important;
    }

    .after-school-features .feature-text {
        margin-top: 9px !important;
        gap: 4px !important;
    }

    .after-school-features .feature-text strong {
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

    .after-school-features .feature-text span {
        font-size: 9px !important;
        line-height: 1.4 !important;
    }

}

/* =========================================================
   AFTER-SCHOOL CARDS — REDUCE ICON/TEXT GAP
   ========================================================= */

@media (max-width: 850px) {

    .after-school-features .feature-text {
        margin-top: 2px !important;
        gap: 2px !important;
    }

    .after-school-features .feature-text strong {
        margin-top: 0 !important;
        line-height: 1.2 !important;
    }

    .after-school-features .feature-text span {
        margin-top: 1px !important;
        line-height: 1.3 !important;
    }

}


@media (max-width: 480px) {

    .after-school-features .feature-text {
        margin-top: 2px !important;
        gap: 2px !important;
    }

}

/* =========================================================
   AFTER-SCHOOL CARDS
   FIX ICON → TEXT EXCESSIVE SPACE
   ========================================================= */

/* Stop the card from distributing content vertically */
.after-school-features .feature-glass {
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

/* Keep the text directly below the icon */
.after-school-features .feature-text {
    margin-top: 14px !important;
    margin-bottom: 0 !important;
    gap: 3px !important;

    width: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* Title */
.after-school-features .feature-text strong {
    margin: 0 !important;
    padding: 0 !important;

    line-height: 1.2 !important;
}

/* Description */
.after-school-features .feature-text span {
    margin: 0 !important;
    padding: 0 !important;

    line-height: 1.35 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 850px) {

    .after-school-features .feature-glass {
        justify-content: flex-start !important;
    }

    .after-school-features .feature-text {
        margin-top: 8px !important;
        gap: 3px !important;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .after-school-features .feature-text {
        margin-top: 7px !important;
        gap: 2px !important;
    }

}

/* =========================================================
   AFTER-SCHOOL CARDS — SMALLER DESKTOP SIZE
   ========================================================= */

@media (min-width: 851px) {

    .after-school-features {
        grid-template-columns: repeat(2, 235px) !important;
        gap: 16px !important;

        justify-content: center !important;
    }

    .after-school-features .feature-glass {
        width: 235px !important;
        height: 165px !important;
        min-height: 165px !important;

        padding: 18px !important;
        border-radius: 22px !important;
    }

    .after-school-features .feature-icon {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;

        border-radius: 14px !important;
        font-size: 17px !important;
    }

    .after-school-features .feature-text {
        margin-top: 7px !important;
        gap: 2px !important;
    }

    .after-school-features .feature-text strong {
        font-size: 13px !important;
        line-height: 1.2 !important;
    }

    .after-school-features .feature-text span {
        font-size: 9px !important;
        line-height: 1.3 !important;
    }

}

/* =========================================================
   AFTER-SCHOOL CARDS — COMPACT DESKTOP SIZE
   ========================================================= */

@media (min-width: 851px) {

    .after-school-features {
        grid-template-columns: repeat(2, 210px) !important;
        gap: 14px !important;
        justify-content: center !important;
    }

    .after-school-features .feature-glass {
        width: 210px !important;
        height: 145px !important;
        min-height: 145px !important;

        padding: 16px !important;

        border-radius: 20px !important;

        box-sizing: border-box !important;
    }

    /* Icon */
    .after-school-features .feature-icon {
        width: 43px !important;
        height: 43px !important;
        min-width: 43px !important;
        min-height: 43px !important;

        border-radius: 13px !important;
        font-size: 16px !important;
    }

    /* Text */
    .after-school-features .feature-text {
        margin-top: 7px !important;
        gap: 2px !important;
    }

    .after-school-features .feature-text strong {
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    .after-school-features .feature-text span {
        font-size: 8.5px !important;
        line-height: 1.3 !important;
        max-width: 175px !important;
    }

}

/* =========================================================
   AFTER-SCHOOL CARDS — INCREASE TEXT SIZE
   ========================================================= */

@media (min-width: 851px) {

    .after-school-features .feature-text {
        margin-top: 8px !important;
        gap: 3px !important;
    }

    .after-school-features .feature-text strong {
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        letter-spacing: -0.2px !important;
    }

    .after-school-features .feature-text span {
        font-size: 10.5px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
        max-width: 180px !important;
    }

}

/* =========================================================
   AFTER-SCHOOL CARDS — DECORATIVE BUBBLES ONLY
   Does NOT affect text or card sizing
   ========================================================= */

/* Large background bubble */
.after-school-features .feature-glass::before {
    width: 105px !important;
    height: 105px !important;

    top: -55px !important;
    right: -45px !important;

    opacity: 0.16 !important;

    filter: blur(4px) !important;

    z-index: 0 !important;
}


/* Keep all actual card content above the bubble */
.after-school-features .feature-glass > * {
    position: relative !important;
    z-index: 2 !important;
}


/* Small decorative bubble at bottom-right */
.after-school-features .feature-arrow {
    width: 34px !important;
    height: 34px !important;

    right: 16px !important;
    bottom: 16px !important;

    opacity: 0.45 !important;

    background: rgba(255,255,255,0.025) !important;

    border: 1px solid rgba(255,255,255,0.12) !important;

    box-shadow: none !important;
}


/* =========================================================
   MOBILE — EVEN SUBTLER
   ========================================================= */

@media (max-width: 850px) {

    .after-school-features .feature-glass::before {
        width: 80px !important;
        height: 80px !important;

        top: -40px !important;
        right: -35px !important;

        opacity: 0.11 !important;

        filter: blur(5px) !important;
    }

    .after-school-features .feature-arrow {
        width: 30px !important;
        height: 30px !important;

        right: 13px !important;
        bottom: 13px !important;

        opacity: 0.35 !important;
    }
}

/* =========================================================
   REDUCE SPACE AFTER AFTER-SCHOOL PROGRAM
   ========================================================= */

.after-school-section {
    margin-bottom: 0 !important;
    padding-bottom: 45px !important;
}


/* Reduce space before About section */
.about-section {
    margin-top: 0 !important;
    padding-top: 55px !important;
}


/* Remove any large gap created by the section wrapper */
.after-school-section + .about-section {
    margin-top: 0 !important;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 851px) {

    .after-school-section {
        padding-bottom: 40px !important;
    }

    .about-section {
        padding-top: 55px !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 850px) {

    .after-school-section {
        padding-bottom: 30px !important;
    }

    .about-section {
        padding-top: 35px !important;
    }

}

/* =========================================================
   TIGHTEN AFTER-SCHOOL → ABOUT SPACING
   ========================================================= */

.after-school-section {
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 20px !important;
}

.after-school-section + .about-section {
    margin-top: 0 !important;
    padding-top: 20px !important;
}

.about-section {
    margin-top: 0 !important;
}


/* Remove spacing from common section wrappers */
.after-school-section + section {
    margin-top: 0 !important;
}


/* Desktop */
@media (min-width: 851px) {

    .after-school-section {
        padding-bottom: 15px !important;
    }

    .after-school-section + .about-section {
        padding-top: 25px !important;
    }

}


/* Mobile */
@media (max-width: 850px) {

    .after-school-section {
        padding-bottom: 10px !important;
    }

    .after-school-section + .about-section {
        padding-top: 20px !important;
    }

}

/* =========================================================
   HOME — REDUCE GAP BEFORE ABOUT SECTION
========================================================= */

/* Remove excess space after the previous section */
body:not(.services-page):not(.gallery-page):not(.contact-page):not(.socials-page)
.about.section {
    margin-top: -70px !important;
    padding-top: 45px !important;
}

/* Keep the About content itself properly positioned */
body:not(.services-page):not(.gallery-page):not(.contact-page):not(.socials-page)
.about.section .about-layout {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Prevent the decorative wave from creating extra spacing */
body:not(.services-page):not(.gallery-page):not(.contact-page):not(.socials-page)
.about.section .about-wave {
    margin: 0 !important;
    top: 0 !important;
}

/* =========================================================
   MOBILE — REDUCE GAP BEFORE ABOUT SECTION
========================================================= */

@media (max-width: 700px) {

    .about-preview-section {
        margin-top: -90px !important;
        padding-top: 30px !important;
    }

    .about-preview-grid {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .about-preview-image,
    .about-preview-content {
        margin-top: 0 !important;
    }

}

/* =========================================================
   MOBILE — STRONGLY REDUCE GAP BEFORE ABOUT SECTION
========================================================= */

@media (max-width: 700px) {

    .about-preview-section {
        margin-top: -220px !important;
        padding-top: 20px !important;
        padding-bottom: 40px !important;
    }

    .about-preview-grid {
        margin-top: 0 !important;
        padding-top: 0 !important;
        gap: 25px !important;
    }

    .about-preview-image {
        margin-top: 0 !important;
    }

    .about-preview-image img {
        margin-top: 0 !important;
    }

}

/* =========================================================
   SPARKLES PLAYFUL SECTION DIVIDER
========================================================= */

.sparkles-section-divider {
    position: relative;
    width: 100%;
    height: 85px;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

/* Dark flowing wave */

.sparkles-section-divider .divider-wave {
    position: absolute;
    left: -5%;
    bottom: -105px;
    width: 110%;
    height: 190px;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(110, 225, 204, 0.08),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            rgba(14, 31, 37, 0.15),
            rgba(14, 31, 37, 0.95)
        );

    border-radius: 50% 50% 0 0 / 45% 45% 0 0;

    transform: rotate(-1deg);
}

/* Dashed playful path */

.sparkles-section-divider::before {
    content: "";
    position: absolute;

    left: 10%;
    right: 10%;
    top: 88px;

    height: 45px;

    border-top: 3px dashed rgba(255,255,255,0.65);

    border-radius: 50%;

    transform: rotate(-2deg);

    opacity: 0.8;
}

/* Main message */

.divider-message {
    position: absolute;

    left: 50%;
    top: 38px;

    transform: translateX(-50%) rotate(-3deg);

    display: flex;
    flex-direction: column;

    align-items: center;

    font-family: "DM Sans", sans-serif;

    font-size: 22px;
    font-weight: 800;

    line-height: 0.92;

    text-align: center;

    white-space: nowrap;

    z-index: 5;
}

.divider-message span:nth-child(1) {
    color: #ff83ad;
}

.divider-message span:nth-child(2) {
    color: #ffd35f;
}

.divider-message span:nth-child(3) {
    color: #6fe0cc;
}

.divider-message span:nth-child(4) {
    color: #ff83ad;
}

/* Star */

.divider-star {
    position: absolute;

    left: 7%;
    top: 50px;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;

    font-size: 34px;

    background: #ffd04f;

    clip-path: polygon(
        50% 0%,
        61% 35%,
        98% 35%,
        68% 56%,
        79% 92%,
        50% 70%,
        21% 92%,
        32% 56%,
        2% 35%,
        39% 35%
    );

    filter: drop-shadow(0 8px 15px rgba(255, 208, 79, 0.25));
}

/* Heart */

.divider-heart {
    position: absolute;

    left: 20%;
    top: 48px;

    color: #ff7eaa;

    font-size: 38px;

    transform: rotate(-12deg);
}

/* Floating dots */

.divider-dot {
    position: absolute;

    width: 15px;
    height: 15px;

    border-radius: 50%;

    z-index: 4;
}

.dot-one {
    left: 31%;
    top: 72px;
    background: #ffd15a;
}

.dot-two {
    left: 43%;
    top: 105px;
    background: #ff7fae;
}

.dot-three {
    right: 30%;
    top: 82px;
    background: #71dfcf;
}

.dot-four {
    right: 15%;
    top: 112px;
    background: #ffc36e;
}

/* Paper-plane style arrow */

.divider-plane {
    position: absolute;

    right: 9%;
    top: 54px;

    color: #ffd15a;

    font-size: 48px;

    transform: rotate(-28deg);

    text-shadow:
        0 0 12px rgba(255, 209, 90, 0.25);
}

/* Small decorative strokes */

.divider-dash {
    position: absolute;

    width: 22px;
    height: 4px;

    border-radius: 10px;

    background: #ff83ad;

    transform: rotate(-25deg);
}

.dash-one {
    left: 11%;
    top: 38px;
}

.dash-two {
    right: 23%;
    top: 48px;
    background: #6fe0cc;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 701px) {

    .sparkles-section-divider {
        height: 175px;
        margin-top: -5px;
        margin-bottom: -5px;
    }

    .divider-message {
        font-size: 23px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .sparkles-section-divider {
        height: 145px;
        margin-top: 0;
        margin-bottom: 0;
    }

    .sparkles-section-divider .divider-wave {
        bottom: -90px;
        height: 150px;
    }

    .sparkles-section-divider::before {
        left: 6%;
        right: 6%;
        top: 77px;
        height: 30px;
        border-width: 2px;
    }

    .divider-message {
        top: 30px;

        font-size: 18px;

        line-height: 0.94;
    }

    .divider-star {
        left: 7%;
        top: 40px;

        width: 42px;
        height: 42px;

        font-size: 25px;
    }

    .divider-heart {
        left: 23%;
        top: 30px;

        font-size: 27px;
    }

    .divider-plane {
        right: 6%;
        top: 43px;

        font-size: 34px;
    }

    .divider-dot {
        width: 10px;
        height: 10px;
    }

    .dot-one {
        left: 32%;
        top: 70px;
    }

    .dot-two {
        left: 43%;
        top: 96px;
    }

    .dot-three {
        right: 27%;
        top: 72px;
    }

    .dot-four {
        right: 12%;
        top: 98px;
    }

    .dash-one {
        left: 9%;
        top: 30px;
        width: 15px;
    }

    .dash-two {
        right: 19%;
        top: 34px;
        width: 15px;
    }

}

/* =========================================================
   FINAL MOBILE FIX — ABOUT SECTION GAP
   ========================================================= */

@media (max-width: 700px) {

    /* Make the divider shorter */
    .sparkles-section-divider {
        height: 95px !important;
        margin: 0 !important;
    }

    .sparkles-section-divider .divider-wave {
        bottom: -60px !important;
        height: 105px !important;
    }

    .sparkles-section-divider::before {
        top: 55px !important;
    }

    .divider-message {
        top: 20px !important;
        font-size: 17px !important;
    }

    .divider-star {
        top: 30px !important;
    }

    .divider-heart {
        top: 20px !important;
    }

    .divider-plane {
        top: 32px !important;
    }

    /* ACTUAL About section used by index.html */
    .about-preview {
        margin-top: 0 !important;
        padding-top: 20px !important;
        padding-bottom: 50px !important;
    }

    .about-preview .about-grid {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .about-image-area {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .about-image-card {
        margin-top: 0 !important;
    }
}

/* =========================================================
   DISCOVER OUR STORY — STYLISH BUTTON
   ========================================================= */

.about-preview .text-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;

    margin-top: 28px !important;
    padding: 12px 20px !important;

    border: 1px solid rgba(255, 128, 174, 0.28) !important;
    border-radius: 999px !important;

    background: rgba(255, 128, 174, 0.08) !important;

    color: #ff82ae !important;

    font-family: "DM Sans", sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;

    text-decoration: none !important;

    box-shadow:
        0 8px 22px rgba(255, 128, 174, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease !important;
}

.about-preview .text-link i {
    font-size: 13px !important;
    transition: transform 0.25s ease !important;
}

.about-preview .text-link:hover {
    transform: translateY(-2px) !important;

    background: rgba(255, 128, 174, 0.14) !important;

    border-color: rgba(255, 128, 174, 0.5) !important;

    box-shadow:
        0 12px 28px rgba(255, 128, 174, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.about-preview .text-link:hover i {
    transform: translateX(5px) !important;
}


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

    .about-preview .text-link {
        margin-top: 22px !important;
        padding: 11px 18px !important;
        font-size: 13.5px !important;
    }

}

/* =========================================================
   MOBILE — REDUCE GAP AFTER ABOUT SECTION
   ========================================================= */

@media (max-width: 700px) {

    /* About section */
    .about-preview {
        padding-bottom: 25px !important;
    }

    /* Beyond the Classroom */
    .activities-section {
        padding-top: 35px !important;
        padding-bottom: 70px !important;
    }

    .activities-section .section-heading {
        margin-top: 0 !important;
        margin-bottom: 24px !important;
    }
}

/* =========================================================
   ACTIVITIES — REDUCE EXCESSIVE TOP GAP
   ========================================================= */

.activities-section {
    padding: 35px 0 90px !important;
}

/* Keep About → Activities spacing compact */
.about-preview {
    padding-bottom: 25px !important;
}

.activities-section {
    margin-top: 0 !important;
}

.activities-section .section-heading {
    margin-top: 0 !important;
}

/* =========================================================
   PREMIUM ACTIVITY CARDS
   ========================================================= */

.activities-section .activity-grid {
    gap: 20px !important;
}

.activities-section .activity-card {
    position: relative !important;
    min-height: 270px !important;
    padding: 28px 28px 26px !important;

    overflow: hidden !important;

    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 28px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.105),
            rgba(255,255,255,.045)
        ) !important;

    box-shadow:
        0 20px 45px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.06) !important;

    backdrop-filter: blur(16px) !important;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease !important;
}


/* Decorative glow */

.activities-section .activity-card::before {
    content: "" !important;

    position: absolute !important;

    width: 150px !important;
    height: 150px !important;

    right: -65px !important;
    top: -65px !important;

    border-radius: 50% !important;

    background: rgba(255,255,255,.055) !important;

    pointer-events: none !important;
}


/* Bottom accent */

.activities-section .activity-card::after {
    content: "" !important;

    position: absolute !important;

    left: 28px !important;
    bottom: 22px !important;

    width: 42px !important;
    height: 3px !important;

    border-radius: 99px !important;

    background: var(--pink) !important;

    opacity: .8 !important;
}


/* ICON */

.activities-section .activity-icon {
    width: 58px !important;
    height: 58px !important;

    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 18px !important;

    font-size: 20px !important;

    box-shadow:
        0 10px 25px rgba(0,0,0,.14) !important;
}


/* Different icon colors */

.activities-section .pink-icon {
    background: linear-gradient(135deg,#f28eae,#f56f9b) !important;
}

.activities-section .mint-icon {
    background: linear-gradient(135deg,#8edbc2,#68ceb0) !important;
}

.activities-section .yellow-icon {
    background: linear-gradient(135deg,#ffd978,#f6c95c) !important;
}


/* TITLE */

.activities-section .activity-card h3 {
    margin-top: 24px !important;
    margin-bottom: 0 !important;

    font-family: "Plus Jakarta Sans", sans-serif !important;

    font-size: 21px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;

    color: #ffffff !important;
}


/* DESCRIPTION */

.activities-section .activity-card p {
    margin-top: 11px !important;

    max-width: 330px !important;

    color: rgba(235,242,244,.78) !important;

    font-family: "DM Sans", sans-serif !important;

    font-size: 14px !important;
    line-height: 1.7 !important;
}


/* HOVER */

.activities-section .activity-card:hover {
    transform: translateY(-7px) !important;

    border-color: rgba(255,255,255,.20) !important;

    box-shadow:
        0 28px 55px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.activities-section .activity-card:hover::after {
    width: 65px !important;
    transition: width .3s ease !important;
}

/* =========================================================
   SIX ACTIVITY CARDS
   ========================================================= */

.activities-section .activity-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
}


/* CARD */

.activities-section .activity-card {
    min-height: 285px !important;
    padding: 28px !important;
}


/* LABEL */

.activities-section .activity-label {
    display: block !important;

    margin-top: 17px !important;

    color: var(--pink) !important;

    font-family: "DM Sans", sans-serif !important;

    font-size: 9px !important;
    font-weight: 800 !important;

    letter-spacing: 1.4px !important;
}


/* TITLE */

.activities-section .activity-card h3 {
    margin-top: 10px !important;
}


/* DESCRIPTION */

.activities-section .activity-card p {
    margin-top: 10px !important;
    max-width: 340px !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) and (min-width: 701px) {

    .activities-section .activity-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .activities-section .activity-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .activities-section .activity-card {
        min-height: 0 !important;
        padding: 24px !important;
    }

}

/* =========================================================
   FIX: GAP BETWEEN ACTIVITY CARDS & FINAL CTA
   ========================================================= */

.activities-section {
    padding-bottom: 25px !important;
}

.final-cta {
    padding-top: 20px !important;
}


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

    .activities-section {
        padding-bottom: 15px !important;
    }

    .final-cta {
        padding-top: 15px !important;
    }

}

/* =========================================================
   FIX: FINAL CTA → FOOTER GAP
   ========================================================= */

.final-cta {
    margin-bottom: 0 !important;
    padding-bottom: 20px !important;
}

.final-cta + .site-footer {
    margin-top: 0 !important;
}


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

    .final-cta {
        padding-bottom: 15px !important;
        margin-bottom: 0 !important;
    }

    .final-cta + .site-footer {
        margin-top: 0 !important;
    }

}

/* =========================================================
   SPARKLES KINDERGARTEN
   COMMON PREMIUM FOOTER
   ========================================================= */

.sparkles-footer {
    position: relative;

    width: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 5% 20%,
            rgba(236, 102, 153, 0.10),
            transparent 25%
        ),
        radial-gradient(
            circle at 96% 25%,
            rgba(126, 221, 195, 0.09),
            transparent 24%
        ),
        linear-gradient(
            135deg,
            #101923 0%,
            #071c21 48%,
            #06282b 100%
        );

    border-top: 1px solid rgba(255,255,255,.08);
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.sf-container {

    width: min(
        1180px,
        calc(100% - 70px)
    );

    margin: 0 auto;

    padding: 34px 0 28px;

    display: grid;

    grid-template-columns:
        1.15fr
        1fr
        1.1fr
        .85fr;

    column-gap: 30px;

    align-items: start;
}


/* =========================================================
   BRAND
   ========================================================= */

.sf-brand {
    min-width: 0;
}

.sf-logo-link {
    display: inline-flex;

    align-items: center;

    text-decoration: none;
}

.sf-logo {

    width: 112px;
    height: 72px;

    object-fit: contain;

    object-position: left center;

    display: block;
}


.sf-description {

    max-width: 285px;

    margin: 8px 0 0;

    color: rgba(255,255,255,.60);

    font-family: "DM Sans", sans-serif;

    font-size: 12px;

    font-weight: 400;

    line-height: 1.55;
}


.sf-values {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 11px;

    color: #8ee1cb;

    font-family: "DM Sans", sans-serif;

    font-size: 11px;

    font-weight: 700;
}

.sf-values b {
    color: rgba(255,255,255,.30);

    font-weight: 500;
}


/* =========================================================
   COLUMN
   ========================================================= */

.sf-column {
    min-width: 0;
}

.sf-title {

    margin: 0;

    color: #ffffff;

    font-family: "DM Sans", sans-serif;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.2;
}


.sf-title-line {

    width: 25px;
    height: 3px;

    margin-top: 8px;
    margin-bottom: 12px;

    border-radius: 20px;

    background: #ef6f9b;
}


/* =========================================================
   CONTACT CARDS
   ========================================================= */

.sf-contact-list {

    display: flex;

    flex-direction: column;

    gap: 7px;
}


.sf-contact-card {

    min-height: 47px;

    padding: 6px 9px;

    display: flex;

    align-items: center;

    gap: 9px;

    box-sizing: border-box;

    border-radius: 13px;

    background: rgba(255,255,255,.045);

    border: 1px solid rgba(255,255,255,.075);

    text-decoration: none;

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


.sf-contact-card:hover {

    transform: translateY(-2px);

    background: rgba(255,255,255,.075);

    border-color: rgba(142,225,203,.25);
}


.sf-contact-icon {

    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 9px;

    color: #8ee1cb;

    background: rgba(142,225,203,.10);

    font-size: 12px;
}


.sf-contact-text {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 2px;
}


.sf-contact-text small {

    color: rgba(255,255,255,.38);

    font-family: "DM Sans", sans-serif;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .7px;
}


.sf-contact-text strong {

    color: rgba(255,255,255,.76);

    font-family: "DM Sans", sans-serif;

    font-size: 11px;

    font-weight: 600;

    white-space: nowrap;
}


/* =========================================================
   MAP
   ========================================================= */

.sf-map-card {

    width: 100%;

    overflow: hidden;

    border-radius: 15px;

    background: rgba(255,255,255,.045);

    border: 1px solid rgba(255,255,255,.09);

    box-shadow:
        0 12px 30px rgba(0,0,0,.12);
}


.sf-map-visual {

    position: relative;

    height: 91px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #183237,
            #102a2e
        );
}


.sf-map-grid {

    position: absolute;

    inset: 0;

    opacity: .45;

    background-image:
        linear-gradient(
            25deg,
            transparent 44%,
            rgba(255,255,255,.18) 45%,
            rgba(255,255,255,.18) 47%,
            transparent 48%
        ),
        linear-gradient(
            165deg,
            transparent 46%,
            rgba(255,255,255,.14) 47%,
            rgba(255,255,255,.14) 49%,
            transparent 50%
        );

    transform: scale(1.25);
}


.sf-location-pin {

    position: absolute;

    top: 50%;
    left: 50%;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    color: #ffffff;

    background: #ed6b99;

    box-shadow:
        0 8px 20px rgba(237,107,153,.30);

    font-size: 17px;
}


.sf-map-content {

    min-height: 61px;

    padding: 9px 10px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    box-sizing: border-box;
}


.sf-address {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.sf-address strong {

    color: #ffffff;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;

    font-weight: 700;
}


.sf-address span {

    color: rgba(255,255,255,.46);

    font-family: "DM Sans", sans-serif;

    font-size: 8px;

    line-height: 1.35;
}


.sf-map-button {

    flex: 0 0 auto;

    padding: 8px 10px;

    display: inline-flex;

    align-items: center;

    gap: 5px;

    border-radius: 9px;

    color: #ffffff;

    background: #ed6b99;

    text-decoration: none;

    font-family: "DM Sans", sans-serif;

    font-size: 9px;

    font-weight: 700;

    white-space: nowrap;

    transition:
        transform .2s ease,
        background .2s ease;
}


.sf-map-button:hover {

    transform: translateY(-2px);

    background: #f17fa5;
}


.sf-map-button i {
    font-size: 8px;
}


/* =========================================================
   SOCIALS
   ========================================================= */

.sf-social-column {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.sf-social-text {

    margin: 0 0 13px;

    color: rgba(255,255,255,.52);

    font-family: "DM Sans", sans-serif;

    font-size: 11px;

    line-height: 1.5;
}


.sf-socials {

    display: flex;

    align-items: center;

    gap: 8px;
}


.sf-social {

    width: 36px;
    height: 36px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: rgba(255,255,255,.70);

    background: rgba(255,255,255,.045);

    border: 1px solid rgba(255,255,255,.10);

    text-decoration: none;

    font-size: 13px;

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


.sf-social:hover {

    transform: translateY(-3px);

    color: #ffffff;
}


.sf-social.instagram:hover {
    background: #e4405f;
}

.sf-social.facebook:hover {
    background: #1877f2;
}

.sf-social.youtube:hover {
    background: #ff0000;
}

.sf-social.whatsapp:hover {
    background: #25d366;
}


.sf-social-note {

    margin: 13px 0 0;

    color: rgba(255,255,255,.34);

    font-family: "DM Sans", sans-serif;

    font-size: 9px;
}


/* =========================================================
   BOTTOM COPYRIGHT
   ========================================================= */

.sf-bottom {

    width: min(
        1180px,
        calc(100% - 70px)
    );

    margin: 0 auto;

    padding: 11px 0 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    border-top: 1px solid rgba(255,255,255,.075);
}


.sf-bottom p {

    margin: 0;

    color: rgba(255,255,255,.38);

    font-family: "DM Sans", sans-serif;

    font-size: 9px;

    font-weight: 500;
}


.sf-bottom span {

    margin: 0 7px;

    color: #ed6b99;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) and (min-width: 701px) {

    .sf-container {

        width: calc(100% - 50px);

        grid-template-columns:
            1fr 1fr;

        column-gap: 28px;

        row-gap: 28px;

        padding-top: 30px;
    }

    .sf-brand {
        grid-column: 1 / -1;
    }

    .sf-social-column {
        align-items: flex-start;
    }

    .sf-bottom {
        width: calc(100% - 50px);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .sparkles-footer {

        text-align: center;
    }


    .sf-container {

        width: calc(100% - 32px);

        padding: 28px 0 22px;

        grid-template-columns: 1fr;

        gap: 23px;
    }


    .sf-brand,
    .sf-column,
    .sf-social-column {

        display: flex;

        flex-direction: column;

        align-items: center;

        text-align: center;
    }


    .sf-logo {

        width: 115px;
        height: 65px;

        object-position: center;
    }


    .sf-description {

        max-width: 310px;

        margin-top: 6px;

        text-align: center;
    }


    .sf-values {

        justify-content: center;

        margin-top: 9px;
    }


    .sf-title {

        text-align: center;
    }


    .sf-title-line {

        margin-left: auto;
        margin-right: auto;
    }


    .sf-contact-list {

        width: 100%;

        max-width: 340px;

        text-align: left;
    }


    .sf-contact-card {

        text-align: left;
    }


    .sf-map-card {

        width: 100%;

        max-width: 340px;

        text-align: left;
    }


    .sf-social-text {

        margin-bottom: 10px;
    }


    .sf-socials {

        justify-content: center;
    }


    .sf-social-note {

        margin-top: 10px;
    }


    .sf-bottom {

        width: calc(100% - 32px);

        padding: 10px 0 12px;
    }


    .sf-bottom p {

        line-height: 1.5;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    .sf-container {

        width: calc(100% - 24px);

        gap: 20px;
    }


    .sf-description {

        font-size: 11px;
    }


    .sf-map-content {

        align-items: flex-start;

        flex-direction: column;
    }


    .sf-map-button {

        align-self: center;
    }


    .sf-bottom {

        width: calc(100% - 24px);
    }

}

/* =========================================================
   FINAL FOOTER WIDTH + LOGO ADJUSTMENT
   ========================================================= */

.sparkles-footer {
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* Use more of the available screen width */
.sparkles-footer .sf-container {
    width: calc(100% - 48px) !important;
    max-width: 1400px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    column-gap: 34px !important;
}


/* Medium-size logo */
.sparkles-footer .sf-logo {
    width: 135px !important;
    height: 78px !important;

    object-fit: contain !important;
    object-position: left center !important;
}


/* Slightly wider brand area */
.sparkles-footer .sf-brand {
    min-width: 0 !important;
}


/* Give the map and socials enough room */
.sparkles-footer .sf-column {
    min-width: 0 !important;
}


/* Bottom copyright should use the same wider width */
.sparkles-footer .sf-bottom {
    width: calc(100% - 48px) !important;
    max-width: 1400px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    justify-content: center !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) and (min-width: 701px) {

    .sparkles-footer .sf-container {
        width: calc(100% - 36px) !important;
        grid-template-columns: 1fr 1fr !important;
        column-gap: 28px !important;
    }

    .sparkles-footer .sf-bottom {
        width: calc(100% - 36px) !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .sparkles-footer .sf-container {
        width: calc(100% - 28px) !important;
    }

    .sparkles-footer .sf-logo {
        width: 125px !important;
        height: 70px !important;
        object-position: center !important;
    }

    .sparkles-footer .sf-bottom {
        width: calc(100% - 28px) !important;
    }

}

/* ===== FOOTER LOGO - MEDIUM/LARGE ===== */

.sparkles-footer .sf-logo {
    width: 185px !important;
    height: 105px !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: left center !important;
}

/* Keep the logo from affecting the footer height too much */
.sparkles-footer .sf-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

@media (max-width: 700px) {
    .sparkles-footer .sf-logo {
        width: 145px !important;
        height: 82px !important;
        object-position: center !important;
    }

    .sparkles-footer .sf-brand {
        align-items: center !important;
        text-align: center !important;
    }
}

/* =========================================================
   FOOTER BRAND — ALIGN WITH OTHER COLUMNS
   ========================================================= */

.sparkles-footer .sf-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* Logo aligned with the section headings */
.sparkles-footer .sf-logo {
    width: 165px !important;
    height: 70px !important;

    object-fit: contain !important;
    object-position: left center !important;

    margin: 0 0 8px 0 !important;
    padding: 0 !important;
}

/* Intro text — bring it closer to logo */
.sparkles-footer .sf-brand p {
    margin: 0 0 12px 0 !important;
    padding: 0 !important;

    line-height: 1.45 !important;
}

/* Learn • Explore • Create • Grow */
.sparkles-footer .sf-brand .sf-values {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .sparkles-footer .sf-brand {
        align-items: center !important;
        text-align: center !important;
    }

    .sparkles-footer .sf-logo {
        width: 145px !important;
        height: 65px !important;
        object-position: center !important;
        margin-bottom: 6px !important;
    }

    .sparkles-footer .sf-brand p {
        margin-bottom: 10px !important;
    }
}


@media (max-width: 700px) {

    .sparkles-footer .sf-logo {
        width: 165px !important;
        height: 75px !important;
        object-fit: contain !important;
        object-position: center !important;
        margin-bottom: 6px !important;
    }

}

/* Reduce spacing between footer logo and intro text */
@media (max-width: 700px) {

    .sparkles-footer .sf-logo {
        margin-bottom: 0 !important;
    }

    .sparkles-footer .sf-brand p {
        margin-top: 4px !important;
    }

    .sparkles-footer .sf-brand {
        gap: 0 !important;
    }

}

/* Push Follow Us completely to the right */
@media (min-width: 701px) {

    .sparkles-footer .sf-main {
        position: relative !important;
    }

    .sparkles-footer .sf-social {
        margin-left: auto !important;
        justify-self: end !important;
        text-align: left !important;
    }

}

@media (min-width: 701px) {

    .sparkles-footer .sf-social {
        margin-left: auto !important;
        margin-right: 0 !important;
        justify-self: end !important;
    }

}

/* =========================================================
   SPARKLES PREMIUM ABOUT PAGE
   ========================================================= */

.about-page {
    background: #06171c;
    color: #f7f5f1;
    overflow: hidden;
}

.about-page * {
    box-sizing: border-box;
}

.about-page h1,
.about-page h2,
.about-page h3,
.about-page p {
    margin-top: 0;
}

.about-page p {
    color: rgba(225, 235, 235, .72);
    line-height: 1.8;
}

.about-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    color: #8fe1cf;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}


/* =========================================================
   HERO
   ========================================================= */

.about-hero {
    position: relative;
    min-height: 570px;
    padding: 125px 24px 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(239, 131, 173, .10),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 75%,
            rgba(108, 224, 193, .09),
            transparent 27%
        ),
        #06171c;
}

.about-hero-inner {
    width: min(950px, 100%);
    position: relative;
    z-index: 2;
}

.about-hero h1 {
    max-width: 900px;
    margin: 0 auto 28px;

    font-size: clamp(44px, 6vw, 78px);
    line-height: 1;
    letter-spacing: -3px;
    font-weight: 700;
}

.about-hero h1 span {
    display: block;
    color: #ef83ad;
}

.about-hero-text {
    max-width: 820px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.85;
}

.about-values {
    margin-top: 30px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    color: #91dfcf;
    font-size: 14px;
    font-weight: 700;
}

.about-values i {
    color: rgba(255,255,255,.35);
    font-style: normal;
}

.about-doodle {
    position: absolute;
    font-size: 28px;
    pointer-events: none;
}

.about-doodle-one {
    top: 25%;
    left: 9%;
    color: #f7d36e;
}

.about-doodle-two {
    right: 9%;
    bottom: 24%;
    color: #ef83ad;
}


/* =========================================================
   STORY
   ========================================================= */

.about-story-section {
    padding: 95px 7%;
    background:
        linear-gradient(
            135deg,
            rgba(239,131,173,.045),
            rgba(143,225,207,.025)
        );
}

.about-story-inner {
    max-width: 1180px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: .9fr 1.35fr;
    gap: 80px;
    align-items: start;
}

.about-story-heading h2,
.about-learning-copy h2,
.about-environment-content h2,
.about-field-heading h2,
.about-activities-heading h2,
.about-programs-heading h2 {
    margin: 0;

    font-size: clamp(36px, 4vw, 56px);
    line-height: 1.05;
    letter-spacing: -2px;
}

.about-story-heading h2 span,
.about-learning-copy h2 span,
.about-environment-content h2 span,
.about-field-heading h2 span,
.about-activities-heading h2 span,
.about-programs-heading h2 span {
    color: #ef83ad;
}

.about-story-text p {
    margin-bottom: 20px;
    font-size: 16px;
}

.about-story-stats {
    max-width: 1180px;
    margin: 55px auto 0;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.about-stat-card {
    padding: 28px 24px;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 22px;

    background: rgba(255,255,255,.045);
    backdrop-filter: blur(18px);

    text-align: center;
}

.about-stat-card strong {
    display: block;
    margin-bottom: 7px;

    font-size: 38px;
    color: #8fe1cf;
}

.about-stat-card span {
    color: rgba(255,255,255,.65);
    font-size: 13px;
}


/* =========================================================
   GLASS CARDS
   ========================================================= */

.about-learning-section {
    padding: 100px 7%;
}

.about-learning-copy {
    max-width: 780px;
    margin: 0 auto 55px;
    text-align: center;
}

.about-learning-copy p {
    margin-bottom: 15px;
}

.about-learning-grid {
    max-width: 1180px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.about-glass-card {
    padding: 32px;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        );

    backdrop-filter: blur(18px);

    transition:
        transform .3s ease,
        border-color .3s ease;
}

.about-glass-card:hover {
    transform: translateY(-5px);
    border-color: rgba(239,131,173,.35);
}

.about-icon {
    width: 58px;
    height: 58px;

    margin-bottom: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 17px;

    font-size: 21px;
    color: #101c20;
}

.about-icon.pink {
    background: #ef83ad;
}

.about-icon.mint {
    background: #8fe1cf;
}

.about-icon.yellow {
    background: #f7d36e;
}

.about-glass-card h3 {
    margin-bottom: 12px;
    font-size: 21px;
}

.about-glass-card p {
    margin: 0;
    font-size: 14px;
}


/* =========================================================
   ENVIRONMENT
   ========================================================= */

.about-environment-section {
    padding: 100px 7%;

    background:
        radial-gradient(
            circle at 80% 40%,
            rgba(143,225,207,.07),
            transparent 30%
        );
}

.about-environment-inner {
    max-width: 1180px;
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 75px;
    align-items: center;
}

.about-environment-content p {
    max-width: 650px;
}

.about-environment-features {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.about-feature {
    padding: 21px;

    display: flex;
    gap: 18px;
    align-items: center;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 20px;

    background: rgba(255,255,255,.045);
    backdrop-filter: blur(16px);
}

.about-feature-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background: rgba(143,225,207,.12);
    color: #8fe1cf;
}

.about-feature h3 {
    margin-bottom: 5px;
    font-size: 17px;
}

.about-feature p {
    margin: 0;
    font-size: 13px;
}


/* =========================================================
   FIELD VISITS
   ========================================================= */

.about-field-section {
    padding: 100px 7%;
}

.about-field-heading {
    max-width: 820px;
    margin: 0 auto 55px;
    text-align: center;
}

.about-field-heading p {
    margin-top: 25px;
}

.about-field-grid {
    max-width: 1180px;
    margin: auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.about-field-card {
    position: relative;
    min-height: 310px;
    padding: 32px;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 26px;

    background: rgba(255,255,255,.045);
    backdrop-filter: blur(18px);
}

.about-field-card::after {
    content: "";
    position: absolute;

    width: 180px;
    height: 180px;

    right: -90px;
    bottom: -90px;

    border-radius: 50%;

    background: rgba(255,255,255,.035);
}

.about-field-icon {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 25px;

    border-radius: 17px;

    font-size: 21px;
    color: #172124;
}

.field-pink .about-field-icon {
    background: #ef83ad;
}

.field-mint .about-field-icon {
    background: #8fe1cf;
}

.field-yellow .about-field-icon {
    background: #f7d36e;
}

.about-field-number {
    position: absolute;
    top: 25px;
    right: 28px;

    font-size: 12px;
    font-weight: 700;

    color: rgba(255,255,255,.30);
}

.about-field-card h3 {
    margin-bottom: 12px;
    font-size: 23px;
}

.about-field-card p {
    margin-bottom: 25px;
    font-size: 14px;
}

.field-tag {
    display: inline-block;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;

    color: #8fe1cf;
}


/* =========================================================
   ACTIVITIES
   ========================================================= */

.about-activities-section {
    padding: 100px 7%;
    background: rgba(255,255,255,.018);
}

.about-activities-heading {
    max-width: 780px;
    margin: 0 auto 55px;
    text-align: center;
}

.about-activities-heading p {
    margin-top: 24px;
}

.about-activities-grid {
    max-width: 1180px;
    margin: auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.about-activity-card {
    min-height: 285px;
    padding: 32px;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 26px;

    background: rgba(255,255,255,.045);
    backdrop-filter: blur(18px);
}

.about-activity-icon {
    width: 58px;
    height: 58px;

    margin-bottom: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 17px;

    color: #172124;
    font-size: 21px;
}

.pink-card .about-activity-icon {
    background: #ef83ad;
}

.mint-card .about-activity-icon {
    background: #8fe1cf;
}

.yellow-card .about-activity-icon {
    background: #f7d36e;
}

.about-activity-card > span {
    display: block;
    margin-bottom: 7px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;

    color: #8fe1cf;
}

.about-activity-card h3 {
    margin-bottom: 10px;
    font-size: 25px;
}

.about-activity-card p {
    margin: 0;
    font-size: 14px;
}


/* =========================================================
   PROGRAMMES
   ========================================================= */

.about-programs-section {
    padding: 100px 7%;
}

.about-programs-heading {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.about-programs-heading p {
    margin-top: 22px;
}

.about-programs-grid {
    max-width: 1000px;
    margin: auto;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.about-program-card {
    padding: 32px;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.025)
        );

    backdrop-filter: blur(18px);
}

.program-card-icon {
    width: 56px;
    height: 56px;

    margin-bottom: 23px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    color: #172124;
}

.program-card-icon.pink {
    background: #ef83ad;
}

.program-card-icon.mint {
    background: #8fe1cf;
}

.about-program-card > span {
    display: block;

    margin-bottom: 8px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;

    color: #8fe1cf;
}

.about-program-card h3 {
    margin-bottom: 10px;
    font-size: 22px;
}

.about-program-card p {
    margin: 0;
    font-size: 14px;
}


/* =========================================================
   FAMILY
   ========================================================= */

.about-family-section {
    padding: 100px 7%;
}

.about-family-card {
    position: relative;

    max-width: 1000px;
    margin: auto;

    padding: 70px;

    text-align: center;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 32px;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(239,131,173,.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(143,225,207,.09),
            transparent 30%
        ),
        rgba(255,255,255,.045);

    backdrop-filter: blur(20px);
}

.about-family-card h2 {
    margin-bottom: 24px;

    font-size: clamp(35px, 4vw, 52px);
    line-height: 1.05;
}

.about-family-card h2 span {
    color: #ef83ad;
}

.about-family-card p {
    max-width: 760px;
    margin: 0 auto 18px;
}

.about-family-values {
    margin-top: 32px;

    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.about-family-values div {
    padding: 11px 18px;

    display: flex;
    align-items: center;
    gap: 8px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;

    background: rgba(255,255,255,.045);

    color: #8fe1cf;
    font-size: 13px;
    font-weight: 600;
}


/* =========================================================
   BELIEF
   ========================================================= */

.about-belief-section {
    padding: 110px 7% 120px;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(239,131,173,.10),
            transparent 35%
        );
}

.about-belief-inner {
    max-width: 900px;
    margin: auto;
}

.about-belief-inner h2 {
    margin-bottom: 22px;

    font-size: clamp(38px, 5vw, 64px);
    line-height: 1.02;
    letter-spacing: -2px;
}

.about-belief-inner h2 span {
    color: #ef83ad;
}

.about-belief-divider {
    width: 55px;
    height: 3px;

    margin: 25px auto;

    border-radius: 10px;
    background: #ef83ad;
}

.about-belief-inner h3 {
    margin-bottom: 20px;

    font-size: 25px;
    color: #8fe1cf;
}

.about-belief-inner > p {
    max-width: 720px;
    margin: 0 auto 28px;
}

.about-final-line {
    max-width: 700px;
    margin: auto;

    font-size: 15px;
    line-height: 1.8;

    color: rgba(255,255,255,.62);
}

.about-final-line strong {
    color: #ef83ad;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .about-story-inner,
    .about-environment-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

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

    .about-learning-grid,
    .about-field-grid,
    .about-activities-grid {
        grid-template-columns: 1fr;
    }

    .about-programs-grid {
        grid-template-columns: 1fr;
    }

    .about-family-card {
        padding: 50px 30px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .about-hero {
        min-height: 500px;
        padding: 100px 22px 65px;
    }

    .about-hero h1 {
        font-size: clamp(36px, 10vw, 52px);
        letter-spacing: -1.8px;
    }

    .about-hero-text {
        font-size: 14px;
        line-height: 1.7;
    }

    .about-values {
        gap: 7px;
        font-size: 12px;
    }

    .about-story-section,
    .about-learning-section,
    .about-environment-section,
    .about-field-section,
    .about-activities-section,
    .about-programs-section,
    .about-family-section {
        padding: 65px 20px;
    }

    .about-belief-section {
        padding: 75px 20px 80px;
    }

    .about-story-heading h2,
    .about-learning-copy h2,
    .about-environment-content h2,
    .about-field-heading h2,
    .about-activities-heading h2,
    .about-programs-heading h2 {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .about-story-text p,
    .about-environment-content p,
    .about-field-heading p,
    .about-activities-heading p,
    .about-programs-heading p {
        font-size: 14px;
    }

    .about-story-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 35px;
    }

    .about-stat-card {
        padding: 22px 12px;
    }

    .about-stat-card strong {
        font-size: 30px;
    }

    .about-stat-card span {
        font-size: 11px;
    }

    .about-glass-card,
    .about-field-card,
    .about-activity-card,
    .about-program-card {
        padding: 25px;
    }

    .about-family-card {
        padding: 40px 22px;
        border-radius: 25px;
    }

    .about-family-card h2 {
        font-size: 34px;
    }

    .about-belief-inner h2 {
        font-size: 37px;
        letter-spacing: -1px;
    }

    .about-belief-inner h3 {
        font-size: 21px;
    }

    .about-final-line {
        font-size: 14px;
    }

}

/* =========================================================
   SPARKLES ABOUT PAGE — HERO → STORY SPACING
   ========================================================= */

/* Reduce the large gap between About Hero and Our Story */
main.about-page .about-hero {
    margin-bottom: 0 !important;
    padding-bottom: 38px !important;
}

main.about-page .about-story-section {
    margin-top: 0 !important;
    padding-top: 38px !important;
}


/* Keep the story content compact */
main.about-page .about-story-inner {
    margin-top: 0 !important;
}


/* Desktop */
@media (min-width: 901px) {

    main.about-page .about-hero {
        padding-bottom: 38px !important;
    }

    main.about-page .about-story-section {
        padding-top: 38px !important;
    }

}


/* Tablet */
@media (max-width: 900px) {

    main.about-page .about-hero {
        padding-bottom: 32px !important;
    }

    main.about-page .about-story-section {
        padding-top: 32px !important;
    }

}


/* Mobile */
@media (max-width: 600px) {

    main.about-page .about-hero {
        padding-bottom: 25px !important;
    }

    main.about-page .about-story-section {
        padding-top: 25px !important;
    }

}

/* =========================================================
   SPARKLES ABOUT PAGE
   FIX GAP BETWEEN STAT CARDS & OUR APPROACH
========================================================= */

main.about-page .about-story-section {
    padding-bottom: 35px !important;
}

main.about-page .about-story-stats {
    margin-bottom: 0 !important;
}

main.about-page .about-learning-section {
    padding-top: 40px !important;
}


/* ---------------------------------------------------------
   DESKTOP
--------------------------------------------------------- */

@media (min-width: 901px) {

    main.about-page .about-story-section {
        padding-bottom: 35px !important;
    }

    main.about-page .about-learning-section {
        padding-top: 40px !important;
    }

}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 900px) {

    main.about-page .about-story-section {
        padding-bottom: 30px !important;
    }

    main.about-page .about-learning-section {
        padding-top: 35px !important;
    }

}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 700px) {

    main.about-page .about-story-section {
        padding-bottom: 25px !important;
    }

    main.about-page .about-learning-section {
        padding-top: 30px !important;
    }

}

/* =========================================================
   ABOUT PAGE
   EXTRA TIGHT — LEARNING CARDS → SAFE ENVIRONMENT
========================================================= */

main.about-page .about-learning-section {
    padding-bottom: 10px !important;
    margin-bottom: 0 !important;
}

main.about-page .about-learning-grid {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

main.about-page .about-learning-grid .about-glass-card {
    margin-bottom: 0 !important;
}

main.about-page .about-environment-section {
    margin-top: 0 !important;
    padding-top: 45px !important;
}


/* Desktop */

@media (min-width: 901px) {

    main.about-page .about-learning-section {
        padding-bottom: 10px !important;
    }

    main.about-page .about-environment-section {
        padding-top: 45px !important;
    }

}


/* Tablet */

@media (max-width: 900px) {

    main.about-page .about-learning-section {
        padding-bottom: 10px !important;
    }

    main.about-page .about-environment-section {
        padding-top: 40px !important;
    }

}


/* Mobile */

@media (max-width: 700px) {

    main.about-page .about-learning-section {
        padding-bottom: 8px !important;
    }

    main.about-page .about-environment-section {
        padding-top: 35px !important;
    }

}

/* =========================================================
   SPARKLES KINDERGARTEN — ABOUT PAGE
   FINAL COMPLETE SECTION SPACING FIX
   =========================================================
   
   This controls the spacing between ALL major About sections.
   Keep this block at the VERY END of style.css.
========================================================= */


/* =========================================================
   01. HERO → OUR STORY
========================================================= */

main.about-page .about-hero {
    margin-bottom: 0 !important;
    padding-bottom: 38px !important;
}

main.about-page .about-story-section {
    margin-top: 0 !important;
    padding-top: 38px !important;
}


/* =========================================================
   02. OUR STORY → STAT CARDS
========================================================= */

main.about-page .about-story-section {
    padding-bottom: 35px !important;
}

main.about-page .about-story-stats {
    margin-bottom: 0 !important;
}


/* =========================================================
   03. STAT CARDS → OUR APPROACH
========================================================= */

main.about-page .about-learning-section {
    margin-top: 0 !important;
    padding-top: 40px !important;
}


/* =========================================================
   04. OUR APPROACH → THREE LEARNING CARDS
========================================================= */

main.about-page .about-learning-copy {
    margin-bottom: 28px !important;
}

main.about-page .about-learning-grid {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}


/* =========================================================
   05. LEARNING CARDS → SAFE ENVIRONMENT
========================================================= */

main.about-page .about-learning-section {
    padding-bottom: 10px !important;
}

main.about-page .about-environment-section {
    margin-top: 0 !important;
    padding-top: 40px !important;
}


/* =========================================================
   06. SAFE ENVIRONMENT → REAL WORLD LEARNING
========================================================= */

main.about-page .about-environment-section {
    padding-bottom: 35px !important;
}

main.about-page .about-field-section {
    margin-top: 0 !important;
    padding-top: 40px !important;
}


/* =========================================================
   07. REAL WORLD LEARNING CARDS → ACTIVITIES
========================================================= */

main.about-page .about-field-section {
    padding-bottom: 35px !important;
}

main.about-page .about-activities-section {
    margin-top: 0 !important;
    padding-top: 40px !important;
}


/* =========================================================
   08. ACTIVITIES CARDS → PROGRAMMES
========================================================= */

main.about-page .about-activities-section {
    padding-bottom: 35px !important;
}

main.about-page .about-programs-section {
    margin-top: 0 !important;
    padding-top: 40px !important;
}


/* =========================================================
   09. PROGRAMMES CARDS → SCHOOL FAMILY
========================================================= */

main.about-page .about-programs-section {
    padding-bottom: 35px !important;
}

main.about-page .about-family-section {
    margin-top: 0 !important;
    padding-top: 40px !important;
}


/* =========================================================
   10. SCHOOL FAMILY → OUR BELIEF
========================================================= */

main.about-page .about-family-section {
    padding-bottom: 35px !important;
}

main.about-page .about-belief-section {
    margin-top: 0 !important;
    padding-top: 45px !important;
}


/* =========================================================
   11. OUR BELIEF → FOOTER
========================================================= */

main.about-page .about-belief-section {
    padding-bottom: 40px !important;
}

main.about-page + .premium-footer,
body:has(main.about-page) .premium-footer {
    margin-top: 0 !important;
}


/* =========================================================
   REMOVE UNWANTED SECTION MARGINS
========================================================= */

main.about-page > section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* =========================================================
   PREVENT CHILD ELEMENTS FROM CREATING EXTRA GAPS
========================================================= */

main.about-page .about-story-stats,
main.about-page .about-learning-grid,
main.about-page .about-field-grid,
main.about-page .about-activities-grid,
main.about-page .about-programs-grid {
    margin-bottom: 0 !important;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 901px) {

    /* Hero → Story */
    main.about-page .about-hero {
        padding-bottom: 38px !important;
    }

    main.about-page .about-story-section {
        padding-top: 38px !important;
        padding-bottom: 35px !important;
    }


    /* Story → Approach */
    main.about-page .about-learning-section {
        padding-top: 40px !important;
        padding-bottom: 10px !important;
    }


    /* Approach → Environment */
    main.about-page .about-environment-section {
        padding-top: 40px !important;
        padding-bottom: 35px !important;
    }


    /* Environment → Field */
    main.about-page .about-field-section {
        padding-top: 40px !important;
        padding-bottom: 35px !important;
    }


    /* Field → Activities */
    main.about-page .about-activities-section {
        padding-top: 40px !important;
        padding-bottom: 35px !important;
    }


    /* Activities → Programmes */
    main.about-page .about-programs-section {
        padding-top: 40px !important;
        padding-bottom: 35px !important;
    }


    /* Programmes → Family */
    main.about-page .about-family-section {
        padding-top: 40px !important;
        padding-bottom: 35px !important;
    }


    /* Family → Belief */
    main.about-page .about-belief-section {
        padding-top: 45px !important;
        padding-bottom: 40px !important;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 701px) and (max-width: 900px) {

    main.about-page .about-hero {
        padding-bottom: 32px !important;
    }

    main.about-page .about-story-section {
        padding-top: 32px !important;
        padding-bottom: 30px !important;
    }

    main.about-page .about-learning-section {
        padding-top: 35px !important;
        padding-bottom: 10px !important;
    }

    main.about-page .about-environment-section {
        padding-top: 35px !important;
        padding-bottom: 30px !important;
    }

    main.about-page .about-field-section {
        padding-top: 35px !important;
        padding-bottom: 30px !important;
    }

    main.about-page .about-activities-section {
        padding-top: 35px !important;
        padding-bottom: 30px !important;
    }

    main.about-page .about-programs-section {
        padding-top: 35px !important;
        padding-bottom: 30px !important;
    }

    main.about-page .about-family-section {
        padding-top: 35px !important;
        padding-bottom: 30px !important;
    }

    main.about-page .about-belief-section {
        padding-top: 40px !important;
        padding-bottom: 35px !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    main.about-page .about-hero {
        padding-bottom: 25px !important;
    }

    main.about-page .about-story-section {
        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }

    main.about-page .about-learning-section {
        padding-top: 30px !important;
        padding-bottom: 8px !important;
    }

    main.about-page .about-environment-section {
        padding-top: 30px !important;
        padding-bottom: 25px !important;
    }

    main.about-page .about-field-section {
        padding-top: 30px !important;
        padding-bottom: 25px !important;
    }

    main.about-page .about-activities-section {
        padding-top: 30px !important;
        padding-bottom: 25px !important;
    }

    main.about-page .about-programs-section {
        padding-top: 30px !important;
        padding-bottom: 25px !important;
    }

    main.about-page .about-family-section {
        padding-top: 30px !important;
        padding-bottom: 25px !important;
    }

    main.about-page .about-belief-section {
        padding-top: 35px !important;
        padding-bottom: 30px !important;
    }

}

/* ============================================================
   SPARKLES KINDERGARTEN
   SERVICES PAGE — PREMIUM REDESIGN
   ============================================================ */


/* ============================================================
   PAGE FOUNDATION
   ============================================================ */

body.services-page,
body:has(.services-premium-page) {

    scroll-behavior: smooth;
}

.services-premium-page {

    --sp-dark: #07191d;
    --sp-dark-2: #0c2428;
    --sp-dark-3: #102d31;

    --sp-pink: #ef83ad;
    --sp-pink-light: #ffb4cf;

    --sp-mint: #8fe1cf;
    --sp-yellow: #f4d778;
    --sp-peach: #f4a27f;
    --sp-purple: #b79bf4;
    --sp-blue: #8fb9f4;

    --sp-white: #fffaf7;
    --sp-text: #dce7e5;
    --sp-muted: #93a9aa;

    width: 100%;
    overflow: hidden;
    background: var(--sp-dark);
    color: var(--sp-white);
}


/* ============================================================
   COMMON
   ============================================================ */

.services-premium-page * {
    box-sizing: border-box;
}

.services-premium-page section {
    position: relative;
    width: 100%;
}

.services-premium-page a {
    text-decoration: none;
}

.services-premium-page img {
    display: block;
    max-width: 100%;
}


/* ============================================================
   EYEBROW
   ============================================================ */

.services-premium-page .sp-eyebrow {

    display: inline-flex;
    align-items: center;

    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;
    line-height: 1;

    color: var(--sp-mint);
}


/* ============================================================
   BUTTONS
   ============================================================ */

.services-premium-page .sp-btn {

    min-height: 54px;
    padding: 0 23px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    border-radius: 999px;

    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 700;

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

.services-premium-page .sp-btn:hover {
    transform: translateY(-2px);
}

.services-premium-page .sp-btn-primary {

    background: var(--sp-pink);
    color: #182124;

    box-shadow:
        0 14px 32px rgba(239,131,173,.18);
}

.services-premium-page .sp-btn-primary:hover {
    box-shadow:
        0 18px 38px rgba(239,131,173,.28);
}

.services-premium-page .sp-btn-outline {

    border: 1px solid rgba(255,255,255,.16);

    background: rgba(255,255,255,.045);

    color: var(--sp-white);

    backdrop-filter: blur(10px);
}

.services-premium-page .sp-btn-outline:hover {
    background: rgba(255,255,255,.08);
}


/* ============================================================
   HERO
   ============================================================ */

.services-premium-page .sp-hero {

    min-height: 720px;

    padding:
        90px
        max(6%, calc((100vw - 1220px) / 2))
        100px;

    display: flex;
    align-items: center;

    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(239,131,173,.12),
            transparent 27%
        ),
        radial-gradient(
            circle at 90% 70%,
            rgba(143,225,207,.10),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #07191d 0%,
            #0a2024 55%,
            #0c292c 100%
        );
}

.services-premium-page .sp-hero-inner {

    width: min(1220px,100%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.03fr .97fr;

    gap: 75px;

    align-items: center;
}

.services-premium-page .sp-hero-content {
    max-width: 650px;
}

.services-premium-page .sp-hero h1 {

    margin: 22px 0 24px;

    font-family: "Plus Jakarta Sans",
                 "DM Sans",
                 sans-serif;

    font-size: clamp(48px,5.5vw,76px);

    font-weight: 800;

    line-height: 1.02;

    letter-spacing: -3.8px;

    color: var(--sp-white);
}

.services-premium-page .sp-hero h1 span {
    display: block;
    color: var(--sp-pink);
}

.services-premium-page .sp-hero-content > p {

    max-width: 590px;

    margin: 0;

    font-family: "DM Sans", sans-serif;

    font-size: 17px;
    line-height: 1.75;

    color: var(--sp-muted);
}

.services-premium-page .sp-hero-actions {

    margin-top: 34px;

    display: flex;
    flex-wrap: wrap;

    gap: 12px;
}

.services-premium-page .sp-hero-values {

    margin-top: 30px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 13px;

    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 700;

    letter-spacing: .5px;

    color: #a9c1c0;
}

.services-premium-page .sp-hero-values i {

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--sp-pink);
}


/* ============================================================
   HERO VISUAL
   ============================================================ */

.services-premium-page .sp-hero-visual {

    position: relative;

    min-height: 480px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.services-premium-page .sp-hero-panel {

    position: relative;
    z-index: 2;

    width: min(490px,100%);

    padding: 28px;

    border:
        1px solid rgba(255,255,255,.11);

    border-radius: 34px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        );

    box-shadow:
        0 35px 80px rgba(0,0,0,.25);

    backdrop-filter: blur(18px);
}

.services-premium-page .sp-hero-panel-top {

    padding-bottom: 19px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom:
        1px solid rgba(255,255,255,.08);

    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.7px;

    color: #8ea6a6;
}

.services-premium-page .sp-hero-panel-top strong {

    font-size: 12px;

    color: var(--sp-pink);
}

.services-premium-page .sp-hero-panel-main {

    padding: 34px 0;

    display: flex;
    align-items: center;

    gap: 25px;
}

.services-premium-page .sp-hero-circle {

    width: 118px;
    height: 118px;

    flex: 0 0 118px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ffb3cc,
            #ef83ad 55%,
            #a64f77 100%
        );

    box-shadow:
        0 20px 45px rgba(239,131,173,.22);
}

.services-premium-page .sp-hero-circle i {

    font-size: 45px;

    color: #fffaf7;
}

.services-premium-page .sp-hero-panel-main > div:last-child span {

    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.6px;

    color: var(--sp-mint);
}

.services-premium-page .sp-hero-panel-main h2 {

    margin: 8px 0 8px;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: 29px;
    line-height: 1.1;

    letter-spacing: -1.2px;

    color: var(--sp-white);
}

.services-premium-page .sp-hero-panel-main p {

    margin: 0;

    font-family: "DM Sans", sans-serif;

    font-size: 13px;
    line-height: 1.6;

    color: var(--sp-muted);
}

.services-premium-page .sp-hero-mini-grid {

    display: grid;
    grid-template-columns: repeat(4,1fr);

    gap: 9px;
}

.services-premium-page .sp-hero-mini-grid div {

    min-height: 82px;

    padding: 14px 9px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius: 17px;

    background:
        rgba(255,255,255,.035);
}

.services-premium-page .sp-hero-mini-grid i {

    font-size: 17px;

    color: var(--sp-mint);
}

.services-premium-page .sp-hero-mini-grid span {

    font-family: "DM Sans", sans-serif;

    font-size: 10px;
    font-weight: 700;

    color: #a6b9b9;
}

.services-premium-page .sp-hero-star {

    position: absolute;

    font-size: 28px;

    color: var(--sp-yellow);

    opacity: .7;
}

.services-premium-page .star-one {
    top: 7%;
    right: 5%;
}

.services-premium-page .star-two {
    bottom: 8%;
    left: 5%;

    color: var(--sp-pink);
}


/* ============================================================
   PROGRAMMES
   ============================================================ */

.services-premium-page .sp-programmes {

    padding:
        105px
        max(6%, calc((100vw - 1220px) / 2))
        115px;

    background: #fdf9f7;

    color: #1d3032;
}

.services-premium-page .sp-section-head {

    width: min(1220px,100%);

    margin: 0 auto 48px;

    display: grid;

    grid-template-columns: 1fr 430px;

    gap: 70px;

    align-items: end;
}

.services-premium-page .sp-section-head h2 {

    margin: 17px 0 0;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: clamp(39px,4.4vw,58px);

    font-weight: 800;

    line-height: 1.04;

    letter-spacing: -2.7px;

    color: #172c2e;
}

.services-premium-page .sp-section-head h2 span {
    display: block;
    color: #e56f9d;
}

.services-premium-page .sp-section-head > p {

    margin: 0;

    font-family: "DM Sans", sans-serif;

    font-size: 15px;
    line-height: 1.75;

    color: #708183;
}


/* ============================================================
   PROGRAMME GRID
   ============================================================ */

.services-premium-page .sp-programme-grid {

    width: min(1220px,100%);
    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap: 18px;
}

.services-premium-page .sp-programme-card {

    position: relative;

    min-height: 440px;

    padding: 29px 27px 25px;

    display: flex;
    flex-direction: column;

    border:
        1px solid rgba(26,55,57,.09);

    border-radius: 28px;

    background: #ffffff;

    box-shadow:
        0 15px 45px rgba(25,50,52,.055);

    overflow: hidden;

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

.services-premium-page .sp-programme-card:hover {

    transform: translateY(-7px);

    box-shadow:
        0 24px 55px rgba(25,50,52,.11);
}

.services-premium-page .sp-programme-card::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 3px;

    opacity: .8;
}

.services-premium-page .sp-card-pink::after {
    background: var(--sp-pink);
}

.services-premium-page .sp-card-mint::after {
    background: var(--sp-mint);
}

.services-premium-page .sp-card-yellow::after {
    background: var(--sp-yellow);
}

.services-premium-page .sp-card-peach::after {
    background: var(--sp-peach);
}

.services-premium-page .sp-card-top {

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.services-premium-page .sp-card-number {

    font-family: "DM Sans", sans-serif;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.3px;

    color: #9aa9aa;
}

.services-premium-page .sp-card-icon {

    width: 53px;
    height: 53px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    font-size: 21px;
}

.services-premium-page .sp-card-pink .sp-card-icon {
    background: #ffe8f0;
    color: #e76e9c;
}

.services-premium-page .sp-card-mint .sp-card-icon {
    background: #e1f6f1;
    color: #4eb8a4;
}

.services-premium-page .sp-card-yellow .sp-card-icon {
    background: #fff3ca;
    color: #c39b27;
}

.services-premium-page .sp-card-peach .sp-card-icon {
    background: #ffeadf;
    color: #df8059;
}

.services-premium-page .sp-card-label {

    margin-top: 27px;

    font-family: "DM Sans", sans-serif;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.5px;

    color: #9aabab;
}

.services-premium-page .sp-programme-card h3 {

    margin: 10px 0 12px;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: 28px;
    line-height: 1.1;

    letter-spacing: -1.2px;

    color: #203537;
}

.services-premium-page .sp-programme-card > p {

    margin: 0;

    font-family: "DM Sans", sans-serif;

    font-size: 13.5px;
    line-height: 1.65;

    color: #6d7f80;
}

.services-premium-page .sp-programme-card ul {

    margin: 25px 0 0;
    padding: 0;

    list-style: none;

    display: grid;
    gap: 11px;
}

.services-premium-page .sp-programme-card li {

    display: flex;
    align-items: center;

    gap: 9px;

    font-family: "DM Sans", sans-serif;

    font-size: 12px;
    font-weight: 600;

    color: #506365;
}

.services-premium-page .sp-programme-card li i {

    font-size: 10px;

    color: #5bb9a6;
}

.services-premium-page .sp-card-link {

    margin-top: auto;
    padding-top: 27px;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    font-family: "DM Sans", sans-serif;

    font-size: 12px;
    font-weight: 800;

    color: #263b3d;
}

.services-premium-page .sp-card-link i {
    transition: transform .2s ease;
}

.services-premium-page .sp-card-link:hover i {
    transform: translateX(4px);
}


/* ============================================================
   AFTER SCHOOL
   ============================================================ */

.services-premium-page .sp-after-school {

    padding:
        115px
        max(6%, calc((100vw - 1220px) / 2));

    background:
        radial-gradient(
            circle at 10% 30%,
            rgba(239,131,173,.09),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #07191d,
            #0c2529 65%,
            #0e2b2e
        );
}

.services-premium-page .sp-after-inner {

    width: min(1220px,100%);
    margin: 0 auto;

    padding: 60px;

    display: grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(430px,.95fr);

    gap: 75px;

    align-items: center;

    border:
        1px solid rgba(255,255,255,.11);

    border-radius: 38px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(239,131,173,.12),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #15292d,
            #10282c
        );

    box-shadow:
        0 35px 85px rgba(0,0,0,.25);
}

.services-premium-page .sp-featured-label {

    display: inline-flex;
    align-items: center;

    gap: 9px;

    padding: 10px 15px;

    border:
        1px solid rgba(239,131,173,.28);

    border-radius: 999px;

    background:
        rgba(239,131,173,.08);

    font-family: "DM Sans", sans-serif;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.4px;

    color: #ffabc8;
}

.services-premium-page .sp-featured-label i {
    font-size: 11px;
}

.services-premium-page .sp-after-eyebrow {

    display: block;

    margin-top: 25px;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2px;

    color: var(--sp-mint);
}

.services-premium-page .sp-after-content h2 {

    margin: 17px 0 21px;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: clamp(42px,4.5vw,62px);

    font-weight: 800;

    line-height: 1.03;

    letter-spacing: -3px;

    color: var(--sp-white);
}

.services-premium-page .sp-after-content h2 span {

    display: block;

    color: var(--sp-pink);
}

.services-premium-page .sp-after-description {

    max-width: 600px;

    margin: 0;

    font-family: "DM Sans", sans-serif;

    font-size: 16px;
    line-height: 1.7;

    color: #a9bcbc;
}

.services-premium-page .sp-after-note {

    max-width: 600px;

    margin-top: 25px;
    padding: 17px 19px;

    display: flex;
    align-items: flex-start;

    gap: 12px;

    border-left:
        3px solid var(--sp-mint);

    border-radius: 0 16px 16px 0;

    background:
        rgba(143,225,207,.065);
}

.services-premium-page .sp-after-note i {

    margin-top: 2px;

    font-size: 17px;

    color: var(--sp-pink);
}

.services-premium-page .sp-after-note p {

    margin: 0;

    font-family: "DM Sans", sans-serif;

    font-size: 13px;
    line-height: 1.6;
    font-weight: 700;

    color: #c0d7d4;
}

.services-premium-page .sp-after-button {

    margin-top: 28px;

    min-height: 54px;

    padding: 0 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 11px;

    border-radius: 999px;

    background: var(--sp-pink);

    color: #172325;

    font-family: "DM Sans", sans-serif;

    font-size: 13px;
    font-weight: 800;

    box-shadow:
        0 15px 30px rgba(239,131,173,.15);

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

.services-premium-page .sp-after-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 20px 40px rgba(239,131,173,.25);
}


/* ============================================================
   AFTER SCHOOL BENEFITS
   ============================================================ */

.services-premium-page .sp-after-benefits {

    width: 100%;

    padding: 27px;

    border:
        1px solid rgba(255,255,255,.09);

    border-radius: 27px;

    background:
        rgba(255,255,255,.035);

    backdrop-filter: blur(15px);
}

.services-premium-page .sp-benefits-heading span {

    font-family: "DM Sans", sans-serif;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.6px;

    color: #879d9d;
}

.services-premium-page .sp-benefits-heading div {

    height: 1px;

    margin-top: 17px;

    background:
        rgba(255,255,255,.08);
}

.services-premium-page .sp-benefit-list {

    margin-top: 18px;

    display: flex;
    flex-direction: column;

    gap: 12px;
}

.services-premium-page .sp-benefit {

    position: relative;

    min-height: 91px;

    padding: 17px 45px 17px 17px;

    display: flex;
    align-items: center;

    gap: 15px;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius: 18px;

    background:
        rgba(255,255,255,.035);
}

.services-premium-page .sp-benefit-icon {

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background:
        rgba(143,225,207,.12);

    color: var(--sp-mint);

    font-size: 18px;
}

.services-premium-page .sp-benefit-text {
    min-width: 0;
}

.services-premium-page .sp-benefit-text strong {

    display: block;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: 14px;
    line-height: 1.3;

    color: #f4f8f7;
}

.services-premium-page .sp-benefit-text p {

    margin: 5px 0 0;

    font-family: "DM Sans", sans-serif;

    font-size: 11.5px;
    line-height: 1.45;

    color: #849a9b;
}

.services-premium-page .sp-benefit-number {

    position: absolute;

    top: 12px;
    right: 14px;

    font-family: "DM Sans", sans-serif;

    font-size: 9px;
    font-weight: 800;

    color: #52696a;
}


/* ============================================================
   DIFFERENCE
   ============================================================ */

.services-premium-page .sp-difference {

    padding:
        110px
        max(6%, calc((100vw - 1220px) / 2))
        120px;

    background: #f7f3f1;

    color: #203436;
}

.services-premium-page .sp-centered-head {

    display: block;

    text-align: center;

    max-width: 750px;

    margin-left: auto;
    margin-right: auto;
}

.services-premium-page .sp-centered-head > p {

    max-width: 650px;

    margin:
        22px auto 0;
}

.services-premium-page .sp-difference-grid {

    width: min(1220px,100%);
    margin: 50px auto 0;

    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap: 17px;
}

.services-premium-page .sp-difference-card {

    position: relative;

    min-height: 245px;

    padding: 28px;

    border:
        1px solid rgba(30,54,56,.08);

    border-radius: 25px;

    background: #fff;

    box-shadow:
        0 12px 35px rgba(28,50,52,.04);

    overflow: hidden;

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

.services-premium-page .sp-difference-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 20px 45px rgba(28,50,52,.08);
}

.services-premium-page .sp-difference-icon {

    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    font-size: 20px;
}

.services-premium-page .sp-icon-pink {
    background: #ffe8f0;
    color: #df709a;
}

.services-premium-page .sp-icon-mint {
    background: #e1f6f1;
    color: #4fae9c;
}

.services-premium-page .sp-icon-yellow {
    background: #fff2c8;
    color: #b69226;
}

.services-premium-page .sp-icon-purple {
    background: #eee7ff;
    color: #8666cf;
}

.services-premium-page .sp-icon-orange {
    background: #ffeadf;
    color: #d77b52;
}

.services-premium-page .sp-icon-blue {
    background: #e6efff;
    color: #608ac7;
}

.services-premium-page .sp-difference-number {

    position: absolute;

    top: 28px;
    right: 28px;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;
    font-weight: 800;

    color: #b0bbbb;
}

.services-premium-page .sp-difference-card h3 {

    margin: 25px 0 9px;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: 18px;
    line-height: 1.25;

    color: #263b3d;
}

.services-premium-page .sp-difference-card p {

    margin: 0;

    font-family: "DM Sans", sans-serif;

    font-size: 13px;
    line-height: 1.65;

    color: #718081;
}


/* ============================================================
   FACILITIES
   ============================================================ */

.services-premium-page .sp-facilities {

    padding:
        110px
        max(6%, calc((100vw - 1220px) / 2))
        120px;

    background: #fffaf8;

    color: #203436;
}

.services-premium-page .sp-facility-grid {

    width: min(1220px,100%);
    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap: 18px;
}

.services-premium-page .sp-facility-card {

    overflow: hidden;

    border:
        1px solid rgba(30,54,56,.08);

    border-radius: 26px;

    background: #fff;

    box-shadow:
        0 15px 40px rgba(28,50,52,.055);
}

.services-premium-page .sp-facility-image {

    position: relative;

    height: 235px;

    overflow: hidden;
}

.services-premium-page .sp-facility-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .45s ease;
}

.services-premium-page .sp-facility-card:hover
.sp-facility-image img {

    transform: scale(1.045);
}

.services-premium-page .sp-facility-image span {

    position: absolute;

    top: 14px;
    right: 14px;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(7,25,29,.75);

    color: #fff;

    font-family: "DM Sans", sans-serif;

    font-size: 9px;
    font-weight: 800;
}

.services-premium-page .sp-facility-content {

    padding: 23px 23px 26px;
}

.services-premium-page .sp-facility-icon {

    width: 43px;
    height: 43px;

    margin-bottom: 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: #e8f6f2;

    color: #4cad9a;

    font-size: 17px;
}

.services-premium-page .sp-facility-content h3 {

    margin: 0 0 8px;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: 18px;
    line-height: 1.25;

    color: #263b3d;
}

.services-premium-page .sp-facility-content p {

    margin: 0;

    font-family: "DM Sans", sans-serif;

    font-size: 12.5px;
    line-height: 1.65;

    color: #718081;
}


/* ============================================================
   ACTIVITIES
   ============================================================ */

.services-premium-page .sp-activities {

    padding:
        110px
        max(6%, calc((100vw - 1220px) / 2))
        120px;

    background: #f6f3f1;

    color: #203436;
}

.services-premium-page .sp-activities-grid {

    width: min(1220px,100%);
    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap: 18px;
}

.services-premium-page .sp-event-card {

    min-height: 265px;

    padding: 30px;

    border:
        1px solid rgba(30,54,56,.07);

    border-radius: 27px;

    background: #fff;

    box-shadow:
        0 13px 35px rgba(28,50,52,.04);

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

.services-premium-page .sp-event-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 20px 45px rgba(28,50,52,.08);
}

.services-premium-page .sp-event-icon {

    width: 52px;
    height: 52px;

    margin-bottom: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    font-size: 20px;
}

.services-premium-page .sp-event-card > span {

    display: block;

    margin-bottom: 8px;

    font-family: "DM Sans", sans-serif;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.4px;

    color: #9aa8a9;
}

.services-premium-page .sp-event-card h3 {

    margin: 0 0 10px;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: 20px;

    color: #263b3d;
}

.services-premium-page .sp-event-card p {

    margin: 0;

    font-family: "DM Sans", sans-serif;

    font-size: 13px;
    line-height: 1.65;

    color: #718081;
}

.services-premium-page .sp-event-onam
.sp-event-icon {
    background: #e1f6f1;
    color: #4fae9c;
}

.services-premium-page .sp-event-christmas
.sp-event-icon {
    background: #ffe8f0;
    color: #df709a;
}

.services-premium-page .sp-event-independence
.sp-event-icon {
    background: #e6efff;
    color: #608ac7;
}

.services-premium-page .sp-event-annual
.sp-event-icon {
    background: #fff2c8;
    color: #b69226;
}

.services-premium-page .sp-event-tour
.sp-event-icon {
    background: #ffeadf;
    color: #d77b52;
}

.services-premium-page .sp-event-games
.sp-event-icon {
    background: #eee7ff;
    color: #8666cf;
}


/* ============================================================
   FINAL CTA
   ============================================================ */

.services-premium-page .sp-final {

    padding:
        105px
        max(6%, calc((100vw - 1220px) / 2))
        115px;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(239,131,173,.10),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #07191d,
            #0b2529
        );

    text-align: center;
}

.services-premium-page .sp-final-inner {

    width: min(850px,100%);
    margin: 0 auto;

    position: relative;
    z-index: 2;
}

.services-premium-page .sp-final h2 {

    margin: 19px 0 18px;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: clamp(40px,5vw,60px);

    line-height: 1.04;

    letter-spacing: -2.7px;

    color: var(--sp-white);
}

.services-premium-page .sp-final h2 span {
    display: block;
    color: var(--sp-pink);
}

.services-premium-page .sp-final p {

    max-width: 580px;

    margin: 0 auto;

    font-family: "DM Sans", sans-serif;

    font-size: 15px;
    line-height: 1.7;

    color: #9db1b1;
}

.services-premium-page .sp-final-actions {

    margin-top: 30px;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 12px;
}

.services-premium-page .sp-final-glow {

    position: absolute;

    width: 320px;
    height: 320px;

    top: 50%;
    left: 50%;

    transform: translate(-50%,-50%);

    border-radius: 50%;

    background:
        rgba(239,131,173,.055);

    filter: blur(35px);

    pointer-events: none;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1050px) {

    .services-premium-page .sp-hero {
        padding:
            80px 35px 90px;
    }

    .services-premium-page .sp-hero-inner {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .services-premium-page .sp-hero-content {
        max-width: 760px;
    }

    .services-premium-page .sp-hero-visual {
        min-height: 420px;
    }

    .services-premium-page .sp-programmes,
    .services-premium-page .sp-after-school,
    .services-premium-page .sp-difference,
    .services-premium-page .sp-facilities,
    .services-premium-page .sp-activities,
    .services-premium-page .sp-final {
        padding-left: 35px;
        padding-right: 35px;
    }

    .services-premium-page .sp-programme-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .services-premium-page .sp-facility-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .services-premium-page .sp-after-inner {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .services-premium-page .sp-difference-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .services-premium-page .sp-hero {

        min-height: auto;

        padding:
            55px 20px 70px;
    }

    .services-premium-page .sp-hero-inner {
        gap: 45px;
    }

    .services-premium-page .sp-hero h1 {

        margin-top: 17px;

        font-size: 43px;

        letter-spacing: -2.3px;
    }

    .services-premium-page .sp-hero-content > p {

        font-size: 14px;
        line-height: 1.7;
    }

    .services-premium-page .sp-hero-actions {

        width: 100%;

        flex-direction: column;

        align-items: stretch;
    }

    .services-premium-page .sp-btn {
        width: 100%;
    }

    .services-premium-page .sp-hero-values {
        justify-content: center;
    }

    .services-premium-page .sp-hero-visual {

        min-height: auto;
    }

    .services-premium-page .sp-hero-panel {

        width: 100%;

        padding: 20px;

        border-radius: 26px;
    }

    .services-premium-page .sp-hero-panel-main {

        padding: 25px 0;

        gap: 17px;
    }

    .services-premium-page .sp-hero-circle {

        width: 83px;
        height: 83px;

        flex: 0 0 83px;
    }

    .services-premium-page .sp-hero-circle i {
        font-size: 31px;
    }

    .services-premium-page .sp-hero-panel-main h2 {
        font-size: 22px;
    }

    .services-premium-page .sp-hero-panel-main p {
        font-size: 11px;
    }

    .services-premium-page .sp-hero-mini-grid {
        grid-template-columns: repeat(2,1fr);
    }


    /* PROGRAMMES */

    .services-premium-page .sp-programmes,
    .services-premium-page .sp-after-school,
    .services-premium-page .sp-difference,
    .services-premium-page .sp-facilities,
    .services-premium-page .sp-activities,
    .services-premium-page .sp-final {

        padding-left: 20px;
        padding-right: 20px;
    }

    .services-premium-page .sp-programmes {
        padding-top: 75px;
        padding-bottom: 80px;
    }

    .services-premium-page .sp-section-head {

        display: block;

        margin-bottom: 35px;
    }

    .services-premium-page .sp-section-head h2 {

        margin-top: 14px;

        font-size: 38px;

        letter-spacing: -1.8px;
    }

    .services-premium-page .sp-section-head > p {

        margin-top: 18px;

        font-size: 14px;
    }

    .services-premium-page .sp-programme-grid {

        grid-template-columns: 1fr;

        gap: 15px;
    }

    .services-premium-page .sp-programme-card {

        min-height: 0;

        padding: 27px 23px 25px;

        border-radius: 24px;
    }

    .services-premium-page .sp-programme-card h3 {
        font-size: 27px;
    }


    /* AFTER SCHOOL */

    .services-premium-page .sp-after-school {

        padding-top: 80px;
        padding-bottom: 80px;
    }

    .services-premium-page .sp-after-inner {

        width: 100%;

        padding: 27px 21px 25px;

        display: flex;
        flex-direction: column;

        gap: 35px;

        border-radius: 28px;
    }

    .services-premium-page .sp-after-content h2 {

        margin-top: 15px;

        font-size: 39px;

        letter-spacing: -1.9px;
    }

    .services-premium-page .sp-after-description {

        font-size: 14px;
    }

    .services-premium-page .sp-after-note {
        padding: 15px;
    }

    .services-premium-page .sp-after-note p {
        font-size: 12px;
    }

    .services-premium-page .sp-after-button {

        width: 100%;

        padding-left: 15px;
        padding-right: 15px;

        text-align: center;
    }


    /* BENEFITS */

    .services-premium-page .sp-after-benefits {

        width: 100%;

        padding: 19px;

        border-radius: 22px;
    }

    .services-premium-page .sp-benefit-list {

        gap: 11px;
    }

    .services-premium-page .sp-benefit {

        width: 100%;

        min-height: 82px;

        padding:
            14px
            35px
            14px
            14px;

        gap: 12px;

        border-radius: 16px;
    }

    .services-premium-page .sp-benefit-icon {

        width: 43px;
        height: 43px;

        flex: 0 0 43px;

        border-radius: 12px;
    }

    .services-premium-page .sp-benefit-text strong {
        font-size: 13px;
    }

    .services-premium-page .sp-benefit-text p {
        font-size: 11px;
    }


    /* DIFFERENCE */

    .services-premium-page .sp-difference {

        padding-top: 80px;
        padding-bottom: 85px;
    }

    .services-premium-page .sp-centered-head {
        text-align: left;
    }

    .services-premium-page .sp-centered-head > p {
        margin-left: 0;
        margin-right: 0;
    }

    .services-premium-page .sp-difference-grid {

        grid-template-columns: 1fr;

        gap: 14px;

        margin-top: 35px;
    }

    .services-premium-page .sp-difference-card {

        min-height: 0;

        padding: 24px;

        border-radius: 22px;
    }


    /* FACILITIES */

    .services-premium-page .sp-facilities {

        padding-top: 80px;
        padding-bottom: 85px;
    }

    .services-premium-page .sp-facility-grid {

        grid-template-columns: 1fr;

        gap: 15px;
    }

    .services-premium-page .sp-facility-card {
        border-radius: 23px;
    }

    .services-premium-page .sp-facility-image {
        height: 225px;
    }


    /* ACTIVITIES */

    .services-premium-page .sp-activities {

        padding-top: 80px;
        padding-bottom: 85px;
    }

    .services-premium-page .sp-activities-grid {

        grid-template-columns: 1fr;

        gap: 14px;
    }

    .services-premium-page .sp-event-card {

        min-height: 0;

        padding: 25px;

        border-radius: 22px;
    }


    /* FINAL CTA */

    .services-premium-page .sp-final {

        padding-top: 80px;
        padding-bottom: 85px;
    }

    .services-premium-page .sp-final h2 {

        font-size: 39px;

        letter-spacing: -1.8px;
    }

    .services-premium-page .sp-final p {
        font-size: 14px;
    }

    .services-premium-page .sp-final-actions {

        flex-direction: column;

        align-items: stretch;
    }

}


/* ============================================================
   SMALL PHONES
   ============================================================ */

@media (max-width: 390px) {

    .services-premium-page .sp-hero h1 {
        font-size: 39px;
    }

    .services-premium-page .sp-section-head h2 {
        font-size: 35px;
    }

    .services-premium-page .sp-after-content h2 {
        font-size: 36px;
    }

    .services-premium-page .sp-final h2 {
        font-size: 36px;
    }

    .services-premium-page .sp-hero-panel-main {
        align-items: flex-start;
    }

    .services-premium-page .sp-hero-circle {
        width: 72px;
        height: 72px;
        flex: 0 0 72px;
    }

    .services-premium-page .sp-hero-circle i {
        font-size: 27px;
    }

}

/* ============================================================
   SPARKLES SERVICES — SINGLE DARK PREMIUM THEME
   ============================================================ */

.services-premium-page {
    background: #07191d !important;
    color: #f8f7f4 !important;
}


/* ============================================================
   PROGRAMMES
   ============================================================ */

.services-premium-page .sp-programmes {
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(239,131,173,.055),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #07191d 0%,
            #091c20 100%
        ) !important;

    color: #f8f7f4 !important;
}

.services-premium-page .sp-section-head h2 {
    color: #fffaf7 !important;
}

.services-premium-page .sp-section-head h2 span {
    color: #ef83ad !important;
}

.services-premium-page .sp-section-head > p {
    color: #93a9aa !important;
}


/* ============================================================
   PROGRAMME CARDS
   ============================================================ */

.services-premium-page .sp-programme-card {
    border: 1px solid rgba(255,255,255,.08) !important;

    background:
        linear-gradient(
            145deg,
            #11272b 0%,
            #0d2226 100%
        ) !important;

    box-shadow:
        0 20px 55px rgba(0,0,0,.20) !important;

    color: #f8f7f4 !important;
}

.services-premium-page .sp-programme-card:hover {
    box-shadow:
        0 26px 65px rgba(0,0,0,.28) !important;
}

.services-premium-page .sp-card-number {
    color: #657b7c !important;
}

.services-premium-page .sp-card-label {
    color: #83999a !important;
}

.services-premium-page .sp-programme-card h3 {
    color: #fffaf7 !important;
}

.services-premium-page .sp-programme-card > p {
    color: #9bafb0 !important;
}

.services-premium-page .sp-programme-card li {
    color: #b5c5c5 !important;
}

.services-premium-page .sp-card-link {
    color: #fffaf7 !important;
}


/* ============================================================
   AFTER SCHOOL
   ============================================================ */

.services-premium-page .sp-after-school {
    background:
        radial-gradient(
            circle at 10% 30%,
            rgba(239,131,173,.08),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #07191d,
            #0c2529 65%,
            #0e2b2e
        ) !important;
}


/* ============================================================
   SPARKLES DIFFERENCE
   ============================================================ */

.services-premium-page .sp-difference {
    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(143,225,207,.055),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #091c20 0%,
            #07191d 100%
        ) !important;

    color: #f8f7f4 !important;
}

.services-premium-page .sp-difference-card {
    border: 1px solid rgba(255,255,255,.075) !important;

    background:
        linear-gradient(
            145deg,
            #11272b,
            #0d2226
        ) !important;

    box-shadow:
        0 18px 50px rgba(0,0,0,.20) !important;
}

.services-premium-page .sp-difference-number {
    color: #52696a !important;
}

.services-premium-page .sp-difference-card h3 {
    color: #fffaf7 !important;
}

.services-premium-page .sp-difference-card p {
    color: #93a9aa !important;
}


/* ============================================================
   FACILITIES
   ============================================================ */

.services-premium-page .sp-facilities {
    background:
        linear-gradient(
            180deg,
            #07191d 0%,
            #091d21 100%
        ) !important;

    color: #f8f7f4 !important;
}

.services-premium-page .sp-facility-card {
    border: 1px solid rgba(255,255,255,.075) !important;

    background:
        linear-gradient(
            145deg,
            #11272b,
            #0d2226
        ) !important;

    box-shadow:
        0 18px 50px rgba(0,0,0,.20) !important;
}

.services-premium-page .sp-facility-content h3 {
    color: #fffaf7 !important;
}

.services-premium-page .sp-facility-content p {
    color: #93a9aa !important;
}


/* ============================================================
   ACTIVITIES
   ============================================================ */

.services-premium-page .sp-activities {
    background:
        radial-gradient(
            circle at 8% 20%,
            rgba(239,131,173,.05),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #091d21 0%,
            #07191d 100%
        ) !important;

    color: #f8f7f4 !important;
}

.services-premium-page .sp-event-card {
    border: 1px solid rgba(255,255,255,.075) !important;

    background:
        linear-gradient(
            145deg,
            #11272b,
            #0d2226
        ) !important;

    box-shadow:
        0 18px 50px rgba(0,0,0,.20) !important;
}

.services-premium-page .sp-event-card > span {
    color: #809697 !important;
}

.services-premium-page .sp-event-card h3 {
    color: #fffaf7 !important;
}

.services-premium-page .sp-event-card p {
    color: #93a9aa !important;
}


/* ============================================================
   FINAL CTA
   ============================================================ */

.services-premium-page .sp-final {
    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(239,131,173,.10),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #07191d,
            #0b2529
        ) !important;
}


/* ============================================================
   MOBILE — KEEP SAME DARK THEME
   ============================================================ */

@media (max-width: 700px) {

    .services-premium-page .sp-programmes,
    .services-premium-page .sp-difference,
    .services-premium-page .sp-facilities,
    .services-premium-page .sp-activities {
        background:
            linear-gradient(
                180deg,
                #07191d,
                #091d21
            ) !important;
    }

}

/* ============================================================
   SERVICES — SPACE BELOW NAVBAR
   ============================================================ */

.services-premium-page .sp-hero {
    padding-top: 125px !important;
}

.services-premium-page .sp-programmes {
    padding-top: 45px !important;
}

/* ============================================================
   SERVICES — PROGRAMMES TO AFTER-SCHOOL SPACING
   ============================================================ */

.services-premium-page .sp-after-school {
    padding-top: 45px !important;
}

/* ============================================================
   SERVICES — REDUCE SPACE BELOW PROGRAMME CARDS
   ============================================================ */

.services-premium-page .sp-programmes {
    padding-bottom: 55px !important;
}

/* Reduce space below After-School section */
.services-premium-page .sp-after-school {
    padding-bottom: 45px !important;
}

/* Keep the next section close to the After-School section */
.services-premium-page .sp-difference {
    padding-top: 55px !important;
}

/* ============================================================
   SERVICES — ACTIVITIES TO FACILITIES SPACING
   ============================================================ */

.services-premium-page .sp-activities {
    padding-bottom: 45px !important;
}

.services-premium-page .sp-facilities {
    padding-top: 55px !important;
}

/* ============================================================
   SERVICES — TIGHTER ACTIVITIES → FACILITIES GAP
   ============================================================ */

.services-premium-page .sp-activities {
    padding-bottom: 10px !important;
}

.services-premium-page .sp-facilities {
    padding-top: 5px !important;
}

/* ============================================================
   SERVICES — FACILITIES TO ACTIVITIES SPACING
   ============================================================ */

.services-premium-page .sp-facilities {
    padding-bottom: 20px !important;
}

.services-premium-page .sp-activities {
    padding-top: 35px !important;
}

/* ============================================================
   SERVICES — FINAL CTA SECTION SPACING
   ============================================================ */

.services-premium-page .sp-final {
    padding-top: 70px !important;
    padding-bottom: 65px !important;
}

/* ============================================================
   SERVICES — PROGRAMME CARD HEADER ALIGNMENT
   ============================================================ */

.services-premium-page .sp-programme-card {
    display: grid !important;

    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
        "label label"
        "title icon"
        "description description"
        "features features"
        "link link" !important;

    align-content: start !important;
}

/* Remove the 01 / 02 / 03 / 04 numbers */
.services-premium-page .sp-programme-card .sp-card-number {
    display: none !important;
}

/* Small category label */
.services-premium-page .sp-programme-card .sp-card-label {
    grid-area: label !important;
    margin: 0 0 10px !important;
}

/* Programme heading */
.services-premium-page .sp-programme-card h3 {
    grid-area: title !important;

    align-self: center !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* Icon beside the heading */
.services-premium-page .sp-programme-card .sp-card-icon {
    grid-area: icon !important;

    position: static !important;

    width: 58px !important;
    height: 58px !important;

    margin: 0 0 0 18px !important;

    align-self: center !important;
    justify-self: end !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 16px !important;
}

/* Description */
.services-premium-page .sp-programme-card > p {
    grid-area: description !important;

    margin-top: 18px !important;
}

/* Feature list */
.services-premium-page .sp-programme-card ul {
    grid-area: features !important;

    margin-top: 22px !important;
}

/* Enquire link */
.services-premium-page .sp-programme-card .sp-card-link {
    grid-area: link !important;

    margin-top: 28px !important;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .services-premium-page .sp-programme-card {
        grid-template-columns: minmax(0, 1fr) auto !important;

        grid-template-areas:
            "label label"
            "title icon"
            "description description"
            "features features"
            "link link" !important;
    }

    .services-premium-page .sp-programme-card .sp-card-icon {
        width: 52px !important;
        height: 52px !important;
        margin-left: 12px !important;
        border-radius: 14px !important;
    }

    .services-premium-page .sp-programme-card h3 {
        font-size: 28px !important;
        line-height: 1.05 !important;
    }

    .services-premium-page .sp-programme-card > p {
        margin-top: 16px !important;
    }
}

/* ============================================================
   SERVICES — PROGRAMME CARDS
   DESKTOP HEIGHT ADJUSTMENT
   ============================================================ */

@media (min-width: 951px) {

    .services-premium-page .sp-programme-card {
        height: 380px !important;
        min-height: 0 !important;
        align-self: start !important;
        box-sizing: border-box !important;
    }

}

/* ============================================================
   SERVICES — CENTRE ALIGN ENQUIRE NOW
   ============================================================ */

@media (min-width: 951px) {

    .services-premium-page .sp-programme-card .sp-card-link {
        width: 100% !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin-top: 28px !important;
        text-align: center !important;
    }

}

/* ============================================================
   SERVICES — PROGRAMME ENQUIRE BUTTON
   ============================================================ */

@media (min-width: 951px) {

    .services-premium-page .sp-programme-card .sp-card-link {
        width: fit-content !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;

        margin: 5px auto 0 !important;
        padding: 12px 20px !important;

        border: 1px solid rgba(143, 225, 207, 0.22) !important;
        border-radius: 999px !important;

        background: rgba(143, 225, 207, 0.08) !important;

        color: #f8f7f4 !important;
        text-decoration: none !important;

        transition:
            background 0.25s ease,
            border-color 0.25s ease,
            transform 0.25s ease !important;
    }

    .services-premium-page .sp-programme-card .sp-card-link:hover {
        background: rgba(239, 131, 173, 0.14) !important;
        border-color: rgba(239, 131, 173, 0.35) !important;
        transform: translateY(-2px) !important;
    }

}

.services-premium-page .sp-programme-card .sp-card-link {
    margin: 20px auto 0 !important;
}

/* ============================================================
   SERVICES — DAYCARE ICON
   ============================================================ */

.services-premium-page .sp-programme-card:first-child .sp-card-icon::before {
    content: "\f004" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 24px !important;
    color: #ef83ad !important;
    display: block !important;
    line-height: 1 !important;
}

/* ============================================================
   SERVICES — AFTER-SCHOOL WHATSAPP BUTTON
   ============================================================ */

.services-premium-page .after-school-button {
    width: fit-content !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    margin: 28px 0 0 !important;
    padding: 14px 22px !important;

    border: 1px solid rgba(239, 131, 173, 0.35) !important;
    border-radius: 999px !important;

    background: #ef83ad !important;
    color: #17282c !important;

    font-family: "DM Sans", sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    text-decoration: none !important;

    box-shadow: 0 10px 28px rgba(239, 131, 173, 0.16) !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease !important;
}

.services-premium-page .after-school-button i {
    font-size: 13px !important;
    line-height: 1 !important;
}

.services-premium-page .after-school-button:hover {
    background: #f396b7 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 32px rgba(239, 131, 173, 0.24) !important;
}

/* ============================================================
   SERVICES — SPARKLES DIFFERENCE CARDS
   ICON + HEADING ALIGNMENT
   ============================================================ */

@media (min-width: 951px) {

    .services-premium-page .sp-difference-card {
        min-height: 0 !important;
        height: 265px !important;
        padding: 30px !important;

        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto 1fr !important;
        grid-template-areas:
            "title icon"
            "text text" !important;

        align-content: start !important;
    }

    .services-premium-page .sp-difference-card .sp-difference-icon {
        grid-area: icon !important;

        width: 56px !important;
        height: 56px !important;

        margin: 0 !important;

        align-self: start !important;
        justify-self: end !important;
    }

    .services-premium-page .sp-difference-card h3 {
        grid-area: title !important;

        margin: 0 !important;
        padding: 0 !important;

        align-self: center !important;
        padding-right: 20px !important;
    }

    .services-premium-page .sp-difference-card p {
        grid-area: text !important;

        margin: 22px 0 0 !important;
        max-width: 100% !important;
    }

}

@media (min-width: 951px) {

    .services-premium-page .sp-difference-card {
        height: 205px !important;
        min-height: 0 !important;
        padding: 28px 30px !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "title icon"
            "text text" !important;

        align-content: start !important;
        box-sizing: border-box !important;
    }

    .services-premium-page .sp-difference-card .sp-difference-icon {
        grid-area: icon !important;

        width: 56px !important;
        height: 56px !important;

        margin: 0 !important;
        align-self: start !important;
        justify-self: end !important;
    }

    .services-premium-page .sp-difference-card h3 {
        grid-area: title !important;

        margin: 0 !important;
        padding: 0 20px 0 0 !important;

        align-self: center !important;
    }

    .services-premium-page .sp-difference-card p {
        grid-area: text !important;

        margin: 18px 0 0 !important;
        max-width: 100% !important;
    }

}

/* ============================================================
   SERVICES — MOBILE DIFFERENCE CARDS
   ICON + HEADING ON SAME ROW
   ============================================================ */

@media (max-width: 700px) {

    .services-premium-page .sp-difference-card {
        display: grid !important;

        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "title icon"
            "text text" !important;

        align-content: start !important;
        min-height: 0 !important;
        height: auto !important;

        padding: 22px 20px !important;
    }

    .services-premium-page .sp-difference-card .sp-difference-icon {
        grid-area: icon !important;

        width: 52px !important;
        height: 52px !important;

        margin: 0 !important;

        align-self: center !important;
        justify-self: end !important;
    }

    .services-premium-page .sp-difference-card h3 {
        grid-area: title !important;

        margin: 0 !important;
        padding: 0 12px 0 0 !important;

        align-self: center !important;
    }

    .services-premium-page .sp-difference-card p {
        grid-area: text !important;

        margin: 16px 0 0 !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   SERVICES DIFFERENCE CARDS
   ============================================================ */

.services-difference-grid {
    width: min(1180px, calc(100% - 40px));
    margin: 55px auto 0;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 20px;
}


.services-difference-card {
    position: relative;

    min-height: 245px;
    padding: 28px 30px 30px;

    display: flex;
    flex-direction: column;

    border: 1px solid rgba(143, 225, 207, 0.13);
    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(22, 48, 52, 0.92),
            rgba(12, 35, 39, 0.96)
        );

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.16);

    overflow: hidden;

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


.services-difference-card::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 3px;

    background: #ef83ad;

    opacity: 0.9;
}


.services-difference-card:nth-child(2)::after {
    background: #8fe1cf;
}

.services-difference-card:nth-child(3)::after {
    background: #f4cf68;
}

.services-difference-card:nth-child(4)::after {
    background: #f3a47f;
}

.services-difference-card:nth-child(5)::after {
    background: #b9a6ee;
}

.services-difference-card:nth-child(6)::after {
    background: #91b8e8;
}


.services-difference-card:hover {
    transform: translateY(-5px);

    border-color: rgba(143, 225, 207, 0.28);

    box-shadow:
        0 24px 55px rgba(0, 0, 0, 0.23);
}


/* Card top */

.services-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

    margin-bottom: 24px;
}


/* Icon */

.services-card-icon {
    width: 56px;
    height: 56px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    flex-shrink: 0;

    font-size: 21px;
}


.services-icon-pink {
    background: #fde7ef;
    color: #e96f9d;
}

.services-icon-mint {
    background: #e2f5f1;
    color: #4ebba9;
}

.services-icon-yellow {
    background: #fff2c9;
    color: #c69d22;
}

.services-icon-peach {
    background: #ffeadf;
    color: #e37e5b;
}

.services-icon-lavender {
    background: #eee8ff;
    color: #8267ce;
}

.services-icon-blue {
    background: #e5efff;
    color: #5d8fd3;
}


/* Content */

.services-card-content {
    flex: 1;
}


.services-card-content h3 {
    margin: 0 0 13px;

    color: #fffaf7;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 20px;
    font-weight: 700;

    line-height: 1.25;

    letter-spacing: -0.4px;
}


.services-card-content p {
    margin: 0;

    max-width: 430px;

    color: #8fb9c0;

    font-family: "DM Sans", sans-serif;

    font-size: 14.5px;
    font-weight: 400;

    line-height: 1.7;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 950px) {

    .services-difference-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 18px;

        margin-top: 45px;
    }

    .services-difference-card {
        min-height: 235px;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 650px) {

    .services-difference-grid {
        width: calc(100% - 32px);

        grid-template-columns: 1fr;

        gap: 16px;

        margin-top: 35px;
    }


    .services-difference-card {
        min-height: auto;

        padding: 24px 22px 27px;

        border-radius: 21px;
    }


    .services-card-top {
        margin-bottom: 19px;
    }


    .services-card-icon {
        width: 52px;
        height: 52px;

        border-radius: 14px;

        font-size: 19px;
    }


    .services-card-content h3 {
        font-size: 18px;

        margin-bottom: 10px;
    }


    .services-card-content p {
        font-size: 14px;

        line-height: 1.65;
    }
}

/* ============================================================
   SERVICES DIFFERENCE CARDS
   ICON + HEADING ON SAME ROW
   ============================================================ */

.services-difference-card .services-card-top {
    position: absolute;
    top: 28px;
    right: 30px;

    margin: 0 !important;
    padding: 0 !important;
}

.services-difference-card .services-card-content {
    padding-top: 0 !important;
}

.services-difference-card .services-card-content h3 {
    min-height: 56px;

    margin: 0 78px 14px 0 !important;

    display: flex;
    align-items: center;
}


/* Keep the text comfortably below the heading */

.services-difference-card .services-card-content p {
    margin-top: 0 !important;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 650px) {

    .services-difference-card {
        position: relative;
    }

    .services-difference-card .services-card-top {
        top: 24px;
        right: 22px;
    }

    .services-difference-card .services-card-content h3 {
        min-height: 52px;

        margin-right: 68px !important;
        margin-bottom: 12px !important;

        font-size: 18px;
        line-height: 1.25;
    }

    .services-difference-card .services-card-icon {
        width: 52px;
        height: 52px;
    }
}

/* ============================================================
   SPACE AFTER SERVICES DIFFERENCE CARDS
   ============================================================ */

.services-difference-grid {
    margin-bottom: 110px !important;
}


/* Keep a comfortable gap on tablet */
@media (max-width: 950px) {
    .services-difference-grid {
        margin-bottom: 85px !important;
    }
}


/* Mobile */
@media (max-width: 650px) {
    .services-difference-grid {
        margin-bottom: 60px !important;
    }
}

/* =========================================================
   SERVICES — BEYOND THE CLASSROOM / ACTIVITIES CARDS
   ========================================================= */

.services-activities-grid {
    width: min(1100px, calc(100% - 40px));
    margin: 0 auto;
    padding: 0 0 65px;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;

    box-sizing: border-box;
}


/* Individual card */
.services-activity-card {
    position: relative;
    min-width: 0;

    padding: 30px 30px 28px;

    display: flex;
    flex-direction: column;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(23, 45, 49, 0.96),
            rgba(13, 35, 39, 0.98)
        );

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.12);

    overflow: hidden;

    box-sizing: border-box;

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


/* Small coloured bottom accent */
.services-activity-card::after {
    content: "";
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 3px;

    background: #ef83ad;
    opacity: 0.9;
}


/* Different accent colours */
.services-activity-card:nth-child(2)::after {
    background: #8fe1cf;
}

.services-activity-card:nth-child(3)::after {
    background: #f7d36e;
}

.services-activity-card:nth-child(4)::after {
    background: #8fb9ed;
}

.services-activity-card:nth-child(5)::after {
    background: #f2a67f;
}

.services-activity-card:nth-child(6)::after {
    background: #b8a4ee;
}


/* Hover */
.services-activity-card:hover {
    transform: translateY(-4px);

    border-color: rgba(143, 225, 207, 0.24);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   ICON
   ========================================================= */

.services-activity-icon {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border-radius: 16px;

    font-size: 22px;
}


.services-activity-icon i {
    line-height: 1;
}


/* Icon colours */

.services-icon-mint {
    background: #dff5ef;
    color: #48bda8;
}

.services-icon-pink {
    background: #ffe5ef;
    color: #e86f9f;
}

.services-icon-peach {
    background: #ffebe1;
    color: #e58b63;
}

.services-icon-blue {
    background: #e4efff;
    color: #6696d5;
}

.services-icon-yellow {
    background: #fff1c9;
    color: #c99b25;
}

.services-icon-lavender {
    background: #eee8ff;
    color: #8b70d0;
}


/* =========================================================
   CONTENT
   ========================================================= */

.services-activity-content {
    min-width: 0;
}


.services-activity-content > span {
    display: block;

    margin-bottom: 9px;

    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 1.3;

    color: #8fe1cf;
}


.services-activity-content h3 {
    margin: 0 0 12px;

    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;

    color: #fffaf7;
}


.services-activity-content p {
    margin: 0;

    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;

    color: #9cc3c9;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 701px) and (max-width: 1000px) {

    .services-activities-grid {
        width: min(760px, calc(100% - 40px));

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 18px;

        padding-bottom: 55px;
    }

    .services-activity-card {
        padding: 26px 25px 25px;
    }

    .services-activity-content h3 {
        font-size: 20px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .services-activities-grid {
        width: calc(100% - 32px);

        grid-template-columns: 1fr;

        gap: 15px;

        padding: 0 0 40px;
    }


    .services-activity-card {
        padding: 23px 21px 25px;

        border-radius: 21px;

        transform: none !important;
    }


    .services-activity-icon {
        width: 52px;
        height: 52px;

        flex-basis: 52px;

        margin-bottom: 16px;

        border-radius: 14px;

        font-size: 20px;
    }


    .services-activity-content > span {
        font-size: 9px;
        margin-bottom: 7px;
    }


    .services-activity-content h3 {
        margin-bottom: 9px;

        font-size: 19px;
        line-height: 1.25;
    }


    .services-activity-content p {
        font-size: 13.5px;
        line-height: 1.65;
    }
}

/* Activity cards — icon and heading on the same row */
.services-activity-card {
    position: relative;
}

.services-activity-card .services-activity-icon {
    position: absolute;
    top: 32px;
    right: 32px;
    width: 64px;
    height: 64px;
    margin: 0 !important;
}

.services-activity-card .services-activity-content {
    padding-top: 0 !important;
}

.services-activity-card .services-activity-content > span {
    display: block;
    margin: 0 80px 8px 0 !important;
}

.services-activity-card .services-activity-content h3 {
    margin: 0 80px 12px 0 !important;
}

/* Keep description below the heading */
.services-activity-card .services-activity-content p {
    margin-top: 0 !important;
}

/* =========================================
   ACTIVITY CARDS — ICON + HEADING ALIGNMENT
   ========================================= */

.services-activity-card {
    position: relative;
    padding: 32px !important;
    box-sizing: border-box;
}

/* Icon */
.services-activity-card .services-activity-icon {
    position: absolute;
    top: 32px;
    right: 32px;

    width: 64px;
    height: 64px;

    margin: 0 !important;
    flex-shrink: 0;
}

/* Content */
.services-activity-card .services-activity-content {
    padding: 0 !important;
    margin: 0 !important;
}

/* Small category text */
.services-activity-card .services-activity-content > span {
    display: block;
    margin: 0 82px 8px 0 !important;
}

/* Heading */
.services-activity-card .services-activity-content h3 {
    margin: 0 82px 14px 0 !important;
    padding: 0 !important;
    line-height: 1.15 !important;
}

/* Description */
.services-activity-card .services-activity-content p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.65 !important;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 700px) {

    .services-activity-card {
        padding: 26px 22px !important;
    }

    .services-activity-card .services-activity-icon {
        top: 26px;
        right: 22px;

        width: 58px;
        height: 58px;
    }

    .services-activity-card .services-activity-content > span {
        margin: 0 72px 7px 0 !important;
    }

    .services-activity-card .services-activity-content h3 {
        margin: 0 72px 14px 0 !important;
        font-size: 21px !important;
        line-height: 1.15 !important;
    }

    .services-activity-card .services-activity-content p {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }
}

/* Remove icons from all 6 activity cards */
.services-activity-card .services-activity-icon {
    display: none !important;
}

/* Give the content the full card width */
.services-activity-card .services-activity-content > span,
.services-activity-card .services-activity-content h3 {
    margin-right: 0 !important;
}

/* =========================================
   ACTIVITY CARDS — COMPACT HEIGHT
   ========================================= */

.services-activity-card {
    min-height: 0 !important;
    height: auto !important;
    padding: 32px !important;
    box-sizing: border-box;
}

/* Content uses the full card width */
.services-activity-card .services-activity-content {
    padding: 0 !important;
    margin: 0 !important;
}

/* Category */
.services-activity-card .services-activity-content > span {
    display: block;
    margin: 0 0 10px !important;
}

/* Heading */
.services-activity-card .services-activity-content h3 {
    margin: 0 0 14px !important;
    line-height: 1.15 !important;
}

/* Description */
.services-activity-card .services-activity-content p {
    margin: 0 !important;
    line-height: 1.65 !important;
}

/* Remove any old fixed heights */
.services-activity-card,
.services-activity-card > div,
.services-activity-content {
    max-height: none !important;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 700px) {

    .services-activity-card {
        min-height: 0 !important;
        height: auto !important;
        padding: 26px 22px !important;
    }

    .services-activity-card .services-activity-content h3 {
        margin-bottom: 12px !important;
    }

    .services-activity-card .services-activity-content p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
}

/* =========================================
   SERVICES PAGE — REMOVE ALL TILT / ANGLE
   ========================================= */

body.services-page,
body.services-page main,
body.services-page .services-premium-page,
body.services-page section,
body.services-page .services-container,
body.services-page .services-section,
body.services-page .services-activities-section {
    transform: none !important;
    rotate: none !important;
    skew: none !important;
}

/* Keep the page perfectly straight */
body.services-page {
    overflow-x: hidden !important;
}

body.services-page main {
    width: 100% !important;
    margin: 0 !important;
}

/* Remove angled clipping from major sections */
body.services-page section {
    clip-path: none !important;
}

/* Remove any negative/positive rotation applied to
   decorative section wrappers */
body.services-page .services-hero,
body.services-page .services-programs,
body.services-page .after-school-section,
body.services-page .services-difference,
body.services-page .services-facilities,
body.services-page .services-activities-section,
body.services-page .services-cta {
    transform: none !important;
    rotate: none !important;
    skew: none !important;
}

/* Remove angled pseudo-element overlays */
body.services-page section::before,
body.services-page section::after {
    transform-origin: center !important;
}

/* =========================================================
   SPARKLES KINDERGARTEN
   GALLERY PAGE
   ========================================================= */

.gallery-page {
    background: #07191e !important;
    color: #f8f7f4;
    overflow-x: hidden !important;
}


/* =========================================================
   HERO
   ========================================================= */

.gallery-page .gallery-hero {
    width: 100%;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(239,131,173,0.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 30%,
            rgba(143,225,207,0.10),
            transparent 28%
        ),
        #07191e;

    padding: 95px 20px 70px;
    text-align: center;

    position: relative;
    overflow: hidden;
}


.gallery-page .gallery-hero-content {
    width: min(850px, 100%);
    margin: 0 auto;
}


.gallery-page .gallery-eyebrow {
    display: inline-block;

    margin-bottom: 18px;

    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;

    color: #8fe1cf;
}


.gallery-page .gallery-hero h1 {
    margin: 0;

    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(42px, 6vw, 76px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -3px;

    color: #fffaf7;
}


.gallery-page .gallery-hero h1 span {
    display: block;
    color: #ef83ad;
}


.gallery-page .gallery-hero p {
    width: min(650px, 100%);

    margin: 25px auto 0;

    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    line-height: 1.8;

    color: #91c8d2;
}


.gallery-page .gallery-values {
    margin-top: 25px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;

    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 700;

    color: #d8efeb;
}


.gallery-page .gallery-values b {
    color: #ef83ad;
}



/* =========================================================
   MAIN GALLERY AREA
   ========================================================= */

.gallery-page .gallery-main {
    width: min(1250px, calc(100% - 40px));

    margin: 0 auto;

    padding: 75px 0 90px;
}


.gallery-page .gallery-section-heading {
    max-width: 700px;

    margin: 0 auto 50px;

    text-align: center;
}


.gallery-page .gallery-section-heading > span {
    display: block;

    margin-bottom: 13px;

    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;

    color: #8fe1cf;
}


.gallery-page .gallery-section-heading h2 {
    margin: 0;

    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(35px, 5vw, 58px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -2.5px;

    color: #fffaf7;
}


.gallery-page .gallery-section-heading h2 strong {
    color: #ef83ad;
}


.gallery-page .gallery-section-heading p {
    max-width: 620px;

    margin: 18px auto 0;

    font-family: "DM Sans", sans-serif;
    font-size: 15px;
    line-height: 1.75;

    color: #8fc5ce;
}



/* =========================================================
   GALLERY GRID
   ========================================================= */

/*
   IMPORTANT:
   This is a CSS-column masonry layout.

   It allows portrait and landscape images to retain
   their natural proportions.
*/

.gallery-page .sparkles-gallery {

    width: 100%;

    column-count: 4;
    column-gap: 18px;

    /* Reset possible old grid/flex rules */
    display: block !important;

    column-fill: balance;
}


/* =========================================================
   INDIVIDUAL IMAGE
   ========================================================= */

.gallery-page .sparkles-gallery-item {

    width: 100% !important;

    display: block !important;

    margin: 0 0 18px !important;

    padding: 0 !important;

    break-inside: avoid !important;
    page-break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;

    position: relative;

    overflow: hidden !important;

    border-radius: 20px;

    border: 1px solid rgba(255,255,255,0.09);

    background: #10282c;

    box-shadow:
        0 12px 35px rgba(0,0,0,0.20);

    /* Kill possible old dimensions */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    box-sizing: border-box;
}


/* =========================================================
   ACTUAL IMAGE
   ========================================================= */

.gallery-page .sparkles-gallery-item img {

    display: block !important;

    width: 100% !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: 100% !important;
    max-height: none !important;

    object-fit: contain !important;
    object-position: center center !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none;

    background: #10282c;

    vertical-align: middle;

    transition:
        transform 0.45s ease,
        filter 0.45s ease;
}


/* Hover */

.gallery-page .sparkles-gallery-item:hover img {

    transform: scale(1.025);

    filter: brightness(1.04);
}



/* =========================================================
   REMOVE ANY OLD OVERLAY / PSEUDO ELEMENT
   ========================================================= */

.gallery-page .sparkles-gallery-item::before,
.gallery-page .sparkles-gallery-item::after {

    display: none !important;

    content: none !important;
}



/* =========================================================
   CTA
   ========================================================= */

.gallery-page .gallery-cta {

    width: min(1180px, calc(100% - 40px));

    margin: 0 auto 80px;

    padding: 65px 30px;

    border-radius: 30px;

    text-align: center;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(239,131,173,0.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(143,225,207,0.14),
            transparent 30%
        ),
        #10282c;

    border: 1px solid rgba(255,255,255,0.08);
}


.gallery-page .gallery-cta-content {
    max-width: 700px;
    margin: 0 auto;
}


.gallery-page .gallery-cta span {
    display: block;

    margin-bottom: 12px;

    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;

    color: #8fe1cf;
}


.gallery-page .gallery-cta h2 {
    margin: 0;

    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(35px, 5vw, 58px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -2.5px;

    color: #fffaf7;
}


.gallery-page .gallery-cta h2 strong {
    color: #ef83ad;
}


.gallery-page .gallery-cta p {
    margin: 18px auto 28px;

    max-width: 560px;

    font-family: "DM Sans", sans-serif;
    font-size: 15px;
    line-height: 1.7;

    color: #91c8d2;
}


.gallery-page .gallery-cta a {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 14px 22px;

    border-radius: 999px;

    background: #ef83ad;
    color: #17282c;

    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    transition: 0.3s ease;
}


.gallery-page .gallery-cta a:hover {

    transform: translateY(-2px);

    background: #f7a1bf;
}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .gallery-page .sparkles-gallery {
        column-count: 3;
        column-gap: 16px;
    }

    .gallery-page .sparkles-gallery-item {
        margin-bottom: 16px !important;
    }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .gallery-page .gallery-hero {
        padding: 65px 18px 50px;
    }


    .gallery-page .gallery-hero h1 {
        font-size: 42px;
        letter-spacing: -1.8px;
    }


    .gallery-page .gallery-hero p {
        font-size: 14px;
        line-height: 1.7;
    }


    .gallery-page .gallery-values {
        gap: 8px;
        font-size: 12px;
    }


    .gallery-page .gallery-main {
        width: calc(100% - 24px);
        padding: 50px 0 60px;
    }


    .gallery-page .gallery-section-heading {
        margin-bottom: 35px;
    }


    .gallery-page .gallery-section-heading h2 {
        font-size: 36px;
        letter-spacing: -1.5px;
    }


    .gallery-page .gallery-section-heading p {
        font-size: 14px;
    }


    /* Two columns on mobile */
    .gallery-page .sparkles-gallery {

        column-count: 2;
        column-gap: 10px;

    }


    .gallery-page .sparkles-gallery-item {

        margin-bottom: 10px !important;

        border-radius: 13px;

    }


    .gallery-page .gallery-cta {

        width: calc(100% - 24px);

        margin-bottom: 50px;

        padding: 45px 20px;

        border-radius: 24px;

    }

}



/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 400px) {

    .gallery-page .sparkles-gallery {

        column-gap: 8px;

    }


    .gallery-page .sparkles-gallery-item {

        margin-bottom: 8px !important;

        border-radius: 11px;

    }


    .gallery-page .gallery-hero h1 {

        font-size: 36px;

    }

}

/* =========================================================
   SPARKLES GALLERY — CLEAN ALIGNED GRID
========================================================= */

.gallery-page {
    background: #06191d;
    overflow-x: hidden;
}

.normal-gallery-section {
    width: 100%;
    padding: 55px 0 75px;
    background: #06191d;
}

.normal-gallery-grid {
    width: min(1180px, calc(100% - 60px));
    margin: 45px auto 0;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 260px;

    gap: 18px;

    align-items: stretch;
}

/* Every photo gets the same clean frame */
.normal-gallery-item {
    position: relative;
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.10);

    background: #10282c;

    box-shadow:
        0 12px 35px rgba(0,0,0,.18);

    isolation: isolate;
}

.normal-gallery-item img {
    display: block;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    object-fit: cover;
    object-position: center;

    border-radius: inherit;

    transition: transform .45s ease;
}

/* Subtle hover */
.normal-gallery-item:hover img {
    transform: scale(1.035);
}


/* =========================================================
   REMOVE OLD RATIO HEIGHTS
========================================================= */

.normal-gallery-item.ratio-16-9,
.normal-gallery-item.ratio-3-4,
.normal-gallery-item.ratio-2-3,
.normal-gallery-item.ratio-9-16,
.normal-gallery-item.ratio-4-3,
.normal-gallery-item.ratio-3-2 {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}


/* =========================================================
   DESKTOP — CLEAN 4 COLUMN FINISH
========================================================= */

@media (min-width: 1101px) {

    .normal-gallery-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: 260px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 701px) and (max-width: 1100px) {

    .normal-gallery-grid {
        width: min(900px, calc(100% - 40px));

        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 245px;

        gap: 16px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .normal-gallery-section {
        padding: 35px 0 50px;
    }

    .normal-gallery-grid {
        width: calc(100% - 28px);

        margin-top: 30px;

        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 185px;

        gap: 12px;
    }

    .normal-gallery-item {
        border-radius: 16px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .normal-gallery-grid {
        width: calc(100% - 22px);

        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 155px;

        gap: 10px;
    }

    .normal-gallery-item {
        border-radius: 14px;
    }

}

/* =========================================================
   GALLERY — REDUCE GAP BETWEEN HERO AND GALLERY SECTION
========================================================= */

body.gallery-page .gallery-hero {
    padding-bottom: 20px !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
}

body.gallery-page .gallery-hero-inner {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Pull the gallery section upward */
body.gallery-page .normal-gallery-section {
    margin-top: -120px !important;
    padding-top: 0 !important;
}

/* Keep the heading itself nicely spaced */
body.gallery-page .normal-gallery-section .section-heading {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


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

    body.gallery-page .gallery-hero {
        padding-bottom: 15px !important;
    }

    body.gallery-page .normal-gallery-section {
        margin-top: -60px !important;
    }
}

/* =========================================================
   GALLERY HERO — FIX NAVBAR TO HERO SPACING
   ========================================================= */

body.gallery-page .gallery-hero {
    padding-top: 78px !important;
    padding-bottom: 55px !important;
    margin-top: 0 !important;
    min-height: auto !important;
    height: auto !important;
}

body.gallery-page .gallery-hero-inner {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* SPARKLES MOMENTS heading */
body.gallery-page .gallery-hero-inner > span:first-child {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 0 !important;
    margin-bottom: 26px !important;
}

/* If the label has its own class */
body.gallery-page .gallery-hero .gallery-eyebrow,
body.gallery-page .gallery-hero .hero-eyebrow,
body.gallery-page .gallery-hero .section-eyebrow {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 0 !important;
    margin-bottom: 26px !important;
}

/* Main hero heading */
body.gallery-page .gallery-hero h1 {
    margin-top: 0 !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    body.gallery-page .gallery-hero {
        padding-top: 60px !important;
        padding-bottom: 40px !important;
    }

    body.gallery-page .gallery-hero-inner > span:first-child,
    body.gallery-page .gallery-hero .gallery-eyebrow,
    body.gallery-page .gallery-hero .hero-eyebrow,
    body.gallery-page .gallery-hero .section-eyebrow {
        margin-bottom: 18px !important;
    }

}

/* =========================================================
   GALLERY — REDUCE SPACE BETWEEN HERO & GALLERY SECTION
   ========================================================= */

body.gallery-page .gallery-hero {
    padding-bottom: 20px !important;
    margin-bottom: 0 !important;
}

body.gallery-page .gallery-main {
    margin-top: 0 !important;
    padding-top: 25px !important;
}

body.gallery-page .gallery-main .gallery-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

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

    body.gallery-page .gallery-hero {
        padding-bottom: 15px !important;
    }

    body.gallery-page .gallery-main {
        padding-top: 20px !important;
    }
}

/* =========================================================
   SPARKLES CONTACT PAGE
   CLEAN PREMIUM V2
   ========================================================= */

body.contact-page {
    margin: 0 !important;
    padding: 0 !important;
    background: #07191e !important;
    color: #fffaf7 !important;
    overflow-x: hidden !important;
}

body.contact-page .contact-v2-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #07191e !important;
    color: #fffaf7 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}


/* =========================================================
   HERO
   ========================================================= */

body.contact-page .contact-v2-hero {
    width: 100%;
    min-height: 410px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    margin: 0;
    padding: 70px 20px 55px;

    text-align: center;

    background:
        radial-gradient(
            circle at 12% 30%,
            rgba(239,131,173,.14),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 25%,
            rgba(143,225,207,.11),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #081c21 0%,
            #07191e 100%
        );
}

body.contact-page .contact-v2-hero-content {
    width: min(850px, 100%);
    margin: 0 auto;
    text-align: center;
}

body.contact-page .contact-v2-label {
    display: block;

    margin: 0 0 18px;

    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;

    color: #8fe1cf;
}

body.contact-page .contact-v2-hero h1 {
    width: 100%;

    margin: 0;
    padding: 0;

    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(45px, 6vw, 76px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -3px;

    color: #fffaf7;
}

body.contact-page .contact-v2-hero h1 span {
    display: block;
    color: #ef83ad;
}

body.contact-page .contact-v2-hero p {
    width: min(650px, 100%);

    margin: 23px auto 0;

    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    line-height: 1.7;

    color: #91d5df;
}

body.contact-page .contact-v2-trail {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    margin: 23px auto 0;

    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 600;

    color: #d7eeee;
}

body.contact-page .contact-v2-trail b {
    color: #ef83ad;
}


/* =========================================================
   MAIN CONTACT SECTION
   ========================================================= */

body.contact-page .contact-v2-main {
    width: min(1120px, calc(100% - 40px));

    margin: 0 auto;
    padding: 60px 0 65px;

    box-sizing: border-box;
}

body.contact-page .contact-v2-heading {
    width: min(720px, 100%);

    margin: 0 auto 40px;

    text-align: center;
}

body.contact-page .contact-v2-heading > span {
    display: block;

    margin: 0 0 13px;

    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;

    color: #8fe1cf;
}

body.contact-page .contact-v2-heading h2 {
    margin: 0;

    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(36px, 4vw, 52px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -2px;

    color: #fffaf7;
}

body.contact-page .contact-v2-heading h2 strong {
    color: #ef83ad;
}

body.contact-page .contact-v2-heading p {
    max-width: 650px;

    margin: 16px auto 0;

    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    line-height: 1.7;

    color: #8fcbd4;
}


/* =========================================================
   CONTACT GRID
   ========================================================= */

body.contact-page .contact-v2-grid {
    width: 100%;

    display: grid;

    grid-template-columns: .88fr 1.12fr;

    gap: 25px;

    align-items: stretch;
}


/* =========================================================
   CONTACT DETAILS
   ========================================================= */

body.contact-page .contact-v2-details {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 11px;
}

body.contact-page .contact-v2-info {
    width: 100%;
    min-height: 92px;

    display: flex;
    align-items: center;

    box-sizing: border-box;

    padding: 16px 17px;

    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.08);

    background: #10272c;

    text-decoration: none;
    color: inherit;

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

body.contact-page .contact-v2-info:hover {
    transform: translateY(-3px);

    border-color: rgba(239,131,173,.28);

    background: #132d32;
}

body.contact-page .contact-v2-info-icon {
    flex: 0 0 50px;

    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    font-size: 18px;
}

body.contact-page .contact-v2-info-icon.pink {
    background: rgba(239,131,173,.14);
    color: #ef83ad;
}

body.contact-page .contact-v2-info-icon.mint {
    background: rgba(143,225,207,.13);
    color: #8fe1cf;
}

body.contact-page .contact-v2-info-icon.yellow {
    background: rgba(247,211,110,.13);
    color: #f7d36e;
}

body.contact-page .contact-v2-info-icon.purple {
    background: rgba(183,160,255,.13);
    color: #b7a0ff;
}

body.contact-page .contact-v2-info-text {
    flex: 1;
    min-width: 0;

    margin-left: 15px;
}

body.contact-page .contact-v2-info-text small {
    display: block;

    margin: 0 0 4px;

    font-family: "DM Sans", sans-serif;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;

    color: #83daca;
}

body.contact-page .contact-v2-info-text h3 {
    margin: 0;

    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 15px;
    font-weight: 700;

    color: #fffaf7;

    overflow-wrap: anywhere;
}

body.contact-page .contact-v2-info-text p {
    margin: 4px 0 0;

    font-family: "DM Sans", sans-serif;
    font-size: 11px;

    color: #78b8c1;
}

body.contact-page .contact-v2-arrow {
    flex: 0 0 auto;

    margin-left: 10px;

    color: #638e95;
}


/* =========================================================
   ENQUIRY CARD
   ========================================================= */

body.contact-page .contact-v2-card {
    width: 100%;

    box-sizing: border-box;

    padding: 30px;

    border: 1px solid rgba(239,131,173,.16);
    border-radius: 25px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(239,131,173,.13),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #152c31 0%,
            #102429 100%
        );
}

body.contact-page .contact-v2-card-top {
    width: 100%;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin: 0 0 25px;
}

body.contact-page .contact-v2-card-top > div:first-child > span {
    display: block;

    margin-bottom: 8px;

    font-family: "DM Sans", sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.8px;

    color: #8fe1cf;
}

body.contact-page .contact-v2-card-top h3 {
    margin: 0;

    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.08;

    color: #fffaf7;
}

body.contact-page .contact-v2-card-top h3 strong {
    display: block;
    color: #ef83ad;
}

body.contact-page .contact-v2-card-symbol {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background: rgba(239,131,173,.10);

    color: #ef83ad;

    font-size: 21px;
}


/* =========================================================
   FORM
   ========================================================= */

body.contact-page .contact-v2-form {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 14px;
}

body.contact-page .contact-v2-field {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 6px;
}

body.contact-page .contact-v2-field label {
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 700;

    color: #d7eeee;
}

body.contact-page .contact-v2-field input,
body.contact-page .contact-v2-field textarea {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 11px;

    outline: none;

    background: rgba(3,15,18,.38);
    color: #fff;

    font-family: "DM Sans", sans-serif;
    font-size: 13px;

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

body.contact-page .contact-v2-field input {
    height: 45px;
    padding: 0 13px;
}

body.contact-page .contact-v2-field textarea {
    min-height: 105px;

    padding: 12px 13px;

    resize: vertical;
}

body.contact-page .contact-v2-field input:focus,
body.contact-page .contact-v2-field textarea:focus {
    border-color: rgba(239,131,173,.55);

    background: rgba(3,15,18,.55);
}

body.contact-page .contact-v2-field input::placeholder,
body.contact-page .contact-v2-field textarea::placeholder {
    color: #6e989f;
}


/* =========================================================
   FORM WHATSAPP BUTTON
   ========================================================= */

body.contact-page .contact-v2-submit {
    min-height: 49px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    box-sizing: border-box;

    margin-top: 3px;
    padding: 0 18px;

    border-radius: 12px;

    background: #25D366;
    color: #ffffff;

    text-decoration: none;

    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 700;

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

body.contact-page .contact-v2-submit:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(37,211,102,.20);
}


/* =========================================================
   WHATSAPP FEATURE
   ========================================================= */

body.contact-page .contact-v2-whatsapp {
    width: min(1120px, calc(100% - 40px));

    margin: 0 auto;

    padding: 0 0 60px;
}

body.contact-page .contact-v2-whatsapp-inner {
    width: 100%;

    box-sizing: border-box;

    display: grid;

    grid-template-columns: auto 1fr auto;

    align-items: center;

    gap: 22px;

    padding: 25px 28px;

    border-radius: 22px;

    border: 1px solid rgba(37,211,102,.15);

    background: rgba(37,211,102,.05);
}

body.contact-page .contact-v2-whatsapp-icon {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 18px;

    background: #25D366;
    color: #ffffff;

    font-size: 27px;
}

body.contact-page .contact-v2-whatsapp-text > span {
    display: block;

    margin-bottom: 5px;

    font-family: "DM Sans", sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.7px;

    color: #7eddb0;
}

body.contact-page .contact-v2-whatsapp-text h2 {
    margin: 0;

    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 23px;
    font-weight: 800;

    color: #fffaf7;
}

body.contact-page .contact-v2-whatsapp-text p {
    margin: 5px 0 0;

    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    line-height: 1.6;

    color: #80b6bd;
}

body.contact-page .contact-v2-whatsapp-button {
    min-height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 0 18px;

    border-radius: 11px;

    background: #25D366;
    color: #ffffff;

    text-decoration: none;

    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   LOCATION
   ========================================================= */

body.contact-page .contact-v2-location {
    width: 100%;

    box-sizing: border-box;

    padding: 65px 20px;

    background: #0a2025;
}

body.contact-page .contact-v2-location-inner {
    width: min(1050px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr .8fr;

    gap: 55px;

    align-items: center;
}

body.contact-page .contact-v2-location-copy > span {
    display: block;

    margin-bottom: 13px;

    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;

    color: #8fe1cf;
}

body.contact-page .contact-v2-location-copy h2 {
    margin: 0;

    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(35px, 4vw, 52px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -2px;

    color: #fffaf7;
}

body.contact-page .contact-v2-location-copy h2 strong {
    display: block;
    color: #ef83ad;
}

body.contact-page .contact-v2-location-copy p {
    max-width: 540px;

    margin: 17px 0 22px;

    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    line-height: 1.7;

    color: #8fcbd4;
}

body.contact-page .contact-v2-map {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    min-height: 45px;

    padding: 0 17px;

    border-radius: 11px;

    background: #ef83ad;
    color: #ffffff;

    text-decoration: none;

    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 700;
}

body.contact-page .contact-v2-location-card {
    width: 100%;
    min-height: 245px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding: 25px;

    border-radius: 25px;

    border: 1px solid rgba(255,255,255,.08);

    background: #10272c;

    text-align: center;
}

body.contact-page .contact-v2-map-icon {
    width: 55px;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 15px;

    border-radius: 17px;

    background: rgba(239,131,173,.12);

    color: #ef83ad;

    font-size: 21px;
}

body.contact-page .contact-v2-location-card > span {
    font-family: "DM Sans", sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.7px;

    color: #8fe1cf;
}

body.contact-page .contact-v2-location-card h3 {
    margin: 9px 0 0;

    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 20px;
    font-weight: 800;

    color: #fffaf7;
}

body.contact-page .contact-v2-location-card p {
    margin: 5px 0 0;

    font-family: "DM Sans", sans-serif;
    font-size: 12px;

    color: #7eb7c0;
}

body.contact-page .contact-v2-location-line {
    width: 55px;
    height: 1px;

    margin: 17px 0;

    background: rgba(255,255,255,.10);
}

body.contact-page .contact-v2-location-card small {
    font-family: "DM Sans", sans-serif;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;

    color: #6c969d;
}


/* =========================================================
   CLOSING
   ========================================================= */

body.contact-page .contact-v2-closing {
    width: 100%;

    box-sizing: border-box;

    padding: 60px 20px 70px;

    text-align: center;

    background: #07191e;
}

body.contact-page .contact-v2-closing > span {
    display: block;

    margin-bottom: 14px;

    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;

    color: #8fe1cf;
}

body.contact-page .contact-v2-closing h2 {
    margin: 0;

    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(35px, 4vw, 54px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -2px;

    color: #fffaf7;
}

body.contact-page .contact-v2-closing h2 strong {
    display: block;
    color: #ef83ad;
}

body.contact-page .contact-v2-closing p {
    max-width: 550px;

    margin: 15px auto 0;

    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    line-height: 1.7;

    color: #8fcbd4;
}


/* =========================================================
   FLOATING WHATSAPP
   ========================================================= */

body.contact-page .whatsapp-float {
    position: fixed !important;

    right: 22px !important;
    bottom: 22px !important;

    width: 58px !important;
    height: 58px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: #25D366 !important;
    color: #ffffff !important;

    text-decoration: none !important;

    z-index: 999999 !important;

    box-shadow:
        0 7px 20px rgba(37,211,102,.25) !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease !important;
}

body.contact-page .whatsapp-float i {
    display: block !important;

    margin: 0 !important;

    font-family:
        "Font Awesome 6 Brands" !important;

    font-size: 29px !important;
    font-weight: 400 !important;

    color: #ffffff !important;
}

body.contact-page .whatsapp-float:hover {
    transform: scale(1.06) !important;

    box-shadow:
        0 10px 25px rgba(37,211,102,.35) !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 850px) {

    body.contact-page .contact-v2-grid {
        grid-template-columns: 1fr;
    }

    body.contact-page .contact-v2-location-inner {
        grid-template-columns: 1fr;
        gap: 35px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    body.contact-page .contact-v2-hero {
        min-height: 340px;

        padding: 40px 18px 35px;
    }

    body.contact-page .contact-v2-hero h1 {
        font-size: 43px;
        letter-spacing: -2px;
    }

    body.contact-page .contact-v2-hero p {
        font-size: 14px;
    }

    body.contact-page .contact-v2-trail {
        gap: 8px;
        font-size: 12px;
    }


    body.contact-page .contact-v2-main {
        width: calc(100% - 30px);

        padding: 42px 0 45px;
    }

    body.contact-page .contact-v2-heading {
        margin-bottom: 28px;
    }

    body.contact-page .contact-v2-heading h2 {
        font-size: 35px;
        letter-spacing: -1.7px;
    }


    body.contact-page .contact-v2-grid {
        grid-template-columns: 1fr;
    }


    body.contact-page .contact-v2-card {
        padding: 22px 18px;

        border-radius: 21px;
    }

    body.contact-page .contact-v2-card-top h3 {
        font-size: 23px;
    }


    body.contact-page .contact-v2-info {
        min-height: 88px;

        padding: 14px;
    }

    body.contact-page .contact-v2-info-icon {
        flex-basis: 46px;

        width: 46px;
        height: 46px;
    }

    body.contact-page .contact-v2-info-text {
        margin-left: 12px;
    }

    body.contact-page .contact-v2-info-text h3 {
        font-size: 13px;
    }


    body.contact-page .contact-v2-whatsapp {
        width: calc(100% - 30px);

        padding-bottom: 45px;
    }

    body.contact-page .contact-v2-whatsapp-inner {
        grid-template-columns: auto 1fr;

        gap: 15px;

        padding: 20px;
    }

    body.contact-page .contact-v2-whatsapp-button {
        grid-column: 1 / -1;

        justify-content: center;
    }


    body.contact-page .contact-v2-location {
        padding: 45px 18px;
    }

    body.contact-page .contact-v2-location-inner {
        grid-template-columns: 1fr;
    }

    body.contact-page .contact-v2-location-copy h2 {
        font-size: 37px;
    }


    body.contact-page .contact-v2-closing {
        padding: 45px 20px 55px;
    }

    body.contact-page .contact-v2-closing h2 {
        font-size: 37px;
    }


    body.contact-page .whatsapp-float {
        width: 54px !important;
        height: 54px !important;

        right: 16px !important;
        bottom: 16px !important;
    }

    body.contact-page .whatsapp-float i {
        font-size: 27px !important;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    body.contact-page .contact-v2-hero h1 {
        font-size: 38px;
    }

    body.contact-page .contact-v2-heading h2 {
        font-size: 32px;
    }

    body.contact-page .contact-v2-location-copy h2 {
        font-size: 34px;
    }

    body.contact-page .contact-v2-closing h2 {
        font-size: 34px;
    }

}

/* =========================================================
   CONTACT — MOBILE NAVBAR → HERO SPACING
   ========================================================= */

@media (max-width: 700px) {

    body.contact-page .contact-v2-hero {
        padding-top: 50px !important;
    }

}

/* =========================================================
   SPARKLES SOCIALS PAGE
   PREMIUM SOCIAL PLATFORM
   ========================================================= */

body.socials-page {
    margin: 0 !important;
    padding: 0 !important;

    background: #07191e !important;
    color: #fffaf7;

    overflow-x: hidden !important;
}


/* =========================================================
   HERO
   ========================================================= */

body.socials-page .socials-premium-hero {
    position: relative;

    min-height: 400px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding: 60px 20px 55px;

    overflow: hidden;

    text-align: center;

    background:
        radial-gradient(
            circle at 10% 25%,
            rgba(239,131,173,.14),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 25%,
            rgba(143,225,207,.12),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #081c21 0%,
            #07191e 100%
        );
}

body.socials-page .socials-hero-inner {
    position: relative;
    z-index: 3;

    width: min(850px, 100%);
}

body.socials-page .socials-eyebrow {
    display: block;

    margin-bottom: 17px;

    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;

    color: #8fe1cf;
}

body.socials-page .socials-premium-hero h1 {
    margin: 0;

    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(46px, 6vw, 76px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -3px;

    color: #fffaf7;
}

body.socials-page .socials-premium-hero h1 span {
    display: block;
    color: #ef83ad;
}

body.socials-page .socials-premium-hero p {
    width: min(650px, 100%);

    margin: 22px auto 0;

    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    line-height: 1.7;

    color: #91d5df;
}

body.socials-page .socials-values {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 12px;

    margin-top: 23px;

    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 700;

    color: #e6f4f3;
}

body.socials-page .socials-values b {
    color: #ef83ad;
}


/* =========================================================
   HERO DECORATIONS
   ========================================================= */

body.socials-page .socials-hero-doodle {
    position: absolute;

    z-index: 1;

    font-family: "Plus Jakarta Sans", sans-serif;

    pointer-events: none;
}

body.socials-page .socials-doodle-1 {
    top: 25%;
    left: 10%;

    font-size: 35px;

    color: rgba(247,211,110,.28);
}

body.socials-page .socials-doodle-2 {
    right: 11%;
    top: 30%;

    font-size: 48px;

    color: rgba(239,131,173,.24);
}

body.socials-page .socials-doodle-3 {
    right: 17%;
    bottom: 18%;

    font-size: 30px;

    color: rgba(143,225,207,.24);
}


/* =========================================================
   PLATFORM SECTION
   ========================================================= */

body.socials-page .socials-platform-section {
    position: relative;

    padding: 70px 20px 75px;

    background: #07191e;
}

body.socials-page .socials-platform-heading {
    width: min(720px, 100%);

    margin: 0 auto 40px;

    text-align: center;
}

body.socials-page .socials-platform-heading > span {
    display: block;

    margin-bottom: 13px;

    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;

    color: #8fe1cf;
}

body.socials-page .socials-platform-heading h2 {
    margin: 0;

    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(38px, 4vw, 53px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -2px;

    color: #fffaf7;
}

body.socials-page .socials-platform-heading h2 strong {
    color: #ef83ad;
}

body.socials-page .socials-platform-heading p {
    max-width: 600px;

    margin: 15px auto 0;

    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    line-height: 1.7;

    color: #8fcbd4;
}


/* =========================================================
   SOCIAL CARDS
   ========================================================= */

body.socials-page .socials-platform-grid {
    width: min(1120px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;
}

body.socials-page .social-platform-card {
    position: relative;

    min-height: 430px;

    display: flex;
    flex-direction: column;

    box-sizing: border-box;

    padding: 25px;

    border-radius: 27px;

    border: 1px solid rgba(255,255,255,.08);

    overflow: hidden;

    text-decoration: none;

    color: #fffaf7;

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

body.socials-page .social-platform-card::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -70px;
    bottom: -70px;

    border-radius: 50%;

    opacity: .10;

    pointer-events: none;
}

body.socials-page .social-platform-card:hover {
    transform: translateY(-7px);
}


/* =========================================================
   INSTAGRAM CARD
   ========================================================= */

body.socials-page .instagram-card {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(225,48,108,.18),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #17262d,
            #102429
        );
}

body.socials-page .instagram-card:hover {
    border-color: rgba(225,48,108,.45);

    box-shadow:
        0 25px 55px rgba(225,48,108,.10);
}

body.socials-page .instagram-card::after {
    background: #E1306C;
}


/* =========================================================
   FACEBOOK CARD
   ========================================================= */

body.socials-page .facebook-card {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(24,119,242,.18),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #17262d,
            #102429
        );
}

body.socials-page .facebook-card:hover {
    border-color: rgba(24,119,242,.45);

    box-shadow:
        0 25px 55px rgba(24,119,242,.10);
}

body.socials-page .facebook-card::after {
    background: #1877F2;
}


/* =========================================================
   YOUTUBE CARD
   ========================================================= */

body.socials-page .youtube-card {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(255,0,0,.17),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #17262d,
            #102429
        );
}

body.socials-page .youtube-card:hover {
    border-color: rgba(255,0,0,.40);

    box-shadow:
        0 25px 55px rgba(255,0,0,.09);
}

body.socials-page .youtube-card::after {
    background: #FF0000;
}


/* =========================================================
   CARD TOP
   ========================================================= */

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

body.socials-page .social-card-number {
    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;

    color: #638e95;
}

body.socials-page .social-card-arrow {
    width: 39px;
    height: 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.08);

    color: #a4c4c8;

    font-size: 12px;

    transition:
        transform .25s ease,
        background .25s ease;
}

body.socials-page .social-platform-card:hover .social-card-arrow {
    transform: rotate(45deg);

    background: rgba(255,255,255,.08);
}


/* =========================================================
   ORIGINAL BRAND ICONS
   ========================================================= */

body.socials-page .social-brand-icon {
    width: 82px;
    height: 82px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 45px;

    border-radius: 23px;

    background: rgba(255,255,255,.055);

    font-size: 42px;

    transition:
        transform .3s ease;
}

body.socials-page .social-platform-card:hover .social-brand-icon {
    transform: translateY(-4px) scale(1.04);
}

body.socials-page .instagram-card .social-brand-icon {
    color: #E1306C;
}

body.socials-page .facebook-card .social-brand-icon {
    color: #1877F2;
}

body.socials-page .youtube-card .social-brand-icon {
    color: #FF0000;
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

body.socials-page .social-card-content {
    margin-top: 30px;
}

body.socials-page .social-card-label {
    display: block;

    margin-bottom: 8px;

    font-family: "DM Sans", sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.7px;

    color: #8fe1cf;
}

body.socials-page .social-card-content h3 {
    margin: 0;

    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 31px;
    font-weight: 800;

    color: #fffaf7;
}

body.socials-page .social-card-content p {
    margin: 13px 0 0;

    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    line-height: 1.7;

    color: #82b8c0;
}


/* =========================================================
   CARD FOOTER
   ========================================================= */

body.socials-page .social-card-footer {
    margin-top: auto;

    padding-top: 25px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-top: 1px solid rgba(255,255,255,.07);

    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 600;

    color: #8fb9bf;
}

body.socials-page .social-card-footer i {
    color: #ef83ad;

    transition:
        transform .25s ease;
}

body.socials-page .social-platform-card:hover .social-card-footer i {
    transform: translateX(5px);
}


/* =========================================================
   WHATSAPP SECTION
   ========================================================= */

body.socials-page .socials-whatsapp-section {
    padding: 0 20px 75px;

    background: #07191e;
}

body.socials-page .socials-whatsapp-card {
    position: relative;

    width: min(1120px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns: auto 1fr auto;

    align-items: center;

    gap: 25px;

    box-sizing: border-box;

    padding: 35px 38px;

    border-radius: 28px;

    border: 1px solid rgba(37,211,102,.16);

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(37,211,102,.11),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #11282c,
            #102429
        );
}

body.socials-page .socials-whatsapp-icon {
    width: 72px;
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 21px;

    background: #25D366;

    color: #ffffff;

    font-size: 35px;

    box-shadow:
        0 12px 30px rgba(37,211,102,.18);
}

body.socials-page .socials-whatsapp-content > span {
    display: block;

    margin-bottom: 7px;

    font-family: "DM Sans", sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.8px;

    color: #7eddb0;
}

body.socials-page .socials-whatsapp-content h2 {
    margin: 0;

    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;

    color: #fffaf7;
}

body.socials-page .socials-whatsapp-content h2 strong {
    color: #8fe1cf;
}

body.socials-page .socials-whatsapp-content p {
    max-width: 600px;

    margin: 10px 0 0;

    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    line-height: 1.7;

    color: #80b6bd;
}

body.socials-page .socials-whatsapp-button {
    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 0 20px;

    border-radius: 12px;

    background: #25D366;
    color: #ffffff;

    text-decoration: none;

    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;

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

body.socials-page .socials-whatsapp-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(37,211,102,.20);
}


/* =========================================================
   CLOSING
   ========================================================= */

body.socials-page .socials-closing {
    padding: 55px 20px 65px;

    text-align: center;

    background: #07191e;
}

body.socials-page .socials-closing > span {
    display: block;

    margin-bottom: 13px;

    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;

    color: #8fe1cf;
}

body.socials-page .socials-closing h2 {
    margin: 0;

    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(37px, 4vw, 55px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -2px;

    color: #fffaf7;
}

body.socials-page .socials-closing h2 strong {
    display: block;

    color: #ef83ad;
}

body.socials-page .socials-closing p {
    margin: 15px auto 0;

    font-family: "DM Sans", sans-serif;
    font-size: 14px;

    color: #8fcbd4;
}

body.socials-page .socials-closing-values {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 11px;

    margin-top: 20px;

    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 700;

    color: #d7eeee;
}

body.socials-page .socials-closing-values b {
    color: #ef83ad;
}


/* =========================================================
   FLOATING WHATSAPP
   ========================================================= */

body.socials-page .whatsapp-float {
    position: fixed !important;

    right: 22px !important;
    bottom: 22px !important;

    width: 58px !important;
    height: 58px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    border: none !important;
    border-radius: 50% !important;

    background: #25D366 !important;
    color: #ffffff !important;

    text-decoration: none !important;

    z-index: 999999 !important;

    box-shadow:
        0 7px 20px rgba(37,211,102,.28) !important;
}

body.socials-page .whatsapp-float i {
    display: block !important;

    font-family: "Font Awesome 6 Brands" !important;
    font-size: 29px !important;
    font-weight: 400 !important;

    color: #ffffff !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    body.socials-page .socials-platform-grid {
        grid-template-columns: 1fr 1fr;
    }

    body.socials-page .youtube-card {
        grid-column: 1 / -1;
        max-width: 50%;
        width: 100%;
        justify-self: center;
    }

    body.socials-page .socials-whatsapp-card {
        grid-template-columns: auto 1fr;
    }

    body.socials-page .socials-whatsapp-button {
        grid-column: 1 / -1;
        justify-self: start;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    body.socials-page .socials-premium-hero {
        min-height: 0;

        padding:
            38px 18px 38px;
    }

    body.socials-page .socials-premium-hero h1 {
        font-size: 43px;
        letter-spacing: -2px;
    }

    body.socials-page .socials-premium-hero p {
        font-size: 14px;
    }

    body.socials-page .socials-values {
        gap: 8px;
        font-size: 12px;
    }


    body.socials-page .socials-platform-section {
        padding:
            45px 15px 50px;
    }

    body.socials-page .socials-platform-heading {
        margin-bottom: 30px;
    }

    body.socials-page .socials-platform-heading h2 {
        font-size: 35px;
    }


    body.socials-page .socials-platform-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    body.socials-page .social-platform-card {
        min-height: 385px;

        padding: 21px;

        border-radius: 23px;
    }

    body.socials-page .youtube-card {
        grid-column: auto;

        max-width: none;
    }

    body.socials-page .social-brand-icon {
        width: 70px;
        height: 70px;

        margin-top: 35px;

        font-size: 35px;
    }

    body.socials-page .social-card-content {
        margin-top: 25px;
    }

    body.socials-page .social-card-content h3 {
        font-size: 27px;
    }


    body.socials-page .socials-whatsapp-section {
        padding:
            0 15px 50px;
    }

    body.socials-page .socials-whatsapp-card {
        grid-template-columns: auto 1fr;

        gap: 15px;

        padding: 24px 20px;

        border-radius: 23px;
    }

    body.socials-page .socials-whatsapp-icon {
        width: 58px;
        height: 58px;

        border-radius: 17px;

        font-size: 28px;
    }

    body.socials-page .socials-whatsapp-content h2 {
        font-size: 22px;
    }

    body.socials-page .socials-whatsapp-content p {
        grid-column: 1 / -1;

        margin-top: 3px;

        font-size: 12px;
    }

    body.socials-page .socials-whatsapp-button {
        grid-column: 1 / -1;

        width: 100%;
    }


    body.socials-page .socials-closing {
        padding:
            40px 18px 45px;
    }

    body.socials-page .socials-closing h2 {
        font-size: 36px;
    }


    body.socials-page .socials-doodle-1 {
        left: 5%;
        font-size: 24px;
    }

    body.socials-page .socials-doodle-2 {
        right: 5%;
        font-size: 35px;
    }

    body.socials-page .socials-doodle-3 {
        display: none;
    }


    body.socials-page .whatsapp-float {
        width: 54px !important;
        height: 54px !important;

        right: 16px !important;
        bottom: 16px !important;
    }

    body.socials-page .whatsapp-float i {
        font-size: 27px !important;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    body.socials-page .socials-premium-hero h1 {
        font-size: 38px;
    }

    body.socials-page .socials-platform-heading h2 {
        font-size: 32px;
    }

    body.socials-page .socials-whatsapp-content h2 {
        font-size: 20px;
    }

    body.socials-page .socials-closing h2 {
        font-size: 33px;
    }

}

/* =========================================================
   SOCIALS — ADD SPACE BELOW NAVBAR / ABOVE HERO CONTENT
   ========================================================= */

body.socials-page .socials-premium-hero {
    padding-top: 78px !important;
}


/* Mobile */
@media (max-width: 700px) {

    body.socials-page .socials-premium-hero {
        padding-top: 52px !important;
    }

}

/* =========================================================
   SOCIALS — REDUCE HERO → NEXT SECTION GAP
   ========================================================= */

body.socials-page .socials-premium-hero {
    padding-bottom: 10px !important;
}

body.socials-page .socials-platform-section {
    padding-top: 25px !important;
}


/* Mobile */
@media (max-width: 700px) {

    body.socials-page .socials-premium-hero {
        padding-bottom: 8px !important;
    }

    body.socials-page .socials-platform-section {
        padding-top: 20px !important;
    }

}

/* =========================================================
   SOCIALS — COMPACT MOBILE SOCIAL CARDS
   ========================================================= */

@media (max-width: 700px) {

    body.socials-page .social-platform-card {
        min-height: 0 !important;
        height: auto !important;

        padding: 18px !important;

        border-radius: 20px !important;
    }


    /* Card top */

    body.socials-page .social-card-top {
        margin-bottom: 0 !important;
    }


    /* Smaller brand icon */

    body.socials-page .social-brand-icon {
        width: 58px !important;
        height: 58px !important;

        margin-top: 20px !important;

        border-radius: 16px !important;

        font-size: 29px !important;
    }


    /* Content closer together */

    body.socials-page .social-card-content {
        margin-top: 18px !important;
    }

    body.social-page .social-card-label,
    body.socials-page .social-card-label {
        margin-bottom: 5px !important;
    }

    body.socials-page .social-card-content h3 {
        font-size: 24px !important;

        margin: 0 !important;
    }

    body.socials-page .social-card-content p {
        margin-top: 8px !important;

        font-size: 12px !important;
        line-height: 1.55 !important;
    }


    /* Footer */

    body.socials-page .social-card-footer {
        margin-top: 20px !important;
        padding-top: 15px !important;

        font-size: 10px !important;
    }

}

/* =========================================================
   SOCIALS — COMPACT SOCIAL CARDS
   DESKTOP + TABLET + MOBILE
   ========================================================= */

body.socials-page .social-platform-card {
    min-height: 0 !important;
    height: auto !important;

    padding: 24px !important;

    border-radius: 24px !important;
}


/* Card top */

body.socials-page .social-card-top {
    margin-bottom: 0 !important;
}


/* Brand logo */

body.socials-page .social-brand-icon {
    width: 68px !important;
    height: 68px !important;

    margin-top: 28px !important;

    border-radius: 19px !important;

    font-size: 34px !important;
}


/* Content */

body.socials-page .social-card-content {
    margin-top: 22px !important;
}

body.socials-page .social-card-label {
    margin-bottom: 6px !important;
}

body.socials-page .social-card-content h3 {
    margin: 0 !important;

    font-size: 28px !important;
}

body.socials-page .social-card-content p {
    margin-top: 9px !important;

    font-size: 12.5px !important;
    line-height: 1.6 !important;
}


/* Footer */

body.socials-page .social-card-footer {
    margin-top: 24px !important;
    padding-top: 16px !important;

    font-size: 10.5px !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) and (min-width: 701px) {

    body.socials-page .social-platform-card {
        padding: 21px !important;
    }

    body.socials-page .social-brand-icon {
        width: 62px !important;
        height: 62px !important;

        margin-top: 23px !important;

        font-size: 31px !important;
    }

    body.socials-page .social-card-content {
        margin-top: 18px !important;
    }

    body.socials-page .social-card-content h3 {
        font-size: 25px !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    body.socials-page .social-platform-card {
        min-height: 0 !important;
        height: auto !important;

        padding: 18px !important;

        border-radius: 20px !important;
    }

    body.socials-page .social-brand-icon {
        width: 58px !important;
        height: 58px !important;

        margin-top: 20px !important;

        border-radius: 16px !important;

        font-size: 29px !important;
    }

    body.socials-page .social-card-content {
        margin-top: 18px !important;
    }

    body.socials-page .social-card-content h3 {
        font-size: 24px !important;
    }

    body.socials-page .social-card-content p {
        margin-top: 8px !important;

        font-size: 12px !important;
        line-height: 1.55 !important;
    }

    body.socials-page .social-card-footer {
        margin-top: 20px !important;

        padding-top: 15px !important;

        font-size: 10px !important;
    }

}

/* =========================================================
   SOCIALS — FINAL PREMIUM CARDS
   ========================================================= */

body.socials-page .socials-platform-grid {
    width: min(1120px, calc(100% - 40px)) !important;
    margin: 35px auto 0 !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 22px !important;

    align-items: stretch !important;
}


/* =========================================================
   CARD
   ========================================================= */

body.socials-page .social-platform-card {
    position: relative !important;

    width: 100% !important;
    height: 285px !important;
    min-height: 285px !important;

    display: flex !important;
    flex-direction: column !important;

    padding: 25px !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    border-radius: 25px !important;

    border: 1px solid rgba(255,255,255,.09) !important;

    text-decoration: none !important;

    color: #fffaf7 !important;

    isolation: isolate !important;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease !important;
}


/* Remove previous pseudo decorations */

body.socials-page .social-platform-card::before,
body.socials-page .social-platform-card::after {
    content: none !important;
    display: none !important;
}


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

body.socials-page .instagram-card {
    background:
        radial-gradient(
            circle at 95% 5%,
            rgba(225,48,108,.16),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            #17272c 0%,
            #102429 100%
        ) !important;
}


body.socials-page .facebook-card {
    background:
        radial-gradient(
            circle at 95% 5%,
            rgba(24,119,242,.17),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            #17272c 0%,
            #102429 100%
        ) !important;
}


body.socials-page .youtube-card {
    background:
        radial-gradient(
            circle at 95% 5%,
            rgba(255,0,0,.14),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            #17272c 0%,
            #102429 100%
        ) !important;
}


/* =========================================================
   LOGO + HEADING
   ========================================================= */

body.socials-page .social-card-header {
    position: relative !important;
    z-index: 3 !important;

    display: flex !important;
    align-items: center !important;

    gap: 17px !important;

    width: 100% !important;

    margin: 0 !important;
}


/* LOGO */

body.socials-page
.social-card-header
.social-brand-icon {

    flex: 0 0 64px !important;

    width: 64px !important;
    height: 64px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 18px !important;

    background: rgba(255,255,255,.065) !important;

    font-size: 32px !important;

    line-height: 1 !important;
}


/* Brand colours */

body.socials-page
.instagram-card
.social-brand-icon {
    color: #E1306C !important;
}

body.socials-page
.facebook-card
.social-brand-icon {
    color: #1877F2 !important;
}

body.socials-page
.youtube-card
.social-brand-icon {
    color: #FF0000 !important;
}


/* =========================================================
   TITLE BESIDE LOGO
   ========================================================= */

body.socials-page .social-title-block {
    flex: 1 !important;

    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    justify-content: center !important;

    margin: 0 !important;
}


body.socials-page .social-title-block span {
    display: block !important;

    margin: 0 0 5px !important;

    font-family: "DM Sans", sans-serif !important;

    font-size: 9px !important;
    font-weight: 800 !important;

    letter-spacing: 1.6px !important;

    color: #8fe1cf !important;
}


body.socials-page .social-title-block h3 {
    margin: 0 !important;

    font-family: "Plus Jakarta Sans", sans-serif !important;

    font-size: 27px !important;
    font-weight: 800 !important;

    line-height: 1.05 !important;

    letter-spacing: -.8px !important;

    color: #fffaf7 !important;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

body.socials-page .social-card-text {
    position: relative !important;

    z-index: 3 !important;

    max-width: 92% !important;

    margin: 24px 0 0 !important;

    padding: 0 !important;

    font-family: "DM Sans", sans-serif !important;

    font-size: 12.5px !important;

    font-weight: 400 !important;

    line-height: 1.65 !important;

    color: #82c9d4 !important;
}


/* =========================================================
   BOTTOM LINK
   ========================================================= */

body.socials-page .social-card-bottom {
    position: relative !important;

    z-index: 3 !important;

    width: 100% !important;

    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    margin-top: auto !important;

    padding-top: 15px !important;

    border-top:
        1px solid rgba(255,255,255,.08) !important;

    font-family: "DM Sans", sans-serif !important;

    font-size: 10px !important;
    font-weight: 600 !important;

    color: #8fc9d0 !important;
}


body.socials-page .social-card-bottom i {
    color: #ef83ad !important;

    font-size: 11px !important;

    transition: transform .25s ease !important;
}


body.socials-page .social-platform-card:hover
.social-card-bottom i {
    transform: translateX(4px) !important;
}


/* =========================================================
   DECORATIVE BUBBLE
   MOVED TO BOTTOM RIGHT
   ========================================================= */

body.socials-page .social-decoration {
    position: absolute !important;

    z-index: 1 !important;

    width: 130px !important;
    height: 130px !important;

    right: -55px !important;
    bottom: -70px !important;

    border-radius: 50% !important;

    pointer-events: none !important;
}


body.socials-page .instagram-card
.social-decoration {
    background: rgba(225,48,108,.10) !important;
}


body.socials-page .facebook-card
.social-decoration {
    background: rgba(24,119,242,.11) !important;
}


body.socials-page .youtube-card
.social-decoration {
    background: rgba(255,0,0,.09) !important;
}


/* =========================================================
   HOVER
   ========================================================= */

body.socials-page .social-platform-card:hover {
    transform: translateY(-5px) !important;
}


body.socials-page .instagram-card:hover {
    border-color: rgba(225,48,108,.35) !important;
}


body.socials-page .facebook-card:hover {
    border-color: rgba(24,119,242,.35) !important;
}


body.socials-page .youtube-card:hover {
    border-color: rgba(255,0,0,.30) !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) and (min-width: 701px) {

    body.socials-page .socials-platform-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;
    }

    body.socials-page .youtube-card {
        grid-column: 1 / -1 !important;

        width: calc(50% - 11px) !important;

        justify-self: center !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    body.socials-page .socials-platform-grid {
        width: calc(100% - 30px) !important;

        grid-template-columns: 1fr !important;

        gap: 14px !important;

        margin-top: 25px !important;
    }


    body.socials-page .social-platform-card {
        width: 100% !important;

        height: auto !important;
        min-height: 235px !important;

        padding: 19px !important;

        border-radius: 20px !important;
    }


    body.socials-page
    .social-card-header
    .social-brand-icon {

        flex-basis: 56px !important;

        width: 56px !important;
        height: 56px !important;

        border-radius: 15px !important;

        font-size: 28px !important;
    }


    body.socials-page .social-card-header {
        gap: 14px !important;
    }


    body.socials-page .social-title-block span {
        font-size: 7.5px !important;
    }


    body.socials-page .social-title-block h3 {
        font-size: 23px !important;
    }


    body.socials-page .social-card-text {
        margin-top: 18px !important;

        font-size: 11.5px !important;

        line-height: 1.6 !important;
    }


    body.socials-page .social-card-bottom {
        margin-top: 20px !important;

        padding-top: 13px !important;

        font-size: 9.5px !important;
    }


    body.socials-page .social-decoration {
        width: 100px !important;
        height: 100px !important;

        right: -45px !important;
        bottom: -55px !important;
    }

}

/* =========================================================
   SOCIALS — SPACE BETWEEN SOCIAL CARDS & WHATSAPP
   ========================================================= */

body.socials-page .socials-whatsapp-section {
    padding-top: 55px !important;
}


/* Mobile */
@media (max-width: 700px) {

    body.socials-page .socials-whatsapp-section {
        padding-top: 35px !important;
    }

}

/* =========================================================
   SOCIALS — TIGHT / CONTENT-BASED CARDS
   FINAL SPACING FIX
   ========================================================= */

/* Desktop + tablet */
body.socials-page .social-platform-card {
    height: auto !important;
    min-height: 0 !important;

    padding: 20px !important;
}


/* ---------------------------------------------------------
   TOP ROW
   --------------------------------------------------------- */

body.socials-page .social-card-top {
    margin-bottom: 16px !important;
}


/* ---------------------------------------------------------
   LOGO + TITLE
   --------------------------------------------------------- */

body.socials-page .social-card-heading {
    margin-top: 0 !important;

    gap: 13px !important;
}


body.socials-page .social-card-heading .social-brand-icon {
    flex: 0 0 58px !important;

    width: 58px !important;
    height: 58px !important;

    border-radius: 15px !important;

    font-size: 29px !important;
}


/* ---------------------------------------------------------
   TITLE
   --------------------------------------------------------- */

body.socials-page .social-card-title .social-card-label {
    margin-bottom: 3px !important;

    font-size: 7.5px !important;
}


body.socials-page .social-card-title h3 {
    font-size: 24px !important;

    line-height: 1.05 !important;
}


/* ---------------------------------------------------------
   DESCRIPTION
   --------------------------------------------------------- */

body.socials-page .social-card-description {
    margin-top: 15px !important;
}


body.socials-page .social-card-description p {
    margin: 0 !important;

    font-size: 11.5px !important;

    line-height: 1.5 !important;
}


/* ---------------------------------------------------------
   FOOTER
   IMPORTANT: DO NOT PUSH IT TO THE BOTTOM
   --------------------------------------------------------- */

body.socials-page .social-card-footer {
    margin-top: 17px !important;

    padding-top: 12px !important;

    font-size: 9px !important;
}


/* =========================================================
   MOBILE — VERY COMPACT
   ========================================================= */

@media (max-width: 700px) {

    body.socials-page .social-platform-card {
        height: auto !important;
        min-height: 0 !important;

        padding: 16px !important;

        border-radius: 18px !important;
    }


    body.socials-page .social-card-top {
        margin-bottom: 13px !important;
    }


    body.socials-page .social-card-heading {
        gap: 11px !important;
    }


    body.socials-page .social-card-heading .social-brand-icon {
        flex: 0 0 50px !important;

        width: 50px !important;
        height: 50px !important;

        border-radius: 14px !important;

        font-size: 25px !important;
    }


    body.socials-page .social-card-title .social-card-label {
        margin-bottom: 2px !important;

        font-size: 7px !important;

        letter-spacing: 1.2px !important;
    }


    body.socials-page .social-card-title h3 {
        font-size: 21px !important;

        line-height: 1 !important;
    }


    body.socials-page .social-card-description {
        margin-top: 13px !important;
    }


    body.socials-page .social-card-description p {
        font-size: 11px !important;

        line-height: 1.45 !important;
    }


    body.socials-page .social-card-footer {
        margin-top: 15px !important;

        padding-top: 11px !important;

        font-size: 8.5px !important;
    }

}

/* =========================================================
   SOCIALS — REDUCE WHATSAPP → CLOSING SECTION GAP
   ========================================================= */

body.socials-page .socials-whatsapp-section {
    padding-bottom: 25px !important;
    margin-bottom: 0 !important;
}

body.socials-page .socials-closing {
    min-height: 0 !important;
    height: auto !important;

    margin-top: 0 !important;

    padding-top: 35px !important;
    padding-bottom: 40px !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    body.socials-page .socials-whatsapp-section {
        padding-bottom: 20px !important;
        margin-bottom: 0 !important;
    }

    body.socials-page .socials-closing {
        min-height: 0 !important;
        height: auto !important;

        margin-top: 0 !important;

        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

}

/* =========================================================
   SOCIALS — REDUCE CLOSING SECTION → FOOTER GAP
   ========================================================= */

body.socials-page .socials-closing {
    min-height: 0 !important;
    height: auto !important;

    margin-bottom: 0 !important;

    padding-top: 35px !important;
    padding-bottom: 25px !important;
}

body.socials-page .premium-footer,
body.socials-page .sparkles-footer {
    margin-top: 0 !important;
}


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

    body.socials-page .socials-closing {
        min-height: 0 !important;
        height: auto !important;

        margin-bottom: 0 !important;

        padding-top: 30px !important;
        padding-bottom: 20px !important;
    }

    body.socials-page .premium-footer,
    body.socials-page .sparkles-footer {
        margin-top: 0 !important;
    }

}

/* =========================================================
   SOCIALS — MORE SPACE BETWEEN NAVBAR & HERO
   ========================================================= */

body.socials-page .socials-premium-hero {
    padding-top: 105px !important;
}


/* Mobile */
@media (max-width: 700px) {

    body.socials-page .socials-premium-hero {
        padding-top: 55px !important;
    }

}

/* =========================================================
   NAVBAR — ENQUIRE NOW NORMAL HOVER
   ========================================================= */

.site-header .nav-menu > a.enquire-pill,
.site-header .nav-menu > a.enquire-pill:hover,
.site-header .nav-menu > a.enquire-pill:focus,
.site-header .nav-menu > a.enquire-pill:active,
.site-header .nav-menu > a.enquire-pill:focus-visible {
    background: #f6a2b6 !important;
    color: #17252a !important;

    border-color: transparent !important;

    box-shadow: none !important;

    filter: none !important;
}


/* Subtle normal hover — no black effect */
.site-header .nav-menu > a.enquire-pill:hover {
    background: #f6a2b6 !important;
    color: #17252a !important;

    transform: translateY(-1px) !important;

    box-shadow:
        0 6px 18px rgba(239, 131, 173, 0.18) !important;
}


/* Keep the icon normal too */
.site-header .nav-menu > a.enquire-pill i {
    color: #17252a !important;
}


/* Prevent browser focus/active darkening */
.site-header .nav-menu > a.enquire-pill:focus,
.site-header .nav-menu > a.enquire-pill:active,
.site-header .nav-menu > a.enquire-pill:focus-visible {
    outline: none !important;
    background: #f6a2b6 !important;
}

/* ==========================================
   SPARKLES IMAGE PROTECTION
========================================== */

.gallery-page img {
    -webkit-user-drag: none !important;
    user-drag: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
}


/* ==========================================
   SPARKLES TEXT WATERMARK
========================================== */

.sparkles-gallery-item {
    position: relative !important;
    overflow: hidden !important;
}

.sparkles-gallery-item .sparkles-text-watermark {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    transform: translate(-50%, -50%) rotate(-30deg) !important;

    display: block !important;

    width: max-content !important;

    font-family: "DM Sans", sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;

    letter-spacing: 2px !important;
    line-height: 1 !important;
    white-space: nowrap !important;

    color: rgba(255, 255, 255, 0.25) !important;

    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.35) !important;

    padding: 7px 14px !important;

    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 5px !important;

    z-index: 999 !important;

    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

@media (max-width: 700px) {

    .sparkles-gallery-item .sparkles-text-watermark {
        font-size: 12px !important;
        letter-spacing: 1px !important;
        padding: 5px 9px !important;
    }

}

/* ==========================================
   CONTACT PAGE
   FORCE "TALK TO US." TO NEXT LINE
========================================== */

body.contact-page .contact-v2-main .contact-v2-heading h2 {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
}

body.contact-page .contact-v2-main .contact-v2-heading h2 strong {
    display: block !important;
    width: 100% !important;
    margin-top: 6px !important;
    white-space: nowrap !important;
    text-align: center !important;
}


/* Mobile */
@media (max-width: 700px) {

    body.contact-page .contact-v2-main .contact-v2-heading h2 {
        text-align: center !important;
    }

    body.contact-page .contact-v2-main .contact-v2-heading h2 strong {
        display: block !important;
        width: 100% !important;
        margin-top: 5px !important;
        text-align: center !important;
    }

}

/* =========================================================
   SPARKLES VIDEO GALLERY
   FINAL MASONRY LAYOUT
   PRESERVES ORIGINAL VIDEO RATIOS
========================================================= */

/* Main video section */
body.gallery-page .sparkles-video-section {
    width: 100% !important;
    max-width: 1180px !important;

    margin: 85px auto 0 !important;
    padding: 0 0 80px !important;

    display: block !important;

    clear: both !important;
    position: relative !important;

    box-sizing: border-box !important;
}


/* =========================================================
   VIDEO SECTION HEADING
========================================================= */

body.gallery-page .sparkles-video-heading {
    width: 100% !important;
    max-width: 760px !important;

    margin: 0 auto 40px !important;
    padding: 0 !important;

    text-align: center !important;

    display: block !important;
}


body.gallery-page .sparkles-video-heading > span {
    display: block !important;

    margin: 0 0 12px !important;

    color: #8fe1cf !important;

    font-family: "DM Sans", sans-serif !important;

    font-size: 11px !important;
    font-weight: 800 !important;

    letter-spacing: 2px !important;

    text-align: center !important;
}


body.gallery-page .sparkles-video-heading h2 {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #fffaf7 !important;

    font-family: "Plus Jakarta Sans", sans-serif !important;

    font-size: clamp(32px, 4.5vw, 54px) !important;

    font-weight: 800 !important;

    line-height: 1.08 !important;

    letter-spacing: -2px !important;

    text-align: center !important;
}


body.gallery-page .sparkles-video-heading h2 strong {
    color: #ef83ad !important;

    font-weight: 800 !important;
}


body.gallery-page .sparkles-video-heading p {
    display: block !important;

    width: 100% !important;
    max-width: 650px !important;

    margin: 16px auto 0 !important;
    padding: 0 !important;

    color: #8fc5ce !important;

    font-family: "DM Sans", sans-serif !important;

    font-size: 15px !important;

    line-height: 1.7 !important;

    text-align: center !important;
}


/* =========================================================
   VIDEO MASONRY
   IMPORTANT:
   CSS COLUMNS REMOVE THE EMPTY ROW SPACES
========================================================= */

body.gallery-page .sparkles-video-grid {
    width: 100% !important;
    max-width: 1180px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    display: block !important;

    column-count: 3 !important;
    column-gap: 24px !important;

    column-fill: balance !important;

    box-sizing: border-box !important;
}


/* =========================================================
   INDIVIDUAL VIDEO
========================================================= */

body.gallery-page .sparkles-video-card {
    width: 100% !important;

    display: inline-block !important;

    margin: 0 0 24px !important;
    padding: 0 !important;

    vertical-align: top !important;

    break-inside: avoid !important;
    page-break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;

    position: relative !important;

    overflow: hidden !important;

    border-radius: 18px !important;

    background: transparent !important;

    box-sizing: border-box !important;
}


/* =========================================================
   VIDEO WRAPPER
========================================================= */

body.gallery-page .sparkles-video-wrapper {
    width: 100% !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    border-radius: 18px !important;

    background: transparent !important;

    position: relative !important;

    box-sizing: border-box !important;
}


/* =========================================================
   ACTUAL VIDEO
   NATURAL / ORIGINAL RATIO
========================================================= */

body.gallery-page .sparkles-video-wrapper video,
body.gallery-page .sparkles-video-card video {

    display: block !important;

    width: 100% !important;

    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: 100% !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;

    aspect-ratio: auto !important;

    border: none !important;

    border-radius: 18px !important;

    background: #000 !important;

    vertical-align: top !important;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1101px) {

    body.gallery-page .sparkles-video-section {
        width: min(1180px, calc(100% - 40px)) !important;

        margin-top: 90px !important;
    }

    body.gallery-page .sparkles-video-grid {
        column-count: 3 !important;
        column-gap: 24px !important;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 701px) and (max-width: 1100px) {

    body.gallery-page .sparkles-video-section {
        width: calc(100% - 40px) !important;

        margin-top: 75px !important;
    }

    body.gallery-page .sparkles-video-grid {
        column-count: 2 !important;
        column-gap: 20px !important;
    }

    body.gallery-page .sparkles-video-card {
        margin-bottom: 20px !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    body.gallery-page .sparkles-video-section {
        width: calc(100% - 24px) !important;

        margin-top: 60px !important;

        padding-bottom: 55px !important;
    }


    body.gallery-page .sparkles-video-heading {
        margin-bottom: 28px !important;
    }


    body.gallery-page .sparkles-video-heading h2 {
        font-size: 34px !important;

        letter-spacing: -1.3px !important;
    }


    body.gallery-page .sparkles-video-heading p {
        font-size: 14px !important;

        line-height: 1.65 !important;
    }


    body.gallery-page .sparkles-video-grid {
        column-count: 1 !important;
        column-gap: 0 !important;
    }


    body.gallery-page .sparkles-video-card {
        margin-bottom: 18px !important;

        border-radius: 16px !important;
    }


    body.gallery-page .sparkles-video-wrapper {
        border-radius: 16px !important;
    }


    body.gallery-page .sparkles-video-wrapper video,
    body.gallery-page .sparkles-video-card video {
        border-radius: 16px !important;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    body.gallery-page .sparkles-video-section {
        width: calc(100% - 18px) !important;
    }


    body.gallery-page .sparkles-video-heading h2 {
        font-size: 30px !important;
    }


    body.gallery-page .sparkles-video-grid {
        column-count: 1 !important;
    }

}

/* =========================================================
   CENTER VIDEO PLAY / PAUSE BUTTON
========================================================= */

body.gallery-page .sparkles-video-wrapper {
    position: relative !important;
}


/* Center button */
body.gallery-page .video-center-control {
    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    transform: translate(-50%, -50%) !important;

    width: 64px !important;
    height: 64px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;

    border: 1px solid rgba(255,255,255,.35) !important;

    border-radius: 50% !important;

    background: rgba(7,21,27,.72) !important;

    color: #ffffff !important;

    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.15) !important;

    cursor: pointer !important;

    z-index: 10 !important;

    transition:
        transform .22s ease,
        background .22s ease,
        opacity .22s ease,
        box-shadow .22s ease !important;
}


/* Icon */
body.gallery-page .video-center-control i {
    font-size: 21px !important;

    margin-left: 2px !important;

    pointer-events: none !important;
}


/* Pause icon alignment */
body.gallery-page .video-center-control.is-playing i {
    margin-left: 0 !important;
}


/* Hover */
body.gallery-page .video-center-control:hover {
    transform: translate(-50%, -50%) scale(1.08) !important;

    background: rgba(242,142,174,.88) !important;

    color: #07151b !important;

    box-shadow:
        0 14px 35px rgba(242,142,174,.25) !important;
}


/* When video is playing, make button slightly subtle */
body.gallery-page .video-center-control.is-playing {
    opacity: .82 !important;
}


/* Bring it back on hover */
body.gallery-page .sparkles-video-wrapper:hover .video-center-control.is-playing {
    opacity: 1 !important;
}


/* Mobile */
@media (max-width: 700px) {

    body.gallery-page .video-center-control {
        width: 56px !important;
        height: 56px !important;
    }

    body.gallery-page .video-center-control i {
        font-size: 18px !important;
    }

}