html { width: 100%; }
body {
    overflow-x: hidden; 
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0; 
}
.interactive-gallery-section {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    box-sizing: border-box;
}

.gallery-content-wrapper {
    max-width: 1000px; 
    margin: 0 auto;
    /* Allow the wrapper to grow/shrink based on remaining space */
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
}

.interactive-gallery-section h2 {
    color: rgb(34, 105, 182);
    font-size: 2.5rem;
    margin-bottom: 5px;
}

.gallery-intro {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 20px; /* Reduced margin */
}

/* --- Main Viewer Container --- */
.main-viewer-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Use flex-grow to take up most of the vertical space */
    flex-grow: 1; 
    box-shadow: 0 10px 30px rgb(0, 0, 0);
    width: 90%; /* Slight reduction in max width */
    max-width: 800px;
    height: 70vh; 
    max-height: 600px;
    margin: 20px auto;
    border-radius: 12px;
    
}

.main-image-wrapper {
    width: 90%; 
    max-width: 800px;
    
    /* KEY CHANGE: Using 70vh for height based on viewport */
    height: 70vh; 
    
    border-radius: 12px; /* Default desktop radius */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

#main-gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px; /* Default desktop radius */
}

/* --- Navigation Buttons (The side thumbnails) --- */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.3s ease;
    padding: 0; 
}

.nav-btn.left {
    left: 0;
}

.nav-btn.right {
    right: 0;
}

/* The actual thumbnail image inside the button */
.nav-thumbnail {
    width: 120px; 
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    opacity: 0.5; 
    transition: opacity 0.3s, border-color 0.3s;
}

.nav-btn:hover .nav-thumbnail {
    opacity: 1; 
    border-color: #00cfcf; 
}

/* Hide the chevron icon on desktop as the thumbnail is the main control */
.nav-btn .fas {
    display: none; 
}


/* --- Mobile Responsiveness --- */
@media (max-width: 900px) {
    
    .main-image-wrapper {
        height: 60vh; 
        border-radius: 8px; /* Smoother, less severe mobile radius */
    }
    
    #main-gallery-image {
        border-radius: 8px; /* Match image radius to wrapper */
    }
    
    /* Hide the thumbnail previews on smaller screens (less than 900px wide) 
       and show the simple arrow icons for better tapability. */
    .nav-thumbnail {
        display: none;
    }
    
    .nav-btn {
        /* General button styling for mobile */
        background: rgba(34, 105, 182, 0.8); 
        border-radius: 50%;
        padding: 10px;
        width: 40px; 
        height: 40px; 
        
        /* Reset positioning that might have been lost */
        left: unset; 
        right: unset;
    }
    
    /* ⭐⭐⭐ THE FIX: Re-establish left/right positioning explicitly for mobile ⭐⭐⭐ */
    .nav-btn.left {
        left: 10px; /* Position the left button */
    }

    .nav-btn.right {
        right: 10px; /* Position the right button */
    }

    /* Show the chevron icon on mobile */
    .nav-btn .fas {
        display: inline-block; 
        color: white;
        font-size: 1.5rem;
        position: absolute; 
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .nav-btn:hover {
        transform: translateY(-50%) scale(1.05);
    }
}

@media (max-width: 500px) {
    
    .main-image-wrapper {
        height: 50vh;
        border-radius: 5px; /* Even smaller, cleaner radius for tiny screens */
    }
    
    #main-gallery-image {
        border-radius: 5px; 
    }
}

/* Footer */
footer {
    background-color: #807e7e;
    color: #000000;
    text-align: center;
    padding: 15px 0;
    font-size: 1rem;
    border: 1px solid #000000;
    margin-bottom: 20px;
    margin: auto; 
    width: 80%; 
}