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

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

body{
font-family:Arial, Helvetica, sans-serif;
background:#f5f5f5;
color:#333;
line-height:1.6;
}

.container{
max-width:1200px;
margin:auto;
padding:0 20px;
}

.section-title{
text-align:center;
font-size:32px;
margin-bottom:40px;
}


/* ===============================
HEADER
================================ */

.main-header{
position:fixed;
top:0;
left:0;
width:100%;
background:#0d0d0d;
z-index:1000;
box-shadow:0 5px 20px rgba(0,0,0,0.3);
}

.header-container{
max-width:1200px;
margin:auto;
padding:14px 20px;
display:flex;
align-items:center;
justify-content:space-between;
}

.logo img{
height:42px;
display:block;
}


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

.main-menu{
display:flex;
align-items:center;
gap:28px;
}

.main-menu a{
color:#fff;
text-decoration:none;
font-size:15px;
font-weight:500;
position:relative;
}

.main-menu a:hover{
color:#FFD000;
}

.main-menu a::after{
content:"";
position:absolute;
bottom:-6px;
left:0;
width:0%;
height:2px;
background:#FFD000;
transition:.3s;
}

.main-menu a:hover::after{
width:100%;
}


/* ===============================
HEADER BUTTONS
================================ */

.header-buttons{
display:flex;
gap:10px;
}

.btn-call{
background:#FFD000;
color:#000;
padding:10px 20px;
border-radius:6px;
font-weight:600;
text-decoration:none;
}

.btn-whatsapp{
background:#25D366;
color:#fff;
padding:10px 20px;
border-radius:6px;
font-weight:600;
text-decoration:none;
}


/* ===============================
HAMBURGER
================================ */

.hamburger{
display:none;
font-size:26px;
color:#fff;
cursor:pointer;
}

.menu-close{
display:none;
}


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

@media(max-width:900px){

.header-buttons{
display:none;
}

.hamburger{
display:block;
}

.main-menu{
position:fixed;
top:0;
right:-270px;
width:270px;
height:100vh;
background:#111;
flex-direction:column;
align-items:flex-start;
padding:80px 25px;
gap:18px;
transition:.35s;
}

.main-menu.active{
right:0;
}

.main-menu a{
font-size:16px;
width:100%;
padding:10px 0;
border-bottom:1px solid #222;
}

.menu-close{
display:block;
position:absolute;
top:18px;
right:20px;
font-size:28px;
color:#fff;
cursor:pointer;
}

}


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

.hero{
position:relative;
width:100%;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:#fff;
background:url('/assets/images/taxi.jpg') center/cover no-repeat;
overflow:hidden;
}

.hero-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
}

.hero-container{
position:relative;
z-index:2;
max-width:850px;
margin:auto;
padding:20px;
}

.hero h1{
font-size:56px;
margin-bottom:15px;
}

.hero-desc{
font-size:22px;
margin-bottom:35px;
}

.hero-buttons{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.hero-call{
background:#FFD000;
color:#000;
padding:16px 32px;
border-radius:6px;
text-decoration:none;
}

.hero-whatsapp{
background:#25D366;
color:#fff;
padding:16px 32px;
border-radius:6px;
text-decoration:none;
}


/* ===============================
SERVICES
================================ */

.services{
padding:80px 20px;
background:#f9f9f9;
text-align:center;
}

.service-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
max-width:1100px;
margin:auto;
}

.service-card{
background:#fff;
padding:30px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.08);
}


/* ===============================
TAXI FORM
================================ */

.taxi-form{
padding:80px 20px;
background:#fafafa;
text-align:center;
}

.taxi-call-form{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
max-width:900px;
margin:auto;
}

.form-group input{
width:100%;
padding:14px;
border:1px solid #ddd;
border-radius:6px;
}

.form-button{
grid-column:1 / -1;
}

.form-button button{
width:100%;
background:#FFD000;
border:none;
padding:16px;
border-radius:6px;
}


/* ===============================
DRIVERS
================================ */

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

.drivers-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
max-width:1100px;
margin:auto;
}


/* ===============================
FLEET
================================ */

.fleet{
padding:80px 20px;
background:#fafafa;
text-align:center;
}

.fleet-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
max-width:1100px;
margin:auto;
}


/* ===============================
WHY US
================================ */

.why-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
max-width:1100px;
margin:auto;
}


/* ===============================
TESTIMONIALS
================================ */

.testimonial-slider{
display:flex;
gap:25px;
overflow-x:auto;
}

.testimonial-card{
min-width:320px;
background:#fff;
padding:25px;
border-radius:12px;
}

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

.taxi-footer{
background:#111;
color:#ccc;
margin-top:60px;
}

.footer-wrapper{
max-width:1200px;
margin:auto;
padding:60px 20px;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;
}

.footer-bottom{
border-top:1px solid #333;
text-align:center;
padding:20px;
}


/* ===============================
FLOAT BUTTONS
================================ */

.floating-buttons{
position:fixed;
right:20px;
bottom:20px;
display:flex;
flex-direction:column;
gap:10px;
}


/* ===============================
RESPONSIVE
================================ */

@media(max-width:900px){

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

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

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

}

/* ===============================
ABOUT PAGE
================================ */

.about-page{
padding:140px 20px 60px;
background:#111;
color:#fff;
text-align:center;
}

.page-title{
font-size:40px;
margin-bottom:10px;
}

.page-desc{
max-width:700px;
margin:auto;
color:#ccc;
}


/* ===============================
ABOUT CONTENT
================================ */

.about-content{
padding:80px 20px;
background:#fff;
}

.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
max-width:1200px;
margin:auto;
}

.about-image img{
width:100%;
border-radius:10px;
}

.about-text h2{
font-size:32px;
margin-bottom:20px;
}

.about-text p{
margin-bottom:15px;
line-height:1.7;
color:#555;
}


/* ===============================
ABOUT STATS
================================ */

.about-stats{
display:flex;
gap:20px;
margin-top:30px;
}

.stat-box{
background:#FFD000;
padding:20px;
border-radius:8px;
text-align:center;
flex:1;
}

.stat-box h3{
font-size:28px;
color:#000;
}

.stat-box p{
font-size:14px;
color:#000;
}


/* ===============================
RESPONSIVE
================================ */

@media(max-width:900px){

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

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

}

@media(max-width:600px){

.service-grid,
.drivers-grid,
.fleet-grid{
grid-template-columns:1fr;
}

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

.footer-wrapper{
grid-template-columns:1fr;
}

.taxi-call-form{
grid-template-columns:1fr;
}

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

.about-stats{
flex-direction:column;
}
/* ===============================
SERVICES PAGE
================================ */

.services-page{
padding:140px 20px 80px;
background:#f9f9f9;
}

/* GRID */

.services-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
max-width:1200px;
margin:auto;
align-items:stretch;
}

/* CARD */

.service-card{
background:#fff;
padding:35px 30px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
transition:.3s;
text-align:center;
height:100%;
display:flex;
flex-direction:column;
justify-content:flex-start;
}

.service-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

/* ICON */

.service-icon{
width:70px;
height:70px;
background:#FFD000;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:30px;
margin:0 auto 20px;
flex-shrink:0;
}

/* TEXT */

.service-card h3{
font-size:22px;
margin-bottom:10px;
color:#111;
}

.service-card p{
font-size:14px;
color:#666;
line-height:1.6;
flex-grow:1;
}

/* BUTTON */

.service-btn{
display:inline-block;
margin-top:20px;
background:#000;
color:#fff;
padding:10px 18px;
border-radius:6px;
text-decoration:none;
font-size:14px;
transition:.3s;
}

.service-btn:hover{
background:#FFD000;
color:#000;
}


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

@media(max-width:900px){

.services-page{
padding:120px 20px 60px;
}

.services-grid{
grid-template-columns:repeat(2,1fr);
gap:25px;
}

}


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

@media(max-width:600px){

.services-page{
padding:110px 15px 60px;
}

.services-grid{
grid-template-columns:1fr;
gap:20px;
}

.service-card{
padding:30px 20px;
}

.service-card h3{
font-size:20px;
}

.service-card p{
font-size:14px;
}

/* PAGE BANNER */

.page-banner{
position:relative;
height:260px;
background:url('/assets/images/banner.jpg') center/cover no-repeat;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:#fff;
}

.banner-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
}

.banner-content{
position:relative;
z-index:2;
}

.banner-content h1{
font-size:42px;
font-weight:700;
}

/* MOBILE */

@media(max-width:600px){

.page-banner{
height:180px;
}

.banner-content h1{
font-size:28px;
}

}