: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 h2 {
     text-align: center;
     font-weight: 600;
     font-size: 28px;
     color: #1a1a1a;
 }

 nav a h1 .hub {
     color: var(--primary-color) !important;
 }

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

 }

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

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


 .form-group input,
 .form-group textarea,
 .form-group select,
 .password input,
 .confirm input {
     width: 100%;
     padding: 12px;
     border: 1px solid #ccc;
     border-radius: 5px;
     font-size: 15px;
 }

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

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

 .password a {
    text-decoration: none;
    color: #000;
    margin-top: 10px;
    display: block;
 }

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

 .check {
     display: flex;
     gap: 10px;
     margin: 10px 0;
     align-items: center;
 }

 .check .under {
     text-decoration: underline;
 }

 .sign {
     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;
 }

 .sign:hover {
     background-color: #2196f3
     ;
 }

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

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

 .under{
    padding: 10px;
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
 }

 .under div{
    width: 50%;
    border: 1px solid rgb(209, 207, 207);
 }
 .google{
    text-align: center;
 }
 .google a {
    padding: 12px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background: #fff;
    display: flex;
    text-decoration: none;
    color: #000;
    justify-content: center;
    gap: 15px;
 }


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