/* ==========================================================
   RESPONSIVE.CSS
   Agência Digital - Tema Roxo Escuro
========================================================== */


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

@media(max-width:1100px){


/* HEADER */

nav ul{

    gap:20px;

}


/* HERO */

.hero{

    padding-top:140px;

}


.hero-grid{

    grid-template-columns:1fr;

    text-align:center;

}


.hero p{

    margin-left:auto;

    margin-right:auto;

}


.hero-buttons{

    justify-content:center;

}


.hero-image{

    margin-top:50px;

}


.hero h1{

    font-size:3.5rem;

}


/* SOBRE */


.about-grid{

    grid-template-columns:1fr;

}


.about-image{

    max-width:600px;

    margin:auto;

}


/* SERVIÇOS */


.services-grid{

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

}


/* PORTFÓLIO */


.portfolio-grid{

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

}


/* PROCESSO */


.process-grid{

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

}


/* CONTATO */


.contact-grid{

    grid-template-columns:1fr;

}


/* FOOTER */


.footer-grid{

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

}


}




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


@media(max-width:768px){


body{

    overflow-x:hidden;

}


/* GERAL */


section{

    padding:70px 0;

}


.container{

    width:92%;

}



.section-title h2{

    font-size:2rem;

}



.section-title p{

    font-size:.95rem;

}



/* HEADER */


header{

    padding:15px 0;

}



.logo{

    font-size:1.3rem;

}


.menu-mobile{

    display:block;

}



nav{

    position:absolute;

    top:75px;

    left:4%;

    width:92%;

}



nav ul{

    flex-direction:column;

    text-align:center;

}



/* HERO */


.hero{

    min-height:auto;

    padding-top:130px;

    padding-bottom:80px;

}



.hero h1{

    font-size:2.5rem;

}



.hero p{

    font-size:1rem;

}



.hero-buttons{

    flex-direction:column;

    gap:15px;

}



.btn-primary,
.btn-secondary{

    width:100%;

}



.btn-secondary{

    margin-left:0;

}



.hero-info{

    justify-content:center;

    gap:25px;

}



.hero-info h3{

    font-size:1.5rem;

}



/* SOBRE */


.experience-card{

    position:relative;

    right:auto;

    bottom:auto;

    width:100%;

    margin-top:20px;

}



/* FEATURES */


.feature{

    flex-direction:column;

    text-align:center;

}



.feature .icon{

    margin:auto;

}



/* SERVIÇOS */


.services-grid{

    grid-template-columns:1fr;

}



/* PORTFÓLIO */


.portfolio-filter{

    flex-direction:column;

}



.portfolio-filter button{

    width:100%;

}



.portfolio-grid{

    grid-template-columns:1fr;

}


.project-card img{

    height:250px;

}



/* PROCESSO */


.process-grid{

    grid-template-columns:1fr;

}



/* DEPOIMENTOS */


.testimonial-slider{

    grid-template-columns:1fr;

}



/* CTA */


.cta-box{

    padding:45px 25px;

}



.cta-box h2{

    font-size:2rem;

}



.cta-buttons{

    flex-direction:column;

}



.cta-buttons .btn-secondary{

    margin:0;

}



/* CONTATO */


.contact-info h2{

    font-size:2rem;

}



.contact-form{

    padding:25px;

}



/* FOOTER */


.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}



footer p{

    margin:auto;

}


.social{

    justify-content:center;

}


}



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


@media(max-width:480px){


.hero h1{

    font-size:2rem;

}



.hero-info{

    flex-direction:column;

}



.hero-info div{

    text-align:center;

}



.section-title h2{

    font-size:1.7rem;

}



.service-card{

    padding:30px 20px;

}



.service-card i{

    width:65px;

    height:65px;

}



.project-overlay{

    padding:20px;

}



.project-overlay h3{

    font-size:1.2rem;

}



.contact-item{

    flex-direction:column;

    text-align:center;

}



#backToTop{

    width:45px;

    height:45px;

    right:15px;

    bottom:15px;

}


}



/*==========================================================
   AJUSTES DE IMAGENS
==========================================================*/


img{

    height:auto;

}



.mockup img{

    width:100%;

}



.image-card img{

    width:100%;

}



/*==========================================================
   ANIMAÇÕES MOBILE
==========================================================*/


@media(max-width:768px){


.reveal{

    transform:translateY(25px);

}


.fade-left,
.fade-right{

    transform:translateY(25px);

}


}