/* Z-Index Fix for Content Layering */
/* Ensures main content stays above margins and other elements */

/* Main content container */
#main {
    position: relative;
    z-index: 10;
    overflow: visible !important;
}

/* Banner section should be above everything */
#banner {
    position: relative;
    z-index: 15;
    overflow: visible !important;
}

/* Banner content and image */
#banner .content {
    position: relative;
    z-index: 16;
}

#banner .image {
    position: relative;
    z-index: 16;
}

#banner .image img {
    position: relative;
    z-index: 17;
}

/* Banner title and animated elements */
#banner h1,
#banner-title {
    position: relative;
    z-index: 20;
}

/* Animated characters should be on top */
.char, .word {
    position: relative;
    z-index: 21;
}

/* Events section */
.events-grid {
    position: relative;
    z-index: 12;
}

.event-card {
    position: relative;
    z-index: 13;
}

.event-card img {
    position: relative;
    z-index: 14;
}

/* Header container */
#header-container {
    position: relative;
    z-index: 25;
}

/* Ensure wrapper doesn't interfere */
#wrapper {
    position: relative;
    z-index: 5;
    overflow: visible;
}

/* Inner content */
.inner {
    position: relative;
    z-index: 8;
    overflow: visible !important;
}

/* Footer should be below main content */
#main-footer {
    position: relative;
    z-index: 5;
}

/* Floating elements and backgrounds should be behind */
.floating-images {
    position: relative;
    z-index: 1;
}

/* Particle background should be furthest back */
#particles-js {
    z-index: -1;
}

/* Ensure all sections have proper stacking */
section {
    position: relative;
    z-index: 10;
    overflow: visible;
}

/* Material icons in content */
.material-symbols-outlined,
.material-icons {
    position: relative;
    z-index: inherit;
}

/* Prevent any clipping on animated elements */
.main-animated {
    position: relative;
    z-index: 18;
    overflow: visible !important;
}

/* Ensure buttons stay on top */
.button {
    position: relative;
    z-index: 15;
}

/* Actions container */
.actions, .events-actions {
    position: relative;
    z-index: 14;
}