/*==================================================
 CABNGO PREMIUM STYLE.CSS
 Author : Aking Web Tech
 Version : 1.0
==================================================*/

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

/*==============================
Variables
==============================*/
:root{

--primary:#F4B400;
--primary-dark:#d89c00;

--secondary:#111111;

--white:#ffffff;

--light:#f8f9fa;

--gray:#777777;

--border:#e6e6e6;

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

--radius:15px;

--transition:.35s ease;

}

/*==============================
Reset
==============================*/

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;

background:#fff;

color:#222;

overflow-x:hidden;

line-height:1.6;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

transition:var(--transition);

}

ul{

list-style:none;

padding:0;

margin:0;

}

section{

padding:90px 0;

}

.container{

max-width:1200px;

}

/*==============================
Typography
==============================*/

h1{

font-size:60px;

font-weight:800;

line-height:1.2;

}

h2{

font-size:42px;

font-weight:700;

margin-bottom:20px;

}

h3{

font-size:30px;

font-weight:700;

}

h4{

font-size:24px;

font-weight:600;

}

h5{

font-size:18px;

font-weight:600;

color:var(--primary);

text-transform:uppercase;

letter-spacing:1px;

}

p{

font-size:16px;

color:#666;

margin-bottom:15px;

}

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

.btn{

border-radius:50px;

padding:13px 32px;

font-weight:600;

transition:var(--transition);

}

.btn-warning{

background:var(--primary);

border:none;

color:#111;

}

.btn-warning:hover{

background:var(--primary-dark);

transform:translateY(-3px);

box-shadow:0 12px 25px rgba(244,180,0,.4);

}

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

.navbar{

padding:18px 0;

transition:.4s;

background:rgba(17,17,17,.90);

backdrop-filter:blur(15px);

}

.navbar-brand img{

height:55px;

}

.nav-link{

color:#fff;

font-weight:500;

margin-left:20px;

position:relative;

}

.nav-link:hover{

color:var(--primary);

}

.nav-link::after{

content:'';

position:absolute;

left:0;

bottom:-6px;

height:2px;

width:0;

background:var(--primary);

transition:.3s;

}

.nav-link:hover::after{

width:100%;

}

.navbar .btn{

margin-left:20px;

}

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

.hero{

padding-top:170px;

padding-bottom:120px;

background:linear-gradient(135deg,#111,#202020);

color:#fff;

position:relative;

overflow:hidden;

}

.hero::before{

content:'';

position:absolute;

right:-120px;

top:-120px;

width:420px;

height:420px;

border-radius:50%;

background:rgba(244,180,0,.08);

}

.hero::after{

content:'';

position:absolute;

left:-180px;

bottom:-180px;

width:420px;

height:420px;

border-radius:50%;

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

}

.hero h1{

margin:20px 0;

}

.hero p{

font-size:20px;

color:#ddd;

margin-bottom:35px;

}

.hero-car{

animation:floatCar 4s ease-in-out infinite;

position:relative;

z-index:2;

}

@keyframes floatCar{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

/*==============================
Booking Form
==============================*/

.booking-box{

background:#fff;

padding:35px;

border-radius:20px;

box-shadow:var(--shadow);

margin-top:30px;

position:relative;

z-index:5;

}

.booking-box .form-control{

height:55px;

border-radius:12px;

border:1px solid var(--border);

font-size:15px;

padding-left:18px;

box-shadow:none;

transition:.3s;

}

.booking-box .form-control:focus{

border-color:var(--primary);

box-shadow:0 0 0 .2rem rgba(244,180,0,.20);

}

.booking-box button{

height:55px;

font-size:17px;

font-weight:600;

border-radius:12px;

}

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

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title h2{

margin-bottom:10px;

}

.section-title p{

max-width:650px;

margin:auto;

}

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

.card{

border:none;

border-radius:18px;

box-shadow:var(--shadow);

transition:var(--transition);

overflow:hidden;

}

.card:hover{

transform:translateY(-8px);

}

/*==============================
Utility Classes
==============================*/

.bg-light{

background:var(--light)!important;

}

.text-primary{

color:var(--primary)!important;

}

.rounded-xl{

border-radius:20px;

}

.shadow-lg{

box-shadow:var(--shadow)!important;

}



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

.services{
background:#f8f9fa;
}

.service-card{

background:#fff;

padding:40px 30px;

border-radius:20px;

text-align:center;

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

transition:.35s;

position:relative;

overflow:hidden;

height:100%;

}

.service-card::before{

content:'';

position:absolute;

left:-100%;

top:0;

width:100%;

height:5px;

background:#F4B400;

transition:.4s;

}

.service-card:hover::before{

left:0;

}

.service-card:hover{

transform:translateY(-12px);

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

}

.service-card i{

font-size:60px;

color:#F4B400;

margin-bottom:25px;

transition:.4s;

}

.service-card:hover i{

transform:rotateY(180deg);

}

.service-card h4{

margin-bottom:15px;

font-weight:700;

}

.service-card p{

color:#666;

font-size:15px;

}

/*==================================================
COUNTER SECTION
==================================================*/

.counter{

background:#111;

color:#fff;

padding:80px 0;

}

.counter .col-md-3{

padding:20px;

}

.counter h2{

font-size:55px;

font-weight:800;

color:#F4B400;

margin-bottom:10px;

}

.counter p{

color:#ddd;

font-size:18px;

margin:0;

}

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

.fleet{

background:#fff;

}

.fleet-card{

background:#fff;

border-radius:20px;

padding:30px;

text-align:center;

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

transition:.35s;

overflow:hidden;

position:relative;

height:100%;

}

.fleet-card:hover{

transform:translateY(-10px);

}


/*==========================
Fleet Card Image
==========================*/

.fleet-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

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

    transition:.35s;

    padding:20px;

}

/* Rectangle Image Box */

.fleet-card .car-img{

    width:100%;

    height:220px;

    background:#f8f8f8;

    border-radius:15px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    margin-bottom:20px;

}

/* Car Image */

.fleet-card .car-img img{

    width:100%;

    height:100%;

    object-fit:contain;

    transition:.4s;

}

.fleet-card:hover .car-img img{

    transform:scale(1.08);

}


.fleet-card:hover img{

transform:scale(1.08);

}

.fleet-card h4{

margin-top:25px;

font-weight:700;

}

.fleet-card p{

font-size:17px;

font-weight:600;

color:#F4B400;

}

.fleet-card .btn{

margin-top:15px;

}

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

.fleet-card::after{

content:"POPULAR";

position:absolute;

top:18px;

right:-35px;

width:130px;

text-align:center;

background:#F4B400;

color:#111;

font-size:12px;

font-weight:700;

transform:rotate(45deg);

padding:5px;

}

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

.why{

background:#f8f9fa;

}

.why img{

border-radius:20px;

box-shadow:0 20px 50px rgba(0,0,0,.12);

}

.why h2{

margin-bottom:30px;

}

.why ul{

padding-left:0;

margin-top:30px;

}

.why ul li{

position:relative;

padding:15px 0 15px 45px;

font-size:17px;

font-weight:500;

border-bottom:1px solid #ececec;

}

.why ul li:last-child{

border:none;

}

.why ul li::before{

content:"✓";

position:absolute;

left:0;

top:13px;

width:28px;

height:28px;

border-radius:50%;

background:#F4B400;

display:flex;

align-items:center;

justify-content:center;

font-weight:bold;

color:#111;

}

/*==================================================
SECTION HEADING
==================================================*/

.section-heading{

margin-bottom:60px;

text-align:center;

}

.section-heading span{

display:inline-block;

background:#fff3cd;

padding:8px 18px;

border-radius:30px;

color:#F4B400;

font-weight:600;

margin-bottom:15px;

}

.section-heading h2{

font-weight:800;

margin-bottom:15px;

}

.section-heading p{

max-width:650px;

margin:auto;

}

/*==================================================
IMAGE HOVER
==================================================*/

.zoom{

overflow:hidden;

border-radius:20px;

}

.zoom img{

transition:.4s;

}

.zoom:hover img{

transform:scale(1.1);

}

/*==================================================
ICON BOX
==================================================*/

.icon-box{

width:70px;

height:70px;

background:#F4B400;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:30px;

color:#111;

margin:auto;

margin-bottom:20px;

transition:.4s;

}

.service-card:hover .icon-box{

transform:rotate(360deg);

}

/*==================================================
YELLOW GRADIENT
==================================================*/

.yellow-bg{

background:linear-gradient(135deg,#FFD54F,#F4B400);

}

/*==================================================
DARK SECTION
==================================================*/

.dark-section{

background:#111;

color:#fff;

}

.dark-section h2,

.dark-section h3,

.dark-section h4{

color:#fff;

}

.dark-section p{

color:#ccc;

}

/*==================================================
CARD ANIMATION
==================================================*/

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.fade-up{

animation:fadeUp 1s ease;

}

/*==================================================
BUTTON SHINE EFFECT
==================================================*/

.btn-warning{

position:relative;

overflow:hidden;

}

.btn-warning::before{

content:'';

position:absolute;

left:-100px;

top:0;

width:60px;

height:100%;

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

transform:skewX(-30deg);

transition:.6s;

}

.btn-warning:hover::before{

left:130%;

}

/*==================================================
CAR IMAGE FLOAT
==================================================*/

@keyframes carMove{

0%{

transform:translateX(0);

}

50%{

transform:translateX(12px);

}

100%{

transform:translateX(0);

}

}

.hero-car{

animation:carMove 4s infinite ease-in-out;

}

/*==================================================
SPACING HELPERS
==================================================*/

.mt-80{

margin-top:80px;

}

.mb-80{

margin-bottom:80px;

}

.pt-80{

padding-top:80px;

}

.pb-80{

padding-bottom:80px;

}

.radius-20{

border-radius:20px;

}

.shadow-hover{

transition:.35s;

}

.shadow-hover:hover{

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

transform:translateY(-8px);

}


/*==================================================
TESTIMONIAL SECTION
==================================================*/

.testimonial{

background:#ffffff;

}

.testimonial-card{

background:#fff;

padding:40px;

border-radius:20px;

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

max-width:800px;

margin:auto;

position:relative;

transition:.35s;

}

.testimonial-card:hover{

transform:translateY(-10px);

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

}

.testimonial-card::before{

content:"❝";

position:absolute;

left:35px;

top:20px;

font-size:70px;

color:#F4B400;

opacity:.15;

font-family:serif;

}

.testimonial-card p{

font-size:18px;

line-height:32px;

color:#555;

margin-top:20px;

}

.testimonial-card h5{

margin-top:20px;

font-weight:700;

color:#111;

}

.testimonial-card span{

font-size:14px;

color:#777;

}

.rating{

margin-bottom:20px;

}

.rating i{

color:#F4B400;

margin:0 2px;

font-size:18px;

}

/*==================================================
CALL TO ACTION
==================================================*/

.cta{

background:linear-gradient(135deg,#111,#222);

padding:80px 0;

color:#fff;

}

.cta h2{

font-size:42px;

font-weight:700;

margin-bottom:15px;

color:#fff;

}

.cta p{

color:#ddd;

font-size:18px;

margin-bottom:0;

}

.cta .btn{

padding:16px 40px;

font-size:18px;

font-weight:600;

}

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

footer{

background:#111;

color:#fff;

padding:70px 0 25px;

}

footer h3,

footer h4{

color:#fff;

margin-bottom:25px;

font-weight:700;

}

footer p{

color:#bbbbbb;

line-height:28px;

}

footer ul{

padding:0;

}

footer ul li{

margin-bottom:14px;

}

footer ul li a{

color:#cccccc;

transition:.3s;

}

footer ul li a:hover{

color:#F4B400;

padding-left:8px;

}

footer hr{

margin:40px 0 20px;

border-color:rgba(255,255,255,.1);

}

footer .text-center{

color:#999;

font-size:15px;

}

/*==================================================
SOCIAL ICONS
==================================================*/

.social-icons{

display:flex;

gap:12px;

margin-top:20px;

}

.social-icons a{

width:45px;

height:45px;

display:flex;

align-items:center;

justify-content:center;

background:#222;

border-radius:50%;

color:#fff;

transition:.35s;

}

.social-icons a:hover{

background:#F4B400;

color:#111;

transform:translateY(-5px);

}

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

.footer-contact li{

display:flex;

align-items:flex-start;

margin-bottom:15px;

}

.footer-contact i{

width:35px;

height:35px;

background:#F4B400;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

color:#111;

margin-right:12px;

font-size:15px;

}

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

.whatsapp{

position:fixed;

right:25px;

bottom:95px;

width:60px;

height:60px;

border-radius:50%;

background:#25D366;

display:flex;

align-items:center;

justify-content:center;

font-size:32px;

color:#fff;

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

z-index:999;

transition:.35s;

animation:whatsappPulse 2s infinite;

}

.whatsapp:hover{

transform:scale(1.12);

color:#fff;

}

@keyframes whatsappPulse{

0%{

box-shadow:0 0 0 0 rgba(37,211,102,.5);

}

70%{

box-shadow:0 0 0 20px rgba(37,211,102,0);

}

100%{

box-shadow:0 0 0 0 rgba(37,211,102,0);

}

}

/*==================================================
BACK TO TOP
==================================================*/

#backTop{

position:fixed;

bottom:25px;

right:25px;

width:55px;

height:55px;

border-radius:50%;

background:#F4B400;

color:#111;

display:flex;

align-items:center;

justify-content:center;

font-size:20px;

cursor:pointer;

visibility:hidden;

opacity:0;

transition:.35s;

z-index:999;

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

}

#backTop.active{

visibility:visible;

opacity:1;

}

#backTop:hover{

transform:translateY(-5px);

}

/*==================================================
NEWSLETTER
==================================================*/

.newsletter{

margin-top:20px;

display:flex;

}

.newsletter input{

flex:1;

height:50px;

border:none;

padding:0 15px;

border-radius:30px 0 0 30px;

outline:none;

}

.newsletter button{

height:50px;

padding:0 25px;

border:none;

background:#F4B400;

color:#111;

font-weight:600;

border-radius:0 30px 30px 0;

transition:.35s;

}

.newsletter button:hover{

background:#dca000;

}

/*==================================================
APP DOWNLOAD
==================================================*/

.app-buttons{

display:flex;

gap:15px;

margin-top:25px;

}

.app-buttons img{

height:50px;

transition:.35s;

}

.app-buttons img:hover{

transform:translateY(-5px);

}

/*==================================================
COPYRIGHT
==================================================*/

.copyright{

text-align:center;

margin-top:25px;

font-size:15px;

color:#999;

}


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

/* Large Desktop */
@media (max-width:1200px){

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

.hero{
padding-top:150px;
}

.container{
max-width:1140px;
}

}

/* Laptop */
@media (max-width:992px){

section{
padding:70px 0;
}

.navbar{
padding:12px 0;
}

.navbar-collapse{
background:#111;
padding:20px;
margin-top:15px;
border-radius:12px;
}

.nav-link{
margin:10px 0;
}

.hero{
padding-top:130px;
text-align:center;
}

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

.hero p{
font-size:17px;
}

.hero-car{
margin-top:40px;
max-width:90%;
}

.booking-box{
margin-top:40px;
}

.counter h2{
font-size:42px;
}

.cta{
text-align:center;
}

.cta .text-end{
text-align:center !important;
margin-top:30px;
}

footer{
text-align:center;
}

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

.footer-contact li{
justify-content:center;
}

.newsletter{
flex-direction:column;
}

.newsletter input{
border-radius:30px;
margin-bottom:10px;
}

.newsletter button{
border-radius:30px;
}

}

/* Tablet */
@media (max-width:768px){

h1{
font-size:36px;
}

h2{
font-size:30px;
}

.hero{
padding-top:110px;
padding-bottom:70px;
}

.hero-car{
display:none;
}

.booking-box{
padding:25px;
}

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

.counter .col-md-3{
margin-bottom:30px;
}

.counter h2{
font-size:36px;
}

.cta h2{
font-size:30px;
}

.cta p{
font-size:16px;
}

.whatsapp{
width:55px;
height:55px;
font-size:28px;
right:20px;
bottom:90px;
}

#backTop{
width:50px;
height:50px;
right:20px;
bottom:20px;
}

}

/* Mobile */
@media (max-width:576px){

body{
font-size:15px;
}

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

.hero p{
font-size:15px;
}

.booking-box{
padding:20px;
}

.booking-box .form-control{
height:50px;
}

.booking-box button{
height:50px;
}

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

.service-card i{
font-size:45px;
}

.fleet-card img{
height:130px;
}

.testimonial-card{
padding:25px;
}

.testimonial-card p{
font-size:15px;
line-height:28px;
}

.cta{
padding:60px 20px;
}

.cta h2{
font-size:26px;
}

footer{
padding:50px 0 20px;
}

footer h3,
footer h4{
font-size:22px;
}

}

/*==================================================
LOADER
==================================================*/

#loader{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:#fff;

display:flex;

align-items:center;

justify-content:center;

z-index:99999;

transition:.5s;

}

.loader-circle{

width:70px;

height:70px;

border:6px solid #eee;

border-top:6px solid #F4B400;

border-radius:50%;

animation:spin .8s linear infinite;

}

@keyframes spin{

100%{
transform:rotate(360deg);
}

}

/*==================================================
SCROLL ANIMATION
==================================================*/

.reveal{

opacity:0;

transform:translateY(60px);

transition:all .8s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

/*==================================================
IMAGE EFFECT
==================================================*/

.img-hover{

overflow:hidden;

border-radius:18px;

}

.img-hover img{

transition:.4s;

}

.img-hover:hover img{

transform:scale(1.08);

}

/*==================================================
GRADIENT TEXT
==================================================*/

.text-gradient{

background:linear-gradient(90deg,#F4B400,#ffdd57);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

/*==================================================
BADGE
==================================================*/

.badge-yellow{

background:#F4B400;

color:#111;

padding:8px 16px;

border-radius:30px;

font-size:13px;

font-weight:600;

}

/*==================================================
SHADOW UTILITIES
==================================================*/

.shadow-sm{
box-shadow:0 5px 15px rgba(0,0,0,.08);
}

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

.shadow-xl{
box-shadow:0 25px 60px rgba(0,0,0,.18);
}

/*==================================================
ROUNDED UTILITIES
==================================================*/

.radius-10{
border-radius:10px;
}

.radius-15{
border-radius:15px;
}

.radius-20{
border-radius:20px;
}

.radius-30{
border-radius:30px;
}

.radius-circle{
border-radius:50%;
}

/*==================================================
SPACING UTILITIES
==================================================*/

.mt-30{margin-top:30px;}
.mt-50{margin-top:50px;}
.mt-80{margin-top:80px;}

.mb-30{margin-bottom:30px;}
.mb-50{margin-bottom:50px;}
.mb-80{margin-bottom:80px;}

.pt-50{padding-top:50px;}
.pt-80{padding-top:80px;}

.pb-50{padding-bottom:50px;}
.pb-80{padding-bottom:80px;}

/*==================================================
TRANSITIONS
==================================================*/

.transition{
transition:all .35s ease;
}

.transition:hover{
transform:translateY(-5px);
}

/*==================================================
CUSTOM SCROLLBAR
==================================================*/

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#f1f1f1;
}

::-webkit-scrollbar-thumb{
background:#F4B400;
border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
background:#d89c00;
}

/*==================================================
SELECTION
==================================================*/

::selection{
background:#F4B400;
color:#111;
}

/*==================================================
FOCUS
==================================================*/

input:focus,
textarea:focus,
select:focus{
outline:none;
}

/*==================================================
END OF FILE
==================================================*/


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

.whatsapp-float{

position:fixed;

right:25px;

bottom:25px;

width:65px;

height:65px;

background:#25D366;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

color:#fff;

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

z-index:9999;

transition:.35s;

animation:whatsappPulse 2s infinite;

}

.whatsapp-float:hover{

transform:scale(1.12);

color:#fff;

}

@keyframes whatsappPulse{

0%{

box-shadow:0 0 0 0 rgba(37,211,102,.6);

}

70%{

box-shadow:0 0 0 18px rgba(37,211,102,0);

}

100%{

box-shadow:0 0 0 0 rgba(37,211,102,0);

}

}