.modal {
     display: none;
     position: fixed;
     z-index: 1000;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     background-color: rgba(0, 0, 0, 0.4);
   }
   
   .modal-content {
     background-color: #fefefe;
     margin: 10% auto;
     padding: 20px;
     border: 1px solid #ddd;
     border-radius: 5px;
     width: 80%;
     max-width: 600px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   }
   
   .close {
     color: #aaa;
     float: right;
     font-size: 24px;
     font-weight: bold;
   }
   
   .close:hover,
   .close:focus {
     color: black;
     text-decoration: none;
     cursor: pointer;
   }
   
   #enrollForm input[type="text"],
   #enrollForm input[type="email"],
   #enrollForm input[type="tel"],
   #enrollForm button[type="submit"] {
     /* align-items: center; */
     width: 60%;
     padding: 10px;
     margin: 12px auto;
     display: block;
     /* margin: ; */
     border: 1px solid #ccc;
     border-radius: 4px;
     box-sizing: border-box;
   }
   
   #enrollForm input[type="text"]:focus,
   #enrollForm input[type="email"]:focus,
   #enrollForm input[type="tel"]:focus {
     border-color: #007bff;
   }
   
   #enrollForm button[type="submit"] {
     background-color: #002347;
     color: white;
     border: none;
     cursor: pointer;
     width: 40%;
   }
   
   #enrollForm button[type="submit"]:hover {
     background: transparent;
    color: #002347;
    border: 1px solid #002347;
   }