.marine-life-images {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     justify-content: center;
 }

 .marine-life-images img {
     max-width: 100%;
     height: auto;
     border-radius: 10%;
     margin-bottom: 10px;
 }

 /* 📱 Mobile-specific styles */
 @media (max-width: 768px) {
     .marine-life-images img {
         min-height: 120px;
         /* Smaller height on mobile */
         min-width: 120px;
         /* Smaller width on mobile */
     }
 }

 @media (max-width: 480px) {
     .marine-life-images img {
         min-height: 100px;
         min-width: 100px;
     }
 }


 html,
 body {
     height: 100%;
     margin: 0;
     padding: 0;
     overflow: hidden;
     /* Prevents scrolling */
 }

 .map-container {
     width: 100%;
     height: 100vh;
     /* Full viewport height */
     position: absolute;
     top: 0;
     left: 0;
 }

 .leaflet-container {
     width: 100% !important;
     height: 100vh !important;
 }

 /* Modal styling */
 .modal {
     display: none;
     position: fixed;
     z-index: 9999;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.7);
 }

 .modal-content {
     display: block;
     max-width: 90%;
     max-height: 90%;
     margin: auto;
     border-radius: 10px;
 }

 iframe {
     position: absolute !important;
     top: 0 !important;
     left: 0 !important;
     width: 100% !important;
     height: 100vh !important;
     border: none !important;
 }