/* Base modal styles (hidden by default) */
.modal {
    display: none; /* Initially hidden */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5); /* Dark semi-transparent background */
    opacity: 0; /* Initially fully transparent for fade effect */
    transition: opacity 0.3s ease-in-out; /* Transition for fade in/out */
  }
  
  .modal.show {
    display: block; /* Make visible when the 'show' class is added */
    opacity: 1; /* Fade in */
  }
  
  
  /* Modal content container */
  .modal-content {
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
    margin: 10% auto; /* Center the modal vertically */
    padding: 20px;
    /* border: 1px solid yellow; */
    width: 80%; /* Adjust as needed */
    max-width: 75%; /* Maximum width of the modal */
    border-radius: 0.5rem;
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.5);
    animation-name: fadeIn;
    animation-duration: 0.3s;
    position: relative; /* Allows for absolute positioning of the close button */
    transform: translateY(-20px); /* Start slightly off-screen for slide-down effect */
    transition: transform 0.3s ease-in-out; /* Transition for slide in/out */
    backdrop-filter: blur(20px); /* Adds a slight blur to the background */
  }
  
  .modal.show .modal-content {
    transform: translateY(0); /* Slide into view */
  }
  
  /* Modal Header */
  .modal-header {
    display: flex;
    justify-content: space-between; /* Push title and close button to edges */
    align-items: center; /* Vertically center items */
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
  }
  
  .modal-title {
    margin: 0; /* Reset default margin */
    font-size: 2.5rem;
    font-weight: bold;
  }
  
  
  /* Close button */
  .close-button {
    /* color: white; */
    background-color: transparent;
    float: right;
    font-size: 2rem; /* Larger size for easier clicking */
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease; /* Smooth transition on hover */
    position: absolute; /* Positioned within the modal-content */
    top: 1rem;
    right: 1rem;
    transition: background-color 0.3s ease-in-out;
  }
  
  .close-button:hover,
  .close-button:focus {
    color: yellow;
    text-decoration: none; /* Remove underline on hover */
  }
  
  /* Modal body */
  .modal-body {
    padding: 0;
    margin-bottom: 1rem;
    line-height: 1.5rem;
  }
  .modal-body div {
    margin: 0; 
    font-size: 1.25rem;
  }
  .modal-body a {
    color: white;
    text-decoration: none;
    font-weight: normal;
    transition: color 0.3s ease-in-out, font-size 0.2s ease-in-out;
  }
  .modal-body a:hover {
    color: yellow;
    font-size: 98%;
  }
  .no-effect {
    transition: none !important;
    transform: none !important;
    font-size: inherit !important;
  }


  /* Modal footer */
  .modal-footer {
    display: flex;
    justify-content: flex-end; /* Push buttons to the right */
    padding-top: 0.5rem;
    /* border-top: 1px solid #dee2e6; */
  }
  .modal-footer .btn {
      margin-left: 0.5rem; /* Add some horizontal space between buttons */
  }
  
  /* Fade in animation (for initial appearance before JS adds 'show') */
  @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
  }
  
  /* Responsive adjustments (optional - adjust as needed) */
  @media screen and (max-width: 600px) {
    .modal-content {
      width: 95%; /* Take up more of the screen on small devices */
      margin: 5% auto; /* Adjust margin if needed */
    }
  }
  


.form-button {
  display: inline-block;
  width: 5rem; /* Full width button */
  padding: 10px 15px;
  font-size: 16px;
  font-weight: bold;
  color: navy;
  background-color: white; /* Primary blue color */
  border: none;
  border-radius: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
}

/* Hover Effect */
.form-button:hover {
  color:navy;
  background-color: yellow; /* Darker blue on hover */
  transform: scale(1.05); /* Slight scale up */
}

/* Focus Effect */
.form-button:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}