/* =====================================
   MoTow Premium Website
   styles-responsive.css
   Mobile & Tablet Layout
===================================== */


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


@media (max-width:1100px){


    .cards{

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

    }


    .reviews{

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

    }

.animate{

    opacity:0;

    transform:translateY(30px);

    transition:.6s ease;

}


.animate.visible{

    opacity:1;

    transform:translateY(0);

}
    .area-grid{

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

    }


    .gallery{

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

    }


}



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


@media (max-width:850px){


    .header-inner{

        height:80px;

    }


    .nav{

        display:none;

    }


    .menu-toggle{

        display:block;

    }


    .header-call{

        display:none;

    }



    .nav.open{

        display:flex;

    }



}



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


@media (max-width:700px){


    .hero{

        min-height:90vh;

    }


    .hero-content{

        padding-top:100px;

    }


    h1{

        font-size:2.8rem;

        letter-spacing:-1px;

    }


    .hero p{

        font-size:1rem;

    }


    .hero-buttons{

        flex-direction:column;

        width:100%;

    }


    .hero-buttons .btn{

        width:100%;

    }


    .hero-trust{

        flex-direction:column;

        align-items:flex-start;

    }


    .hero-trust span{

        width:100%;

        text-align:center;

    }



}



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


@media(max-width:700px){


    .section{

        padding:70px 0;

    }


    h2{

        font-size:2rem;

    }



    .cards{

        grid-template-columns:1fr;

    }



    .area-grid{

        grid-template-columns:1fr;

    }



    .gallery{

        grid-template-columns:1fr;

    }



    .gallery img{

        height:260px;

    }



    .reviews{

        grid-template-columns:1fr;

    }



}



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


@media(max-width:420px){


    .container{

        width:90%;

    }



    .logo img{

        height:45px;

    }



    .hero-tag{

        font-size:.7rem;

    }



    .floating-call{

        width:55px;

        height:55px;

        right:18px;

        bottom:18px;

    }


}