/* ==========================================
   RESPONSIVE CSS
========================================== */

/* Laptop */

@media(max-width:1200px){

.hero-wrapper{

grid-template-columns:1fr;

gap:50px;

}

.booking-card{

max-width:650px;

margin:auto;

}

.section-heading h2{

font-size:40px;

}

}

/* Tablet */

@media(max-width:992px){

.menu-toggle{

display:block;

}

.nav-menu{

position:fixed;
top:82px;
left:-100%;
width:280px;
height:100vh;
background:#08101d;
display:flex;
flex-direction:column;
padding:40px;
gap:25px;
transition:.4s;

}

.nav-menu.active{

left:0;

}

.hero{

padding:120px 0 80px;

}

.hero-left{

text-align:center;

}

.hero-left p{

margin:auto auto 30px;

}

.hero-buttons{

justify-content:center;

}

.hero-features{

justify-content:center;

}

.service-grid{

grid-template-columns:repeat(2,1fr);

}

.fleet-grid{

grid-template-columns:repeat(2,1fr);

}

.route-grid{

grid-template-columns:repeat(2,1fr);

}

.stats-grid{

grid-template-columns:repeat(2,1fr);

}

.why-grid{

grid-template-columns:1fr;

}

.process-grid{

grid-template-columns:repeat(2,1fr);

}

.footer-grid{

grid-template-columns:1fr 1fr;

}

}

/* Mobile */

@media(max-width:768px){

.header{

padding:10px 0;

}

.logo{

font-size:24px;

}

.hero{

min-height:auto;

padding:130px 0 70px;

}

.hero-left h1{

font-size:38px;

}

.hero-left p{

font-size:15px;

}

.hero-buttons{

flex-direction:column;

}

.btn-primary,

.btn-secondary{

width:100%;

text-align:center;

justify-content:center;

}

.hero-features{

flex-direction:column;

align-items:center;

gap:12px;

}

.booking-card{

padding:25px;

}

.form-row{

grid-template-columns:1fr;

}

.trip-type{

flex-direction:column;

gap:10px;

}

.section{

padding:70px 0;

}

.section-heading h2{

font-size:32px;

}

.service-grid{

grid-template-columns:1fr;

}

.fleet-grid{

grid-template-columns:1fr;

}

.route-grid{

grid-template-columns:1fr;

}

.stats-grid{

grid-template-columns:1fr;

}

.process-grid{

grid-template-columns:1fr;

}

.why-items{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.cta h2{

font-size:32px;

}

}

/* Small Mobile */

@media(max-width:480px){

.container{

width:92%;

}

.hero-left h1{

font-size:30px;

line-height:1.2;

}

.tag{

font-size:13px;

padding:8px 15px;

}

.booking-card{

padding:20px;

border-radius:18px;

}

.booking-card h2{

font-size:24px;

}

.form-group input,

.form-group select{

padding:13px;

}

.booking-btn{

padding:15px;

}

.stat-card{

padding:25px;

}

.stat-card h2{

font-size:34px;

}

.service-card{

padding:30px 20px;

}

.fleet-card img{

height:220px;

}

.fleet-content{

padding:20px;

}

.fleet-content h3{

font-size:22px;

}

.route-card{

padding:25px;

}

.process-grid div{

padding:25px;

}

.cta{

padding:70px 20px;

}

.cta h2{

font-size:28px;

}

.footer{

padding-top:60px;

}

}
@media(max-width:992px){

.nav-btn{
    display:none;
}

.logo{
    font-size:1.3rem;
}

.navbar{
    height:75px;
}

.menu-toggle{
    display:block;
    font-size:30px;
}

}
@media(max-width:992px){

.contact-wrapper{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.contact-form{

padding:25px;

}

.contact-card{

padding:20px;

}

.map-section{

height:300px;

}

}