/* Style for the reveal container */
.reveal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black */
    z-index: 9999; /* Ensure it's on top of everything */
    display: none; /* Initially hide the container */
    opacity: 0; /* Initially set opacity to 0 */
    transition: opacity 0.5s ease; /* Smooth transition for opacity */
    overflow-y: auto; /* Enable vertical scrolling */
    padding: 20px; /* Add padding to create space between content and edges */
    box-sizing: border-box; /* Ensure padding is included in the width calculation */
    /* Other styles */
    overflow-y: auto; /* Enable vertical scrolling */
    scroll-behavior: smooth; /* Smooth scrolling behavior */
    max-height: 100vh; /* Limit the height of the container to the viewport height */
    
}

/* Style for the reveal content */
.reveal-content {
    position: relative; /* Use relative positioning */
    border-radius: 30px;
    color: white;
    text-align: center;
    max-width: 100%; /* Ensure content doesn't exceed container width */
    box-sizing: border-box; /* Ensure padding is included in the width calculation */
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100%; /* Fill the entire height of the container */
}

/* Style for individual images */
.reveal-content img {
    max-width: calc(50% - 20px); /* Ensure images don't exceed half of container width minus margin */
    height: auto; /* Maintain aspect ratio */
    display: inline-block; /* Display images inline */
    margin: 0 10px 20px; /* Add margin to create space between images */
    border-radius: 2px; /* Add border radius */
    box-sizing: border-box; /* Ensure padding is included in the width calculation */
}

.go-back-button {
    font-family: 'Montserrat';
    padding: 15px 30px; /* Adjust padding to make the button bigger */
    font-size: 17px; /* Adjust font size */
    background-color: rgba(17, 17, 17, 0); /* Green background color */
    color: white; /* White text color */
    border: none; /* Remove border */
    border-radius: 0px; /* Add border radius */
    cursor: pointer; /* Change cursor to pointer */
    position: fixed; /* Fix the position */
    top: 0; /* Align to the top */
    left: 0; /* Align to the left */
    margin: 5px; /* Adjust margin */
    z-index: 999; /* Ensure it's on top */
    transition: opacity 0.5s ease; /* Smooth transition for opacity */
}

/* Style for the "Go Back" button on hover */
.go-back-button:hover {
    background-color: powderblue; /* Darker green background color */
}

/* CSS to hide other content when reveal container is shown */
.hideable-section.hide-other-content {
    opacity: 0; /* Set opacity to 0 */
    transition: opacity 0.5s; /* Transition opacity over 0.3 seconds */
}
.hideable-section.show-other-content {
    opacity: 1; /* Set opacity to 1 when reveal container is shown */
    transition: opacity 0.5s; /* Transition opacity over 0.3 seconds */
}