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

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

html{
scroll-behavior:smooth;
}

body{
background:#f4f6fb;
color:#222;
line-height:1.6;
overflow-x:hidden;
}

img,iframe,video{
max-width:100%;
height:auto;
}

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

.navbar{
position:sticky;
top:0;
background:white;
z-index:1000;
padding:5px 0;
box-shadow:0 3px 10px rgba(0,0,0,0.1);
}

.nav-inner{
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 20px;
max-width:1200px;
margin:auto;
}


.logo img{
width:70px;
height:70px;
border-radius:50px;
object-fit:cover;
}

.brand{
font-size:28px;
font-weight:700;
}

.brand-mobile{
display:none;
}

.nav-actions{
display:flex;
align-items:center;
gap:10px;
}

.nav-phone{
text-decoration:none;
color:#111;
font-weight:600;
}

.nav-btn{
background:#0077ff;
color:white;
padding:6px 10px;
border-radius:6px;
text-decoration:none;
}

.menu-btn{
display:none;
font-size:22px;
cursor:pointer;
}

/* ================= NAV MENU ================= */

#navMenu {
    display: flex;
    justify-content: center;
    gap: 25px;
    padding: 5px 0;   /* reduced spacing */
    margin-top: -5px; /* moves menu slightly up */
}

#navMenu a{
text-decoration:none;
color:#111;
font-weight:600;
}

#navMenu a:hover{
color:#0077ff;
}

/* ================= HERO ================= */

.hero-slider{
height:80vh;
position:relative;
overflow:hidden;
}

.slide{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-size:cover;
background-position:center;
opacity:0;
transition:opacity 1s ease;
}

.slide.active{
opacity:1;
}

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

.hero-text h1{
font-size:clamp(28px,5vw,50px);
}

.hero-text p{
margin-top:10px;
font-size:clamp(14px,2vw,18px);
}

/* ================= SECTIONS ================= */

.section{
padding:60px 5%;
text-align:center;
background:white;
}

.section.alt{
background:#eef4ff;
}

.section h2{
margin-bottom:30px;
}

/* ================= CARDS ================= */

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
max-width:1200px;
margin:auto;
}

.card{
background:white;
border-radius:12px;
overflow:hidden;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
transition:transform .3s;
display:flex;
flex-direction:column;
}

.card:hover{
transform:translateY(-6px);
}

.card img{
width:100%;
height:180px;
object-fit:cover;
}

.card h3{
padding:15px;
}

/* ================= RIDES ================= */

.ride-footer{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px;
margin-top:auto;
}
#rides{
background:#c5daea;   /* light sky blue */
padding:60px 5%;
}

.book-btn{
background:#25D366;
color:white;
padding:8px 14px;
border-radius:20px;
text-decoration:none;
font-size:14px;
}

/* ================= PRICE TABLE ================= */

.price-box{
max-width:900px;
margin:auto;
margin-top:30px;
background:rgba(0,0,0,0.7);
padding:30px;
border-radius:10px;
color:white;
}

.price-table{
width:100%;
border-collapse:collapse;
background:white;
color:black;
}

.price-table th{
background:#0077ff;
color:white;
padding:10px;
}

.price-table td{
padding:10px;
border-bottom:1px solid #ddd;
}

.price-table tr:hover{
background:#eef4ff;
}

/* ================= CONTACT BUTTON ================= */

.btn{
display:inline-block;
background:#25D366;
color:white;
padding:12px 25px;
border-radius:30px;
text-decoration:none;
margin-top:20px;
}

/* ================= FOOTER ================= */

footer{
background:#111;
color:white;
padding:20px;
display:flex;
justify-content:center;
align-items:center;
gap:20px;
flex-wrap:wrap;
}

.social-icons a{
color:white;
font-size:20px;
margin:0 5px;
}

.social-icons a:hover{
color:#25D366;
}

/* ================= WHATSAPP FLOAT ================= */

.whatsapp{
position:fixed;
bottom:20px;
right:20px;
background:#25D366;
color:white;
font-size:26px;
padding:14px 16px;
border-radius:50%;
}

/* ================= MAP MODAL ================= */

.map-modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
justify-content:center;
align-items:center;
z-index:2000;
}

.map-container{
width:90%;
max-width:900px;
height:70%;
background:white;
border-radius:10px;
overflow:hidden;
position:relative;
}

.map-container iframe{
width:100%;
height:100%;
border:none;
}

.map-close{
position:absolute;
top:10px;
right:10px;
background:red;
color:white;
width:35px;
height:35px;
border-radius:50%;
border:none;
cursor:pointer;
}

/* ================= MOBILE ================= */

@media(max-width:768px){

.logo img{
width:40px;
height:40px;
}

.brand{
font-size:18px;
}

.brand-desktop{
display:none;
}

.brand-mobile{
display:inline;
}

.nav-phone{
display:block;
}

.menu-btn{
display:block;
}

#navMenu{
display:none;
flex-direction:column;
position:absolute;
top:70px;
left:0;
background:white;
width:100%;
box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

#navMenu.active{
display:flex;
}

#navMenu a{
padding:12px;
border-bottom:1px solid #eee;
}

.hero-slider{
height:60vh;
}

.section{
padding:40px 15px;
}

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

.card img{
height:160px;
}

footer{
flex-direction:column;
text-align:center;
}

}

/* ================= TABLET ================= */

@media(min-width:769px) and (max-width:1024px){

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

}

/* ================= LARGE DESKTOP ================= */

@media(min-width:1200px){

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

}