/* ================================
   TRIVENA YOGSHALA
   MAIN STYLESHEET
================================ */


/* ---------- RESET ---------- */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Georgia, "Times New Roman", serif;
    background: #f7f5ef;
    color: #28352d;
    line-height: 1.6;
}

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


/* ---------- NAVBAR ---------- */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;

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

    padding: 0 6%;
    z-index: 1000;

    background: rgba(224, 151, 151, 0.12);
    backdrop-filter: blur(8px);

    transition: 0.4s ease;
}

.logo {
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 2px;
    color: rgb(8, 8, 8);
}

.navbar nav {
    display: flex;
    align-items: center;
    gap: 25px;
}

.navbar nav a {
    position: relative;

    font-family: Arial, sans-serif;
    font-size: 14px;
    color: rgb(12, 11, 11);

    transition: 0.3s ease;
}

.navbar nav a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -6px;

    width: 0;
    height: 1px;

    background: currentColor;

    transition: 0.3s ease;
}

.navbar nav a:hover::after {
    width: 100%;
}


/* ---------- HERO ---------- */
.hero {
    min-height: 100vh;
    width: 100%;

    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;
}
.hero-video {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 0;
}
.hero-overlay {
    position: absolute;

    inset: 0;

    background: rgba(255, 248, 235, 0.20);

    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-small {
    font-family: Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 5px;
    margin-bottom: 20px;

    color: #4f3b2d;

    background: rgba(255, 248, 230, 0.65);
    padding: 6px 12px;
    display: inline-block;

    border-radius: 3px;
}

.hero h1 {
    font-size: clamp(55px, 7vw, 100px);
    line-height: 0.92;
    letter-spacing: 4px;

    color: #28352d;

    margin-bottom: 25px;
}

.hero-tagline {
    font-size: 25px;
    font-style: italic;

    color: #4f3b2d;

    background: rgba(255, 248, 230, 0.65);
    padding: 7px 14px;
    display: inline-block;

    border-radius: 3px;

    margin-bottom: 40px;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}


/* ---------- HERO IMAGE ---------- */

.hero-image {
    flex: 0 1 45%;
    max-width: 600px;
}

.hero-image img {
    width: 100%;
    height: 400px;

    object-fit: cover;

    border-radius: 3px;

    display: block;

    box-shadow: 0 20px 50px rgba(40, 53, 45, 0.15);
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(160, 126, 62, 0.15);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}


/* ---------- HERO BUTTON ADJUSTMENT ---------- */

.hero .btn:hover {
    color: #28352d;
}

.hero .btn-outline {
    color: #28352d;
    border-color: #28352d;
}

.hero .btn-outline:hover {
    background: #28352d;
    color: white;
}


/* ---------- BUTTONS ---------- */

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

.btn {
    display: inline-block;

    padding: 14px 30px;

    background: #d8b878;
    color: #243229;

    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;

    border: 1px solid #d8b878;

    transition: 0.3s ease;
}

.btn:hover {
    transform: translateY(-3px);
    background: transparent;
    color: white;
}

.btn-outline {
    background: transparent;
    color: white;
    border-color: white;
}

.btn-outline:hover {
    background: white;
    color: #28352d;
}


/* ---------- GENERAL SECTIONS ---------- */

section {
    padding: 110px 8%;
}

.section-label {
    font-family: Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;

    margin-bottom: 15px;
    opacity: 0.7;
}

section h2 {
    font-size: clamp(35px, 5vw, 60px);
    line-height: 1.1;
    margin-bottom: 25px;
}


/* ---------- INTRO ---------- */

.intro {
    max-width: 900px;
    margin: auto;

    text-align: center;
}

.intro > p:not(.section-label) {
    max-width: 650px;
    margin: 0 auto 30px;

    font-size: 18px;
    color: #59655d;
}

.text-link {
    display: inline-block;

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;

    border-bottom: 1px solid #28352d;

    padding-bottom: 4px;
}


/* ---------- PROGRAMS ---------- */

.program-card {
    min-height: 260px;

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

    padding: 35px;

    position: relative;
    overflow: hidden;

    background-size: cover;
    background-position: center;

    color: black;

    transition: 0.4s ease;
}

/* Dark overlay over each image */
.program-card::before {
    content: "";
    position: absolute;
    inset: 0;

    background: rgba(20, 30, 25, 0.45);

    z-index: 0;
}

.program-card h3,
.program-card p {
    position: relative;
    z-index: 1;
}

.program-card h3 {
    font-size: 28px;
    margin-bottom: 15px;
}

.program-card p {
    color: white;
    text-align: center;
    max-width: 280px;
}

.program-card:hover {
    transform: translateY(-8px);
}

.program-card:hover::before {
    background: rgba(20, 30, 25, 0.30);
}
.yoga-card {
    background-image: url("../images/yoga.jpg");
}

.zumba-card {
    background-image: url("../images/zumba.jpg");
}

.kids-dance-card {
    background-image: url("../images/kids-dance.jpg");
}

.kids-yoga-card {
    background-image: url("../images/kids-yoga.jpg");
}

.pilates-card {
    background-image: url("../images/pilates.jpg");
}

.awareness-card {
    background-image: url("../images/awareness.jpg");
}

.sound-card {
    background-image: url("../images/sound-healing.jpg");
}

.reiki-card {
    background-image: url("../images/reiki.jpg");
}

.tarot-card {
    background-image: url("../images/tarot.jpg");
}



/* ---------- GALLERY PREVIEW ---------- */

.gallery-preview {
    min-height: 500px;

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

    text-align: center;

    background:
        linear-gradient(
            rgba(30, 40, 34, 0.45),
            rgba(30, 40, 34, 0.45)
        ),
        url("../assets/images/gallery1.jpg");

    background-size: cover;
    background-position: center;

    color: white;
}

.gallery-preview .btn:hover {
    color: white;
}


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

.cta {
    text-align: center;
    background: #dfe4dc;
}

.cta p {
    margin-bottom: 30px;
    font-size: 18px;
    color: #59655d;
}

.cta .btn:hover {
    color: #28352d;
    border-color: #28352d;
}


/* ---------- FOOTER ---------- */

footer {
    padding: 60px 8%;

    text-align: center;

    background: #28352d;
    color: white;
}

footer h3 {
    letter-spacing: 3px;
    margin-bottom: 10px;
}

footer p {
    font-family: Arial, sans-serif;
    font-size: 13px;
    opacity: 0.7;
    margin-top: 8px;
}


/* ---------- RESPONSIVE ---------- */

/* ---------- PROGRAM GRID ---------- */

.program-grid {
    max-width: 1100px;
    margin: 50px auto 0;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 1000px) {

    .navbar nav {
        gap: 14px;
    }

    .navbar nav a {
        font-size: 12px;
    }

}


@media (max-width: 768px) {

    .navbar {
        height: 70px;
        padding: 0 5%;
    }

    .logo {
        font-size: 17px;
    }

    .navbar nav {
        display: none;
    }

    .hero h1 {
        font-size: 55px;
    }

    .hero-tagline {
        font-size: 19px;
    }

    section {
        padding: 80px 6%;
    }

    section h2 {
        font-size: 40px;
    }

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


@media (max-width: 480px) {

    .logo {
        font-size: 15px;
        letter-spacing: 1px;
    }

    .hero h1 {
        font-size: 43px;
        letter-spacing: 3px;
    }

    .hero-small {
        font-size: 10px;
        letter-spacing: 3px;
    }

    .hero-tagline {
        font-size: 17px;
    }

    .btn {
        padding: 12px 22px;
    }

    section h2 {
        font-size: 34px;
    }
}
/* =================================
   ABOUT PAGE
================================= */


/* ---------- ABOUT HERO ---------- */

.about-hero {
    min-height: 75vh;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            rgba(223, 228, 220, 0.75),
            rgba(247, 245, 239, 0.92)
        );

    padding: 140px 8% 100px;
}

.about-hero-content {
    max-width: 900px;
}

.about-hero h1 {
    font-size: clamp(55px, 8vw, 100px);
    line-height: 0.95;
    letter-spacing: 3px;

    color: #28352d;

    margin-bottom: 25px;
}

.about-hero-content > p:last-child {
    font-size: 22px;
    color: #59655d;
}


/* ---------- OUR STORY ---------- */

.about-story {
    background: #f7f5ef;

    display: flex;
    justify-content: center;
}

.about-text {
    max-width: 850px;
}

.about-text p:not(.section-label) {
    font-size: 18px;
    color: #59655d;

    margin-bottom: 20px;
}


/* ---------- PHILOSOPHY ---------- */

.philosophy {
    text-align: center;

    background: #28352d;
    color: white;
}

.philosophy h2 {
    max-width: 950px;
    margin: 0 auto 30px;

    font-size: clamp(35px, 5vw, 65px);
    font-style: italic;
    font-weight: normal;
}

.philosophy p:last-child {
    max-width: 700px;
    margin: auto;

    font-size: 18px;
    opacity: 0.8;
}


/* ---------- BELIEFS ---------- */

.beliefs {
    text-align: center;
}

.belief-grid {
    max-width: 1100px;

    margin: 50px auto 0;

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

    gap: 20px;
}

.belief-card {
    padding: 45px 25px;

    background: #dfe4dc;

    transition: 0.3s ease;
}

.belief-card:hover {
    transform: translateY(-8px);
}

.belief-card h3 {
    font-size: 30px;
    margin-bottom: 15px;
}

.belief-card p {
    color: #59655d;
}


/* ---------- INSTRUCTOR ---------- */

.instructor {
    background: #eeeae0;
}

.instructor-content {
    max-width: 850px;
    margin: auto;
    text-align: center;
}

.instructor h2 {
    margin-bottom: 5px;
}

.instructor h3 {
    font-family: Arial, sans-serif;

    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;

    font-weight: normal;

    color: #7b6b55;

    margin-bottom: 30px;
}

.instructor p:not(.section-label) {
    font-size: 18px;
    color: #59655d;

    margin-bottom: 20px;
}


/* ---------- VISION ---------- */

.vision {
    text-align: center;
    background: #f7f5ef;
}

.vision > p:not(.section-label) {
    max-width: 700px;

    margin: 0 auto 35px;

    font-size: 18px;
    color: #59655d;
}


/* ---------- ABOUT RESPONSIVE ---------- */

@media (max-width: 768px) {

    .about-hero {
        min-height: 65vh;
        padding: 120px 6% 80px;
    }

    .about-hero h1 {
        font-size: 55px;
    }

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

    .about-text p:not(.section-label),
    .instructor p:not(.section-label),
    .vision > p:not(.section-label) {
        font-size: 17px;
    }
}


@media (max-width: 480px) {

    .about-hero h1 {
        font-size: 43px;
    }

    .about-hero-content > p:last-child {
        font-size: 18px;
    }

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

    .belief-card {
        padding: 35px 25px;
    }

}
/* ---------- ABOUT PAGE HERO ---------- */

.about-hero {
    min-height: 100vh;

    display: flex;
    align-items: center;

    padding: 140px 8% 100px;

    position: relative;

    background-image:
        linear-gradient(
            rgba(20, 30, 25, 0.40),
            rgba(20, 30, 25, 0.40)
        ),
        url("../video/aboutus.mp4");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    color: white;
}

.about-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.about-hero h1 {
    color: white;
}
/* =================================
   PROGRAMS PAGE
================================= */


/* ---------- PROGRAMS HERO ---------- */

.programs-hero {
    min-height: 100vh;

    display: flex;
    align-items: center;

    padding: 140px 8% 100px;

    position: relative;

    background-image:
        linear-gradient(
            rgba(20, 30, 25, 0.40),
            rgba(20, 30, 25, 0.40)
        ),
        url("../video/services.mp4");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.programs-hero-content {
    position: relative;
    z-index: 2;

    max-width: 900px;
}

.programs-hero h1 {
    font-size: clamp(60px, 8vw, 105px);

    line-height: 0.95;

    letter-spacing: 3px;

    color: white;

    margin-bottom: 25px;
}

.programs-hero-content > p:last-child {
    font-size: 23px;
    color: white;
}


/* ---------- PROGRAMS INTRO ---------- */

.programs-intro {
    max-width: 850px;
    margin: auto;
    text-align: center;
}

.programs-intro .section-label {
    color: black;
}

.programs-intro > p:not(.section-label) {
    max-width: 700px;
    margin: auto;
    font-size: 18px;
    color: #59655d;
}


/* ---------- INDIVIDUAL PROGRAM ---------- */

.program-item {
    max-width: 1200px;

    margin: 0 auto;

    padding: 90px 8%;

    text-align: center;

    border-bottom: 1px solid rgba(40, 53, 45, 0.15);
}


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

.program-item h2 {
    font-size: clamp(38px, 5vw, 58px);

    color: #28352d;

    margin-bottom: 35px;
}


/* ---------- PROGRAM IMAGE ---------- */

.program-image {
    width: 100%;

    max-width: 1050px;

    height: 500px;

    margin: 0 auto 30px;

    overflow: hidden;

    border-radius: 4px;
}

.program-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.6s ease;
}
.program-image video {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}
.program-image:hover img {
    transform: scale(1.03);
}


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

.program-description {
    max-width: 900px;

    margin: 0 auto;
}

.program-description h3 {
    font-family: Arial, sans-serif;

    font-size: 14px;

    letter-spacing: 2px;

    text-transform: uppercase;

    font-weight: normal;

    color: #7b6b55;

    margin-bottom: 15px;
}

.program-description p {
    font-size: 18px;

    line-height: 1.7;

    color: #59655d;

    margin: 0 auto;
}


/* ---------- ALTERNATING BACKGROUNDS ---------- */

.program-item:nth-of-type(even) {
    background: #eeeae0;
}


/* ---------- PROGRAMS CTA ---------- */

.programs-cta {
    text-align: center;

    background: #dfe4dc;
}

.programs-cta > p:not(.section-label) {
    max-width: 700px;

    margin: 0 auto 35px;

    font-size: 18px;

    color: #59655d;
}


/* ---------- PROGRAMS RESPONSIVE ---------- */

@media (max-width: 768px) {

    .programs-hero {
        min-height: 65vh;

        padding: 120px 6% 80px;
    }

    .programs-hero h1 {
        font-size: 55px;
    }

    .programs-hero-content > p:last-child {
        font-size: 19px;
    }

    .program-item {
        padding: 70px 6%;
    }

    .program-item h2 {
        font-size: 40px;

        margin-bottom: 25px;
    }

    .program-image {
        height: 350px;

        margin-bottom: 25px;
    }

    .program-description p {
        font-size: 17px;
    }

}


@media (max-width: 480px) {

    .programs-hero h1 {
        font-size: 43px;
    }

    .program-item {
        padding: 60px 5%;
    }

    .program-item h2 {
        font-size: 34px;
    }

    .program-image {
        height: 270px;
    }

}
/* =================================
   MEET OUR TEACHERS PAGE
================================= */


/* ---------- TEACHERS HERO ---------- */

/* =================================
   FULL PAGE BACKGROUND
================================= */

.teachers-page {
    background-image:
        linear-gradient(
            rgba(20, 30, 25, 0.35),
            rgba(20, 30, 25, 0.35)
        ),
        url("../Images/background.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


/* ---------- TEACHERS HERO ---------- */

/* ---------- TEACHERS HERO ---------- */

.teachers-hero {
    min-height: 100vh;

    display: flex;
    align-items: center;

    padding: 140px 8% 100px;

    position: relative;

    background-image:
        linear-gradient(
            rgba(20, 30, 25, 0.40),
            rgba(20, 30, 25, 0.40)
        ),
        url("../images/background.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    color: white;
}

.teachers-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.teachers-hero h1 {
    font-size: clamp(60px, 8vw, 105px);
    line-height: 0.95;
    letter-spacing: 3px;
    color: white;
    margin-bottom: 25px;
}

.teachers-hero-content > p:last-child {
    font-size: 23px;
    color: white;
}


/* ---------- INTRODUCTION ---------- */

.teachers-intro {
    max-width: 850px;

    margin: auto;

    padding: 100px 8% 70px;

    text-align: center;
}


.teachers-intro h2 {
    font-size: clamp(40px, 5vw, 60px);

    color: #28352d;

    margin-bottom: 20px;
}


.teachers-intro > p:not(.section-label) {
    max-width: 700px;

    margin: auto;

    font-size: 18px;

    line-height: 1.7;

    color: #59655d;
}


/* ---------- TEACHER PROFILE ---------- */

.teacher-profile {
    max-width: 1200px;

    margin: 0 auto;

    padding: 100px 7%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 70px;

    border-bottom: 1px solid rgba(40, 53, 45, 0.15);
}


/* ---------- ALTERNATING BACKGROUND ---------- */

.teacher-profile:nth-of-type(even) {
    background: #eeeae0;
}


/* ---------- TEACHER IMAGE ---------- */

.teacher-image {
    width: 100%;

    height: 550px;

    overflow: hidden;

    border-radius: 4px;
}


.teacher-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.6s ease;
}


.teacher-image:hover img {
    transform: scale(1.03);
}


/* ---------- TEACHER INFORMATION ---------- */

.teacher-info {
    max-width: 520px;
}


.teacher-info .section-label {
    margin-bottom: 15px;
}


.teacher-info h2 {
    font-size: clamp(42px, 5vw, 62px);

    line-height: 1;

    color: #28352d;

    margin-bottom: 18px;
}


.teacher-info h3 {
    font-family: Arial, sans-serif;

    font-size: 14px;

    letter-spacing: 2px;

    text-transform: uppercase;

    font-weight: normal;

    color: #7b6b55;

    margin-bottom: 25px;
}


.teacher-info p:not(.section-label) {
    font-size: 18px;

    line-height: 1.8;

    color: #59655d;
}


/* ---------- SECOND PROFILE ---------- */

.teacher-profile-reverse {
    grid-template-columns: 1fr 1fr;
}


/*
   Keeps the second instructor's
   image on the left and text
   on the right, as requested.
*/


/* ---------- FINAL CTA ---------- */

.teachers-cta {
    text-align: center;

    padding: 110px 8%;

    background: #dfe4dc;
}


.teachers-cta h2 {
    font-size: clamp(40px, 5vw, 60px);

    color: #28352d;

    margin-bottom: 20px;
}


.teachers-cta > p:not(.section-label) {
    max-width: 700px;

    margin: 0 auto 35px;

    font-size: 18px;

    line-height: 1.7;

    color: #59655d;
}


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

@media (max-width: 768px) {

    .teachers-hero {
        min-height: 65vh;

        padding: 120px 6% 80px;
    }


    .teachers-hero h1 {
        font-size: 55px;
    }


    .teachers-hero-content > p:last-child {
        font-size: 19px;
    }


    .teachers-intro {
        padding: 70px 6% 50px;
    }


    .teacher-profile,
    .teacher-profile-reverse {
        grid-template-columns: 1fr;

        gap: 40px;

        padding: 70px 6%;
    }


    .teacher-image {
        height: 450px;
    }


    .teacher-info {
        max-width: 100%;
    }


    .teacher-info h2 {
        font-size: 45px;
    }


    .teacher-info p:not(.section-label) {
        font-size: 17px;
    }


    .teachers-cta {
        padding: 80px 6%;
    }

}


/* ---------- SMALL PHONES ---------- */

@media (max-width: 480px) {

    .teachers-hero h1 {
        font-size: 43px;
    }


    .teacher-profile,
    .teacher-profile-reverse {
        padding: 60px 5%;
    }


    .teacher-image {
        height: 350px;
    }


    .teacher-info h2 {
        font-size: 38px;
    }

}
/* =================================
   GALLERY PAGE
================================= */


/* ---------- GALLERY HERO ---------- */

.gallery-hero {
    min-height: 100vh;

    display: flex;
    align-items: center;

    padding: 140px 8% 100px;

    background:
        linear-gradient(
            rgba(20, 30, 25, 0.42),
            rgba(20, 30, 25, 0.42)
        ),
        url("../images/background.jpg");

    background-size: cover;
    background-position: center;

    color: white;
}


.gallery-hero-content {
    max-width: 900px;
}


.gallery-hero .section-label {
    color: white;
}


.gallery-hero h1 {
    font-size: clamp(60px, 8vw, 105px);

    line-height: 0.95;

    letter-spacing: 3px;

    color: white;

    margin-bottom: 25px;
}


.gallery-hero p:last-child {
    font-size: 23px;

    line-height: 1.6;

    color: white;
}


/* ---------- GALLERY INTRO ---------- */

.gallery-intro {
    max-width: 850px;

    margin: auto;

    padding: 100px 8% 70px;

    text-align: center;
}


.gallery-intro h2 {
    font-size: clamp(40px, 5vw, 60px);

    color: #28352d;

    margin-bottom: 20px;
}


.gallery-intro p:not(.section-label) {
    max-width: 700px;

    margin: auto;

    font-size: 18px;

    line-height: 1.7;

    color: #59655d;
}


/* ---------- GALLERY GRID ---------- */

.gallery-grid-section {
    max-width: 1300px;

    margin: 0 auto;

    padding: 30px 5% 100px;
}


.gallery-grid {
    display: grid;

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

    grid-auto-rows: 280px;

    gap: 15px;
}


/* ---------- GALLERY ITEMS ---------- */

.gallery-item {
    position: relative;

    overflow: hidden;

    border-radius: 4px;

    background: #ddd;
}


.gallery-item img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform 0.6s ease,
        filter 0.6s ease;
}


/* ---------- DIFFERENT IMAGE SIZES ---------- */

.gallery-large {
    grid-column: span 2;

    grid-row: span 1;
}


.gallery-tall {
    grid-row: span 2;
}


.gallery-wide {
    grid-column: span 2;
}


/* ---------- HOVER EFFECT ---------- */

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

    filter: brightness(0.75);
}


/* ---------- IMAGE TEXT ---------- */

.gallery-overlay {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 25px;

    background:
        linear-gradient(
            transparent,
            rgba(20, 30, 25, 0.75)
        );

    color: white;

    opacity: 0;

    transform: translateY(10px);

    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}


.gallery-item:hover .gallery-overlay {
    opacity: 1;

    transform: translateY(0);
}


.gallery-overlay span {
    font-family: Arial, sans-serif;

    font-size: 13px;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* ---------- FINAL CTA ---------- */

.gallery-cta {
    text-align: center;

    padding: 110px 8%;

    background: #dfe4dc;
}


.gallery-cta h2 {
    font-size: clamp(40px, 5vw, 60px);

    color: #28352d;

    margin-bottom: 20px;
}


.gallery-cta p:not(.section-label) {
    max-width: 700px;

    margin: 0 auto 35px;

    font-size: 18px;

    line-height: 1.7;

    color: #59655d;
}


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

@media (max-width: 768px) {

    .gallery-hero {
        min-height: 65vh;

        padding: 120px 6% 80px;
    }


    .gallery-hero h1 {
        font-size: 55px;
    }


    .gallery-hero p:last-child {
        font-size: 19px;
    }


    .gallery-intro {
        padding: 70px 6% 50px;
    }


    .gallery-grid-section {
        padding: 20px 5% 70px;
    }


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

        grid-auto-rows: 220px;

        gap: 10px;
    }


    .gallery-large {
        grid-column: span 2;
    }


    .gallery-tall {
        grid-row: span 1;
    }


    .gallery-wide {
        grid-column: span 2;
    }


    .gallery-overlay {
        display: none;
    }


    .gallery-cta {
        padding: 80px 6%;
    }

}


/* ---------- SMALL PHONES ---------- */

@media (max-width: 480px) {

    .gallery-hero h1 {
        font-size: 43px;
    }


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

        grid-auto-rows: 280px;
    }


    .gallery-large,
    .gallery-wide {
        grid-column: span 1;
    }


    .gallery-tall {
        grid-row: span 1;
    }

}
/* =================================
   FULLSCREEN GALLERY IMAGE VIEWER
================================= */

.gallery-item {
    cursor: pointer;
}


/* ---------- LIGHTBOX ---------- */

.image-lightbox {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.92);

    display: flex;

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

    padding: 40px;

    z-index: 9999;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}


/* ---------- SHOW LIGHTBOX ---------- */

.image-lightbox.active {
    opacity: 1;

    visibility: visible;
}


/* ---------- LARGE IMAGE ---------- */

.image-lightbox img {
    max-width: 92vw;

    max-height: 90vh;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 3px;

    box-shadow:
        0 10px 50px rgba(0, 0, 0, 0.5);
}


/* ---------- CLOSE BUTTON ---------- */

.lightbox-close {
    position: absolute;

    top: 25px;
    right: 35px;

    width: 50px;
    height: 50px;

    border: none;

    background: transparent;

    color: white;

    font-size: 45px;

    line-height: 1;

    cursor: pointer;

    z-index: 10000;

    transition: transform 0.2s ease;
}


.lightbox-close:hover {
    transform: scale(1.15);
}


/* ---------- MOBILE ---------- */

@media (max-width: 768px) {

    .image-lightbox {
        padding: 20px;
    }

    .image-lightbox img {
        max-width: 95vw;

        max-height: 85vh;
    }

    .lightbox-close {
        top: 15px;

        right: 20px;

        font-size: 38px;
    }

}
/* Make Image 8 slightly taller */

.gallery-item:nth-child(8) {
    transform: translateY(-300px);
    margin-bottom: -300px;
}
/* =================================
   CONTACT PAGE
================================= */


/* ---------- CONTACT HERO ---------- */

/* ---------- CONTACT HERO ---------- */

.contact-hero {
    min-height: 100vh;

    display: flex;

    align-items: center;

    padding: 140px 8% 100px;

    background:
        linear-gradient(
            rgba(20, 30, 25, 0.42),
            rgba(20, 30, 25, 0.42)
        ),
        url("../images/background.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    color: white;
}


.contact-hero-content {
    max-width: 900px;
}


.contact-hero .section-label {
    color: white;

    margin-bottom: 20px;
}


.contact-hero h1 {
    font-size: clamp(60px, 8vw, 105px);

    line-height: 0.95;

    letter-spacing: 3px;

    color: white;

    margin-bottom: 25px;
}


.contact-hero p:last-child {
    font-size: 23px;

    line-height: 1.6;

    color: white;
}


/* ---------- CONTACT INTRO ---------- */

.contact-intro {
    max-width: 850px;

    margin: auto;

    padding: 100px 8% 70px;

    text-align: center;
}


.contact-intro h2 {
    font-size: clamp(40px, 5vw, 60px);

    color: #28352d;

    margin-bottom: 20px;
}


.contact-intro p:not(.section-label) {
    max-width: 700px;

    margin: auto;

    font-size: 18px;

    line-height: 1.7;

    color: #59655d;
}


/* ---------- CONTACT DETAILS ---------- */

.contact-details {
    max-width: 1200px;

    margin: 0 auto;

    padding: 80px 7%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;
}


/* ---------- CONTACT INFO ---------- */

.contact-info h2,
.location-qr h2 {
    font-size: clamp(40px, 5vw, 58px);

    color: #28352d;

    margin-bottom: 35px;
}


.contact-item {
    padding: 22px 0;

    border-bottom: 1px solid rgba(40, 53, 45, 0.15);
}


.contact-item h3 {
    font-family: Arial, sans-serif;

    font-size: 13px;

    letter-spacing: 2px;

    text-transform: uppercase;

    font-weight: normal;

    color: #7b6b55;

    margin-bottom: 8px;
}


.contact-item p {
    font-size: 18px;

    color: #59655d;

    margin: 4px 0;
}


/* ---------- QR CODE ---------- */

.location-qr {
    text-align: center;

    padding: 50px 30px;

    background: #eeeae0;

    border-radius: 4px;
}


.location-qr .section-label {
    margin-bottom: 12px;
}


.location-qr h2 {
    margin-bottom: 30px;
}


.qr-container {
    width: 280px;

    height: 280px;

    margin: 0 auto 25px;

    padding: 15px;

    background: white;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}


.qr-container img {
    width: 100%;

    height: 100%;

    object-fit: contain;

    display: block;
}


.location-qr > p:last-child {
    font-size: 16px;

    color: #59655d;

    line-height: 1.6;
}


/* ---------- CONTACT FORM ---------- */




/* ---------- FINAL CTA ---------- */

.contact-cta {
    text-align: center;

    padding: 110px 8%;

    background: #dfe4dc;
}


.contact-cta h2 {
    font-size: clamp(40px, 5vw, 60px);

    color: #28352d;

    margin-bottom: 20px;
}


.contact-cta p:not(.section-label) {
    max-width: 700px;

    margin: 0 auto;

    font-size: 18px;

    line-height: 1.7;

    color: #59655d;
}


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

@media (max-width: 768px) {

    .contact-hero {
        min-height: 65vh;

        padding: 120px 6% 80px;
    }


    .contact-hero h1 {
        font-size: 55px;
    }


    .contact-hero p:last-child {
        font-size: 19px;
    }


    .contact-intro {
        padding: 70px 6% 50px;
    }


    .contact-details {
        grid-template-columns: 1fr;

        gap: 50px;

        padding: 65px 6%;
    }


    .location-qr {
        padding: 40px 20px;
    }


    .qr-container {
        width: 240px;

        height: 240px;
    }


    .contact-form-section {
        padding: 80px 6%;
    }


    .contact-cta {
        padding: 80px 6%;
    }

}


@media (max-width: 480px) {

    .contact-hero h1 {
        font-size: 43px;
    }


    .contact-details {
        padding: 60px 5%;
    }


    .qr-container {
        width: 210px;

        height: 210px;
    }

}
/* OUR SERVICES - BLACK */
.programs-intro .section-label {
    color: #000000 !important;
    opacity: 1 !important;
}
/* Make the big "Our Services" heading black */
/* WHAT WE OFFER - BLACK */
.programs-hero .section-label {
    color: #000000 !important;
    opacity: 1 !important;
}
.programs-hero h1 {
    color: #000000 !important;
}
.programs-hero h1 {
    color: #000000 !important;
}

.programs-hero-content > p:last-child {
    color: #000000 !important;
}


/* Make the big "Our Services" heading black */
/* WHAT WE OFFER - BLACK */
.about-hero .section-label {
    color: #000000 !important;
    opacity: 1 !important;
}
.about-hero h1 {
    color: #000000 !important;
}
.about-hero h1 {
    color: #000000 !important;
}

.about-hero-content > p:last-child {
    color: #000000 !important;
}
/* =================================
   BACKGROUND FOR TEACHERS,
   GALLERY & CONTACT PAGES
================================= */

/* WHAT WE OFFER - BLACK */
.teachers-hero .section-label {
    color: #000000 !important;
    opacity: 1 !important;
}
.teachers-hero h1 {
    color: #000000 !important;
}
.teachers-hero h1 {
    color: #000000 !important;
}

.teachers-hero-content > p:last-child {
    color: #000000 !important;
}

/* WHAT WE OFFER - BLACK */
.schedule-hero .section-label {
    color: #000000 !important;
    opacity: 1 !important;}

/* WHAT WE OFFER - BLACK */
.gallery-hero .section-label {
    color: #000000 !important;
    opacity: 1 !important;
}
.gallery-hero h1 {
    color: #000000 !important;
}
.gallery-hero h1 {
    color: #000000 !important;
}

.gallery-hero-content > p:last-child {
    color: #000000 !important;
}

/* WHAT WE OFFER - BLACK */
.contact-hero .section-label {
    color: #000000 !important;
    opacity: 1 !important;
}
.contact-hero h1 {
    color: #000000 !important;
}
.contact-hero h1 {
    color: #000000 !important;
}

.contact-hero-content > p:last-child {
    color: #000000 !important;
}
/* =================================
   IMAGES 11–14 - NORMAL GALLERY SIZE
================================= */

.gallery-grid > .gallery-item:nth-child(11),
.gallery-grid > .gallery-item:nth-child(12),
.gallery-grid > .gallery-item:nth-child(13),
.gallery-grid > .gallery-item:nth-child(14) {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    width: 100% !important;
    height: 280px !important;
    transform: none !important;
    margin: 0 !important;
}
/* =================================
   NEW IMAGES 11–14
================================= */

.new-gallery-grid {
    max-width: 1300px;
    margin: 15px auto 100px;

    padding: 0 5%;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 280px;
    gap: 15px;
}

.new-gallery-grid .gallery-item {
    width: 100%;
    height: 280px;

    grid-column: span 1 !important;
    grid-row: span 1 !important;

    transform: none !important;
    margin: 0 !important;
}

.new-gallery-grid .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* MOBILE */

@media (max-width: 768px) {

    .new-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 220px;
        gap: 10px;
    }

    .new-gallery-grid .gallery-item {
        height: 220px;
    }
}


@media (max-width: 480px) {

    .new-gallery-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 280px;
    }

    .new-gallery-grid .gallery-item {
        height: 280px;
    }
}