/*==================================================
 DROP TAXI VILLUPURAM
 STYLE.CSS V3.0
 PART 1 - ROOT + RESET + HEADER
==================================================*/

/*==========================
ROOT VARIABLES
==========================*/

:root{

--primary:#FFC107;
--secondary:#FF9800;
--dark:#111111;
--white:#ffffff;
--light:#f8f9fa;
--gray:#666666;

--radius:18px;
--radius-sm:10px;

--shadow:0 12px 35px rgba(0,0,0,.12);

--transition:.3s ease;

}

/*==========================
RESET
==========================*/

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

html{
scroll-behavior:smooth;
}

body{

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

background:#fff;

color:#222;

line-height:1.8;

overflow-x:hidden;

padding-top:82px;

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

}

/*==========================
CONTAINER
==========================*/

.container{

width:100%;

max-width:1200px;

margin:auto;

padding:0 15px;

}

.container-fluid{

width:100%;

padding:0 20px;

}

/*==========================
TYPOGRAPHY
==========================*/

h1,
h2,
h3,
h4,
h5,
h6{

font-weight:700;

line-height:1.3;

margin-bottom:15px;

}

p{

margin-bottom:18px;

color:#555;

}

a{

text-decoration:none;

transition:var(--transition);

}

img{

max-width:100%;

display:block;

height:auto;

}

button{

cursor:pointer;

transition:var(--transition);

font-family:inherit;

}

/*==========================
COMMON BUTTONS
==========================*/

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 28px;

background:var(--primary);

color:var(--dark);

border-radius:50px;

font-weight:700;

transition:var(--transition);

}

.btn-primary:hover{

background:var(--secondary);

transform:translateY(-3px);

}

.btn-success{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 28px;

background:#25D366;

color:#fff;

border-radius:50px;

font-weight:700;

transition:var(--transition);

}

.btn-success:hover{

transform:translateY(-3px);

}

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

.lux-header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:9999;

background:#111;

transition:.3s;

}

.lux-header.scrolled{

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

backdrop-filter:blur(12px);

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

}

.lux-header .container-fluid{

display:flex;

justify-content:space-between;

align-items:center;

height:82px;

}

/*==========================
LOGO
==========================*/

.lux-logo{

display:flex;

align-items:center;

gap:12px;

color:#fff;

font-weight:700;

font-size:22px;

}

.lux-logo img{

width:52px;

height:52px;

object-fit:contain;

}

.lux-logo span{

color:#fff;

white-space:nowrap;

}

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

.lux-nav{

display:flex;

align-items:center;

gap:28px;

}

.lux-nav a{

color:#fff;

font-weight:600;

position:relative;

}

.lux-nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--primary);

transition:.3s;

}

.lux-nav a:hover::after{

width:100%;

}

.lux-nav a:hover{

color:var(--primary);

}

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

.lux-btn{

padding:12px 24px;

background:var(--primary);

color:#111;

border-radius:50px;

font-weight:700;

}

.lux-btn:hover{

background:var(--secondary);

transform:translateY(-3px);

}

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

.lux-toggle{

display:none;

font-size:30px;

color:#fff;

cursor:pointer;

}

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

@media(max-width:768px){

body{

padding-top:75px;

}

.lux-header .container-fluid{

height:75px;

}

.lux-logo img{

width:42px;

height:42px;

}

.lux-logo span{

font-size:18px;

}

.lux-toggle{

display:block;

}

.lux-nav{

display:none;

position:absolute;

top:75px;

left:0;

width:100%;

background:#111;

flex-direction:column;

padding:20px;

}

.lux-nav.active{

display:flex;

}

.lux-nav a{

padding:12px 0;

}

}

/*==================================================
 DROP TAXI VILLUPURAM
 STYLE.CSS V3.0
 PART 2 - HERO + BOOKING
==================================================*/

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

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

.hero{
    width:100%;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
    padding:80px 8%;
    background:linear-gradient(135deg,#0b0b0b,#1b1b1b);
    overflow:hidden;
}

.hero-left{
    flex:1;
}

.hero-right{
    flex:1;
    text-align:center;
}

.hero-tag{
    display:inline-block;
    background:#FFD000;
    color:#000;
    padding:10px 20px;
    border-radius:50px;
    font-weight:700;
    margin-bottom:20px;
}

.hero h1{
    font-size:60px;
    line-height:1.1;
    color:#fff;
    font-weight:800;
    margin-bottom:20px;
}

.hero h1 span{
    color:#FFD000;
}

.hero p{
    color:#d8d8d8;
    font-size:18px;
    line-height:1.8;
    margin-bottom:30px;
}

.hero-points{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin-bottom:35px;
}

.hero-points div{
    color:#fff;
    background:#1d1d1d;
    padding:14px;
    border-radius:12px;
    border:1px solid rgba(255,208,0,.25);
}

.hero-buttons{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.hero-buttons a{
    text-decoration:none;
    padding:14px 28px;
    border-radius:50px;
    font-weight:700;
    transition:.3s;
}

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

.search-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 30px rgba(255,208,0,.35);
}

.call-btn{
    background:#ffffff;
    color:#000;
}

.whatsapp-btn{
    background:#25D366;
    color:#fff;
}

.hero-car{
    width:100%;
    max-width:700px;
    animation:floatCar 4s ease-in-out infinite;
    filter:drop-shadow(0 25px 50px rgba(255,208,0,.25));
}

@keyframes floatCar{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }

}

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

@media(max-width:991px){

.hero{

flex-direction:column;
text-align:center;
padding:60px 20px;

}

.hero h1{

font-size:42px;

}

.hero-points{

grid-template-columns:1fr;

}

.hero-buttons{

justify-content:center;

}

.hero-car{

max-width:95%;

}

}

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

.hero-info{

display:flex;

flex-wrap:wrap;

gap:20px;

margin-bottom:35px;

}

.hero-info div{

background:#fff;

padding:18px;

border-radius:15px;

text-align:center;

min-width:130px;

box-shadow:var(--shadow);

}

.hero-info strong{

display:block;

font-size:24px;

color:#111;

}

.hero-info span{

font-size:15px;

color:#666;

}

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

.hero-buttons{

display:flex;

gap:15px;

flex-wrap:wrap;

}

.hero-buttons .btn-primary,

.hero-buttons .btn-success{

min-width:190px;

justify-content:center;

}

/*==========================
RIGHT IMAGE
==========================*/

.hero-right{

display:flex;

justify-content:center;

align-items:center;

}

.hero-right img{

max-width:100%;

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

}

@keyframes floatCar{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

/*==========================
BOOKING CARD
==========================*/

/*=========================
BOOKING FORM
=========================*/

.booking-form{
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.15);
    border-radius:20px;
    padding:30px;
    margin-top:30px;
    box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.booking-form h2{
    color:#FFD000;
    font-size:28px;
    margin-bottom:20px;
    text-align:center;
}

.booking-form label{
    display:block;
    color:#fff;
    font-weight:600;
    margin:12px 0 6px;
}

.booking-form input,
.booking-form select{
    width:100%;
    height:52px;
    border:none;
    outline:none;
    border-radius:12px;
    background:#fff;
    padding:0 15px;
    font-size:15px;
    margin-bottom:12px;
}

.booking-form input:focus,
.booking-form select:focus{
    border:2px solid #FFD000;
}

.booking-form button{
    width:100%;
    height:55px;
    border:none;
    border-radius:50px;
    background:#FFD000;
    color:#000;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}

.booking-form button:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 30px rgba(255,208,0,.35);
}

#result{
    color:#FFD000;
    font-weight:600;
    margin:10px 0;
}

@media(max-width:768px){

.booking-form{
    padding:20px;
}

.booking-form h2{
    font-size:22px;
}

}
/* ================= CAR SECTION ================= */

.car-section{
    padding:70px 20px;
    background:#111;
    color:#fff;
    text-align:center;
}

.car-section h2{
    font-size:34px;
    margin-bottom:35px;
}

.car-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:25px;
}

.car-card{

    background:#1b1b1b;
    border-radius:18px;
    padding:25px;
    transition:.35s;
    box-shadow:0 10px 25px rgba(0,0,0,.3);
}

.car-card:hover{

    transform:translateY(-10px);
    box-shadow:0 20px 35px rgba(255,152,0,.35);
}

.car-card img{

    width:100%;
    height:170px;
    object-fit:contain;
    margin-bottom:15px;
}

.car-card h3{

    color:#FFC107;
    margin-bottom:10px;
}

.price{

    color:#25D366;
    font-size:28px;
    font-weight:bold;
}

.car-card ul{

    list-style:none;
    margin-top:15px;
}

.car-card li{

    padding:8px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
}

/*==========================
GOOGLE REVIEW
==========================*/

.google-review{

margin-top:25px;

text-align:center;

}

.google-review a{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:14px 26px;

background:#25D366;

color:#fff;

font-weight:700;

border-radius:50px;

transition:.3s;

}

.google-review a:hover{

transform:translateY(-3px);

box-shadow:0 10px 25px rgba(37,211,102,.35);

}

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

@media(max-width:768px){

.hero{

padding:60px 0 40px;

}

.hero-grid{

grid-template-columns:1fr;

gap:30px;

}

.hero-content{

order:2;

text-align:center;

}

.hero-right{

order:1;

}

.hero-content h1{

font-size:34px;

}

.hero-content p{

font-size:16px;

}

.hero-info{

justify-content:center;

}

.hero-info div{

min-width:110px;

padding:15px;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons .btn-primary,

.hero-buttons .btn-success{

width:100%;

}

.booking-card{

padding:25px;

margin-top:20px;

}

.google-review a{

width:100%;

}

}

/*==================================================
 DROP TAXI VILLUPURAM
 STYLE.CSS V3.0
 PART 3 - FEATURES + FLEET + SERVICES
==================================================*/

/*==========================
FEATURES SECTION
==========================*/

.features-section{

padding:80px 0;

background:#f8f9fa;

}

.features-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

}

.feature-box{

background:#fff;

padding:30px;

border-radius:20px;

text-align:center;

box-shadow:var(--shadow);

transition:var(--transition);

border-top:5px solid var(--primary);

}

.feature-box:hover{

transform:translateY(-8px);

}

.feature-box i{

font-size:45px;

color:var(--primary);

margin-bottom:18px;

}

.feature-box h3{

font-size:22px;

margin-bottom:12px;

color:#111;

}

.feature-box p{

font-size:15px;

color:#666;

margin:0;

}

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

.fleet-section{

padding:90px 0;

background:#111;

}

.section-title{

text-align:center;

margin-bottom:50px;

}

.section-title h2{

font-size:40px;

color:#fff;

margin-bottom:15px;

}

.section-title p{

color:#ccc;

font-size:17px;

}

.fleet-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

gap:30px;

}

.fleet-card{

background:#1b1b1b;

padding:25px;

border-radius:20px;

text-align:center;

transition:var(--transition);

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

}

.fleet-card:hover{

transform:translateY(-10px);

box-shadow:0 18px 40px rgba(255,193,7,.30);

}

.fleet-card img{

width:100%;

height:170px;

object-fit:contain;

margin-bottom:20px;

}

.fleet-card h3{

color:#fff;

font-size:26px;

margin-bottom:10px;

}

.fleet-card .price{

font-size:28px;

font-weight:700;

color:var(--primary);

margin-bottom:20px;

}

.fleet-card ul{

list-style:none;

padding:0;

margin:0 0 20px;

}

.fleet-card li{

padding:10px 0;

color:#ddd;

border-bottom:1px solid rgba(255,255,255,.08);

}

.fleet-card li:last-child{

border-bottom:none;

}

.fleet-card .btn-primary{

width:100%;

}

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

.why-section{

padding:90px 0;

background:linear-gradient(135deg,#ff9800,#ffb300);

}

.why-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:25px;

}

.why-box{

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

backdrop-filter:blur(8px);

padding:30px;

border-radius:20px;

text-align:center;

transition:var(--transition);

color:#fff;

}

.why-box:hover{

background:#fff;

color:#111;

transform:translateY(-8px);

}

.why-box i{

font-size:45px;

margin-bottom:18px;

}

.why-box h3{

font-size:24px;

margin-bottom:12px;

}

.why-box p{

color:inherit;

}

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

.services-section{

padding:90px 0;

background:#fff;

}

.services-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}

.service-card{

background:#fff;

border-radius:20px;

overflow:hidden;

box-shadow:var(--shadow);

transition:var(--transition);

}

.service-card:hover{

transform:translateY(-8px);

}

.service-header{

background:var(--primary);

padding:18px;

text-align:center;

}

.service-header h3{

margin:0;

color:#111;

font-size:24px;

}

.service-body{

padding:25px;

}

.service-body ul{

list-style:none;

padding:0;

margin:0;

}

.service-body li{

padding:12px 0;

border-bottom:1px solid #eee;

font-size:16px;

color:#444;

}

.service-body li:last-child{

border-bottom:none;

}

.service-body i{

color:var(--primary);

margin-right:10px;

}

/*==========================
SECTION CTA
==========================*/

.section-cta{

margin-top:45px;

text-align:center;

}

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

@media(max-width:992px){

.features-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.features-section,
.fleet-section,
.why-section,
.services-section{

padding:60px 0;

}

.features-grid,
.fleet-grid,
.why-grid,
.services-grid{

grid-template-columns:1fr;

}

.section-title h2{

font-size:30px;

}

.section-title p{

font-size:16px;

}

.feature-box,
.fleet-card,
.why-box,
.service-card{

padding:22px;

}

.fleet-card img{

height:150px;

}

}

/*==================================================
 DROP TAXI VILLUPURAM
 STYLE.CSS V3.0
 PART 4 - ROUTES + REVIEWS + FAQ + SEO
==================================================*/

/*==========================
POPULAR ROUTES
==========================*/

.routes-section{

padding:90px 0;



}

.routes-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:30px;

}

.route-card{

background:#fff;

border-radius:20px;

overflow:hidden;

box-shadow:var(--shadow);

transition:var(--transition);

border-top:5px solid var(--primary);

}

.route-card:hover{

transform:translateY(-10px);

}

.route-image{

height:220px;

overflow:hidden;

}

.route-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.4s;

}

.route-card:hover img{

transform:scale(1.08);

}

.route-body{

padding:25px;

}

.route-body h3{

font-size:26px;

color:#111;

margin-bottom:15px;

}

.route-meta{

display:flex;

justify-content:space-between;

margin-bottom:18px;

font-size:15px;

color:#666;

}

.route-price{

font-size:34px;

font-weight:700;

color:var(--primary);

margin-bottom:20px;

}

.route-buttons{

display:flex;

gap:12px;

}

.route-buttons .btn-primary,

.route-buttons .btn-success{

flex:1;

justify-content:center;

}

/*==========================
GOOGLE REVIEWS
==========================*/

.review-section{

padding:90px 0;

background:#111;

color:#fff;

}

.review-title{

text-align:center;

margin-bottom:50px;

}

.review-title h2{

font-size:40px;

color:#fff;

}

.review-title p{

color:#ccc;

}

.review-slider{

overflow:hidden;

position:relative;

}

.review-track{

display:flex;

gap:25px;

animation:reviewScroll 35s linear infinite;

}

.review-card{

min-width:340px;

background:#1b1b1b;

padding:30px;

border-radius:20px;

transition:.3s;

}

.review-card:hover{

background:var(--secondary);

}

.review-stars{

color:#FFD700;

font-size:22px;

margin-bottom:15px;

}

.review-card p{

color:#ddd;

}

.review-card h4{

margin-top:18px;

color:#fff;

}

.google-review-btn{

margin-top:40px;

text-align:center;

}

.google-review-btn a{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 35px;

background:#25D366;

color:#fff;

border-radius:50px;

font-weight:700;

}

.google-review-btn a:hover{

transform:translateY(-3px);

}

@keyframes reviewScroll{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-50%);

}

}

/*==========================
FAQ
==========================*/

.faq-section{

padding:90px 0;

background:#fff;

}

.faq-wrapper{

max-width:1200px;

margin:auto;

}

.faq-item{

margin-bottom:20px;

border-radius:15px;

overflow:hidden;

box-shadow:var(--shadow);

}

.faq-question{

background:var(--primary);

padding:18px 22px;

cursor:pointer;

font-size:18px;

font-weight:700;

display:flex;

justify-content:space-between;

align-items:center;

}

.faq-answer{

display:none;

padding:22px;

background:#fff;

line-height:1.8;

color:#555;

}

.faq-item.active .faq-answer{

display:block;

}

/*==========================
SEO CONTENT
==========================*/

.seo-section{

padding:90px 0;

background:#f7f7f7;

}

.seo-box{

background:#fff;

padding:45px;

border-radius:22px;

box-shadow:var(--shadow);

border-left:6px solid var(--primary);

}

.seo-box h2{

font-size:38px;

margin-bottom:20px;

color:#111;

}

.seo-box h3{

margin-top:35px;

margin-bottom:15px;

font-size:28px;

color:#222;

}

.seo-box p{

font-size:17px;

line-height:2;

text-align:justify;

color:#555;

}

.seo-box ul{

margin-top:20px;

padding-left:22px;

}

.seo-box li{

margin-bottom:12px;

line-height:1.8;

}

.seo-box strong{

color:#000;

}

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

@media(max-width:768px){

.routes-section,

.review-section,

.faq-section,

.seo-section{

padding:60px 0;

}

.routes-grid{

grid-template-columns:1fr;

}

.route-buttons{

flex-direction:column;

}

.review-card{

min-width:280px;

}

.review-title h2{

font-size:30px;

}

.seo-box{

padding:25px;

}

.seo-box h2{

font-size:28px;

}

.seo-box h3{

font-size:22px;

}

.seo-box p{

text-align:left;

font-size:16px;

}

.faq-question{

font-size:16px;

}

}

/*==================================================
 DROP TAXI VILLUPURAM
 STYLE.CSS V3.0
 PART 5 - FOOTER + FINAL
==================================================*/

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

.footer{
    background:#111;
    color:#fff;
    padding:80px 0 25px;
}

.footer-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:35px;
}

.footer-box h3,
.footer-box h4{
    color:var(--primary);
    margin-bottom:20px;
    font-size:24px;
}

.footer-box p{
    color:#bbb;
    line-height:1.9;
}

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

.footer-box ul li{
    margin-bottom:12px;
}

.footer-box a{
    color:#ddd;
    transition:var(--transition);
}

.footer-box a:hover{
    color:var(--primary);
    padding-left:8px;
}

.footer-logo{
    width:90px;
    margin-bottom:20px;
}

.footer-contact a{
    display:block;
    margin-bottom:10px;
}

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

/*==========================
SERVICE LOCATIONS
==========================*/

.footer-locations{
    margin-top:35px;
}

.footer-locations h3{
    color:var(--primary);
    margin-bottom:20px;
}

.footer-locations a{
    display:inline-block;
    margin:6px;
    padding:10px 18px;
    border-radius:50px;
    background:#222;
    color:#fff;
}

.footer-locations a:hover{
    background:var(--primary);
    color:#111;
}

/*==========================
FLOATING BUTTONS
==========================*/

.floating-call-btn,
.floating-whatsapp-btn{

position:fixed;

width:65px;

height:65px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

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

z-index:99999;

animation:floatButton 2s infinite;

}

.floating-call-btn{

left:18px;

bottom:100px;


}

.floating-whatsapp-btn{

right:18px;

bottom:100px;

}

.floating-call-btn i,
.floating-whatsapp-btn i{

font-size:28px;

}

.floating-call-btn:hover,
.floating-whatsapp-btn:hover{

transform:scale(1.08);

}

/*==========================
SCROLL TO TOP
==========================*/

.scroll-top{

position:fixed;

right:18px;

bottom:180px;

width:50px;

height:50px;

border-radius:50%;

background:var(--primary);

color:#111;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.3s;

z-index:9999;

}

.scroll-top.active{

opacity:1;

visibility:visible;

}

.scroll-top:hover{

background:var(--secondary);

color:#fff;

}

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

.loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:#fff;

display:flex;

align-items:center;

justify-content:center;

z-index:999999;

transition:.5s;

}

.loader.hidden{

opacity:0;

visibility:hidden;

}

.loader span{

width:70px;

height:70px;

border:6px solid #eee;

border-top:6px solid var(--primary);

border-radius:50%;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/*==========================
COMMON ANIMATIONS
==========================*/

.fade-up{

animation:fadeUp .8s ease;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

.zoom{

animation:zoom .8s ease;

}

@keyframes zoom{

0%{

opacity:0;

transform:scale(.8);

}

100%{

opacity:1;

transform:scale(1);

}

}

@keyframes floatButton{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

/*==========================
UTILITY CLASSES
==========================*/

.text-center{

text-align:center;

}

.text-white{

color:#fff;

}

.text-dark{

color:#111;

}

.bg-light{

background:#f8f9fa;

}

.bg-dark{

background:#111;

}

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}
.mt-5{margin-top:50px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}
.mb-5{margin-bottom:50px;}

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

@media(max-width:992px){

.footer-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.footer{

text-align:center;

padding:60px 0 20px;

}

.footer-grid{

grid-template-columns:1fr;

gap:25px;

}

.footer-logo{

margin:auto auto 20px;

}

.footer-locations a{

display:block;

width:100%;

margin:8px 0;

}

.floating-call-btn{

left:12px;

bottom:90px;

width:58px;

height:58px;

}

.floating-whatsapp-btn{

right:12px;

bottom:90px;

width:58px;

height:58px;

}

.scroll-top{

right:12px;

bottom:160px;

}

}

/*==========================
PRINT
==========================*/

@media print{

.lux-header,
.footer,
.floating-call-btn,
.floating-whatsapp-btn,
.scroll-top{

display:none!important;

}

body{

padding:0;

background:#fff;

color:#000;

}

}

/* ==========================
   POPULAR ROUTES
========================== */

.routes-section{
    padding:80px 20px;
    background:#0b0b0b;
}

.section-title{
    text-align:center;
    margin-bottom:50px;
}

.section-title h2{
    color:#FFD000;
    font-size:42px;
    font-weight:700;
    margin-bottom:10px;
}

.section-title p{
    color:#ccc;
    font-size:18px;
}

.routes-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:25px;
}

.route-box{
    display:block;
    text-decoration:none;
    background:#1a1a1a;
    border:1px solid rgba(255,208,0,.15);
    border-radius:18px;
    padding:30px;
    transition:.35s;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
}

.route-box:hover{
    transform:translateY(-8px);
    border-color:#FFD000;
    box-shadow:0 20px 40px rgba(255,208,0,.15);
}

.route-box h3{
    color:#fff;
    font-size:22px;
    margin-bottom:15px;
}

.route-box span{
    display:inline-block;
    background:#FFD000;
    color:#000;
    padding:8px 16px;
    border-radius:30px;
    font-weight:700;
    margin-bottom:15px;
}

.route-box small{
    display:block;
    color:#FFD000;
    font-size:15px;
    font-weight:600;
}

.route-box:hover h3{
    color:#FFD000;
}

/* Mobile */

@media(max-width:768px){

.routes-section{
    padding:60px 15px;
}

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

.section-title p{
    font-size:16px;
}

.route-box{
    padding:22px;
}

.route-box h3{
    font-size:20px;
}

}

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

.services-section{
    padding:80px 20px;
    background:#111;
}

.services-title{
    text-align:center;
    margin-bottom:50px;
}

.services-title h2{
    color:#FFD000;
    font-size:42px;
    font-weight:700;
    margin-bottom:10px;
}

.services-title p{
    color:#ccc;
    font-size:18px;
}

.services-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:25px;
}

.service-card{
    background:#1a1a1a;
    border:1px solid rgba(255,208,0,.15);
    border-radius:18px;
    padding:30px;
    text-align:center;
    transition:.35s;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
}

.service-card:hover{
    transform:translateY(-8px);
    border-color:#FFD000;
    box-shadow:0 15px 35px rgba(255,208,0,.20);
}

.service-card i{
    font-size:50px;
    color:#FFD000;
    margin-bottom:20px;
}

.service-card h3{
    color:#fff;
    font-size:24px;
    margin-bottom:15px;
}

.service-card p{
    color:#cfcfcf;
    font-size:16px;
    line-height:1.8;
}

/* Mobile */

@media(max-width:768px){

.services-section{
    padding:60px 15px;
}

.services-title h2{
    font-size:30px;
}

.services-title p{
    font-size:16px;
}

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

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

}
/*==========================
END
==========================*/