@media only screen and (max-width: 767px) and (min-width: 320px) {
    .main-container {
        padding: 1rem 0.5rem;
    }

    .booking-card {
        padding: 1.25rem;
        border-radius: 8px;
    }

    .services-box,
    .categories-list {
        max-height: 350px;
    }

    .time-slots-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .step-icon {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }

    .form-select {
        box-shadow: none !important;
        color: #000;
        font-weight: 500;
    }

    .calendar-container {
        padding: 0px;
        margin-bottom: 30px;
    }

    .navigation-buttons button#backToServicesBtn {
        margin-right: 0;
    }

    .time-slot-btn {
        font-size: 11px;
    }

    .confirmation-details {
        grid-template-columns: repeat(1, 1fr);
        gap: 0;
    }

    .confirmation-user-details {
        flex-direction: column;
    }

    .confirmation-user-details .form-floating {
        width: 100%;
    }

    .navigation-buttons button#backToDateBtn {
        margin-right: 0;
    }

    .booking-card {
        padding: 1.5rem;
    }

    .time-slots-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .confirmation-datetime {
        flex-direction: column;
        gap: 1rem;
    }

    .navigation-buttons {
        flex-direction: column-reverse;
        gap: 1rem;
    }

    .navigation-buttons button {
        width: 100%;
    }

    .progress-step .step-label {
        font-size: 0.8rem;
    }

    ul.service-list li {
        padding: 10px;
        border-bottom: 1px solid #eee;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    ul.service-list li h3 {
        font-size: 16px;
        margin-bottom: 0;
        color: #000;
    }

    .confirmation-service h3 {
        font-size: 16px;
    }

    .time-selected-area {
        margin-bottom: 40px;
    }

    span.price-mobile {
        margin: 0 !important;
        font-weight: 700;
        color: var(--primary-color) !important;
        font-size: 22px !important;
    }

    ul.service-list li:last-child {
        border-bottom: none;
    }

    ul.service-list li.selected {
        font-weight: bold;
        color: #000;
        background-color: rgba(106, 17, 203, 0.05);
        border-color: var(--primary-color) !important;
        border-left: 4px solid var(--primary-color) !important;
    }

    ul#serviceList {
        padding-left: 0;
        margin-top: 5px;
    }

    .clickable {
        cursor: pointer;
        padding: 13px;
        border: 1px solid #ddd !important;
        border-radius: 5px !important;
        margin-bottom: 8px;
        transition: background-color 0.2s;
    }

    .confirmation-item.box-height-area {
        height: auto;
        margin-bottom: 15px;
    }
}

@media only screen and (max-width: 992px) and (min-width: 768px) {
    .main-container {
        padding: 1rem 0.5rem;
    }

    .booking-card {
        padding: 1.25rem;
        border-radius: 8px;
    }

    .services-box,
    .categories-list {
        max-height: 350px;
    }

    .time-slots-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .step-icon {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }

    .form-select {
        box-shadow: none !important;
        color: #000;
        font-weight: 500;
    }

    .calendar-container {
        padding: 0px;
        margin-bottom: 30px;
    }

    .navigation-buttons button#backToServicesBtn {
        margin-right: 0;
    }

    .time-slot-btn {
        font-size: 11px;
    }

    .confirmation-details {
        grid-template-columns: repeat(1, 1fr);
        gap: 0;
    }

    .confirmation-user-details {
        flex-direction: column;
    }

    .confirmation-user-details .form-floating {
        width: 100%;
    }

    .navigation-buttons button#backToDateBtn {
        margin-right: 0;
    }

    .booking-card {
        padding: 1.5rem;
    }

    .time-slots-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .confirmation-datetime {
        flex-direction: column;
        gap: 1rem;
    }

    .navigation-buttons {
        flex-direction: column-reverse;
        gap: 1rem;
    }

    .navigation-buttons button {
        width: 100%;
    }

    .progress-step .step-label {
        font-size: 0.8rem;
    }

    ul.service-list li {
        padding: 10px;
        border-bottom: 1px solid #eee;
        cursor: pointer;
    }

    ul.service-list li:last-child {
        border-bottom: none;
    }

    ul.service-list li.selected {
        font-weight: bold;
        color: #000;
        background-color: rgba(106, 17, 203, 0.05);
        border-color: var(--primary-color) !important;
        border-left: 4px solid var(--primary-color) !important;
    }

    ul#serviceList {
        padding-left: 0;
        margin-top: 5px;
    }

    .clickable {
        cursor: pointer;
        padding: 13px;
        border: 1px solid #ddd !important;
        border-radius: 5px !important;
        margin-bottom: 8px;
        transition: background-color 0.2s;
    }

    .confirmation-item.box-height-area {
        height: auto;
        margin-bottom: 15px;
    }

    ul.service-list li {
        padding: 10px;
        border-bottom: 1px solid #eee;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    span.price-mobile {
        margin: 0 !important;
        font-weight: 700;
        color: var(--primary-color) !important;
        font-size: 22px !important;
    }

    .category-btn {
        padding: 20px 10px;
        font-weight: 600;
        letter-spacing: 0.3px;
        font-size: 13px;
    }
}

@media only screen and (max-width: 1199px) and (min-width: 993px) {
    .time-slots-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .category-btn {
        padding: 20px 10px;
        font-weight: 600;
        letter-spacing: 0.3px;
        font-size: 13px;
    }
}