/*==================================================
AAPLE CAB PREMIUM CSS
PART 1
==================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{

--primary:#0d6efd;
--warning:#ffc107;
--dark:#212529;
--light:#f8f9fa;
--white:#ffffff;
--gray:#6c757d;

--radius:16px;

--shadow:0 10px 25px rgba(0,0,0,.08);
--shadow-lg:0 18px 40px rgba(0,0,0,.18);

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;
background:#f5f7fb;
color:#333;
overflow-x:hidden;
line-height:1.7;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;
transition:.35s;

}

ul{

list-style:none;
margin:0;
padding:0;

}

.container{

max-width:1320px;

}

/*==============================
Navbar
==============================*/

.navbar{

background:#ffc107;
padding:12px 0;
transition:.35s;
box-shadow:0 8px 25px rgba(0,0,0,.08);
z-index:1050;

}

.navbar.sticky-top{

animation:slideDown .35s ease;

}

@keyframes slideDown{

from{

transform:translateY(-100%);

}

to{

transform:translateY(0);

}

}

/*==============================
Brand
==============================*/

.navbar-brand{

display:flex;
align-items:center;

font-size:26px;
font-weight:700;

color:#000!important;

}

.navbar-brand img{

height:48px;
width:auto;

margin-right:10px;

}

.navbar-brand:hover{

color:#000!important;

}

/*==============================
Menu
==============================*/

.navbar-nav{

align-items:center;

}

.navbar-nav .nav-item{

margin:0 4px;

}

.navbar-nav .nav-link{

display:flex;
align-items:center;

padding:12px 16px;

font-size:15px;
font-weight:600;

color:#000!important;

border-radius:10px;

transition:.3s;

}

.navbar-nav .nav-link i{

margin-right:8px;

font-size:14px;

}

.navbar-nav .nav-link:hover{

background:rgba(255,255,255,.55);

color:#0d6efd!important;

transform:translateY(-2px);

}

.navbar-nav .nav-link.active{

background:#fff;
color:#0d6efd!important;

}

/*==============================
Dropdown
==============================*/

.dropdown-menu{

border:none;
border-radius:14px;

padding:10px 0;

min-width:240px;

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

}

.dropdown-item{

padding:12px 18px;

font-size:14px;

transition:.3s;

}

.dropdown-item:hover{

background:#ffc107;

padding-left:24px;

color:#000;

}

.dropdown-divider{

margin:8px 0;

}

.dropdown-header{

font-weight:700;
color:#777;

}

/*==============================
Book Button
==============================*/

.btn-dark{

background:#212529;
border:none;

border-radius:40px;

padding:12px 28px;

font-weight:700;

transition:.3s;

}

.btn-dark:hover{

background:#000;

transform:translateY(-3px);

box-shadow:0 10px 25px rgba(0,0,0,.25);

}

/*==============================
Navbar Toggler
==============================*/

.navbar-toggler{

border:none;

padding:6px;

box-shadow:none!important;

}

.navbar-toggler:focus{

box-shadow:none!important;

}

.navbar-toggler-icon{

filter:brightness(0);

}

/*==============================
Desktop Dropdown Hover
==============================*/

@media(min-width:992px){

.navbar .dropdown:hover>.dropdown-menu{

display:block;

margin-top:0;

}

}

/*==============================
Tablet
==============================*/

@media(max-width:991px){

.navbar{

padding:10px 0;

}

.navbar-brand{

font-size:22px;

}

.navbar-brand img{

height:42px;

}

.navbar-collapse{

margin-top:15px;

background:#ffc107;

padding:18px;

border-radius:18px;

box-shadow:0 15px 30px rgba(0,0,0,.12);

}

.navbar-nav{

align-items:stretch;

}

.navbar-nav .nav-item{

width:100%;

margin:2px 0;

}

.navbar-nav .nav-link{

justify-content:space-between;

width:100%;

padding:14px 16px;

}

.dropdown-menu{

position:static!important;

float:none;

width:100%;

margin-top:8px;

background:#fff;

box-shadow:none;

border-radius:12px;

}

.btn-dark{

width:100%;

margin-top:15px;

}

}

/* Mobile Dropdown Fix */

@media (max-width:991px){

    .navbar .dropdown-menu{
        display:none;
        position:static;
        float:none;
        width:100%;
        margin-top:8px;
        box-shadow:none;
    }

    .navbar .dropdown-menu.show{
        display:block;
    }

}
/*==================================================
AAPLE CAB PREMIUM CSS
PART 3
Hero Section • Booking Form • Buttons
==================================================*/

/*==============================
Hero Section
==============================*/

.hero-section{

position:relative;

min-height:720px;

display:flex;

align-items:center;

justify-content:center;

background:
linear-gradient(rgba(0,0,0,.60),rgba(0,0,0,.60)),
url("../images/hero-taxi.jpg") center center/cover no-repeat;

color:#fff;

overflow:hidden;

}

.hero-section::before{

content:"";

position:absolute;

inset:0;

background:linear-gradient(90deg,
rgba(0,0,0,.55),
rgba(0,0,0,.25));

}

.hero-content{

position:relative;

z-index:2;

max-width:650px;

}

.hero-title{

font-size:60px;

font-weight:800;

line-height:1.2;

margin-bottom:20px;

}

.hero-title span{

color:#ffc107;

}

.hero-text{

font-size:20px;

opacity:.95;

margin-bottom:35px;

}

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

/*==============================
Buttons
==============================*/

.btn{

border:none;

border-radius:50px;

padding:14px 30px;

font-weight:700;

transition:.35s;

}

.btn:hover{

transform:translateY(-3px);

}

.btn-warning{

background:#ffc107;

color:#000;

}

.btn-warning:hover{

background:#ffcd39;

}

.btn-primary{

background:#0d6efd;

}

.btn-primary:hover{

background:#0b5ed7;

}

/*==============================
Booking Card
==============================*/

.booking-card{

position:relative;

margin-top:-90px;

background:#fff;

border-radius:22px;

padding:35px;

box-shadow:0 20px 55px rgba(0,0,0,.15);

z-index:10;

}

.booking-card h3{

font-size:28px;

font-weight:700;

margin-bottom:25px;

color:#212529;

}

.booking-card .form-control,
.booking-card .form-select{

height:56px;

border-radius:12px;

border:1px solid #ddd;

transition:.3s;

}

.booking-card .form-control:focus,
.booking-card .form-select:focus{

border-color:#0d6efd;

box-shadow:0 0 0 .2rem rgba(13,110,253,.15);

}

.booking-card textarea{

height:auto;

}

.booking-card .btn{

height:56px;

width:100%;

font-size:16px;

}

/*==============================
Section Title
==============================*/

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title h2{

font-size:42px;

font-weight:700;

margin-bottom:15px;

}

.section-title p{

max-width:700px;

margin:auto;

color:#666;

}

/*==============================
Responsive
==============================*/

@media(max-width:991px){

.hero-section{

min-height:620px;

text-align:center;

}

.hero-content{

margin:auto;

}

.hero-title{

font-size:46px;

}

.hero-text{

font-size:18px;

}

.hero-buttons{

justify-content:center;

}

.booking-card{

margin-top:40px;

padding:30px;

}

}

@media(max-width:768px){

.hero-section{

padding:100px 0;

min-height:auto;

}

.hero-title{

font-size:36px;

}

.hero-text{

font-size:16px;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons .btn{

width:100%;

}

.booking-card{

padding:24px;

}

.section-title h2{

font-size:32px;

}

}

@media(max-width:576px){

.hero-title{

font-size:30px;

}

.hero-text{

font-size:15px;

}

.booking-card{

border-radius:18px;

padding:20px;

}

.booking-card h3{

font-size:24px;

}

}
/*==================================================
AAPLE CAB PREMIUM CSS
PART 4
Features • Services • Vehicles • Testimonials • Footer
==================================================*/

/*==============================
Features
==============================*/

.features{
padding:90px 0;
background:#fff;
}

.feature-card{
background:#fff;
padding:35px;
border-radius:20px;
text-align:center;
height:100%;
transition:.35s;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.feature-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 45px rgba(0,0,0,.15);
}

.feature-icon{
width:90px;
height:90px;
margin:auto;
margin-bottom:20px;
border-radius:50%;
background:#fff3cd;
display:flex;
align-items:center;
justify-content:center;
font-size:36px;
color:#ffc107;
}

.feature-card h4{
font-size:24px;
font-weight:700;
margin-bottom:15px;
}

.feature-card p{
color:#666;
}

/*==============================
Services
==============================*/

.services{
padding:90px 0;
background:#f8f9fa;
}

.service-card{
background:#fff;
border-radius:20px;
overflow:hidden;
transition:.35s;
height:100%;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

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

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

.service-card-body{
padding:25px;
}

.service-card h4{
font-size:24px;
font-weight:700;
margin-bottom:12px;
}

.service-card p{
color:#666;
margin-bottom:20px;
}

/*==============================
Vehicle Cards
==============================*/

.vehicles{
padding:90px 0;
}

.vehicle-card{
background:#fff;
padding:30px;
border-radius:20px;
text-align:center;
transition:.35s;
box-shadow:0 10px 25px rgba(0,0,0,.08);
height:100%;
}

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

.vehicle-card img{
height:130px;
object-fit:contain;
margin:auto;
margin-bottom:20px;
}

.vehicle-card h5{
font-weight:700;
margin-bottom:10px;
}

.vehicle-card p{
color:#666;
margin-bottom:18px;
}

/*==============================
Testimonials
==============================*/

.testimonials{
padding:90px 0;
background:#fff;
}

.testimonial-card{
background:#fff;
padding:35px;
border-radius:20px;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.35s;
height:100%;
}

.testimonial-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 45px rgba(0,0,0,.15);
}

.testimonial-card img{
width:90px;
height:90px;
border-radius:50%;
object-fit:cover;
margin:auto;
margin-bottom:20px;
border:5px solid #ffc107;
}

.testimonial-card h5{
font-weight:700;
margin-bottom:5px;
}

.testimonial-card small{
color:#999;
display:block;
margin-bottom:15px;
}

.testimonial-card p{
font-style:italic;
color:#666;
}

/*==============================
Footer
==============================*/

footer{
background:#1f1f1f;
color:#fff;
padding:70px 0 20px;
}

footer h4,
footer h5{
color:#ffc107;
margin-bottom:20px;
font-weight:700;
}

footer p{
color:#ddd;
}

footer ul{
padding:0;
margin:0;
list-style:none;
}

footer li{
margin-bottom:12px;
}

footer a{
color:#ddd;
transition:.3s;
}

footer a:hover{
color:#ffc107;
padding-left:6px;
}

.footer-social{
display:flex;
gap:12px;
margin-top:20px;
}

.footer-social a{
width:45px;
height:45px;
display:flex;
align-items:center;
justify-content:center;
background:#333;
color:#fff;
border-radius:50%;
transition:.3s;
}

.footer-social a:hover{
background:#ffc107;
color:#000;
transform:translateY(-3px);
}

.footer-bottom{
margin-top:40px;
padding-top:20px;
border-top:1px solid rgba(255,255,255,.1);
text-align:center;
color:#bbb;
font-size:15px;
}

/*==============================
Responsive
==============================*/

@media(max-width:991px){

.features,
.services,
.vehicles,
.testimonials{
padding:70px 0;
}

.feature-card,
.service-card,
.vehicle-card,
.testimonial-card{
margin-bottom:25px;
}

footer{
text-align:center;
}

.footer-social{
justify-content:center;
}

}

@media(max-width:768px){

.feature-icon{
width:70px;
height:70px;
font-size:28px;
}

.service-card img{
height:190px;
}

.vehicle-card img{
height:110px;
}

.section-title h2{
font-size:32px;
}

}

@media(max-width:576px){

.feature-card,
.service-card-body,
.vehicle-card,
.testimonial-card{
padding:20px;
}

footer{
padding:50px 0 20px;
}

footer h4{
font-size:24px;
}

footer h5{
font-size:18px;
}

.footer-social a{
width:40px;
height:40px;
}

}
/*==================================================
AAPLE CAB PREMIUM CSS
PART 5
Dashboard • Utilities • Loader • Footer Extras
==================================================*/

/*==============================
Dashboard
==============================*/

.dashboard{
padding:40px 0;
}

.dashboard-title{
font-size:34px;
font-weight:700;
margin-bottom:30px;
color:#212529;
}

.stat-card{
background:#fff;
border-radius:20px;
padding:30px;
height:100%;
transition:.35s;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.stat-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 45px rgba(0,0,0,.15);
}

.stat-card .icon{
font-size:45px;
float:right;
opacity:.15;
}

.stat-card h2{
font-size:36px;
font-weight:700;
margin-bottom:8px;
}

.stat-card p{
color:#666;
margin:0;
}

/*==============================
Profile Card
==============================*/

.profile-card{
background:#fff;
padding:35px;
border-radius:20px;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.profile-card img{
width:120px;
height:120px;
border-radius:50%;
object-fit:cover;
border:5px solid #ffc107;
margin:auto;
margin-bottom:20px;
}

.profile-card h3{
font-size:24px;
font-weight:700;
margin-bottom:10px;
}

.profile-card p{
color:#666;
}

/*==============================
Tables
==============================*/

.table-responsive{
border-radius:15px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.table{
margin-bottom:0;
}

.table thead{
background:#ffc107;
}

.table th{
font-weight:700;
}

.table td,
.table th{
padding:15px;
vertical-align:middle;
}

/*==============================
Status Badges
==============================*/

.status-pending,
.status-completed,
.status-cancel{

display:inline-block;
padding:8px 16px;
border-radius:30px;
font-size:14px;
font-weight:600;

}

.status-pending{
background:#ffc107;
color:#000;
}

.status-completed{
background:#198754;
color:#fff;
}

.status-cancel{
background:#dc3545;
color:#fff;
}

/*==============================
WhatsApp Button
==============================*/

.whatsapp-btn{

position:fixed;

right:20px;

bottom:20px;

width:60px;

height:60px;

border-radius:50%;

background:#25D366;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

box-shadow:0 10px 30px rgba(0,0,0,.25);

z-index:999;

transition:.35s;

}

.whatsapp-btn:hover{

transform:scale(1.08);

color:#fff;

}

/*==============================
Back To Top
==============================*/

#backToTop{

position:fixed;

right:20px;

bottom:95px;

width:50px;

height:50px;

display:none;

align-items:center;

justify-content:center;

border:none;

border-radius:50%;

background:#0d6efd;

color:#fff;

cursor:pointer;

z-index:998;

transition:.3s;

}

#backToTop:hover{

background:#084298;

transform:translateY(-3px);

}

/*==============================
Loader
==============================*/

.loader{

position:fixed;

inset:0;

background:#fff;

display:flex;

align-items:center;

justify-content:center;

z-index:99999;

}

.loader::after{

content:"";

width:60px;

height:60px;

border-radius:50%;

border:6px solid #ffc107;

border-top-color:#0d6efd;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/*==============================
Animation
==============================*/

.fade-up{

animation:fadeUp .8s ease forwards;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*==============================
Utilities
==============================*/

.rounded-xl{

border-radius:20px!important;

}

.shadow-xl{

box-shadow:0 20px 45px rgba(0,0,0,.15)!important;

}

.mt-100{

margin-top:100px;

}

.mb-100{

margin-bottom:100px;

}

.py-100{

padding:100px 0;

}

.text-warning{

color:#ffc107!important;

}

.bg-warning{

background:#ffc107!important;

}

/*==============================
Responsive
==============================*/

@media(max-width:991px){

.dashboard-title{

text-align:center;

font-size:28px;

}

.profile-card{

margin-bottom:25px;

}

}

@media(max-width:768px){

.dashboard{

padding:25px 0;

}

.stat-card{

margin-bottom:20px;

}

.profile-card{

padding:25px;

}

.table td,
.table th{

padding:12px;

font-size:14px;

}

.whatsapp-btn{

width:54px;

height:54px;

font-size:24px;

}

#backToTop{

width:46px;

height:46px;

bottom:85px;

}

}

@media(max-width:576px){

.dashboard-title{

font-size:24px;

}

.profile-card img{

width:90px;

height:90px;

}

.whatsapp-btn{

right:15px;

bottom:15px;

}

#backToTop{

right:15px;

}

}