/* PORTFOLIO / OUR WORK – Masonry Gallery Styles */
 #portfolio h2 {
     font-size: clamp(2.2rem, 9vw, 15rem);
     text-align: center;
     margin-bottom: 1rem;
     color: #007078;
     /* Use the same brand color if desired */
 }

 .gallery-grid {
     /* Use CSS columns for a masonry layout */
     column-width: clamp(20rem, 30vw, 33rem);
     column-gap: 1rem;
     margin: 0 auto;

     padding: 2rem 15rem;

     /* padding-top: 2rem;
     padding-bottom: 2rem;
     
     padding-left: 2rem;
     padding-right: 2rem; */

     /* background-color: green; */
 }



 .project-tile {
     display: inline-block;
     width: 100%;
     margin-bottom: 1rem;
     /* Ensures each tile is 1rem below the one above */
     position: relative;
     overflow: hidden;
     cursor: pointer;
 }

 .project-tile img {
     width: 100%;
     height: auto;
     display: block;
     transition: transform 0.3s ease;
 }

 .project-tile:hover img {
     transform: scale(1.05);
 }

 .overlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: rgba(0, 112, 120, 0.8);
     color: #fff;
     opacity: 0;
     transition: opacity 0.3s ease;
     display: flex;
     align-items: top;
     justify-content: center;
     text-align: center;
     padding: 1rem;
 }

 .project-tile:hover .overlay {
     opacity: 1;
 }

 .overlay-text h3 {
     margin: 0;
     font-size: 1.8rem;
 }

 .overlay-text p {
     margin: 0.5rem 0 0;
     font-size: 1rem;
 }

 /* Modal Gallery Styles */
 .modal {
     display: none;
     position: fixed;
     z-index: 2000;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     /* overflow: hidden; */
     background-color: rgba(0, 112, 120, 0.95);
 }

 .modal-content {
     /* position: absolute; */
     position: relative;
     /* margin: 2.5rem; */

     margin: auto;
     margin-top: 5vh;
     padding: 1rem;


     width: 95%;
     display: flex;
     justify-content: center;

     /* background-color: blue; */
 }


 .close {
     z-index: 2000;
     position: absolute;
     top: 10px;
     right: 5rem;
     color: #fff;
     font-size: 35px;
     font-weight: bold;
     cursor: pointer;
 }

 .slide-content {
     display: flex;
     flex-direction: column;
 }

 .slide-header .header {
     text-align: center;
     color: #fff;
     padding: 0.5rem;
 }

 .modal-slider {
     position: relative;

     /* background-color: green; */
 }

 .modal-slider .slide {
     display: none;
 }

 .modal-slider .slide.active {
     display: block;
 }

 .prev,
 .next {
     position: absolute;

     align-self: center;

     cursor: pointer;
     position: absolute;
     padding: 2rem;
     color: #fff;
     font-weight: bold;
     font-size: 4rem;
     user-select: none;
     transition: 0.3s;
     background-color: rgba(0, 0, 0, 0.4);

     z-index: 3000;

 }

 .prev:hover,
 .next:hover {
     background-color: rgba(150, 150, 150, 0.8);
 }

 .prev {
     left: 3rem;
 }

 .next {
     right: 3rem;
 }

 .slide-caption {
     text-align: center;
     color: #fff;
     padding: 0.5rem;
 }

 /* Consistent modal image height and arrow positioning */
 .modal-slider .slide img {
     width: 100%;
     height: 75vh;
     object-fit: contain;
 }

 @media (max-width: 1400px) {
     .gallery-grid {
         padding: 2rem 8rem;
     }
 }


 @media (max-width: 900px) {

     .gallery-grid {
         padding: 2rem 2rem;
     }

     .modal-content {
         padding: 0.5rem;
     }

     .prev,
     .next {
         /* font-size: 2rem;*/
         /* Hide when small enough */
         display: none;
     }

     /* 
    .modal-slider .slide img{
        height: 50vh;
    } */

     .close {
         right: 2rem;
     }
 }