.appointment{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    background:url("../images/dental-appointment-background-sarjapur-bangalore.webp");
    background-color: rgb(13, 28, 139);
    font-family: 'Times New Roman', Times, serif;
  }
  .appointment-container{
    max-width: 700px;
    width: 100%;
    background:url("../images/dental-appointment-background-sarjapur-bangalore.webp");
    padding: 25px 30px;
    border-radius: 15px;
    box-shadow: 5px 10px 10px 0px    #04bff3,-10px -10px 30px  #04bff3;
    /* box-shadow: 10px 10px 30px #04bff3, -10px -10px 30px #5d90b2;   */
  }
  .appointment-container .title{
    font-size: 3rem;
    font-weight: 600;
    position: relative;
    display: flex;
    justify-content: center;
  }
  .appointment-container .title::before{
    content: "";
    position: absolute;
    bottom: -6px;
    height: 3px;
    width: 30%;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    background: linear-gradient(135deg, #71b7e6, #e35c13);
  }
  .content form .user-details{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 20px 0 12px 0;
  }
  form .user-details .input-box{
    margin-bottom: 15px;
    width: calc(100% / 2 - 20px);
  }
  form .input-box span.details{
    display: block;
    font-weight: 600;
    font-size: 2rem;
    margin-bottom: 5px;
  }

  .user-details .input-box input,select{
     color: #5b5b5b;
     height: 45px;
     width: 100%;
     outline: none;
     border-radius: 10px;
     border: 2px solid #5ccbdc;
     padding: 0 15px;
     font-size: 16px;
     transition: all 0.3s ease;
}

  .user-details .input-box input:focus,
  .user-details .input-box select:focus
  /* ,.user-details .input-box input:valid */
  {
    /* border-color: #9b59b6; */
    border: 2px solid #de55de;
    box-shadow: 0 0 120px hsl(250 67% 60% / 0.5);
  }

   form .category{
     display: flex;
     flex-wrap: wrap;
     width: 100%;
   }

   form .category label{
     display: flex;
     align-items: center;
     cursor: pointer;
     font-size: initial;
     margin: 10px;
   }

   form .category label .dot{
    height: 23px;
    width: 24px;
    border-radius: 50%;
    margin-right: 16px;
    background: #d9d9d9;
    border: 10px solid transparent;
    transition: all 0.3s ease;
    border: 2px solid #5ccbdc;
  }
  
   #dot-1:checked ~ .category label .one,
   #dot-2:checked ~ .category label .two{
     background: #de55de;
   }
   form input[type="radio"]{
     display: none;
     margin: 5 0px;
   }
   form .button{
     height: 45px;
     margin: 35px 0;
   }
   form .button input{
     height: 100%;
     width: 100%;
     border-radius: 10px;
     border: none;
     color: #fff;
     font-size: 18px;
     font-weight: 600;
     letter-spacing: 1px;
     cursor: pointer;
     transition: all 0.3s ease;
     background: linear-gradient(135deg, #71b7e6, #130319);
     border: 3px solid #5ccbdc;
   }
   form .button input:hover{
    transform: scale(0.99);
    background: linear-gradient(-135deg, #71b7e6, #290637);
    }
   @media(max-width: 584px){
   .container{
    max-width: 100%;
  }
  form .user-details .input-box{
      margin-bottom: 15px;
      width: 100%;
    }
    form .category{
      width: 100%;
    }
    
    }
    @media(max-width: 459px){
    .container .content .category{
      flex-direction: column;
    }
    .appointment-container .title{
      font-size: 2.7rem;
    }
  }