@charset "utf-8";
/* CSS Document */

/* CSS for the modal */
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
  overflow-y: hidden;  
}

/* Modal Content/Box */
.modal-content {
  background-color: rgba(255,255,255,0.7);
  margin: 12% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Default width for most screens */
  max-width: 500px; /* Max width to limit on large screens */
  border-radius: 8px; /* Rounded corners for modern look */
}

/* General responsive adjustments */
/* Media Query for screens smaller screens */
@media (max-width: 1024px) {
  .modal-content {
    width: 39%; /* Adjust width for smaller screens */
    margin-top: 13%;
  }
}

@media (max-width: 932px) {
  .modal-content {
    width: 32%; /* Adjust width for smaller screens */
    margin-top: 10%;
  }
}

@media (max-width: 915px) {
  .modal-content {
    width: 32%; /* Adjust width for smaller screens */
    margin-top: 9%;
  }
}

@media (max-width: 912px) {
  .modal-content {
    width: 55%; /* Adjust width for smaller screens */
    margin-top: 18%;
  }
}

@media (max-width: 896px) {
  .modal-content {
    width: 32%; /* Adjust width for smaller screens */
    margin-top: 10%;
  }
}

@media (max-width: 882px) {
  .modal-content {
    width: 25%; /* Adjust width for iPhones and similar devices */
    margin-top: 10%;
  }
}

@media (max-width: 853px) {
  .modal-content {
    width: 55%; /* Adjust width for iPhones and similar devices */
    margin-top: 18%;
  }
}

@media (max-width: 820px) {
  .modal-content {
    width: 55%; /* Adjust width for iPhones and similar devices */
    margin-top: 18%;
  }
}

@media (max-width: 768px) {
  .modal-content {
    width: 90%; /* Adjust width for smaller screens */
    margin-top: 20%;
  }
}

@media (max-width: 740px) {
  .modal-content {
    width: 32%; /* Adjust width for iPhones and similar devices */
    margin-top: 11%;
  }
}

@media (max-width: 720px) {
  .modal-content {
    width: 52%; /* Adjust width for iPhones and similar devices */
    margin-top: 14%;
  }
}

@media (max-width: 667px) {
  .modal-content {
    width: 36%; /* Adjust width for iPhones and similar devices */
    margin-top: 14%;
  }
}

@media (max-width: 540px) {
  .modal-content {
    width: 74%; /* Adjust width for iPhones and similar devices */
    margin-top: 25%;
  }
}

@media (max-width: 480px) {
  .modal-content {
    width: 95%; /* Adjust width for iPhones and similar devices */
    margin-top: 25%;
  }
}

@media (max-width: 375px) {
  .modal-content {
    width: 96%; /* Slightly more adjustment for smaller iPhones */
    margin-top: 30%;
  }
}

@media (max-width: 344px) {
  .modal-content {
    width: 96%; /* Slightly more adjustment for smaller iPhones */
    margin-top: 30%;
  }
}

/* Button styles */
.button  {
  display: inline-block;
  padding: 10px 20px;
  margin-top: 10px !important;
  background-color: #c00f0c; /* Primary color */
  color: white!important;
  font-weight: 600;
  letter-spacing: 0.3em;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background-color: #1a1a1a; /* color change on hover */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}