/* =========================================
   FINORA STUDIOS
   RESPONSIVE DESIGN
========================================= */


/* =========================================
   LARGE LAPTOPS
========================================= */


@media (max-width:1200px){


    .navbar{

        width:92%;

    }



    .nav-menu ul{

        gap:25px;

    }



    .nav-cta{

        display:none;

    }





    .services-grid{

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

    }




    .why-grid{

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

    }





    .process-grid{

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

        row-gap:60px;

    }





    .footer-grid{

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

    }



}






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


@media (max-width:900px){



    .section{

        padding:100px 0;

    }




    /* MOBILE NAVBAR */


    .nav-menu{

        position:fixed;

        top:0;

        right:-100%;

        width:80%;

        height:100vh;

        background:var(--ivory);

        display:flex;

        align-items:center;

        justify-content:center;

        transition:.5s ease;

    }





    .nav-menu.active{

        right:0;

    }




    .nav-menu ul{

        flex-direction:column;

        gap:40px;

        text-align:center;

    }




    .nav-menu a{

        color:var(--charcoal);

        font-size:18px;

    }




    .menu-toggle{

        display:block;

        z-index:1001;

    }




    .header.scrolled .menu-toggle span{

        background:var(--charcoal);

    }




    .brand-text span{

        font-size:30px;

    }





    /* HERO */


    .hero{

        height:90vh;

    }



    .hero h1{

        font-size:60px;

    }



    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }



    .hero-description{

        font-size:16px;

    }





    /* ABOUT */


    .about-grid{

        grid-template-columns:1fr;

        gap:50px;

    }



    .about-image img{

        height:600px;

    }





    /* STORIES */


    .stories-grid{

        grid-template-columns:1fr;

    }




    .story-card{

        height:550px;

    }




    /* PORTFOLIO */


    .portfolio-grid{

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

    }






    /* INSTAGRAM */


    .instagram-grid{

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

    }





}








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


@media (max-width:600px){



    .container{

        width:90%;

    }





    .section-title h2{

        font-size:45px;

    }





    .brand img{

        width:35px;

    }



    .brand-text span{

        font-size:24px;

        letter-spacing:4px;

    }




    .brand-text small{

        font-size:7px;

    }





    /* HERO */


    .hero{

        height:100svh;

    }





    .hero-tag{

        font-size:10px;

        letter-spacing:3px;

    }




    .hero h1{

        font-size:45px;

    }




    .hero-description{

        font-size:15px;

    }





    .btn{

        width:100%;

        max-width:300px;

    }






    /* TRUSTED */


    .trusted-list{

        flex-direction:column;

    }





    .trusted-item{

        font-size:25px;

    }







    /* SERVICES */


    .services-grid{

        grid-template-columns:1fr;

    }





    .service-card{

        padding:35px 25px;

    }





    .service-card h3{

        font-size:30px;

    }







    /* WHY FINORA */


    .why-grid{

        grid-template-columns:1fr;

    }







    /* PROCESS */


    .process-grid{

        grid-template-columns:1fr;

    }







    /* TESTIMONIAL */


    .testimonial-card{

        padding:40px 25px;

    }




    .testimonial-card p{

        font-size:28px;

    }





    .client-info{

        flex-direction:column;

    }





    /* PORTFOLIO */


    .portfolio-grid{

        grid-template-columns:1fr;

    }




    .portfolio-item{

        height:450px;

    }





    /* INSTAGRAM */


    .instagram-grid{

        grid-template-columns:1fr;

    }




    .instagram-item{

        height:400px;

    }





    /* CTA */


    .booking-content h2{

        font-size:50px;

    }




    /* FOOTER */


    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }




    .footer-logo{

        font-size:45px;

    }



}