/* ===== CSS VARIABLES ===== */
    :root {
        /* New Gradient Colors - as specified */
        --gradient-dark: #0c3483;        /* Dark blue at 0% */
        --gradient-mid: #6b8cce;          /* Medium blue at 100% */
        --gradient-light: #a2b6df;         /* Light blue at 100% */
        --pure-white: #FFFFFF;              /* White for text and backgrounds */

        /* Solid colors derived from gradient */
        --dark-blue: #0c3483;               /* Dark blue for text and dark backgrounds */
        --medium-blue: #6b8cce;              /* Medium blue for accents */
        --light-blue: #a2b6df;                /* Light blue for light accents */
        
        /* Light variations for backgrounds */
        --very-light-blue: #e8eef9;           /* Very light (mix of #a2b6df + white) */
        --soft-blue: #d1ddf2;                  /* Soft blue background */

        /* Gradients - using the specified colors with to top direction */
        --gradient-primary: linear-gradient(to top, #0c3483 0%, #a2b6df 100%, #6b8cce 100%, #a2b6df 100%);
        --gradient-reverse: linear-gradient(to bottom, #0c3483 0%, #a2b6df 100%, #6b8cce 100%, #a2b6df 100%);
        --gradient-soft: linear-gradient(135deg, #0c3483, #6b8cce, #a2b6df);
        --gradient-light: linear-gradient(to top, #a2b6df, #6b8cce, #0c3483);
        
        /* Map to existing variable names */
        --primary-color: var(--dark-blue);
        --secondary-color: var(--medium-blue);
        --accent-color: var(--light-blue);
        --dark-color: var(--dark-blue);
        --light-color: var(--pure-white);
        --sky-light: var(--very-light-blue);
        --success-blue: var(--medium-blue);
        --success-dark: var(--dark-blue);
        --success-light: var(--light-blue);
        --warning-color: var(--dark-blue);
        --warning-dark: var(--dark-blue);
        --warning-light: var(--very-light-blue);

        /* Border colors */
        --border-light: rgba(162, 182, 223, 0.2);    /* #a2b6df with opacity */
        --border-medium: rgba(107, 140, 206, 0.2);    /* #6b8cce with opacity */
        --border-dark: rgba(12, 52, 131, 0.2);        /* #0c3483 with opacity */

        /* Shadows */
        --shadow-color: rgba(12, 52, 131, 0.15);       /* Dark blue shadow */
        --shadow-medium: rgba(107, 140, 206, 0.2);     /* Medium blue shadow */
        --shadow-light: rgba(162, 182, 223, 0.25);     /* Light blue shadow */
    }

    /* ===== BASE STYLES ===== */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Poppins', sans-serif;
        color: var(--dark-blue);                         /* Dark blue text (#0c3483) */
        overflow-x: hidden;
        background: var(--pure-white);                    /* White background */
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        color: var(--dark-blue);                          /* Dark blue headings (#0c3483) */
    }

    /* ===== UTILITY CLASSES ===== */
    .object-fit-cover {
        object-fit: cover;
    }

    .backdrop-blur {
        backdrop-filter: blur(10px);
    }

    .min-vh-50 {
        min-height: 50vh;
    }

    /* Background Opacity - using dark blue */
    .bg-dark.bg-opacity-60 {
        background-color: rgba(12, 52, 131, 0.6);         /* #0c3483 with opacity */
    }

    .bg-dark.bg-opacity-40 {
        background-color: rgba(12, 52, 131, 0.4);
    }

    .bg-opacity-15 {
        --bs-bg-opacity: 0.15;
    }

    /* ===== CUSTOM SCROLLBAR ===== */
    ::-webkit-scrollbar {
        width: 10px;
    }

    ::-webkit-scrollbar-track {
        background: var(--very-light-blue);                /* Very light blue track */
    }

    ::-webkit-scrollbar-thumb {
        background: var(--gradient-primary);                /* Gradient thumb (to top) */
        border-radius: 5px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--gradient-reverse);                /* Reverse gradient on hover */
    }

    /* ===== NAVBAR ===== */
    .navbar-earth {
        background: rgba(255, 255, 255, 0.95);              /* White background */
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 30px var(--shadow-light);         /* Light blue shadow */
        transition: all 0.3s ease;
        padding: 1rem 0;
    }

    .navbar-earth.scrolled {
        padding: 0.5rem 0;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 4px 30px var(--shadow-color);         /* Dark blue shadow */
    }

    .navbar-brand {
        font-size: 1.8rem;
        font-weight: 800;
        background: var(--gradient-primary);                 /* Gradient text */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        letter-spacing: -0.5px;
    }

    .nav-link {
        font-weight: 500;
        color: var(--dark-blue) !important;                  /* Dark blue nav links (#0c3483) */
        position: relative;
        padding: 0.5rem 1rem !important;
        transition: all 0.3s ease;
    }

    .nav-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) scaleX(0);
        width: 80%;
        height: 2px;
        background: var(--gradient-primary);                  /* Gradient underline (to top) */
        transition: transform 0.3s ease;
    }

    .nav-link:hover::after,
    .nav-link.active::after {
        transform: translateX(-50%) scaleX(1);
    }

    /* ===== HERO SECTIONS ===== */
    .hero-section,
    .page-header,
    .location-hero,
    .tour-hero,
    .rent-hero,
    .car-details-hero {
        background-size: cover;
        background-position: center;
        margin-top: -76px;
    }

    .hero-section,
    .page-header,
    .location-hero {
        min-height: 60vh;
    }

    .rent-hero {
        min-height: 70vh;
    }

    .car-details-hero {
        min-height: 50vh;
    }

    .tour-hero {
        min-height: 40vh;
    }

    .page-header h1,
    .location-hero h1 {
        font-size: 3.5rem;
        color: var(--pure-white);                             /* White text on hero */
        text-shadow: 2px 2px 4px rgba(12, 52, 131, 0.3);      /* Dark blue shadow */
    }

    /* ===== BREADCRUMB ===== */
    .breadcrumb-item+.breadcrumb-item::before {
        color: rgba(255, 255, 255, 0.7);                      /* White breadcrumb */
    }

    .breadcrumb-item a,
    .breadcrumb-item.active {
        color: var(--pure-white) !important;                   /* White text */
    }

    /* ===== CARDS ===== */
    .card {
        background: rgba(255, 255, 255, 0.95);                 /* White background */
        backdrop-filter: blur(10px);
        border: 1px solid var(--border-light);                 /* Light blue border */
        box-shadow: 0 8px 32px var(--shadow-light);            /* Light blue shadow */
        border-radius: 15px;
        overflow: hidden;
        transition: all 0.3s ease;
        color: var(--dark-blue);                                /* Dark blue text */
    }

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px var(--shadow-color) !important; /* Dark blue shadow */
    }

    .card-3d {
        transform-style: preserve-3d;
        transform: perspective(1000px) rotateY(0deg);
        transition: transform 0.5s ease;
    }

    .card-3d:hover {
        transform: perspective(1000px) rotateY(5deg) rotateX(2deg);
        box-shadow: 0 30px 50px var(--shadow-color);
    }

    /* Category Cards */
    .category-card {
        transition: all 0.3s ease;
        cursor: pointer;
        border: 1px solid var(--border-light);
        background: var(--pure-white);
        border-radius: 15px;
        overflow: hidden;
        color: var(--dark-blue);
    }

    .category-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px var(--shadow-medium) !important;
        border-color: var(--border-medium);
    }

    .category-card img {
        transition: transform 0.5s ease;
    }

    .category-card:hover img {
        transform: scale(1.1);
    }

    /* Location Cards */
    .location-card {
        transition: all 0.3s ease;
        overflow: hidden;
        border: 1px solid var(--border-light);
        border-radius: 15px;
        background: var(--pure-white);
        color: var(--dark-blue);
    }

    .location-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px var(--shadow-medium) !important;
    }

    .location-card img {
        transition: transform 0.5s ease;
    }

    .location-card:hover img {
        transform: scale(1.05);
    }

    /* Tour Cards */
    .tour-card {
        transition: all 0.3s ease;
        border: 1px solid var(--border-light);
        border-radius: 15px;
        background: var(--pure-white);
        overflow: hidden;
        color: var(--dark-blue);
    }

    .tour-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 30px 60px var(--shadow-medium) !important;
    }

    .tour-card img {
        transition: transform 0.5s ease;
    }

    .tour-card:hover img {
        transform: scale(1.05);
    }

    /* Car Cards */
    .car-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: 1px solid var(--border-medium);
        border-radius: 15px;
        background: var(--pure-white);
        color: var(--dark-blue);
    }

    .car-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px var(--shadow-medium) !important;
    }

    .car-image-container {
        overflow: hidden;
    }

    .car-card:hover .car-image-container img {
        transform: scale(1.05);
        transition: transform 0.5s ease;
    }

    /* Feature Cards/Boxes */
    .feature-card,
    .feature-box {
        transition: transform 0.3s ease;
        border: 1px solid var(--border-light);
        border-radius: 15px;
        background: var(--pure-white);
        color: var(--dark-blue);
    }

    .feature-card:hover,
    .feature-box:hover {
        transform: translateY(-5px);
        border-color: var(--medium-blue);
        box-shadow: 0 10px 20px var(--shadow-medium) !important;
    }

    .feature-icon {
        background: var(--gradient-primary);                  /* Gradient icon background */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-size: 2rem;
    }

    /* Step Cards */
    .step-card {
        transition: transform 0.3s ease;
        color: var(--dark-blue);
    }

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

    .step-number {
        width: 50px;
        height: 50px;
        background: var(--gradient-primary);                  /* Gradient background (to top) */
        color: var(--pure-white);                              /* White text */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 1.5rem;
        box-shadow: 0 4px 10px var(--shadow-color);
    }

    /* Pricing Cards */
    .pricing-card {
        transition: transform 0.3s ease;
        border: 1px solid var(--border-medium);
        border-radius: 15px;
        background: var(--pure-white);
        color: var(--dark-blue);
    }

    .pricing-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px var(--shadow-medium) !important;
    }

    .pricing-card.popular {
        transform: scale(1.05);
        border: 2px solid transparent;
        background: linear-gradient(var(--pure-white), var(--pure-white)) padding-box,
                    var(--gradient-primary) border-box;
        box-shadow: 0 20px 40px var(--shadow-color) !important;
    }

    .pricing-card.popular:hover {
        transform: scale(1.05) translateY(-10px);
    }

    /* Testimonial Cards */
    .testimonial-card {
        transition: transform 0.3s ease;
        border: 1px solid var(--border-medium);
        border-radius: 15px;
        background: var(--pure-white);
        color: var(--dark-blue);
    }

    .testimonial-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px var(--shadow-medium) !important;
    }

    /* ===== BOOKING SIDEBAR ===== */
    .booking-sidebar {
        position: sticky;
        top: 100px;
    }

    /* ===== BADGES & ICONS ===== */
    .eco-badge {
        padding: 0.5rem 1.2rem;
        border-radius: 40px;
        font-size: 0.9rem;
        backdrop-filter: blur(5px);
    }

    .badge.bg-success {
        background: var(--gradient-primary) !important;       /* Gradient background (to top) */
        color: var(--pure-white) !important;                   /* White text */
        padding: 0.5rem 1rem;
        border-radius: 50px;
        font-weight: 500;
        box-shadow: 0 4px 10px var(--shadow-color);
    }

    .badge.bg-light {
        background: linear-gradient(135deg, var(--very-light-blue), var(--pure-white)) !important;
        color: var(--dark-blue) !important;                    /* Dark blue text */
        border: 1px solid var(--border-light);
    }

    .stat-icon {
        width: 60px;
        height: 60px;
        line-height: 60px;
        background: var(--gradient-primary);                   /* Gradient background */
        border-radius: 50%;
        margin: 0 auto;
        color: var(--pure-white);
        font-size: 1.5rem;
        backdrop-filter: blur(5px);
        box-shadow: 0 4px 15px var(--shadow-color);
    }

    .bg-success.bg-opacity-10 {
        background: linear-gradient(135deg, rgba(162, 182, 223, 0.1), rgba(12, 52, 131, 0.1)) !important;
    }

    .feature-tag {
        background: var(--very-light-blue);
        color: var(--dark-blue);
        padding: 0.2rem 0.8rem;
        border-radius: 30px;
        font-size: 0.7rem;
        font-weight: 500;
    }

    /* ===== BUTTONS ===== */
    .btn-earth {
        background: var(--gradient-primary);                   /* Gradient background (to top) */
        color: var(--pure-white);                               /* White text */
        border: none;
        padding: 12px 30px;
        border-radius: 50px;
        font-weight: 600;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
        z-index: 1;
        box-shadow: 0 4px 15px var(--shadow-color);
    }

    .btn-earth::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: var(--gradient-reverse);                   /* Reverse gradient on hover */
        transition: all 0.4s ease;
        z-index: -1;
    }

    .btn-earth:hover::before {
        left: 0;
    }

    .btn-earth:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 30px var(--shadow-color);
        color: var(--pure-white);
    }

    .btn-success {
        background: var(--gradient-primary);
        border: none;
        color: var(--pure-white);
        transition: all 0.3s ease;
    }

    .btn-success:hover {
        background: var(--gradient-reverse);
        transform: translateY(-2px);
        box-shadow: 0 10px 30px var(--shadow-color);
        color: var(--pure-white);
    }

    .btn-outline-success {
        color: var(--dark-blue);
        border: 2px solid transparent;
        background: linear-gradient(var(--pure-white), var(--pure-white)) padding-box,
                    var(--gradient-primary) border-box;
        transition: all 0.3s ease;
        position: relative;
        z-index: 1;
    }

    .btn-outline-success:hover {
        background: var(--gradient-primary);
        color: var(--pure-white);
        transform: translateY(-3px);
        box-shadow: 0 10px 30px var(--shadow-color);
        border: 2px solid transparent;
    }

    .btn-outline-light {
        border: 2px solid rgba(255, 255, 255, 0.8);
        color: var(--pure-white);
        transition: all 0.3s ease;
    }

    .btn-outline-light:hover {
        background: var(--pure-white);
        color: var(--dark-blue);
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
    }

    /* Warning/Accent Buttons - using gradient */
    .btn-warning {
        background: var(--gradient-primary);
        border: none;
        color: var(--pure-white);
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .btn-warning:hover {
        background: var(--gradient-reverse);
        color: var(--pure-white);
        transform: translateY(-2px);
        box-shadow: 0 10px 20px var(--shadow-color);
    }

    .btn-outline-warning {
        color: var(--dark-blue);
        border: 2px solid transparent;
        background: linear-gradient(var(--pure-white), var(--pure-white)) padding-box,
                    var(--gradient-primary) border-box;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .btn-outline-warning:hover {
        background: var(--gradient-primary);
        color: var(--pure-white);
        transform: translateY(-2px);
        border: 2px solid transparent;
    }

    /* ===== FORM CONTROLS ===== */
    .form-control,
    .form-select {
        border: 2px solid var(--very-light-blue);
        padding: 0.75rem 1rem;
        transition: all 0.3s ease;
        border-radius: 10px;
        color: var(--dark-blue);
    }

    .form-control:focus,
    .form-select:focus {
        border-color: transparent;
        box-shadow: 0 0 0 3px rgba(12, 52, 131, 0.25);
        outline: none;
        background: linear-gradient(var(--pure-white), var(--pure-white)) padding-box,
                    var(--gradient-primary) border-box;
        border: 2px solid transparent;
    }

    .rounded-pill-start {
        border-radius: 50px 0 0 50px !important;
        border: 2px solid var(--very-light-blue);
        border-right: none;
    }

    .rounded-pill-end {
        border-radius: 0 50px 50px 0 !important;
        background: var(--gradient-primary);
        color: var(--pure-white);
        font-weight: 600;
        border: none;
    }

    /* Rent/Car Form Controls */
    .rent-form .form-control,
    .rent-form .form-select,
    .car-details .form-control {
        border: 1px solid var(--border-medium);
        padding: 10px 15px;
    }

    .rent-form .form-control:focus,
    .rent-form .form-select:focus,
    .car-details .form-control:focus {
        border-color: transparent;
        box-shadow: 0 0 0 3px rgba(12, 52, 131, 0.25);
        background: linear-gradient(var(--pure-white), var(--pure-white)) padding-box,
                    var(--gradient-primary) border-box;
        border: 2px solid transparent;
    }

    /* ===== MODAL ===== */
    .modal-content {
        border: none;
        border-radius: 20px;
        overflow: hidden;
        background: var(--pure-white);
        color: var(--dark-blue);
    }

    .modal-header {
        border-bottom: none;
        padding: 1.5rem;
        background: linear-gradient(135deg, var(--very-light-blue), var(--pure-white));
    }

    .bg-success {
        background: var(--gradient-primary) !important;
    }

    .btn-close-white {
        filter: brightness(0) invert(1);
        opacity: 0.8;
    }

    .btn-close-white:hover {
        opacity: 1;
    }

    /* ===== ACCORDION ===== */
    .accordion-button:not(.collapsed) {
        background: var(--gradient-primary);
        color: var(--pure-white);
    }

    .accordion-button:focus {
        box-shadow: 0 0 0 3px rgba(12, 52, 131, 0.25);
        border-color: transparent;
    }

    /* ===== GALLERY ===== */
    .ratio-16x9 {
        border-radius: 20px;
        overflow: hidden;
    }

    .gallery-thumbnail {
        cursor: pointer;
        transition: opacity 0.3s ease;
    }

    .gallery-thumbnail:hover {
        opacity: 0.8;
    }

    /* ===== FOOTER ===== */
    .footer-earth {
        background: linear-gradient(to top, #0c3483, #6b8cce, #a2b6df);
        color: var(--pure-white);
        position: relative;
        overflow: hidden;
    }

    .footer-earth::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent, #a2b6df, #6b8cce, #0c3483, transparent);
        animation: slide 3s linear infinite;
    }

    .footer-link {
        color: var(--pure-white);
        text-decoration: none;
        transition: all 0.3s ease;
        display: inline-block;
        position: relative;
        padding-left: 20px;
    }

    .footer-link::before {
        content: '→';
        position: absolute;
        left: -5px;
        opacity: 0;
        transition: all 0.3s ease;
        color: #a2b6df;
    }

    .footer-link:hover {
        color: #a2b6df;
        transform: translateX(8px);
        text-shadow: 0 0 8px rgba(162, 182, 223, 0.5);
    }

    .footer-link:hover::before {
        opacity: 1;
        left: -5px;
    }

    .social-icon {
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--pure-white);
        transition: all 0.3s ease;
        text-decoration: none;
        backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .social-icon:hover {
        background: var(--gradient-primary);
        transform: translateY(-5px) rotate(360deg);
        box-shadow: 0 10px 20px var(--shadow-color);
        color: var(--pure-white);
    }

    /* ===== BACKGROUNDS & EFFECTS ===== */
    .earth-bg {
        position: relative;
        overflow: hidden;
    }

    .earth-bg::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(162, 182, 223, 0.08) 0%, rgba(107, 140, 206, 0.05) 50%, rgba(12, 52, 131, 0.03) 100%);
        animation: rotate 20s linear infinite;
        z-index: -1;
    }

    .bg-light-blue {
        background: linear-gradient(135deg, var(--very-light-blue), var(--pure-white));
    }

    .bg-soft-blue {
        background: linear-gradient(135deg, var(--pure-white), var(--very-light-blue));
    }

    .bg-light {
        background: linear-gradient(135deg, #f0f4fc, var(--pure-white)) !important;
    }

    /* ===== ANIMATIONS ===== */
    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    @keyframes float {

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

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

    @keyframes pulse {

        0%,
        100% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.05);
        }
    }

    @keyframes gradientFlow {
        0% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }

    @keyframes slide {
        0% {
            transform: translateX(-100%);
        }

        100% {
            transform: translateX(100%);
        }
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    .float-animation {
        animation: float 3s ease-in-out infinite;
    }

    .pulse-animation {
        animation: pulse 2s ease-in-out infinite;
    }

    .fade-in {
        animation: fadeInUp 1s ease forwards;
    }

    .location-item {
        animation: fadeInUp 0.5s ease forwards;
    }

    .counter {
        animation: fadeInUp 2s ease-out;
        font-size: 3rem;
        font-weight: 700;
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* ===== TEXT & GRADIENTS ===== */
    .gradient-text {
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        background-size: 200% 200%;
        animation: gradientFlow 5s ease infinite;
    }

    .section-title {
        position: relative;
        display: inline-block;
        color: var(--dark-blue);
    }

    .section-title::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 3px;
        background: var(--gradient-primary);
        border-radius: 3px;
    }

    .text-blue {
        color: var(--light-blue);
    }

    .text-cyan {
        color: var(--medium-blue);
    }

    .text-warning {
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .bg-warning {
        background: var(--gradient-primary) !important;
    }

    /* ===== LOADER ===== */
    .page-loader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, var(--very-light-blue), var(--pure-white));
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        transition: opacity 0.5s ease, visibility 0.5s ease;
    }

    .loader {
        width: 80px;
        height: 80px;
        border: 5px solid var(--very-light-blue);
        border-top: 5px solid #a2b6df;
        border-right: 5px solid #6b8cce;
        border-bottom: 5px solid #0c3483;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        box-shadow: 0 0 20px var(--shadow-color);
    }

    .btn-loading {
        position: relative;
        pointer-events: none;
        opacity: 0.9;
        background: var(--gradient-primary) !important;
    }

    .btn-loading:after {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        top: 50%;
        left: 50%;
        margin-left: -10px;
        margin-top: -10px;
        border: 2px solid rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        border-top-color: var(--pure-white);
        border-right-color: var(--pure-white);
        animation: spin 0.8s linear infinite;
    }

    /* ===== BORDERS & DIVIDERS ===== */
    .border-blue {
        border-color: #a2b6df !important;
    }

    .border-cyan {
        border-color: #6b8cce !important;
    }

    .section-divider {
        height: 3px;
        background: var(--gradient-primary);
        width: 150px;
        margin: 2rem auto;
        border-radius: 3px;
    }

    /* ===== PRICE & RATING ===== */
    .price-tag {
        background: var(--gradient-primary);
        color: var(--pure-white);
        padding: 0.5rem 1rem;
        border-radius: 50px;
        font-weight: 600;
        box-shadow: 0 4px 15px var(--shadow-color);
    }

    .rating-stars {
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-size: 1.2rem;
    }

    /* ===== HOVER EFFECTS ===== */
    .hover-scale {
        transition: transform 0.3s ease;
    }

    .hover-scale:hover {
        transform: scale(1.05);
    }

    .hover-shadow {
        transition: box-shadow 0.3s ease;
    }

    .hover-shadow:hover {
        box-shadow: 0 20px 40px var(--shadow-medium) !important;
    }

    /* ===== FORM ELEMENTS ===== */
    .form-check-input:checked {
        background: var(--gradient-primary);
        border-color: transparent;
    }

    .form-check-input:focus {
        box-shadow: 0 0 0 3px rgba(12, 52, 131, 0.25);
        border-color: transparent;
    }

    /* ===== PROGRESS BAR ===== */
    .progress-bar {
        background: var(--gradient-primary);
    }

    /* ===== AOS ===== */
    [data-aos] {
        pointer-events: none;
    }

    [data-aos].aos-animate {
        pointer-events: auto;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 992px) {
        .booking-sidebar {
            position: relative;
            top: 0;
            margin-top: 2rem;
        }
    }

    @media (max-width: 768px) {
        .navbar-brand {
            font-size: 1.5rem;
        }

        .display-3,
        .page-header h1,
        .location-hero h1 {
            font-size: 2.5rem;
        }

        .display-4 {
            font-size: 2rem;
        }

        .display-5 {
            font-size: 2rem;
        }

        .hero-content {
            padding: 2rem 0;
        }

        .hero-section,
        .page-header,
        .location-hero {
            margin-top: -56px;
            min-height: 50vh;
        }

        .rent-hero {
            min-height: 60vh;
        }

        .car-details-hero {
            min-height: 40vh;
        }

        .tour-hero {
            min-height: 30vh;
        }

        .feature-icon {
            width: 60px;
            height: 60px;
            line-height: 60px;
            font-size: 1.5rem;
        }

        .btn-earth,
        .btn-outline-earth {
            padding: 8px 20px;
            font-size: 0.9rem;
        }

        .rounded-pill-start,
        .rounded-pill-end {
            border-radius: 50px !important;
            margin: 0.5rem 0;
        }

        .location-card .position-relative {
            height: 180px !important;
        }

        .pricing-card.popular {
            transform: scale(1);
        }
    }