/*==================================================
RESPONSIVE.CSS
SANMAC AUTO REFINISH
==================================================*/

/*==============================
1400px
==============================*/

@media(max-width:1400px){

.container{
    width:92%;
}

.caption h1{
    font-size:56px;
}

}

/*==============================
1200px
==============================*/

@media(max-width:1200px){

.navbar{
    width:95%;
}

.about-preview .container{
    gap:45px;
}

.caption h1{
    font-size:50px;
}

.grid-4{
    grid-template-columns:repeat(2,1fr);
}

}

/*==============================
992px
==============================*/

@media(max-width:992px){

section{
    padding:70px 0;
}

.about-preview .container{
    grid-template-columns:1fr;
}

.about-image{
    order:1;
}

.about-text{
    order:2;
    text-align:center;
}

.caption{
    max-width:90%;
}

.caption h1{
    font-size:44px;
}

.caption p{
    font-size:18px;
}

.why-grid,
.product-grid{
    grid-template-columns:repeat(2,1fr);
}

.footer-content{
    grid-template-columns:repeat(2,1fr);
}

.grid-2,
.grid-3,
.grid-4{
    grid-template-columns:1fr;
}

}

/*==============================
768px
==============================*/

@media(max-width:768px){

.nav-links{

position:fixed;

top:85px;
right:-100%;

width:280px;
height:calc(100vh - 85px);

background:#fff;

display:flex;
flex-direction:column;
justify-content:flex-start;
align-items:center;

padding-top:50px;

gap:30px;

transition:.4s;

box-shadow:-8px 0 25px rgba(0,0,0,.08);

}

.nav-links.active{
    right:0;
}

.hamburger{
    display:block;
}

.hero{
    height:85vh;
}

.caption{

left:30px;
right:30px;

}

.caption h1{

font-size:38px;

}

.caption p{

font-size:17px;

}

.prev,
.next{

width:48px;
height:48px;

font-size:18px;

}

.prev{

left:15px;

}

.next{

right:15px;

}

.cta h2{

font-size:36px;

}

.footer-content{

grid-template-columns:1fr;

text-align:center;

}

.footer-social{

justify-content:center;

}

}

/*==============================
600px
==============================*/

@media(max-width:600px){

.hero{
    height:80vh;
}

.caption{

text-align:center;

top:50%;
left:50%;

transform:translate(-50%,-50%);

width:90%;

}

.caption h1{

font-size:32px;

}

.caption p{

font-size:16px;

}

.section-title h2{

font-size:32px;

}

.about-text h2{

font-size:32px;

}

.product-grid{

grid-template-columns:1fr;

}

.why-grid{

grid-template-columns:1fr;

}

.card img{

height:220px;

}

.cta h2{

font-size:30px;

}

.cta p{

font-size:17px;

}

.btn{

padding:14px 30px;

}

}

/*==============================
480px
==============================*/

@media(max-width:480px){

.navbar{

height:75px;

}

header{

height:75px;

}

.hero{

margin-top:75px;

}

.logo img{

height:45px;

}

.caption h1{

font-size:28px;

}

.caption p{

font-size:15px;

}

.prev,
.next{

display:none;

}

.dots{

bottom:18px;

}

.section-title{

margin-bottom:45px;

}

section{

padding:60px 0;

}

.cta{

padding:70px 0;

}

.cta h2{

font-size:26px;

}

.footer-content{

gap:30px;

}

#topBtn{

width:50px;
height:50px;

right:18px;
bottom:18px;

}

}

/*==============================
390px
==============================*/

@media(max-width:390px){

.caption h1{

font-size:24px;

}

.caption p{

font-size:14px;

}

.btn{

padding:12px 24px;

font-size:14px;

}

.nav-links{

width:240px;

}

.logo img{

height:40px;

}

}