/* ======================================
   responsive.css
   Sai Swami Computer
======================================*/


/* ==========================
Large Tablet
========================== */

@media (max-width:1200px){

.container{
    width:92%;
}

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

.section-title{
    font-size:34px;
}

}


/* ==========================
Tablet
========================== */

@media (max-width:992px){

.nav-links{

position:absolute;

top:100%;

left:-100%;

width:100%;

background:#fff;

display:flex;

flex-direction:column;

text-align:center;

padding:25px 0;

box-shadow:0 15px 25px rgba(0,0,0,.1);

transition:.4s;

}

.nav-links.active{

left:0;

}

.nav-links li{

margin:15px 0;

}

.menu-btn{

display:block;

}

.hero{

height:75vh;

text-align:center;

}

.hero-content{

display:flex;

justify-content:center;

align-items:center;

}

.hero-text{

max-width:100%;

}

.hero-buttons{

justify-content:center;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:18px;

}

.footer-grid{

grid-template-columns:1fr 1fr;

}

}


/* ==========================
Mobile
========================== */

@media (max-width:768px){

.top-bar .container{

flex-direction:column;

gap:10px;

text-align:center;

}

.nav-container{

padding:15px 0;

}

.logo{

font-size:24px;

}

.hero{

height:70vh;

padding:20px;

}

.hero h1{

font-size:34px;

}

.hero p{

font-size:16px;

}

.btn{

padding:13px 26px;

font-size:15px;

}

.section-title{

font-size:30px;

margin-bottom:45px;

}

.service-grid{

grid-template-columns:1fr;

}

.product-grid{

grid-template-columns:1fr;

}

.why-grid{

grid-template-columns:1fr;

}

.counter-grid{

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

gap:20px;

}

.counter h2{

font-size:38px;

}

.contact-home h2{

font-size:30px;

}

.contact-home p{

font-size:16px;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-grid a{

padding:0;

}

.whatsapp{

width:55px;

height:55px;

font-size:28px;

right:18px;

bottom:18px;

}

}


/* ==========================
Small Mobile
========================== */

@media (max-width:576px){

.hero{

height:auto;

padding:100px 0;

}

.hero h1{

font-size:30px;

}

.hero p{

font-size:15px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.btn{

width:220px;

text-align:center;

}

.counter-grid{

grid-template-columns:1fr;

}

.card{

padding:30px 20px;

}

.product img{

height:220px;

}

.section-title{

font-size:26px;

}

.contact-home{

padding:70px 20px;

}

.contact-home h2{

font-size:26px;

}

.contact-home p{

font-size:15px;

}

}


/* ==========================
Extra Small
========================== */

@media (max-width:360px){

.hero h1{

font-size:26px;

}

.logo{

font-size:21px;

}

.btn{

width:100%;

}

.card h3{

font-size:20px;

}

.counter h2{

font-size:32px;

}

.whatsapp{

width:50px;

height:50px;

font-size:24px;

}

}