/* Responsive CSS */
@media (max-width:1199px){
.hero-section h1{font-size:44px}
}
@media (max-width:991px){
.top-bar{text-align:center}
.navbar-brand img{height:50px}
.hero-section{padding:70px 0;text-align:center}
.hero-section h1{font-size:36px}
.hero-btns .btn{display:block;margin:10px auto;width:220px}
.counter-section .col-md-3{margin-bottom:25px}
.footer{text-align:center}
}
@media (max-width:767px){
.hero-section h1{font-size:30px}
.hero-section p{font-size:15px}
.section-title h2{font-size:28px}
.product-card,.brand-card,.download-card,.gallery-card{margin-bottom:20px}
.whatsapp-float,.call-float,#backToTop{
width:48px;height:48px;right:15px}
.whatsapp-float{bottom:15px}
.call-float{bottom:75px}
#backToTop{bottom:135px}
}
@media (max-width:575px){
.container{padding-left:18px;padding-right:18px}
.hero-badge{font-size:13px}
.hero-section h1{font-size:26px}
.btn-lg{width:100%}
img{max-width:100%;height:auto}
table{display:block;overflow:auto}
}