/* Fix for navbar submenu appearing behind hero section */
/* Proper solution using correct positioning and reasonable z-index values */

/* Make the header properly positioned above everything */
.homepage .vl-header-area5,
.vl-header-area5 {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1030 !important; /* Bootstrap modal backdrop is 1040, so stay below that */
}

/* Ensure the sticky header works properly */
#vl-header-sticky {
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 1030 !important;
}

/* Fix the dropdown menu z-index with reasonable values */
.vl-main-menu ul li .sub-menu,
.vl-main-menu .sub-menu,
.has-dropdown .sub-menu {
    position: absolute !important;
    z-index: 1050 !important; /* Above header but below modals */
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
}

/* Ensure the dropdown appears when hovering */
.vl-main-menu ul li:hover > .sub-menu,
.has-dropdown:hover > .sub-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1050 !important;
}

/* Add padding to body to account for fixed header */
body.homepage {
    padding-top: 100px !important; /* Adjust based on header height */
}

/* Ensure hero section doesn't create conflicting stacking context */
.hero5 {
    position: relative;
    z-index: 1; /* Lower than header */
}

/* Remove the excessive z-index values from other elements */
.hero5::before,
.hero5 .container {
    z-index: auto !important; /* Let them inherit naturally */
}

/* Mobile responsive adjustments */
@media (max-width: 991px) {
    body.homepage {
        padding-top: 80px !important;
    }
    
    .vl-header-area5 {
        position: fixed !important;
        z-index: 1030 !important;
    }
}

/* Ensure offcanvas menu appears above everything on mobile */
.vl-offcanvas {
    z-index: 1060 !important; /* Above everything including modals */
}

.vl-offcanvas-overlay {
    z-index: 1055 !important; /* Just below offcanvas */
}

/* Clean up any conflicting rules from hero-viewport-fix.css */
.homepage .vl-header-area5 {
    position: fixed !important; /* Changed from relative */
}

/* Ensure proper dropdown positioning */
.vl-main-menu ul li {
    position: relative !important;
}

.vl-main-menu ul li .sub-menu {
    top: 100%;
    left: 0;
    min-width: 220px;
    padding: 10px 0;
}

/* Fix any transform or filter properties that might create new stacking contexts */
.vl-header-area5,
.vl-main-menu,
.vl-main-menu ul li {
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
}