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

@media(max-width:1200px){

.hero{

flex-direction:column;
text-align:center;
padding-top:160px;

}

.hero-left h1{

font-size:50px;

}

.hero-buttons{

justify-content:center;

}

.features{

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

}

.category-grid{

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

}

.products-grid{

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

}

.why-grid{

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

}

.review-container{

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

}

.contact-info{

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

}

.footer-container{

grid-template-columns:1fr 1fr;

}

}

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

@media(max-width:768px){

.navbar{

padding:18px 20px;
flex-wrap:wrap;

}

.nav-links{

width:100%;
margin-top:20px;
flex-direction:column;
display:none;
background:#111827;
border-radius:15px;
padding:20px;

}

.nav-links.active{

display:flex;

}

.hero{

padding:140px 20px 70px;

}

.hero-left h1{

font-size:38px;

}

.hero-left p{

font-size:16px;

}

.hero-buttons{

flex-direction:column;

}

.hero-right img{

width:100%;

}

.features{

grid-template-columns:1fr;

}

.category-grid{

grid-template-columns:1fr;

}

.products-grid{

grid-template-columns:1fr;

}

.why-grid{

grid-template-columns:1fr;

}

.review-container{

grid-template-columns:1fr;

}

.contact-info{

grid-template-columns:1fr;

}

.footer-container{

grid-template-columns:1fr;
text-align:center;

}

.footer-box{

margin-bottom:30px;

}

.contact-banner h2{

font-size:30px;

}

.map-section iframe{

height:300px;

}

.whatsapp{

width:58px;
height:58px;
font-size:28px;

}

#topBtn{

width:50px;
height:50px;

}

}

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

@media(max-width:480px){

.logo h2{

font-size:22px;

}

.hero-left h1{

font-size:30px;

}

.section-title h2{

font-size:28px;

}

.product-card{

padding:15px;

}

.buy-btn{

font-size:14px;

}

.contact-btn{

padding:14px 30px;

}

}