/* ==========================================
   Responsive CSS
========================================== */

/* Large Laptop */

@media(max-width:1400px){

.container{
    width:95%;
}

.hero-left h1{
    font-size:70px;
}

.hero-left h2{
    font-size:55px;
}

.categories .container{
    grid-template-columns:repeat(3,1fr);
}

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

}

/* Laptop */

@media(max-width:1200px){

.menu{
    gap:20px;
}

.menu li a{
    font-size:15px;
}

.hero-left h3{
    font-size:45px;
}

.hero-left h1{
    font-size:60px;
}

.hero-left h2{
    font-size:48px;
}

.hero-left p{
    font-size:18px;
}

.card h2{
    font-size:24px;
}

}

/* Tablet */

@media(max-width:992px){

.navbar{
    flex-wrap:wrap;
    height:auto;
    padding:20px 0;
}

.logo{
    width:100%;
    text-align:center;
    margin-bottom:20px;
}

.menu{
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
    margin-bottom:20px;
}

.right-nav{
    width:100%;
    justify-content:center;
}

.hero .container{
    flex-direction:column;
}

.hero-left{
    text-align:center;
}

.hero-buttons{
    justify-content:center;
}

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

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

.about .container{
    flex-direction:column;
}

.about-left{
    text-align:center;
}

}

/* Mobile */

@media(max-width:768px){

.navbar{
    flex-direction:column;
}

.logo img{
    height:55px;
}

.menu{
    flex-direction:column;
    align-items:center;
    gap:15px;
}

.right-nav{
    margin-top:20px;
}

.hero{
    padding:40px 0;
}

.hero-left h3{
    font-size:35px;
}

.hero-left h1{
    font-size:50px;
}

.hero-left h2{
    font-size:40px;
}

.hero-left p{
    font-size:16px;
}

.hero-buttons{
    flex-direction:column;
    align-items:center;
}

.btn{
    width:220px;
    text-align:center;
}

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

.card{
    text-align:center;
}

.card img{
    height:220px;
}

.why-grid{
    grid-template-columns:1fr;
}

.why h2{
    font-size:32px;
}

.about-left h2{
    font-size:34px;
}

.about-left p{
    font-size:16px;
}

footer{
    font-size:14px;
}

}

/* Small Mobile */

@media(max-width:480px){

.container{
    width:92%;
}

.hero-left h3{
    font-size:28px;
}

.hero-left h1{
    font-size:40px;
}

.hero-left h2{
    font-size:30px;
}

.hero-left p{
    font-size:15px;
}

.dealer-btn{
    padding:12px 20px;
    font-size:14px;
}

.card{
    padding:20px;
}

.card h2{
    font-size:22px;
}

.card img{
    height:180px;
}

.why-box{
    padding:25px 15px;
}

.why-box i{
    font-size:36px;
}

.about-left h2{
    font-size:28px;
}

.about-left p{
    font-size:15px;
}

}