/* ===========================
   GLOBAL STYLES
=========================== */
:root{

--primary:#d71920;

--secondary:#1c1c1c;

--light:#f8f9fa;

--white:#ffffff;

}
/* Mobile vehicle lookup */
@media (max-width: 767.98px) {

    #findVehicle {
        position: relative;
        z-index: 10;
        pointer-events: auto;
        min-height: 48px;
        cursor: pointer;
    }

    #registration {
        position: relative;
        z-index: 10;
    }

    #findVehicle i {
        pointer-events: none;
    }

}
html,
body{
    height:100%;
    margin:0;
    padding:0;
}

body{

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

background:#f8f9fa;

color:#333;

line-height:1.8;

}

/* Main content takes remaining space */
main{
    flex:1;
}


.top-bar{

background:#dc3545;

color:white;

padding:10px 0;

font-size:14px;

}

.navbar{

position:sticky;

top:0;

z-index:999;

background:white!important;

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

}

.navbar-brand{

font-size:30px;

font-weight:700;

color:#dc3545!important;

}

.nav-link{

font-weight:600;

margin-left:20px;

color:#333!important;

transition:.3s;

}

.nav-link:hover{

color:#dc3545!important;

}

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    color:#fff;

    background-image:
        linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),
        url('../images/hero/banner.jpg');

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

}

.hero::before{

content:'';

position:absolute;

left:0;

right:0;

top:0;

bottom:0;

background:rgba(0,0,0,.65);

}

.hero .container{

position:relative;

z-index:2;

}

.hero h1{

font-size:68px;

font-weight:800;

line-height:1.2;

margin-bottom:25px;

}
.hero-text{

font-size:22px;

max-width:650px;

margin-bottom:40px;

}

.hero h2{

font-size:36px;

margin-bottom:20px;

color:#d60000;

}

.hero p{

font-size:18px;

margin-bottom:30px;

}

.services-home{

padding:80px 0;

}

.service-box{

background:#fff;

padding:35px;

border-radius:16px;

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

transition:.35s;

height:100%;

border-top:4px solid transparent;

}

.service-box:hover{

border-color:var(--primary);

transform:translateY(-10px);

}



.why-us{

padding:80px 0;

background:#f8f8f8;

text-align:center;

}

.why-us h5{

padding:30px;

background:white;

border-radius:8px;

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

}
.hero .badge{
    font-size:15px;
    padding:10px 20px;
}



section{
    overflow:hidden;
}
.emergency-banner{

    background:#dc3545;

    color:#fff;

    padding:80px 0;

    margin-top:0;

}

.emergency-banner h2{

    font-weight:700;

    margin-bottom:20px;

}

.emergency-banner p{

    margin:0;

    font-size:18px;

}

.emergency-banner .btn{

    padding:15px 35px;

    border-radius:50px;

    font-weight:600;

}

.stats{
    background:#212529;
    color:#fff;
    padding:60px 0;
}

.stats h2{
    font-size:45px;
    font-weight:bold;
}

.cta{
    padding:80px 0;
}

.footer{

    background:#111;

    color:#fff;

    padding:70px 0 20px;

}

.footer-logo{

    height:70px;

    margin-bottom:20px;

}

.footer h4{

    margin-bottom:20px;

    color:#fff;

}

.footer ul{

    padding-left:0;

}

.footer li{

    margin-bottom:10px;

}

.footer a{

    color:#ddd;

    text-decoration:none;

}

.footer a:hover{

    color:#dc3545;

}

.call-btn,
.whatsapp-btn,
#topBtn{
    position:fixed;
    right:20px;
    width:55px;
    height:55px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    text-decoration:none;
    z-index:9999;
    font-size:24px;
}

.call-btn{
    bottom:160px;
    background:#dc3545;
}

.whatsapp-btn{
    bottom:90px;
    background:#25D366;
}

#topBtn{
    bottom:20px;
    background:#212529;
    border:none;
    cursor:pointer;
}
.btn-danger{

padding:14px 35px;

border-radius:50px;

font-weight:600;

transition:.3s;

}

.btn-danger:hover{

transform:translateY(-4px);

box-shadow:0 10px 30px rgba(220,53,69,.4);

}
.feature-card{

    background:#fff;

    border-radius:15px;

    padding:35px;

    text-align:center;

    height:100%;

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

    transition:all .3s ease;

}

.feature-card:hover{

    transform:translateY(-8px);

}

.feature-icon{

    width:80px;

    height:80px;

    background:#dc3545;

    color:#fff;

    margin:0 auto 25px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:38px;

}

.feature-card h4{

    font-weight:700;

    margin-bottom:15px;

}
.stat-box{

background:white;

color:#333;

padding:40px;

text-align:center;

border-radius:10px;

margin:15px;

}

.stat-box h2{

font-size:50px;

color:#dc3545;

font-weight:700;

}
.features-section{
    position:relative;
    margin-top:-80px;
    margin-bottom:60px;
    z-index:10;
}

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title span{

color:var(--primary);

font-weight:700;

letter-spacing:2px;

font-size:14px;

}

.section-title h2{

font-size:44px;

font-weight:700;

margin-top:15px;

}

.section-title p{

max-width:700px;

margin:auto;

}
.logo{
    height:90px;
    width:auto;
}
.testimonial-card{

    background:#fff;

    border-radius:15px;

    padding:35px;

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

    height:100%;

    transition:.3s;

}

.testimonial-card:hover{

    transform:translateY(-8px);

}

.stars{

    color:#ffc107;

    font-size:22px;

    margin-bottom:15px;

}
.page-banner{

background:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),
url('../images/hero/banner.jpg');

background-size:cover;

background-position:center;

padding:120px 0;

color:#fff;

text-align:center;

}

.page-banner h1{

font-size:56px;

font-weight:700;

}

.page-banner p{

font-size:20px;

opacity:.9;

}
/* ===========================
   SERVICES PAGE
=========================== */

.page-banner{

background:#dc3545;

color:#fff;

padding:100px 0;

text-align:center;

}

.page-banner h1{

font-size:52px;

font-weight:700;

margin-bottom:20px;

}

.page-banner p{

font-size:20px;

}

.service-card{

background:#fff;

border-radius:15px;

overflow:hidden;

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

height:100%;

transition:.3s;

}

.service-card:hover{

transform:translateY(-10px);

}

.service-card img{

width:100%;

height:220px;

object-fit:cover;

}

.service-content{

padding:25px;

}

.service-content h4{

font-size:22px;

font-weight:700;

margin-bottom:15px;

}

.service-content p{

min-height:90px;

}

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title span{

color:#dc3545;

font-weight:700;

letter-spacing:2px;

}

.section-title h2{

margin-top:15px;

font-size:42px;

font-weight:700;

}
/* ===========================
   GALLERY
=========================== */

.gallery-card{

overflow:hidden;

border-radius:15px;

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

background:#fff;

transition:.3s;

}

.gallery-card img{

width:100%;

height:260px;

object-fit:cover;

transition:.4s;

}

.gallery-card:hover img{

transform:scale(1.1);

}

.gallery-card:hover{

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

}
.form-control{

padding:15px;

border-radius:10px;

border:1px solid #ddd;

box-shadow:none;

}

.form-control:focus{

border-color:#dc3545;

box-shadow:0 0 0 0.2rem rgba(220,53,69,.2);

}

textarea{

resize:none;

}
.gallery-card{

background:#fff;

border-radius:15px;

overflow:hidden;

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

transition:.35s;

height:100%;

}

.gallery-card:hover{

transform:translateY(-8px);

}

.gallery-card img{

width:100%;

height:260px;

object-fit:cover;

transition:.4s;

}

.gallery-card:hover img{

transform:scale(1.08);

}

.gallery-content{

padding:20px;

text-align:center;

}

.gallery-content h5{

margin:0;

font-weight:600;

}
html{
    scroll-behavior:smooth;
}


/* =========================================
   BOOKING PAGE
========================================= */

.booking-step {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #dc3545;
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 17px;
}


/* Vehicle result */

.vehicle-result {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-left: 4px solid #198754;
    border-radius: 6px;
    padding: 20px;
}


/* Service options */

.service-option {
    display: block;
    height: 100%;
    cursor: pointer;
}


.service-option input {
    position: absolute;
    opacity: 0;
}


.service-option-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    min-height: 150px;

    padding: 25px 15px;

    border: 2px solid #e5e5e5;
    border-radius: 8px;

    background: #fff;

    transition: all 0.2s ease;
}


.service-option-content i {
    font-size: 30px;
    color: #dc3545;
    margin-bottom: 12px;
}


.service-option-content strong {
    margin-bottom: 6px;
}


.service-option-content small {
    color: #777;
}


/* Selected service */

.service-option input:checked + .service-option-content {
    border-color: #dc3545;
    background: #fff5f5;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}


/* Hover */

.service-option:hover .service-option-content {
    border-color: #dc3545;
}


/* Booking submit */

.booking-submit {
    padding: 20px 0 10px;
}


.booking-submit h3 {
    margin-bottom: 8px;
}
@media (max-width: 767.98px) {
    #findVehicle {
        position: relative;
        z-index: 10000;
        pointer-events: auto;
        touch-action: manipulation;
    }

    #findVehicle i {
        pointer-events: none;
    }
}
/* =========================================
   VEHICLE SEARCH - MOBILE RESPONSIVE
========================================= */

.vehicle-search-btn {
    min-height: 48px;
    width: 100%;
    position: relative;
    z-index: 20;
    pointer-events: auto;
    touch-action: manipulation;
}

.vehicle-search-btn i {
    pointer-events: none;
}

.vehicle-search-btn span {
    pointer-events: none;
}


@media (max-width: 767.98px) {

    .vehicle-search-row {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .vehicle-search-row > div {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .vehicle-search-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 52px;
        width: 100%;
        position: relative;
        z-index: 1000;
        pointer-events: auto;
        touch-action: manipulation;
    }

}

    .traffic-page {
        background: #f5f6f8;
        min-height: calc(100vh - 70px);
    }

    .stat-card {

        border: 0;
        border-radius: 16px;

        box-shadow:
            0 4px 18px rgba(0,0,0,.06);

        transition:
            transform .2s ease,
            box-shadow .2s ease;

    }

    .stat-card:hover {

        transform: translateY(-2px);

        box-shadow:
            0 7px 22px rgba(0,0,0,.09);

    }

    .stat-icon {

        width: 48px;
        height: 48px;

        border-radius: 12px;

        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 20px;

        background: #f1f3f5;

    }

    .stat-number {

        font-size: 32px;
        line-height: 1;

        font-weight: 700;

        margin-top: 10px;

    }

    .dashboard-card {

        border: 0;
        border-radius: 16px;

        box-shadow:
            0 4px 18px rgba(0,0,0,.06);

    }

    .dashboard-card .card-body {

        padding: 24px;

    }

    .source-bar {

        height: 8px;

        background: #e9ecef;

        border-radius: 20px;

        overflow: hidden;

    }

    .source-bar-inner {

        height: 100%;

        background: #212529;

        border-radius: 20px;

    }

    .traffic-table th {

        font-size: 13px;

        color: #6c757d;

        font-weight: 600;

        white-space: nowrap;

    }

    .traffic-table td {

        vertical-align: middle;

    }

    .empty-state {

        padding: 30px 10px;

        text-align: center;

        color: #6c757d;

    }

    .range-select {

        min-width: 170px;

    }

    .page-path {

        max-width: 450px;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

        display: inline-block;

    }