/*==============================================================
RESPONSIVE.CSS
Responsive Layout
==============================================================*/


/*==============================================================
≤ 1200px | DESKTOP
==============================================================*/

@media (max-width:1200px){

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

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

}


/*==============================================================
≤ 992px | LAPTOP
==============================================================*/

@media (max-width:992px){

    /*==========================
    Navigation
    ==========================*/

    .nav-links{

        position:fixed;

        inset:0 0 0 auto;

        width:min(320px,85vw);

        height:100vh;

        padding:6rem 2rem;

        background:var(--clr-black);

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:flex-start;

        gap:2rem;

        transform:translateX(100%);

        transition:transform .35s ease;

        z-index:999;

    }

    .nav-links.active{

        transform:translateX(0);

    }

    .menu-toggle{

        display:flex;

    }

    .navbar > .btn{

        display:none;

    }


    /*==========================
    About
    ==========================*/

    .about-grid{

        grid-template-columns:1fr;

        gap:3rem;

    }

    .about-image{

        width:100%;

        max-width:500px;

        margin-inline:auto;

    }


    /*==========================
    Footer
    ==========================*/

    .footer-grid{

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

    }

}


/*==============================================================
≤ 768px | TABLET
==============================================================*/

@media (max-width:768px){

    .cta-card{

        padding:clamp(2.5rem,6vw,4rem);

    }

    .cta-logo img{

        width:220px;

        height:auto;

    }
	
	    .booking-grid{

        grid-template-columns:1fr;

    }
	
	.form-group.full{

        grid-column:auto;

    }

}


/*==============================================================
≤ 640px | MOBILE
==============================================================*/

@media (max-width:640px){

    /*==========================
    Section Header
    ==========================*/

    .section-header{

        flex-direction:column;

        align-items:flex-start;

        text-align:left;

        gap:1rem;

    }


    /*==========================
    Services
    ==========================*/

    .services-grid{

        grid-template-columns:1fr;

    }


    /*==========================
    Products
    ==========================*/

    .products-grid{

        grid-template-columns:1fr;

    }


    /*==========================
    Footer
    ==========================*/

    .footer-grid{

        grid-template-columns:1fr;

        gap:2rem;

    }

    .footer-bottom{

        flex-direction:column;

        align-items:center;

        justify-content:center;

        gap:1rem;

        text-align:center;

    }

    .footer-bottom div{

        justify-content:center;

    }


    /*==========================
    Newsletter
    ==========================*/

    .newsletter{

        flex-direction:column;

        align-items:stretch;

        gap:1rem;

    }

    .newsletter button{

        width:100%;

        margin-top:0;

    }

}


/*==============================================================
≤ 480px | SMALL MOBILE
==============================================================*/

@media (max-width:480px){

    .container{

        width:min(calc(100% - 1.25rem),var(--container-width));

    }

    .btn{

        width:100%;

    }

    .nav-links{

        width:100%;

        padding-inline:1.5rem;

    }

}


/*==============================================================
PREFERS REDUCED MOTION
==============================================================*/

@media (prefers-reduced-motion: reduce){

    html{

        scroll-behavior:auto;

    }

    *,
    *::before,
    *::after{

        animation:none !important;

        transition:none !important;

    }

}