/* 
   Responsive Fixes for Mobile Devices (max-width: 768px)
*/

@media (max-width: 768px) {
    /* Global Fixes to prevent horizontal scroll */
    html, body, #wrapper {
        overflow-x: hidden !important;
        max-width: 100%;
        width: 100vw;
        margin: 0;
        padding: 0;
    }

    /* Force elements to respect container width */
    img, video, canvas, svg, iframe, table {
        max-width: 100%;
        height: auto;
    }

    /* Prevent flex containers from overflowing */
    .row, .de-flex, .d-flex {
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Base Layout Fixes */
    .container, .container-fluid {
        min-width: 0 !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        overflow-x: hidden;
    }

    section {
        min-width: 0 !important;
        overflow-x: hidden;
    }

    /* Force all rows to wrap vertically on mobile */
    .row {
        flex-wrap: wrap !important;
    }
    h1 { font-size: 32px !important; line-height: 1.2 !important; }
    h2 { font-size: 28px !important; line-height: 1.3 !important; }
    h3 { font-size: 24px !important; }
    p { font-size: 15px !important; }

    /* Hide Desktop Menu and overlapping features, but show when toggled */
    header:not(.menu-open) #mainmenu {
        display: none !important;
    }

    .menu_side_area .btn-main {
        display: none !important;
    }
    
    #logo {
        max-width: 180px;
    }

    #logo img {
        max-height: 40px !important;
    }

    /* WhatsApp Button Fix */
    .whatsapp-float {
        right: 15px !important;
        bottom: 15px !important;
        left: auto !important;
    }

    /* Hero Section Fixes */
    .hero-content-wrapper {
        padding-top: 100px;
    }

    /* Hero CTA buttons - center text on mobile */
    .hero-cta a,
    .hero-cta button {
        width: auto;
        justify-content: center;
        text-align: center;
    }

    .booking-card-modern {
        margin-top: 30px;
        padding: 15px !important; 
        width: 100% !important;
    }

    .vehicle-grid {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Force to 1 column globally on mobile */
        gap: 10px;
        width: 100% !important;
    }

    .vehicle-option-card {
        width: 100% !important;
        box-sizing: border-box;
    }
    
    .date-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px;
    }

    .location-group {
        margin-bottom: 15px; /* Add spacing between stacked locations */
    }

    /* Private Journey Section */
    .private-journey-section {
        padding: 60px 15px !important; /* Reduce massive padding */
    }

    .private-journey-section h2 {
        font-size: 36px !important; /* Smaller title */
    }

    .journey-features > div {
        flex-direction: column !important; /* Stack icon and text */
        align-items: flex-start !important;
        padding: 15px !important;
    }

    .journey-features > div > div:first-child {
        margin-bottom: 15px;
    }

    .journey-image-card {
        margin-top: 40px; /* Spacing between text and image on mobile */
    }

    /* Footer Layout */
    footer .row {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    footer .col-lg-3, footer .col-md-6 {
        width: 100%;
        text-align: center; /* Center footer content on mobile */
    }

    footer .social-icons {
        justify-content: center;
    }
    
    /* ============================================
       SUBTITLE & HEADING DECORATIVE ELEMENTS FIX
       ============================================ */
    
    /* Hide all decorative lines on mobile */
    .section-subtitle span,
    p span[style*="width: 40px"],
    p span[style*="width: 30px"],
    p span[style*="border-top"] {
        display: none !important;
    }
    
    /* Make section subtitles flexbox for better wrapping */
    .section-subtitle {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
        align-items: center !important;
    }
    
    /* Ensure subtitle text doesn't overflow */
    .section-subtitle span,
    h2.deco span,
    h3 span {
        white-space: normal !important;
        flex: 0 1 auto !important;
    }
}

/* Small mobile (max-width: 480px) */
@media (max-width: 480px) {
    /* Hero Badge / Buttons */
    .btn-modern-primary, .btn-modern-secondary {
        width: 100%;
        margin-bottom: 10px;
        justify-content: center;
    }

    .hero-cta-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* Hero CTA buttons - center text */
    .hero-cta a,
    .hero-cta button {
        width: auto;
        justify-content: center;
        text-align: center;
    }

    .hero-trust-indicators {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-top: 20px !important;
    }

    /* Booking Form Vehicle Grid */
    .vehicle-grid {
        grid-template-columns: 1fr !important; /* Stack into 1 column on very small screens */
    }
    
    .view-all-premium-btn {
        padding: 15px 30px !important;
        font-size: 14px !important;
        width: 100%;
        justify-content: center;
    }
    
    /* Hero Subtitle Decorative Lines - Hide on mobile */
    .hero-subtitle-line {
        display: none !important;
    }
    
    .hero-subtitle {
        justify-content: center !important;
        gap: 8px !important;
    }
    
    /* Ensure text wraps nicely on very small screens */
    .hero-subtitle span {
        font-size: 12px !important;
        letter-spacing: 1px !important;
    }
}

/* Tablet (768px to 992px) */
@media (min-width: 769px) and (max-width: 991px) {
    /* Show smaller decorative lines on tablet */
    .hero-subtitle-line {
        display: inline-block !important;
        width: 25px !important;
    }
    
    .hero-subtitle {
        font-size: 13px !important;
        letter-spacing: 2px !important;
    }
    
    /* Ensure text wraps properly on tablets */
    .hero-subtitle span {
        flex: 0 1 auto;
    }
}

/* Desktop and Tablet (min-width: 992px) */
@media (min-width: 992px) {
    /* Show decorative lines on desktop */
    .hero-subtitle-line {
        display: inline-block !important;
    }
}