/* =====================================
   TABLETS
===================================== */

@media (max-width:992px){

nav{

    height:80px;

    padding:0 30px;

}

.logo img{

    width:200px;

}

.menu-toggle{

    display:block;

}

.nav-center{

    display:none;

    position:absolute;

    top:80px;

    left:0;

    width:100%;

    background:rgba(25,35,30,.98);

}

.nav-center.active{

    display:block;

}

.nav-center ul{

    flex-direction:column;

    align-items:center;

    gap:28px;

    padding:35px 0;

}

.nav-right{

    display:none;

}

header h1{

    font-size:54px;

}

header p{

    font-size:18px;

}

.story-container,
.room-container{

    grid-template-columns:1fr;

}

.philosophy-grid,
.team-gallery,
.why-grid{

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

}

.room-gallery{

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

}

.layout-grid{

    grid-template-columns:1fr;

}

}



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

@media (max-width:768px){

nav{

    height:75px;

    padding:0 20px;

}

.logo img{

    width:170px;

}

.nav-center{

    top:75px;

}

header{

    padding:0 20px;

}

header h1{

    font-size:40px;

    line-height:1.2;

}

header p{

    font-size:17px;

}

.hero-btn{

    margin-top:30px;

}

.welcome,
.our-story,
.philosophy,
.team,
.vision,
.room-section,
.rooms-intro,
.layout-section,
.why-section{

    padding:70px 25px;

}

.room-gallery,
.team-gallery,
.philosophy-grid,
.why-grid{

    grid-template-columns:1fr;

}

.room-gallery img{

    height:260px;

}

.room-specs{

    grid-template-columns:1fr;

}

.book-btn,
.story-btn,
.hero-btn{

    width:100%;

    max-width:280px;

    text-align:center;

}

}
.room-hero img{

    height:45vh;

    border-radius:0;

}


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

@media (max-width:480px){

nav{

    height:70px;

}

.logo img{

    width:150px;

}

.nav-center{

    top:70px;

}

header h1{

    font-size:32px;

}

header p{

    font-size:16px;

}

.welcome h3,
.story-text h2,
.room-text h2,
.about-overlay h1{

    font-size:38px;

}

.room-gallery img{

    height:220px;

}

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

@media (max-width:768px){

.contact-container{

    grid-template-columns:1fr;

    gap:50px;

}

.contact-info h2{

    font-size:40px;

}

.contact-map iframe{

    min-height:350px;

}

.footer-links{

    flex-direction:column;

    gap:18px;

}

.footer-social{

    flex-direction:column;

    gap:15px;

}

}
/* ==========================
   GALLERY RESPONSIVE
========================== */

@media (max-width:768px){

.gallery-hero{

    height:60vh;

}

.gallery-hero h1{

    font-size:46px;

}

.gallery-hero p{

    font-size:17px;

}

.gallery-intro{

    padding:70px 25px;

}

.gallery-intro h2{

    font-size:38px;

}

.gallery-category{

    padding:70px 25px;

}

.gallery-category h2{

    font-size:36px;

}

.gallery-grid{

    grid-template-columns:1fr;

}

.gallery-grid img{

    height:280px;

}

.gallery-banner{

    padding:0 25px 70px;

}

.gallery-banner img{

    height:320px;

    border-radius:16px;

}

}
/* ==========================
   EXPERIENCES RESPONSIVE
========================== */

@media (max-width:768px){

.experience-hero{

    height:60vh;

}

.experience-hero h1{

    font-size:46px;

}

.experience-hero p{

    font-size:17px;

}

.experience-intro{

    padding:70px 25px;

}

.experience-intro h2{

    font-size:38px;

}

.experience-section{

    grid-template-columns:1fr;

    gap:40px;

    padding:70px 25px;

}

.experience-section.reverse{

    direction:ltr;

}

.experience-image img{

    height:300px;

}

.experience-text h2{

    font-size:38px;

}

}
/* ==========================
   DIGITAL NOMADS
========================== */

.nomad-grid{

    grid-template-columns:1fr;

}

.digital-nomads{

    padding:70px 25px;

}

.digital-nomads h2{

    font-size:40px;

}

.digital-nomads>p{

    margin-bottom:40px;

}

.nomad-card{

    padding:30px 25px;

}

.nomad-card h3{

    font-size:28px;

}
/*=================================================
THE PEOPLE BEHIND SE'TENA
=================================================*/

@media screen and (max-width:768px){

    .team-section{

        padding:80px 8%;

    }

    .team-section h2{

        font-size:2.3rem;
        line-height:1.2;

    }

    .team-intro{

        font-size:1rem;
        margin-bottom:60px;

    }

    .team-member,
    .team-member.reverse{

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

        gap:30px;

        margin-bottom:80px;

    }

    .team-photo{

        width:100%;
        max-width:340px;

        margin:auto;

        flex:none;

    }

    .team-photo img{

        width:100%;
        height:420px;

        object-fit:cover;
        object-position:center;

    }

    .team-photo.slider{

        width:100%;
        max-width:340px;

        height:420px;

        position:relative;

        overflow:hidden;

    }

    .team-photo.slider img{

        position:absolute;
        inset:0;

        width:100%;
        height:100%;

        object-fit:cover;
        object-position:center;

        opacity:0;

        transition:opacity 1.5s ease-in-out;

    }

    .team-photo.slider img.active{

        opacity:1;

    }

    .team-info{

        width:100%;

    }

    .team-info h3{

        font-size:2rem;
        line-height:1.2;

    }

    .team-role{

        font-size:.85rem;

    }

    .team-location{

        font-size:.9rem;

    }

    .team-info p{

        text-align:center;
        font-size:1rem;
        line-height:1.8;

    }

    .team-member::after{

        width:60px;
        bottom:-40px;

    }

}