/* --- FIXED MENU HEADERS (No Dot, No Indent) --- */

/* 1. Base Style for the Container (Li) */
li.menu-section-title {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* 2. Base Style for the Link (Text) */
li.menu-section-title > a {
    color: #b99d6a !important;       /* Grey Text */
    font-size: 10px !important;      /* Small Size */
    font-weight: 800 !important;     /* Bold */
    text-transform: uppercase;       /* Caps */
    letter-spacing: 1.2px;
    border-bottom: 1px solid #e5e7eb; /* Divider */
    
    /* LOCKED PADDING - Adjust '20px' if you want it aligned differently */
    padding-left: 20px !important;   
    padding-right: 20px !important;
    padding-top: 15px !important;
    padding-bottom: 8px !important;
    margin: 0 !important;
    
    /* Disable Interaction */
    pointer-events: none;
    cursor: default;
    transition: none !important;     /* Kill Animation */
}

/* 3. HOVER STATE - Force Exact Same Padding */
li.menu-section-title:hover > a,
li.menu-section-title > a:hover {
    color: #b99d6a !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
    
    /* CRITICAL: Keep padding exactly the same as above */
    padding-left: 20px !important;   
    padding-right: 20px !important;
    
    /* Ensure no pseudo-elements (dots/icons) appear */
    transform: none !important;
}

/* 4. Kill the "Dot" or "Icon" pseudo-elements */
li.menu-section-title > a::before,
li.menu-section-title > a::after,
li.menu-section-title:hover > a::before,
li.menu-section-title:hover > a::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    opacity: 0 !important;
}






/* --- LAYOUT-SAFE SUBTLE 3D ANIMATION --- */

/* 1. Define Keyframes with Internal Perspective */
/* By putting perspective HERE, we don't break the parent layout */
@keyframes subtle3DReveal {
    0% {
        opacity: 1;
        /* Perspective 2000px adds depth, RotateX -10deg adds the subtle tilt */
        transform: perspective(2000px) rotateX(-45deg) translateY(10px);
    }
    100% {
        opacity: 1;
        /* Flatten out to normal */
        transform: perspective(2000px) rotateX(0deg) translateY(0);
    }
}

/* 2. Target the Mega Menu Panel */
.elementskit-navbar-nav > li > .elementskit-megamenu-panel {
    /* Set Hinge Point to Top */
    transform-origin: top center !important;
    
    /* FORCE Absolute Position to prevent layout shift */
    position: absolute !important;
    top: 100% !important; /* Ensures it sits directly below header */
    
    /* Default hidden state */
    display: none;
}

/* 3. Trigger Animation on Hover */
.elementskit-navbar-nav > li:hover > .elementskit-megamenu-panel {
    /* Show it */
    display: block !important;
    
    /* Play Animation: 0.4s is the premium speed */
    animation: subtle3DReveal 0.4s ease-out forwards !important;
    
    /* Ensure Top Layer */
    z-index: 99999 !important;
}



/* This locks the container height so it cannot 'shrink' later */
.pbmit-logo-img, 
.pbmit-logo-img a {
    display: block !important;
    width: 165px !important;
    height: 47px !important; /* Adjust this to your logo's final height */
    overflow: hidden !important;
}

/* This forces the image to fit that box immediately */
.pbmit-logo-img img {
    width: 165px !important;
    height: 47px !important;
    object-fit: contain !important;
}