/* ==========================================================
   CONTEMPO DANCE ACADEMY
   STYLE
   Version 1.0
========================================================== */



/* ==========================================================
   APP
========================================================== */

body {

    overflow-x: hidden;

}

#app {

    position: relative;

}



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

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: .75rem;

    min-width: 170px;

    height: 52px;

    padding-inline: 2rem;

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

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

    letter-spacing: .02em;

    transition: all var(--transition-normal);

    font-size: .95rem;

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

}

.btn:hover {

    transform: translateY(-2px);

}

.btn--primary {

    color: var(--color-white);

    background: var(--color-brand);

}

.btn--primary:hover {

    background: var(--color-brand-hover);

}

.btn--secondary {

    color: var(--color-white);

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

    backdrop-filter: blur(8px);

}

.btn--secondary:hover {

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

}



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

.navbar{

    position:fixed;

    inset:0 0 auto 0;

    z-index:1100;

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

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

    border-bottom:1px solid rgba(0,0,0,.06);

    transition:.35s ease;

}


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

.navbar__wrapper{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:100px;

}


/* ==========================================================
   LOGO
========================================================== */

.navbar__logo{

    display:flex;

    align-items:center;

}

.navbar__logo img{

    height:85px;

    width:auto;

}


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

.navbar__desktop{

    display:flex;

    align-items:center;

    gap:3rem;

    list-style:none;

    margin:0;

    padding:0;

}

.navbar__item{

    list-style:none;

}

.navbar__link{

    position:relative;

    color:var(--color-text);

    font-size:1rem;

    font-weight:500;

    transition:.25s;

}

.navbar__link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--color-accent);

    transition:.3s;

}

.navbar__link:hover::after{

    width:100%;

}


/* ==========================================================
   ACTIONS
========================================================== */

.navbar__actions{

    display:flex;

    align-items:center;

}


/* ==========================================================
   HAMBURGER
========================================================== */

.navbar__toggle{

    display:none;

    flex-direction:column;

    gap:6px;

    background:none;

    border:none;

    cursor:pointer;

    position:relative;

    z-index:1100;

}

.navbar__toggle span{

    width:28px;

    height:2px;

    background:var(--color-text);

    border-radius:999px;

    transition:.35s ease;

}


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

.mobile-menu{

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(20px);

    z-index:1090;

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
    opacity .35s ease,
    visibility .35s ease;

    transform:scale(1.02);

}

.mobile-menu.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:scale(1);

}

.mobile-menu__content{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:3rem;

}

.mobile-menu__list{

    list-style:none;

    margin:0;

    padding:0;

    display:flex;

    flex-direction:column;

    gap:2rem;

    align-items:center;

}

.mobile-menu__link{
    position: relative;

    font-size:clamp(1.6rem,5vw,2.3rem);

    font-weight:600;

    color:var(--color-text);

    transition:.25s;

}

.mobile-menu__link::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-10px;

    width:0;

    height:2px;

    background:var(--color-accent);

    transform:translateX(-50%);

    transition:.3s;

}

.mobile-menu__link:hover::after{

    width:100%;

}

.mobile-menu__link:hover{

    color:var(--color-brand);

}

.mobile-menu__actions{

    padding-top:2rem;

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

}


/* ==========================================================
   STICKY
========================================================== */

.navbar--scrolled{

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

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

}

.navbar--scrolled .navbar__wrapper{

    min-height:80px;

}

.navbar--scrolled .navbar__logo img{

    height:72px;

}


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

@media(max-width:992px){

    .navbar__wrapper{

        min-height:90px;

    }

    .navbar__logo img{

        height:70px;

    }

    .navbar__desktop{

        display:none;

    }

    .navbar__actions{

        display:none;

    }

    .navbar__toggle{

        display:flex;

    }

}

/* ==========================================================
   HAMBURGER ANIMATION
========================================================== */

.navbar__toggle.active span:nth-child(1){

    transform:
        translateY(8px)
        rotate(45deg);

}

.navbar__toggle.active span:nth-child(2){

    opacity:0;

}

.navbar__toggle.active span:nth-child(3){

    transform:
        translateY(-8px)
        rotate(-45deg);

}

.mobile-menu__item{

    opacity:0;

    transform:translateY(20px);

    transition:
        opacity .4s ease,
        transform .4s ease;

}

.mobile-menu.active .mobile-menu__item{

    opacity:1;

    transform:translateY(0);

}

.mobile-menu.active .mobile-menu__item:nth-child(1){transition-delay:.05s;}
.mobile-menu.active .mobile-menu__item:nth-child(2){transition-delay:.10s;}
.mobile-menu.active .mobile-menu__item:nth-child(3){transition-delay:.15s;}
.mobile-menu.active .mobile-menu__item:nth-child(4){transition-delay:.20s;}
.mobile-menu.active .mobile-menu__item:nth-child(5){transition-delay:.25s;}
.mobile-menu.active .mobile-menu__item:nth-child(6){transition-delay:.30s;}
.mobile-menu.active .mobile-menu__item:nth-child(7){transition-delay:.35s;}
.mobile-menu.active .mobile-menu__item:nth-child(8){transition-delay:.40s;}
.mobile-menu.active .mobile-menu__item:nth-child(9){transition-delay:.45s;}

/* ==========================================================
   MOBILE MENU FOOTER
========================================================== */

.mobile-menu__social{

    display:flex;

    align-items:center;

    gap:1.25rem;

    margin-top:2rem;

}

.mobile-menu__social-link{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--color-background-alt);

    color:var(--color-text);

    transition:.3s ease;

}

.mobile-menu__social-link:hover{

    background:var(--color-brand);

    color:white;

    transform:translateY(-3px);

}

.mobile-menu__social-link svg{

    width:20px;

    height:20px;

}

.mobile-menu__footer{

    margin-top:3rem;

    text-align:center;

    color:var(--color-text-light);

}

.mobile-menu__footer p{

    margin-bottom:.35rem;

    font-weight:600;

    color:var(--color-text);

}

.mobile-menu__footer span{

    font-size:.875rem;

}

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

.hero {

    position: relative;

    display: flex;

    align-items: center;

    min-height: 100svh;

    overflow: hidden;

    color: var(--color-white);

}

.hero__background {

    position: absolute;

    inset: 0;

    z-index: -3;

}

.hero__background img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}

.hero__overlay {

    position: absolute;

    inset: 0;

    z-index: -2;

    background:
    linear-gradient(
        90deg,
        rgba(18, 18, 18, .82) 0%,
        rgba(18, 18, 18, .58) 45%,
        rgba(18, 18, 18, .15) 100%
    );

}

.hero::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        radial-gradient(
            circle at right center,
            rgba(122,35,53,.22),
            transparent 45%
        );

}

.hero .container {

    width: 100%;

}

.hero__content {

    max-width: 680px;

    padding-top: 90px;

    padding-left: 5rem;

}

.hero__eyebrow {

    display: inline-block;

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

    color: var(--color-accent);

    font-size: .95rem;

    letter-spacing: .35rem;

    text-transform: uppercase;

}

.hero__title {

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

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

    font-size: var(--font-size-display);

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

    line-height: 1.05;

    text-wrap: balance;

}

.hero__subtitle {

    max-width: 500px;

    font-size: 1.25rem;

    line-height: 1.8;

    font-weight: 400;

    line-height:1.7;

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

}

.hero__buttons {

    display: flex;

    margin-top:.5rem;

    flex-wrap: wrap;

    gap: 1rem;

}

.hero__scroll{

    position:absolute;

    left:50%;

    bottom:2rem;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:1rem;

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

}

.hero__scroll::before{

    content:"↓";

    width:52px;

    height:52px;

    display:grid;

    place-items:center;

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

    border-radius:50%;

    font-size:1.25rem;

    transition:.3s ease;

}

.hero__scroll::after{

    content:"";

    width:2px;

    height:60px;

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

    animation:scrollIndicator 2s infinite;

}

.hero__scroll:hover::before{

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

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

    transform:translateY(3px);

}

@keyframes scrollIndicator {

    0% {

        transform: scaleY(0);

        transform-origin: top;

        opacity: 0;

    }

    30% {

        transform: scaleY(1);

        transform-origin: top;

        opacity: 1;

    }

    70% {

        transform: scaleY(1);

        transform-origin: bottom;

        opacity: 1;

    }

    100% {

        transform: scaleY(0);

        transform-origin: bottom;

        opacity: 0;

    }

}

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

@media (max-width: 992px) {

    .hero__content {

        max-width: 100%;

        padding-top: 110px;

        padding-left: 0;

    }

    .hero__title {

        max-width: 650px;

    }

}


@media (max-width: 768px) {

    .hero {

        min-height: 100svh;

        text-align: center;

    }

    .hero__overlay {

        background:
            linear-gradient(
                180deg,
                rgba(18,18,18,.78) 0%,
                rgba(18,18,18,.55) 55%,
                rgba(18,18,18,.45) 100%
            );

    }

    .hero__content {

        max-width: 100%;

        padding-top: 100px;

        padding-left: 0;

        margin-inline: auto;

    }

    .hero__eyebrow {

        letter-spacing: .2rem;

        margin-bottom: 1rem;

    }

    .hero__title {

        font-size: clamp(2.5rem, 9vw, 3.5rem);

        margin-bottom: 1.5rem;

    }

    .hero__subtitle {

        max-width: 100%;

        font-size: 1.05rem;

        margin-inline: auto;

    }

    .hero__buttons {

        flex-direction: column;

        align-items: center;

        margin-top: 2rem;

    }

    .hero__buttons .btn {

        width: min(320px, 100%);

    }

    .hero__scroll {

        bottom: 1.25rem;

    }

    .hero__scroll::after {

        height: 40px;

    }

}


@media (max-width: 576px) {

    .hero__content {

        padding-top: 90px;

    }

    .hero__title {

        font-size: clamp(2.2rem, 10vw, 3rem);

    }

    .hero__subtitle {

        font-size: 1rem;

        line-height: 1.6;

    }

}

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

.about {

    padding: var(--section-padding);

    background: #fff;

}

.about__wrapper {

    display: grid;

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

    gap: 6rem;

    align-items: center;

}

.about__content {

    max-width: 680px;

}

.section__eyebrow {

    display: inline-block;

    margin-bottom: 1rem;

    color: var(--color-brand);

    font-size: .9rem;

    font-weight: 600;

    letter-spacing: .15rem;

    text-transform: uppercase;

}

.section__title {

    margin-bottom: 2rem;

    font-size: clamp(2.5rem, 5vw, 3.8rem);

    line-height: 1.1;

    font-weight: var(--font-weight-bold);

}

.section__text {

    margin-bottom: 1.5rem;

    font-size: 1.1rem;

    line-height: 1.9;

    color: var(--color-text-light);

    font-weight: var(--font-weight-regular);

}

.about__features {

    display: flex;

    flex-direction: column;

    gap: 1.25rem;

    margin: 3rem 0;

}

.about__card {

    padding: 1.75rem 2rem;

    background: #fff;

    border-left: 4px solid var(--color-brand);

    border-radius: 18px;

     box-shadow: 0 8px 25px rgba(0,0,0,.04);

    transition: all .3s ease;

}

.about__card:hover {

    transform: translateY(-6px);

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

}

.about__card h3 {

    margin-bottom: .6rem;

    font-size: 1.2rem;

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

}

.about__card p {

    margin: 0;

    font-size: .96rem;

    line-height: 1.7;

    color: var(--color-text-light);

}

.about__image {

    position: relative;
    padding-left: 2rem;

}

.about__image img {

    display: block;

    width: 100%;

    aspect-ratio: 4 / 5;

    object-fit: cover;

    border-radius: 28px;

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

}

.about .btn {

    margin-top: 1rem;

}

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

@media (max-width: 992px){

    .about{

        padding: 7rem 0;

    }

    .about__wrapper{

        grid-template-columns: 1fr;

        gap: 4rem;

    }

    .about__content{

        max-width: 100%;

    }

    .about__image{

        padding-left: 0;

        max-width: 650px;

        margin-inline: auto;

        order: -1;

    }

}

@media (max-width:768px){

    .about{

        padding: 5rem 0;

    }

    .about__wrapper{

        gap: 3rem;

    }

    .about__content{

        text-align: center;

    }

    .about__features{

        margin: 2.5rem 0;

    }

    .about__card{

        padding: 1.5rem;

        text-align: left;

    }

    .about .btn{

        width:100%;

        max-width:320px;

        margin-inline:auto;

    }

}

@media (max-width:576px){

    .about__image img{

        border-radius:20px;

    }

    .about__card{

        padding:1.25rem;

    }

}

/* ==========================================================
   MODAL
========================================================== */

.modal{

    position: fixed;

    inset:0;

    display:none;

    z-index:9999;

}

.modal.active{

    display:flex;

    align-items:center;

    justify-content:center;

}

.modal__overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(4px);

}

.modal__content{

    position:relative;

    width:min(900px,90vw);

    background:#fff;

    border-radius:24px;

    padding:3rem;

    z-index:2;

    max-height:90vh;

    overflow:auto;

}

.modal__close{

    position:absolute;

    top:1.5rem;

    right:1.5rem;

    border:none;

    background:none;

    font-size:2rem;

    cursor:pointer;

}

.modal__image{

    width:50%;

    height:50%;

    object-fit:cover;

    border-radius:20px;

    margin-bottom:2rem;

}


.modal__title{

    margin-bottom:1rem;

    font-size:2rem;

}

.modal__description{

    margin-bottom:2rem;

    line-height:1.8;

}

.modal__info{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:1rem;

    margin-bottom:2rem;

}

.modal__item{

    padding:1rem;

    border-radius:16px;

    background:#f8f8f8;

}

.modal__item span{

    display:block;

    font-size:.85rem;

    color:#888;

    margin-bottom:.4rem;

}

.modal__item strong{

    font-size:1rem;

}

/* ==========================================================
   OFFER
========================================================== */

.offer {

    padding: 10rem 0;

    background: #fff;

}

.offer .section__title {

    text-align: left;

    max-width: 700px;


}

.offer .section__text {

    max-width: 700px;

    text-align: left;

}

.offer__grid {

    display: grid;

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

    gap: 2rem;

}

.offer__card {
    position: relative;

    background: #fff;

    border-radius: 24px;

    overflow: hidden;

    cursor: pointer;

    transition: all .35s ease;

    box-shadow: 0 10px 35px rgba(0,0,0,.05);

    cursor: pointer;

}

.offer__card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 0;

    height: 4px;

    background: var(--color-brand);

    transition: width .35s ease;

}

.offer__card:hover::before {

    width: 100%;

}

.offer__card:hover {

    transform: translateY(-8px);

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

}

.offer__image {

    overflow: hidden;

}

.offer__image img {

    width: 100%;

    

    object-fit: cover;

    display: block;

    transition: transform .6s ease;

}

.offer__card:hover .offer__image img {

    transform: scale(1.05);

}

.offer__content {

    padding: 2rem;

    text-align: center;

}

.offer__content h3 {

    margin-bottom: .75rem;

    font-size: 1.5rem;

    font-weight: var(--font-weight-bold);

}

.offer__content p {

    margin-bottom: 1.75rem;

    color: var(--color-text-light);

    line-height: 1.7;

    font-size: 1rem;

}

.offer__button {

    display: inline-flex;

    align-items: center;

    gap: .5rem;

    border: none;

    background: none;

    color: var(--color-brand);

    font-size: .95rem;

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

    cursor: pointer;

    transition: .3s ease;

}

.offer__button:hover {

    gap: .85rem;

}

.offer .section__eyebrow{

    display:block;

    text-align:center;

}

.offer .section__title{

    text-align:center;

    max-width:700px;

    margin-inline:auto;

}

.offer .section__text{

    text-align:center;

    max-width:700px;

    margin-inline:auto;

    margin-bottom:4rem;

}

/* ==========================================================
   OFFER RESPONSIVE
========================================================== */

@media (max-width: 1200px){

    .offer__grid{

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

    }

}

@media (max-width: 768px){

    .offer{

        padding-block: var(--section-padding);

    }

    .offer .section__title,
    .offer .section__text{

        max-width:100%;

        text-align:center;

    }

    .offer__grid{

        grid-template-columns:1fr;

        gap:1.5rem;

    }

    .offer__content{

        padding:1.75rem;

    }

    .offer__content h3{

        font-size:1.35rem;

    }

    .offer__button{

        justify-content:center;

        width:100%;

    }

}

@media (max-width:576px){

    .offer__content{

        padding:1.5rem;

    }

    .offer__content p{

        margin-bottom:1.25rem;

    }

}

/* ==========================================================
   GALA
========================================================== */

.gala{

    padding-block:var(--section-padding);

    background:#fafafa;

}

.gala__header {

    max-width: 760px;

    margin: 0 auto;

    text-align: center;

}

.section__subtitle {

    margin: 2rem auto;

    max-width: 650px;

    font-size: 1.35rem;

    font-weight: var(--font-weight-medium);

    line-height: 1.7;

}

.gala__image{

    position:relative;

    margin:5rem auto;

    overflow:hidden;

    border-radius:32px;

}

.gala__image img{

    width:100%;

    display:block;

    aspect-ratio:16 / 9;

    object-fit:cover;

    transition:transform 8s ease;

}

.gala__image:hover img{

    transform:scale(1.03);

}

.gala__image::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            rgba(0,0,0,.05),

            rgba(0,0,0,.45)

        );

}

.gala__actions{

    margin-top:2rem;

    display:flex;

    justify-content:center;

}

.gala__countdown{

    position:absolute;

    left:50%;

    bottom:30px;

    transform:translateX(-50%);

    z-index:5;

    display:flex;

    gap:3rem;

    padding:1.5rem 3rem;

    border-radius:22px;

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

    backdrop-filter:blur(18px);

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

    box-shadow:0 20px 60px rgba(0,0,0,.25);

}

.countdown__item{

    display:flex;

    flex-direction:column;

    align-items:center;

    color:#fff;

}

.countdown__number{

    font-size:3rem;

    font-weight:700;

    line-height:1;

}

.countdown__label{

    margin-top:.5rem;

    font-size:.8rem;

    text-transform:uppercase;

    letter-spacing:.15rem;

    opacity:.85;

}

.countdown__divider{

    width:1px;

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

}

.gala__footer{

    margin-top:3rem;

    text-align:center;

}

.gala__footer h3{

    margin-bottom:.5rem;

    font-size:1.8rem;

}

.gala__footer p{

    color:var(--color-text-light);

}

.countdown__finished{

    color:#fff;

    font-size:1.4rem;

    font-weight:600;

    text-align:center;

    line-height:1.6;

}

@media (max-width:992px){

    .gala__countdown{

        gap:2rem;

        padding:1.25rem 2rem;

    }

    .countdown__number{

        font-size:2.4rem;

    }

}

@media (max-width:768px){

    .gala__image{

        margin:3rem auto;

        border-radius:22px;

    }

    .gala__countdown{

        left:50%;

        bottom:20px;

        width:calc(100% - 2rem);

        max-width:420px;

        justify-content:space-between;

        gap:1rem;

        padding:1rem;

    }

    .countdown__number{

        font-size:2rem;

    }

    .countdown__label{

        font-size:.7rem;

        letter-spacing:.08rem;

    }

    .gala__footer{

        margin-top:2rem;

    }

}

@media (max-width:480px){

    .gala__countdown{

        padding:.85rem;

        gap:.75rem;

    }

    .countdown__number{

        font-size:1.6rem;

    }

    .countdown__label{

        font-size:.65rem;

    }

}

@media (hover:hover){

    .gala__image:hover img{

        transform:scale(1.03);

    }

}

/* ==========================================================
   TEACHERS
========================================================== */

.teachers{

    padding-block:var(--section-padding);

    background:#fff;

}

.teachers__header{

    max-width:700px;

    margin:0 auto 5rem;

    text-align:center;

}

.teachers__grid{

    display:grid;

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

    gap:3rem;

}

.teacher{

    overflow:hidden;

    border-radius:28px;

    background:#fff;

    box-shadow:0 12px 35px rgba(0,0,0,.05);

    transition:.35s ease;

    cursor: pointer;

}

.teacher:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}

.teacher__image{

    overflow:hidden;

}

.teacher__image img{

    width:100%;

    object-fit:cover;

    aspect-ratio: 1 / 1;

    display:block;

    transition:.6s ease;

}

.teacher:hover img{

    transform:scale(1.05);

}

.teacher__content{

    padding:2rem;

    text-align:center;



}

.teacher__content h3{

    margin-bottom:.5rem;

    font-size:1.7rem;

}

.teacher__content span{

    display:block;

    margin-bottom:1.5rem;

    color:var(--color-brand);

    font-weight:600;

}

.teacher__content p{

    line-height:1.8;

    color:var(--color-text-light);

}

.modal__subtitle{

    margin-bottom:1.5rem;

    color:var(--color-brand);

    font-weight:600;

}

.teacher__link{

    display: inline-flex;

    align-items: center;

    justify-content:center;

    gap: .5rem;

    margin-top: 1.5rem;

    color: var(--color-brand);

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

    transition: gap .3s ease;

}

.teacher:hover .teacher__link{

    gap: .9rem;

}

/* ==========================================================
   TEACHERS RESPONSIVE
========================================================== */

@media (max-width:992px){

    .teachers__grid{

        gap:2rem;

    }

    .teacher__content{

        padding:1.75rem;

    }

    .teacher__content h3{

        font-size:1.5rem;

    }

}

@media (max-width:768px){

    .teachers__grid{

        grid-template-columns:1fr;

        gap:2rem;

    }

    .teachers__header{

        margin-bottom:3rem;

    }

    .teacher__content{

        padding:1.5rem;

    }

}

@media (max-width:576px){

    .teacher{

        border-radius:22px;

    }

    .teacher__content h3{

        font-size:1.35rem;

    }

    .teacher__content span{

        margin-bottom:1rem;

    }

}

@media (hover:hover){

    .teacher:hover{

        transform:translateY(-10px);

        box-shadow:0 25px 60px rgba(0,0,0,.12);

    }

    .teacher:hover img{

        transform:scale(1.05);

    }

    .teacher:hover .teacher__link{

        gap:.9rem;

    }

}

/* ==========================================================
   REVIEWS
========================================================== */

.reviews{

    padding-block:var(--section-padding);

    background:#fafafa;

}

.reviews__header{

    max-width:700px;

    margin:0 auto 5rem;

    text-align:center;

}

.reviews__grid{

    display:grid;

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

    gap:2rem;

}

.review{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    background:#fff;

    border-radius:24px;

    padding:2.5rem;

    box-shadow:0 10px 35px rgba(0,0,0,.05);

    transition:.35s ease;

}

.review::before{

    content:"❝";

    position:absolute;

    top:20px;

    left:25px;

    font-size:5rem;

    color:rgba(194,24,91,.08);

    font-family:serif;

}

.review:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 50px rgba(0,0,0,.08);

}

.review__stars{

    color:#C2185B;

    font-size:1.2rem;

    letter-spacing:.2rem;

    margin-bottom:1.5rem;

}

.review__text{

    line-height:1.9;

    margin-bottom:2rem;

    color:var(--color-text);

    font-style:italic;

}

.review__author{

    font-size:1rem;

    font-weight:700;

}

/* ==========================================================
   REVIEWS RESPONSIVE
========================================================== */

@media (max-width:992px){

    .reviews__grid{

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

    }

}

@media (max-width:768px){

    .reviews__header{

        margin-bottom:3rem;

    }

    .reviews__grid{

        grid-template-columns:1fr;

        gap:1.5rem;

    }

    .review{

        padding:2rem;

    }

}

@media (max-width:576px){

    .review{

        padding:1.75rem;

    }

    .review__stars{

        font-size:1rem;

    }

    .review__text{

        margin-bottom:1.5rem;

        line-height:1.75;

    }

}

@media (hover:hover){

    .review:hover{

        transform:translateY(-8px);

        box-shadow:0 20px 50px rgba(0,0,0,.08);

    }

}

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

.gallery{

    padding-block:var(--section-padding);

    background:#fff;

}

.gallery__header{

    max-width:700px;

    margin:0 auto 5rem;

    text-align:center;

}

.gallery__grid {

    display: grid;

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

    grid-template-rows: repeat(4, 220px);

    gap: 1.5rem;

}

.gallery__item:nth-child(1){

    grid-column:1 / 3;

    grid-row:1 / 3;

}

.gallery__item:nth-child(2){

    grid-column:3;

    grid-row:1;

}

.gallery__item:nth-child(3){

    grid-column:4;

    grid-row:1 / 3;

}

.gallery__item:nth-child(4){

    grid-column:3;

    grid-row:2;

}

.gallery__item:nth-child(5){

    grid-column:1 / 2;

    grid-row:3;

}

.gallery__item:nth-child(6){

    grid-column:2 / 5;

    grid-row:3 / 5;

}

.gallery__item{

    overflow:hidden;

    border-radius:24px;

    position:relative;

    cursor:pointer;

}

.gallery__item img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .6s ease;

}

.gallery__item:hover img{

    transform:scale(1.08);

}

.gallery__instagram{

    margin-top:6rem;

    padding:4rem;

    text-align:center;

    background:#fafafa;

    border-radius:28px;

}

.gallery__instagram h3{

    margin-bottom:1rem;

}

.gallery__instagram p{

    margin-bottom:1rem;

    color:var(--color-text-light);

}

.gallery__instagram a{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    font-size:1.25rem;

    font-weight:700;

    color:var(--color-white);

    text-decoration:none;

    transition:.3s;

}

.gallery__instagram a:hover{

    letter-spacing:.05rem;

}

.gallery__item::after{

    content:"+";

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:4rem;

    color:#fff;

    background:rgba(0,0,0,.25);

    opacity:0;

    transition:.35s ease;

}

.gallery__item:hover::after{

    opacity:1;

}

.modal__gallery-image{

    width:100%;

    display:block;

    border-radius:20px;

}

@media (max-width:992px){

    .gallery__grid{

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

        grid-template-rows:auto;

    }

    .gallery__item{

        grid-column:auto !important;

        grid-row:auto !important;

        aspect-ratio:4/3;

    }

}

@media (max-width:768px){

    .gallery__header{

        margin-bottom:3rem;

    }

    .gallery__grid{

        grid-template-columns:1fr;

        gap:1rem;

    }

    .gallery__item{

        aspect-ratio:4/3;

        border-radius:20px;

    }

    .gallery__instagram{

        margin-top:4rem;

        padding:2rem;

    }

}

@media (hover:hover){

    .gallery__item:hover img{

        transform:scale(1.08);

    }

    .gallery__item:hover::after{

        opacity:1;

    }

}

@media (max-width:576px){

    .gallery__instagram{

        padding:1.75rem;

        border-radius:22px;

    }

    .gallery__instagram a{

        width:100%;

        justify-content:center;

        font-size:1rem;

    }

}

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

.contact{

    padding-block:var(--section-padding);

    background:#fff;

}

.contact__header{

    max-width:760px;

    margin:0 auto 5rem;

    text-align:center;

    position:relative;

}

.contact__header::after{

    content:"";

    display:block;

    width:80px;

    height:2px;

    margin:3rem auto 0;

    background:var(--color-brand);

    opacity:.2;

}

.contact__content{

    max-width:760px;

    margin:0 auto;

}

.contact__row{

    display:flex;

    align-items:center;

    gap:2rem;

    padding:2rem 0;

    text-decoration:none;

    color:inherit;

    border-bottom:1px solid rgba(0,0,0,.08);

    transition:all .3s ease;

}

.contact__row:hover{

    padding-left:.75rem;

}

.contact__icon-wrapper{

    width:56px;

    height:56px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(194,24,91,.08);

    transition:.3s ease;

}

.contact__icon-wrapper svg{

    width:24px;

    height:24px;

    color:var(--color-brand);

    stroke-width:1.8;

    transition:.3s ease;

}

.contact__row:hover .contact__icon-wrapper{

    background:var(--color-brand);

}

.contact__row:hover .contact__icon-wrapper svg{

    color:#fff;

}

.contact__info{

    display:flex;

    flex-direction:column;

    gap:.35rem;

}

.contact__info h3{

    margin:0;

    font-size:1.1rem;

    font-weight:600;

}

.contact__info p{

    margin:0;

    color:var(--color-text-light);

    transition:.3s;

}

.contact__row:hover .contact__info p{

    color:var(--color-brand);

}

.contact__cta{

    display:flex;

    justify-content:center;

    margin-top:4rem;

}

.contact__note{

    margin-top:1.5rem;

    text-align:center;

    color:var(--color-text-light);

    line-height:1.8;

}

/* ==========================================================
   CONTACT RESPONSIVE
========================================================== */

@media (max-width:992px){

    .contact__header{

        margin-bottom:4rem;

    }

    .contact__content{

        max-width:100%;

    }

}

@media (max-width:768px){

    .contact__header{

        margin-bottom:3rem;

    }

    .contact__row{

        gap:1.25rem;

        padding:1.5rem 0;

    }

    .contact__icon-wrapper{

        width:50px;

        height:50px;

    }

    .contact__icon-wrapper svg{

        width:22px;

        height:22px;

    }

    .contact__cta{

        margin-top:3rem;

    }

    .contact__cta .btn{

        width:100%;

        max-width:320px;

    }

}

@media (max-width:576px){

    .contact__row{

        align-items:flex-start;

    }

    .contact__info h3{

        font-size:1rem;

    }

    .contact__info p{

        font-size:.95rem;

    }

    .contact__note{

        font-size:.95rem;

    }

}

@media (hover:hover){

    .contact__row:hover{

        padding-left:.75rem;

    }

    .contact__row:hover .contact__icon-wrapper{

        background:var(--color-brand);

    }

    .contact__row:hover .contact__icon-wrapper svg{

        color:#fff;

    }

    .contact__row:hover .contact__info p{

        color:var(--color-brand);

    }

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:991px){

    .contact{

        padding:7rem 0;

    }

    .contact__header{

        margin-bottom:4rem;

    }

    .contact__content{

        max-width:100%;

    }

}


@media (max-width:767px){

    .contact{

        padding:6rem 0;

    }

    .contact__row{

        flex-direction:column;

        align-items:flex-start;

        gap:1.25rem;

        padding:2rem 0;

    }

    .contact__icon-wrapper{

        width:48px;

        height:48px;

    }

    .contact__icon-wrapper svg{

        width:20px;

        height:20px;

    }

    .contact__info h3{

        font-size:1rem;

    }

    .contact__info p{

        font-size:.95rem;

        word-break:break-word;

    }

    .contact__row:hover{

        padding-left:0;

    }

    .contact__cta{

        margin-top:3rem;

    }

}


@media (max-width:480px){

    .contact{

        padding:5rem 0;

    }

    .contact__header{

        margin-bottom:3rem;

    }

    .contact__header::after{

        margin-top:2rem;

    }

    .contact__row{

        gap:1rem;

    }

}

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

.footer{

    padding:6rem 0 2rem;

    background:#fafafa;

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

}

.footer__top{

    display:grid;

    grid-template-columns:1.5fr 2fr;

    gap:6rem;

    padding-bottom:4rem;

}

.footer__brand{

    max-width:380px;

}

.footer__logo{

    display:inline-block;

    margin-bottom:2rem;

    transition:.3s ease;

}

.footer__logo img{

    width:220px;

    height:auto;

    display:block;

}

.footer__brand p{

    color:var(--color-text-light);

    line-height:1.9;

}

/* ===========================
   LINKS
=========================== */

.footer__links{

    display:grid;

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

    gap:3rem;

}

.footer__column{

    display:flex;

    flex-direction:column;

}

.footer__column h4{

    margin-bottom:1.5rem;

    font-size:1rem;

    font-weight:600;

    color:var(--color-heading);

}

.footer__column a{

    display:inline-block;

    margin-bottom:.9rem;

    text-decoration:none;

    color:var(--color-text-light);

    transition:all .3s ease;

}

.footer__column a:hover{

    color:var(--color-brand);

    transform:translateX(4px);

}

/* ===========================
   BOTTOM
=========================== */

.footer__bottom{

    display:flex;

    flex-wrap:wrap;

    justify-content:space-between;

    align-items:center;

    gap:2rem;

    padding-top:2rem;

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

    color:var(--color-text-light);

    font-size:.9rem;

}

/* ===========================
   RESPONSIVE
=========================== */

@media (max-width:991px){

    .footer{

        padding:5rem 0 2rem;

    }

    .footer__top{

        grid-template-columns:1fr;

        gap:4rem;

    }

    .footer__brand{

        max-width:100%;

        text-align:center;

    }

    .footer__logo{

        display:flex;

        justify-content:center;

    }

}

@media (max-width:767px){

    .footer__links{

        grid-template-columns:1fr;

        gap:2.5rem;

        text-align:center;

    }

    .footer__column{

        align-items:center;

    }

    .footer__bottom{

        flex-direction:column;

        text-align:center;

        gap:1rem;

    }

}

@media (max-width:480px){

    .footer{

        padding:4rem 0 2rem;

    }

    .footer__logo img{

        width:180px;

    }

}

@media (hover:hover){

    .footer__logo:hover{

        transform:translateY(-3px);

    }

    .footer__column a:hover{

        color:var(--color-brand);

        transform:translateX(4px);

    }

}


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

.faq{

    padding-block:var(--section-padding);

    background:#fff;

}

.faq__list{

    max-width:850px;

    margin:0 auto;

}

.faq__item{

    border-bottom:1px solid rgba(0,0,0,.08);

}

.faq__question{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:2rem 0;

    background:none;

    border:none;

    cursor:pointer;

    text-align:left;

    font:inherit;

}

.faq__question span{

    font-size:1.1rem;

    font-weight:600;

}

.faq__question svg{

    width:22px;

    height:22px;

    transition:.3s ease;

}

.faq__answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

}

.faq__answer p{

    padding-bottom:2rem;

    color:var(--color-text-light);

    line-height:1.8;

}

.faq__item.active .faq__answer{

    max-height:220px;

}

.faq__item.active svg{

    transform:rotate(180deg);

}

.faq__question:focus-visible{

    outline:2px solid var(--color-brand);

    outline-offset:6px;

    border-radius:8px;

}

@media(max-width:768px){

    .faq{

        padding:6rem 0;

    }

    .faq__question{

        padding:1.5rem 0;

    }

    .faq__question span{

        font-size:1rem;

        padding-right:1rem;

    }

}

@media (max-width:768px){

    .faq__question{

        padding:1.4rem 0;

    }

    .faq__question span{

        font-size:1rem;

        line-height:1.5;

    }

    .faq__answer p{

        padding-bottom:1.5rem;

        line-height:1.75;

    }

}

@media (hover:hover){

    .faq__question:hover{

        color:var(--color-brand);

    }

}

/* ==========================================================
   SCHEDULE
========================================================== */

.schedule{

    padding:10rem 0;

    background:#fff;

}

.section__header{

    max-width:700px;

    margin:0 auto 4rem;

    text-align:center;

}

.schedule__tabs{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:.35rem;

    width:fit-content;

    margin:4rem auto;

    padding:.35rem;

    background:#f4f4f4;

    border-radius:999px;

}

.schedule__indicator{

    position:absolute;

    top:.35rem;

    left:.35rem;

    height:calc(100% - .7rem);

    background:#fff;

    border-radius:999px;

    box-shadow:

        0 4px 12px rgba(0,0,0,.08);

    transition:

        left .35s cubic-bezier(.22,1,.36,1),

        width .35s cubic-bezier(.22,1,.36,1);

}

.schedule__tab{

    position:relative;

    z-index:2;

    border:none;

    background:none;

    padding:.9rem 1.7rem;

    border-radius:999px;

    cursor:pointer;

    color:var(--color-text-light);

    font:inherit;

    transition:color .25s;

}

.schedule__tab.active{

    color:var(--color-heading);

}

.schedule__tab:hover{

    color:var(--color-heading);

}

@media(max-width:768px){

    .schedule__tabs{

        width:100%;

        overflow:auto;

        justify-content:flex-start;

        scrollbar-width:none;

    }

    .schedule__tabs::-webkit-scrollbar{

        display:none;

    }

    .schedule__tab{

        white-space:nowrap;

        flex-shrink:0;

    }

}

.schedule__days{

    display:flex;

    justify-content:center;

    gap:1rem;

    flex-wrap:wrap;

    margin:4rem 0;

}

.schedule__day{

    padding:.9rem 1.6rem;

    border-radius:999px;

    border:none;

    background:#f4f4f4;

    cursor:pointer;

    transition:.3s;

}

.schedule__day.active{

    background:var(--color-brand);

    color:#fff;

}

.schedule__list{

    max-width:850px;

    margin:0 auto;

}

.schedule__item{

    display:flex;

    gap:3rem;

    align-items:flex-start;

    padding:2rem 0;

    border-bottom:1px solid rgba(0,0,0,.08);

}

.schedule__time{

    width:180px;

    flex-shrink:0;

    font-weight:700;

    color:var(--color-brand);

}

.schedule__content h3{

    margin-bottom:.5rem;

}

.schedule__content span{

    color:var(--color-text-light);

}

@media(max-width:768px){

    .schedule__item{

        flex-direction:column;

        gap:.75rem;

    }

    .schedule__time{

        width:auto;

    }

}

@media(max-width:992px){

    .schedule__time{

        width:140px;

    }

}

@media(max-width:768px){

    .schedule{

        padding-block:var(--section-padding);

    }

    .schedule__tabs{

        width:100%;

        justify-content:center;

        flex-wrap:wrap;

        gap:.5rem;

        margin:3rem auto;

    }

    .schedule__tab{

        padding:.8rem 1.2rem;

    }

    .schedule__item{

        gap:.6rem;

        padding:1.5rem 0;

    }

    .schedule__content h3{

        font-size:1.15rem;

    }

}

@media(max-width:480px){

    .schedule__tab{

        padding:.75rem 1rem;

        font-size:.9rem;

    }

}