*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins;
}

body{
background:#f5f6fa;
}

/* NAVBAR */

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 80px;
background:white;
box-shadow:0 3px 10px rgba(0,0,0,0.1);
}

.navbar ul{
display:flex;
list-style:none;
gap:30px;
}

.navbar a{
text-decoration:none;
color:#333;
}

.logo{
font-size:24px;
font-weight:600;

background: linear-gradient(90deg,#c9a227,#ffd700,#e6c200);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.contact-menu{
position:relative;
}

.contact-dropdown{
position:absolute;
top:45px;
right:0;
background:white;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
padding:10px 0;
min-width:200px;
opacity:0;
transform:translateY(-10px);
pointer-events:none;
transition:0.3s ease;
}

.contact-dropdown a{
display:flex;
align-items:center;
gap:10px;
padding:14px 20px;
text-decoration:none;
color:#333;
font-size:14px;
font-weight:500;
transition:0.25s;
}

.contact-dropdown a:hover{
background:#f8f8f8;
color:#ff5a00;
padding-left:25px;
}

.contact-dropdown.show{
opacity:1;
transform:translateY(0);
pointer-events:auto;
}
/* HERO */

.hero{
height:520px;
position:relative;
overflow:hidden;
}

.hero::after{
content:"";
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
top:0;
left:0;
}

/* SLIDER */

.slider{
position:absolute;
width:100%;
height:100%;
top: 0;
left: 0;
}

.slide{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
opacity:0;
transition:opacity 1s ease-in-out;
}

.slide.active{
opacity:1;
}


/* HERO CONTENT */
.date-picker{
width:100%;
padding:14px;
border:1px solid #ddd;
border-radius:8px;
background:#fafafa;
cursor:pointer;
font-size:16px;
transition:0.3s;
}

.date-picker:hover{
border-color:#c9a227;
background:white;
}

.date-picker:focus{
border-color:#c9a227;
box-shadow:0 0 0 2px rgba(201,162,39,0.2);
}

/* CALENDAR STYLE */

.flatpickr-calendar{
border-radius:12px;
box-shadow:0 15px 40px rgba(0,0,0,0.2);
}

.flatpickr-day.selected{
background:#ff5a00;
border-color:#ff5a00;
}

.flatpickr-day:hover{
background:#ffe1d0;
}

.hero-content{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
color:white;
z-index:2;
}

.hero h1{
font-size:48px;
}

.booking-box{
background:white;
margin-top:30px;
padding:20px;
border-radius:8px;
display:flex;
gap:10px;
}

.booking-box select,
.booking-box input{
padding:12px;
border:1px solid #ddd;
border-radius:5px;
}

.booking-box button{
background:#ff5a00;
color:white;
border:none;
padding:12px 25px;
border-radius:5px;
cursor:pointer;
}


/* CARS */

.cars{
padding:80px;
text-align:center;
}

.car-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:40px;
}

.car-card{
background:white;
border-radius:10px;
box-shadow:0 4px 20px rgba(0,0,0,0.1);
overflow:hidden;
text-align:center;
padding-bottom:15px;
transition:0.3s;
}

/* HOVER ANIMATION */

.car-card:hover{
transform:translateY(-10px);
box-shadow:0 10px 30px rgba(0,0,0,0.2);
}

.car-card img{
width:100%;
height:200px;
object-fit:contain;
background:white;
padding:10px;
}

.car-card h3{
margin-top:10px;
}

.car-card p{
margin:10px 0;
font-weight:500;
}

.car-card button{
background:#ff5a00;
color:white;
border:none;
padding:10px 20px;
border-radius:5px;
cursor:pointer;
transition:0.3s;
}

.car-card button:hover{
background:#ff7a26;
}


/* FOOTER */

footer{
background:#111;
color:white;
text-align:center;
padding:20px;
}


/* WHATSAPP FLOAT */

.whatsapp-float{
position:fixed;
bottom:20px;
right:20px;
background:#25D366;
color:white;
padding:14px 20px;
border-radius:50px;
text-decoration:none;
font-weight:500;
box-shadow:0 4px 15px rgba(0,0,0,0.3);
}


/* MOBILE */

@media(max-width:768px){

.navbar{
padding:15px 20px;
flex-direction:column;
align-items:flex-start;
}

.navbar ul{
display:flex;
gap:15px;
margin-top:10px;
}

.booking-box{
flex-direction:column;
}

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

.hero h1{
font-size:32px;
}

}