.popup { 
    display: none; /* Hidden by default */ 
    position: fixed; /* Stay in place */ 
    z-index: 1000; /* Sit on top */ 
    left: 0; 
    top: 0; 
    width: 100%; /* Full width */ 
    height: 100%; /* Full height */ 
    background-color: rgba(0, 0, 0, 0.7); /* Black background with opacity */ 
    justify-content: center; /* Center the image horizontally */ 
    align-items: center; /* Center the image vertically */ 
} 
 
.popup-image { 
    max-width: 80%; /* Responsive image */ 
    max-height: 70%; 
    border-radius: 8px; /* Optional: rounded corners */ 
    cursor: pointer;
} 


 
.close { 
    position: absolute; /* Position the close button */ 
    top: 80px; /* Distance from the top */ 
    right: 30px; /* Distance from the right */ 
    color: white; /* Close button color */ 
    font-size: 30px; /* Close button size */ 
    font-weight: bold; 
    cursor: pointer; /* Pointer cursor on hover */ 
}

@media only screen and (max-width: 768px) {
  .close { 
    position: absolute; /* Position the close button */ 
    top: 190px; /* Distance from the top */ 
    right: 30px; /* Distance from the right */ 
    color: white; /* Close button color */ 
    font-size: 30px; /* Close button size */ 
    font-weight: bold; 
    cursor: pointer; /* Pointer cursor on hover */ 
}

.popup-image { 
    max-width: 95%; /* Responsive image */ 
    max-height: 70%; 
    border-radius: 8px; /* Optional: rounded corners */ 
    cursor: pointer;
} 
  }