.modal-dialog.modal-95 {
      max-width: 95vw;
      width: 95vw;
    }
    /* Remove default modal padding so image can fill width nicely */
.modal-body { padding: 0; }



  /* On desktop screens (992px and up, change breakpoint if needed) */
  @media (min-width: 992px) {
    .my-custom-container {
      width: 30%;
      max-width: 1500px; /* Optional: Sets a maximum width so it doesn't get too wide */
      padding-left: 0;
      padding-right: 0;
      background-color: blue;
    }
  }



  /* Make the modal dialog max width 96% of viewport */
    .modal-96 .modal-dialog {
      max-width: 96vw;
      margin: 1.5rem auto;
    }
    /* Ensure image fills modal content */
    .modal-96 .modal-body img {
      width: 100%;
      height: auto;
      display: block;
    }


        /* Optional: pointer for clickable images */
    .card-img-top.clickable { cursor: pointer; }

a, a:hover, a:visited, a:active {
  color: inherit !important;
  text-decoration: none; /* Optional: removes the underline */
}

.foxgrey{
  color: #4a525a;



}

.btn-outline-light:hover {
  background-color: #ffffff80;
  border-color: #ffffff;
  color: #ffffff;
}
.btn-outline-light {
  background-color: #00000080;
  border-color: #ffffff;
  color: #ffffff;
}

.bartop
{
  background-color: #4a525a;
  color: white;
  margin-bottom: 90px;
}

.titleofbar
{
  font-size: 1.6rem;
  text-align: center;
}

#footer
{
  background-color: #ffffff;
  color: rgb(59, 59, 59);
  padding: 20px;
  text-align: center;
  font-size: small;
  margin-top: 60px;
}

#bline
{
  margin-right: 360px;
  text-align: center;
}

.ftbr{
  margin-top: 40px;
  margin-left: 90px;
  margin-right: 90px;
  margin-bottom: 40px;

}

.ftr{
  margin-top: 40px;
  margin-bottom: 10px;

}

.fdcc{
  background-color: #1c5186;
}


@media (min-width: 992px) {
  .modal-custom-wide {
    max-width: 90%; /* Adjust percentage as needed */
  }
}