@import url("variables.css");

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

@media(max-width:1400px){

.container{

    width:94%;

}

.hero-left h1{

    font-size:68px;

}

.hero-logo{

    width:380px;

}

}

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

@media(max-width:1200px){

.hero-container{

    grid-template-columns:1fr;

    text-align:center;

    gap:70px;

}

.hero-right{

    order:-1;

}

.hero-buttons{

    justify-content:center;

}

.hero-features{

    justify-content:center;

}

.stats-grid{

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

}

.why-grid{

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

}

.service-grid{

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

}

.process-grid{

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

}

.contact-grid{

    grid-template-columns:1fr;

}

.footer-grid{

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

}

}

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

@media(max-width:992px){

.navbar{

    flex-direction:column;

    gap:25px;

}

.nav-links{

    flex-wrap:wrap;

    justify-content:center;

}

.hero{

    padding-top:160px;

}

.hero-left h1{

    font-size:56px;

}

.hero-logo{

    width:320px;

}

.section-header h2{

    font-size:42px;

}

}

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

@media(max-width:768px){

section{

    padding:90px 0;

}

.hero{

    min-height:auto;

}

.hero-left h1{

    font-size:46px;

}

.hero-left p{

    font-size:16px;

}

.hero-buttons{

    flex-direction:column;

}

.btn-primary,

.btn-secondary,

.btn-nav{

    width:100%;

}

.hero-features{

    flex-direction:column;

    gap:18px;

}

.stats-grid,

.why-grid,

.service-grid,

.process-grid,

.footer-grid{

    grid-template-columns:1fr;

}

.hero-logo{

    width:260px;

}

.brand{

    flex-direction:column;

}

.footer{

    text-align:center;

}

.footer-social{

    justify-content:center;

}

.footer-bottom{

    flex-direction:column;

}

}

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

@media(max-width:576px){

.container{

    width:92%;

}

.brand img{

    width:56px;

}

.brand-text h2{

    font-size:22px;

}

.hero-left h1{

    font-size:38px;

}

.section-header h2{

    font-size:34px;

}

.hero-logo{

    width:210px;

}

.service-box,

.why-card,

.process-card,

.stat-card,

.contact-info,

.contact-form{

    padding:28px;

}

.hero-buttons{

    gap:15px;

}

.nav-links{

    gap:18px;

}

.footer-bottom div{

    flex-direction:column;

    gap:12px;

}

.whatsapp{

    width:54px;

    height:54px;

}

#backTop{

    width:52px;

    height:52px;

}

}

/* ==========================================
   420px
========================================== */

@media(max-width:420px){

.hero-left h1{

    font-size:32px;

}

.hero-left p{

    font-size:15px;

}

.hero-logo{

    width:180px;

}

.section-header h2{

    font-size:30px;

}

.hero-badge{

    font-size:12px;

}

.brand-text span{

    font-size:11px;

}

}