/* --- GLOBAL SMOOTH SCROLLING --- */
html {
    scroll-behavior: smooth;
     /* 1rem = 10px */
}

/* Offset for fixed headers so titles aren't hidden when scrolling */
#about_us, #contact_us {
    scroll-margin-top: 100px; 
}

/* --- MAIN DROPDOWN (Our Services) --- */
.nav-item.dropdown {
    position: relative;
}

.dropdown-menu {
    min-width: 250px;
    padding: 10px 0;
    display: block; /* We use opacity and visibility for smoother transitions */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    border: none;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
}

/* Show main dropdown on hover */
.nav-item.dropdown:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* --- SUBMENU (Infrastructure) --- */
.dropdown-submenu {
    position: relative;
}

/* Hide the Infrastructure submenu by default */
.dropdown-submenu > .dropdown-menu {
    display: block;
    position: absolute;
    left: 100%;       /* Push to the right */
    top: 0;
    margin-top: -1px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ONLY show submenu when mouse is directly over the 'Infrastructure' item */
/* The '>' ensures that hovering 'Project Certification' does not trigger this */
.dropdown-submenu:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* --- STYLING & ITEMS --- */
.dropdown-item {
    padding: 12px 20px;
    font-size: 14px;
    color: #fff !important; /* Forces text color on dark background */
    background-color: transparent;
    display: block;
    width: 100%;
    text-decoration: none;
}

.dropdown-item:hover {
    background-color: #666666 !important;
    color: #ffffff !important;
}

/* Styling for the submenu container specifically */
.dropdown-menu-dark, .dropdown-submenu .dropdown-menu {
    background-color: #343a40 !important;
}

/* --- ARROW INDICATOR --- */
.dropdown-submenu > a::after {
    content: "\2192"; /* Right arrow symbol */
    font-size: 1.2em;
    float: right;
    transition: transform 0.3s ease;
    color: inherit;
}

/* Rotate arrow when active */
.dropdown-submenu:hover > a::after {
    transform: rotate(90deg);
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 991px) {
    .dropdown-submenu > .dropdown-menu {
        position: static;
        left: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        display: none; /* Let Bootstrap toggle handle it on mobile */
    }
    
    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }
}