/* ==========================
 TABLET RESPONSIVE
========================== */


@media(max-width:992px){



.nav-menu{


display:none;


}



.nav-button{

display:none;

}



.menu-toggle{


display:flex;


}




.hero-container{


grid-template-columns:1fr;


text-align:center;


}



.hero-content h1{


font-size:48px;


}



.hero-description{


margin-left:auto;

margin-right:auto;


}



.hero-buttons{


justify-content:center;


}




.hero-image{


margin-top:50px;


}




.stats{


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


}




}






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


@media(max-width:600px){



.header{

padding:15px;

}



.navbar{


padding:15px 20px;


}



.logo a{


font-size:26px;


}





.hero{


padding-top:130px;


}



.hero-content h1{


font-size:38px;

letter-spacing:-1px;


}



.hero-description{


font-size:16px;


}



.hero-buttons{


flex-direction:column;


}



.primary-btn,
.secondary-btn{


width:100%;


}




.hero-image{


height:420px;


}



.dashboard-card{


width:280px;

padding:20px;


}




.floating-card{


padding:15px;

font-size:13px;


}



.card-one{


left:0;

top:40px;


}



.card-two{


right:0;

bottom:40px;


}




.stats{


grid-template-columns:1fr;


padding-top:50px;


}




.stat-box h2{


font-size:40px;


}




.brand-list{


gap:20px;


}



.brand-list div{


font-size:18px;


}



}

/* ==========================
 SERVICES RESPONSIVE
========================== */


@media(max-width:992px){


.service-container{


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


}



.portfolio-grid{


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


}



.section-title h2{


font-size:38px;


}



}




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


@media(max-width:600px){



.services,
.portfolio{


padding:70px 5%;


}



.section-title h2{


font-size:32px;


}



.section-title span{


font-size:15px;


}




.service-container{


grid-template-columns:1fr;


}



.service-card{


padding:30px 25px;


}




.service-card h3{


font-size:22px;


}



.portfolio-grid{


grid-template-columns:1fr;


}



.project-image{


height:220px;


}




.project-info h3{


font-size:21px;


}


}
/* ==========================
 ABOUT RESPONSIVE
========================== */


@media(max-width:992px){


.about-container{


grid-template-columns:1fr;


text-align:center;


}



.about-image{


height:400px;


}




.about-content h2{


font-size:38px;


}




.mission-box{


grid-template-columns:1fr;


}



.feature-grid{


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


}




.process-container{


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


}



}








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


@media(max-width:600px){



.about,
.why-us,
.process{


padding:70px 5%;


}




.about-card{


width:270px;

height:270px;


}



.about-card h3{


font-size:35px;


}




.experience-box{


right:0;

bottom:20px;


padding:20px;


}



.experience-box h2{


font-size:35px;


}




.about-content h2{


font-size:32px;


}




.about-content>p{


font-size:15px;


}





.mission-box div{


padding:20px;


}




.feature-grid{


grid-template-columns:1fr;


}




.feature-card{


padding:28px;


}




.process-container{


grid-template-columns:1fr;


}




.process-item{


padding:30px 20px;


}



}

/* ==========================
 CONTACT RESPONSIVE
========================== */


@media(max-width:992px){


.contact-container{


grid-template-columns:1fr;


}



.footer-container{


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


}



.final-cta h2{


font-size:38px;


}


}






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


@media(max-width:600px){



.contact,
.final-cta,
.footer{


padding:70px 5%;


}



.contact-form{


padding:25px;


}



.contact-card{


padding:20px;


}




.final-cta h2{


font-size:30px;


}



.final-cta p{


font-size:15px;


}




.footer-container{


grid-template-columns:1fr;


text-align:center;


}



.footer-social div{


align-items:center;


}




.footer-links a:hover,
.footer-social a:hover{


transform:none;


}



}