@media (min-width: 1400px) {
  
}

@media(min-width: 1200px) and (max-width: 1399.98px) {
   
}

@media(min-width: 992px) and (max-width: 1199.98px) {
   

}

@media(min-width: 768px) and (max-width: 991.98px) {
    
   
}

@media(min-width: 576px) and (max-width: 767.98px) {
    .main-menu {
        /* background: rgba(94, 91, 91, 0.9); */
        margin-top: 0;
        text-align: center;
    }
    .transport-card-box{
        padding-bottom: 24px;
    }
    .main-menu .navbar-toggler:focus {
        box-shadow: 0 0 0 0;
    }
    .navbar-brand {
        font-size: 22px;
    }
    
    /* Tablet Booking Form Optimizations */
    #map {
        height: 300px;
    }
    
    .custom-progressbar {
        gap: 15px;
    }
    
    .form-section {
        padding: 25px 20px;
    }
    
    .payment-methods {
        gap: 15px;
    }
    
    .btn {
        min-height: 44px;
    }
    
    .form-control {
        min-height: 44px;
    }
}

@media (max-width: 575.98px) {


    /* menu part start */
    .main-menu {
        /* background: rgba(94, 91, 91, 0.9); */
        margin-top: 0;
        text-align: center;
    }



    .main-menu .navbar-toggler:focus {
        box-shadow: 0 0 0 0;
    }
    .navbar-brand {
        font-size: 22px;
    }
    .banner-text h1 {
        font-size: 40px;
    }
    .banner-text {
        padding: 200px 0;
    }
    .banner-btn a{
        margin-left: 0 !important;
    }
    .call-sm-btn{
        margin-top: 20px !important;
    }
    .delivery-text h2 {
        font-size: 35px;
        line-height: 40px;
    }
    .delivery-text h4 {
        font-size: 20px;
        line-height: 35px;
    }
    .tran-title h2 {
        font-size: 31px;
        line-height: 48px;
    }
    .transport-card-box{
        padding-bottom: 24px;
    }
    .faq-header h2 {
        font-size: 32px;
        line-height: 48px;
    }

    /* Mobile Booking Form Optimizations */
    .custom-progressbar {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
    }
    
    .custom-progressbar::after {
        display: none; /* Hide connecting line on mobile */
    }
    
    .step-item {
        display: flex;
        align-items: center;
        background: #f8f9fa;
        padding: 10px;
        border-radius: 8px;
        border-left: 4px solid #e0e0e0;
    }
    
    .step-item.active {
        border-left-color: #5e61ff;
        background: #f0f2ff;
    }
    
    .step-icon {
        width: 35px;
        height: 35px;
        line-height: 35px;
        margin-right: 15px;
        margin-bottom: 0;
    }
    
    .step-title {
        font-size: 16px;
        margin: 0;
    }
    
    #map {
        height: 250px !important; /* Reduced height for mobile */
    }
    
    .form-section {
        padding: 20px 15px;
        margin-bottom: 15px;
    }
    
    .payment-methods {
        flex-direction: column;
        gap: 15px;
    }
    
    .payment-option {
        padding: 15px;
        text-align: left;
    }
    
    .payment-option i {
        float: left;
        margin-right: 15px;
        margin-bottom: 0;
    }
    
    .radio-group {
        padding: 15px !important;
    }
    
    .btn {
        min-height: 48px; /* Touch-friendly button height */
        font-size: 16px;
    }
    
    .form-control {
        min-height: 48px; /* Touch-friendly input height */
        font-size: 16px;
    }
    
    .modal-dialog {
        margin: 10px;
    }
    
    .modal-body {
        padding: 15px;
    }
    
    /* Customer Dashboard Mobile Styles */
    .dashboard-stats {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }
    
    .stat-card {
        padding: 15px;
    }
    
    .orders-table-container {
        overflow-x: auto;
    }
    
    .orders-table {
        min-width: 600px;
    }
    
    .address-card {
        margin-bottom: 15px;
    }
}