.appointment-section {
  position: relative;
  background-color: #062b54; /* Dark blue */
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  overflow: hidden; /* Ensure the pseudo-element doesn't overflow */
}

.appointment-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../../assets/img/appointment/appointment-bg.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.2;
  z-index: 0;
}

.appointment-section > * {
  position: relative;
  z-index: 1;
}

    .appointment-content {
      position: relative;
      z-index: 1;
      text-align: center;
      width: 100%;
      max-width: 1100px;
      padding: 0 15px;
	  
    }

    .form-select,
    .btn-appointment {
      border-radius: 30px;
      padding: 0.5rem 1.5rem;
    }

    .btn-appointment {
      background-color: #26a6df;
      color: white;
      font-weight: bold;
      border: none;
    }

    .btn-appointment:hover {
      background-color: #1b93c4;
    }

    .input-group-text {
      background-color: white;
      border: none;
    }

    .input-group .form-select {
      border-left: none;
    }