/* ==============================================

   MOBILE-FIRST RESPONSIVE DESIGN

   Taxi Booking Website - Morocco

   Professional Mobile Optimization

   ============================================== */



/* CSS Variables for Consistent Spacing */

:root {

    --mobile-padding: 1rem;

    --mobile-margin: 0.75rem;

    --touch-target: 44px;

    --mobile-text-small: 0.875rem;

    --mobile-text-base: 1rem;

    --mobile-text-large: 1.125rem;

    --mobile-text-xl: 1.25rem;

    --mobile-text-xxl: 1.5rem;

    --mobile-container-max: 100%;

    --mobile-border-radius: 12px;

    --mobile-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    --mobile-shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.15);

}



/* ==============================================

   BASE MOBILE STYLES (320px and up)

   ============================================== */



/* Container and Layout */

.container {

    padding-left: var(--mobile-padding);

    padding-right: var(--mobile-padding);

    max-width: 100%;

}



/* Typography - Mobile First */

body {

    font-size: var(--mobile-text-base);

    line-height: 1.6;

}



h1 { font-size: var(--mobile-text-xxl); }

h2 { font-size: var(--mobile-text-xl); }

h3 { font-size: var(--mobile-text-large); }

h4, h5, h6 { font-size: var(--mobile-text-base); }



/* Touch-Friendly Buttons */

button, 

.btn, 

.primary-button, 

.secondary-button,

.book-btn {

    min-height: var(--touch-target);

    padding: 12px 24px;

    font-size: var(--mobile-text-base);

    border-radius: var(--mobile-border-radius);

    touch-action: manipulation;

    -webkit-tap-highlight-color: transparent;

}



/* ==============================================

   HEADER - MOBILE OPTIMIZED

   ============================================== */



@media (max-width: 1024px) {

    header {

        padding: 0;

        background: rgba(255, 255, 255, 0.95);

        backdrop-filter: blur(15px);

        -webkit-backdrop-filter: blur(15px);

    }



    .nav-container {

        padding: 0.75rem 1rem;

        justify-content: space-between;

    }



    .logo {

        height: 45px;

        width: auto;

    }



    .mobile-menu-btn {

        display: flex;

        width: 44px;

        height: 44px;

        background: rgba(247, 183, 49, 0.1);

        border: 2px solid rgba(247, 183, 49, 0.3);

        border-radius: 8px;

        padding: 8px;

    }



    nav {

        position: fixed;

        top: 0;

        left: -100%;

        width: 100%;

        height: 100vh;

        background: rgba(0, 0, 0, 0.97);

        backdrop-filter: blur(20px);

        transition: left 0.3s ease;

        z-index: 999;

        padding-top: 90px;

        overflow-y: auto;

    }



    nav.active {

        left: 0;

    }



    .nav-links {

        flex-direction: column;

        gap: 0;

        padding: 2rem 1rem;

        height: auto;

    }



    .nav-links li {

        width: 100%;

        margin-bottom: 0.5rem;

    }



    .nav-link {

        padding: 1rem 1.5rem;

        width: 100%;

        font-size: 1.1rem;

        background: rgba(255, 255, 255, 0.05);

        border: 1px solid rgba(255, 255, 255, 0.1);

        border-radius: var(--mobile-border-radius);

        justify-content: flex-start;

        min-height: 56px;

    }



    .book-btn {

        width: 100%;

        text-align: center;

        justify-content: center;

        padding: 1rem;

        font-size: 1.1rem;

        margin: 1rem 0;

        min-height: 56px;

    }



    .language-switcher {

        width: 100%;

        margin: 1rem 0;

    }



    .current-lang {

        width: 100%;

        justify-content: center;

        padding: 1rem;

        font-size: 1.1rem;

        min-height: 56px;

    }

}



/* ==============================================

   HERO SECTION - MOBILE OPTIMIZED

   ============================================== */



@media (max-width: 768px) {

    .hero-section {

        height: 100vh;

        min-height: 600px;

    }



    .hero-content {

        padding: 1rem;

        padding-top: 60px; /* Further reduced from 80px to create more space for buttons */

        padding-bottom: 240px; /* Increased from 220px to 240px to ensure buttons are fully visible */

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        text-align: center;

        width: 100%;

    }



    .hero-content-inner {

        margin-top: 20px; /* Reduced from 40px to 20px */

        padding-top: 10px; /* Reduced from 20px to 10px */

        width: 100%;

        max-width: 400px;

        display: flex;

        flex-direction: column;

        align-items: center;

        text-align: center;

    }



    .hero-title {

        font-size: 2rem;

        line-height: 1.2;

        margin-bottom: 1rem;

        text-align: center;

        width: 100%;

    }



    .hero-subtitle {

        font-size: 1.1rem;

        margin-bottom: 2rem;

        text-align: center;

        width: 100%;

    }



    .hero-cta-buttons {

        flex-direction: column;

        gap: 1rem;

        width: 100%;

        max-width: 300px;

        margin: 0 auto 2rem auto;

        display: flex;

        align-items: center;

        justify-content: center;

    }



    .hero-cta-buttons .primary-button,

    .hero-cta-buttons .secondary-button {

        width: 100%;

        padding: 1rem 2rem;

        font-size: 1.1rem;

        min-height: 56px;

        display: flex;

        align-items: center;

        justify-content: center;

        text-align: center;

        margin: 0 auto;

    }



    .hero-features {

        flex-direction: column;

        gap: 1rem;

        margin-top: 2rem;

        width: 100%;

        display: flex;

        align-items: center;

        justify-content: center;

    }



    .feature-item {

        flex-direction: row;

        justify-content: center;

        align-items: center;

        gap: 0.75rem;

        padding: 0.75rem 1rem;

        background: rgba(255, 255, 255, 0.1);

        border-radius: var(--mobile-border-radius);

        backdrop-filter: blur(10px);

        min-height: 44px;

        width: 100%;

        max-width: 280px;

        margin: 0 auto;

    }



    .feature-item i {

        font-size: 1.2rem;

        margin-right: 0;

    }



    .feature-item span {

        font-size: 0.95rem;

    }



    .video-controls {

        /* Position above floating social buttons on mobile */

        bottom: 140px !important;

        right: 20px !important;

        position: fixed !important;

    }



    .video-btn {

        width: 60px;

        height: 60px;

        border-width: 2px;

        /* Enhanced mobile styling */

        box-shadow: 

            0 6px 24px rgba(247, 183, 49, 0.5),

            0 3px 12px rgba(0, 0, 0, 0.3);

    }

    

    .video-btn i {

        font-size: 24px;

        margin-left: 2px;

    }

    

    .video-btn:hover {

        transform: scale(1.1);

    }

}



/* ==============================================

   SERVICES SECTION - MOBILE OPTIMIZED

   ============================================== */



@media (max-width: 768px) {

    .services-section {

        padding: 3rem 0;

    }



    .section-title {

        font-size: 1.75rem;

        margin-bottom: 2rem;

        text-align: center;

    }



    .services-grid {

        grid-template-columns: 1fr;

        gap: 1.5rem;

        padding: 0 1rem;

    }



    .service-card {

        padding: 1.5rem;

        border-radius: var(--mobile-border-radius);

        box-shadow: var(--mobile-shadow);

        text-align: center;

    }



    .service-icon {

        width: 60px;

        height: 60px;

        margin: 0 auto 1rem;

        font-size: 1.5rem;

    }



    .service-card h3 {

        font-size: 1.25rem;

        margin-bottom: 0.75rem;

    }



    .service-card p {

        font-size: 0.95rem;

        margin-bottom: 1rem;

    }



    .service-features {

        text-align: left;

    }



    .service-features li {

        padding: 0.25rem 0;

        font-size: 0.9rem;

    }

}



/* ==============================================

   BOOKING SECTION - MOBILE OPTIMIZED

   ============================================== */



@media (max-width: 768px) {

    .booking-wrapper {

        margin: 1rem;

        padding: 1.5rem;

        border-radius: var(--mobile-border-radius);

    }



    .booking-wrapper h2 {

        font-size: 1.5rem;

        margin-bottom: 1.5rem;

    }



    /* Vehicle Selection */

    .vehicle-grid {

        grid-template-columns: 1fr;

        gap: 1rem;

        margin: 1.5rem 0;

    }



    .vehicle-card {

        padding: 1.25rem;

        border-radius: var(--mobile-border-radius);

        min-height: 120px;

    }



    .vehicle-card img {

        height: 100px;

        margin-bottom: 1rem;

    }



    .vehicle-card h3 {

        font-size: 1.1rem;

        margin-bottom: 0.5rem;

    }



    .vehicle-details {

        flex-direction: row;

        justify-content: space-between;

        align-items: center;

    }



    .vehicle-details .capacity,

    .vehicle-details .price {

        font-size: 0.95rem;

        font-weight: 600;

    }



    /* Service Options */

    .service-options {

        grid-template-columns: 1fr;

        gap: 1rem;

    }



    .service-card {

        padding: 1.25rem;

        text-align: center;

        min-height: 120px;

    }



    /* Form Styles */

    .form-grid {

        grid-template-columns: 1fr;

        gap: 1rem;

    }



    .input-group {

        margin-bottom: 1rem;

    }



    .input-group label {

        font-size: 0.95rem;

        margin-bottom: 0.5rem;

    }



    .input-group input,

    .input-group textarea,

    .input-group select {

        padding: 0.875rem;

        font-size: var(--mobile-text-base);

        border-radius: var(--mobile-border-radius);

        min-height: var(--touch-target);

        border: 2px solid #e1e8ed;

    }



    .input-group input:focus,

    .input-group textarea:focus,

    .input-group select:focus {

        border-color: #f7b731;

        box-shadow: 0 0 0 3px rgba(247, 183, 49, 0.2);

    }



    /* Map Container */

    .map-container {

        height: 300px;

        border-radius: var(--mobile-border-radius);

        margin: 1rem 0;

    }



    /* Form Navigation */

    .form-navigation {

        flex-direction: column-reverse;

        gap: 0.75rem;

        margin-top: 2rem;

    }



    .back-btn,

    .next-btn {

        width: 100%;

        padding: 1rem;

        font-size: 1.1rem;

        min-height: 56px;

        border-radius: var(--mobile-border-radius);

    }



    /* Progress Steps */

    .steps-container {

        flex-direction: column;

        gap: 1rem;

        padding: 0 1rem;

    }



    .steps-container::before {

        display: none;

    }



    .step {

        flex-direction: row;

        justify-content: flex-start;

        text-align: left;

        padding: 0.75rem;

        background: rgba(247, 183, 49, 0.05);

        border-radius: var(--mobile-border-radius);

    }



    .step-icon {

        width: 40px;

        height: 40px;

        margin-bottom: 0;

        margin-right: 1rem;

        font-size: 1rem;

    }



    .step-label {

        margin-top: 0;

        font-size: 0.95rem;

        align-self: center;

    }

}



/* ==============================================

   BOOKING GUIDE SECTION - MOBILE OPTIMIZED

   ============================================== */



@media (max-width: 768px) {

    .booking-guide {

        padding: 2rem 0;

    }



    .important-notice {

        margin: 1rem;

        border-radius: var(--mobile-border-radius);

    }



    .notice-content {

        flex-direction: column;

        text-align: center;

        gap: 1rem;

    }



    .notice-icon {

        margin-bottom: 0;

    }



    .guide-grid {

        grid-template-columns: 1fr;

        gap: 1.5rem;

        padding: 0 1rem;

    }



    .guide-card {

        padding: 1.5rem;

        border-radius: var(--mobile-border-radius);

    }



    .pricing-list {

        gap: 0.75rem;

    }



    .price-item {

        padding: 1rem;

        border-radius: var(--mobile-border-radius);

        display: flex;

        justify-content: space-between;

        align-items: center;

    }



    .vehicle-type {

        font-size: 0.95rem;

    }



    .booking-price-tag {

        font-size: 1rem;

        font-weight: 700;

    }



    .payment-info {

        gap: 1rem;

    }



    .payment-feature {

        padding: 1rem;

        background: rgba(247, 183, 49, 0.05);

        border-radius: var(--mobile-border-radius);

        border-left: 4px solid #f7b731;

    }

}



/* ==============================================

   REVIEWS SECTION - MOBILE OPTIMIZED

   ============================================== */



@media (max-width: 768px) {

    .reviews-section {

        padding: 2rem 0;

    }



    .reviews-tabs {

        margin: 0 1rem 2rem;

        gap: 0.5rem;

    }



    .tab {

        flex: 1;

        padding: 0.875rem;

        font-size: 0.95rem;

        border-radius: var(--mobile-border-radius);

        min-height: var(--touch-target);

    }



    .reviews-header {

        flex-direction: column;

        gap: 1rem;

        text-align: center;

        padding: 0 1rem;

    }



    .write-review {

        width: 100%;

        max-width: 280px;

        min-height: var(--touch-target);

    }



    .reviews-overview {

        flex-direction: column;

        gap: 1.5rem;

        padding: 0 1rem;

        text-align: center;

    }



    .rating-summary {

        align-items: center;

    }



    .rating-score {

        font-size: 3rem;

        margin-bottom: 0.5rem;

    }



    .reviews-controls {

        flex-direction: column;

        gap: 1rem;

        padding: 0 1rem;

    }



    .search-box {

        width: 100%;

    }



    .search-input {

        padding: 0.875rem;

        font-size: var(--mobile-text-base);

        border-radius: var(--mobile-border-radius);

        min-height: var(--touch-target);

    }



    .controls-right {

        flex-direction: column;

        gap: 1rem;

        width: 100%;

    }



    .filter-group {

        gap: 0.5rem;

    }



    .filter-btn {

        flex: 1;

        padding: 0.75rem;

        min-height: var(--touch-target);

        border-radius: var(--mobile-border-radius);

    }



    .sort-select {

        padding: 0.875rem;

        border-radius: var(--mobile-border-radius);

        min-height: var(--touch-target);

    }



    .reviews-list {

        padding: 0 1rem;

    }



    .review-item {

        padding: 1.5rem;

        margin-bottom: 1rem;

        border-radius: var(--mobile-border-radius);

    }



    .review-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 0.5rem;

    }



    .reviewer-meta {

        flex-direction: column;

        gap: 0.25rem;

    }



    .review-content p {

        font-size: 0.95rem;

        line-height: 1.6;

    }



    .review-footer {

        flex-direction: column;

        gap: 1rem;

        align-items: flex-start;

    }



    .helpful-btn {

        padding: 0.75rem 1rem;

        min-height: var(--touch-target);

        border-radius: var(--mobile-border-radius);

    }

}



/* ==============================================

   MODAL STYLES - MOBILE OPTIMIZED

   ============================================== */



@media (max-width: 768px) {

    .modal {

        padding: 1rem;

        align-items: flex-start;

        padding-top: 2rem;

    }



    .modal-content {

        width: 100%;

        max-width: none;

        max-height: 90vh;

        overflow-y: auto;

        border-radius: var(--mobile-border-radius);

        margin: 0;

    }



    .modal-header {

        padding: 1.5rem 1.5rem 1rem;

        border-bottom: 1px solid #e1e8ed;

    }



    .modal-header h3 {

        font-size: 1.25rem;

    }



    .close-modal {

        width: var(--touch-target);

        height: var(--touch-target);

        font-size: 1.25rem;

    }



    .review-form,

    .question-form {

        padding: 1.5rem;

    }



    .form-group {

        margin-bottom: 1.5rem;

    }



    .form-group label {

        font-size: 0.95rem;

        margin-bottom: 0.5rem;

    }



    .form-group input,

    .form-group textarea,

    .form-group select {

        padding: 0.875rem;

        font-size: var(--mobile-text-base);

        border-radius: var(--mobile-border-radius);

        min-height: var(--touch-target);

    }



    .star-rating {

        justify-content: center;

        gap: 0.5rem;

    }



    .star-rating label {

        font-size: 2rem;

        min-height: var(--touch-target);

        min-width: var(--touch-target);

        display: flex;

        align-items: center;

        justify-content: center;

    }



    .primary-btn {

        width: 100%;

        padding: 1rem;

        font-size: 1.1rem;

        min-height: 56px;

        border-radius: var(--mobile-border-radius);

    }

}



/* ==============================================

   FOOTER - MOBILE OPTIMIZED

   ============================================== */



@media (max-width: 768px) {

    .footer {

        padding: 2rem 0 1rem;

    }



    .footer-container {

        grid-template-columns: 1fr;

        gap: 2rem;

        padding: 0 1rem;

        text-align: center;

    }



    .footer-section h3 {

        font-size: 1.1rem;

        margin-bottom: 1rem;

    }



    .footer-section ul {

        gap: 0.75rem;

    }



    .footer-section ul li {

        margin-bottom: 0.75rem;

    }



    .footer-section a {

        font-size: 0.95rem;

        padding: 0.5rem 0;

        display: inline-block;

        min-height: var(--touch-target);

        line-height: 1.4;

    }



    .social-links {

        justify-content: center;

        gap: 1rem;

        margin-top: 1.5rem;

    }



    .social-circle {

        width: 48px;

        height: 48px;

        font-size: 1.25rem;

    }



    .footer-bottom {

        flex-direction: column;

        gap: 1rem;

        text-align: center;

        padding-top: 1.5rem;

        margin-top: 2rem;

    }

}



/* ==============================================

   FLOATING SOCIAL - MOBILE OPTIMIZED

   ============================================== */



@media (max-width: 768px) {

    .floating-social {

        bottom: 20px;

        right: 15px;

        gap: 12px;

    }



    .floating-social a {

        width: 50px;

        height: 50px;

        box-shadow: var(--mobile-shadow-lg);

    }



    .floating-social img {

        width: 28px;

        height: 28px;

    }

}



/* ==============================================

   PAYMENT SECTION - MOBILE OPTIMIZED

   ============================================== */



@media (max-width: 768px) {

    .booking-summary {

        padding: 1.5rem;

        border-radius: var(--mobile-border-radius);

        margin-bottom: 1.5rem;

    }



    .booking-summary h3 {

        font-size: 1.25rem;

        margin-bottom: 1rem;

    }



    .payment-options {

        gap: 1rem;

    }



    .pay-later-btn,

    #paypal-button-container {

        width: 100%;

        min-height: 56px;

        border-radius: var(--mobile-border-radius);

    }



    .pay-later-btn {

        padding: 1rem;

        font-size: 1.1rem;

    }



    .or-divider {

        margin: 1rem 0;

        font-size: 0.95rem;

    }

}



/* ==============================================

   LANDSCAPE ORIENTATION - MOBILE

   ============================================== */



@media (max-width: 768px) and (orientation: landscape) {

    .hero-section {

        min-height: 500px;

    }



    .hero-content {

        padding-top: 100px;

        padding-bottom: 100px;

        /* Ensure content stays centered in landscape */

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        text-align: center;

    }



    .hero-content-inner {

        /* Ensure inner content is centered in landscape */

        width: 100%;

        max-width: 600px;

        display: flex;

        flex-direction: column;

        align-items: center;

        text-align: center;

    }



    .hero-title {

        font-size: 1.75rem;

        text-align: center;

    }



    .hero-subtitle {

        font-size: 1rem;

        text-align: center;

    }



    .hero-cta-buttons {

        flex-direction: row;

        max-width: 500px;

        /* Ensure buttons are centered in landscape */

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 1rem;

        margin: 0 auto 2rem auto;

    }



    .hero-cta-buttons .primary-button,

    .hero-cta-buttons .secondary-button {

        /* Ensure individual buttons are centered */

        display: flex;

        align-items: center;

        justify-content: center;

        text-align: center;

        min-width: 180px;

    }



    .hero-features {

        flex-direction: row;

        justify-content: center;

        flex-wrap: wrap;

        /* Ensure features are centered */

        width: 100%;

        display: flex;

        align-items: center;

    }



    /* Video controls landscape optimizations */

    .video-controls {

        bottom: 100px !important;

        right: 20px !important;

    }

    

    .video-btn {

        width: 55px;

        height: 55px;

    }

    

    .video-btn i {

        font-size: 22px;

    }

}



/* ==============================================

   ACCESSIBILITY IMPROVEMENTS

   ============================================== */



/* Focus states for better accessibility */

@media (max-width: 768px) {

    button:focus,

    .btn:focus,

    input:focus,

    textarea:focus,

    select:focus,

    a:focus {

        outline: 2px solid #f7b731;

        outline-offset: 2px;

    }



    /* Increase touch targets for links */

    a {

        min-height: var(--touch-target);

        display: inline-flex;

        align-items: center;

    }



    /* Better contrast for form labels */

    label {

        color: #2c3e50;

        font-weight: 600;

    }

}



/* ==============================================

   PERFORMANCE OPTIMIZATIONS

   ============================================== */



/* Reduce animations on mobile for better performance */

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {

    *,

    *::before,

    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;

    }

}



/* ==============================================

   VERY SMALL DEVICES (320px - 375px)

   ============================================== */



/* ==============================================

   SMALL DEVICES (360px - 375px) like BlackBerry Z30

   ============================================== */



@media (max-width: 375px) {

    :root {

        --mobile-padding: 0.75rem;

        --mobile-margin: 0.5rem;

    }



    .hero-content {

        padding: 0.75rem;

        padding-top: 50px; /* Further reduced from 70px to minimize space under header */

        padding-bottom: 200px; /* Increased from 180px to ensure buttons are fully visible */

        /* Ensure tight centering on very small screens */

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        text-align: center !important;

    }



    .hero-content-inner {

        /* Tighter constraints for very small screens */

        width: 100% !important;

        max-width: 320px !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        text-align: center !important;

        padding: 0 0.5rem;

        margin-top: 10px !important; /* Reduced margin for very small screens */

        padding-top: 5px !important; /* Minimal padding for very small screens */

    }



    .hero-title {

        font-size: 1.75rem;

        text-align: center !important;

        width: 100% !important;

    }



    .hero-cta-buttons {

        /* Ensure buttons stay centered on very small screens */

        width: 100% !important;

        max-width: 280px !important;

        margin: 0 auto 1.5rem auto !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 0.75rem !important;

    }



    .hero-cta-buttons .primary-button,

    .hero-cta-buttons .secondary-button {

        width: 100% !important;

        margin: 0 auto !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        text-align: center !important;

        padding: 0.875rem 1.5rem !important;

        font-size: 1rem !important;

    }



    .hero-features {

        /* Ensure features are centered on very small screens */

        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 0.75rem !important;

    }



    .feature-item {

        width: 100% !important;

        max-width: 260px !important;

        margin: 0 auto !important;

        justify-content: center !important;

    }



    /* Enhanced video button for very small devices */

    /* Video controls for very small devices */

    .video-controls {

        bottom: 120px !important;

        right: 15px !important;

    }

    

    .video-btn {

        width: 50px !important;

        height: 50px !important;

        border-width: 2px !important;

    }

    

    .video-btn i {

        font-size: 20px !important;

        margin-left: 2px !important;

    }

    

    .video-btn:hover {

        transform: scale(1.1) !important;

    }

    

    .video-btn:hover i {

        font-size: 22px !important;

    }



    .booking-wrapper {

        margin: 0.5rem;

        padding: 1rem;

    }



    .vehicle-card,

    .service-card {

        padding: 1rem;

    }



    .floating-social {

        bottom: 15px;

        right: 10px;

    }



    .floating-social a {

        width: 45px;

        height: 45px;

    }



    .modal {

        padding: 0.5rem;

        padding-top: 1rem;

    }

}



/* ==============================================

   EXTREMELY SMALL DEVICES (320px and below)

   ============================================== */



/* ==============================================

   360px WIDTH DEVICES (like BlackBerry Z30 360x640)

   ============================================== */



@media (max-width: 360px) {

    .hero-content {

        padding: 0.75rem !important;

        padding-top: 45px !important; /* Minimal top spacing for 360px width */

        padding-bottom: 220px !important; /* Extra bottom space to ensure buttons are visible */

    }



    .hero-content-inner {

        margin-top: 5px !important; /* Minimal margin for 360px devices */

        padding-top: 0px !important; /* No padding to maximize space */

    }



    .hero-title {

        font-size: 1.65rem !important; /* Slightly smaller title for 360px */

        margin-bottom: 0.75rem !important;

    }



    .hero-subtitle {

        font-size: 1rem !important;

        margin-bottom: 1.5rem !important;

        padding: 0.75rem 1rem !important; /* Tighter padding */

    }



    /* Create massive gap above services section for 360px devices */

    .services-section {

        margin-top: 15rem !important; /* Extra large margin to push services section far down */

        padding-top: 0 !important; /* Remove default padding */

        position: relative !important;

        z-index: 1 !important; /* Ensure it's below hero content */

    }


    /* Force any related services section content down */

    #services {

        margin-top: 15rem !important;

        padding-top: 0 !important;

    }

}



@media (max-width: 320px) {

    .hero-content {

        padding: 0.5rem !important;

        padding-top: 40px !important; /* Further reduced for very small screens */

        padding-bottom: 180px !important; /* Adequate bottom space for 320px */

    }



    .hero-content-inner {

        max-width: 300px !important;

        padding: 0 0.25rem !important;

    }



    .hero-cta-buttons {

        max-width: 260px !important;

        gap: 0.5rem !important;

    }



    .hero-cta-buttons .primary-button,

    .hero-cta-buttons .secondary-button {

        padding: 0.75rem 1rem !important;

        font-size: 0.95rem !important;

        min-height: 50px !important;

    }



    .feature-item {

        max-width: 240px !important;

        padding: 0.5rem 0.75rem !important;

    }



    /* Video controls for extremely small devices */

    .video-controls {

        bottom: 100px !important;

        right: 10px !important;

    }

    

    .video-btn {

        width: 45px !important;

        height: 45px !important;

        border-width: 2px !important;

    }

    

    .video-btn i {

        font-size: 18px !important;

        margin-left: 2px !important;

    }

    

    .video-btn:hover i {

        font-size: 20px !important;

    }

}



/* ==============================================

   TABLET STYLES (768px - 1024px)

   ============================================== */



@media (min-width: 769px) and (max-width: 1024px) {

    .vehicle-grid {

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

        gap: 1.5rem;

    }



    .services-grid {

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

        gap: 2rem;

    }



    .form-grid {

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

        gap: 1rem;

    }



    .form-grid .input-group.full-width {

        grid-column: 1 / -1;

    }



    .hero-cta-buttons {

        flex-direction: row;

        gap: 1rem;

    }



    .reviews-controls {

        flex-direction: row;

    }



    .guide-grid {

        grid-template-columns: 1fr;

        max-width: 600px;

        margin: 0 auto;

    }

}



/* ==============================================

   PRINT STYLES

   ============================================== */



@media print {

    .floating-social,

    .video-controls,

    .mobile-menu-btn,

    .write-review,

    .ask-question-btn,

    .form-navigation {

        display: none !important;

    }



    .booking-wrapper,

    .modal-content {

        box-shadow: none !important;

        border: 1px solid #ddd !important;

    }

}