/*=========================================
        LARGE LAPTOPS
=========================================*/

@media (max-width:1400px){

.container{

    width:92%;

}

.hero-content h1{

    font-size:60px;

}

}


/*=========================================
        LAPTOPS
=========================================*/

@media (max-width:1200px){

.hero-container,
.about-wrapper,
.contact-wrapper{

    grid-template-columns:1fr;

    gap:60px;

}

.hero-image{

    order:-1;

}

.hero-image img{

    width:420px;

}

.stats-grid,
.statistics-grid{

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

}

.brand-wrapper{

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

}

.services-grid{

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

}

.process-wrapper{

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

}

.why-grid{

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

}

.footer-grid{

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

}

}


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

@media (max-width:992px){

.section{

    padding:90px 0;

}

.section-heading h2{

    font-size:40px;

}

.hero-content{

    text-align:center;

}

.hero-content h1{

    font-size:52px;

}

.hero-buttons{

    justify-content:center;

}

.hero-features{

    justify-content:center;

}

.about-content{

    text-align:center;

}

.about-list{

    grid-template-columns:1fr;

}

.top-bar{

    display:none;

}

header{

    top:0;

}

nav{

    position:fixed;

    top:90px;

    left:-100%;

    width:280px;

    height:100vh;

    background:#fff;

    transition:.4s;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

nav.active{

    left:0;

}

nav ul{

    flex-direction:column;

    padding:40px;

    gap:25px;

}

.menu-btn{

    display:block;

}

.quote-btn{

    display:none;

}

}


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

@media (max-width:768px){

.section{

    padding:80px 0;

}

.hero{

    padding-top:60px;

}

.hero-content h1{

    font-size:42px;

}

.hero-content p{

    font-size:16px;

}

.hero-image img{

    width:320px;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

}

.primary-btn,
.secondary-btn{

    width:220px;

}

.stats-grid,
.statistics-grid{

    grid-template-columns:1fr;

}

.brand-wrapper{

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

    gap:25px;

}

.services-grid{

    grid-template-columns:1fr;

}

.why-grid{

    grid-template-columns:1fr;

}

.process-wrapper{

    grid-template-columns:1fr;

}

.reviews-grid{

    grid-template-columns:1fr;

}

.footer-grid{

    grid-template-columns:1fr;

}

.footer-bottom{

    flex-direction:column;

    text-align:center;

}

.contact-wrapper{

    grid-template-columns:1fr;

}

.cta-box{

    flex-direction:column;

    text-align:center;

}

.cta-buttons{

    justify-content:center;

}

.about-images{

    text-align:center;

}

.experience-card{

    position:relative;

    right:auto;

    bottom:auto;

    margin:20px auto 0;

}

.map-wrapper iframe{

    height:350px;

}

.floating-call{

    right:20px;

    bottom:95px;

}

.floating-whatsapp{

    right:20px;

    bottom:20px;

}

.back-to-top{

    left:20px;

    bottom:20px;

}

}


/*=========================================
        SMALL MOBILE
=========================================*/

@media (max-width:576px){

.container{

    width:94%;

}

.hero-content h1{

    font-size:34px;

}

.section-heading h2{

    font-size:30px;

}

.section-heading p{

    font-size:15px;

}

.hero-image img{

    width:260px;

}

.top-left{

    flex-direction:column;

    gap:8px;

}

.hero-features{

    flex-direction:column;

}

.hero-features div{

    width:100%;

    justify-content:center;

}

.contact-form{

    padding:25px;

}

.cta-box{

    padding:35px 25px;

}

.cta-content h2{

    font-size:30px;

}

.info-card{

    flex-direction:column;

    text-align:center;

    align-items:center;

}

.info-icon{

    margin-bottom:10px;

}

.footer-logo{

    width:160px;

}

.footer-social{

    justify-content:center;

}

.floating-call,
.floating-whatsapp{

    width:55px;

    height:55px;

}

}