:root {
  --primary-color: #2196F3;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f6fbfe;
}

 .logo{
    display: flex;
    justify-content: center;
 }

 .appointment-container {
     max-width: 600px;
     margin: auto;
     background: white;
     padding: 40px;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
     border-radius: 10px;
 }

 .appointment-container a {
     text-decoration: none;
     color: #000;
 }

 .appointment-container h2 {
     text-align: center;
     margin-bottom: 25px;
     font-weight: 600;
     font-size: 28px;
     color: #1a1a1a;
 }

 .appointment-container h2 .hub {
     color: var(--primary-color);
 }

 .appointment-container .join {
     font-size: 20px;
     text-align: center;
     margin: 10px auto;
     width: 90%;

 }
 .appointment-container img {
    justify-content: center;
 }

 .form-group {
     margin-bottom: 20px;
 }

 .form-group label {
     display: block;
     margin-bottom: 6px;
     color: #051525;
     font-weight: 500;
 }


 .form-group input,
 .form-group textarea,
 .form-group select,
 .password input,
 .confirm input {
     width: 100%;
     padding: 12px;
     border: 1px solid #CFDCE6;
     border-radius: 8px;
     font-size: 15px;
     outline: none;
 }
 #select{
  position: relative;
  display: flex;
  align-items: center;
  font-size: 15px;
  padding: 12px;
  border-radius: 8px;
  justify-content: space-between;
  border: 1px solid #CFDCE6;
  cursor: pointer;
}
#dropdown{
  display: none;
  position: absolute;
  top: 45px;
  left: 0;
  background: #fff;
  box-shadow: #10182814;
}
#dropdown1 div{
  white-space: nowrap;
  border-radius: 8px;
  width: 180px;
  padding: 6px;
  border: 1px solid #CFDCE6;
}







 
 .password .eye input {
     /* width: 100%;
     padding: 12px;
     border: none;
     outline: none;
     border: 1px solid #ccc;
     border-radius: 5px;
     font-size: 15px; */
    border: none;
    outline: none;
    align-items: center;
    display: flex;
    height: inherit;
    width: inherit;
}

 .eye {
    align-items: center;
    outline:none ;
    display: flex;
     border: 1px solid #ccc;
     justify-content: space-between;
     border-radius: 5px;
     padding-right: 12px;
     width: 100%;
 }

 .eye1 {
     align-items: center;
    outline:none ;
    display: flex;
     border: 1px solid #ccc;
     justify-content: space-between;
     border-radius: 5px;
     padding-right: 12px;
     width: 100%;
 }


 .confirm .eye1 input {
     /* width: 100%;
     padding: 12px;
     border: none;
     outline: none;
     border: 1px solid #ccc;
     border-radius: 5px;
     font-size: 15px; */
    border: none;
    outline: none;
    align-items: center;
    display: flex;
    height: inherit;
    width: inherit;
}




 .password,
 .confirm {
     width: 100%;
     margin: 20px 0;
     font-size: 15px;
 }

 .password label,
 .confirm label {
     display: block;
     margin-bottom: 6px;
     color: #051525;
     font-weight: 500;
 }

 .password p {
     margin-top: 7px;
     font-size: 14px;
 }

 .check {
     display: flex;
     gap: 10px;
     margin: 20px 0;
 }



 .check a {
    color: #051525;
    text-decoration: underline;
 }


 button {
     width: 100%;
     padding: 12px;
     background-color: var(--primary-color);
     color: white;
     border: none;
     border-radius: 5px;
     font-size: 16px;
     cursor: pointer;
     transition: 0.3s ease;
 }

 button:hover {
     background-color: #2196F3;
 }

 .already {
     margin: 20px 0;
     text-align: center;
 }

 .already a {
     text-decoration: none;
     color: var(--primary-color);
 }

 footer {
    background: #f3f4f6;
    padding: 20px 0 10px;
    width: 100%;
    margin-top: 70px;
 }

 .footer-icons {
  margin: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  text-align: center;
}

.social-icons {
  display: flex;
  gap: 1.5rem;
  font-size: 1.2rem;
  color: gray;
}

.social-icons a:hover {
  color: #2196f3;
}

.social-icons a {
  color: gray;
}

.copyright {
  font-size: 0.85rem;
  color: gray;
}

 @media (max-width: 876px) {
     .appointment-container {
         border-radius: 0px;
         padding: 25px 20px;
         margin: 40px 10px;
     }

     .appointment-container h2 {
         font-size: 22px;
         font-weight: 600;
         margin-bottom: 20px;
     }

     .appointment-container .join {
         font-size: 15px;
         width: 100%;
     }

     .check h5 {
         font-size: 12px;
     }
 }