/*==================================================
            RESPONSIVE.CSS
            KETAN HYUNDAI
==================================================*/


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

@media(max-width:1400px){

.container{

max-width:1140px;

}

.hero-content h1{

font-size:58px;

}

.section-heading h2{

font-size:42px;

}

.about-left h2{

font-size:42px;

}

.finance-left h2{

font-size:42px;

}

.test-content h2{

font-size:42px;

}

}


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

@media(max-width:1200px){

.container{

width:92%;

}

.nav-links{

gap:25px;

}

.hero-content{

max-width:600px;

}

.hero-content h1{

font-size:50px;

}

.quick-actions .container{

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

}

.cars-grid{

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

}

.offers-grid{

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

}

.why-grid{

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

}

.stats .container{

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

}

.footer-grid{

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

}

}


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

@media(max-width:992px){

.menu-btn{

display:block;

}

.nav-links{

position:fixed;

top:85px;

right:-100%;

background:#002C6F;

width:300px;

height:calc(100vh - 85px);

flex-direction:column;

padding:40px;

transition:.4s;

gap:25px;

}

.nav-links.active{

right:0;

}

.nav-buttons{

display:none;

}

.hero{

height:90vh;

}

.hero-content{

left:8%;

max-width:90%;

}

.hero-content h1{

font-size:46px;

}

.hero-content p{

font-size:16px;

}

.about .container{

grid-template-columns:1fr;

gap:50px;

}

.finance-wrapper{

grid-template-columns:1fr;

gap:60px;

}

.test-drive .container{

grid-template-columns:1fr;

}

.service-content{

grid-template-columns:1fr;

}

.contact-wrapper{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr 1fr;

}

.newsletter form{

flex-direction:column;

}

.newsletter input{

width:100%;

}

.newsletter button{

width:100%;

}

}


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

@media(max-width:768px){

section{

padding:70px 0;

}

.hero{

height:85vh;

}

.hero-content{

text-align:center;

left:50%;

top:50%;

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

}

.hero-content h1{

font-size:38px;

}

.hero-content h4{

font-size:14px;

}

.hero-content p{

font-size:15px;

}

.hero-buttons{

justify-content:center;

}

.quick-actions{

margin-top:0;

}

.quick-actions .container{

grid-template-columns:1fr;

}

.cars-grid{

grid-template-columns:1fr;

}

.offers-grid{

grid-template-columns:1fr;

}

.why-grid{

grid-template-columns:1fr;

}

.testimonial-grid{

grid-template-columns:1fr;

}

.stats .container{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

}

.contact-info h2{

font-size:36px;

}

.finance-left h2{

font-size:36px;

}

.about-left h2{

font-size:36px;

}

.test-content h2{

font-size:36px;

}

.section-heading h2{

font-size:36px;

}

.service-text h2{

font-size:36px;

}

.newsletter h2{

font-size:36px;

}

}


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

@media(max-width:600px){

.navbar{

height:75px;

}

.logo img{

width:42px;

}

.logo span{

font-size:18px;

}

.hero{

height:80vh;

}

.hero-content h1{

font-size:30px;

line-height:1.2;

}

.hero-content p{

font-size:14px;

}

.btn-primary,

.btn-outline{

width:100%;

text-align:center;

padding:15px;

}

.action-card{

padding:25px;

}

.car-content{

padding:20px;

}

.car-content h3{

font-size:24px;

}

.price{

font-size:20px;

}

.service-form{

padding:25px;

}

.contact-map iframe{

height:320px;

}

.newsletter{

padding:70px 0;

}

.newsletter input{

min-width:100%;

}

.call-btn,

.whatsapp-btn{

width:55px;

height:55px;

font-size:20px;

}

.scroll-top{

width:50px;

height:50px;

}

}


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

@media(max-width:480px){

.container{

width:94%;

}

.hero-content h1{

font-size:26px;

}

.hero-content h4{

font-size:12px;

}

.section-heading h2{

font-size:30px;

}

.about-left h2,

.finance-left h2,

.service-text h2,

.contact-info h2,

.test-content h2{

font-size:30px;

}

.action-card i{

font-size:36px;

}

.offer-card{

padding:30px 20px;

}

.stat-box{

padding:25px;

}

.stat-box h2{

font-size:36px;

}

.footer-grid{

gap:35px;

}

.social-links{

justify-content:center;

}

.footer-social{

justify-content:center;

}

}