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


/*==========================================
1400px
==========================================*/

@media (max-width:1400px){

.container{

max-width:1320px;

}

.hero h1{

font-size:58px;

}

.hero{

padding-top:170px;

padding-bottom:100px;

}

.booking-box{

padding:35px;

}

}


/*==========================================
1200px
==========================================*/

@media (max-width:1200px){

.container{

max-width:1140px;

}

.hero h1{

font-size:48px;

}

.hero p{

font-size:18px;

}

.hero-car{

max-width:100%;

}

.navbar .nav-link{

margin-left:15px;

}

.service-card{

padding:35px 25px;

}

.fleet-card{

padding:25px;

}

.cta h2{

font-size:38px;

}

footer{

padding-top:60px;

}

}


/*==========================================
1024px
==========================================*/

@media (max-width:1024px){

.hero{

padding-top:150px;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:17px;

}

.booking-box{

padding:30px;

}

.service-card i{

font-size:50px;

}

.counter h2{

font-size:42px;

}

.testimonial-card{

padding:35px;

}

}


/*==========================================
992px
==========================================*/

@media (max-width:992px){

/* Navbar */

.navbar{

padding:12px 0;

}

.navbar-collapse{

background:#111;

padding:20px;

border-radius:12px;

margin-top:15px;

}

.navbar-nav{

margin-bottom:20px;

}

.navbar .btn{

width:100%;

margin:10px 0 0;

}


/* Hero */

.hero{

text-align:center;

padding-top:140px;

padding-bottom:80px;

}

.hero h1{

font-size:40px;

}

.hero p{

font-size:17px;

}

.hero-car{

margin-top:40px;

max-width:85%;

margin-left:auto;

margin-right:auto;

}


/* Booking */

.booking-box{

margin-top:40px;

}


/* Sections */

section{

padding:70px 0;

}


/* Fleet */

.fleet-card{

margin-bottom:30px;

}


/* Services */

.service-card{

margin-bottom:30px;

}


/* Why */

.why{

text-align:center;

}

.why img{

margin-bottom:40px;

}


/* CTA */

.cta{

text-align:center;

}

.cta .text-end{

text-align:center !important;

margin-top:25px;

}


/* Footer */

footer{

text-align:center;

}

.social-icons{

justify-content:center;

}

.footer-contact li{

justify-content:center;

}

.newsletter{

display:block;

}

.newsletter input{

width:100%;

margin-bottom:10px;

border-radius:30px;

}

.newsletter button{

width:100%;

border-radius:30px;

}

}


/*==========================================
900px
==========================================*/

@media (max-width:900px){

.hero h1{

font-size:36px;

}

.hero-car{

width:80%;

}

.counter h2{

font-size:38px;

}

.service-card{

padding:30px;

}

.fleet-card img{

height:150px;

}

}


/*==========================================
END PART-1
==========================================*/


/*==========================================
TABLET (768px)
==========================================*/

@media (max-width:768px){

section{
padding:60px 0;
}

/* Typography */

h1{
font-size:34px;
line-height:1.3;
}

h2{
font-size:28px;
}

h3{
font-size:24px;
}

h4{
font-size:20px;
}

p{
font-size:15px;
}

/* Hero */

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

.hero-car{
display:none;
}

.booking-box{
padding:25px;
}

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

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

/* Counter */

.counter{
padding:60px 0;
}

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

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

/* Services */

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

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

/* Fleet */

.fleet-card{
margin-bottom:30px;
}

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

/* Why */

.why ul li{
padding-left:40px;
font-size:15px;
}

/* Testimonial */

.testimonial-card{
padding:30px;
}

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

/* CTA */

.cta{
padding:60px 0;
}

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

/* Footer */

footer{
padding-top:50px;
}

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

.app-buttons{
justify-content:center;
flex-wrap:wrap;
}

}

/*==========================================
640px
==========================================*/

@media (max-width:640px){

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

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

.booking-box{
padding:20px;
}

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

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

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

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

}

/*==========================================
576px
==========================================*/

@media (max-width:576px){

.container{
padding-left:15px;
padding-right:15px;
}

.hero{
padding-top:100px;
}

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

.hero h5{
font-size:14px;
}

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

.btn{
width:100%;
}

.booking-box .row>[class*="col-"]{
margin-bottom:15px;
}

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

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

.service-card h4{
font-size:18px;
}

.fleet-card h4{
font-size:18px;
}

.testimonial-card{
padding:25px;
}

.cta{
text-align:center;
}

.cta .btn{
margin-top:20px;
}

.whatsapp{
width:52px;
height:52px;
font-size:24px;
right:15px;
bottom:85px;
}

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

}

/*==========================================
480px
==========================================*/

@media (max-width:480px){

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

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

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

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

.fleet-card{
padding:20px;
}

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

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

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

.newsletter input,
.newsletter button{
height:48px;
font-size:14px;
}

.app-buttons img{
height:42px;
}

}

/*==========================================
360px
==========================================*/

@media (max-width:360px){

h1{
font-size:22px;
}

h2{
font-size:22px;
}

.hero{
padding-top:90px;
}

.booking-box{
padding:15px;
}

.booking-box .form-control{
height:46px;
font-size:13px;
}

.btn{
font-size:14px;
padding:12px 18px;
}

.service-card{
padding:18px 15px;
}

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

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

footer{
font-size:14px;
}

}

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

@media (max-height:500px) and (orientation:landscape){

.hero{
padding-top:80px;
padding-bottom:50px;
}

.hero-car{
display:none;
}

section{
padding:40px 0;
}

}

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




/*==================================================
 CABNGO RESPONSIVE CSS
 PART-3 (FINAL)
==================================================*/


/*==================================================
1600px & Above (Ultra Wide Screen)
==================================================*/

@media (min-width:1600px){

.container{

max-width:1500px;

}

.hero{

padding-top:220px;

padding-bottom:180px;

}

.hero h1{

font-size:72px;

}

.hero p{

font-size:22px;

}

.booking-box{

padding:45px;

}

}


/*==================================================
1920px Monitor
==================================================*/

@media (min-width:1920px){

.container{

max-width:1650px;

}

.hero{

min-height:900px;

display:flex;

align-items:center;

}

.hero-car{

max-width:720px;

margin:auto;

}

}


/*==================================================
Foldable Devices
==================================================*/

@media (max-width:720px) and (max-height:540px){

.hero{

padding-top:90px;

padding-bottom:50px;

}

.hero h1{

font-size:28px;

}

.hero-car{

display:none;

}

.booking-box{

margin-top:25px;

}

}


/*==================================================
Retina Display
==================================================*/

@media (-webkit-min-device-pixel-ratio:2),
(min-resolution:192dpi){

img{

image-rendering:auto;

}

}


/*==================================================
Print
==================================================*/

@media print{

.navbar,
footer,
.whatsapp,
#backTop,
.btn{

display:none !important;

}

body{

background:#fff;

color:#000;

}

.hero{

padding:20px;

background:#fff;

color:#000;

}

*{

box-shadow:none !important;

}

}


/*==================================================
Reduced Motion
==================================================*/

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

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}


/*==================================================
Dark Mode Support
==================================================*/

@media (prefers-color-scheme:dark){

.auto-dark{

background:#111;

color:#fff;

}

.auto-dark p{

color:#ddd;

}

}


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

@media (orientation:landscape)
and (max-width:1024px){

.hero{

padding-top:120px;

}

.hero-car{

max-width:70%;

}

}


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

.hide-desktop{

display:none;

}

@media(max-width:768px){

.hide-mobile{

display:none !important;

}

.show-mobile{

display:block !important;

}

}

@media(min-width:769px){

.show-mobile{

display:none !important;

}

.hide-desktop{

display:block;

}

}


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

.img-fluid{

max-width:100%;

height:auto;

}

.object-cover{

object-fit:cover;

}

.object-contain{

object-fit:contain;

}


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

.text-center-mobile{

}

@media(max-width:768px){

.text-center-mobile{

text-align:center !important;

}

}


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

.flex-mobile{

display:flex;

gap:15px;

}

@media(max-width:768px){

.flex-mobile{

display:block;

}

}


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

@media(max-width:768px){

.mt-mobile-20{

margin-top:20px !important;

}

.mt-mobile-30{

margin-top:30px !important;

}

.mb-mobile-20{

margin-bottom:20px !important;

}

.mb-mobile-30{

margin-bottom:30px !important;

}

.pt-mobile-40{

padding-top:40px !important;

}

.pb-mobile-40{

padding-bottom:40px !important;

}

}


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

.table-responsive{

overflow-x:auto;

-webkit-overflow-scrolling:touch;

}


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

@media(max-width:576px){

.btn-lg{

width:100%;

}

}


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

@media(max-width:480px){

.navbar-brand img{

height:42px;

}

}


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

@media(max-width:576px){

footer ul{

padding-left:0;

}

footer li{

margin-bottom:10px;

}

footer h3{

font-size:24px;

}

footer h4{

font-size:20px;

}

}


/*==================================================
Performance
==================================================*/

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

will-change:transform;

}


/*==================================================
Accessibility
==================================================*/

:focus-visible{

outline:3px solid #F4B400;

outline-offset:3px;

}


/*==================================================
END OF RESPONSIVE.CSS
Version 1.0
==================================================*/