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


/*==================================================
Global Transition
==================================================*/

*{
transition:all .35s ease;
}


/*==================================================
Fade In
==================================================*/

.fade-in{

animation:fadeIn 1s ease forwards;

}

@keyframes fadeIn{

0%{

opacity:0;

}

100%{

opacity:1;

}

}


/*==================================================
Fade Up
==================================================*/

.fade-up{

opacity:0;

animation:fadeUp 1s ease forwards;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(60px);

}

100%{

opacity:1;

transform:translateY(0);

}

}


/*==================================================
Fade Down
==================================================*/

.fade-down{

animation:fadeDown 1s ease;

}

@keyframes fadeDown{

0%{

opacity:0;

transform:translateY(-60px);

}

100%{

opacity:1;

transform:translateY(0);

}

}


/*==================================================
Fade Left
==================================================*/

.fade-left{

animation:fadeLeft .8s ease forwards;

}

@keyframes fadeLeft{

0%{

opacity:0;

transform:translateX(-80px);

}

100%{

opacity:1;

transform:translateX(0);

}

}


/*==================================================
Fade Right
==================================================*/

.fade-right{

animation:fadeRight .8s ease forwards;

}

@keyframes fadeRight{

0%{

opacity:0;

transform:translateX(80px);

}

100%{

opacity:1;

transform:translateX(0);

}

}


/*==================================================
Zoom In
==================================================*/

.zoom-in{

animation:zoomIn .8s ease;

}

@keyframes zoomIn{

0%{

opacity:0;

transform:scale(.6);

}

100%{

opacity:1;

transform:scale(1);

}

}


/*==================================================
Zoom Out
==================================================*/

.zoom-out{

animation:zoomOut .8s ease;

}

@keyframes zoomOut{

0%{

transform:scale(1.3);

opacity:0;

}

100%{

transform:scale(1);

opacity:1;

}

}


/*==================================================
Rotate
==================================================*/

.rotate{

animation:rotate360 8s linear infinite;

}

@keyframes rotate360{

100%{

transform:rotate(360deg);

}

}


/*==================================================
Floating
==================================================*/

.float{

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

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}


/*==================================================
Floating Left Right
==================================================*/

.float-x{

animation:floatX 5s infinite ease-in-out;

}

@keyframes floatX{

0%{

transform:translateX(0);

}

50%{

transform:translateX(20px);

}

100%{

transform:translateX(0);

}

}


/*==================================================
Bounce
==================================================*/

.bounce{

animation:bounce 1.2s infinite;

}

@keyframes bounce{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

}


/*==================================================
Pulse
==================================================*/

.pulse{

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}


/*==================================================
Shake
==================================================*/

.shake:hover{

animation:shake .5s;

}

@keyframes shake{

0%{transform:translateX(0);}
20%{transform:translateX(-6px);}
40%{transform:translateX(6px);}
60%{transform:translateX(-6px);}
80%{transform:translateX(6px);}
100%{transform:translateX(0);}

}


/*==================================================
Hero Car Animation
==================================================*/

.hero-car{

animation:heroCar 5s ease-in-out infinite;

}

@keyframes heroCar{

0%{

transform:translateY(0) rotate(0);

}

25%{

transform:translateY(-10px) rotate(-1deg);

}

50%{

transform:translateY(-18px);

}

75%{

transform:translateY(-10px) rotate(1deg);

}

100%{

transform:translateY(0);

}

}


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

.hero h1{

animation:heroTitle 1s ease;

}

@keyframes heroTitle{

0%{

opacity:0;

transform:translateY(70px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

.hero p{

animation:heroText 1.2s ease;

}

@keyframes heroText{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}


/*==================================================
Delay Classes
==================================================*/

.delay-1{

animation-delay:.2s;

}

.delay-2{

animation-delay:.4s;

}

.delay-3{

animation-delay:.6s;

}

.delay-4{

animation-delay:.8s;

}

.delay-5{

animation-delay:1s;

}




/*==================================================
 CABNGO ANIMATION.CSS
 PART-2
 Buttons • Cards • Icons • Hover Effects
==================================================*/


/*==================================================
BUTTON HOVER LIFT
==================================================*/

.btn{
position:relative;
overflow:hidden;
transition:all .35s ease;
}

.btn:hover{
transform:translateY(-5px);
box-shadow:0 15px 30px rgba(0,0,0,.18);
}


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

.btn-shine{
position:relative;
overflow:hidden;
}

.btn-shine::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:60%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.5),
transparent
);

transform:skewX(-25deg);

}

.btn-shine:hover::before{

animation:shine .9s;

}

@keyframes shine{

100%{

left:150%;

}

}


/*==================================================
BUTTON GLOW
==================================================*/

.btn-glow:hover{

box-shadow:
0 0 10px #F4B400,
0 0 20px #F4B400,
0 0 40px rgba(244,180,0,.5);

}


/*==================================================
BUTTON PULSE
==================================================*/

.btn-pulse{

animation:buttonPulse 2s infinite;

}

@keyframes buttonPulse{

0%{

box-shadow:0 0 0 0 rgba(244,180,0,.5);

}

70%{

box-shadow:0 0 0 18px rgba(244,180,0,0);

}

100%{

box-shadow:0 0 0 0 rgba(244,180,0,0);

}

}


/*==================================================
SERVICE CARD
==================================================*/

.service-card{

transition:all .35s ease;

}

.service-card:hover{

transform:translateY(-15px);

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

}

.service-card:hover i{

animation:rotateIcon .8s;

}

@keyframes rotateIcon{

100%{

transform:rotate(360deg);

}

}


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

.fleet-card{

transition:all .4s ease;

}

.fleet-card:hover{

transform:translateY(-12px);

}

.fleet-card img{

transition:all .4s ease;

}

.fleet-card:hover img{

transform:scale(1.08);

}


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

.img-hover{

overflow:hidden;

}

.img-hover img{

transition:.45s;

}

.img-hover:hover img{

transform:scale(1.1);

}


/*==================================================
ICON FLOAT
==================================================*/

.icon-float{

display:inline-block;

animation:iconFloat 3s ease infinite;

}

@keyframes iconFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}


/*==================================================
ICON POP
==================================================*/

.icon-pop:hover{

animation:iconPop .5s;

}

@keyframes iconPop{

0%{

transform:scale(1);

}

50%{

transform:scale(1.3);

}

100%{

transform:scale(1);

}

}


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

.social-icons a{

transition:.35s;

}

.social-icons a:hover{

transform:translateY(-6px) rotate(8deg);

}


/*==================================================
NAVIGATION UNDERLINE
==================================================*/

.nav-link{

position:relative;

}

.nav-link::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:#F4B400;

transition:.35s;

}

.nav-link:hover::after{

width:100%;

}


/*==================================================
CARD SHADOW
==================================================*/

.card-hover{

transition:.4s;

}

.card-hover:hover{

transform:translateY(-10px);

box-shadow:0 20px 45px rgba(0,0,0,.18);

}


/*==================================================
IMAGE ROTATE
==================================================*/

.rotate-hover img{

transition:.5s;

}

.rotate-hover:hover img{

transform:rotate(3deg) scale(1.05);

}


/*==================================================
TITLE UNDERLINE
==================================================*/

.title-line{

position:relative;

display:inline-block;

}

.title-line::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:60%;

height:4px;

background:#F4B400;

border-radius:20px;

}


/*==================================================
GRADIENT ANIMATION
==================================================*/

.gradient-bg{

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

background-size:400% 400%;

animation:gradientMove 8s ease infinite;

}

@keyframes gradientMove{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}


/*==================================================
TEXT GLOW
==================================================*/

.text-glow{

animation:textGlow 2s infinite alternate;

}

@keyframes textGlow{

0%{

text-shadow:0 0 5px rgba(244,180,0,.3);

}

100%{

text-shadow:
0 0 10px #F4B400,
0 0 20px #F4B400;

}

}


/*==================================================
BORDER ANIMATION
==================================================*/

.border-animate{

position:relative;

}

.border-animate::before{

content:"";

position:absolute;

left:0;

bottom:0;

width:0;

height:3px;

background:#F4B400;

transition:.4s;

}

.border-animate:hover::before{

width:100%;

}


/*==================================================
SCROLL DOWN ICON
==================================================*/

.scroll-down{

animation:scrollDown 2s infinite;

}

@keyframes scrollDown{

0%{

transform:translateY(0);

opacity:1;

}

50%{

transform:translateY(10px);

opacity:.5;

}

100%{

transform:translateY(0);

opacity:1;

}


/*==================================================
END PART-2
==================================================*/




/*==================================================
 CABNGO ANIMATION.CSS
 PART-3 (FINAL)
 Loader • Background • Particles • Typing • Waves
==================================================*/


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

#loader{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:#ffffff;

display:flex;

align-items:center;

justify-content:center;

z-index:999999;

}

.loader{

width:70px;

height:70px;

border-radius:50%;

border:6px solid #eeeeee;

border-top:6px solid #F4B400;

animation:loaderSpin .8s linear infinite;

}

@keyframes loaderSpin{

100%{

transform:rotate(360deg);

}

}


/*==================================================
FLOATING BACKGROUND BLOBS
==================================================*/

.blob{

position:absolute;

border-radius:50%;

filter:blur(30px);

opacity:.25;

animation:blobMove 12s infinite alternate ease-in-out;

}

.blob-1{

width:250px;

height:250px;

background:#F4B400;

top:5%;

left:5%;

}

.blob-2{

width:350px;

height:350px;

background:#ffd54f;

bottom:5%;

right:8%;

animation-delay:2s;

}

@keyframes blobMove{

0%{

transform:translate(0,0) scale(1);

}

100%{

transform:translate(80px,-60px) scale(1.2);

}

}


/*==================================================
FLOATING PARTICLES
==================================================*/

.particle{

position:absolute;

width:8px;

height:8px;

border-radius:50%;

background:#F4B400;

animation:particleFloat 8s linear infinite;

opacity:.5;

}

@keyframes particleFloat{

0%{

transform:translateY(100vh);

opacity:0;

}

20%{

opacity:.8;

}

100%{

transform:translateY(-100px);

opacity:0;

}

}


/*==================================================
GLASS EFFECT
==================================================*/

.glass{

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

backdrop-filter:blur(12px);

-webkit-backdrop-filter:blur(12px);

border:1px solid rgba(255,255,255,.2);

}


/*==================================================
WAVE ANIMATION
==================================================*/

.wave{

position:absolute;

bottom:0;

left:0;

width:100%;

animation:waveMove 12s linear infinite;

}

@keyframes waveMove{

0%{

transform:translateX(0);

}

50%{

transform:translateX(-40px);

}

100%{

transform:translateX(0);

}

}


/*==================================================
TYPING EFFECT
==================================================*/

.typing{

overflow:hidden;

white-space:nowrap;

border-right:3px solid #F4B400;

width:0;

animation:

typing 5s steps(30,end) forwards,

blink .8s infinite;

}

@keyframes typing{

from{

width:0;

}

to{

width:100%;

}

}

@keyframes blink{

50%{

border-color:transparent;

}

}


/*==================================================
MARQUEE
==================================================*/

.marquee{

display:flex;

gap:50px;

white-space:nowrap;

animation:marqueeMove 25s linear infinite;

}

@keyframes marqueeMove{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-50%);

}

}


/*==================================================
TAXI DRIVE
==================================================*/

.taxi-drive{

position:relative;

animation:taxiDrive 10s linear infinite;

}

@keyframes taxiDrive{

0%{

left:-120px;

}

100%{

left:110%;

}

}


/*==================================================
ICON ROTATE ON HOVER
==================================================*/

.rotate-hover:hover{

animation:rotateHover .8s;

}

@keyframes rotateHover{

100%{

transform:rotate(360deg);

}

}


/*==================================================
HEART BEAT
==================================================*/

.heartbeat{

animation:heartbeat 1.5s infinite;

}

@keyframes heartbeat{

0%{

transform:scale(1);

}

25%{

transform:scale(1.08);

}

50%{

transform:scale(.95);

}

75%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}


/*==================================================
SHAKE ON ERROR
==================================================*/

.error-shake{

animation:errorShake .45s;

}

@keyframes errorShake{

0%{transform:translateX(0);}
20%{transform:translateX(-8px);}
40%{transform:translateX(8px);}
60%{transform:translateX(-6px);}
80%{transform:translateX(6px);}
100%{transform:translateX(0);}

}


/*==================================================
SUCCESS POP
==================================================*/

.success-pop{

animation:successPop .5s;

}

@keyframes successPop{

0%{

transform:scale(.5);

opacity:0;

}

100%{

transform:scale(1);

opacity:1;

}

}


/*==================================================
SKELETON LOADING
==================================================*/

.skeleton{

background:linear-gradient(
90deg,
#f0f0f0,
#fafafa,
#f0f0f0
);

background-size:200%;

animation:skeleton 1.4s infinite;

}

@keyframes skeleton{

0%{

background-position:200%;

}

100%{

background-position:-200%;

}

}


/*==================================================
REDUCED MOTION
==================================================*/

@media (prefers-reduced-motion:reduce){

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}


/*==================================================
GPU PERFORMANCE
==================================================*/

.hero-car,
.service-card,
.fleet-card,
.btn,
img{

will-change:transform;

transform:translateZ(0);

backface-visibility:hidden;

}


/*==================================================
ANIMATION UTILITIES
==================================================*/

.animate-fast{

animation-duration:.5s !important;

}

.animate-normal{

animation-duration:1s !important;

}

.animate-slow{

animation-duration:2s !important;

}

.infinite{

animation-iteration-count:infinite;

}

.paused{

animation-play-state:paused;

}

.running{

animation-play-state:running;

}


/*==================================================
END OF ANIMATION.CSS
Version : 1.0
==================================================*/