/* ===================== GLOBAL RESET ===================== */

*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif}

:root{
--primary:#0F3D5E;
--secondary:#D4A017;
--cream:#F5E6C8;
--white:#fff;
--dark:#111;
}
html{scroll-behavior:smooth}
body{background:#fafafa;color:#222;overflow-x:hidden;padding-top:72px}

/* ===========================
   NAVBAR
=========================== */

.navbar{
position:fixed;top:0;left:0;width:100%;
display:flex;justify-content:space-between;align-items:center;
padding:10px 6%;
background:rgba(15,61,94,.55);
backdrop-filter:blur(12px);
z-index:999;
}
.logo img{
    height:52px;
    border-radius:12px
}
.nav-links{
    display:flex;
    gap:30px;
    list-style:none
}
.nav-links a{
    text-decoration:none;
    color:#fff;
    font-weight:500;
    position:relative
}
.nav-links a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-5px;
    width:0;
    height:2px;
    background:var(--secondary);
    transition:.3s
}

.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.hamburger{
    display:none;
    cursor:pointer
}
.hamburger span{
    display:block;
    width:25px;
    height:3px;
    margin:5px 0;
    background:#fff;border-radius:3px
}

/* ===========================
   HERO
=========================== */
.car-hero{
height:90vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:#fff;position:relative;
background:
linear-gradient(rgba(10,25,50,.7),rgba(10,25,50,.7)),
url("img/car_banner.webp") center/cover;
}

.hero-content{
    max-width:800px;
    padding:20px;
    position:relative;
    z-index:2
}

.hero-tag{
    display:inline-block;
    padding:8px 18px;
    border-radius:30px;
    border:1px solid rgba(212,160,23,.4);
    background:rgba(212,160,23,.15);
    margin-bottom:18px
}

.car-hero h1{
    font-size:3rem;
    font-family:'Playfair Display',serif;
    margin-bottom:15px
}

.car-hero p{
    line-height:1.8;
    margin-bottom:28px
}
.hero-buttons{
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap
}

.btn-primary,.btn-secondary,.vehicle-card a,.book-btn{
display:inline-block;
padding:12px 26px;
border-radius:40px;
text-decoration:none;
font-weight:600;
transition:.3s
}

.btn-primary,.book-btn,.vehicle-card a{background:var(--secondary);color:#111}

.btn-secondary{border:2px solid #fff;color:#fff}

.btn-primary:hover,.btn-secondary:hover,.book-btn:hover,.vehicle-card a:hover{transform:translateY(-3px)}

/* Generic */
section{padding:80px 8%}
.section-title{text-align:center;
    margin-bottom:45px
}

.section-title h2{
    font-size:2.2rem;
    color:var(--primary);
    font-family:'Playfair Display',serif
}

.section-title p{
    margin-top:10px;
    color:#555
}

/* WHY */
.why-grid,.vehicle-grid,.fleet-grid,.feature-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px
}

.why-card,.vehicle-card,.fleet-card,.feature-card{
background:#fff;border-radius:20px;padding:28px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
transition:.3s;text-align:center
}

.why-card:hover,.vehicle-card:hover,.fleet-card:hover,.feature-card:hover{transform:translateY(-8px)}

.why-card i,.feature-card i{font-size:2.2rem;color:var(--secondary);margin-bottom:15px}

.vehicle-card img,.fleet-card img{
width:100%;height:220px;object-fit:cover;border-radius:15px;margin-bottom:15px
}

.vehicle-card h3,.fleet-card h3{color:var(--primary);margin-bottom:10px}

/* Fleet */
.fleet-card p{
    margin:8px 0;
    color:#555}
.book-btn{
    margin-top:15px}

/* Features */
.car-features{background:#f5f7fa}

.feature-card h3{margin-top:12px;
    color:var(--primary)}

/* Form */
.car-enquiry{background:#eef4fb}

.enquiry-container{

    width:100%;

    max-width:800px;

    margin:auto;

    background:#fff;

    padding:40px;

    border-radius:20px;

    box-sizing:border-box;

}

.enquiry-container h2{text-align:center;
    color:var(--primary);
    margin-bottom:25px}

form{display:grid;
    gap:16px}

form input,
form select,
form textarea{

    width:100%;

    max-width:100%;

    display:block;

    padding:14px;

    border:1px solid #ddd;

    border-radius:10px;

    font-size:15px;

    box-sizing:border-box;

    appearance:none;

    -webkit-appearance:none;

    -moz-appearance:none;

    background:#fff;

}
input[type="date"]{

    width:100%;

    min-height:52px;

}

form textarea{resize:vertical}
form button{
padding:14px;
border:none;
border-radius:40px;
background:var(--secondary);font-weight:600;cursor:pointer
}

/* ===========================
   FAQ
=========================== */

.faq{

padding:100px 8%;

background:white;

}

.faq h2{

text-align:center;

font-family:'Playfair Display',serif;

margin-bottom:50px;

}

.faq-item{

margin-bottom:20px;

border-radius:15px;

overflow:hidden;

box-shadow:
0 5px 15px rgba(0,0,0,.05);

}

.faq-btn{

width:100%;

text-align:left;

padding:20px;

background:#f8f8f8;

cursor:pointer;

font-weight:600;

border:none;

display:flex;

justify-content:space-between;

 align-items:center;

}

.faq-content{
    max-height:0;
    overflow:hidden;

    opacity:0;

    padding:0 20px;

    transition:
        max-height 0.5s ease,
        opacity 0.35s ease,
        padding 0.35s ease;
}

.faq-item.active .faq-content{
    max-height:300px;

    opacity:1;

    padding:20px;
}


/* Footer */
.simple-footer{
background:#0f2d4a;
color:#fff;
text-align:center;
padding:60px 20px;
display:flex;
flex-direction:column;
align-items:center;
gap:18px
}

.footer-logo img{
    height:80px;
    border-radius:15px
}

.footer-social{
    display:flex;
    gap:20px;
    font-size:22px
}

.footer-social a{
    color:#fff;
    transition:.3s}
    
.footer-social a:hover{color:var(--secondary)
}

.footer-copy{opacity:.8}

/* Mobile */
@media(max-width:768px){
.nav-links{
position:absolute;top:70px;left:50%;transform:translateX(-50%);
width:92%;display:none;flex-direction:column;
background:rgba(15,61,94,.96);padding:15px;border-radius:0 0 18px 18px
}
.nav-links.active{display:flex}
.nav-links a{padding:12px}
.hamburger{display:block}
.car-hero h1{font-size:2.1rem}
.hero-buttons{flex-direction:column}
section{padding:60px 6%}
}

.enquiry-container{

    padding:20px;

}

form input,
form select,
form textarea,
form button{

    width:100%;

    max-width:100%;

    font-size:16px;

}