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

.hero {

    padding-block: var(--space-3xl);

}

.hero-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: var(--space-3xl);

}

.hero-tag {

    display: inline-block;

    margin-bottom: var(--space-md);

    color: var(--color-primary);

    font-weight: var(--fw-semibold);

}

.hero h1 {

    font-size: var(--fs-3xl);

    color: var(--color-heading);

    font-weight: var(--fw-extrabold);

    line-height: 1.15;

    margin-bottom: var(--space-lg);

}

.hero p {

    max-width: 600px;

    margin-bottom: var(--space-xl);

}

.hero-actions {

    display: flex;

    gap: var(--space-md);

}

.hero-image img {

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

    /* box-shadow: var(--shadow-lg); */

}

/* home page banners
*/
/* =========================================================
   Home Page Main Banner - ZIPRT Carousel
   ========================================================= */

.home-page-banner {
    width: 100%;
    margin-bottom: var(--space-4xl);
}

.ziprt-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.ziprt-viewport {
    width: 100%;
    overflow: hidden;
}

.ziprt-slides {
    display: flex;
    width: 100%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
    will-change: transform;
}

.ziprt-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    overflow: hidden;
}

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

/* Previous / Next buttons */

.ziprt-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 24px;
    line-height: 44px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

    .ziprt-btn:hover {
        background: rgba(0, 0, 0, 0.7);
    }

.ziprt-prev {
    left: 15px;
}

.ziprt-next {
    right: 15px;
}

/* Indicators */

.ziprt-indicators {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 15px;
    z-index: 10;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.ziprt-indicator {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.65);
    cursor: pointer;
}

    .ziprt-indicator.active {
        background: #fff;
    }

/* Caption */

.ziprt-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30px 35px;
    background: linear-gradient( to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0) );
    color: #fff;
}

    .ziprt-caption h2 {
        margin: 0 0 8px;
    }

    .ziprt-caption p {
        margin: 0 0 12px;
    }

/* ==================================================
   STATS
================================================== */

.stats {

    margin-bottom: var(--space-4xl);

}

.stats-grid {

    display: grid;

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

    gap: var(--space-lg);

}

.stat-card {

    background: var(--color-white);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);

}

.stat-card:hover {

    transform: translateY(-4px);
    background-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-lg);

}

.stat-card h3 {

    font-size: var(--fs-xl);

    color: var(--color-primary);

}

.stat-card p {

    font-size: var(--fs-sm);

}

.stat-card:hover h3 {
    color: var( --color-primary-light);
}

/* =========================================================
   FAQ BANNER
   ========================================================= */

.zi-home-faq-section {
    padding: var(--section-padding-mobile) 0;
    background: var(--color-background);
    margin-bottom: var(--section-padding)
}


/* ---------------------------------------------------------
   FAQ BANNER
   --------------------------------------------------------- */

.zi-home-faq-banner {
    position: relative;
    display: flex;
    overflow: hidden;
    padding: var(--space-3xl) var(--space-xl);
    background-color: var(--color-primary-dark);
    background-image: linear-gradient( 90deg, rgb(15 94 89 / 88%) 0%, rgb(15 94 89 / 72%) 42%, rgb(15 94 89 / 25%) 72%, rgb(15 94 89 / 5%) 100% ), url("/images/faq-school.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4xl)
}




/* ---------------------------------------------------------
   CONTENT OVER IMAGE
   --------------------------------------------------------- */

.zi-home-faq-overlay {
    display: flex;
    width: 100%;
    align-items: center;
    padding: var(--space-6);
}


.zi-home-faq-content {
    position: relative;
    z-index: var(--z-header);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: var(--content-width);
    color: var(--color-white);
    text-align: left;
}


.zi-home-faq-subtitle {
    margin-bottom: var(--space-sm);
    color: var(--color-primary-light);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
}


.zi-home-faq-title {
    margin: 0;
    color: var(--color-white);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    line-height: 1.2;
}


.zi-home-faq-text {
    max-width: var(--content-width);
    margin: var(--space-md) 0 0;
    color: var(--color-white);
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    line-height: 1.6;
}

/* ---------------------------------------------------------
   FAQ BUTTON
   --------------------------------------------------------- */
.zi-home-faq-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding: var(--space-sm) var(--space-lg);
    background: var(--color-accent);
    color: var(--color-white);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: 1;
    text-decoration: none;
    transition: var(--transition);
}


    .zi-home-faq-button i {
        transition: var(--transition);
    }


    .zi-home-faq-button:hover {
        background: var(--color-accent-hover);
        border-color: var(--color-accent-hover);
        color: var(--color-white);
    }


        .zi-home-faq-button:hover i {
            transform: translateX(var(--space-xs));
        }


    .zi-home-faq-button:focus-visible {
        outline: 2px solid var(--color-white);
        outline-offset: var(--space-xs);
    }


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

@media (min-width: 48rem) {

    .zi-home-faq-banner {
        padding: var(--space-4xl) var(--space-2xl);
    }

    .zi-home-faq-content {
        max-width: 60%;
    }

    .zi-home-faq-title {
        font-size: var(--fs-2xl);
    }

    .zi-home-faq-text {
        font-size: var(--fs-md);
    }
}


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

@media (min-width: 64rem) {

    .zi-home-faq-section {
        padding: var(--section-padding) 0;
    }

    .zi-home-faq-banner {
        min-height: var(--section-padding);
        padding: var(--space-4xl) var(--space-2xl);
    }

    .zi-home-faq-content {
        max-width: 50%;
    }

    .zi-home-faq-title {
        font-size: var(--fs-xl);
    }
}
/* ==================================================
   CTA
================================================== */

.admission-cta {

    padding-block: var(--space-3xl);

    background: var(--color-primary);

    text-align: center;

    color: var(--color-white);

}

.admission-cta h2 {

    font-size: var(--fs-2xl);

    margin-bottom: var(--space-xl);

}

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

.about-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: var(--space-3xl);

    align-items: center;

}

.about-image img {
    border-radius:1rem
}

.feature-list {

    margin-top: var(--space-lg);

    margin-bottom: var(--space-xl);

    display: grid;

    gap: var(--space-md);

}

.feature-list i {

    color: var(--color-primary);

}

/* ===========================
   FACILITIES
=========================== */
.about-facility-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.facility-grid {

    display: grid;

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

    gap: var(--space-lg);

}
    .Outcomes {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-lg);
    }

.facility-card {

    background: var(--color-white);

    padding: var(--space-xl);

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

    text-align: center;

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

    transition: var(--transition);

}

.facility-card:hover {

    transform: translateY(-4px);

}

.facility-card i {

    font-size: var(--fs-xl);

    color: var(--color-primary);

    margin-bottom: var(--space-md);

}

/* ===========================
   ACADEMICS
=========================== */

.academics-grid {

    display: grid;

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

    gap: var(--space-lg);

}

.academic-card {

    background: var(--color-white);

    padding: var(--space-xl);

    text-align: center;

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

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

}

/* ===========================
   NOTICES
=========================== */

.section-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: var(--space-xl);

}

.notice-list {

    display: grid;

    gap: var(--space-md);

}

.notice-item {

    background: var(--color-white);

    padding: var(--space-lg);

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

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

}

/* ===========================
   EVENTS
=========================== */

.event-grid {

    display: grid;

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

    gap: var(--space-xl);

}

.event-card {

    background: var(--color-white);

    overflow: hidden;

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

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

}

.event-content {

    padding: var(--space-lg);

}

/* ===========================
   GALLERY
=========================== */

.gallery-grid {

    display: grid;

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

    gap: var(--space-lg);

}

.gallery-grid img {

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

}




/* ==========================
   PAGE BANNER
========================== */
    .page-banner {
        padding-block: var(--space-2xl);
        background: var(--color-primary);
        color: var(--color-white);
        text-align: center;
    }

.page-banner h1 {

    margin-bottom: var(--space-md);

}

/* ==========================
   LIGHT SECTION
========================== */

.section-light {

    background: var(--color-primary-light);

}

/* ==========================
   VISION MISSION
========================== */

.vision-mission-grid {

    display: grid;

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

    gap: var(--space-xl);

}

.info-card {

    background: var(--color-white);

    padding: var(--space-xl);

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

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

}

/* ==========================
   PRINCIPAL
========================== */

.principal-grid {

    display: grid;

    grid-template-columns: 350px 1fr;

    gap: var(--space-3xl);

    align-items: center;

}

.principal-image img {

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

}

/* ==========================
   TIMELINE
========================== */

.timeline {

    display: grid;

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

    gap: var(--space-lg);

}

.timeline-item {

    background: var(--color-white);

    padding: var(--space-xl);

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

    text-align: center;

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

}

/* =====================================
   ACADEMIC LEVELS
===================================== */

.academic-level-grid {

    display: grid;

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

    gap: var(--space-lg);

}

.academic-level-card {

    background: var(--color-white);

    padding: var(--space-xl);

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

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

    text-align: center;

}

.academic-level-card h3 {

    color: var(--color-primary);

    margin-bottom: var(--space-md);

}

/* =====================================
   CONTACT PAGE
===================================== */

.contact-card-grid {

    display: grid;

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

    gap: var(--space-lg);

}

.contact-card {

    background: var(--color-white);

    padding: var(--space-xl);

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

    text-align: center;

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

}

.contact-card i {

    font-size: var(--fs-xl);

    color: var(--color-primary);

    margin-bottom: var(--space-md);

}

/* ========================= */

.contact-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: var(--space-3xl);

    align-items: start;

}

/* ========================= */

.contact-form {

    display: grid;

    gap: var(--space-md);

}

.form-group input,
.form-group textarea {

    width: 100%;

    padding: var(--space-md);

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

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

    font-family: var(--font-primary);

}

/* ========================= */

.map-wrapper {

    overflow: hidden;

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

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

}

.map-wrapper iframe {

    width: 100%;

    height: 450px;

    border: 0;

}

/* =====================================
   FAQ ACCORDION
===================================== */

.faq-accordion {

    display: grid;

    gap: var(--space-md);

}

.faq-item {

    background: var(--color-white);

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

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

    overflow: hidden;

}

.faq-item summary {

    padding: var(--space-lg);

    cursor: pointer;

    font-weight: var(--fw-semibold);

    color: var(--color-heading);

    list-style: none;

    position: relative;

}

.faq-item summary::-webkit-details-marker {

    display: none;

}

.faq-item summary::after {

    content: "+";

    position: absolute;

    right: var(--space-lg);

    transition: var(--transition);

    font-size: var(--fs-lg);

    color: var(--color-primary);

}

.faq-item[open] summary::after {

    content: "−";

}

.faq-content {

    padding-inline: var(--space-lg);

    padding-bottom: var(--space-lg);

}

/* =====================================
   MESSAGE CARD
===================================== */

.message-card {

    background: var(--color-white);

    padding: var(--space-2xl);

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

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

}

/* =====================================
   FACILITY FEATURE
===================================== */

.facility-feature-list {

    display: grid;

    gap: var(--space-3xl);

}

.facility-feature {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: var(--space-3xl);

    align-items: center;

}

.facility-feature.reverse .facility-feature-image {

    order: 2;

}

.facility-feature.reverse .facility-feature-content {

    order: 1;

}

.facility-feature-image img {

    width: 100%;

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

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

}

.facility-feature-content h3 {

    margin-bottom: var(--space-md);

    color: var(--color-heading);

}

/* =====================================
   GALLERY
===================================== */

.gallery-filter {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: var(--space-md);

}

/* ========================= */

.gallery-grid {

    display: grid;

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

    gap: var(--space-lg);

}



/* =====================================
   GALLERY LIGHTBOX
===================================== */

.gallery-item {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

    .gallery-item:focus-visible {
        outline: 3px solid var(--color-accent);
        outline-offset: 4px;
    }

    .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: var(--transition);
    }

    .gallery-item:hover img {
        transform: scale(1.05);
    }


/* =========================
   LIGHTBOX OVERLAY
========================= */

.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    background: var(--gallery-overlay);
    overflow-y: auto;
}

    .gallery-lightbox[hidden] {
        display: none;
    }


/* =========================
   LIGHTBOX CONTENT
========================= */

.gallery-lightbox-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: var(--container-width);
    min-height: 100%;
    padding-block: var(--space-2xl);
}


/* =========================
   IMAGE WRAPPER
========================= */

.gallery-lightbox-image-wrapper {
    position: relative;
    width: 100%;
    max-width: var(--content-width);
    padding: var(--space-lg);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.gallery-lightbox-image {
    width: 100%;
    max-height: var(--gallery-image-max-height);
    margin-inline: auto;
    object-fit: contain;
    border-radius: var(--radius-md);
}


/* =========================
   IMAGE INFORMATION
========================= */

.gallery-lightbox-info {
    padding-top: var(--space-lg);
}

    .gallery-lightbox-info h2 {
        margin-bottom: var(--space-sm);
        color: var(--color-heading);
        font-size: var(--fs-lg);
        font-weight: var(--fw-semibold);
    }

    .gallery-lightbox-info p {
        margin-bottom: 0;
        color: var(--color-body);
        font-size: var(--fs-sm);
    }


/* =========================
   CLOSE BUTTON
========================= */

.gallery-lightbox-close,
.gallery-lightbox-prev,
.gallery-lightbox-next {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--gallery-control-size);
    height: var(--gallery-control-size);
    padding: 0;
    border: 0;
    border-radius: var(--radius-round);
    background: var(--color-white);
    color: var(--color-heading);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: var(--transition);
}

    .gallery-lightbox-close:hover,
    .gallery-lightbox-prev:hover,
    .gallery-lightbox-next:hover {
        background: var(--color-primary);
        color: var(--color-white);
    }

    .gallery-lightbox-close:focus-visible,
    .gallery-lightbox-prev:focus-visible,
    .gallery-lightbox-next:focus-visible {
        outline: 3px solid var(--color-accent);
        outline-offset: 3px;
    }


/* =========================
   CLOSE POSITION
========================= */

.gallery-lightbox-close {
    top: 0;
    right: 0;
    z-index: 2;
}


/* =========================
   PREVIOUS / NEXT
========================= */

.gallery-lightbox-prev {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.gallery-lightbox-next {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}


/* =====================================
   GALLERY LIGHTBOX - REDUCED MOTION
===================================== */

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

    .gallery-lightbox,
    .gallery-item img,
    .gallery-lightbox-close,
    .gallery-lightbox-prev,
    .gallery-lightbox-next {
        transition: none;
    }
}

/* =========================================================
   GPS KNP - School Galleries Index Page
   ========================================================= */


/* ---------------------------------------------------------
   Gallery Page
   --------------------------------------------------------- */

.school-galleries-page {
    overflow: hidden;
}


/* ---------------------------------------------------------
   Gallery Introduction
   --------------------------------------------------------- */

.gallery-index-intro {
    padding-bottom: 20px;
}

    .gallery-index-intro .section-heading {
        max-width: 760px;
        margin-inline: auto;
    }


/* ---------------------------------------------------------
   Gallery Collections
   --------------------------------------------------------- */

.gallery-index-section {
    padding-top: 40px;
}

.gallery-index-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}


/* ---------------------------------------------------------
   Gallery Card
   --------------------------------------------------------- */

.gallery-index-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

    .gallery-index-card:hover {
        transform: translateY(-5px);
        border-color: var(--color-primary);
        box-shadow: var(--shadow-md);
    }

    .gallery-index-card:focus-visible {
        outline: 3px solid var(--color-primary);
        outline-offset: 4px;
    }


/* ---------------------------------------------------------
   Gallery Image
   --------------------------------------------------------- */

.gallery-index-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--color-surface-alt);
}

    .gallery-index-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.35s ease;
    }

.gallery-index-card:hover .gallery-index-image img {
    transform: scale(1.04);
}


/* ---------------------------------------------------------
   Image Overlay
   --------------------------------------------------------- */

.gallery-index-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 16px;
    background: rgba(0, 0, 0, 0.12);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.gallery-index-card:hover .gallery-index-overlay,
.gallery-index-card:focus-visible .gallery-index-overlay {
    opacity: 1;
}


/* ---------------------------------------------------------
   View Icon
   --------------------------------------------------------- */

.gallery-index-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    font-size: 0.9rem;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.gallery-index-card:hover .gallery-index-view {
    background: var(--color-primary);
    color: #ffffff;
    transform: translateX(2px);
}


/* ---------------------------------------------------------
   Gallery Content
   --------------------------------------------------------- */

.gallery-index-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 22px;
}

.gallery-index-category {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--color-accent);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
}

.gallery-index-content h2 {
    margin: 0 0 10px;
    color: var(--color-heading);
    font-size: 1.3rem;
    line-height: 1.3;
}

.gallery-index-content p {
    margin: 0 0 20px;
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
}


/* ---------------------------------------------------------
   View Gallery Link
   --------------------------------------------------------- */

.gallery-index-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-top: auto;
    color: var(--color-primary);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
}

    .gallery-index-link i {
        transition: transform 0.2s ease;
    }

.gallery-index-card:hover .gallery-index-link i {
    transform: translateX(4px);
}


/* ---------------------------------------------------------
   Gallery CTA
   --------------------------------------------------------- */

.gallery-index-cta {
    padding-top: 50px;
    /*border-top:1px solid #eee*/
}

.gallery-index-cta-content {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 32px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

    .gallery-index-cta-content .section-subtitle {
        display: inline-block;
        margin-bottom: 8px;
    }

    .gallery-index-cta-content h2 {
        margin: 0 0 12px;
        color: var(--color-heading);
        font-size: clamp(1.6rem, 4vw, 2.2rem);
        line-height: 1.25;
    }

    .gallery-index-cta-content p {
        max-width: 680px;
        margin: 0;
        color: var(--color-text-muted);
        line-height: 1.7;
    }

.gallery-index-cta-action {
    flex-shrink: 0;
}

    .gallery-index-cta-action .btn {
        width: 100%;
        justify-content: center;
    }


/* ==================================================
   HOME - PRE-SCHOOL BANNER
================================================== */

.zi-home-preschool-section {
    padding: var(--section-padding-mobile) 0;
    background: var(--color-background);
}


/* ==================================================
   BANNER
================================================== */

.zi-home-preschool-banner {
    position: relative;
    display: flex;
    overflow: hidden;
    min-height: 320px;
    background-color: var(--color-primary-dark);
    background-image: url("/images/preschool-banner.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}


/* ==================================================
   OVERLAY
================================================== */

.zi-home-preschool-overlay {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--space-3xl) var(--space-xl);
    background: linear-gradient( 90deg, rgba(15, 94, 89, 0.96) 0%, rgba(15, 94, 89, 0.88) 42%, rgba(15, 94, 89, 0.40) 75%, rgba(15, 94, 89, 0.12) 100% );
}


/* ==================================================
   CONTENT
================================================== */

.zi-home-preschool-content {
    position: relative;
    z-index: var(--z-header);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: var(--content-width);
    color: var(--color-white);
    text-align: left;
}


/* ==================================================
   SUBTITLE
================================================== */

.zi-home-preschool-subtitle {
    margin-bottom: var(--space-sm);
    color: var(--color-primary-light);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
}


/* ==================================================
   TITLE
================================================== */

.zi-home-preschool-title {
    margin: 0;
    color: var(--color-white);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    line-height: 1.2;
}


/* ==================================================
   DESCRIPTION
================================================== */

.zi-home-preschool-text {
    max-width: 620px;
    margin: var(--space-md) 0 0;
    color: var(--color-white);
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    line-height: 1.7;
}


/* ==================================================
   BUTTON
================================================== */

.zi-home-preschool-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding: var(--space-sm) var(--space-lg);
    background: var(--color-accent);
    color: var(--color-white);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: 1;
    text-decoration: none;
    transition: var(--transition);
}

    .zi-home-preschool-button i {
        transition: var(--transition);
    }

    .zi-home-preschool-button:hover {
        background: var(--color-accent-hover);
        border-color: var(--color-accent-hover);
        color: var(--color-white);
    }

        .zi-home-preschool-button:hover i {
            transform: translateX(var(--space-xs));
        }

    .zi-home-preschool-button:focus-visible {
        outline: 2px solid var(--color-white);
        outline-offset: var(--space-xs);
    }


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

@media (min-width: 48rem) {

    .zi-home-preschool-banner {
        min-height: 360px;
    }

    .zi-home-preschool-overlay {
        padding: var(--space-4xl) var(--space-2xl);
    }

    .zi-home-preschool-content {
        max-width: 60%;
    }

    .zi-home-preschool-title {
        font-size: var(--fs-2xl);
    }

    .zi-home-preschool-text {
        font-size: var(--fs-md);
    }
}


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

@media (min-width: 64rem) {

    .zi-home-preschool-section {
        padding: var(--section-padding) 0;
    }

    .zi-home-preschool-banner {
        min-height: 380px;
    }

    .zi-home-preschool-overlay {
        padding: var(--space-4xl) var(--space-2xl);
    }

    .zi-home-preschool-content {
        max-width: 50%;
    }

    .zi-home-preschool-title {
        font-size: var(--fs-xl);
    }
}
/* ---------------------------------------------------------
   Responsive - Tablet
   --------------------------------------------------------- */

@media (min-width: 576px) {

    .gallery-index-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 26px;
    }

    .gallery-index-content {
        padding: 24px;
    }

    .gallery-index-cta-content {
        padding: 36px;
    }
}


/* ---------------------------------------------------------
   Responsive - Desktop
   --------------------------------------------------------- */

@media (min-width: 992px) {

    .gallery-index-intro {
        padding-bottom: 30px;
    }

    .gallery-index-section {
        padding-top: 45px;
    }

    .gallery-index-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .gallery-index-cta {
        padding-top: 60px;
    }

    .gallery-index-cta-content {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
        padding: 40px;
        background-color:var(--color-surface);
    }

    .gallery-index-cta-action .btn {
        width: auto;
        white-space: nowrap;
    }
}

/* =====================================
   ACADEMIC PATHWAY
===================================== */

.academic-pathway {

    display: grid;

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

    gap: var(--space-lg);

}

.pathway-item {

    background: var(--color-white);

    padding: var(--space-xl);

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

    text-align: center;

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

}

a.pathway-item {
    border:1px solid var(--color-primary)
}

.pathway-number {
    width: 60px;
    height: 60px;
    margin-inline: auto;
    margin-bottom: var(--space-md);
    border-radius: var(--radius-round);
    background: var(--color-primary);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-bold);
}

.academic-feature-list {

    margin-top: var(--space-lg);

    padding-left: var(--space-lg);

}

.academic-feature-list li {

    margin-bottom: var(--space-sm);

}

/* =====================================
   CBSE PAGE
===================================== */

.cbse-info-grid {

    display: grid;

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

    gap: var(--space-lg);

}

.cbse-info-card {

    background: var(--color-white);

    padding: var(--space-xl);

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

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

}

/* ========================= */

.table-wrapper {

    overflow-x: auto;

}

.info-table {

    width: 100%;

    border-collapse: collapse;

    background: var(--color-white);

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

    overflow: hidden;

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

}

.info-table th,
.info-table td {

    padding: var(--space-lg);

    text-align: left;

    border-bottom: 1px solid var(--color-border);

}

.info-table th {
/*
    width: 25%;*/

    color: var(--color-heading);
    background-color: var(--color-border);

}

/* ========================= */

.document-grid {

    display: grid;

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

    gap: var(--space-lg);

}

.document-card {

    background: var(--color-white);

    padding: var(--space-xl);

    text-align: center;

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

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

    text-decoration: none;

    color: inherit;

    transition: var(--transition);

}

.document-card:hover {

    transform: translateY(-4px);

}

.document-card i {

    font-size: var(--fs-2xl);

    color: var(--color-accent);

    margin-bottom: var(--space-md);

}


/* =====================================
   DOWNLOAD SECTION
===================================== */

.download-section {

    text-align: center;

    background: var(--color-white);

    padding: var(--space-2xl);

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

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

}

.download-section p {

    margin-bottom: var(--space-lg);

}

/* =====================================
   NOTICES
===================================== */

.notice-grid {
    display: grid;
    gap: var(--space-lg);
}

.notice-card {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--space-lg);
    background: var(--color-white);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.notice-date {
    text-align: center;
}

    .notice-date span {
        display: block;
        font-size: var(--fs-3xl);
        font-weight: var(--fw-bold);
        color: var(--color-primary);
    }

.notice-content h3 {
    margin-bottom: var(--space-sm);
}

.notice-content a {
    color: var(--color-primary);
    font-weight: var(--fw-semibold);
}

/* =====================================
   NEWS & EVENTS
===================================== */

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.news-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.news-card-image img {
    width: 100%;
    display: block;
}

.news-card-content {
    padding: var(--space-lg);
}

.event-list {
    display: grid;
    gap: var(--space-lg);
}

.event-item {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.event-date {
    text-align: center;
}

    .event-date span {
        display: block;
        font-size: var(--fs-2xl);
        font-weight: var(--fw-bold);
        color: var(--color-primary);
    }

/* =====================================
   ACHIEVEMENTS
===================================== */

.achievement-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.achievement-card {
    background: var(--color-white);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
}

    .achievement-card i {
        font-size: var(--fs-3xl);
        color: var(--color-primary);
        margin-bottom: var(--space-md);
    }

/* =====================================
   ADMISSION PROCESS
===================================== */

.admission-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

.admission-step {
    background: var(--color-white);
    padding: var(--space-xl);
    text-align: center;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.step-number {
    width: 60px;
    height: 60px;
    margin-inline: auto;
    margin-bottom: var(--space-md);
    border-radius: var(--radius-round);
    background: var(--color-primary);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-bold);
}
/* =====================================
   ADMISSION ENQUIRY
===================================== */

.enquiry-form {
    background: var(--color-white);
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    margin-bottom:var(--space-lg)
}


/* =====================================
   DOWNLOAD FORMS
===================================== */

.download-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.download-card {
    background: var(--color-white);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
}

    .download-card i {
        font-size: var(--fs-3xl);
        color: var(--color-primary);
        margin-bottom: var(--space-md);
    }

    .download-card h3 {
        margin-bottom: var(--space-md);
    }