/* ---------------------------

   header.css — Clean submenu style

   --------------------------- */



.header {

    background: #000000;

    color: white;

    padding: 30px 25px 20px 25px;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    position: fixed;

    top: 0;

    width: 100%;

    box-sizing: border-box;

    z-index: 10000;

    font-family: 'Poppins', sans-serif;

    transition: transform 0.35s ease, opacity 0.35s ease;

    will-change: transform, opacity;

    overflow: visible;

}



.logo {

    margin-left: 15px;

}

.logo a {

    display: inline-block;

    text-decoration: none;

    border: none;

}

.header--hidden {

    transform: translateY(-100%);

    opacity: 0;

    pointer-events: none;

}



.logo img {

    height: 50px;

    max-height: 70px;

    width: auto;

}



.nav {

    transition: transform 0.3s ease-in-out;

    flex-shrink: 0;

    margin-right: 20px;

    position: relative;

    z-index: 10001;

}



.nav ul {

    display: flex;

    list-style: none;

    gap: 50px;

    margin: 0;

    padding: 0;

    flex-wrap: nowrap;

}



.nav ul li {

    position: relative;

}



.nav ul li a {

    color: #f5f5f5;

    text-decoration: none;

    font-size: 23px;

    font-weight: 200;

    line-height: 1.2;

    padding-bottom: 0;

    transition: color 0.3s ease;

    display: inline-block;

    white-space: nowrap;

}



.nav ul li a:hover {

    color: #b8940f;

}



/* ---------------------------

   SUBMENU STYLES - Clean & Beautiful

   --------------------------- */



.services-dropdown {

    position: relative;

}



/* Ensure dropdown menu is not affected by parent flex */

.services-dropdown .dropdown-menu {

    display: block !important;

    flex: none !important;

}



/* Extend hover area to include the gap */

.services-dropdown > a {

    padding-bottom: 8px;

}



.dropdown-menu {

    position: absolute;

    top: calc(100% + 3px);

    left: 50%;

    transform: translateX(-50%);

    background: #ffffff;

    list-style: none;

    padding: 8px 0 0 0;

    min-width: 220px;

    width: auto;

    display: block !important;

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);

    border-radius: 0;

    z-index: 10002;

    pointer-events: none;

}



/* Fill the gap to maintain hover state - invisible bridge */

.services-dropdown::after {

    content: '';

    position: absolute;

    top: 100%;

    left: 50%;

    transform: translateX(-50%);

    width: 220px;

    height: 3px;

    background: transparent;

    pointer-events: auto;

    z-index: 10001;

}



/* Arrow pointer at top of dropdown */

.dropdown-menu::before {

    content: '';

    position: absolute;

    top: -5px;

    left: 50%;

    transform: translateX(-50%);

    width: 0;

    height: 0;

    border-left: 6px solid transparent;

    border-right: 6px solid transparent;

    border-bottom: 6px solid #ffffff;

}



.services-dropdown:hover .dropdown-menu,

.dropdown-menu:hover {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateX(-50%) translateY(0);

}



.services-dropdown:hover .dropdown-menu li a {

    opacity: 1 !important;

    color: #333333 !important;

}



.services-dropdown:hover .dropdown-menu li a:hover {

    color: #b8940f !important;

}



.dropdown-menu li {

    margin: 0;

    padding: 0;

    display: block !important;

    width: 100% !important;

    float: none !important;

    clear: both;

}



.dropdown-menu li a {

    color: #333333 !important;

    text-decoration: none;

    font-size: 17px !important;

    font-weight: 300 !important;

    display: block !important;

    width: 100% !important;

    padding: 10px 24px;

    transition: background-color 0.2s ease, color 0.2s ease;

    line-height: 1.4;

    font-family: 'Poppins', sans-serif !important;

    white-space: nowrap;

    opacity: 1 !important;

    box-sizing: border-box;

    float: none !important;

    clear: both;

}



/* Add gap below last menu item */

.dropdown-menu li:last-child a {

    padding-bottom: 20px;

}



.dropdown-menu li a:hover,

.services-dropdown:hover .dropdown-menu li a:hover {

    

    color: #b8940f !important;

}



/* ---------------------------

   Medium screen

   --------------------------- */

@media (max-width: 1024px) and (min-width: 769px) {

    .nav ul {

        gap: 35px;

    }



    .nav ul li a {

        font-size: 20px;

    }



    .header {

        padding: 30px 20px 20px 20px;

    }



    .nav {

        margin-right: 15px;

    }

}



/* ---------------------------

   Mobile Menu

   --------------------------- */

.menu-icon {

    display: none;

    cursor: pointer;

    flex-shrink: 0;

    padding: 5px;

    z-index: 101;

}



.menu-icon .hamburger {

    font-size: 24px;

    color: #ffffff;

    display: block;

    line-height: 1;

    width: 24px;

    height: 24px;

}



.menu-icon .close {

    font-size: 40px;

    color: #ffffff;

    display: none;

    line-height: 1;

    width: 40px;

    height: 40px;

}



.hidden {

    display: none;

}



@media (max-width: 768px) {

    .header {

        justify-content: space-between;

        padding: 20px 15px;

        align-items: center;

        overflow: visible;

    }



    .logo {

        margin-left: 0;

        flex-shrink: 0;

    }



    .logo img {

        height: 28px;

    }



    .menu-icon {

        display: flex !important;

        align-items: center;

        justify-content: center;

        position: relative;

        z-index: 101;

        width: 40px;

        height: 40px;

        min-width: 40px;

        min-height: 40px;

        background: transparent;

        border: none;

    }



    .menu-icon .hamburger {

        display: block;

        visibility: visible;

        opacity: 1;

        pointer-events: auto;

    }



    .menu-icon .close {

        display: none;

        visibility: visible;

        opacity: 1;

        pointer-events: auto;

    }



    .menu-icon.menu-open .hamburger {

        display: none;

    }



    .menu-icon.menu-open .close {

        display: block;

    }



    .nav {

        position: fixed;

        top: 0;

        left: -100%;

        height: 100vh;

        width: 100%;

        background: rgba(0, 0, 0, 0.95);

        z-index: 99;

        display: flex;

        align-items: center;

        justify-content: center;

        transition: left 0.3s ease-in-out;

        margin-right: 0;

    }



    .nav.active {

        left: 0;

    }



    .nav ul {

        flex-direction: column;

        gap: 40px;

        text-align: center;

    }



    .nav ul li {

        text-align: center !important;

        width: 100% !important;

    }



    .nav ul li a {

        color: white;

        font-size: 22px;

        font-weight: 300;

        border: none;

        padding: 6px 14px;

        line-height: 1.2;

        text-align: center !important;

        display: block !important;

        width: 100% !important;

    }



    .nav ul li a:hover {

        color: #b8940f;

        text-align: center !important;

        display: block !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 6px 14px !important;

    }



    /* Mobile Dropdown Menu */

    .services-dropdown {

        width: 100% !important;

        text-align: center !important;

        margin: 0 auto !important;

    }



    .services-dropdown:hover,

    .services-dropdown.active {

        text-align: center !important;

        margin: 0 auto !important;

    }



    .services-dropdown > a {

        padding-bottom: 6px;

        position: relative;

    }



    /* Arrow icon below Services text on mobile */

    .services-dropdown > a::after {

        content: '\f078'; /* Font Awesome chevron-down icon */

        font-family: 'Font Awesome 6 Free';

        font-weight: 900;

        font-size: 12px;

        display: block;

        text-align: center;

        margin-top: 5px;

        transition: transform 0.3s ease;

    }



    .services-dropdown.active > a::after {

        transform: rotate(180deg);

    }



    .dropdown-menu {

        position: static !important;

        transform: none !important;

        opacity: 1;

        visibility: visible;

        background: transparent;

        margin: 0 auto !important;

        min-width: auto;

        box-shadow: none;

        border-radius: 0;

        padding: 0;

        max-height: 0;

        overflow: hidden;

        transition: max-height 0.3s ease;

        text-align: center !important;

        width: 100% !important;

        left: auto !important;

        right: auto !important;

    }



    /* Hide arrow pointer on mobile */

    .dropdown-menu::before {

        display: none !important;

    }



    .services-dropdown.active .dropdown-menu {

        max-height: 600px;

        padding: 10px 0;

    }



    .dropdown-menu li {

        text-align: center !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        display: block !important;

    }



    .dropdown-menu li a {

        color: rgba(255, 255, 255, 0.85) !important;

        font-size: 18px;

        padding: 10px 22px;

        text-align: center !important;

        background: transparent;

        display: block !important;

        width: 100% !important;

        margin: 0 auto !important;

        box-sizing: border-box;

        justify-content: center;

        align-items: center;

    }



    /* Override desktop hover rule for mobile - keep items bright */

    .services-dropdown:hover .dropdown-menu li a,

    .services-dropdown.active .dropdown-menu li a {

        color: rgba(255, 255, 255, 0.85) !important;

    }



    .dropdown-menu li a:hover,

    .services-dropdown:hover .dropdown-menu li a:hover,

    .services-dropdown.active .dropdown-menu li a:hover {

        color: #b8940f !important;

        background: transparent !important;

        transform: none !important;

        position: static !important;

        padding: 10px 22px !important;

        margin: 0 auto !important;

        width: 100% !important;

        text-align: center !important;

        display: block !important;

        left: auto !important;

        right: auto !important;

    }

}