/* ########################################################################################################## */
/* RESPONSIVE */
/* ########################################################################################################## */

/* TABLET */

@media (max-width: 1024px){

    h1{
        font-size:1.6rem;
    }

    p,a{
        font-size:1rem;
    }

    /* HEADER */

    .header-section{
        flex-direction:column;
        gap:12px;
        padding:12px 20px;
    }

    .nav-section{
        flex-wrap:wrap;
        justify-content:center;
        gap:12px;
        padding:10px 20px;
    }

    /* HERO */

    .main-section{
        height:450px;
    }

    /* CARDS */

    .section-section{
        flex-wrap:wrap;
        justify-content:center;
    }

    .lux-card{
        width:320px;
    }

    /* WHY */

    .why-header h2,
    .gallery-header h2,
    .contact-header h2,
    .map-header h2,
    .booking-header h2,
    .about-content h2{
        font-size:46px;
    }

    /* ABOUT */

    .about-section{
        grid-template-columns:1fr;
        text-align:center;
        gap:60px;
    }

    .about-image{
        display:flex;
        justify-content:center;
    }

    /* CONTACT */

    .contact-info{
        grid-template-columns:1fr;
    }

    .form-wrapper{
        padding:40px;
    }

    /* GALLERY */

    .gallery-grid{
        columns:2;
    }

    /* BOOKING */

    .booking-meta{
        gap:40px;
    }
    
    .auth-section{
        grid-template-columns:1fr;
    }

    .auth-image{
        display:none;
    }

    .auth-box{
        padding:60px 30px;
    }
    
    .profile-section{
        grid-template-columns:1fr;
    }

    .profile-sidebar{
        padding:40px 24px;
    }

    .profile-content{
        padding:40px 28px;
    }

    .profile-header h1{
        font-size:42px;
    }
    
    .booking-history-card{
        flex-direction:column;
        align-items:flex-start;
    }

    .booking-history-right{
        width:100%;
    }

    .booking-action-btn,
    .booking-secondary-btn{
        width:100%;
    }
    
    .cert-grid{
        grid-template-columns:1fr;
    }

    .cert-card.featured{
        transform:none;
    }

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

    .cert-header h2{
        font-size:48px;
    }
}



/* MOBILE */

@media (max-width: 768px){

    body{
        overflow-x:hidden;
    }

    /* TYPOGRAPHY */

    .why-header h2,
    .gallery-header h2,
    .contact-header h2,
    .map-header h2,
    .booking-header h2,
    .about-content h2{
        font-size:38px;
        line-height:1.2;
    }

    .booking-header p,
    .contact-header p,
    .gallery-header p,
    .map-header p,
    .why-header p{
        font-size:16px;
    }

    /* HEADER */

    .header-section-row{
        flex-direction:column;
        gap:10px;
    }

    .nav-section{
        flex-direction:column;
        align-items:center;
        gap:10px;
    }

    .nav-section-row{
        flex-wrap:wrap;
        justify-content:center;
    }

    .nav-link{
        padding:8px;
    }

    /* HERO */

    .main-section{
        height:320px;
    }

    /* SECTION */

    .section-section{
        padding:10px;
    }

    .lux-card{
        width:100%;
        max-width:360px;
    }

    .lux-content h2{
        font-size:28px;
    }

    /* WHY */

    .why-section{
        padding:80px 20px;
    }

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

    /* FOOTER */

    .footer-top{
        flex-direction:column;
        gap:40px;
    }

    .footer-brand h2{
        font-size:30px;
    }

    /* GALLERY */

    .gallery-section{
        padding:80px 20px;
    }

    .gallery-grid{
        columns:1;
    }

    /* ABOUT */

    .about-section{
        padding:80px 20px;
        gap:40px;
    }

    .about-content p{
        font-size:16px;
    }

    /* CONTACT */

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

    .contact-header{
        padding:80px 20px 60px;
    }

    .form-wrapper{
        padding:28px;
        border-radius:24px;
    }
    .form-row{
        grid-template-columns:1fr;
    }
    .contact-card{
        padding:28px;
    }

    /* MAP */
    .map-section{
        padding:80px 20px;
    }
    .map-wrapper iframe{
        height:400px;
    }

    /* BOOKING */
    .booking-container{
        padding:0 20px 100px;
    }
    .booking-card{
        flex-direction:column;
        align-items:flex-start;
        gap:30px;
        padding:28px;
    }
    .booking-meta{
        flex-direction:column;
        align-items:flex-start;
        gap:24px;
    }
    .booking-meta h3{
        font-size:28px;
    }
    .booking-btn{
        width:100%;
    }
    .date-picker{
        flex-direction:column;
    }

    .auth-section{
        grid-template-columns:1fr;
    }

    .auth-image{
        display:none;
    }

    .auth-box{
        padding:40px 24px;
    }
    
    .auth-box{
        padding:40px 20px;
    }

    .auth-form h2{
        font-size:40px;
    }

    .auth-tabs{
        width:100%;
    }

    .auth-tab{
        flex:1;
    }
    
    .profile-form{
        grid-template-columns:1fr;
    }

    .profile-save-btn{
        width:100%;
    }

    .profile-header h1{
        font-size:36px;
    }

    .profile-header p{
        font-size:16px;
    }
    
    .profile-bookings-header h2{
        font-size:36px;
    }

    .booking-history-left h3{
        font-size:28px;
    }
    
    .cert-header h2{
        font-size:40px;
    }

    .cert-header p{
        font-size:16px;
    }

    .cert-card img{
        height:320px;
    }
}



/* SMALL MOBILE */

@media (max-width: 480px){

    .why-header h2,
    .gallery-header h2,
    .contact-header h2,
    .map-header h2,
    .booking-header h2,
    .about-content h2{
        font-size:32px;
    }

    .lux-content{
        padding:22px;
    }

    .lux-content h2{
        font-size:24px;
    }

    .booking-meta h3{
        font-size:24px;
    }

    .footer{
        padding:70px 20px 20px;
    }
    
    .profile-section{
        margin:80px auto;
        padding:0 16px;
    }

    .profile-content{
        padding:32px 20px;
    }

    .profile-sidebar{
        border-radius:24px;
    }

    .profile-content{
        border-radius:24px;
    }

    .profile-avatar{
        width:90px;
        height:90px;

        font-size:36px;
    }

    .profile-sidebar h2{
        font-size:26px;
    }

    .profile-header h1{
        font-size:30px;
    }
    
    .booking-history-card{
        padding:24px;
        border-radius:22px;
    }

    .profile-bookings-header h2{
        font-size:30px;
    }

    .booking-history-left h3{
        font-size:24px;
    }
    
    .cert-section{
        margin:100px auto;
    }
    .cert-header h2{
        font-size:32px;
    }
    .cert-card{
        border-radius:24px;
    }
    .cert-card img{
        border-radius:18px;
    }
}