/* ==========================================================================
   DELHI CAR BOOKING — UNIVERSAL RESPONSIVE STYLESHEET (responsive.css)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LARGE DESKTOPS & LAPTOPS (Max-width: 1199.98px)
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .container {
        max-width: 960px;
    }

    /* Navbar text slightly smaller */
    .nav-link {
        font-size: 0.8125rem !important;
        padding: 6px 10px !important;
    }

    .header-contact h5 {
        font-size: 0.875rem !important;
    }

    /* Quick Booking Card */
    .quick-booking-card {
        padding: 24px 20px !important;
    }
}

/* --------------------------------------------------------------------------
   2. TABLETS, PORTRAIT IPADS & MOBILES (Max-width: 991.98px)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* Container padding */
    .container, .container-fluid {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Header Contact Info adjust */
    .header-contact {
        display: none !important; /* Managed via Mobile Offcanvas Drawer */
    }

    /* Hide desktop navbar collapse */
    .navbar-collapse {
        display: none !important;
    }

    /* Navbar spacing */
    .navbar {
        padding: 4px 16px !important;
    }

    .navbar-brand img {
        height: 48px !important;
        max-height: 48px !important;
        width: auto;
    }

    /* Hero Section — just clear the fixed navbar, no extra gap */
    .hero-section {
        padding-top: 70px !important;
        padding-bottom: 30px !important;
        min-height: auto !important;
    }

    .hero-content {
        padding-top: 0 !important;
    }

    /* Swap columns: Form first, text below on tablet/mobile */
    .hero-section .row {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Form column moves to top */
    .hero-section .col-lg-5 {
        order: -1 !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    /* Text column goes below */
    .hero-section .col-lg-7 {
        order: 1 !important;
        width: 100% !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 10px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .badge-hero {
        margin: 0 auto 14px auto !important;
        display: inline-block !important;
        text-align: center !important;
        align-self: center !important;
    }

    /* Hero Title & Subtitle Centered */
    .hero-title {
        font-size: clamp(1.5rem, 4vw, 2.25rem) !important;
        line-height: 1.25 !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        align-self: center !important;
        width: 100% !important;
    }

    .hero-subtitle {
        font-size: 0.875rem !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 20px !important;
        align-self: center !important;
        width: 100% !important;
    }

    /* Hero Feature Badges — 2-Column Grid on Tablets */
    .hero-features {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px 16px !important;
        margin: 0 auto 22px auto !important;
        width: 100% !important;
        align-self: center !important;
    }

    .hf-item {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        gap: 10px !important;
        margin: 0 !important;
        background: rgba(255,255,255,0.07) !important;
        border-radius: 10px !important;
        padding: 10px 12px !important;
    }

    /* Hero CTA Buttons Centered */
    .hero-buttons {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 auto !important;
        align-self: center !important;
    }

    .hero-buttons .btn,
    .hero-buttons a {
        margin: 0 !important;
        padding: 10px 24px !important;
        font-size: 0.875rem !important;
        justify-content: center !important;
        display: inline-flex !important;
        align-self: center !important;
    }

    .quick-booking-card h4 {
        font-size: 1.5rem !important;
        font-weight: 800 !important;
    }

    /* ── ABOUT PAGE RESPONSIVE (Tablets) ── */
    .about-text-box {
        padding: 30px 24px !important;
    }

    .feature-card {
        padding: 24px 20px !important;
    }

    .tour-card-content {
        padding: 20px 18px !important;
    }

    /* ── ONE WAY CAB / LOCATION PAGES (Tablets) ── */
    .oneway-hero {
        padding: 40px 0 !important;
        margin-bottom: 30px !important;
    }

    .oneway-hero h1 {
        font-size: 1.75rem !important;
    }

    .oneway-content-card {
        padding: 30px 24px !important;
    }

    .oneway-image-wrapper {
        position: relative !important;
        top: 0 !important;
    }

    /* ── CHARDHAM YATRA PAGE (Tablets) ── */
    .chardham-hero {
        padding: 40px 0 !important;
        margin-bottom: 30px !important;
    }

    .chardham-hero h1 {
        font-size: 1.75rem !important;
    }

    .chardham-content-card {
        padding: 30px 24px !important;
    }

    .chardham-image-wrapper {
        position: relative !important;
        top: 0 !important;
    }

    /* ── CONTACT US PAGE (Tablets) ── */
    .contact-hero-section {
        padding: 40px 0 !important;
        margin-bottom: 30px !important;
    }

    .contact-hero-section h1 {
        font-size: 1.75rem !important;
    }

    .contact-card {
        padding: 30px 24px !important;
    }

    /* ── DELHI DARSHAN PAGE (Tablets) ── */
    .darshan-hero {
        padding: 40px 0 !important;
        margin-bottom: 30px !important;
    }

    .darshan-hero h1 {
        font-size: 1.75rem !important;
    }

    .darshan-content-card {
        padding: 30px 24px !important;
    }

    .darshan-image-wrapper {
        position: relative !important;
        top: 0 !important;
    }

    /* ── RATES LIST PAGE (Tablets) ── */
    .rates-hero-section {
        padding: 40px 0 !important;
        margin-bottom: 30px !important;
    }

    .rates-hero-section h1 {
        font-size: 1.75rem !important;
    }

    .info-card-modern {
        padding: 24px 18px !important;
    }

    /* ── DELHI CAB BOOKING / RESULTS PAGE (Tablets) ── */
    .dcb-results-layout {
        flex-direction: column !important;
        gap: 24px !important;
    }

    .dcb-sidebar-col {
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   3. MOBILE DEVICES & PHONES (Max-width: 767.98px)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    body {
        padding-top: 75px !important;
    }

    .container, .container-fluid {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Brand Logo */
    .navbar-brand img {
        height: 48px !important;
        max-height: 48px !important;
    }

    /* Hero Section — just clear the fixed navbar, no extra gap */
    .hero-section {
        padding-top: 65px !important;
        padding-bottom: 25px !important;
        min-height: auto !important;
    }

    .hero-content {
        padding-top: 0 !important;
    }

    /* Swap columns: Form first, text below on mobile */
    .hero-section .row {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Form column moves to top */
    .hero-section .col-lg-5 {
        order: -1 !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    /* Text column goes below */
    .hero-section .col-lg-7 {
        order: 1 !important;
        width: 100% !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 10px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .badge-hero {
        margin: 0 auto 14px auto !important;
        display: inline-block !important;
        text-align: center !important;
        align-self: center !important;
    }

    /* Hero Title & Subtitle Centered */
    .hero-title {
        font-size: 1.5rem !important; /* 24px */
        line-height: 1.25 !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        align-self: center !important;
        width: 100% !important;
    }

    .hero-subtitle {
        font-size: 0.875rem !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 20px !important;
        align-self: center !important;
        width: 100% !important;
    }

    /* Hero Feature Badges — 2-Column Grid on Mobile */
    .hero-features {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px 12px !important;
        margin: 0 auto 20px auto !important;
        width: 100% !important;
        align-self: center !important;
    }

    .hf-item {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        gap: 10px !important;
        margin: 0 !important;
        background: rgba(255,255,255,0.07) !important;
        border-radius: 10px !important;
        padding: 10px 12px !important;
    }

    /* 3rd item spans full width and centers itself */
    .hf-item:last-child {
        grid-column: 1 / -1 !important;
        max-width: 220px !important;
        margin: 0 auto !important;
        justify-content: flex-start !important;
    }

    /* Compact icon & text inside grid cells on mobile */
    .hf-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
        flex-shrink: 0 !important;
    }

    .hf-text h6 {
        font-size: 0.75rem !important;
        margin-bottom: 1px !important;
    }

    .hf-text small {
        font-size: 0.65rem !important;
    }

    /* Hero CTA Buttons Centered */
    .hero-buttons {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 auto !important;
        align-self: center !important;
    }

    .hero-buttons .btn {
        margin: 0 !important;
        padding: 10px 22px !important;
        font-size: 0.8125rem !important;
        justify-content: center !important;
        display: inline-flex !important;
    }

    /* Quick Booking Form Card on Mobile (1 Column Stack) */
    .quick-booking-card {
        padding: 18px 14px !important;
        border-radius: 16px !important;
    }

    /* Quick Cab Booking Title Larger */
    .quick-booking-card h4 {
        font-size: 1.5rem !important; /* 24px */
        font-weight: 800 !important;
        letter-spacing: -0.2px !important;
        margin-bottom: 16px !important;
    }

    .quick-booking-card label,
    .quick-booking-card .form-group label {
        font-size: 0.8125rem !important;
        font-weight: 600 !important;
        color: #111111 !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 6px !important;
    }

    .herobar-form-grid,
    .quick-form-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    .herobar-field-full,
    .quick-form-full {
        grid-column: auto !important;
        width: 100% !important;
    }

    /* Input & Select heights and proper dark black text on Mobile */
    .quick-booking-card input,
    .quick-booking-card select,
    .quick-booking-card .form-control {
        height: 48px !important;
        padding-left: 40px !important;
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
        color: #111111 !important;
        background-color: #f9f9f9 !important;
        border-color: #ddd !important;
    }

    .quick-booking-card input::placeholder,
    .quick-booking-card input::-webkit-input-placeholder,
    .quick-booking-card select::placeholder {
        color: #333333 !important;
        opacity: 1 !important;
    }

    .qb-input-group i {
        color: #111111 !important;
        font-size: 1rem !important;
    }

    .quick-booking-card button[type="submit"],
    .herobar-submit-btn {
        font-size: 0.9375rem !important;
        font-weight: 800 !important;
        border-radius: 30px !important;
        display: flex !important;
        margin: 16px auto 0 !important;
        width: auto !important;
        min-width: 220px !important;
        max-width: 280px !important;
        height: 48px !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* ── Trip Type Tabs — 2×2 Grid on Mobile ── */
    /* Remove wrapper gray background, border & radius in MOBILE VIEW ONLY */
    .quick-booking-card .form-group.d-flex {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-bottom: 16px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    /* Each radio tab as a clean modern card button on mobile */
    .quick-booking-card .custom-control.custom-radio.custom-control-inline {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .quick-booking-card .custom-control-input {
        position: absolute !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
    }

    .quick-booking-card .custom-control-label {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 11px 8px !important;
        font-size: 0.78125rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        cursor: pointer !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        color: #334155 !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        text-align: center !important;
        letter-spacing: 0.4px !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03) !important;
    }

    .quick-booking-card .custom-control-label::before,
    .quick-booking-card .custom-control-label::after {
        display: none !important;
    }

    /* Active / checked tab button on mobile */
    .quick-booking-card .custom-control-input:checked + .custom-control-label {
        background: linear-gradient(135deg, #f37021 0%, #ff8c42 100%) !important;
        border-color: #f37021 !important;
        color: #ffffff !important;
        font-weight: 800 !important;
        box-shadow: 0 4px 14px rgba(243, 112, 33, 0.35) !important;
        transform: translateY(-1px) !important;
    }

    /* ── Services Slider: 1 card on mobile ── */
    /* Hide prev/next arrows — swipe is enough */
    .services-slider-wrapper .slider-nav {
        display: none !important;
    }

    /* Hide dot indicators on mobile */
    .svc-dots {
        display: none !important;
    }

    /* Remove side padding so card fills full width */
    .services-slider-track-outer {
        padding: 10px 0 14px !important;
    }

    /* Taller card for single-card view */
    .svc-card {
        min-height: 185px !important;
    }

    /* All Main Sections 1-Column Stack */
    .services-grid,
    .routes-grid,
    .why-grid,
    .pre-footer-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    /* Card Box Shadows & Radii */
    .service-card,
    .route-card,
    .fleet-card,
    .why-card {
        border-radius: 14px !important;
    }

    /* Fleet Slider adjustments */
    .fleet-card-img {
        height: 110px !important;
    }

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

    /* Why Banner Items */
    .why-banner-item {
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    .why-banner-icon {
        margin: 0 auto 12px !important;
    }

    /* Testimonials Slider on Mobile */
    .google-ref-card {
        padding: 16px 14px !important;
        border-radius: 14px !important;
    }

    .gcard-text {
        font-size: 0.8125rem !important;
    }

    /* Google Rating Badge Banner */
    .google-rating-badge {
        flex-direction: column !important;
        gap: 8px !important;
        text-align: center !important;
        padding: 12px 16px !important;
    }

    /* Marquee Cities Chips */
    .city-chip {
        padding: 6px 14px !important;
        font-size: 0.78rem !important;
    }

    /* Footer styling on Mobile — 2 columns per row */
    .footer {
        padding: 28px 0 0 !important;
        margin-bottom: 0 !important;
    }

    .footer-main {
        padding: 12px 0 12px !important;
    }

    .footer-main .row {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-left: -8px !important;
        margin-right: -8px !important;
    }

    /* First column (Logo, description, socials) — Full row 100% */
    .footer-main .row > [class*="col-"]:first-child {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        margin-bottom: 24px !important;
    }

    /* Remaining columns — 2 per row (50%) */
    .footer-main .row > [class*="col-"]:not(:first-child) {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        margin-bottom: 24px !important;
    }

    .footer-logo {
        max-width: 160px !important;
    }

    .footer .footer-desc {
        font-size: 0.8rem !important;
        line-height: 1.6 !important;
        margin-bottom: 14px !important;
        max-width: 100% !important;
    }

    .footer h5 {
        font-size: 0.8rem !important;
        margin-bottom: 10px !important;
    }

    .footer .footer-links li a {
        font-size: 0.75rem !important;
    }

    .footer-social {
        justify-content: flex-start !important;
        gap: 6px !important;
    }

    .footer-social a {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.75rem !important;
    }

    /* Contact column styling for 2-col */
    .footer-contact li {
        font-size: 0.72rem !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }

    .footer-contact-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.72rem !important;
    }

    .footer-contact-text span {
        font-size: 0.72rem !important;
        word-break: break-word !important;
    }

    .footer-social-links {
        justify-content: flex-start !important;
    }

    /* ── ABOUT PAGE RESPONSIVE (Mobile) ── */
    .about-intro-section {
        padding: 20px 0 10px !important;
    }

    .about-text-box {
        padding: 22px 16px !important;
        border-radius: 14px !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
        margin-bottom: 20px !important;
    }

    .about-text-box h2 {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
    }

    .about-highlight-text {
        font-size: 0.95rem !important;
        margin-bottom: 12px !important;
    }

    .about-text-box p {
        font-size: 1rem !important;
        line-height: 1.75 !important;
        text-align: justify !important;
    }

    .feature-card {
        padding: 20px 16px !important;
        border-radius: 14px !important;
        margin-bottom: 14px !important;
    }

    .feature-icon {
        width: 54px !important;
        height: 54px !important;
        margin: 0 auto 12px !important;
    }

    .feature-icon i {
        font-size: 22px !important;
    }

    .feature-card h3 {
        font-size: 1.1rem !important;
        margin-bottom: 8px !important;
    }

    .feature-card p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        text-align: justify !important;
    }

    .tourist-card {
        border-radius: 14px !important;
        margin-bottom: 16px !important;
    }

    .tour-card-content {
        padding: 16px 14px !important;
    }

    .tour-card-title {
        font-size: 1.1rem !important;
        margin-bottom: 8px !important;
    }

    .tour-card-desc {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        margin-bottom: 14px !important;
        text-align: justify !important;
    }



    .tour-card-footer {
        gap: 8px !important;
    }

    .tour-card-footer a {
        padding: 10px 8px !important;
        font-size: 0.875rem !important;
        border-radius: 8px !important;
    }

    .info-banner-section {
        padding: 30px 0 !important;
    }

    .info-banner-item {
        padding: 14px 16px !important;
        gap: 12px !important;
        border-radius: 12px !important;
        margin-bottom: 10px !important;
    }

    .info-banner-icon {
        font-size: 24px !important;
    }

    .info-banner-text h4 {
        font-size: 0.95rem !important;
        margin-bottom: 2px !important;
    }

    .info-banner-text p {
        font-size: 0.8rem !important;
        line-height: 1.35 !important;
    }

    /* ── ONE WAY CAB / LOCATION PAGES (Mobile) ── */
    .oneway-hero {
        padding: 28px 14px !important;
        margin-bottom: 20px !important;
    }

    .oneway-hero h1 {
        font-size: 1.35rem !important;
        line-height: 1.35 !important;
        margin-bottom: 12px !important;
    }

    .oneway-hero p {
        font-size: 0.85rem !important;
        line-height: 1.6 !important;
        text-align: justify !important;
    }

    .oneway-content-card {
        padding: 20px 16px !important;
        border-radius: 14px !important;
        margin-bottom: 20px !important;
    }

    .oneway-content-card h2 {
        font-size: 1.25rem !important;
        line-height: 1.35 !important;
        margin-bottom: 14px !important;
    }

    .oneway-content-card p {
        font-size: 0.875rem !important;
        line-height: 1.65 !important;
        text-align: justify !important;
        margin-bottom: 14px !important;
    }

    .oneway-content-card h4 {
        font-size: 1.05rem !important;
        margin-top: 20px !important;
        margin-bottom: 10px !important;
    }

    .oneway-image-wrapper {
        position: relative !important;
        top: 0 !important;
        margin-bottom: 20px !important;
        border-radius: 14px !important;
    }

    .cta-box {
        padding: 18px 14px !important;
        margin-top: 20px !important;
        border-radius: 12px !important;
    }

    .cta-box h4 {
        font-size: 1rem !important;
        margin-bottom: 14px !important;
    }

    .cta-buttons {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .cta-btn-call,
    .cta-btn-wa {
        flex: 1 1 50% !important;
        padding: 12px 10px !important;
        font-size: 0.875rem !important;
        justify-content: center !important;
        text-align: center !important;
        border-radius: 8px !important;
    }

    .custom-list li {
        font-size: 0.85rem !important;
        line-height: 1.55 !important;
        text-align: justify !important;
    }

    /* ── CHARDHAM YATRA PAGE (Mobile) ── */
    .chardham-hero {
        padding: 28px 14px !important;
        margin-bottom: 20px !important;
    }

    .chardham-hero h1 {
        font-size: 1.35rem !important;
        line-height: 1.35 !important;
        margin-bottom: 12px !important;
    }

    .chardham-hero p {
        font-size: 0.85rem !important;
        line-height: 1.6 !important;
        text-align: justify !important;
    }

    .chardham-content-card {
        padding: 20px 16px !important;
        border-radius: 14px !important;
        margin-bottom: 20px !important;
    }

    .chardham-content-card h2 {
        font-size: 1.25rem !important;
        line-height: 1.35 !important;
        margin-bottom: 14px !important;
    }

    .chardham-content-card p {
        font-size: 0.875rem !important;
        line-height: 1.65 !important;
        text-align: justify !important;
        margin-bottom: 14px !important;
    }

    .chardham-content-card h4 {
        font-size: 1.05rem !important;
        margin-top: 20px !important;
        margin-bottom: 10px !important;
    }

    .chardham-image-wrapper {
        position: relative !important;
        top: 0 !important;
        margin-bottom: 20px !important;
        border-radius: 14px !important;
    }

    /* ── CONTACT US PAGE (Mobile) ── */
    .contact-hero-section {
        padding: 28px 14px !important;
        margin-bottom: 20px !important;
    }

    .contact-hero-section h1 {
        font-size: 1.35rem !important;
        line-height: 1.35 !important;
        margin-bottom: 10px !important;
    }

    .contact-hero-section p {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }

    .contact-card {
        padding: 20px 16px !important;
        border-radius: 14px !important;
        margin-bottom: 20px !important;
    }

    .contact-card h3 {
        font-size: 1.2rem !important;
        margin-bottom: 12px !important;
    }

    .contact-info-item {
        margin-bottom: 18px !important;
    }

    .contact-info-icon {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        font-size: 16px !important;
        margin-right: 12px !important;
    }

    .contact-info-content h4 {
        font-size: 0.95rem !important;
        margin-bottom: 2px !important;
    }

    .contact-info-content p,
    .contact-info-content a {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
        word-break: break-word !important;
    }

    .social-links-modern {
        gap: 10px !important;
    }

    .social-links-modern a {
        width: 38px !important;
        height: 38px !important;
        font-size: 15px !important;
    }

    .modern-form .form-control {
        padding: 10px 14px !important;
        font-size: 0.875rem !important;
        border-radius: 8px !important;
    }

    .modern-btn {
        padding: 12px 20px !important;
        font-size: 0.875rem !important;
        border-radius: 8px !important;
    }

    .map-container {
        border-radius: 14px !important;
        margin-bottom: 30px !important;
    }

    .map-container iframe {
        height: 280px !important;
    }

    /* Recaptcha responsiveness on mobile */
    .g-recaptcha {
        transform: scale(0.85) !important;
        -webkit-transform: scale(0.85) !important;
        transform-origin: 0 0 !important;
        -webkit-transform-origin: 0 0 !important;
    }

    /* ── DELHI DARSHAN PAGE (Mobile) ── */
    .darshan-hero {
        padding: 28px 14px !important;
        margin-bottom: 20px !important;
    }

    .darshan-hero h1 {
        font-size: 1.35rem !important;
        line-height: 1.35 !important;
        margin-bottom: 12px !important;
    }

    .darshan-hero p {
        font-size: 0.85rem !important;
        line-height: 1.6 !important;
        text-align: justify !important;
    }

    .darshan-content-card {
        padding: 20px 16px !important;
        border-radius: 14px !important;
        margin-bottom: 20px !important;
    }

    .darshan-content-card h2 {
        font-size: 1.25rem !important;
        line-height: 1.35 !important;
        margin-bottom: 14px !important;
    }

    .darshan-content-card p {
        font-size: 0.875rem !important;
        line-height: 1.65 !important;
        text-align: justify !important;
        margin-bottom: 14px !important;
    }

    .darshan-content-card h4 {
        font-size: 1.05rem !important;
        margin-top: 20px !important;
        margin-bottom: 10px !important;
    }

    .darshan-image-wrapper {
        position: relative !important;
        top: 0 !important;
        margin-bottom: 20px !important;
        border-radius: 14px !important;
    }

    /* ── RATES LIST PAGE (Mobile) ── */
    .rates-hero-section {
        padding: 28px 14px !important;
        margin-bottom: 20px !important;
    }

    .rates-hero-section h1 {
        font-size: 1.35rem !important;
        line-height: 1.35 !important;
        margin-bottom: 10px !important;
    }

    .rates-hero-section p {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }

    /* Rates Table Card Layout on Mobile */
    .table-wrapper {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        overflow: visible !important;
    }

    .modern-table,
    .modern-table tbody {
        display: block !important;
        width: 100% !important;
    }

    .modern-table thead {
        display: none !important;
    }

    .modern-table tbody tr {
        display: grid !important;
        grid-template-columns: 75px 1fr auto !important;
        grid-template-areas:
            "img route price"
            "img vehicle action" !important;
        align-items: center !important;
        padding: 12px 14px !important;
        background: #ffffff !important;
        border: 1px solid #e9ecef !important;
        border-radius: 14px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
        margin-bottom: 12px !important;
        gap: 4px 10px !important;
    }

    /* Column 1 (#) - Hide index number on mobile card */
    .modern-table tbody td:first-child {
        display: none !important;
    }

    /* Cell Route */
    .modern-table tbody td.cell-route {
        grid-area: route !important;
        padding: 0 !important;
        border: none !important;
        font-size: 0.9rem !important;
        color: #1c2331 !important;
    }

    /* Cell Vehicle */
    .modern-table tbody td.cell-vehicle {
        grid-area: vehicle !important;
        padding: 0 !important;
        border: none !important;
        font-size: 0.8rem !important;
        color: #6c757d !important;
    }

    /* Cell Image */
    .modern-table tbody td.cell-img {
        grid-area: img !important;
        padding: 0 !important;
        border: none !important;
    }

    .modern-table tbody td.cell-img .car-img-wrapper {
        width: 70px !important;
        height: auto !important;
    }

    /* Cell Price */
    .modern-table tbody td.cell-price {
        grid-area: price !important;
        padding: 0 !important;
        border: none !important;
        text-align: right !important;
    }

    .modern-table tbody td.cell-price .price-tag {
        font-size: 1rem !important;
        font-weight: 800 !important;
        color: #f37021 !important;
    }

    /* Cell Action */
    .modern-table tbody td.cell-action {
        grid-area: action !important;
        padding: 0 !important;
        border: none !important;
    }

    .modern-table tbody td.cell-action .action-buttons-wrapper {
        justify-content: flex-end !important;
        gap: 8px !important;
    }

    .modern-table tbody td.cell-action .btn-call-modern,
    .modern-table tbody td.cell-action .btn-wa-modern {
        width: 36px !important;
        height: 36px !important;
        font-size: 15px !important;
        border-radius: 8px !important;
    }

    .info-card-modern {
        padding: 20px 16px !important;
        border-radius: 14px !important;
        margin-bottom: 14px !important;
    }

    .info-icon-wrapper {
        width: 52px !important;
        height: 52px !important;
        font-size: 20px !important;
        margin-bottom: 12px !important;
    }

    .info-card-modern h4 {
        font-size: 1.05rem !important;
        margin-bottom: 6px !important;
    }

    .info-card-modern p {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }

    /* ── POPULAR TOURIST PLACES (Mobile) ── */
    .hero-trust-badges {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        margin-top: 14px !important;
    }

    .hero-trust-badge {
        padding: 5px 12px !important;
        font-size: 0.75rem !important;
        border-radius: 20px !important;
    }

    .tourist-card {
        border-radius: 14px !important;
        margin-bottom: 16px !important;
    }

    .tour-card-content {
        padding: 16px 14px !important;
    }

    .tour-card-title {
        font-size: 1.15rem !important;
        margin-bottom: 8px !important;
    }

    .tour-card-desc {
        font-size: 0.85rem !important;
        line-height: 1.55 !important;
        text-align: justify !important;
        margin-bottom: 14px !important;
    }

    .tour-card-actions {
        display: flex !important;
        gap: 8px !important;
        padding-top: 12px !important;
    }

    .tour-action-btn {
        padding: 10px 8px !important;
        font-size: 0.875rem !important;
        border-radius: 8px !important;
    }

    /* ── DELHI CAB BOOKING / RESULTS PAGE (Mobile) ── */
    .dcb-page-banner {
        padding: 24px 14px 20px !important;
    }

    .dcb-banner-title {
        font-size: 1.35rem !important;
        line-height: 1.3 !important;
    }

    .dcb-banner-subtitle {
        font-size: 0.8125rem !important;
        margin-bottom: 12px !important;
    }

    .dcb-banner-trust {
        gap: 6px !important;
    }

    .dcb-banner-trust span {
        padding: 4px 10px !important;
        font-size: 0.65rem !important;
    }

    .dcb-route-strip {
        padding: 10px 0 !important;
    }

    .dcb-route-pills {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    .dcb-route-pill {
        padding: 5px 12px !important;
        font-size: 0.75rem !important;
        border-radius: 20px !important;
    }

    .dcb-route-arrow {
        display: inline-block !important;
        font-size: 0.85rem !important;
    }

    .dcb-results-section {
        padding: 20px 0 40px !important;
    }

    .dcb-results-layout {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .dcb-sidebar-col {
        width: 100% !important;
    }

    .dcb-results-header h5 {
        font-size: 0.9rem !important;
    }

    .dcb-car-card {
        flex-direction: column !important;
        border-radius: 14px !important;
        margin-bottom: 16px !important;
    }

    .dcb-car-card > .media,
    .dcb-car-card > .dcb-card-top {
        flex-direction: column !important;
        width: 100% !important;
    }

    .dcb-car-img-wrap,
    .dcb-car-card > .media {
        width: 100% !important;
        min-height: 170px !important;
        height: auto !important;
        border-radius: 14px 14px 0 0 !important;
    }

    .dcb-card-body,
    .dcb-car-card > .caption {
        padding: 14px 12px !important;
        width: 100% !important;
    }

    .dcb-car-header {
        margin-bottom: 8px !important;
    }

    .dcb-car-name {
        font-size: 1.15rem !important;
    }

    .dcb-price-row {
        padding: 8px 10px !important;
        border-radius: 8px !important;
    }

    .dcb-price-main {
        font-size: 1.35rem !important;
    }

    .dcb-fare-breakdown {
        font-size: 0.8rem !important;
    }

    .dcb-fare-breakdown .dcb-fare-row {
        padding: 6px 10px !important;
    }

    .dcb-specs-row {
        gap: 6px !important;
        margin-bottom: 10px !important;
    }

    .dcb-spec-item {
        font-size: 0.75rem !important;
        padding: 4px 8px !important;
    }

    .dcb-card-footer {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding-top: 10px !important;
    }

    .dcb-trust-mini {
        justify-content: center !important;
        font-size: 0.75rem !important;
    }

    .dcb-btn-book,
    .dcb-card-footer form button,
    .dcb-card-footer form {
        width: 100% !important;
        display: block !important;
    }

    .dcb-btn-book {
        padding: 12px !important;
        font-size: 0.9375rem !important;
        text-align: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
    }

    /* ── BOOKING CONFIRMATION & PAYMENT PAGE (Mobile) ── */
    .bk-hero {
        padding: 24px 14px 20px !important;
    }

    .bk-hero-title {
        font-size: 1.35rem !important;
        line-height: 1.3 !important;
    }

    .bk-hero-sub {
        font-size: 0.8125rem !important;
    }

    .bk-layout {
        margin-top: 16px !important;
        padding: 0 12px !important;
        gap: 16px !important;
    }

    .bk-card-body,
    .bk-vehicle-info {
        padding: 16px 14px !important;
    }

    .bk-vehicle-name {
        font-size: 1.2rem !important;
        margin-bottom: 4px !important;
    }

    .bk-vehicle-img {
        width: 100% !important;
        min-height: 160px !important;
        height: auto !important;
        padding: 10px !important;
    }

    .bk-fare-table td {
        padding: 6px 2px !important;
        font-size: 0.8rem !important;
    }

    .bk-fare-table td:first-child {
        color: #444 !important;
        font-weight: 600 !important;
    }

    .bk-fare-table td:last-child {
        color: #111 !important;
        font-weight: 700 !important;
    }

    .bk-fare-table .bk-total-row td:last-child {
        color: #f37021 !important;
        font-size: 1.1rem !important;
        font-weight: 800 !important;
    }

    .bk-form-section-title {
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        color: #111111 !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 8px !important;
    }

    .bk-form-group label {
        font-size: 0.8125rem !important;
        font-weight: 600 !important;
        color: #111111 !important;
        margin-bottom: 5px !important;
        letter-spacing: 0.5px !important;
    }

    .bk-form-group input,
    .bk-form-group textarea,
    .bk-form-group select {
        height: 48px !important;
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
        color: #111111 !important;
        background-color: #f9f9f9 !important;
        border-color: #ddd !important;
        border-radius: 8px !important;
        padding: 10px 14px !important;
    }

    .bk-form-group textarea {
        height: auto !important;
        min-height: 90px !important;
    }

    .bk-form-group input::placeholder,
    .bk-form-group textarea::placeholder {
        color: #444444 !important;
        opacity: 1 !important;
    }

    .bk-pay-btn {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        height: 50px !important;
        font-size: 1rem !important;
        font-weight: 800 !important;
        border-radius: 12px !important;
        margin: 14px 0 !important;
    }

    .bk-secure-strip {
        gap: 10px !important;
        padding-top: 10px !important;
    }

    .bk-secure-strip span {
        font-size: 0.72rem !important;
    }
}

/* --------------------------------------------------------------------------
   4. SMALL MOBILE PHONES (Max-width: 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    /* Hero Title Compact */
    .hero-title {
        font-size: 1.35rem !important;
    }

    /* Offcanvas Button Compact */
    .dcb-offcanvas-btn {
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
    }

    /* Card Padding Compact */
    .quick-booking-card {
        padding: 16px 12px !important;
    }

    /* Price Badges */
    .route-price,
    .fleet-price {
        font-size: 1rem !important;
    }
}