
    
    
 

    .appointment-wrapper{margin:auto;padding:60px 0;background-color:#fdfaf2;font-family:'Playfair Display',serif}
    .appointment-wrapper .intro-title{text-align: center; text-transform: capitalize;letter-spacing: 2px; font-size:60px;font-weight:500;color:#181818;margin-bottom:30px;line-height:1.2}
    .appointment-wrapper .intro-subtitle{font-size:25px;color:#444;font-weight:500;margin:0 auto 30px;line-height:1.6}
    .appointment-wrapper ul li{letter-spacing: 1px;font-size:21px;color:#555;text-align:left;line-height:1.5}

    .appointment-wrapper p{letter-spacing: 1px;font-size:21px;color:#555;text-align:left;margin:15px auto;line-height:1.9}
    @media (max-width:1024px){
    .appointment-wrapper .intro-title{font-size:42px}
    .appointment-wrapper p{font-size:17px}
    }
    @media (max-width:767px){
    .appointment-wrapper{padding:60px 0}
    .appointment-wrapper .intro-title{font-size:37px}
    .appointment-wrapper .intro-subtitle{font-size:21px}
    .appointment-wrapper p{font-size:19px}
    }
    @media (max-width:480px){
    .appointment-wrapper .intro-title{font-size:31px}
    .appointment-wrapper .intro-subtitle{font-size:19px}
    .appointment-wrapper p{font-size:17px}
    
    }

    .appointment-form { 
      max-width: 900px;
      margin: 50px auto;
    }
   
     .form-label {
      font-weight: 500;
      font-size: 19px;
      color: #181818;
    }
    .form-check-label {
      font-weight: 500;
      font-size: 17px;
      color: #181818;
      margin-bottom: 5px;
    }
    .input-wrapper {
      position: relative;
    }
    .form-control,
    .form-select,
    textarea.form-control {
      border-radius: 0px;
      border: 2px solid #e3e6ea;
      padding: 8px 45px 14px 9px;
      transition: 0.3s;
      background: #fdfdfd;
    }
    .form-control:focus,
    .form-select:focus,
    textarea:focus {
      border-color: #0d6efd;
      box-shadow: 0 0 0 0.15rem rgba(13,110,253,0.15);
      background: #ffffff;
    }
    .input-wrapper .status-icon {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1.25rem;
      display: none;
    }
    .valid-field {
      border-color: #28a745 !important;
      box-shadow: 0 0 0 0.15rem rgba(40, 167, 69, 0.25);
    }
    .valid-field ~ .status-icon.valid {
      display: inline;
      color: #28a745;
    }
    .invalid-field {
      border-color: #dc3545 !important;
      box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, 0.25);
    }
    .invalid-field ~ .status-icon.invalid {
      display: inline;
      color: #dc3545;
    }
    .error-message {
      color: #dc3545;
      font-size: 0.85rem;
      display: none;
    }


    
 