/* This will now work because the checkbox is a sibling of navbar-container-bottom */
#navbar-toggle:checked ~ .navbar-container-bottom {
    border-color: transparent; /* Change only the border color */
    width: 420px;
    opacity: 1;
    visibility: visible;
}

.navbar-icon {
    position: fixed;
    top: 12px;
    left: 12px;
    margin-left: 6px;
    color: #FEE185; /* Golden color for the icon */
    font-size: 36px;
    cursor: pointer;
    z-index: 200; /* Very high z-index to be above everything */

    /* Prevent text selection */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    
    /* Prevent touch highlight on mobile */
    -webkit-tap-highlight-color: transparent;
    
    /* Prevent focus outline */
    outline: none;
}

.navbar-menu-head {
    position: fixed;
    top: 18px;
    left: 60px;
    margin-left: 6px;
    font-size: 36px;
    white-space: nowrap;
    color: #AFE69B;
    opacity: 0;
    visibility: hidden;
    z-index: 200; /* Match navbar icon z-index */
    cursor: default;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Style for navbar menu head link */
.navbar-menu-head a {
    color: inherit; /* Inherit the color from parent */
    text-decoration: none; /* Remove underline */
    cursor: pointer; /* Show pointer cursor on hover */
}

/* Ensure hover state doesn't change appearance */
.navbar-menu-head a:hover {
    color: inherit;
    text-decoration: none;
}

/* Ensure visited state doesn't change appearance */
.navbar-menu-head a:visited {
    color: inherit;
}

/* Ensure active state doesn't change appearance */
.navbar-menu-head a:active {
    color: inherit;
}

#navbar-toggle {
    display: none;
}

#navbar-toggle:checked ~ .navbar-icon {
    color: #AFE69B; /* Change to green when active */
}

/* Show the menu head when checkbox is checked */
#navbar-toggle:checked ~ .navbar-menu-head {
    opacity: 1;
    visibility: visible;
}

.navbar-container-bottom {
    background-color: black;
    height: 90%;
    margin-top: 6px;
    margin-left: 6px;
    width: 360px;
    justify-content: center;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 150; /* Higher than banner but lower than icon */
    border: none;
    box-shadow: 
        0 0 15px 5px rgba(250, 216, 106, 0.8),
        0 0 30px 10px rgba(250, 216, 106, 0.5); /* Brighter, more pronounced glow */
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); /* Smoother easing */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overflow-clip-margin: 20px; /* Increased margin for shadow */
}


/* Adjust for mobile */
@media (max-width: 768px) {
    .navbar-container-bottom::before,
    .navbar-container-bottom::after {
        width: 70%; /* Match the width of navbar on mobile */
        left: 10%; /* Center the fade effect */
    }

    /* Add fade-out effect at top and bottom of scrollable navbar */
.navbar-container-bottom::before {
    content: "";
    position: fixed;
    top: 16px;
    left: 48px;
    right: 0;
    height: 90px; /* Height of the fade effect */
    background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none; /* Allow clicks to pass through */
    z-index: 52; /* Higher than the menu content */
    }

/* Bottom fade-out effect */
.navbar-container-bottom::after {
    content: "";
    position: fixed;
    left: 56px;
    right: 0;
    bottom: 10px;
    height: 90px; /* Height of the fade effect */
    background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none; /* Allow clicks to pass through */
    z-index: 52; /* Higher than the menu content */
    }
}

html {
    background-color: black;
}

html::-webkit-scrollbar {
    display: none;
}

/* For Firefox */
html {
    scrollbar-width: none;
}

/* For IE and Edge */
html {
    -ms-overflow-style: none;
}

.taco-pink {
    color: #EEB3D3;
}

.ally-pink {
    color: #FE85FE
}

/* Ensure body also has no scrollbar */
body {
    overflow: hidden; /* Option 1: Prevent scrolling completely */
    /* OR */
    overflow-y: scroll; /* Option 2: Allow scrolling but hide scrollbar */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Adjust the navbar-menu container */
.navbar-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: 6vh; /* Add top padding instead of margin on summary */
    padding-bottom: 2vh; /* Add bottom padding for scrolling space */
    min-height: min-content; /* Ensure content can be smaller than container */
     overscroll-behavior: none;
    z-index: 51; /* Ensure menu content is above the container */
}

.navbar-menu summary {
    color: white;
    font-size: 28px;
    text-decoration: underline;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0; /* Remove the top margin */
}

/* Remove the dropdown arrow from details/summary */
details > summary {
    list-style: none;
    outline: none;
}

/* For Webkit browsers (Chrome, Safari, etc.) */
details > summary::-webkit-details-marker {
    display: none;
}

/* For Firefox */
details > summary {
    display: block; /* Ensures proper layout */
}

/* For older browsers that might still show a marker */
details > summary::marker {
    display: none;
    content: "";
}

.navbar-menu details {
    margin-bottom: 24px;
}

.dropdown-content {
    text-align: center;
    text-decoration: none ;
    font-size: 28px !important;
    color: white;
    margin-top: 12px;
}

summary {
    text-align: center !important;
}

.navbar-menu .dropdown-content:nth-of-type(2) {
    margin-top: 32px
}
.navbar-menu .dropdown-content:nth-of-type(3) {
    margin-top: 32px
}
.navbar-menu .dropdown-content:nth-of-type(4) {
    margin-top: 32px;
}

.line {
    border-top: 1px solid #fad86a;
    width: 90%;
    margin-bottom: 12px;
}

.dropdown-content:hover {
    color: #007bff !important;
    text-decoration: underline !important;
    transform: scale(1.05);
    transition: all 0.2s ease;
    cursor: pointer;
}

summary, .dropdown-content, .navbar-menu-head {
    /* Prevent text selection */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    
    /* Prevent touch highlight on mobile */
    -webkit-tap-highlight-color: transparent;
    
    /* Prevent focus outline */
    outline: none;
}

html, body {
    overflow: hidden; /* Prevent scrolling on the main document */
    height: 100%; /* Ensure full height */
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Structure the page with header, content, and footer areas */
body {
    display: block; /* Change from flex to block layout */
    min-height: 100vh;
}

/* Banner at the top of the page */
.banner {
    background: url('homebanner.jpg') center 20%/cover no-repeat;
    height: 45rem;
    width: 100%;
    position: relative;
    z-index: 100; /* Lower than navbar elements */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    overflow: visible; /* Allow the gradient to extend outside */
}

/* Add gradient fade-out effect under banner */
.banner::after {
    content: "";
    position: absolute;
    bottom: -100px; /* Extend below the banner */
    left: 0;
    width: 100%;
    height: 100px; /* Height of the gradient */
    background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    z-index: 10; /* Above galleries but below content */
    pointer-events: none; /* Allow clicks to pass through */
}

/* Adjust banner image position on mobile */
@media (max-width: 768px) {
    .banner {
        background-position: 47.5% 20%; /* Move image slightly to the left (40% instead of center/50%) */
    }
    
    .banner-content {
        font-size: 28px; /* Keep the existing font size adjustment */
    }
}

.banner-content {
    color: white;
    font-size: 36px; /* Reduced from 48px */
    font-family: 'Playfair Display', serif;
    text-align: center;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

/* Make banner text even smaller on mobile */
@media (max-width: 768px) {
    .banner-content {
        font-size: 28px; /* Even smaller on mobile */
    }
}

/* Text glow effect for headings or important text */
.glow-text {
    color: white;
    text-shadow: 
        0 0 2px #8a7535,
        0 0 4px #a08940,
        0 0 6px #b69c4c,
        0 0 8px #c7ad58;
}

/* Content area with no scrolling */
.content {
    position: relative;
    overflow: visible; /* Disable content scrolling */
    z-index: 5;
    height: auto; /* Allow content to determine its height */
    min-height: auto;
    max-height: none;
}

.gaia-green {
    color: #AFE69B;
}

.venm-purple {
    color: #CD86FF;
}


.header h3 {
    font-size: 18px;
    color: #c7ad58; /* Subtle gold color matching the glow */
    font-weight: 600; /* Lighter weight for contrast with h1 */
    margin-top: -5px; /* Negative margin to pull it closer to h1 */
    letter-spacing: 2px; /* Slightly spaced letters for elegance */
    text-transform: uppercase; /* All caps for a distinguished look */
    opacity: 1; /* Slightly transparent */
    align-self: center; /* Align to the right side of the header */
}

/* Ensure the header container allows for alignment */
.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    align-self: center;
}

.content-columns {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    margin-top: 2rem;
    width: 100%; /* Ensure full width */
    max-width: 100%; /* Use full available width */
}

.column {
    flex: 1;
    padding: 1rem;
    color: white;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.column h2 {
    text-align: center;
}

.column p {
    font-size: 24px;
}

.header h1 {
    text-align: center; /* Ensure header text is centered */
}

.header-line {
    border-top: 1px solid #fad86a;
    width: 75%; /* Slightly wider than content columns (70%) */
    max-width: 1100px; /* Slightly wider than content columns max-width */
    margin: 2rem auto; /* Center the line */
}

/* Adjust for medium screens */
@media (min-width: 769px) and (max-width: 1999px) {
    .header-line {
        width: 85% !important; /* Slightly wider than content columns (80%) */
        max-width: 1100px !important;
    }
}

/* Position scrollbar flush with the right edge of the page */
html {
    direction: ltr;
    overflow-y: auto;
    margin-right: 0;
    padding-right: 0;
}

body {
    margin-right: 0;
    padding-right: 0;
    overflow-y: auto;
    width: 100%;
}

/* Scrollbar styling for Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 12px; /* Width of the scrollbar */
    box-shadow: 
        0 0 15px 5px rgba(250, 216, 106, 0.8),
        0 0 30px 10px rgba(250, 216, 106, 0.5);
}

/* Hide default scrollbar buttons in WebKit */
::-webkit-scrollbar-button {
    display: none;
}

/* Scrollbar styling for Firefox */
* {
    scrollbar-width: auto;
    scrollbar-color: rgba(250, 216, 106, 0.8) #000000;
}

/* Ensure no padding or margin is pushing the scrollbar away from edge */
.main-content, main, .content {
    margin-right: 0;
    padding-right: 0;
    width: 100%;
}

body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Adjust content padding to accommodate custom arrows */
.content {
    padding: 2.5rem 2rem;
}


.column h2 {
    text-decoration: underline;
    text-decoration-color: #c7ad58; /* Subtle gold color matching the glow */
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
    margin-bottom: 1rem;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color: #c7ad58;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Playfair Display', serif;
}

/* Self-scrolling image gallery */
.image-gallery-container {
    width: 100%;
    overflow: hidden;
    margin: 2rem 0;
    position: relative;
}

.image-gallery {
    display: flex;
    width: calc(250px * 10); /* Width of images × number of images */
    animation: scroll 30s linear infinite;
}

.image-gallery:hover {
    animation-play-state: paused; /* Pause on hover */
}

.gallery-item {
    min-width: 250px;
    height: 180px;
    margin: 0 10px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(250, 216, 106, 0.5);
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(250, 216, 106, 0.8);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-250px * 5)); /* Half the total width */
    }
}

/* Fade edges of the gallery */
.image-gallery-container::before,
.image-gallery-container::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.image-gallery-container::before {
    left: 0;
    background: linear-gradient(to right, black, transparent);
}

.image-gallery-container::after {
    right: 0;
    background: linear-gradient(to left, black, transparent);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .gallery-item {
        min-width: 200px;
        height: 150px;
    }
    
    .image-gallery {
        width: calc(200px * 10);
    }
    
    @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-200px * 5));
        }
    }
}

/* Vertical self-scrolling image gallery (right side) */
.vertical-gallery-container {
    position: absolute; /* Keep absolute instead of fixed */
    right: 10%;
    top: 45rem;
    width: 200px;
    height: auto;
    max-height: calc(100vh - 45rem);
    overflow: visible;
    z-index: 10;
    padding-right: 20px;
    transform: translateZ(0); /* Force hardware acceleration */
    will-change: transform; /* Optimize for animations */
}

.vertical-gallery {
    display: flex;
    flex-direction: column;
    height: calc(210px * 13);
    animation: scrollVertical 60s linear infinite;
    padding: 0 20px;
}

.vertical-gallery:hover {
    animation-play-state: paused;
}

/* Specific styles for right gallery items (circular) */
.vertical-gallery-container .vertical-gallery-item {
    position: relative;
    min-height: 210px;
    width: 210px;
    margin: 20px 0;
    border-radius: 50%;
    overflow: visible;
    transition: transform 0.3s ease;
    pointer-events: auto;
}

.vertical-gallery-container .vertical-gallery-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 
        0 0 15px 5px rgba(250, 216, 106, 0.8),
        0 0 30px 10px rgba(250, 216, 106, 0.5);
    z-index: -1;
}

.vertical-gallery-container .vertical-gallery-item img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    position: relative;
    z-index: 1;
}

@keyframes scrollVertical {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(calc(-250px * 6)); /* 250px = image height + margins */
    }
}

/* Add these styles to create a seamless loop */
.vertical-gallery, .left-vertical-gallery {
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    will-change: transform;
    backface-visibility: hidden;
}

/* Clone the first set of images at the end to create seamless transition */
.vertical-gallery::after, .left-vertical-gallery::after {
    content: "";
    display: block;
    height: 1px; /* Minimal height to prevent layout issues */
    opacity: 0;
}

/* Fade edges of the gallery - make them scroll with content */
.vertical-gallery-container::before,
.vertical-gallery-container::after {
    content: "";
    position: absolute; /* Keep absolute instead of fixed */
    width: 100%;
    height: 80px;
    left: 0;
    z-index: 20;
    pointer-events: none;
}

.vertical-gallery-container::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}

.vertical-gallery-container::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
}

/* Left vertical self-scrolling image gallery */
.left-vertical-gallery-container {
    position: absolute; /* Keep absolute instead of fixed */
    left: 10%;
    top: 45rem;
    width: 200px;
    height: auto;
    max-height: calc(100vh - 45rem);
    overflow: visible;
    z-index: 10;
    padding-left: 20px;
    transform: translateZ(0); /* Force hardware acceleration */
    will-change: transform; /* Optimize for animations */
}

.left-vertical-gallery {
    display: flex;
    flex-direction: column;
    height: calc(210px * 13); /* Increased to match right gallery */
    animation: scrollVerticalReverse 30s linear infinite;
    padding: 0 20px;
}

.left-vertical-gallery:hover {
    animation-play-state: paused; /* Pause on hover */
}

@keyframes scrollVerticalReverse {
    0% {
        transform: translateY(calc(-250px * 17)); /* Exactly match the number of images in first set */
    }
    100% {
        transform: translateY(0);
    }
}

/* Ensure container heights match content exactly */
.left-vertical-gallery {
    height: calc(250px * 34); /* Total height for all images (17 original + 17 duplicates) */
    animation: scrollVerticalReverse 120s linear infinite; /* Longer duration for more images */
}

/* Fade edges of the left gallery - make them scroll with content */
.left-vertical-gallery-container::before,
.left-vertical-gallery-container::after {
    content: "";
    position: absolute; /* Keep absolute instead of fixed */
    width: 100%;
    height: 80px;
    left: 0;
    z-index: 20;
    pointer-events: none;
}

.left-vertical-gallery-container::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}

.left-vertical-gallery-container::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
}

/* Adjust content padding to accommodate both galleries */
.content {
    padding: 2.5rem 2rem; /* Base padding */
    padding-right: 20%; /* Space for right gallery */
    padding-left: 20%; /* Space for left gallery */
    max-width: 1400px; /* Limit maximum width */
    margin: 0 auto; /* Center content by default */
}

/* Improve responsive behavior for different screen sizes */
@media (max-width: 1500px) {
    .left-vertical-gallery-container {
        display: none; /* Hide left gallery at 1500px */
    }
    
    .content {
        padding-left: 2rem !important; /* Minimal left padding */
        padding-right: 2rem !important; /* Minimal right padding */
        margin-left: 0 !important; /* Left alignment */
        margin-right: 0 !important; /* No right margin needed */
        max-width: 100% !important; /* Use full width */
        width: 100% !important; /* Full width */
    }
    
    .content-columns {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .column {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Show mobile gallery instead of vertical galleries */
    .vertical-gallery-container {
        display: none; /* Hide right gallery */
    }
    
    .mobile-horizontal-gallery-container {
        display: block; /* Show mobile gallery */
    }
}

/* Add bottom padding to content to prevent overlap with mobile gallery */
@media (max-width: 1500px) {
    .content {
        padding-bottom: 250px !important; /* Add padding to prevent content being hidden behind mobile gallery */
    }
    
    /* Ensure mobile gallery is visible */
    .mobile-horizontal-gallery-container {
        position: fixed; /* Change back to fixed for better mobile experience */
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 50;
    }
}

/* Hide both vertical galleries completely on smaller screens */
@media (max-width: 1024px) {
    .left-vertical-gallery-container,
    .vertical-gallery-container {
        display: none;
    }
}

/* Add more specific adjustments for smaller screens */
@media (max-width: 1300px) {
    .vertical-gallery-container {
        width: 160px; /* Make smaller */
    }
    
    .content {
        width: calc(100% - 180px) !important;
        margin-right: 180px !important;
        max-width: calc(100% - 180px) !important;
    }
}

/* Add even more specific adjustments for even smaller screens */
@media (max-width: 1100px) {
    .vertical-gallery-container {
        width: 140px; /* Make even smaller */
    }
    
    .content {
        width: calc(100% - 160px) !important;
        margin-right: 160px !important;
        max-width: calc(100% - 160px) !important;
    }
}

/* Hide both galleries completely on smaller screens */
@media (max-width: 1024px) {
    .left-vertical-gallery-container,
    .vertical-gallery-container {
        display: none;
    }
}

/* Add a new media query for larger screens */
@media (min-width: 1400px) {
    .content {
        padding-right: 250px;
        padding-left: 250px;
    }
    
    .left-vertical-gallery-container {
        left: 8%;
    }
    
    .vertical-gallery-container {
        right: 8%;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .content {
        padding-right: 230px;
        padding-left: 230px;
    }
    
    .left-vertical-gallery-container {
        left: 5%;
    }
    
    .vertical-gallery-container {
        right: 5%;
    }
}

@media (min-width: 1025px) and (max-width: 1199px) {
    .content {
        padding-right: 210px;
        padding-left: 210px;
    }
    
    .left-vertical-gallery-container {
        left: 2%;
    }
    
    .vertical-gallery-container {
        right: 2%;
    }
}

/* Left vertical self-scrolling image gallery - rectangular style */
.left-vertical-gallery-container .vertical-gallery-item {
    position: relative;
    min-height: 80px; /* Reduced height for more rectangular shape */
    width: 250px; /* Maintain width */
    margin: 20px 0;
    border-radius: 8px;
    overflow: visible;
    transition: transform 0.3s ease;
    pointer-events: auto;
    display: flex; /* Add flex display */
    justify-content: center; /* Center horizontally */
}

/* Ensure container has enough width for the wider images */
.left-vertical-gallery-container {
    width: 270px; /* Increased to accommodate wider images */
}

/* For extremely wide screens, adjust positioning and maintain rectangular shape */
@media (min-width: 2400px) {
    .vertical-gallery-container {
        right: 10%;
    }
    
    .left-vertical-gallery-container {
        left: 10%;
        width: 270px; /* Maintain width for wider images */
    }
    
    .left-vertical-gallery-container .vertical-gallery-item {
        min-height: 100px; /* Keep the same height */
        width: 250px; /* Keep the same width */
    }
}

/* Only show vertical galleries and narrow content on very large screens (2000px or wider) */
@media (min-width: 2000px) {
    .vertical-gallery-container,
    .left-vertical-gallery-container {
        display: block;
    }
    
    .left-vertical-gallery-container {
        width: 270px; /* Maintain width for wider images */
    }
    
    .left-vertical-gallery-container .vertical-gallery-item {
        min-height: 100px; /* Keep the same height */
        width: 250px; /* Keep the same width */
    }
}

/* Adjust left gallery container position to account for wider images */
@media (min-width: 2000px) {
    .left-vertical-gallery-container {
        left: 2%; /* Adjusted to account for wider images */
    }
}

.left-vertical-gallery-container .vertical-gallery-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: -25%; /* Shift shadow left to account for wider image */
    width: 150%; /* Match image width */
    height: 100%;
    border-radius: 8px;
    box-shadow: 
        0 0 15px 5px rgba(250, 216, 106, 0.8),
        0 0 30px 10px rgba(250, 216, 106, 0.5);
    z-index: -1;
    transform: none; /* Remove the scale transform */
}

.left-vertical-gallery-container .vertical-gallery-item img {
    width: 150%;
    height: 100%;
    border-radius: 8px; /* Match the container's border radius */
    object-fit: cover;
    object-position: center;
    position: relative;
    z-index: 1;
}

/* Adjust animation timing for the rectangular images */
.left-vertical-gallery {
    animation: scrollVerticalReverse 100s linear infinite; /* Adjusted timing */
}

/* Mobile horizontal gallery - positioned directly after content */
.mobile-horizontal-gallery-container {
    display: none;
    position: relative !important;
    width: 100%;
    overflow: hidden;
    height: 200px;
    padding: 15px 0; /* Reduced padding */
    background: linear-gradient(to top, rgba(0,0,0,1) 70%, rgba(0,0,0,0.8) 90%, rgba(0,0,0,0) 100%);
    z-index: 50;
    margin-top: -20px !important; /* Negative margin to pull it up */
    bottom: auto !important;
    left: auto !important;
}

/* Remove any margins from elements before the gallery */
.content > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Ensure content has no bottom spacing */
.content {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Tighten spacing in content wrapper */
.content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0; /* No gap between elements */
}

/* Add negative margin to gallery container in all views */
@media (max-width: 1024px), (min-width: 1025px) {
    .mobile-horizontal-gallery-container {
        margin-top: -20px !important;
    }
}

/* Add spacing to content instead */
.content {
    margin-bottom: 0 !important; /* Remove bottom margin */
    padding-bottom: 0 !important; /* Remove bottom padding */
}

/* Add a wrapper for the content that includes both text and gallery */
.content-wrapper {
    display: flex;
    flex-direction: column;
}

/* Add specific spacing for mobile view */
@media (max-width: 1024px) {
    .content {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .mobile-horizontal-gallery-container {
        margin-top: 0;
    }
}

/* Override all media queries that might set fixed positioning */
@media (max-width: 1024px) {
    .mobile-horizontal-gallery-container {
        display: block;
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
    }
}

@media (max-width: 1500px) {
    .mobile-horizontal-gallery-container {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
    }
}

/* Override any other instances that might set fixed positioning */
@media (min-width: 2000px) {
    .mobile-horizontal-gallery-container {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
    }
}

/* Remove any fixed positioning that might be set elsewhere */
.mobile-horizontal-gallery-container {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
}

/* Remove fixed positioning for mobile view */
@media (max-width: 1024px) {
    .mobile-horizontal-gallery-container {
        display: block;
        position: relative; /* Ensure it's relative, not fixed */
        bottom: auto;
        left: auto;
    }
    
    .content {
        padding-bottom: 2rem !important; /* Reduce padding since gallery isn't fixed */
    }
}

/* Override any fixed positioning in other media queries */
@media (max-width: 1500px) {
    .mobile-horizontal-gallery-container {
        position: relative;
        bottom: auto;
        left: auto;
    }
}

.mobile-horizontal-gallery {
    display: flex;
    width: calc(200px * 20); /* Width to accommodate all images */
    animation: scrollHorizontal 60s linear infinite;
    align-items: center; /* Center items vertically */
    height: 100%;
}

/* Base gallery item styles */
.mobile-horizontal-gallery .gallery-item {
    min-width: 200px;
    height: 150px;
    margin: 0 20px; /* Increased margin for more space between images */
    overflow: hidden;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Circular gallery items (from right gallery) */
.mobile-horizontal-gallery .gallery-item.circular {
    min-width: 150px;
    height: 150px; /* Equal height and width for perfect circle */
    border-radius: 50%;
    overflow: visible;
    position: relative;
    box-shadow: none; /* Remove default shadow */
}

.mobile-horizontal-gallery .gallery-item.circular::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 
        0 0 15px 5px rgba(250, 216, 106, 0.8),
        0 0 30px 10px rgba(250, 216, 106, 0.5);
    z-index: -1;
}

.mobile-horizontal-gallery .gallery-item.circular img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    position: relative;
    z-index: 1;
}

/* Rectangular gallery items (from left gallery) */
.mobile-horizontal-gallery .gallery-item.rectangular {
    border-radius: 8px;
    overflow: visible; /* Allow glow to extend beyond borders */
    position: relative;
    box-shadow: none; /* Remove default shadow */
}

.mobile-horizontal-gallery .gallery-item.rectangular::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-shadow: 
        0 0 15px 5px rgba(250, 216, 106, 0.6),
        0 0 30px 10px rgba(250, 216, 106, 0.3);
    z-index: -1;
}

.mobile-horizontal-gallery .gallery-item.rectangular img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
    object-position: center;
    position: relative;
    z-index: 1;
}

.mobile-horizontal-gallery .gallery-item:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(250, 216, 106, 0.8);
}

@keyframes scrollHorizontal {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-220px * 10)); /* Adjusted for new spacing (200px + 20px margin) */
    }
}

/* Fade edges of the gallery */
.mobile-horizontal-gallery-container::before,
.mobile-horizontal-gallery-container::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    top: 0;
}

.mobile-horizontal-gallery-container::before {
    left: 0;
    background: linear-gradient(to right, black, transparent);
}

.mobile-horizontal-gallery-container::after {
    right: 0;
    background: linear-gradient(to left, black, transparent);
}

/* Show mobile gallery on smaller screens */
@media (max-width: 1024px) {
    .mobile-horizontal-gallery-container {
        display: block;
    }
}

/* Fix right-side cutoff for vertical galleries */
.vertical-gallery-container {
    position: absolute; /* Change from fixed to absolute */
    right: 5%;
    top: 13.75rem;
    width: 200px;
    height: calc(100vh - 13.75rem);
    overflow: visible; /* Allow shadows to extend beyond container */
    z-index: 10;
    padding-right: 20px; /* Add padding to prevent shadow cutoff */
}

.left-vertical-gallery-container {
    position: absolute; /* Change from fixed to absolute */
    left: 5%;
    top: 13.75rem;
    width: 200px;
    height: calc(100vh - 13.75rem);
    overflow: visible; /* Allow shadows to extend beyond container */
    z-index: 10;
    padding-left: 20px; /* Add padding to prevent shadow cutoff */
}

/* Ensure gallery items have enough space for shadows */
.vertical-gallery-container .vertical-gallery-item,
.left-vertical-gallery-container .vertical-gallery-item {
    width: 170px;
    min-height: 170px;
    margin: 20px auto;
    position: relative;
    overflow: visible; /* Ensure shadows aren't cut off */
}

/* Ensure main content has position relative for absolute positioning context */
main, .main-content {
    position: relative;
    z-index: 5;
    overflow: visible !important;
}

/* Mobile gallery positioning */
@media (max-width: 768px) {
    /* Ensure mobile gallery is visible and fixed to bottom */
    .mobile-horizontal-gallery-container {
        display: block;
        position: fixed !important;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 180px; /* Slightly reduced height */
        z-index: 50;
        background: linear-gradient(to top, rgba(0,0,0,1) 70%, rgba(0,0,0,0.8) 90%, rgba(0,0,0,0) 100%);
    }
    
    /* Add padding to content to prevent overlap with fixed gallery */
    .content, 
    .mobile-content-columns {
        padding-bottom: 200px !important; /* Ensure enough space for the gallery */
    }
    
    /* Override any other positioning styles */
    .mobile-horizontal-gallery-container[style*="position: relative"],
    .mobile-horizontal-gallery-container[style*="position: absolute"] {
        position: fixed !important;
        bottom: 0 !important;
    }
}

/* Ensure mobile gallery is hidden on larger screens */
@media (min-width: 2000px) {
    .mobile-horizontal-gallery-container {
        display: none !important;
    }
}

/* Center gallery items within container */
.vertical-gallery-container .vertical-gallery,
.left-vertical-gallery-container .vertical-gallery {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
    width: 100%;
}

.vertical-gallery-container .vertical-gallery-item,
.left-vertical-gallery-container .vertical-gallery-item {
    width: 170px; /* Reduce width */
    min-height: 170px; /* Match width for circular items */
    margin: 20px auto; /* Center items */
}

/* Adjust content padding to accommodate galleries */
@media (min-width: 1400px) {
    .content {
        padding-right: 220px; /* Reduce padding */
        padding-left: 220px; /* Reduce padding */
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .content {
        padding-right: 210px; /* Reduce padding */
        padding-left: 210px; /* Reduce padding */
    }
}

@media (min-width: 1025px) and (max-width: 1199px) {
    .content {
        padding-right: 200px; /* Reduce padding */
        padding-left: 200px; /* Reduce padding */
    }
}

/* Fix shadow cutoff for left gallery */
.left-vertical-gallery-container {
    position: absolute;
    left: 5%;
    top: 13.75rem;
    width: 230px; /* Increase width */
    height: calc(100vh - 13.75rem);
    overflow: visible; /* Allow shadows to extend beyond container */
    z-index: 10;
    padding-left: 30px; /* Increase padding to prevent shadow cutoff */
    padding-right: 30px; /* Add right padding as well */
}

/* Adjust left gallery items to prevent shadow cutoff */
.left-vertical-gallery-container .vertical-gallery-item {
    width: 170px;
    min-height: 170px;
    margin: 20px auto;
    position: relative;
    overflow: visible; /* Ensure shadows aren't cut off */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Ensure shadow is visible but not too large */
}

/* Ensure left gallery has proper positioning */
.left-vertical-gallery {
    position: relative;
    width: 100%;
    overflow: visible;
}

/* Reset overflow properties to ensure scrolling works properly */
html, body {
    overflow-y: auto;
    height: 100%;
    min-height: 100vh;
}

/* Fix content container to prevent excessive scrolling */
.content {
    position: relative;
    overflow-y: auto;
    height: auto;
    min-height: calc(100vh - 13.75rem);
    max-height: 100vh;
    z-index: 5;
}

/* Ensure content columns have proper height */
.content-columns {
    overflow: visible;
    height: auto;
    max-height: 100vh;
}

/* Fix vertical galleries to stay within viewport */
.vertical-gallery-container,
.left-vertical-gallery-container {
    position: absolute;
    height: auto;
    max-height: calc(100vh - 13.75rem);
    overflow: visible; /* Changed from hidden to visible */
    pointer-events: none;
}

/* Ensure main content area has proper scroll behavior */
main, .main-content {
    position: relative;
    z-index: 5;
    overflow: auto;
    max-height: 100vh;
}

/* Override any fixed positioning for large screens */
@media (min-width: 2000px) {
    .vertical-gallery-container,
    .left-vertical-gallery-container {
        position: absolute !important; /* Force absolute positioning */
        top: 13.75rem;
        height: auto;
        max-height: calc(100vh - 13.75rem);
    }
    
    /* Ensure content has proper positioning context */
    main, .main-content {
        position: relative;
        overflow: visible;
    }
    
    /* Make gallery items clickable */
    .vertical-gallery-item,
    .left-vertical-gallery-item {
        pointer-events: auto;
    }
}

/* Ensure galleries scroll with the page */
.vertical-gallery-container {
    right: 5%; /* Decreased from 20% to position closer to the edge */
    top: 13.75rem;
}

.left-vertical-gallery-container {
    left: 5%; /* Decreased from 20% to position closer to the edge */
    top: 13.75rem;
}

/* Add specific fix for mobile */
@media (max-width: 1024px) {
    .content {
        overflow-y: auto;
        height: auto;
        padding-bottom: 250px; /* Keep space for mobile gallery */
    }
}

/* Mobile horizontal gallery positioning */
@media (max-width: 1024px) {
    .mobile-horizontal-gallery-container {
        display: block;
        position: fixed; /* Change back to fixed for proper bottom positioning */
        bottom: 0;
        left: 0;
        width: 100%;
        height: 200px;
        z-index: 50;
    }
    
    .content {
        padding-bottom: 250px !important; /* Ensure enough space for the fixed gallery */
    }
}

/* Ensure mobile gallery is visible and properly positioned */
@media (max-width: 1500px) {
    .vertical-gallery-container,
    .left-vertical-gallery-container {
        display: none;
    }
    
    .mobile-horizontal-gallery-container {
        display: block;
    }
}

/* Hide vertical galleries for screens less than 2000px wide */
@media (max-width: 1999px) {
    .vertical-gallery-container,
    .left-vertical-gallery-container {
        display: none !important;
    }
    
    /* Show mobile gallery instead */
    .mobile-horizontal-gallery-container {
        display: block;
    }
    
    /* Adjust content padding since galleries are hidden */
    .content {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Only show vertical galleries and narrow content on very large screens (2000px or wider) */
@media (min-width: 2000px) {
    .vertical-gallery-container,
    .left-vertical-gallery-container {
        display: block;
    }
    
    /* Narrow the content area to create a more readable layout */
    .content {
        margin: 0 auto !important; /* Center the content */
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
    
    /* Position galleries with less space from edges */
    .vertical-gallery-container {
        right: 5%; /* Decreased to position closer to edge */
    }
    
    .left-vertical-gallery-container {
        left: 5%; /* Decreased to position closer to edge */
    }
    
    /* Adjust column widths for better readability */
    .content-columns {
        width: 100% !important;
    }
    
    .column {
        width: 100% !important; /* Full width columns */
        max-width: 100% !important;
    }
}

/* For extremely wide screens, adjust positioning */
@media (min-width: 2400px) {
    .vertical-gallery-container {
        right: 10%; /* Decreased to position closer to edge */
    }
    
    .left-vertical-gallery-container {
        left: 10%; /* Decreased to position closer to edge */
    }
}

/* Desktop columns (hide on mobile) */
@media (max-width: 768px) {
    .content-columns {
        display: none;
    }
}

/* Mobile columns (only show on mobile) */
.mobile-content-columns {
    display: none;
}

@media (max-width: 768px) {
    .mobile-content-columns {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: 2rem;
        align-items: center; /* Center columns horizontally */
    }
    
    .mobile-column {
        width: 90%; /* Slightly narrower than 100% to create visual margin */
        max-width: 600px; /* Prevent columns from getting too wide */
        padding: 1rem;
        margin-bottom: 3rem;
        color: white;
        line-height: 1.6;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        box-sizing: border-box;
    }
    
    .mobile-column h2 {
        text-decoration: underline;
        text-decoration-color: #c7ad58; /* Subtle gold color matching the glow */
        text-decoration-thickness: 2px;
        text-underline-offset: 5px;
        margin-bottom: 1rem;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        color: #c7ad58;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-family: 'Playfair Display', serif;
    }
}

/* Fix right-skewed content with !important rules - MOBILE ONLY */
@media (max-width: 768px) {
    body {
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important; /* Prevent horizontal scrolling */
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important; /* Remove any transforms */
    }
    
    .content-columns, 
    .mobile-content-columns {
        overflow: visible !important; /* Ensure columns don't scroll independently */
        height: auto !important;
        max-height: none !important;
    }
    
    main, .main-content {
        overflow: visible !important; /* Disable scrolling on main container */
        max-height: none !important;
        height: auto !important;
    }
}

/* Fix scrolling behavior on mobile */
@media (max-width: 768px) {
    html, body {
        overflow-y: auto !important; /* Enable vertical scrolling on the entire page */
        height: 100% !important;
        min-height: 100vh !important;
    }
    
    .content {
        overflow-y: visible !important; /* Disable scrolling on content container */
        height: auto !important; /* Allow content to expand naturally */
        max-height: none !important; /* Remove max-height constraint */
        position: relative !important;
    }
    
    .content-columns, 
    .mobile-content-columns {
        overflow: visible !important; /* Ensure columns don't scroll independently */
        height: auto !important;
        max-height: none !important;
    }
    
    main, .main-content {
        overflow: visible !important; /* Disable scrolling on main container */
        max-height: none !important;
        height: auto !important;
    }
}

/* Fix columns running off the right side on medium and large screens */
.content-columns {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden; /* Prevent horizontal overflow */
    padding: 0 1rem; /* Add consistent padding */
    margin: 0 auto; /* Center the columns */
}

.column {
    box-sizing: border-box;
    width: 48%; /* Slightly less than 50% to account for gap */
    max-width: 100%; /* Ensure column doesn't exceed container width */
    padding: 0 1rem;
    overflow-wrap: break-word; /* Ensure text wraps within column */
    word-wrap: break-word;
}

/* Ensure content container doesn't overflow */
.content {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Adjust content width for different screen sizes */
@media (min-width: 769px) and (max-width: 1999px) {
    .content {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }
    
    .content-columns {
        width: 100% !important;
        margin: 0 auto !important;
    }
}

/* Disable scrolling on content columns */
.content-columns {
    overflow: visible !important; /* Prevent scrolling */
    height: auto !important;
    max-height: none !important;
}

.column {
    overflow: visible !important; /* Prevent scrolling */
    height: auto !important;
    max-height: none !important;
}

/* Ensure main content area has proper scroll behavior */
.content {
    overflow-y: visible !important; /* Change from auto to visible */
    height: auto !important;
    max-height: none !important;
    position: relative !important;
}

/* Ensure body has proper scroll behavior */
html, body {
    overflow-y: auto !important; /* Enable vertical scrolling on the entire page */
    height: 100% !important;
    min-height: 100vh !important;
}

main, .main-content {
    overflow: visible !important; /* Disable scrolling on main container */
    max-height: none !important;
    height: auto !important;
    position: relative !important;
}

/* Reset any max-height constraints */
.content-columns, 
.mobile-content-columns,
.column,
.mobile-column {
    max-height: none !important;
}

/* Fix content columns being cut off at the bottom */
.content {
    position: relative;
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important; /* Remove min-height: 100vh */
    max-height: none !important;
    padding-bottom: 3rem !important; /* Add padding at the bottom */
}

.content-columns,
.mobile-content-columns {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    margin-bottom: 0 !important; /* Remove extra margin */
}

.column,
.mobile-column {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Ensure the page body allows full content display */
html, body {
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh !important;
}

/* Fix mobile view specifically */
@media (max-width: 768px) {
    .content {
        padding-bottom: 3rem !important; /* Reduce padding */
    }
    
    .mobile-content-columns {
        margin-bottom: 0 !important; /* Remove extra margin */
    }
    
    .mobile-column:last-child {
        margin-bottom: 0 !important; /* Remove margin from last column */
    }
}

/* Add a wrapper with specific height if needed */
.page-wrapper {
    min-height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Fix vertical galleries to viewport - stronger approach */
.vertical-gallery-container,
.left-vertical-gallery-container {
    position: fixed !important; /* Force fixed positioning */
    top: 13.75rem;
    height: calc(100vh - 13.75rem);
    overflow: visible;
    pointer-events: none;
    z-index: 100; /* Increase z-index to ensure visibility */
}

.vertical-gallery-container {
    right: 5%;
}

.left-vertical-gallery-container {
    left: 5%;
}

/* Override any other styles that might be affecting the galleries */
@media (min-width: 2000px) {
    .vertical-gallery-container,
    .left-vertical-gallery-container {
        position: fixed !important;
        display: block !important;
    }
    
    /* Remove any conflicting styles */
    .vertical-gallery-container.absolute,
    .left-vertical-gallery-container.absolute,
    .vertical-gallery-container[style*="position: absolute"],
    .left-vertical-gallery-container[style*="position: absolute"] {
        position: fixed !important;
    }
}

/* Ensure mobile gallery stays fixed */
.mobile-horizontal-gallery-container {
    position: fixed !important;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

/* Remove any conflicting styles for mobile gallery */
@media (max-width: 1024px) {
    .mobile-horizontal-gallery-container {
        position: fixed !important;
        display: block !important;
    }
    
    .mobile-horizontal-gallery-container[style*="position: relative"],
    .mobile-horizontal-gallery-container[style*="position: absolute"] {
        position: fixed !important;
    }
}

/* Position galleries behind the banner - simplified approach */
.vertical-gallery-container,
.left-vertical-gallery-container {
    position: fixed !important;
    top: 13.75rem; /* Position below banner height */
    height: calc(100vh - 13.75rem); /* Adjust height to start below banner */
    overflow: visible;
    pointer-events: none;
    z-index: 1 !important; /* Very low z-index to be behind everything */
}

.vertical-gallery-container {
    right: 5%;
}

.left-vertical-gallery-container {
    left: 5%;
}

/* Remove ALL gradients and pseudo-elements from galleries */
.vertical-gallery-container::before,
.vertical-gallery-container::after,
.left-vertical-gallery-container::before,
.left-vertical-gallery-container::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* Ensure banner is above galleries */
.banner, header, .header, nav, .nav, .navigation, .menu {
    position: relative;
    z-index: 50 !important; /* Very high z-index */
}

/* Ensure content is above galleries but below header */
.content {
    position: relative;
    z-index: 10 !important;
}

/* Make gallery items clickable */
.vertical-gallery-item,
.left-vertical-gallery-item {
    pointer-events: auto;
    background: none !important; /* Remove any background */
}

/* Override any other styles that might be adding gradients */
.vertical-gallery-container *::before,
.vertical-gallery-container *::after,
.left-vertical-gallery-container *::before,
.left-vertical-gallery-container *::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* Add glow effects back to gallery items */
.vertical-gallery-item,
.left-vertical-gallery-item {
    pointer-events: auto;
    position: relative;
    overflow: visible !important; /* Allow glow to extend beyond borders */
    margin: 15px 0;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

/* Add glow effect to right gallery items */
.vertical-gallery-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-shadow: 
        0 0 10px 3px rgba(175, 230, 155, 0.7), /* GAIA green glow */
        0 0 20px 6px rgba(175, 230, 155, 0.4);
    z-index: -1; /* Place glow behind the image */
    pointer-events: none;
}

/* Add glow effect to left gallery items */
.left-vertical-gallery-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-shadow: 
        0 0 15px 5px rgba(205, 134, 255, 0.7), /* VENM purple glow */
        0 0 30px 10px rgba(205, 134, 255, 0.4);
    z-index: -1; /* Place glow behind the image */
    pointer-events: none;
}

/* Ensure images fit properly */
.vertical-gallery-item img,
.left-vertical-gallery-item img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
    object-position: center;
    position: relative;
    z-index: 1;
}

/* Add hover effect */
.vertical-gallery-item:hover,
.left-vertical-gallery-item:hover {
    transform: scale(1.05);
}

/* Enhance glow on hover */
.vertical-gallery-item:hover::before {
    box-shadow: 
        0 0 15px 5px rgba(175, 230, 155, 0.8), /* GAIA green glow */
        0 0 30px 10px rgba(175, 230, 155, 0.5);
}

.left-vertical-gallery-item:hover::before {
    box-shadow: 
        0 0 20px 7px rgba(205, 134, 255, 0.8), /* VENM purple glow */
        0 0 40px 15px rgba(205, 134, 255, 0.5);
}

/* Allow these specific pseudo-elements for glow effects */
.vertical-gallery-item::before,
.left-vertical-gallery-item::before {
    display: block !important;
    content: "" !important;
}

/* Add line dividers between mobile sections */
@media (max-width: 768px) {
    /* Add divider after each mobile column except the last one */
    .mobile-column:not(:last-child)::after {
        content: "";
        display: block;
        width: 90%;
        height: 1px;
        background: linear-gradient(
            to right,
            transparent,
            rgba(254, 229, 133, 0.6),
            rgba(254, 229, 133, 0.8),
            rgba(254, 229, 133, 0.6),
            transparent
        );
        margin: 2rem auto 0;
    }
    
    /* Add more space between columns */
    .mobile-column {
        margin-bottom: 2rem;
    }
    
    /* Add space after the divider */
    .mobile-column:not(:last-child) {
        padding-bottom: 1rem;
    }
}

/* Make navbar fill entire screen on mobile */
@media (max-width: 768px) {
    .navbar-container-bottom {
        width: 320px; /* Reduced from 420px to make it narrower */
        height: 90%; /* Revert to original height */
        position: fixed;
        top: 0;
        left: 0;
        z-index: 150;
    }
    
    .navbar-menu {
        height: auto; /* Revert to auto height */
        width: 100%;
        padding-top: 6vh; /* Revert to original padding */
        overflow-y: auto;
    }
    
    .navbar-menu-head {
        position: fixed;
        top: 18px; /* Revert to original position */
        left: 60px; /* Revert to original position */
        width: auto; /* Revert to auto width */
        z-index: 200;
    }
    
    /* Revert toggle position */
    .navbar-icon {
        position: fixed;
        top: 12px; /* Revert to original position */
        left: 12px; /* Revert to original position */
        z-index: 200;
    }
}

/* Mobile-specific navbar toggle behavior */
@media (max-width: 768px) {
    #navbar-toggle:checked ~ .navbar-container-bottom {
        width: 96%; /* Set to 97% of screen width on mobile */ 
        opacity: 1;
        visibility: visible;
    }
    
    /* Adjust fade effects to match new width */
    .navbar-container-bottom::before,
    .navbar-container-bottom::after {
        width: 80%; /* Adjust fade width to match new navbar width */
        left: 10%; /* Center the fade effect */
    }
}

/* Adjust navbar head size on mobile */
@media (max-width: 768px) {
    .navbar-menu-head {
        font-size: 28px; /* Reduced from 36px */
        top: 22px; /* Adjusted position to align with smaller text */
    }
    
    /* Adjust icon size to match */
    .navbar-icon {
        font-size: 30px; /* Reduced from 36px */
        top: 16px; /* Adjusted position */
    }
}

/* Add bottom margin to navbar head on mobile */
@media (max-width: 768px) {
    .navbar-menu-head {
        margin-bottom: 30px; /* Add space below the navbar head */
    }
    
    /* Adjust top padding of navbar menu to accommodate the spacing */
    .navbar-menu {
        padding-top: 70px; /* Increased from 6vh to provide more consistent spacing */
    }
    
    /* Ensure first summary has proper spacing from navbar head */
    .navbar-menu details:first-of-type {
        margin-top: 15px;
    }
}

/* Increase font size for mobile content columns */
@media (max-width: 768px) {
    .mobile-column h2 {
        font-size: 2.2rem; /* Increased heading size */
        margin-bottom: 1.2rem; /* Add more space below headings */
    }
    
    .mobile-column p {
        font-size: 1.2rem; /* Increased paragraph text size */
        line-height: 1.7; /* Adjusted line height for better readability */
    }
    
    .mobile-column {
        padding: 1.5rem; /* Increased padding for more breathing room */
    }
}

/* Force mobile gallery to show on mobile devices */
@media (max-width: 768px) {
    .mobile-horizontal-gallery-container {
        display: block;
    }
}

/* Global rule for all anchor elements */
a {
    color: inherit; /* Inherit color from parent */
    text-decoration: inherit; /* Inherit text decoration from parent */
    cursor: pointer; /* Show pointer cursor on hover */
}

/* Ensure hover state doesn't change appearance */
a:hover {
    color: inherit;
    text-decoration: inherit;
}

/* Ensure visited state doesn't change appearance */
a:visited {
    color: inherit;
}

/* Ensure active state doesn't change appearance */
a:active {
    color: inherit;
}

/* Ensure focus state doesn't change appearance but maintains accessibility */
a:focus {
    color: inherit;
    text-decoration: inherit;
    outline: none; /* Remove default focus outline */
}

/* Add a subtle focus indicator for accessibility that doesn't change appearance */
a:focus-visible {
    outline: 1px dotted rgba(255, 255, 255, 0.3);
    outline-offset: 2px;
}

/* Override any specific link styles in dropdown content */
.dropdown-content a {
    color: inherit !important;
    text-decoration: inherit !important;
}

.dropdown-content a:hover {
    color: #007bff !important; /* Keep the hover color effect */
    text-decoration: underline !important; /* Keep the underline effect */
}
    /* Ensure mobile gallery is visible and fixed to bottom */
    .mobile-horizontal-gallery-container {
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 180px !important;
        z-index: 999 !important; /* Very high z-index to ensure visibility */
        background: linear-gradient(to top, rgba(0,0,0,1) 70%, rgba(0,0,0,0.8) 90%, rgba(0,0,0,0) 100%);
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
    }
    
    /* Add padding to content to prevent overlap with fixed gallery */
    .content, 
    .mobile-content-columns {
        padding-bottom: 200px !important; /* Ensure enough space for the gallery */
    }
    
    /* Make sure the gallery items are visible */
    .mobile-horizontal-gallery {
        display: flex !important;
        width: calc(200px * 20) !important; /* Width to accommodate all images */
        animation: scrollHorizontal 60s linear infinite !important;
        height: 100% !important;
    }

/* Create extremely large outward glow effect */
.legacy-hall-page .image-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem auto;
    width: 300px;
    height: 300px;
    overflow: visible; /* Allow glow to extend outside */
}

.legacy-hall-page .image-wrapper img {
    position: relative;
    z-index: 2; /* Place image above glow */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    border: 4px solid #c7ad58; /* Add solid gold border */
}

/* Position much larger glow behind the image */
.legacy-hall-page .image-wrapper::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200%; /* Extremely larger than image */
    height: 200%;
    border-radius: 50%;
    z-index: 1; /* Place behind the image */
    box-shadow: 
        0 0 50px 25px rgba(250, 216, 106, 0.7),
        0 0 100px 50px rgba(250, 216, 106, 0.4),
        0 0 150px 75px rgba(250, 216, 106, 0.2);
    pointer-events: none;
}

/* Enhance glow on hover */
.legacy-hall-page .image-wrapper:hover::before {
    box-shadow: 
        0 0 60px 30px rgba(250, 216, 106, 0.8),
        0 0 120px 60px rgba(250, 216, 106, 0.5),
        0 0 180px 90px rgba(250, 216, 106, 0.3);
    transition: box-shadow 0.3s ease;
}

/* Update mobile styles */
@media (max-width: 768px) {
    .legacy-hall-page .image-wrapper {
        width: 150px;
        height: 150px;
    }
    
    .legacy-hall-page .image-wrapper img {
        border-width: 3px; /* Slightly thinner border on mobile */
    }
    
    .legacy-hall-page .image-wrapper::before {
        width: 200%;
        height: 200%;
        box-shadow: 
            0 0 30px 15px rgba(250, 216, 106, 0.7),
            0 0 60px 30px rgba(250, 216, 106, 0.4),
            0 0 90px 45px rgba(250, 216, 106, 0.2);
    }
}

/* Fix stretched gold border on mobile */
@media (max-width: 768px) {
    .legacy-hall-page .image-wrapper {
        width: 150px; /* Smaller on mobile */
        height: 150px;
        aspect-ratio: 1/1; /* Enforce square aspect ratio */
        position: relative;
        margin: 0 auto 1.5rem auto; /* Center horizontally with bottom margin */
    }
    
    .legacy-hall-page .image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        aspect-ratio: 1/1; /* Enforce square aspect ratio */
    }
    
    .legacy-hall-page .image-wrapper::before {
        width: 150px; /* Match mobile image size */
        height: 150px;
        left: 50%; /* Center horizontally */
        top: 50%; /* Center vertically */
        transform: translate(-50%, -50%); /* Perfect centering */
        margin: 0; /* Remove any margin offsets */
    }
    
    .legacy-hall-page .image-wrapper:hover::before {
        margin: 0; /* Match non-hover state */
    }
    
    /* Ensure proper mobile column layout */
    .legacy-hall-page .mobile-column {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
        padding: 1rem;
    }
    
    .legacy-hall-page .mobile-column h2 {
        margin-top: 0.5rem;
        margin-bottom: 1rem;
    }
}

/* Fix mobile glow alignment */
@media (max-width: 768px) {
    .legacy-hall-page .image-wrapper {
        width: 150px; /* Smaller on mobile */
        height: 150px;
        aspect-ratio: 1/1; /* Enforce square aspect ratio */
        position: relative;
    }
    
    .legacy-hall-page .image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        aspect-ratio: 1/1; /* Enforce square aspect ratio */
    }
    
    .legacy-hall-page .image-wrapper::before {
        width: 150px; /* Match mobile image size */
        height: 150px;
        margin-top: -15px; /* Increased offset for better alignment on mobile */
        transform: translate(-50%, -50%);
    }
    
    .legacy-hall-page .image-wrapper:hover::before {
        margin-top: -15px; /* Match non-hover state */
    }
}

/* Ensure the glow effect is properly positioned */
.legacy-hall-page .image-wrapper::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px; /* Fixed width */
    height: 300px; /* Fixed height */
    border-radius: 50%; /* Circular glow */
    z-index: 0;
    box-shadow: 
        0 0 15px 5px rgba(250, 216, 106, 0.8),
        0 0 30px 10px rgba(250, 216, 106, 0.5);
    pointer-events: none;
    margin-top: -10px; /* Increased adjustment from -5px to -10px */
}

/* Enhance glow on hover */
.legacy-hall-page .image-wrapper:hover::before {
    box-shadow: 
        0 0 20px 8px rgba(250, 216, 106, 0.9),
        0 0 40px 15px rgba(250, 216, 106, 0.6);
    transition: box-shadow 0.3s ease;
    margin-top: -10px; /* Increased to match non-hover state */
}

/* Ensure consistent sizing on mobile */
@media (max-width: 768px) {
    .legacy-hall-page .image-wrapper {
        width: 150px; /* Smaller on mobile */
        height: 150px;
    }
}

/* Make Legacy Hall columns wider with 85% max-width */
.legacy-hall-page .content-columns {
    width: 85%;
    max-width: 85%;
    margin: 0 auto;
}

.legacy-hall-page .column {
    width: 55%; /* Wider columns */
    max-width: 85%; /* Set max-width to 85% */
    padding: 1rem 2rem; /* Add more horizontal padding */
}

/* Ensure 85% max-width applies across all media queries */
@media (max-width: 768px) {
    .legacy-hall-page .mobile-column {
        width: 85%;
        max-width: 85%;
    }
}

@media (min-width: 769px) and (max-width: 1999px) {
    .legacy-hall-page .content-columns {
        width: 85% !important;
        max-width: 85% !important;
    }
}

@media (min-width: 2000px) {
    .legacy-hall-page .content-columns {
        width: 85% !important;
        max-width: 85% !important;
    }
}

/* Fix image height differences and align headers horizontally */
.legacy-hall-page .column {
    display: flex;
    flex-direction: column;
    position: relative;
}

.legacy-hall-page .column img {
    height: 300px; /* Fixed height for all images */
    object-fit: cover; /* Maintain aspect ratio while filling the space */
    margin-bottom: 1.5rem;
}

/* Create a wrapper for the image to maintain consistent spacing */
.legacy-hall-page .image-wrapper {
    height: 300px; /* Same as image height */
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure headers start at the same vertical position */
.legacy-hall-page .content-columns {
    display: flex;
    align-items: flex-start;
}

/* Ensure column content starts at the same position */
.legacy-hall-page .column h2 {
    margin-top: 0;
    max-width: 95%; /* Wider container */
    margin: 0 auto;
}

.legacy-hall-page .column {
    width: 48%; /* Wider columns */
    max-width: none; /* Remove max-width constraint */
    padding: 1rem 1.5rem; /* Add more horizontal padding */
}

.legacy-hall-page .column h2 {
    font-size: 2rem; /* Larger headings */
    margin-bottom: 1rem; /* More space below headings */
}

.legacy-hall-page .column p {
    font-size: 1.1rem; /* Slightly larger text */
    line-height: 1.7; /* Better line height for readability */
}

/* Ensure mobile columns are also wider on this page */
@media (max-width: 768px) {
    .legacy-hall-page .mobile-column {
        width: 95%; /* Wider mobile columns */
    }
}

/* Ensure navbar and navmenu appear above mobile gallery */
@media (max-width: 768px) {
    /* Increase z-index for navbar elements */
    .navbar-container-bottom {
        z-index: 1000 !important; /* Higher than mobile gallery (999) */
    }
    
    .navbar-menu {
        z-index: 1001 !important; /* Higher than container */
    }
    
    .navbar-icon {
        z-index: 1002 !important; /* Higher than menu */
    }
    
    .navbar-menu-head {
        z-index: 1002 !important; /* Same as icon */
    }
    
    /* Ensure fade effects are above gallery but below menu content */
    .navbar-container-bottom::before,
    .navbar-container-bottom::after {
        z-index: 1001 !important; /* Same as menu */
        bottom: 9.5%; /* Increased from 5% to move gradient further from bottom */
    }
    
    /* Keep mobile gallery below navbar elements */
    .mobile-horizontal-gallery-container {
        z-index: 999 !important; /* Below navbar elements */
    }
}

.navbar-menu summary:hover {
    cursor: pointer;
}

/* Center images at the top of columns */
.column img, .mobile-column img {
    display: block;
    margin: 0 auto 1.5rem auto; /* Center horizontally with bottom margin */
    max-width: 300px; /* Ensure image doesn't overflow column */
    height: auto; /* Maintain aspect ratio */
}

/* Ensure column content is properly centered */
.column, .mobile-column {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center all content horizontally */
    text-align: center;
}

/* Ensure headings appear below images */
.column h2, .mobile-column h2 {
    margin-top: 0.5rem; /* Add space between image and heading */
    width: 100%; /* Full width for proper centering */
}

/* Condense columns on PC */
@media (min-width: 769px) {
    .content-columns {
        gap: 1.5rem; /* Reduce gap between columns */
        padding: 0 0.5rem; /* Reduce horizontal padding */
        max-width: 90%; /* Slightly narrower container */
        margin: 0 auto; /* Center the columns */
    }
    
    .column {
        padding: 0.75rem; /* Reduce padding inside columns */
        width: 46%; /* Slightly narrower columns */
    }
    
    .column h2 {
        margin-bottom: 0.75rem; /* Reduce space below headings */
        font-size: 1.8rem; /* Slightly smaller headings */
    }
    
    .column p {
        margin-bottom: 0.75rem; /* Reduce space below paragraphs */
    }
    
    .column img {
        margin-bottom: 1rem; /* Reduce space below images */
        width: 300px; /* Slightly smaller images */
        height: auto;
    }
    
    /* Add more vertical space between column sets */
    .content-columns + .header-line {
        margin: 1.5rem auto;
    }
    
    .header-line + .content-columns {
        margin-top: 1.5rem;
    }
}

/* Make columns much narrower on main page */
.content-columns {
    width: 70%; /* Reduced from 100% or 85% */
    max-width: 1000px; /* Set a maximum width */
    margin: 0 auto; /* Center the columns */
    gap: 3rem; /* Increase gap between columns */
    box-sizing: border-box;
    overflow-x: hidden;
    padding: 0 1rem;
}

.column {
    width: 42%; /* Narrower columns (reduced from 48%) */
    max-width: 450px; /* Set maximum width for each column */
    box-sizing: border-box;
    padding: 0 1rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Adjust for medium screens */
@media (min-width: 769px) and (max-width: 1999px) {
    .content-columns {
        width: 80% !important; /* Narrower than before */
        max-width: 1000px !important;
        margin: 0 auto !important;
    }
    
    .column {
        width: 42% !important; /* Narrower columns */
        max-width: 450px !important;
    }
}

/* Preserve Legacy Hall specific widths */
.legacy-hall-page .content-columns {
    width: 85%;
    max-width: 85%;
    margin: 0 auto;
}

.legacy-hall-page .column {
    width: 55%; /* Wider columns for Legacy Hall */
    max-width: 85%;
    padding: 1rem 2rem;
}

/* Hide mobile gallery on larger screens */
@media (min-width: 1025px) {
    .mobile-horizontal-gallery-container {
        display: none !important;
    }
}

/* Only show mobile gallery on smaller screens */
@media (max-width: 1024px) {
    .mobile-horizontal-gallery-container {
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 180px !important;
        z-index: 999 !important;
        background: linear-gradient(to top, rgba(0,0,0,1) 70%, rgba(0,0,0,0.8) 90%, rgba(0,0,0,0) 100%);
    }
    
    .content, 
    .mobile-content-columns {
        padding-bottom: 200px !important;
    }
}