/* =========================
   LARGE DESKTOP
========================= */

@media (min-width:1600px){

.container{

max-width:1500px;

margin:auto;

}

.hero h1{

font-size:78px;

}

}


/* =========================
   LAPTOP
========================= */

@media (max-width:1200px){

.hero{

gap:40px;

}

.hero h1{

font-size:55px;

}

.tech-grid{

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

}

.service-grid{

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

}

}


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

@media (max-width:992px){

.nav-links{

display:none;

}

.menu-btn{

display:block;

font-size:30px;

cursor:pointer;

}

.hero{

grid-template-columns:1fr;

text-align:center;

padding-top:150px;

}

.hero p{

margin:auto;

}

.hero-buttons{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

}

.hero-stats{

justify-content:center;

flex-wrap:wrap;

}

.hero-right{

margin-top:50px;

}

.tech-grid{

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

}

.service-grid{

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

}

.cta h2{

font-size:36px;

}

}


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

@media (max-width:768px){

section{

padding:70px 20px;

}

.logo{

font-size:24px;

}

.hero{

padding-top:120px;

}

.hero h1{

font-size:38px;

}

.hero p{

font-size:16px;

}

.hero-buttons{

flex-direction:column;

}

.btn-primary,

.btn-outline{

width:100%;

text-align:center;

margin:0;

}

.hero-right{

grid-template-columns:1fr;

}

.hero-stats{

gap:20px;

}

.hero-stats h2{

font-size:30px;

}

.tech-grid{

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

}

.service-grid{

grid-template-columns:1fr;

}

.cta{

margin:40px 20px;

padding:60px 20px;

}

.cta h2{

font-size:28px;

}

footer{

padding:50px 20px;

}

}


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

@media (max-width:480px){

.hero h1{

font-size:32px;

}

.hero p{

font-size:15px;

line-height:1.8;

}

.badge{

font-size:13px;

}

.tech-grid{

grid-template-columns:1fr;

}

.glass-card{

padding:25px;

}

.service-card{

padding:30px;

}

.footer-logo{

font-size:28px;

}

}

@media(max-width:992px){

.why-grid{

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

}

.counter-area{

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

}

}

@media(max-width:768px){

.section-title h2{

font-size:32px;

}

.why-grid{

grid-template-columns:1fr;

}

.counter-area{

grid-template-columns:1fr;

}

}

@media(max-width:992px){

.featured-project .container{

grid-template-columns:1fr;

}

.project-left{

order:2;

}

.project-right{

order:1;

}

.project-left h2{

font-size:36px;

}

}

@media(max-width:768px){

.project-list{

grid-template-columns:1fr;

}

}

@media(max-width:992px){

.portfolio-grid{

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

}

}

@media(max-width:768px){

.portfolio-grid{

grid-template-columns:1fr;

}

}

@media(max-width:992px){

.process-grid{

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

}

}

@media(max-width:768px){

.process-grid{

grid-template-columns:1fr;

}

}