/* ==========================
   LARGE SCREEN
========================== */

@media(max-width:1400px){

.hero h1{
font-size:68px;
}

.section-title h2{
font-size:52px;
}

.cta-box h2{
font-size:58px;
}

}


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

@media(max-width:1200px){

.hero-content{
gap:40px;
}

.hero h1{
font-size:58px;
}

.hero-right{
height:500px;
}

.stats-wrapper,
.services-grid,
.portfolio-grid,
.products-grid,
.testimonial-grid{
grid-template-columns:repeat(2,1fr);
}

.footer-grid{
grid-template-columns:repeat(2,1fr);
}

.why-wrapper{
grid-template-columns:1fr;
}

}


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

@media(max-width:992px){

.navbar{
display:none;
}

.quote-btn{
display:none;
}

.hero{
padding-top:140px;
text-align:center;
}

.hero-content{
flex-direction:column;
}

.hero-left{
width:100%;
}

.hero-right{
width:100%;
height:450px;
}

.hero h1{
font-size:52px;
max-width:100%;
}

.hero p{
font-size:18px;
margin:auto;
margin-bottom:35px;
}

.hero-buttons{
justify-content:center;
flex-wrap:wrap;
}

.stats-wrapper,
.services-grid,
.portfolio-grid,
.products-grid,
.testimonial-grid{
grid-template-columns:1fr 1fr;
}

.section-title h2{
font-size:48px;
}

.why-right{
grid-template-columns:1fr 1fr;
}

.cta-box{
padding:60px 40px;
}

.cta-box h2{
font-size:52px;
}

.footer-grid{
grid-template-columns:1fr 1fr;
gap:40px;
}

}


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

@media(max-width:768px){

.container{
width:92%;
}

.logo img{
height:48px;
}

.hero{
padding-top:130px;
padding-bottom:80px;
}

.hero h1{
font-size:42px;
letter-spacing:-2px;
}

.hero p{
font-size:17px;
line-height:1.8;
}

.tag{
font-size:14px;
padding:12px 20px;
}

.primary-btn,
.secondary-btn{
width:100%;
justify-content:center;
padding:18px 20px;
font-size:16px;
}

.hero-buttons{
flex-direction:column;
width:100%;
}

.hero-right{
height:350px;
}

.floating-card{
font-size:16px;
padding:20px;
border-radius:20px;
}

.card1{
top:20px;
left:10px;
}

.card2{
top:120px;
right:0;
}

.card3{
bottom:80px;
left:0;
}

.card4{
bottom:0;
right:20px;
}

.section-title{
margin-bottom:50px;
}

.section-title h2{
font-size:36px;
}

.section-title p{
font-size:17px;
}

.stats-wrapper,
.services-grid,
.portfolio-grid,
.products-grid,
.testimonial-grid,
.footer-grid,
.why-right{
grid-template-columns:1fr;
}

.stat-card h2{
font-size:46px;
}

.service-card,
.product-card,
.testimonial-card,
.why-card{
padding:30px;
}

.portfolio-card{
height:320px;
}

.product-image{
height:240px;
}

.why-left h2{
font-size:38px;
}

.cta-box{
padding:45px 25px;
border-radius:30px;
}

.cta-box h2{
font-size:38px;
}

.cta-box p{
font-size:17px;
}

.footer{
padding:70px 0 30px;
}

.footer-logo{
height:50px;
}

.footer-col h3{
font-size:22px;
}

.footer-bottom{
margin-top:40px;
}

.floating-whatsapp{
width:60px;
height:60px;
font-size:28px;
right:20px;
bottom:20px;
}

}


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

@media(max-width:480px){

.hero h1{
font-size:34px;
}

.section-title h2{
font-size:30px;
}

.hero-right{
height:300px;
}

.floating-card{
font-size:14px;
padding:16px;
}

.cta-box h2{
font-size:32px;
}

@media(max-width:767px){

.product-search{
width:100%;
}

.page-hero{
padding-top:180px;
min-height:auto;
}

.product-search input{
width:100% !important;
}

.product-top-bar{
flex-direction:column;
align-items:flex-start !important;
}

}