/* Base Container */
.nav_common_container { width: 90%; margin: auto; text-align: center; }

/* Navbar Layout - CRITICAL: Remove transform to prevent stacking context */
.nav_layout { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    width: 100%; 
    background-color: transparent; 
    z-index: 10000 !important;
    transition: background-color 0.4s ease, box-shadow 0.4s ease; 
}

/* Solid navbar for non-homepage pages */
body.page-solid-navbar .nav_layout { background-color: var(--color-white); box-shadow: 0 4px 24px rgba(24, 8, 43, 0.12); }
body.page-solid-navbar .navbar-brand .image-2 { filter: brightness(0) saturate(100%) invert(7%) sepia(23%) saturate(5234%) hue-rotate(248deg) brightness(95%) contrast(100%); }
body.page-solid-navbar .navbar-nav .nav-item a { color: var(--color-purple); text-shadow: none; }
body.page-solid-navbar .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%2318082B' stroke-width='2.5' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important; }

/* Scrolled state */
.nav_layout.navbar-scrolled { 
    background-color: var(--color-white); 
    box-shadow: 0 4px 24px rgba(24, 8, 43, 0.12); 
}

/* Hidden/Visible states - NO TRANSFORM */
.nav_layout.navbar-hidden { 
    top: -100px;
}

.nav_layout.navbar-visible { 
    top: 0;
}

/* Mobile Toggle Button */
.navbar-toggler { border: 2px solid var(--color-purple); border-radius: 8px; padding: 8px 12px; transition: all 0.3s ease; background-color: transparent; }
.navbar-toggler:hover { background-color: rgba(24, 8, 43, 0.05); border-color: var(--color-orange); }
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(246, 155, 9, 0.25); outline: none; }
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important; background-repeat: no-repeat; background-position: center; background-size: 100%; width: 24px; height: 24px; transition: background-image 0.3s ease; }
.nav_layout.navbar-scrolled .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%2318082B' stroke-width='2.5' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important; }

/* Brand Logo */
.navbar-brand { display: flex; align-items: center; transition: transform 0.3s ease; }
.navbar-brand .image-1 { height: 50px;  margin-right: 0px; padding-right: 0px; transition: filter 0.3s ease; }

/* Navigation Links */
.navbar-nav .nav-item a { color: var(--color-white); position: relative; font-size: 18px;font-family: 'IBM Plex Sans';  font-weight: 600; text-decoration: none; padding: 8px 16px; transition: color 0.3s ease; letter-spacing: 0.3px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); }
.nav_layout.navbar-scrolled .navbar-nav .nav-item a { color: var(--color-purple); text-shadow: none; }
.navbar-nav .nav-item a::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background: linear-gradient(90deg, var(--color-orange) 0%, #FF8C00 100%); transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); border-radius: 2px; }
.navbar-nav .nav-item a:hover { color: var(--color-orange); }
.navbar-nav .nav-item a:hover::after { width: 80%; }
.navbar-nav .nav-item a.active { color: var(--color-orange); font-weight: 700; }

/* Dropdown Toggle Arrow */
.nav-link.dropdown-toggle::after { 
    border: none; 
    content: '\f078'; 
    font-weight: 900; 
    font-size: 12px; 
    margin-left: 6px; 
    transition: transform 0.3s ease; 
}

.nav-item.dropdown.show .dropdown-toggle::after { transform: rotate(180deg); }

/* Mobile Menu */
.collapse.navbar-collapse { 
    position: relative; 
    z-index: 1050; 
    transition: background-color 0.3s ease; 
}

/* Consultation Button */
.consultation-button { 
    position: relative; 
    background-color: var(--color-orange); 
    color: var(--color-white); 
    border-radius: 12px; 
    padding: 12px 24px; 
    font-family: "IBM Plex Sans", sans-serif; 
    font-weight: 700; 
    font-size: 15px; 
    text-align: center; 
    overflow: hidden; 
    transition: all 0.4s ease; 
}

.consultation-button a { 
    color: var(--color-white) !important; 
    text-decoration: none; 
    display: block; 
    position: relative; 
    z-index: 2; 
}

.consultation-button::before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 0; 
    height: 100%; 
    background-color: var(--color-purple); 
    transition: width 0.5s ease; 
    z-index: 1; 
    border-radius: 12px; 
}

.consultation-button:hover::before { width: 100%; }

html { scroll-behavior: smooth; }

/* Tablet Responsive */
@media (max-width: 991px) {
    .navbar-nav { padding: 15px 0; }
    .navbar-nav .nav-item { padding: 8px 0; }
    .navbar-nav .nav-item a { font-size: 17px; padding: 10px 20px; }
    .consultation-button { margin-top: 15px; width: 100%; max-width: 245px; margin-left: auto; margin-right: auto; }
    
    /* FIXED: Consistent mobile background */
    .navbar-collapse { 
        border-top: 1px solid rgba(255, 255, 255, 0.2); 
        margin-top: 15px; 
        padding-top: 15px; 
        background-color: rgba(24, 8, 43, 0.95) !important; 
    }
    
    /* Keep background consistent on solid navbar pages */
    body.page-solid-navbar .navbar-collapse { 
        background-color: rgba(255, 255, 255, 0.98) !important; 
        border-top: 1px solid rgba(24, 8, 43, 0.1); 
    }
    
    /* FIXED: Mobile dropdown menu styling */
    .dropdown-menu { 
        background-color: transparent !important; 
        box-shadow: none; 
        padding: 0; 
        margin: 0; 
        border: none;
        border-radius: 0;
        position: static !important;
        display: none;
    }
    
    /* Show dropdown when active */
    .dropdown-menu.show {
        display: block !important;
    }
    
    .dropdown-item { 
        color: var(--color-white) !important; 
        font-size: 16px; 
        padding: 10px 30px; 
        margin: 0; 
        background-color: transparent !important;
    }
    
    body.page-solid-navbar .dropdown-item { 
        color: var(--color-purple) !important; 
    }
    
    .dropdown-item:hover,
    .dropdown-item:focus,
    .dropdown-item:active { 
        background-color: rgba(246, 155, 9, 0.2) !important; 
        color: var(--color-orange) !important;  
    }
   
    /* Show dropdown arrow on mobile */
    .nav-link.dropdown-toggle::after { 
        display: inline-block !important;
        margin-left: 6px;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .navbar-brand .image-1 { height: 45px;  }
    .nav_common_container { width: 100%; padding: 0 15px; }
    .navbar-brand .image-2 { height: 18px; width: 100px; }
    .navbar-nav .nav-item a { font-size: 16px; color: var(--color-white)!important; }
    .consultation-button { font-size: 14px; padding: 10px 20px;margin:10px; }
    .dropdown-item { font-size: 15px; padding: 10px 25px; }
    .dropdown-submenu .submenu .dropdown-item { padding-left: 45px; font-size: 14px; }
    
    /* Ensure mobile background stays consistent */
    .collapse.navbar-collapse { 
        background-color: var(--color-purple) !important;
        
    }
    
    
    body.page-solid-navbar .collapse.navbar-collapse {
        background-color: var(--color-purple) !important;
        /*.navbar-nav .nav-item a { font-size: 16px; color:var(--color-purple)!important;*/
    }
}

@media (max-width: 480px) {
    .navbar-brand .image-1 { height: 40px;  }
   
    .navbar-nav .nav-item a { font-size: 15px; padding: 8px 15px; }
    .dropdown-item { font-size: 14px; padding: 8px 20px; }
}

.consultation-button:focus { outline: 3px solid rgba(246, 155, 9, 0.5); outline-offset: 2px; }
.dropdown-item:focus { outline: 2px solid var(--color-orange); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { 
        animation-duration: 0.01ms !important; 
        animation-iteration-count: 1 !important; 
        transition-duration: 0.01ms !important; 
    }
}

/* DESKTOP DROPDOWN - THE FIX */
@media (min-width: 992px) {
    .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
        animation: dropdownShow 0.4s ease forwards;
    }

    .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease;
        margin-top: 0;
        background: var(--color-purple);
        padding: 10px 0;
        position: fixed !important;
        z-index: 99999 !important;
    }

    @keyframes dropdownShow {
        to {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
    }
    
    .dropdown-menu .dropdown-item {
        color: var(--color-white) !important; 
        font-size: 13px !important;
    } 
    
    .dropdown-menu .dropdown-item:hover {
        background-color: var(--color-orange);
    }
}

.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item:focus {
    background-color: transparent;
    color: var(--color-white) !important;
    outline: none;
}