.container {
    width: 80%; /* Limit the container to 80% of the screen width */
    max-width: 1200px; /* Set maximum width to prevent container from becoming too wide */
    margin: 0 auto; /* Center the container horizontally */

  }
  
  .grid-wrapper {
    width: 100%; /* Ensure the wrapper fills the container */
    overflow: auto; /* Hide overflowing content */
  }
  
  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjust as needed */
    grid-gap: 20px; /* Adjust the gap between grid items */
    justify-items: center; /* Center items horizontally */
  }
  
  @media (min-width: 601px) {
    .grid-container {
      grid-template-columns: repeat(3, 1fr); /* Maximum of three columns */
    }
  }
  
  .image-link {
    text-decoration: none; /* Remove default hyperlink underline */
  }
  
  .image-container {
    position: relative;
    width: 100%;
    height: 250px; /* Set height of the image container */
    overflow: hidden; /* Ensure the image does not overflow */
  }
  
  .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure the image fills the container without distortion */
  }
  
  .overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the overlay text */
    width: 80%;
    text-align: center;
    color: white;
    opacity: 0.5;
    transition: opacity 0.3s ease;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .image-container:hover .overlay-text {
    opacity: 1; /* Fully opaque text on hover */
  }

  .image-container:hover img {
    opacity: 0.5; /* Fully opaque text on hover */
  }
  
  .text-line {
    max-width: 100%; /* Adjust to fill the container */
    /* margin-bottom: 10px; */
  }
  
  .text-line:first-child {
    font-size: 24px;
    font-weight: bold;
  }
  
  .text-line:last-child {
    font-style: italic;
  }
    
  











html, body {
    position: fixed; /* Ensure the entire page is fixed */
    width: 100%; Ensure the page takes up the full width of the viewport
    overflow-x: hidden; /* Prevent horizontal scrolling */
    margin: 0;
}
  

body {
    background-color: #182c25;
    height: 100%;
}

p {
    color: gray;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 10pt;
}

h1 {
    color: gray;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 20pt;
    font-weight: 50;
    width: 100%;
}

.header-link {
    display: inline-block;
    background-color: #182c25;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-weight: bold;
    padding: 10px 10px; 
}

header {
    height: 5vh;
    width: 100%;
    display: block;
    padding: 10px 20px;
    position: fixed;
    top: 0;
    background-color: #182c25;
    z-index: 10;
}

footer {
    height: 10vh;
    width: 100%;
    display: block;
    padding: 10px 0px;
    position: fixed;
    bottom: 0;
    left:0;
    text-align: center;
    background-color: #182c25;
    z-index: 9;
}

#contact{
    background-color: white;
    color: black;
    height: 20px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}


.content {
  position: relative;
  top: 7vh;
  width: 100%;
  height: 100vh;
  align-items: center;
  text-align: center;
  margin: 0 auto;
  overflow-y: auto;
}

.homecontent {
  position: relative;
  top: 10vh;
  width: 100%;
  height: 70dvh;
  align-items: center;
  text-align: center;
  margin: 0 auto;
}

.homecontent picture img{
  display: inline-block;
  height: 70dvh;
  max-width: 100%;
  text-align: center;
  margin: 0 auto;
  object-fit: contain;
}

#picture {
  display: inline-block;
  height: 70vh;
}

.homecontent picture {
  height: 70dvh;
  max-width: 100%;
  text-align: center;
  margin: 0 auto;
}


.content picture img{
    margin: 0 auto;
}

.content picture {
  height: 100%;
  max-width: 100%;
  text-align: center;
}

#pic {
    max-height: 100%;
    max-width: 100%;
}

a:link {
    color: white;
    text-decoration: none;
}

a:visited {
    color: white;
    text-decoration: none;   
}

#buffer {
    height: 20vh;
    width: 100%;
    display: block;
}

.presscontentmob {
    height: 30vh;
    width: 85%;
    margin: auto;
    margin-bottom: 5vh;
    border: 10px;
    border-color: white;
    /* background-color: pink; */
    justify-content: center;
    align-items: center;
}

.image-link-mob {
    text-decoration: none; /* Remove default hyperlink underline */
  }
  
  .image-container-mob {
    position: relative;
    width: 100%;
    height: 100%; /* Set height of the image container */
    overflow: hidden; /* Ensure the image does not overflow */
  }
  
  .image-container-mob img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure the image fills the container without distortion */
  }






/* if desktop */
.mobile_device_380px {
    display: none;
}
.mobile_device_480px {
    display: none;
}

/* if mobile device max width 380px
@media only screen and (max-device-width: 380px) {
    .mobile_device_380px{display: block;}       
    .desktop {display: none;}
}  */

/* if mobile device max width 480px */
@media only screen and (max-device-width: 480px) {
   .mobile_device_480px{display: block;}
   .desktop {display: none;}
}