/* ================= RESET & BASE ================= */

* {
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
}

body {
    overflow-x: hidden;
}

/* ================= NAVIGATION ================= */

nav {
    display: flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
}

    nav img {
        width: 150px;
    }

.nav-links {
    flex: 1;
    text-align: right;
}

    .nav-links ul li {
        list-style: none;
        display: inline-block;
        padding: 8px 12px;
        position: relative;
    }

        .nav-links ul li a {
            color: #fff;
            text-decoration: none;
            font-size: 13px;
        }

        .nav-links ul li::after {
            content: '';
            width: 0%;
            height: 2px;
            background: #28a745;
            display: block;
            margin: auto;
            transition: 0.5s;
        }

        .nav-links ul li:hover::after {
            width: 100%;
        }

nav .fa {
    display: none;
}

@media(max-width: 1000px) {

    .nav-links ul li {
        display: block;
    }

    .nav-links {
        position: fixed;
        background: #28a745;
        height: 100vh;
        width: 200px;
        top: 0;
        right: -200px;
        text-align: left;
        z-index: 2;
        transition: right 1s;
    }

    nav .fa {
        display: block;
        color: #fff;
        margin: 10px;
        font-size: 22px;
        cursor: pointer;
    }

    .nav-links ul {
        padding: 30px;
    }

    .nav-links.active {
        right: 0;
    }
}

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

.header {
    min-height: 100vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)), url(images/homepage.jpeg);
    background-position: center;
    background-size: cover;
    position: relative;
}

.text-box {
    width: 90%;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

    .text-box h1 {
        font-size: 56px;
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 20px;
    }

    .text-box p {
        margin: 0 auto 40px;
        font-size: 15px;
        color: rgba(255,255,255,0.9);
        max-width: 700px;
        line-height: 1.8;
    }

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

@media(max-width: 1000px) {
    .text-box h1 {
        font-size: 28px;
    }

    .text-box p {
        font-size: 14px;
    }
}

@media(max-width: 600px) {
    .text-box h1 {
        font-size: 22px;
    }
}
/* ================= SHARED ================= */

.section-subtext {
    max-width: 650px;
    margin: 12px auto 0;
    color: #666;
    font-size: 15px;
    line-height: 1.7;
}

.index-tag {
    display: inline-block;
    background: #e8f5e9;
    color: #28a745;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 15px;
}

/* ================= CTA BUTTONS ================= */

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.cta-btn {
    padding: 13px 32px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    transition: 0.3s ease;
}

    .cta-btn.primary {
        background: #28a745;
        color: white;
        box-shadow: 0 6px 18px rgba(40,167,69,0.35);
    }

        .cta-btn.primary:hover {
            background: #1e7e34;
            transform: translateY(-4px);
        }

    .cta-btn.secondary {
        background: transparent;
        border: 2px solid #fff;
        color: #fff;
    }

        .cta-btn.secondary:hover {
            background: #fff;
            color: #000;
            transform: translateY(-4px);
        }

/* ================= WHY CHOOSE US ================= */

.WhyChooseUs {
    width: 80%;
    margin: auto;
    text-align: center;
    padding: 80px 0;
}

    .WhyChooseUs h1 {
        font-size: 34px;
        font-weight: 700;
        color: #1a1a1a;
    }

.row {
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    gap: 25px;
}

.WhyChooseUs-col {
    flex: 1;
    background: #f7f9fb;
    border-radius: 16px;
    padding: 35px 25px;
    box-sizing: border-box;
    transition: 0.3s ease;
    border-top: 4px solid #28a745;
}

    .WhyChooseUs-col:hover {
        transform: translateY(-6px);
        box-shadow: 0 14px 30px rgba(0,0,0,0.12);
        background: #fff;
    }

.wcu-icon {
    font-size: 40px;
    margin-bottom: 15px;
}

.WhyChooseUs-col h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #1a1a1a;
    text-align: center;
}

.WhyChooseUs-col p {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
    text-align: center;
}

@media(max-width: 1000px) {
    .WhyChooseUs {
        width: 90%;
    }

    .row {
        flex-direction: column;
    }
}

/* ================= EXPLORE SERVICES ================= */

.ExploreServices {
    padding: 80px 0;
    background: #f7f9fb;
}

.explore-inner {
    width: 80%;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 70px;
}

.explore-text {
    flex: 1;
}

    .explore-text h1 {
        font-size: 34px;
        font-weight: 700;
        color: #1a1a1a;
        margin-bottom: 15px;
        text-align: left;
    }

    .explore-text p {
        font-size: 15px;
        color: #666;
        line-height: 1.8;
        margin-bottom: 5px;
    }

.services-divider {
    width: 100%;
    height: 2px;
    margin: 25px 0;
    background: linear-gradient(to right, #28a745, transparent);
}

.services-btn {
    display: inline-block;
    padding: 13px 32px;
    background: #28a745;
    color: white;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 30px;
    transition: all 0.3s ease;
    box-shadow: 0 6px 15px rgba(40,167,69,0.3);
}

    .services-btn:hover {
        background: #1e7e34;
        transform: translateY(-4px);
        box-shadow: 0 12px 25px rgba(40,167,69,0.4);
    }

.explore-cards {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.explore-card {
    background: #fff;
    border-radius: 16px;
    padding: 25px 20px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.07);
    transition: 0.3s ease;
}

    .explore-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 28px rgba(0,0,0,0.12);
    }

    .explore-card span {
        font-size: 34px;
        display: block;
        margin-bottom: 10px;
    }

    .explore-card h3 {
        font-size: 15px;
        font-weight: 600;
        color: #1a1a1a;
        margin-bottom: 6px;
    }

    .explore-card p {
        font-size: 13px;
        color: #28a745;
        font-weight: 500;
    }

@media(max-width: 1000px) {
    .explore-inner {
        flex-direction: column;
        width: 90%;
        gap: 40px;
    }

    .explore-text h1 {
        text-align: center;
    }

    .explore-text p {
        text-align: center;
    }
}

@media(max-width: 600px) {
    .explore-cards {
        grid-template-columns: 1fr;
    }
}

/* ================= OUR PURPOSE ================= */

.our-purpose {
    width: 80%;
    margin: auto;
    text-align: center;
    padding: 80px 0;
}

    .our-purpose h1 {
        font-size: 34px;
        font-weight: 700;
        color: #1a1a1a;
    }

.purpose-row {
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    gap: 25px;
}

.purpose-col {
    flex: 1;
    background: #f7f9fb;
    border-radius: 16px;
    padding: 40px 30px;
    box-sizing: border-box;
    transition: 0.3s ease;
}

    .purpose-col:hover {
        transform: translateY(-6px);
        box-shadow: 0 14px 30px rgba(0,0,0,0.12);
        background: #fff;
    }

.purpose-icon {
    font-size: 42px;
    margin-bottom: 15px;
}

.purpose-col h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #1a1a1a;
    text-align: center;
}

.purpose-col p {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
    text-align: center;
}

@media(max-width: 1000px) {
    .our-purpose {
        width: 90%;
    }

    .purpose-row {
        flex-direction: column;
    }
}

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

.gallery {
    width: 80%;
    margin: auto;
    text-align: center;
    padding: 80px 0;
}

    .gallery h1 {
        font-size: 34px;
        font-weight: 700;
        color: #1a1a1a;
    }

.gallery-grid {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

    .gallery-grid img {
        width: 100%;
        height: 220px;
        border-radius: 14px;
        cursor: pointer;
        object-fit: cover;
        display: block;
        transition: transform 0.4s, box-shadow 0.4s;
    }

        .gallery-grid img:hover {
            transform: scale(1.05);
            box-shadow: 0 12px 30px rgba(0,0,0,0.2);
        }

@media(max-width: 768px) {
    .gallery {
        width: 90%;
    }
}

/* ================= TESTIMONIALS ================= */

.testimonials {
    width: 80%;
    margin: auto;
    text-align: center;
    padding: 80px 0;
}

    .testimonials h1 {
        font-size: 34px;
        font-weight: 700;
        color: #1a1a1a;
    }

.testimonial-row {
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    gap: 25px;
}

.testimonial-col {
    flex: 1;
    padding: 35px 25px;
    border-radius: 18px;
    box-sizing: border-box;
    transition: 0.3s ease;
    color: #333;
}

    .testimonial-col:nth-child(1) {
        background: #e8f5e9;
    }

    .testimonial-col:nth-child(2) {
        background: #e3f2fd;
    }

    .testimonial-col:nth-child(3) {
        background: #fff3e0;
    }

    .testimonial-col:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.12);
    }

.testimonial-img {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    overflow: hidden;
    border-radius: 50%;
    border: 3px solid #28a745;
}

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

.testimonial-col h3 {
    font-size: 17px;
    margin-bottom: 10px;
    color: #1a1a1a;
}

.stars {
    margin-bottom: 15px;
}

    .stars .fa {
        color: #f4b400;
        font-size: 16px;
        margin: 0 1px;
    }

.testimonial-col p {
    font-size: 14px;
    color: #555;
    line-height: 1.8;
}

@media(max-width: 1000px) {
    .testimonials {
        width: 90%;
    }

    .testimonial-row {
        flex-direction: column;
    }

    .testimonial-col {
        margin-bottom: 20px;
    }
}

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

.cta {
    width: 80%;
    margin: 80px auto;
    text-align: center;
    padding: 70px 30px;
    background: linear-gradient(rgba(4,9,30,0.85), rgba(4,9,30,0.85)), url(images/banner.jpeg);
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    color: #fff;
}

    .cta h1 {
        font-size: 34px;
        margin-bottom: 18px;
        font-weight: 700;
    }

    .cta p {
        font-size: 15px;
        line-height: 1.7;
        color: rgba(255,255,255,0.9);
        max-width: 600px;
        margin: 0 auto 35px;
    }

@media(max-width: 1000px) {
    .cta {
        width: 90%;
        padding: 50px 20px;
    }

        .cta h1 {
            font-size: 24px;
        }
}

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

.footer {
    background: #111;
    color: #fff;
    padding: 60px 0 20px;
}

.footer-container {
    width: 80%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
    text-align: center;
}

.footer-col {
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .footer-col h3 {
        margin-bottom: 20px;
        font-size: 18px;
        color: #fff;
        text-align: center;
    }

    .footer-col p {
        font-size: 14px;
        line-height: 1.8;
        margin-bottom: 10px;
        color: #ccc;
    }

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

        .footer-col ul li {
            margin-bottom: 8px;
        }

            .footer-col ul li a {
                color: #ccc;
                text-decoration: none;
                font-size: 14px;
                transition: 0.3s;
            }

                .footer-col ul li a:hover {
                    color: #28a745;
                    padding-left: 5px;
                }

.footer-social {
    margin-top: 15px;
}

    .footer-social a {
        display: inline-block;
        margin: 0 8px;
        color: #ccc;
        font-size: 20px;
        transition: 0.3s;
    }

        .footer-social a:hover {
            color: #28a745;
            transform: translateY(-3px);
        }

.footer-bottom {
    text-align: center;
    margin-top: 40px;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 15px;
    font-size: 13px;
    color: #aaa;
}

@media(max-width: 1000px) {
    .footer-container {
        flex-direction: column;
        align-items: center;
        width: 90%;
    }

    .footer-col {
        width: 100%;
    }
}
    /*----------------sub-header--------------*/
    .sub-header {
        height: 50vh;
        width: 100%;
        background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/homepage.jpeg);
        background-position: center;
        background-size: cover;
        text-align: center;
        color: #fff;
    }

        .sub-header h1 {
            margin-top: 100px;
        }
    /*----------------intro-services--------------*/

    .intro-services {
        width: 80%;
        margin: auto;
        text-align: center;
        padding: 80px 0;
    }

        .intro-services h2 {
            font-size: 34px;
            margin-bottom: 15px;
        }

    .intro-text {
        max-width: 700px;
        margin: auto;
        margin-bottom: 50px;
        color: #555;
    }
    /* GRID */

    .intro-grid {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 25px;
    }
    /* CARD */

    .intro-card {
        position: relative;
        height: 260px;
        border-radius: 12px;
        overflow: hidden;
    }

        .intro-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
    /* OVERLAY */

    .intro-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(40,167,69,0.9);
        color: white;
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        opacity: 0;
        transition: 0.4s ease;
    }

            .intro-overlay h3 {
                width: 80%;
                margin-left: auto;
                margin-right: auto;
            }

            .intro-overlay p {
                width: 80%;
                margin-left: auto;
                margin-right: auto;
            }

        .intro-card:hover .intro-overlay {
            opacity: 1;
        }

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

        @media(max-width:600px) {
            .intro-grid {
                grid-template-columns: 1fr;
            }
        }
        /* ---------------- SERVICES CARDS ---------------- */

        .services-carousel {
            padding: 90px 0;
            text-align: center;
            background: #f7f9fb;
        }

            .services-carousel h2 {
                font-size: 34px;
                margin-bottom: 10px;
            }

        .services-subtext {
            max-width: 650px;
            margin: auto;
            margin-bottom: 50px;
            color: #666;
        }

        .carousel-container {
            width: 85%;
            margin: auto;
            padding: 20px 0;
        }

        .carousel-track {
            display: flex;
            flex-wrap: wrap;
            gap: 25px;
            justify-content: center;
            align-items: stretch;
        }

        .service-glass-card {
            width: 300px;
            padding: 30px 25px;
            background: #ffffff;
            border-radius: 16px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
            transition: 0.3s;
            display: flex;
            flex-direction: column;
            text-align: center;
        }

            .service-glass-card:hover {
                transform: translateY(-6px);
                box-shadow: 0 14px 30px rgba(0,0,0,0.15);
            }

            .service-glass-card h3 {
                margin-bottom: 10px;
            }

        .service-age {
            font-size: 14px;
            color: #28a745;
            margin-bottom: 15px;
        }

        .service-glass-card ul {
            list-style: none;
            padding: 0;
            text-align: left;
        }

        .service-glass-card li {
            margin-bottom: 8px;
            padding-left: 18px;
            position: relative;
            font-size: 14px;
            color: #555;
        }

            .service-glass-card li::before {
                content: '✓';
                color: #28a745;
                font-weight: 700;
                position: absolute;
                left: 0;
            }

        @media(max-width: 768px) {
            .carousel-container {
                width: 95%;
            }

            .carousel-track {
                gap: 15px;
            }

            .service-glass-card {
                width: 100%;
            }
        }
        /* ---------------- OUR LEARNING APPROACH ---------------- */

        .learning-approach {
            width: 80%;
            margin: auto;
            text-align: center;
            padding: 80px 0;
        }

            .learning-approach h2 {
                font-size: 34px;
                margin-bottom: 15px;
            }

        .learning-subtext {
            max-width: 650px;
            margin: auto;
            margin-bottom: 50px;
            color: #666;
        }

        .approach-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 25px;
            justify-content: center;
        }

        .approach-card {
            width: 280px;
            padding: 35px 25px;
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
            transition: 0.3s;
            text-align: center;
        }

            .approach-card:hover {
                transform: translateY(-6px);
                box-shadow: 0 14px 30px rgba(0,0,0,0.15);
            }

        .approach-icon {
            font-size: 40px;
            margin-bottom: 15px;
        }

        .approach-card h3 {
            margin-bottom: 10px;
            font-size: 18px;
        }

        .approach-card p {
            font-size: 14px;
            color: #666;
            line-height: 1.7;
        }

        @media(max-width: 768px) {
            .approach-card {
                width: 100%;
            }
        }
        /* ---------------- AGE GROUPS ---------------- */

        .age-groups {
            padding: 80px 0;
            background: #f7f9fb;
            text-align: center;
        }

            .age-groups h2 {
                font-size: 34px;
                margin-bottom: 15px;
            }

        .age-subtext {
            max-width: 650px;
            margin: auto;
            margin-bottom: 50px;
            color: #666;
        }

        .age-grid {
            width: 80%;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
            gap: 25px;
            justify-content: center;
        }

        .age-card {
            width: 220px;
            padding: 30px 20px;
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
            transition: 0.3s;
            text-align: center;
            border-top: 5px solid #28a745;
        }

            .age-card:hover {
                transform: translateY(-6px);
                box-shadow: 0 14px 30px rgba(0,0,0,0.15);
            }

            .age-card h3 {
                font-size: 18px;
                margin-bottom: 8px;
                color: #222;
            }

        .age-range {
            font-size: 13px;
            color: #28a745;
            font-weight: 600;
            margin-bottom: 12px;
        }

        .age-card p {
            font-size: 14px;
            color: #666;
            line-height: 1.6;
        }

        @media(max-width: 768px) {
            .age-grid {
                width: 90%;
            }

            .age-card {
                width: 100%;
            }
        }
        /* ---------------- DAILY ACTIVITIES ---------------- */

        .daily-activities {
            width: 80%;
            margin: auto;
            text-align: center;
            padding: 80px 0;
        }

            .daily-activities h2 {
                font-size: 34px;
                margin-bottom: 15px;
            }

        .activities-subtext {
            max-width: 650px;
            margin: auto;
            margin-bottom: 50px;
            color: #666;
            line-height: 1.7;
        }

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

        .activity-card {
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
            background: #fff;
            transition: 0.3s ease;
            text-align: left;
        }

            .activity-card:hover {
                transform: translateY(-6px);
                box-shadow: 0 16px 35px rgba(0,0,0,0.15);
            }

        .activity-img {
            width: 100%;
            height: 220px;
            object-fit: cover;
            display: block;
            transition: transform 0.4s ease;
        }

        .activity-card:hover .activity-img {
            transform: scale(1.05);
        }

        .activity-img-wrap {
            overflow: hidden;
        }

        .activity-tag {
            display: inline-block;
            background: #28a745;
            color: #fff;
            font-size: 12px;
            font-weight: 600;
            padding: 4px 12px;
            border-radius: 20px;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .activity-body {
            padding: 20px 22px 25px;
        }

            .activity-body h3 {
                font-size: 18px;
                margin-bottom: 8px;
                color: #222;
                text-align: left;
            }

            .activity-body p {
                font-size: 14px;
                color: #666;
                line-height: 1.7;
                margin-bottom: 12px;
            }

        .activity-highlights {
            list-style: none;
            padding: 0;
            margin: 0;
        }

            .activity-highlights li {
                font-size: 13px;
                color: #444;
                padding: 4px 0;
                padding-left: 20px;
                position: relative;
            }

                .activity-highlights li::before {
                    content: '✓';
                    color: #28a745;
                    position: absolute;
                    left: 0;
                    font-weight: 700;
                }
        /* schedule strip */

        .activities-schedule {
            margin-top: 60px;
            background: #28a745;
            border-radius: 16px;
            padding: 40px 30px;
            color: #fff;
        }

            .activities-schedule h3 {
                font-size: 24px;
                margin-bottom: 25px;
                text-align: center;
                color: #fff;
            }

        .schedule-row {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
        }

        .schedule-item {
            background: rgba(255,255,255,0.15);
            border-radius: 12px;
            padding: 15px 20px;
            min-width: 150px;
            text-align: center;
            backdrop-filter: blur(4px);
        }

        .schedule-time {
            font-size: 13px;
            font-weight: 700;
            margin-bottom: 5px;
            opacity: 0.85;
        }

        .schedule-label {
            font-size: 13px;
            font-weight: 500;
            line-height: 1.4;
        }

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

        @media(max-width: 600px) {
            .daily-activities {
                width: 90%;
            }

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

            .schedule-item {
                min-width: 120px;
            }
        }
        /* ---------------- HEALTH SAFETY NUTRITION ---------------- */

        .health-safety {
            padding: 80px 0;
            background: #fff;
        }

        .health-safety-inner {
            width: 80%;
            margin: auto;
        }

        .health-safety-header {
            text-align: center;
            margin-bottom: 70px;
        }

            .health-safety-header h2 {
                font-size: 34px;
                margin-bottom: 15px;
            }

            .health-safety-header p {
                max-width: 650px;
                margin: auto;
                color: #666;
                line-height: 1.7;
            }

        .hs-row {
            display: flex;
            align-items: center;
            gap: 60px;
            margin-bottom: 80px;
        }

            .hs-row:last-child {
                margin-bottom: 0;
            }

            .hs-row.reverse {
                flex-direction: row-reverse;
            }

        .hs-img-wrap {
            flex: 1;
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            min-height: 360px;
        }

            .hs-img-wrap img {
                width: 100%;
                height: 360px;
                object-fit: cover;
                display: block;
                transition: transform 0.5s ease;
            }

            .hs-img-wrap:hover img {
                transform: scale(1.05);
            }

        .hs-badge {
            position: absolute;
            top: 20px;
            left: 20px;
            background: #28a745;
            color: #fff;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: 700;
            box-shadow: 0 4px 15px rgba(40,167,69,0.4);
            z-index: 2;
        }

        .hs-row.reverse .hs-badge {
            left: auto;
            right: 20px;
        }

        .hs-content {
            flex: 1;
        }

        .hs-tag {
            display: inline-block;
            background: #e8f5e9;
            color: #28a745;
            font-size: 12px;
            font-weight: 700;
            padding: 5px 14px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            margin-bottom: 15px;
        }

        .hs-content h3 {
            font-size: 26px;
            color: #1a1a1a;
            margin-bottom: 15px;
            text-align: left;
        }

        .hs-content p {
            font-size: 15px;
            color: #666;
            line-height: 1.8;
            margin-bottom: 20px;
        }

        .hs-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

            .hs-list li {
                font-size: 14px;
                color: #444;
                padding: 8px 0;
                padding-left: 28px;
                position: relative;
                border-bottom: 1px solid #f0f0f0;
            }

                .hs-list li:last-child {
                    border-bottom: none;
                }

                .hs-list li::before {
                    content: '✓';
                    color: #28a745;
                    font-weight: 700;
                    position: absolute;
                    left: 0;
                }

        .hs-banner {
            margin-top: 70px;
            background: linear-gradient(135deg, #28a745, #1e7e34);
            border-radius: 20px;
            padding: 50px 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;
            flex-wrap: wrap;
            color: #fff;
        }

        .hs-banner-text h3 {
            font-size: 24px;
            margin-bottom: 10px;
            color: #fff;
            text-align: left;
        }

        .hs-banner-text p {
            font-size: 15px;
            opacity: 0.9;
            line-height: 1.7;
            max-width: 500px;
        }

        .hs-banner-stats {
            display: flex;
            gap: 30px;
            flex-wrap: wrap;
        }

        .hs-stat {
            text-align: center;
            background: rgba(255,255,255,0.15);
            border-radius: 14px;
            padding: 20px 25px;
            min-width: 110px;
        }

        .hs-stat-number {
            font-size: 32px;
            font-weight: 700;
            display: block;
        }

        .hs-stat-label {
            font-size: 13px;
            opacity: 0.85;
            margin-top: 4px;
            display: block;
        }

        @media(max-width: 1000px) {
            .hs-row,
            .hs-row.reverse {
                flex-direction: column;
                gap: 30px;
                margin-bottom: 50px;
            }

            .hs-img-wrap img {
                height: 280px;
            }

            .hs-banner {
                flex-direction: column;
                text-align: center;
            }

            .hs-banner-text h3 {
                text-align: center;
            }

            .hs-banner-stats {
                justify-content: center;
            }
        }

        @media(max-width: 600px) {
            .health-safety-inner {
                width: 90%;
            }

            .hs-content h3 {
                font-size: 22px;
            }

            .hs-banner {
                padding: 35px 25px;
            }

            .hs-stat-number {
                font-size: 26px;
            }
        }
        /* ================= ADMISSION PAGE ================= */

        .admission-header {
            text-align: center;
            margin-bottom: 60px;
        }

            .admission-header h2 {
                font-size: 34px;
                margin-bottom: 15px;
            }

            .admission-header p {
                max-width: 650px;
                margin: auto;
                color: #666;
                line-height: 1.7;
            }
        /* ---------------- HOW TO APPLY ---------------- */

        .how-to-apply {
            padding: 80px 0;
            background: #fff;
        }

        .apply-inner {
            width: 80%;
            margin: auto;
        }

        .steps-row {
            display: flex;
            justify-content: center;
            gap: 0;
            position: relative;
        }

        .step-item {
            flex: 1;
            max-width: 300px;
            text-align: center;
            padding: 0 20px;
            position: relative;
        }

        .step-number {
            width: 50px;
            height: 50px;
            background: #28a745;
            color: #fff;
            border-radius: 50%;
            font-size: 20px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 10px;
            position: relative;
            z-index: 2;
        }

        .step-connector {
            position: absolute;
            top: 25px;
            left: 50%;
            width: 100%;
            height: 2px;
            background: #28a745;
            opacity: 0.3;
            z-index: 1;
        }

        .hide-last {
            display: none;
        }

        .step-icon {
            font-size: 36px;
            margin-bottom: 15px;
        }

        .step-item h3 {
            font-size: 18px;
            margin-bottom: 10px;
            color: #222;
        }

        .step-item p {
            font-size: 14px;
            color: #666;
            line-height: 1.7;
        }

        @media(max-width: 768px) {
            .steps-row {
                flex-direction: column;
                align-items: center;
                gap: 40px;
            }

            .step-connector {
                display: none;
            }

            .step-item {
                max-width: 100%;
            }
        }
        /* ---------------- REQUIREMENTS ---------------- */

        .admission-requirements {
            padding: 80px 0;
            background: #f7f9fb;
        }

        .req-inner {
            width: 80%;
            margin: auto;
            display: flex;
            align-items: center;
            gap: 60px;
        }

        .req-img-wrap {
            flex: 1;
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            min-height: 420px;
        }

            .req-img-wrap img {
                width: 100%;
                height: 420px;
                object-fit: cover;
                display: block;
            }

        .req-img-badge {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: #28a745;
            color: #fff;
            border-radius: 12px;
            padding: 12px 18px;
            text-align: center;
            font-size: 13px;
            font-weight: 600;
        }

            .req-img-badge span {
                font-size: 24px;
                display: block;
                margin-bottom: 4px;
            }

        .req-content {
            flex: 1;
        }

        .req-tag {
            display: inline-block;
            background: #e8f5e9;
            color: #28a745;
            font-size: 12px;
            font-weight: 700;
            padding: 5px 14px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            margin-bottom: 15px;
        }

        .req-content h2 {
            font-size: 30px;
            margin-bottom: 15px;
            text-align: left;
        }

        .req-content > p {
            font-size: 15px;
            color: #666;
            line-height: 1.8;
            margin-bottom: 25px;
        }

        .req-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

            .req-list li {
                display: flex;
                align-items: flex-start;
                gap: 15px;
                padding: 15px 0;
                border-bottom: 1px solid #eee;
            }

                .req-list li:last-child {
                    border-bottom: none;
                }

        .req-icon {
            font-size: 24px;
            flex-shrink: 0;
        }

        .req-list li strong {
            display: block;
            font-size: 15px;
            color: #222;
            margin-bottom: 3px;
        }

        .req-list li p {
            font-size: 13px;
            color: #888;
            margin: 0;
        }

        @media(max-width: 1000px) {
            .req-inner {
                flex-direction: column;
                gap: 30px;
            }

            .req-img-wrap,
            .req-img-wrap img {
                height: 280px;
                width: 100%;
            }

            .req-content h2 {
                font-size: 26px;
            }
        }
        /* ---------------- APPLICATION FORM ---------------- */

        .application-form-section {
            padding: 80px 0;
            background: #fff;
        }

        .form-inner {
            width: 75%;
            margin: auto;
        }

        .application-form {
            background: #f7f9fb;
            border-radius: 20px;
            padding: 50px 40px;
        }

        .form-section-title {
            font-size: 16px;
            font-weight: 700;
            color: #28a745;
            margin: 30px 0 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e8f5e9;
            display: flex;
            align-items: center;
            gap: 10px;
        }

            .form-section-title:first-child {
                margin-top: 0;
            }

        .form-row {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }

        .form-group {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

            .form-group.full-width {
                flex: 1 1 100%;
            }

            .form-group label {
                font-size: 13px;
                font-weight: 600;
                color: #444;
                margin-bottom: 7px;
            }

            .form-group input,
            .form-group select,
            .form-group textarea {
                padding: 12px 15px;
                border: 1px solid #ddd;
                border-radius: 10px;
                font-size: 14px;
                font-family: "Poppins", sans-serif;
                color: #333;
                background: #fff;
                outline: none;
                transition: border 0.3s;
            }

                .form-group input:focus,
                .form-group select:focus,
                .form-group textarea:focus {
                    border-color: #28a745;
                    box-shadow: 0 0 0 3px rgba(40,167,69,0.1);
                }

            .form-group textarea {
                resize: vertical;
            }

        .form-submit {
            text-align: center;
            margin-top: 35px;
        }

        .submit-btn {
            display: inline-block;
            padding: 15px 45px;
            background: #28a745;
            color: #fff;
            border: none;
            border-radius: 30px;
            font-size: 16px;
            font-weight: 600;
            font-family: "Poppins", sans-serif;
            cursor: pointer;
            transition: 0.3s ease;
            box-shadow: 0 6px 20px rgba(40,167,69,0.3);
        }

            .submit-btn:hover {
                background: #1e7e34;
                transform: translateY(-3px);
                box-shadow: 0 10px 25px rgba(40,167,69,0.4);
            }

        .form-note {
            margin-top: 12px;
            font-size: 13px;
            color: #999;
        }
        /* success message */
        .form-success {
            display: none;
            text-align: center;
            padding: 60px 20px;
            background: #f7f9fb;
            border-radius: 20px;
        }

        .success-icon {
            font-size: 60px;
            margin-bottom: 20px;
        }

        .form-success h3 {
            font-size: 28px;
            margin-bottom: 15px;
            color: #28a745;
        }

        .form-success p {
            font-size: 15px;
            color: #666;
            line-height: 1.7;
            margin-bottom: 10px;
        }

        @media(max-width: 1000px) {
            .form-inner {
                width: 90%;
            }

            .application-form {
                padding: 30px 20px;
            }

            .form-row {
                flex-direction: column;
                gap: 0;
            }
        }
        /* ---------------- HOURS & INFO ---------------- */

        .admission-info {
            padding: 80px 0;
            background: #f7f9fb;
        }

        .info-inner {
            width: 80%;
            margin: auto;
            display: flex;
            gap: 30px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .info-box {
            flex: 1;
            min-width: 240px;
            background: #fff;
            border-radius: 16px;
            padding: 35px 25px;
            text-align: center;
            box-shadow: 0 8px 20px rgba(0,0,0,0.07);
            transition: 0.3s;
        }

            .info-box:hover {
                transform: translateY(-5px);
                box-shadow: 0 14px 30px rgba(0,0,0,0.13);
            }

        .info-icon {
            font-size: 40px;
            margin-bottom: 15px;
        }

        .info-box h3 {
            font-size: 18px;
            margin-bottom: 20px;
            color: #222;
        }

        .info-box ul {
            list-style: none;
            padding: 0;
            margin: 0 0 10px;
        }

            .info-box ul li {
                display: flex;
                justify-content: space-between;
                font-size: 14px;
                padding: 8px 0;
                border-bottom: 1px solid #f0f0f0;
                color: #555;
            }

                .info-box ul li:last-child {
                    border-bottom: none;
                }

        .info-box p {
            font-size: 14px;
            color: #666;
            line-height: 1.7;
            margin-bottom: 15px;
        }

        .info-btn {
            display: block;
            padding: 11px 20px;
            background: #28a745;
            color: #fff;
            border-radius: 25px;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 10px;
            transition: 0.3s;
        }

            .info-btn:hover {
                background: #1e7e34;
                transform: translateY(-2px);
            }

            .info-btn.outline {
                background: transparent;
                border: 2px solid #28a745;
                color: #28a745;
            }

                .info-btn.outline:hover {
                    background: #28a745;
                    color: #fff;
                }

        @media(max-width: 768px) {
            .info-inner {
                width: 90%;
                flex-direction: column;
            }
        }
        /* ---------------- FAQ ---------------- */

        .admission-faq {
            padding: 80px 0;
            background: #fff;
        }

        .faq-inner {
            width: 75%;
            margin: auto;
        }

        .faq-list {
            margin-top: 10px;
        }

        .faq-item {
            border: 1px solid #eee;
            border-radius: 12px;
            margin-bottom: 12px;
            overflow: hidden;
            transition: 0.3s;
        }

            .faq-item.active {
                border-color: #28a745;
                box-shadow: 0 4px 15px rgba(40,167,69,0.1);
            }

        .faq-question {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 18px 22px;
            font-size: 15px;
            font-weight: 600;
            color: #222;
            cursor: pointer;
            transition: 0.3s;
            background: #fff;
        }

            .faq-question:hover {
                background: #f7f9fb;
                color: #28a745;
            }

        .faq-item.active .faq-question {
            background: #e8f5e9;
            color: #28a745;
        }

        .faq-question .fa {
            transition: transform 0.3s;
            color: #28a745;
            flex-shrink: 0;
        }

        .faq-item.active .faq-question .fa {
            transform: rotate(180deg);
        }

        .faq-answer {
            display: none;
            padding: 0 22px 20px;
            font-size: 14px;
            color: #666;
            line-height: 1.8;
            background: #fff;
        }

        .faq-item.active .faq-answer {
            display: block;
        }

        @media(max-width: 768px) {
            .faq-inner {
                width: 90%;
            }
        }
        /* ================= ABOUT PAGE ================= */

        .about-tag {
            display: inline-block;
            background: #e8f5e9;
            color: #28a745;
            font-size: 12px;
            font-weight: 700;
            padding: 5px 14px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            margin-bottom: 15px;
        }

        .about-section-header {
            text-align: center;
            margin-bottom: 60px;
        }

            .about-section-header h2 {
                font-size: 34px;
                margin-bottom: 15px;
                color: #222;
            }

            .about-section-header p {
                max-width: 600px;
                margin: auto;
                color: #666;
                line-height: 1.7;
            }

            .about-section-header.light h2 {
                color: #fff;
            }

            .about-section-header.light p {
                color: rgba(255,255,255,0.85);
            }
        /* ---------------- OUR STORY ---------------- */

        .our-story {
            padding: 80px 0;
            background: #fff;
        }

        .story-inner {
            width: 80%;
            margin: auto;
            display: flex;
            align-items: center;
            gap: 70px;
        }

        .story-img-wrap {
            flex: 1;
            border-radius: 20px;
            overflow: hidden;
            position: relative;
        }

            .story-img-wrap img {
                width: 100%;
                height: 480px;
                object-fit: cover;
                display: block;
                transition: transform 0.5s ease;
            }

            .story-img-wrap:hover img {
                transform: scale(1.04);
            }

        .story-badge {
            position: absolute;
            bottom: 25px;
            left: 25px;
            background: #28a745;
            color: #fff;
            border-radius: 14px;
            padding: 12px 20px;
            text-align: center;
            box-shadow: 0 6px 20px rgba(40,167,69,0.35);
        }

            .story-badge span {
                font-size: 26px;
                display: block;
                margin-bottom: 4px;
            }

            .story-badge p {
                font-size: 13px;
                font-weight: 600;
                margin: 0;
            }

        .story-content {
            flex: 1;
        }

            .story-content h2 {
                font-size: 32px;
                margin-bottom: 20px;
                color: #1a1a1a;
                text-align: left;
            }

            .story-content p {
                font-size: 15px;
                color: #666;
                line-height: 1.85;
                margin-bottom: 16px;
            }

        .story-highlights {
            margin-top: 30px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .story-highlight-item {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 14px;
            font-weight: 500;
            color: #333;
            background: #f7f9fb;
            padding: 12px 18px;
            border-radius: 10px;
            border-left: 4px solid #28a745;
        }

        .highlight-icon {
            font-size: 20px;
        }

        @media(max-width: 1000px) {
            .story-inner {
                flex-direction: column;
                gap: 35px;
                width: 90%;
            }

            .story-img-wrap img {
                height: 300px;
            }

            .story-content h2 {
                font-size: 26px;
            }
        }
        /* ---------------- MISSION & VISION ---------------- */

        .mission-vision {
            padding: 80px 0;
            background: #f7f9fb;
        }

        .mv-inner {
            width: 80%;
            margin: auto;
            display: flex;
            align-items: stretch;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 40px rgba(0,0,0,0.08);
        }

        .mv-box {
            flex: 1;
            padding: 60px 50px;
            text-align: center;
        }

            .mv-box.mission {
                background: #28a745;
                color: #fff;
            }

            .mv-box.vision {
                background: #fff;
                color: #222;
            }

        .mv-divider {
            width: 4px;
            background: #e8f5e9;
            flex-shrink: 0;
        }

        .mv-icon {
            font-size: 48px;
            margin-bottom: 20px;
        }

        .mv-box h3 {
            font-size: 24px;
            margin-bottom: 18px;
            text-align: center;
        }

        .mv-box.mission h3 {
            color: #fff;
        }

        .mv-box.vision h3 {
            color: #222;
        }

        .mv-box p {
            font-size: 15px;
            line-height: 1.85;
        }

        .mv-box.mission p {
            color: rgba(255,255,255,0.9);
        }

        .mv-box.vision p {
            color: #666;
        }

        @media(max-width: 768px) {
            .mv-inner {
                flex-direction: column;
                width: 90%;
            }

            .mv-divider {
                width: 100%;
                height: 4px;
            }

            .mv-box {
                padding: 40px 30px;
            }
        }
        /* ---------------- OUR VALUES ---------------- */

        .our-values {
            padding: 80px 0;
            background: #fff;
        }

        .values-inner {
            width: 80%;
            margin: auto;
        }

        .values-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 25px;
            justify-content: center;
        }

        .value-item {
            background: #f7f9fb;
            border-radius: 18px;
            padding: 40px 30px;
            width: 200px;
            text-align: center;
            box-shadow: 0 8px 25px rgba(0,0,0,0.06);
            transition: 0.3s ease;
            position: relative;
            overflow: hidden;
        }

            .value-item:hover {
                transform: translateY(-8px);
                box-shadow: 0 16px 40px rgba(0,0,0,0.12);
                background: #fff;
            }

        .value-number {
            position: absolute;
            top: 12px;
            right: 16px;
            font-size: 13px;
            font-weight: 700;
            color: #d4edda;
            letter-spacing: 1px;
        }

        .value-icon {
            font-size: 42px;
            margin-bottom: 15px;
        }

        .value-item h3 {
            font-size: 17px;
            color: #1a1a1a;
            margin-bottom: 10px;
        }

        .value-item p {
            font-size: 13px;
            color: #888;
            line-height: 1.7;
        }

        @media(max-width: 768px) {
            .values-inner {
                width: 90%;
            }

            .value-item {
                width: 100%;
            }
        }
        /* ---------------- FUN FACTS ---------------- */

        .fun-facts {
            padding: 80px 0;
            background: #f7f9fb;
        }

        .facts-inner {
            width: 80%;
            margin: auto;
        }

        .facts-grid {
            display: flex;
            flex-direction: column;
            gap: 35px;
        }

        .fact-item {
            display: flex;
            align-items: center;
            gap: 40px;
            background: #fff;
            border-radius: 20px;
            padding: 35px 40px;
            box-shadow: 0 6px 25px rgba(0,0,0,0.06);
            transition: 0.3s ease;
        }

            .fact-item:hover {
                transform: translateY(-4px);
                box-shadow: 0 12px 35px rgba(0,0,0,0.11);
            }

            .fact-item.reverse {
                flex-direction: row-reverse;
                background: #28a745;
            }

                .fact-item.reverse .fact-content h3 {
                    color: #fff;
                }

                .fact-item.reverse .fact-content p {
                    color: rgba(255,255,255,0.88);
                }

        .fact-bubble {
            min-width: 110px;
            height: 110px;
            border-radius: 50%;
            background: #e8f5e9;
            color: #28a745;
            font-size: 28px;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            text-align: center;
        }

        .fact-item.reverse .fact-bubble {
            background: rgba(255,255,255,0.2);
            color: #fff;
        }

        .fact-content h3 {
            font-size: 20px;
            color: #1a1a1a;
            margin-bottom: 10px;
            text-align: left;
        }

        .fact-content p {
            font-size: 15px;
            color: #666;
            line-height: 1.8;
            margin: 0;
        }

        @media(max-width: 768px) {
            .facts-inner {
                width: 90%;
            }

            .fact-item,
            .fact-item.reverse {
                flex-direction: column;
                text-align: center;
                padding: 30px 25px;
                gap: 20px;
            }

            .fact-content h3 {
                text-align: center;
            }
        }
        /* ---------------- COMMUNITY & EVENTS ---------------- */

        .community-events {
            padding: 80px 0;
            background: #fff;
        }

        .events-inner {
            width: 80%;
            margin: auto;
        }

        .events-grid {
            display: flex;
            gap: 20px;
            align-items: stretch;
            height: 600px;
        }

        .event-card {
            position: relative;
            border-radius: 18px;
            overflow: hidden;
            flex: 1;
        }

            .event-card img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                transition: transform 0.5s ease;
            }

            .event-card:hover img {
                transform: scale(1.07);
            }

            .event-card.tall {
                flex: 1.2;
            }

        .events-right {
            flex: 1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .event-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 20px;
            background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
            color: #fff;
            transition: 0.3s ease;
        }

        .event-tag {
            display: inline-block;
            background: #28a745;
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            margin-bottom: 6px;
        }

        .event-overlay h3 {
            font-size: 16px;
            margin-bottom: 4px;
            color: #fff;
            text-align: left;
        }

        .event-overlay p {
            font-size: 12px;
            color: rgba(255,255,255,0.85);
            line-height: 1.5;
            margin: 0;
        }

        @media(max-width: 1000px) {
            .events-inner {
                width: 90%;
            }

            .events-grid {
                flex-direction: column;
                height: auto;
            }

            .event-card.tall {
                height: 300px;
                flex: none;
            }

            .events-right {
                grid-template-columns: 1fr 1fr;
                height: auto;
            }

                .events-right .event-card {
                    height: 200px;
                }
        }

        @media(max-width: 600px) {
            .events-right {
                grid-template-columns: 1fr;
            }

                .events-right .event-card {
                    height: 200px;
                }
        }
        /* ---------------- PHOTO GALLERY ---------------- */

        .about-gallery {
            padding: 80px 0;
            background: #f7f9fb;
        }

        .about-gallery-inner {
            width: 80%;
            margin: auto;
        }

        .asymmetric-gallery {
            display: flex;
            gap: 15px;
            height: 580px;
        }

        .gallery-large {
            flex: 1.4;
            border-radius: 20px;
            overflow: hidden;
            position: relative;
        }

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

            .gallery-large:hover img {
                transform: scale(1.04);
            }

        .gallery-small-grid {
            flex: 1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .gallery-small-item {
            border-radius: 16px;
            overflow: hidden;
            position: relative;
        }

            .gallery-small-item img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                transition: transform 0.5s ease;
            }

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

        .gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 18px 16px 14px;
            background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
            color: #fff;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .gallery-large:hover .gallery-overlay,
        .gallery-small-item:hover .gallery-overlay {
            opacity: 1;
        }

        .gallery-overlay span {
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.3px;
        }

        @media(max-width: 1000px) {
            .about-gallery-inner {
                width: 90%;
            }

            .asymmetric-gallery {
                flex-direction: column;
                height: auto;
            }

            .gallery-large {
                height: 320px;
                flex: none;
            }

            .gallery-small-grid {
                grid-template-columns: 1fr 1fr;
                height: auto;
            }

            .gallery-small-item {
                height: 180px;
            }
        }

        @media(max-width: 600px) {
            .gallery-small-grid {
                grid-template-columns: 1fr;
            }

            .gallery-small-item {
                height: 200px;
            }
        }
        /* ---------------- STATS BANNER ---------------- */

        .about-stats {
            padding: 80px 0;
            background: linear-gradient(135deg, #28a745, #1e7e34);
        }

        .stats-inner {
            width: 80%;
            margin: auto;
        }

        .stats-row {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            background: rgba(255,255,255,0.1);
            border-radius: 20px;
            padding: 40px 30px;
        }

        .stat-block {
            text-align: center;
            flex: 1;
            min-width: 130px;
            padding: 10px;
        }

        .stat-num {
            display: block;
            font-size: 42px;
            font-weight: 700;
            color: #fff;
            margin-bottom: 8px;
        }

        .stat-label {
            display: block;
            font-size: 13px;
            color: rgba(255,255,255,0.85);
            font-weight: 500;
        }

        .stat-divider {
            width: 1px;
            height: 60px;
            background: rgba(255,255,255,0.25);
            flex-shrink: 0;
        }

        @media(max-width: 768px) {
            .stats-inner {
                width: 90%;
            }

            .stats-row {
                gap: 20px;
                padding: 30px 20px;
            }

            .stat-divider {
                display: none;
            }

            .stat-num {
                font-size: 34px;
            }

            .stat-block {
                min-width: 120px;
            }
        }
        /* ================= CONTACT PAGE ================= */

        .contact-tag {
            display: inline-block;
            background: #e8f5e9;
            color: #28a745;
            font-size: 12px;
            font-weight: 700;
            padding: 5px 14px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            margin-bottom: 15px;
        }
        /* ---------------- CONTACT STRIP ---------------- */

        .contact-strip {
            background: #28a745;
            padding: 50px 0;
        }

        .contact-strip-inner {
            width: 80%;
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 20px;
        }

        .contact-strip-item {
            display: flex;
            align-items: center; /* changed from flex-start to center */
            gap: 18px;
            flex: 1;
            min-width: 200px;
        }
        .cs-address-divider {
            width: 100%;
            height: 1px;
            background: rgba(255,255,255,0.4);
            margin: 8px 0;
        }

    .cs-icon {
        width: 50px;
        height: 50px;
        background: rgba(255,255,255,0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

        .cs-icon i {
            font-size: 20px;
            color: #fff;
        }

    .cs-text h3 {
        font-size: 15px;
        color: #fff;
        margin-bottom: 5px;
        text-align: left;
    }

    .cs-text p,
    .cs-text a {
        font-size: 13px;
        color: rgba(255,255,255,0.85);
        text-decoration: none;
        display: block;
        line-height: 1.6;
    }

        .cs-text a:hover {
            color: #fff;
            text-decoration: underline;
        }

    .cs-divider {
        width: 1px;
        height: 60px;
        background: rgba(255,255,255,0.25);
        flex-shrink: 0;
    }

    @media(max-width: 1000px) {
        .contact-strip-inner {
            width: 90%;
            flex-direction: column;
            gap: 30px;
        }

        .cs-divider {
            display: none;
        }
    }
    /* ---------------- FORM + MAP ---------------- */

    .contact-main {
        padding: 80px 0;
        background: #fff;
    }

    .contact-main-inner {
        width: 80%;
        margin: auto;
        display: flex;
        gap: 60px;
        align-items: flex-start;
    }

    .contact-form-wrap {
        flex: 1;
    }

        .contact-form-wrap h2 {
            font-size: 30px;
            margin-bottom: 10px;
            color: #1a1a1a;
            text-align: left;
        }

        .contact-form-wrap > p {
            font-size: 15px;
            color: #666;
            line-height: 1.7;
            margin-bottom: 30px;
        }

    .contact-form {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .cf-row {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
    }

    .cf-group {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

        .cf-group.full {
            flex: 1 1 100%;
        }

        .cf-group label {
            font-size: 13px;
            font-weight: 600;
            color: #444;
            margin-bottom: 7px;
        }

        .cf-group input,
        .cf-group select,
        .cf-group textarea {
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 10px;
            font-size: 14px;
            font-family: "Poppins", sans-serif;
            color: #333;
            background: #fff;
            outline: none;
            transition: border 0.3s;
        }

            .cf-group input:focus,
            .cf-group select:focus,
            .cf-group textarea:focus {
                border-color: #28a745;
                box-shadow: 0 0 0 3px rgba(40,167,69,0.1);
            }

        .cf-group textarea {
            resize: vertical;
        }

    .cf-submit {
        display: inline-block;
        padding: 14px 40px;
        background: #28a745;
        color: #fff;
        border: none;
        border-radius: 30px;
        font-size: 15px;
        font-weight: 600;
        font-family: "Poppins", sans-serif;
        cursor: pointer;
        transition: 0.3s ease;
        box-shadow: 0 6px 20px rgba(40,167,69,0.3);
        align-self: flex-start;
        margin-top: 10px;
    }

        .cf-submit:hover {
            background: #1e7e34;
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(40,167,69,0.4);
        }

    .cf-success {
        display: none;
        text-align: center;
        padding: 50px 20px;
        background: #f7f9fb;
        border-radius: 16px;
    }

    .cf-success-icon {
        font-size: 50px;
        margin-bottom: 15px;
    }

    .cf-success h3 {
        font-size: 24px;
        color: #28a745;
        margin-bottom: 10px;
    }

    .cf-success p {
        font-size: 15px;
        color: #666;
        line-height: 1.7;
    }
    /* map side */

    .contact-map-wrap {
        flex: 1;
    }

        .contact-map-wrap h2 {
            font-size: 30px;
            margin-bottom: 10px;
            color: #1a1a1a;
            text-align: left;
        }

        .contact-map-wrap > p {
            font-size: 15px;
            color: #666;
            line-height: 1.7;
            margin-bottom: 20px;
        }

    .map-frame {
        width: 100%;
        height: 380px;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        margin-bottom: 15px;
    }

        .map-frame iframe {
            width: 100%;
            height: 100%;
            border: 0;
            display: block;
        }

    .directions-btn {
        display: inline-block;
        padding: 11px 25px;
        background: #28a745;
        color: #fff;
        border-radius: 25px;
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: 0.3s;
    }

        .directions-btn:hover {
            background: #1e7e34;
            transform: translateY(-2px);
        }

    @media(max-width: 1000px) {
        .contact-main-inner {
            flex-direction: column;
            width: 90%;
            gap: 50px;
        }

        .cf-row {
            flex-direction: column;
            gap: 0;
        }

        .map-frame {
            height: 300px;
        }
    }
    /* ---------------- OPERATING HOURS ---------------- */

    .contact-hours {
        padding: 80px 0;
        background: #f7f9fb;
    }

    .hours-inner {
        width: 80%;
        margin: auto;
        display: flex;
        align-items: center;
        gap: 70px;
    }

    .hours-content {
        flex: 1;
    }

        .hours-content h2 {
            font-size: 30px;
            margin-bottom: 12px;
            color: #1a1a1a;
            text-align: left;
        }

        .hours-content > p {
            font-size: 15px;
            color: #666;
            line-height: 1.7;
            margin-bottom: 30px;
        }

    .hours-table {
        display: flex;
        flex-direction: column;
        gap: 0;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 6px 20px rgba(0,0,0,0.07);
    }

    .hours-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 22px;
        background: #fff;
        border-bottom: 1px solid #f0f0f0;
        transition: 0.2s;
    }

        .hours-row:last-child {
            border-bottom: none;
        }

        .hours-row.active {
            background: #e8f5e9;
        }

    .hours-day {
        font-size: 15px;
        font-weight: 500;
        color: #333;
        flex: 1;
    }

    .hours-time {
        font-size: 15px;
        color: #555;
        flex: 1;
        text-align: center;
    }

    .hours-status {
        font-size: 12px;
        font-weight: 700;
        padding: 4px 12px;
        border-radius: 20px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

        .hours-status.open {
            background: #28a745;
            color: #fff;
        }

        .hours-status.closed {
            background: #f0f0f0;
            color: #999;
        }
    /* hours image */

    .hours-img-wrap {
        flex: 1;
        border-radius: 20px;
        overflow: hidden;
        position: relative;
    }

        .hours-img-wrap img {
            width: 100%;
            height: 400px;
            object-fit: cover;
            display: block;
            transition: transform 0.5s ease;
        }

        .hours-img-wrap:hover img {
            transform: scale(1.04);
        }

    .hours-img-badge {
        position: absolute;
        bottom: 25px;
        left: 25px;
        background: #28a745;
        color: #fff;
        border-radius: 14px;
        padding: 14px 20px;
        text-align: center;
        box-shadow: 0 6px 20px rgba(40,167,69,0.35);
    }

        .hours-img-badge span {
            font-size: 26px;
            display: block;
            margin-bottom: 4px;
        }

        .hours-img-badge p {
            font-size: 14px;
            font-weight: 700;
            margin: 0;
        }

        .hours-img-badge small {
            font-size: 12px;
            opacity: 0.85;
        }

    @media(max-width: 1000px) {
        .hours-inner {
            flex-direction: column;
            width: 90%;
            gap: 40px;
        }

        .hours-img-wrap img {
            height: 280px;
        }
    }
    /* ---------------- SOCIAL MEDIA ---------------- */

    .contact-social {
        padding: 80px 0;
        background: #fff;
        text-align: center;
    }

    .social-inner {
        width: 80%;
        margin: auto;
    }

        .social-inner h2 {
            font-size: 34px;
            margin-bottom: 15px;
            color: #222;
        }

        .social-inner > p {
            max-width: 600px;
            margin: auto;
            color: #666;
            line-height: 1.7;
            margin-bottom: 50px;
        }

    .social-links {
        display: flex;
        justify-content: center;
        gap: 25px;
        flex-wrap: wrap;
    }

    .social-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 160px;
        padding: 35px 20px;
        border-radius: 20px;
        text-decoration: none;
        color: #fff;
        transition: 0.3s ease;
        box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    }

        .social-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 16px 35px rgba(0,0,0,0.2);
        }

        .social-card i {
            font-size: 36px;
        }

        .social-card span {
            font-size: 15px;
            font-weight: 700;
        }

        .social-card small {
            font-size: 12px;
            opacity: 0.85;
        }

        .social-card.facebook {
            background: #1877f2;
        }

        .social-card.instagram {
            background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
        }

        .social-card.whatsapp {
            background: #25d366;
        }

        .social-card.twitter {
            background: #1da1f2;
        }

    @media(max-width: 768px) {
        .social-inner {
            width: 90%;
        }

        .social-card {
            width: 130px;
            padding: 25px 15px;
        }
    }
    /* ---------------- CONTACT FAQ ---------------- */

    .contact-faq {
        padding: 80px 0;
        background: #f7f9fb;
    }

    .contact-faq-inner {
        width: 80%;
        margin: auto;
    }

    .contact-faq-header {
        text-align: center;
        margin-bottom: 50px;
    }

        .contact-faq-header h2 {
            font-size: 34px;
            margin-bottom: 15px;
            color: #222;
        }

        .contact-faq-header p {
            max-width: 600px;
            margin: auto;
            color: #666;
            line-height: 1.7;
        }

    .contact-faq-grid {
        display: flex;
        gap: 25px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .cfaq-item {
        flex: 1;
        min-width: 260px;
        background: #fff;
        border-radius: 18px;
        padding: 35px 28px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.07);
        transition: 0.3s ease;
        text-align: center;
        border-top: 4px solid #28a745;
    }

        .cfaq-item:hover {
            transform: translateY(-6px);
            box-shadow: 0 16px 35px rgba(0,0,0,0.12);
        }

    .cfaq-icon {
        font-size: 38px;
        margin-bottom: 15px;
    }

    .cfaq-item h3 {
        font-size: 17px;
        color: #1a1a1a;
        margin-bottom: 12px;
    }

    .cfaq-item p {
        font-size: 14px;
        color: #666;
        line-height: 1.7;
    }

    @media(max-width: 768px) {
        .contact-faq-inner {
            width: 90%;
        }

        .cfaq-item {
            min-width: 100%;
        }
    }