/* Modal Styles */
 .modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }

  .modal {
    background: white;
    padding: 20px;
    max-width: 800px;
    width: 90%;
    border-radius: 10px;
    overflow-y: scroll;
    max-height: 100vh;
    animation: fadeIn 0.5s ease-in-out;
   -ms-overflow-style: none; 
   scrollbar-width: none; 
   text-align: justify; 

}
  
 
  
  /* Animation for the modal */
@keyframes fadeIn {
from {
  opacity: 0;
  transform: translateY(-50px);
}
to {
  opacity: 1;
  transform: translateY(0);
}
}

.modal {
animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
from {
  opacity: 0;
  transform: translateY(-50px);
}
to {
  opacity: 1;
  transform: translateY(0);
}
}
.modal-overlay .modal p{
    font-size: 14px;
    text-align: justify;
    margin: 10px;

  }

.modal h2 {
color: #00bffe; 
font-size: 18px; 
font-weight: bold;
margin-left: 10px;
}
 .modal h2{
  margin-bottom: auto;
 }
 .modal h1{
  text-align: center;
  color: #305ecc;
  font-size: 24px;
  padding: 20px;
  font-family: "Jost", sans-serif;
 }


  .close-btn {
    background: #00bffe;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    float: right;
    cursor: pointer;
  }
  ::-webkit-scrollbar {
width: 20px; 
}

 ::-webkit-scrollbar-thumb {
background: #7a7a7a; 
border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
background: #707275; 
}

::-webkit-scrollbar-track {
background: #f0f0f0; 
}




  @media (max-width: 768px) {
    .content {
      flex-direction: column;
      text-align: center;
    }

    .info {
      text-align: center;
    }

    .contact-info p {
      justify-content: center;

    }
      .button{
        justify-content:center ;
        text-align: center;

      }
    }