/* =====================================================
   EMPÓRIO EXPRESS
   RESPONSIVE DESIGN
===================================================== */



/* =====================================================
   TABLETS GRANDES
   ATÉ 1200px
===================================================== */


@media(max-width:1200px){



.container{


    width:92%;


}





/* HEADER */


nav ul{


    gap:25px;


}






.header-whatsapp{


    padding:10px 18px;


}







/* HERO */


.hero-content{


    padding-top:110px;


}




.hero-content h1{


    font-size:4.8rem;


}






/* SOBRE */


.grid-2{


    gap:50px;


}





.about-content h2,


.stores-content h2{


    font-size:3rem;


}






/* CATEGORIAS */


.categories-grid{


    grid-template-columns:

    repeat(2,1fr);


}






/* BENEFÍCIOS */


.benefits-grid{


    grid-template-columns:

    repeat(2,1fr);


}






/* GALERIA */


.gallery{


    grid-template-columns:

    repeat(2,1fr);


}






}


/* =====================================================
   TABLETS / MOBILE
   ATÉ 768px
===================================================== */


@media(max-width:768px){



html,
body{


    width:100%;


    overflow-x:hidden;


}





section{


    padding:70px 0;


}





.container{


    width:90%;


}









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


#header .container{


    height:75px;


}





.logo img{


    max-width:150px;


    max-height:45px;


}





#menu-mobile{


    display:block;


}





nav{


    position:absolute;


    top:75px;


    left:0;


    width:100%;


    background:white;


    max-height:0;


    overflow:hidden;


    transition:.4s;


}






nav.active{


    max-height:450px;


}







nav ul{


    flex-direction:column;


    gap:0;


    padding:25px;


}





nav li{


    border-bottom:

    1px solid #eee;


}





nav a{


    display:block;


    padding:15px 0;


    color:#222;


}





#header.scrolled nav a,
#header.scrolled nav a:hover{

    color:#222;

}


.header-ifood{


    display:none;


}









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


.hero{


    min-height:650px;


}




.hero-content{


    padding-top:100px;


}




.hero-content h1{


    font-size:3.5rem;


}






.hero-content span{


    font-size:.75rem;


    letter-spacing:3px;


}





.hero-content p{


    font-size:.95rem;


    max-width:350px;


}





.hero-actions{


    flex-direction:column;


    width:100%;


    align-items:center;


}





.hero-actions a{


    width:100%;


    max-width:280px;


}









/* =====================================================
   SOBRE
===================================================== */


.grid-2{


    grid-template-columns:1fr;


}





.about-image{


    order:1;


}





.about-content{


    order:2;


}





.about-image img{


    height:400px;


}















/* =====================================================
   CATEGORIAS
===================================================== */


.categories-grid{


    grid-template-columns:

    1fr;


}





.category-card img{


    height:300px;


}









/* =====================================================
   DIFERENCIAIS
===================================================== */


.benefits-grid{


    grid-template-columns:

    1fr;


}









/* =====================================================
   GALERIA
===================================================== */


.gallery{


    grid-template-columns:

    1fr;


}





.gallery figure{


    height:320px;


}









/* =====================================================
   LOJAS
===================================================== */


.stores-image img{


    height:400px;


}









/* =====================================================
   AVALIAÇÕES
===================================================== */


.testimonials{


    grid-template-columns:

    1fr;


}









/* =====================================================
   CTA
===================================================== */


.cta h2{


    font-size:2.8rem;


}





.cta p{


    font-size:.95rem;


}









/* =====================================================
   FOOTER
===================================================== */


footer .container{


    grid-template-columns:

    1fr;


    text-align:center;


}





.footer-brand p{


    margin-left:auto;


    margin-right:auto;


}





.footer-links,

.social-links{


    align-items:center;


}





.footer-links a:hover,

.social-links a:hover{


    transform:none;


}





}


/* =====================================================
   SMARTPHONES
   ATÉ 480px
===================================================== */


@media(max-width:480px){



html,
body{


    overflow-x:hidden;


}





.container{


    width:88%;


}





section{


    padding:60px 0;


}








/* =====================================================
   HEADER
===================================================== */


#header .container{


    height:70px;


}





.logo img{


    max-width:125px;


    max-height:38px;


}





#menu-mobile{


    font-size:1.7rem;


}








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


.hero{


    min-height:600px;


}




.hero-content{


    padding:15px;


    padding-top:90px;


}





.hero-content h1{


    font-size:2.8rem;


}





.hero-content span{


    letter-spacing:2px;


    font-size:.7rem;


}





.hero-content p{


    font-size:.85rem;


    line-height:1.6;


}





.hero-actions{


    margin-top:25px;


}





.btn-primary,

.btn-outline{


    padding:14px 22px;


    font-size:.8rem;


}








/* =====================================================
   TITULOS
===================================================== */


.section-title h2,


.about-content h2,


.stores-content h2{


    font-size:2.2rem;


}








/* =====================================================
   SOBRE
===================================================== */


.about-image img{


    height:280px;


}





.about-image::after{


    width:70px;


    height:70px;


}










/* =====================================================
   CATEGORIAS
===================================================== */


.category-card img{


    height:240px;


}





.category-content{


    padding:25px 20px;


}





.category-content h3{


    font-size:1.7rem;


}








/* =====================================================
   DIFERENCIAIS
===================================================== */


.benefit-card{


    padding:30px 20px;


}





.benefit-icon{


    width:60px;


    height:60px;


}








/* =====================================================
   GALERIA
===================================================== */


.gallery figure{


    height:260px;


}









/* =====================================================
   LOJAS
===================================================== */


.stores-image img{


    height:300px;


}





.store-item h3{


    font-size:1.5rem;


}









/* =====================================================
   DEPOIMENTOS
===================================================== */


.testimonial{


    padding:30px 20px;


}





.testimonial::before{


    font-size:4rem;


}









/* =====================================================
   CTA
===================================================== */


.cta h2{


    font-size:2.1rem;


}





.cta p{


    font-size:.85rem;


}







.cta .btn-primary{


    width:100%;


}









/* =====================================================
   FOOTER
===================================================== */


footer{


    padding:60px 0 25px;


}





.footer-brand .logo img{


    max-width:150px;


}





.footer-bottom{


    font-size:.75rem;


}









/* =====================================================
   FLOAT BUTTONS
===================================================== */


.whatsapp{


    width:52px;


    height:52px;


    right:18px;


    bottom:18px;


}





.whatsapp svg{


    width:24px;


}







#backTop{


    width:40px;


    height:40px;


    right:20px;


    bottom:35px;


}


}









/* =====================================================
   SMARTPHONES PEQUENOS
   ATÉ 360px
===================================================== */


@media(max-width:360px){



.container{


    width:86%;


}




.hero-content{


    padding-top:80px;


}




.hero-content h1{


    font-size:2.4rem;


}







.hero-content p{


    font-size:.8rem;


}





.section-title h2,


.about-content h2,


.stores-content h2{


    font-size:2rem;


}





.category-card img{


    height:210px;


}





.gallery figure{


    height:220px;


}





.btn-primary,

.btn-outline{


    max-width:240px;


    width:100%;


}





.whatsapp{


    width:48px;


    height:48px;


}







}