/*==============================================================================
RESPONSIVE
ANSIER PREMIUM
==============================================================================*/

/*==========================
1400px
==========================*/

@media screen and (max-width:1400px){

.hero__title{

    font-size:64px;

}

.about__container,
.contact__container{

    gap:50px;

}

}


/*==========================
1200px
==========================*/

@media screen and (max-width:1200px){

.hero__title{

    font-size:56px;

}

.about__container{

    grid-template-columns:1fr;

}

.about__image-container{

    order:-1;

    max-width:700px;

    margin:auto;

}

.categories__grid{

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

}

.projects__grid{

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

}

.process__grid{

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

}

.process__grid::before{

    display:none;

}

.footer__container{

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

}

}


/*==========================
992px
==========================*/

@media screen and (max-width:992px){

section{

    padding:90px 0;

}

.hero{

    text-align:center;

}

.hero__container{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.hero__actions{

    justify-content:center;

}

.benefits__grid{

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

}

.contact__container{

    grid-template-columns:1fr;

}

}


/*==========================
768px
==========================*/

@media screen and (max-width:768px){

.hero{

    min-height:90vh;

}

.hero__title{

    font-size:44px;

}

.hero__description{

    font-size:17px;

}

.categories__grid{

    grid-template-columns:1fr;

}

.projects__grid{

    grid-template-columns:1fr;

}

.process__grid{

    grid-template-columns:1fr;

}

.benefits__grid{

    grid-template-columns:1fr;

}

.about__pillars{

    grid-template-columns:1fr;

}

.footer__container{

    grid-template-columns:1fr;

    text-align:center;

}

.footer__social{

    justify-content:center;

}

.footer__contact-item{

    justify-content:center;

}

.footer__bottom{

    flex-direction:column;

    gap:12px;

}

}


/*==========================
576px
==========================*/

@media screen and (max-width:576px){

.hero__title{

    font-size:36px;

}

.hero__description{

    font-size:16px;

}

.hero__actions{

    width:100%;

}

.hero__actions .btn{

    width:100%;

}

.about__title,
.benefits__title,
.categories__title,
.projects__title,
.process__title,
.contact__title{

    font-size:30px;

}

.project-card img{

    height:220px;

}

.category-item{

    height:280px;

}

.contact__form{

    padding:25px;

}

.whatsapp{

    width:58px;

    height:58px;

    font-size:26px;

}

.back-to-top{

    width:50px;

    height:50px;

}

}


/*==========================
400px
==========================*/

@media screen and (max-width:400px){

.hero__title{

    font-size:30px;

}

.hero__tagline{

    font-size:12px;

}

.btn{

    padding:15px 25px;

}

.contact__form{

    padding:20px;

}

.footer__logo{

    font-size:28px;

}

}