/* ==========================================
   LARGE DEVICES
========================================== */

@media(max-width:1200px){

.hero{

grid-template-columns:1fr;

display:grid;

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.about-preview{

grid-template-columns:1fr;

display:grid;

}

.products-grid{

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

}

.features{

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

}

.footer-container{

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

}

.modal-product-grid{

grid-template-columns:1fr;

display:grid;

}

.contact-container{

grid-template-columns:1fr;

display:grid;

}

}


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

@media(max-width:992px){

.navbar{

flex-direction:column;

padding:20px;

}

nav ul{

margin-top:20px;

flex-wrap:wrap;

justify-content:center;

gap:18px;

}

.hero-left h1{

font-size:42px;

}

.hero-left p{

font-size:17px;

}

.products-grid{

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

}

.testimonial-grid{

grid-template-columns:1fr;

}

.technical-grid{

grid-template-columns:1fr;

}

.footer-container{

grid-template-columns:1fr;

text-align:center;

}

.features{

grid-template-columns:1fr 1fr;

}

}


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

@media(max-width:768px){

section{

padding:60px 20px;

}

.hero{

display:block;

text-align:center;

}

.hero-left{

margin-bottom:40px;

}

.hero-left h1{

font-size:34px;

}

.hero-left p{

font-size:16px;

}

.hero-buttons{

justify-content:center;

flex-direction:column;

}

.primary-btn,

.secondary-btn{

width:100%;

text-align:center;

}

.products-grid{

grid-template-columns:1fr;

}

.features{

grid-template-columns:1fr;

}

.about-preview{

display:block;

}

.about-left{

margin-bottom:30px;

}

.contact-container{

display:block;

}

.contact-info{

margin-bottom:30px;

}

.modal-content{

padding:25px;

}

.modal-product-grid{

display:block;

}

.modal-product-grid img{

margin-bottom:25px;

}

.spec-grid{

grid-template-columns:1fr;

}

.filter-buttons{

justify-content:center;

}

.filter-buttons button{

margin-bottom:10px;

width:160px;

}

.footer{

text-align:center;

}

.whatsapp-btn{

width:55px;

height:55px;

font-size:24px;

}

#scrollTopBtn{

width:45px;

height:45px;

font-size:20px;

}

}


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

@media(max-width:480px){

.logo-section h2{

font-size:22px;

}

.logo-section img{

width:45px;

}

.hero-left h1{

font-size:28px;

}

.about-right h2{

font-size:30px;

}

.products-section h1,

.products-section h2,

.testimonials h2,

.faq-section h2{

font-size:28px;

}

.feature-card,

.product-card,

.contact-form,

.contact-info{

padding:20px;

}

.primary-btn,

.secondary-btn{

padding:12px 20px;

font-size:15px;

}

.filter-buttons button{

width:100%;

}

.modal-details h2{

font-size:26px;

}

.spec-card{

padding:15px;

}

.chat-box{

padding:20px;

}

}