@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;
    }
  }

  @media only screen and (max-width: 1199px) and (min-width: 993px) {
    .time-slots-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }