/**
 * layout.css
 *
 * Header navigation and mobile menu styles for the PeaceBridge Global
 * website. Covers the semi-transparent header bar, nav link hover
 * underlines, full-screen mobile overlay, and active-state indicators.
 */

.header-container {
    background-color: rgb(217 197 180 / 80%);
}

.header-nav ul li a::after {
    content: '';
    width: 100%;
    height: 5px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #d04440;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.header-nav ul li a:hover::after {
    opacity: 1;
}

.header-nav ul li .active::after {
    opacity: 1;
}

.header-nav-main {
    transform: translateX(100%);
    transition: transform 0.5s ease;
    z-index: 20;
}

.header-nav-main.active {
    transform: translateX(0);
}

.header-container.active {
    position: relative;
}