/* =====================================================
   HAIR PREMIUM v2
   RESPONSIVE DESIGN
===================================================== */


/* =========================
   TABLET
========================= */

@media(max-width:1100px){


    section{

        padding:90px 0;

    }



    /* HEADER */


    nav{

        gap:20px;

    }


    .phone span{

        display:none;

    }



    /* HERO */


    .hero-container{

        gap:50px;

    }



    .hero h1{

        font-size:55px;

    }



    .hero-image img{

        height:600px;

    }




    /* ABOUT */


    .about-container{

        gap:50px;

    }



    .about-image img{

        height:550px;

    }



    /* TEAM */


    .team-grid{

        gap:25px;

    }



}





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

@media(max-width:768px){



    section{

        padding:70px 0;

    }




    .container{

        width:90%;

    }





    /* HEADER */


    header{

        padding:20px 0;

    }



    .logo{

        font-size:25px;

    }




    nav{


        position:fixed;

        top:0;

        right:-100%;


        width:80%;

        height:100vh;


        background:white;


        flex-direction:column;

        justify-content:center;

        gap:30px;


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


        transition:.4s ease;


    }



    nav.active{

        right:0;

    }




    nav a{

        font-size:20px;

    }





    .menu-btn{

        display:block;

    }



    .header-right{

        gap:15px;

    }




    /* HERO */


    .hero{

        padding-top:120px;

        min-height:auto;

    }



    .hero-container{


        grid-template-columns:1fr;

        gap:40px;


    }




    .hero-content{

        text-align:center;

    }




    .hero h1{


        font-size:44px;


    }





    .hero p{

        margin-left:auto;

        margin-right:auto;

        font-size:16px;

    }




    .hero-buttons{


        justify-content:center;


    }




    .hero-image img{


        height:480px;


    }



    .scroll-down{

        display:none;

    }







    /* TITLES */


    .section-title{


        font-size:38px;

    }




    .section-header{


        text-align:center;


    }






    /* ABOUT */


    .about-container{


        grid-template-columns:1fr;

        gap:40px;


    }



    .about-image img{


        height:450px;


    }




    .stats{


        justify-content:center;

        text-align:center;

        gap:30px;


    }







    /* SERVICES */


    .service-item{


        flex-direction:column;

        align-items:flex-start;

        gap:15px;


    }



    .service-item:hover{


        padding-left:0;


    }




    .service-item h3{


        font-size:24px;


    }





    /* GALLERY */


    .gallery-grid{


        grid-template-columns:1fr;


    }



    .gallery-item img{


        height:420px;


    }






    /* TEAM */


    .team-grid{


        grid-template-columns:1fr;


    }



    .team-card img{


        height:450px;


    }





    /* REVIEWS */


    .review p{


        font-size:24px;


    }




    .stars{


        font-size:22px;


    }





    /* CONTACT */


    .contact-container{


        grid-template-columns:1fr;

        gap:40px;


    }




    .contact-map{


        height:350px;


    }




    /* FOOTER */


    .footer-bottom{


        flex-direction:column;

        text-align:center;


    }



}