/* ===================================
RESPONSIVE CSS
Vishnulaxmi Silk Mills
=================================== */

/* Large Devices */

@media (max-width:1200px){

.hero h1{

font-size:48px;

}

.section-title{

font-size:38px;

}

}

/* Laptop */

@media (max-width:992px){

.top-bar{

display:none;

}

.navbar{

padding:12px 0;

}

.navbar-brand img{

height:60px;

}

.hero{

padding:80px 0;

text-align:center;

}

.hero h1{

font-size:42px;

}

.hero p{

margin:auto;

margin-bottom:30px;

}

.hero-img{

margin-top:40px;

}

.section-title{

font-size:34px;

}

.brand-card,

.why-box,

.product-card{

margin-bottom:25px;

}

.about-home img{

margin-bottom:35px;

}

.infrastructure img{

margin-bottom:35px;

}

.cta-section h2{

font-size:36px;

}

.footer{

text-align:center;

}

.footer .fab{

margin-bottom:10px;

}

}

/* Tablet */

@media (max-width:768px){

.hero{

padding:70px 0;

}

.hero h1{

font-size:34px;

line-height:1.3;

}

.hero p{

font-size:16px;

}

.btn{

width:100%;

margin-bottom:15px;

}

.btn-outline-light{

margin-left:0 !important;

}

.section-title{

font-size:30px;

}

.brand-card{

padding:25px;

}

.brand-card img{

height:70px;

}

.category-box img{

height:260px;

}

.product-card img{

height:280px;

}

.counter-section h2{

font-size:38px;

}

.counter-section .col-lg-3,

.counter-section .col-md-6{

margin-bottom:30px;

}

.testimonial-box{

padding:30px 20px;

}

.testimonial-box p{

font-size:16px;

}

.cta-section{

padding:70px 20px;

}

.cta-section h2{

font-size:30px;

}

.contact-home iframe{

margin-top:30px;

height:280px;

}

}

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

@media (max-width:576px){

body{

overflow-x:hidden;

}

.navbar-brand img{

height:50px;

}

.hero{

padding:60px 0;

}

.hero h1{

font-size:28px;

line-height:1.4;

}

.hero p{

font-size:15px;

margin-top:15px;

}

.subtitle{

font-size:13px;

padding:6px 15px;

}

.hero .btn{

display:block;

width:100%;

margin-bottom:15px;

}

.section-title{

font-size:28px;

}

.section-subtitle{

font-size:14px;

}

.brand-card{

padding:20px;

}

.brand-card h4{

font-size:20px;

}

.brand-card p{

font-size:14px;

}

.category-box img{

height:220px;

}

.category-content{

padding:20px;

}

.category-content h3{

font-size:22px;

}

.why-box{

padding:25px;

margin-bottom:20px;

}

.why-box i{

font-size:35px;

}

.counter-section{

padding:50px 0;

}

.counter-section h2{

font-size:32px;

}

.counter-section p{

font-size:15px;

}

.about-home{

padding:60px 0;

}

.about-home img{

margin-bottom:25px;

}

.product-card img{

height:240px;

}

.product-info{

padding:20px;

}

.product-info h4{

font-size:20px;

}

.testimonial-box{

padding:25px 18px;

}

.client-img{

width:70px;

height:70px;

}

.infrastructure{

padding:60px 0;

}

.infrastructure img{

margin-bottom:30px;

}

.contact-home{

padding:60px 0;

}

.contact-home h2{

font-size:28px;

}

.contact-home iframe{

height:250px;

}

.footer{

padding:60px 20px 20px;

text-align:center;

}

.footer img{

margin:auto;

margin-bottom:20px;

}

.footer h5{

margin-top:25px;

}

.footer .fab{

margin:5px;

}

}

/* ===================================
EXTRA SMALL
=================================== */

@media (max-width:400px){

.hero h1{

font-size:24px;

}

.section-title{

font-size:24px;

}

.cta-section h2{

font-size:24px;

}

.btn{

font-size:14px;

padding:12px 20px;

}

.category-box img{

height:190px;

}

.product-card img{

height:210px;

}

}

/* ===================================
FLOATING BUTTONS
=================================== */

.whatsapp-btn{

position:fixed;

right:20px;

bottom:20px;

width:60px;

height:60px;

border-radius:50%;

background:#25D366;

color:#fff;

display:flex;

justify-content:center;

align-items:center;

font-size:28px;

box-shadow:0 10px 20px rgba(0,0,0,.2);

z-index:9999;

transition:.3s;

}

.whatsapp-btn:hover{

transform:scale(1.1);

color:#fff;

}

.call-btn{

position:fixed;

right:20px;

bottom:90px;

width:60px;

height:60px;

border-radius:50%;

background:#0A3D91;

color:#fff;

display:flex;

justify-content:center;

align-items:center;

font-size:26px;

box-shadow:0 10px 20px rgba(0,0,0,.2);

z-index:9999;

transition:.3s;

}

.call-btn:hover{

transform:scale(1.1);

color:#fff;

}