/*
Theme Name: Enfold Child
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold Wordpress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating will be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://www.kriesi.at
Template: enfold
*/



/*Add your own styles here:*/

.page-id-1545 .container_wrap {border-top:none!important;}
.page-id-1545 .container_wrap_first {display: none !important;}




/* ===================================================================
   MODERN GLASSMORPHISM HEADER
   
   Replaces Enfold's default glassy header with modern backdrop-filter
   blur effect (like iOS/macOS Big Sur glass)
   
   Browser Support: Chrome 76+, Safari 9+, Firefox 103+, Edge 79+
   Fallback: Older browsers get semi-transparent white background
   =================================================================== */

/* -------------------------------------------------------------------
   1. GLASSY STATE (at top of page, transparency active)
   ------------------------------------------------------------------- */

/* Override Enfold's default glassy background with backdrop-filter - HIGHER SPECIFICITY */
#top .av_header_glassy.av_header_transparency .header_bg,
#top .av_header_glassy.av_header_transparency .header_bg:before,
#top .av_header_glassy.av_header_transparency .header_bg:after {
    /* Semi-transparent white tint - more subtle */
    background: rgba(255, 255, 255, 0.15) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    opacity: 1 !important;
    
    /* SUBTLE glass effect - minimal blur */
    -webkit-backdrop-filter: blur(8px) saturate(130%) brightness(1.03) !important;
    backdrop-filter: blur(8px) saturate(130%) brightness(1.03) !important;
    
    /* Subtle border for definition */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
    
    /* Lighter shadow for depth */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
    
    /* Enable GPU acceleration for smooth performance */
    transform: translateZ(0) !important;
    will-change: backdrop-filter !important;
    
    /* Smooth transitions */
    transition: all 0.4s ease-in-out !important;
}

/* Enhance readability of text on glass background - more subtle */
#top .av_header_glassy.av_header_transparency .main_menu ul:first-child > li > a {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    font-weight: 500; /* Slightly bolder text for better contrast */
}

/* Add subtle glow to logo on glass for better visibility */
#top .av_header_glassy.av_header_transparency .logo img {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1));
}

/* Optional: Add very subtle glow effect to the entire header content */
#top .av_header_glassy.av_header_transparency #header_main {
    background: rgba(255, 255, 255, 0.03);
}

/* Burger icon on transparent glass */
#top .av_header_glassy.av_header_transparency .av-hamburger-inner,
#top .av_header_glassy.av_header_transparency .av-hamburger-inner::before,
#top .av_header_glassy.av_header_transparency .av-hamburger-inner::after {
    /* Inherit color from theme settings */
    transition: background-color 0.3s ease;
}


/* -------------------------------------------------------------------
   2. SOLID STATE (scrolled > 50px, transparency removed)
   ------------------------------------------------------------------- */

/* Remove backdrop filter when header becomes solid */
#top .av_header_glassy:not(.av_header_transparency) .header_bg {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: #ffffff !important;
    opacity: 1 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    
    /* Remove will-change for better performance when not needed */
    will-change: auto;
}

/* Remove text shadows in solid state */
#top .av_header_glassy:not(.av_header_transparency) .main_menu ul:first-child > li > a {
    text-shadow: none;
}

/* Remove logo glow in solid state */
#top .av_header_glassy:not(.av_header_transparency) .logo img {
    filter: none;
}


/* -------------------------------------------------------------------
   3. BURGER MENU ACTIVE STATE (dark blue background)
   ------------------------------------------------------------------- */

/* Dark blue background when burger menu is open */
#header.av_burger_menu_active .header_bg {
    background-color: #1a3d5c !important; /* Dark blue - adjust to your brand color */
    opacity: 1 !important;
    
    /* Remove blur effect in menu state for better performance */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Show alternate (reverse) logo when burger menu is active */
#header.av_burger_menu_active .logo img.alternate,
#header.av_burger_menu_active .logo .subtext.avia-svg-logo-sub svg {
    opacity: 1 !important;
}

/* Hide main logo when burger menu is active */
#header.av_burger_menu_active .logo a > img:not(.alternate),
#header.av_burger_menu_active .logo a > svg:not(.avia-svg-logo-sub) {
    opacity: 0 !important;
}

/* White text on dark background */
#header.av_burger_menu_active .main_menu ul:first-child > li > a,
#header.av_burger_menu_active .main_menu ul:first-child > li > a .avia-menu-text {
    color: #ffffff !important;
    text-shadow: none;
}

/* White hamburger icon on dark background */
#header.av_burger_menu_active .av-hamburger-inner,
#header.av_burger_menu_active .av-hamburger-inner::before,
#header.av_burger_menu_active .av-hamburger-inner::after {
    background-color: #ffffff !important;
}

/* If you have social icons or other header elements */
#header.av_burger_menu_active .social_bookmarks li a {
    color: #ffffff !important;
}


/* -------------------------------------------------------------------
   4. BROWSER FALLBACKS
   ------------------------------------------------------------------- */

/* Fallback for browsers that don't support backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
    #top .av_header_glassy.av_header_transparency .header_bg {
        /* Fallback to semi-transparent white (like original Enfold) */
        background: rgba(255, 255, 255, 0.85) !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* IE11 specific fallback (if needed) */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #top .av_header_glassy.av_header_transparency .header_bg {
        background: rgba(255, 255, 255, 0.85) !important;
        filter: none;
    }
}


/* -------------------------------------------------------------------
   5. RESPONSIVE ADJUSTMENTS
   ------------------------------------------------------------------- */

/* On mobile/tablet, reduce blur for better performance but keep it noticeable */
@media only screen and (max-width: 989px) {
    #top .av_header_glassy.av_header_transparency .header_bg {
        /* Reduce blur intensity on mobile for better performance */
        -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.1);
        backdrop-filter: blur(20px) saturate(180%) brightness(1.1);
    }
}

@media only screen and (max-width: 767px) {
    #top .av_header_glassy.av_header_transparency .header_bg {
        /* Less blur on small mobile devices but still visible */
        -webkit-backdrop-filter: blur(15px) saturate(160%) brightness(1.08);
        backdrop-filter: blur(15px) saturate(160%) brightness(1.08);
    }
}


/* -------------------------------------------------------------------
   6. OPTIONAL ENHANCEMENTS
   ------------------------------------------------------------------- */

/* Add smooth color transitions */
#header .header_bg {
    transition: background-color 0.4s ease-in-out, 
                backdrop-filter 0.4s ease-in-out,
                border-color 0.4s ease-in-out;
}

/* Smooth logo transitions */
#header .logo img,
#header .logo svg {
    transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out;
}

/* Smooth menu text color transitions */
#header .main_menu ul:first-child > li > a {
    transition: color 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
}


/* -------------------------------------------------------------------
   7. CUSTOM COLOR VARIATIONS (Optional)
   
   Uncomment and adjust to customize colors for different states
   ------------------------------------------------------------------- */

/* OPTION 1: Light blue glass instead of white */
/*
#top .av_header_glassy.av_header_transparency .header_bg {
    background: rgba(173, 216, 230, 0.25) !important;
    backdrop-filter: blur(30px) saturate(200%) brightness(1.15);
}
*/

/* OPTION 2: Frosted gradient glass (very modern) */
/*
#top .av_header_glassy.av_header_transparency .header_bg {
    background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(240,248,255,0.25)) !important;
    backdrop-filter: blur(30px) saturate(200%) brightness(1.15);
}
*/

/* OPTION 3: EXTREME BLUR - Maximum glassmorphism effect */
/*
#top .av_header_glassy.av_header_transparency .header_bg {
    background: rgba(255, 255, 255, 0.3) !important;
    -webkit-backdrop-filter: blur(40px) saturate(250%) brightness(1.2) contrast(1.15);
    backdrop-filter: blur(40px) saturate(250%) brightness(1.2) contrast(1.15);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
}
*/

/* OPTION 4: Dark frosted glass */
/*
#top .av_header_glassy.av_header_transparency .header_bg {
    background: rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(30px) saturate(180%) brightness(0.9);
}
#top .av_header_glassy.av_header_transparency .main_menu ul:first-child > li > a {
    color: #ffffff !important;
}
*/


/* ===================================================================
   END GLASSMORPHISM HEADER STYLES
   =================================================================== */


/* ===================================================================
   CUSTOM MAIN NAVIGATION - Search, Contact, Menu Label
   
   Modifies the main navigation to match design requirements:
   1. Always-visible search bar (no popup)
   2. "MENU" label on burger icon
   3. Contact button beside burger menu
   =================================================================== */

/* -------------------------------------------------------------------
   1. CUSTOM HEADER ELEMENTS CONTAINER
   ------------------------------------------------------------------- */

   .av_minimal_header #header_main .container, .av_minimal_header .main_menu ul:first-child > li a {
    height: 100px;
    line-height: 60px;}
    /* Use Enfold's flexbox approach */
.inner-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 100% !important;
    gap: 20px !important; /* Add spacing between header elements */
}

/* Logo positioning - left side */
.logo {
    flex-shrink: 0 !important;
    width: auto !important;
    max-width: none !important;
    order: 1 !important;
}

/* Container for all custom header elements - positioned on the right */
.custom-header-elements {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    flex-shrink: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    order: 2 !important;
    margin-left: auto !important;
    margin-right: 60px !important;
}

/* Main menu is now inside custom-header-elements container */
/* Only apply order if menu is NOT inside custom-header-elements (for backwards compatibility) */
.inner-container > .main_menu {
    flex: 0 0 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    order: 3 !important;
    flex-shrink: 0 !important;
    width: auto !important;
    max-width: none !important;
}

/* Menu inside custom-header-elements - no order needed, flows naturally */
.custom-header-elements .main_menu {
    position: relative !important; /* Override absolute positioning */
    left: auto !important;
    right: auto !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    width: auto !important;
    margin: 0 !important;
}

/* On desktop, hide all menu items except the first one (Menu button) */
@media only screen and (min-width: 990px) {
    .custom-header-elements nav.main_menu #avia-menu > li:not(:first-child) {
        display: none !important;
    }
    
    /* Style the first menu item (Menu button) to match Contact button */
    .custom-header-elements nav.main_menu #avia-menu > li:first-child > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 20px !important;
        background: #221e46 !important;
        color: #ffffff !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        height: 50px !important;
        line-height: 50px !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        transition: all 0.3s ease !important;
        white-space: nowrap !important;
    }
    
    .custom-header-elements nav.main_menu #avia-menu > li:first-child > a:hover {
        background: #2a2455 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(34, 30, 70, 0.3) !important;
    }
    
    .custom-header-elements nav.main_menu #avia-menu > li:first-child > a:active {
        transform: translateY(0) !important;
    }
}

/* On mobile, hide nav visually but keep in DOM for Enfold's script to clone */
@media only screen and (max-width: 989px) {
    .custom-header-elements nav.main_menu {
        position: absolute !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* Ensure burger menu elements are properly aligned */
.main_menu .av-burger-menu-main {
    display: flex !important;
    align-items: center !important;
    line-height: normal !important;
    height: 50px !important;  /* Fixed height to match contact button */
    max-height: 50px !important;  /* Prevent it from growing */
}

.main_menu .av-burger-menu-main strong {
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: normal !important;
}

.main_menu .av-burger-menu-main .av-hamburger {
    display: inline-block !important;
    vertical-align: middle !important;
}

/* -------------------------------------------------------------------
   2. ALWAYS-VISIBLE SEARCH BAR
   ------------------------------------------------------------------- */
/* Override Enfold's form margin that affects search bar */
#top form {
    margin-bottom: 0 !important;
    margin: 0 !important;
}
/* Container for search */
.custom-search-wrapper {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}
#top input[type="search"] {padding: 0;margin-top:15px;margin-bottom: 15px;}

/* Search form styling - HIGH SPECIFICITY */
#top .search-form-always-visible,
.custom-header-elements .search-form-always-visible,
.inner-container .search-form-always-visible {
    display: flex !important;
    align-items: center !important;
    background: #918EA0 !important;
    background-color: #918EA0 !important;
    border-radius: 8px !important;
    padding: 2px 20px !important;
    gap: 10px !important;
    width: 180px !important;
    max-width: 180px !important;
    min-width: 180px !important;
    flex-shrink: 0 !important;
    transition: all 0.3s ease !important;
    border: none !important;
    box-shadow: none !important;
}

.search-form-always-visible:focus-within {
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Search input field */
.search-input-always-visible,
#top .search-input-always-visible,
.custom-header-elements .search-input-always-visible {
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    outline: none !important;
    flex: 1 !important;
    font-size: 14px !important;
    color: #C8C7D0 !important;
    min-width: 100px !important;
    box-shadow: none !important;
}

.search-input-always-visible::placeholder {
    color: #C8C7D0 !important;
}
#top input[type="search"]:focus {color:#ffffff!important;}

/* Search submit button */
.search-submit-always-visible {
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    transition: transform 0.2s ease !important;
    color: #ffffff !important;
}

.search-submit-always-visible:hover {
    transform: scale(1.1);
    color: #333;
}


/* -------------------------------------------------------------------
   3. CONTACT BUTTON
   ------------------------------------------------------------------- */

/* Contact button container */
.custom-contact-wrapper {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

/* Contact button link styling - NEW CLASS NAME */
.main-nav-aspire-contact-button-link {
    display: inline-block !important;
    padding: 0 20px !important;
    background: #221e46 !important;
    background-color: #221e46 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    width: auto !important;
    max-width: none !important;
    flex-shrink: 0 !important;
    height: 50px !important;
    line-height: 50px !important;
    text-align: center !important;
    box-shadow: none !important;
    border: none !important;
}

/* Contact button hover - NEW CLASS NAME */
.main-nav-aspire-contact-button-link:hover {
    background: #2a2455 !important;
    background-color: #2a2455 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(34, 30, 70, 0.3) !important;
    color: #ffffff !important;
}

/* Contact button active - NEW CLASS NAME */
.main-nav-aspire-contact-button-link:active {
    transform: translateY(0) !important;
}

/* -------------------------------------------------------------------
   4. LANGUAGE SELECTOR (DESKTOP ONLY)
   ------------------------------------------------------------------- */

.custom-language-selector-wrapper {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

.custom-language-selector {
    position: relative !important;
    display: inline-block !important;
}

/* Globe icon button - transparent background */
.custom-language-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #221e46 !important;
    border-radius: 8px !important;
    border: 1px solid rgba(34, 30, 70, 0.1) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
}

.custom-language-trigger:hover {
    background: #f8f8f8 !important;
    background-color: #f8f8f8 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    border-color: rgba(34, 30, 70, 0.2) !important;
}

.custom-language-trigger:active {
    transform: translateY(0) !important;
}

.custom-language-trigger svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
}

/* Dropdown container - white background */
.custom-language-dropdown {
    position: absolute !important;
    top: calc(100% + 2px) !important;
    right: 0 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(34, 30, 70, 0.1) !important;
    width: 50px !important;
    padding: 8px 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease !important;
    z-index: 1000 !important;
    pointer-events: none !important;
}

/* Bridge element to maintain hover continuity between button and dropdown */
.custom-language-dropdown::before {
    content: '' !important;
    position: absolute !important;
    bottom: 100% !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: transparent !important;
    pointer-events: auto !important;
}

/* Show dropdown on hover */
.custom-language-selector:hover .custom-language-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* Ensure bridge maintains hover when dropdown is visible */
.custom-language-selector:hover .custom-language-dropdown::before {
    pointer-events: auto !important;
}

/* Flag items - stacked vertically */
.custom-language-flag-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 0 !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease !important;
    border-bottom: 1px dashed rgba(34, 30, 70, 0.1) !important;
}

.custom-language-flag-item:last-child {
    border-bottom: none !important;
}

.custom-language-flag-item:hover {
    background-color: #f8f8f8 !important;
}

.custom-language-flag {
    font-size: 24px !important;
    line-height: 1 !important;
    display: block !important;
}

/* Hide on mobile/tablet */
@media only screen and (max-width: 989px) {
    .custom-language-selector-wrapper {
        display: none !important;
    }
}

/* -------------------------------------------------------------------
   5. CUSTOM BURGER MENU (MOBILE/TABLET)
   ------------------------------------------------------------------- */

/* Burger menu wrapper - hidden on desktop, shown on mobile */
/* Note: Also has .av-burger-menu-main class so Enfold's JS recognizes it */
.custom-burger-wrapper {
    display: none !important; /* Hidden on desktop by default */
    align-items: center !important;
    flex-shrink: 0 !important;
    position: relative !important; /* Override any absolute positioning from Enfold */
    order: 0 !important; /* Ensure it appears in document order within flex container */
}

/* Show custom burger on mobile/tablet, hide on desktop */
@media only screen and (max-width: 989px) {
    .custom-burger-wrapper {
        display: flex !important;
    }
}

/* Explicitly hide custom burger on desktop */
@media only screen and (min-width: 990px) {
    .custom-burger-wrapper {
        display: none !important;
    }
}

/* Hide Enfold's auto-generated burger menu when it's inside nav.main_menu */
/* Our custom burger is in custom-header-elements, not in nav.main_menu */
nav.main_menu .av-burger-menu-main.menu-item-avia-special,
nav.main_menu > ul > li.av-burger-menu-main {
    display: none !important;
}

/* Style our custom burger link to match other buttons */
.custom-burger-wrapper a {
    display: flex !important;
    align-items: center !important;
    padding: 0 20px !important;
    background: #221e46 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    height: 50px !important;
    transition: all 0.3s ease !important;
}

.custom-burger-wrapper a:hover {
    background: #2a2455 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(34, 30, 70, 0.3) !important;
}

.custom-burger-wrapper a:active {
    transform: translateY(0) !important;
}

/* Burger icon and text alignment */
.custom-burger-wrapper .av-hamburger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.custom-burger-wrapper .av-hamburger strong {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #ffffff !important;
}

/* Ensure close button shows in mobile overlay */
/* When overlay is open, Enfold adds a burger icon inside overlay for closing */
.av-burger-overlay .av-burger-menu-main {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 1000 !important;
}

.av-burger-overlay .av-burger-menu-main a {
    background: transparent !important;
    color: #ffffff !important;
    padding: 10px !important;
    border-radius: 0 !important;
}

.av-burger-overlay .av-burger-menu-main .av-hamburger-inner,
.av-burger-overlay .av-burger-menu-main .av-hamburger-inner::before,
.av-burger-overlay .av-burger-menu-main .av-hamburger-inner::after {
    background-color: #ffffff !important;
}

/* Hide text on close button, only show X icon */
.av-burger-overlay .av-burger-menu-main strong,
.av-burger-overlay .av-burger-menu-main .avia_hidden_link_text {
    display: none !important;
}




/* -------------------------------------------------------------------
   5. NAVIGATION LAYOUT ADJUSTMENTS
   ------------------------------------------------------------------- */



/* Force custom elements to stay on the same line */
.custom-header-elements > * {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* Menu is now inside custom-header-elements, so reset positioning */
@media only screen and (min-width: 990px) {
    /* Menu is inside custom-header-elements container, reset default Enfold positioning */
    .custom-header-elements nav.main_menu {
        margin-top: 0 !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        height: 50px !important; /* Match other header elements */
    }
    
    /* Style the Menu button (first menu item) to match Contact button */
    .custom-header-elements nav.main_menu .av-main-nav > li:first-child > a {
        display: inline-block !important;
        padding: 0 20px !important;
        background: #221e46 !important;
        background-color: #221e46 !important;
        color: #ffffff !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        transition: all 0.3s ease !important;
        white-space: nowrap !important;
        height: 50px !important;
        line-height: 50px !important;
        border: none !important;
    }
    
    /* Menu button hover */
    .custom-header-elements nav.main_menu .av-main-nav > li:first-child > a:hover {
        background: #2a2455 !important;
        background-color: #2a2455 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(34, 30, 70, 0.3) !important;
        color: #ffffff !important;
    }
    
    /* Menu button active */
    .custom-header-elements nav.main_menu .av-main-nav > li:first-child > a:active {
        transform: translateY(0) !important;
    }
}

/* Fix original burger menu label position */
.av-burger-menu-main {
    display: flex !important;
    align-items: center !important;
    flex-direction: row-reverse !important;
    gap: 8px !important;
}

.av-burger-menu-main strong {
    order: -1 !important;
    display: inline-block !important;
    margin: 0 !important;
    font-weight: 600;
    font-size: 14px;
    color: inherit;
    white-space: nowrap;
}



/* Make sure the logo doesn't expand */
.logo {
    flex-shrink: 0 !important;
    width: auto !important;
    max-width: none !important;
}


/* -------------------------------------------------------------------
   6. RESPONSIVE ADJUSTMENTS
   ------------------------------------------------------------------- */

/* Match Enfold's height change at this breakpoint */
@media only screen and (min-width: 768px) and (max-width: 989px) {
    nav.main_menu {
        margin-top: 45px !important; /* Adjusted for 90px height */
    }
}

/* Tablet adjustments */
@media only screen and (max-width: 989px) {
    /* Reduce burger menu margin-top for smaller screens */
    body #top nav.main_menu,
    nav.main_menu {
        margin-top: 20px !important;
    }
    
    .search-form-always-visible {
        width: 160px;
    }
    
    .search-input-always-visible {
        min-width: 80px;
    }
    
    .main-nav-aspire-contact-button-link,
    .av-burger-menu-main {
        padding: 8px 20px;
        font-size: 13px;
    }
}


/* Hide search bar below 600px */
@media only screen and (max-width: 600px) {
    .custom-search-wrapper {
        display: none !important;
    }
}

/* Mobile adjustments */
@media only screen and (max-width: 767px) {
    /* Adjust custom header elements for mobile */
    .custom-header-elements {
        gap: 10px;
    }
    
    .search-form-always-visible {
        width: 140px;
    }
    
    .search-input-always-visible {
        min-width: 60px;
        font-size: 13px;
    }
    
    .main-nav-aspire-contact-button-link,
    .av-burger-menu-main {
        padding: 8px 15px;
        font-size: 12px;
    }
    .responsive #top #wrap_all .main_menu  {
        margin-top: 35px !important; /* Adjusted for height */
        line-height:30px;
    }
    nav.main_menu  {
        margin-top: 35px !important; /* Adjusted for height */
        line-height:30px;
    }
    
    .responsive.html_mobile_menu_tablet #top #header_main > .container .main_menu .av-main-nav > li > a {
       line-height:60px;  
    } 
}

/* Small mobile */
@media only screen and (max-width: 480px) {
    .custom-header-elements {
        gap: 8px;
    }
    
    .search-form-always-visible {
        width: 120px;
    }
    
    .search-input-always-visible {
        min-width: 50px;
        font-size: 12px;
    }
    
    .main-nav-aspire-contact-button-link,
    .av-burger-menu-main {
        padding: 6px 12px;
        font-size: 11px;
    }
}


/* -------------------------------------------------------------------
   6. BURGER MENU OVERLAY STYLING
   (For the sidebar flyout menu)
   ------------------------------------------------------------------- */

/* Background color for burger menu overlay */
.av-burger-overlay-inner {
    background-color: #221e46 !important;
    background-image: url('/wp-content/uploads/2025/09/Vector-362.png');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: auto;
}

/* Menu items in burger overlay */
.av-burger-overlay-inner a,
.av-burger-overlay-inner .avia-menu-text {
    color: #ffffff !important;
}

.av-burger-overlay-inner a:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}


/* ===================================================================
   DESKTOP MENU VISIBILITY FIX
   =================================================================== 
   
   When using Enfold's native alternate menu system, the desktop menu
   uses #avia-menu. This override ensures it's visible on desktop,
   overriding any cached CSS from previous custom approaches.
   =================================================================== */

/* ===================================================================
   ALWAYS SHOW BURGER MENU (Desktop + Mobile)
   =================================================================== 
   
   Override Enfold's default behavior to always show burger menu
   instead of text menu items. This provides consistent UX across
   all screen sizes.
   =================================================================== */

/* Always show burger menu on all screen sizes */
#top .main_menu .av-burger-menu-main,
#top #avia-menu .av-burger-menu-main,
#top .avia-menu .av-burger-menu-main {
    display: block !important;
    visibility: visible !important;
}

/* ===================================================================
   DESKTOP MENU - Progressive Disclosure Menu System
   =================================================================== */
/* Hide desktop expanded menu on mobile/tablet */
@media only screen and (max-width: 989px) {
    .aspire-expanded-menu-container,
    .aspire-expanded-menu-list {
        display: none !important;
        visibility: hidden !important;
    }
}

@media only screen and (min-width: 990px) {
    /* Hide burger menu on desktop */
    #top #header_main #avia-menu .menu-item-avia-special,
    #top .main_menu #avia-menu .menu-item-avia-special,
    #top #avia-menu .menu-item-avia-special {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Hide sub-items of first menu item initially (they'll be shown in expanded menu) */
    #top #header_main #avia-menu > li:first-child > ul.sub-menu,
    #top .main_menu #avia-menu > li:first-child > ul.sub-menu,
    #top #avia-menu > li:first-child > ul.sub-menu {
        display: none !important;
    }
    
    /* Hide all menu items except first one ("Menu") */
    #top #header_main #avia-menu > li:not(:first-child),
    #top .main_menu #avia-menu > li:not(:first-child),
    #top #avia-menu > li:not(:first-child) {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Show first menu item ("Menu") button */
    #top #header_main #avia-menu > li:first-child,
    #top .main_menu #avia-menu > li:first-child,
    #top #avia-menu > li:first-child {
        display: block !important;
        visibility: visible !important;
    }
    
    /* Expanded menu container - Full width horizontal menu */
    .aspire-expanded-menu-container {
        position: fixed !important;
        /* top will be set by JavaScript to be just below header with small buffer */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: #221e46 !important;
        backdrop-filter: blur(10px) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important; /* Subtle shadow for depth */
        z-index: 9998 !important;
        padding-top: 0 !important; /* No top padding - start immediately */
        padding-right: 40px !important;
        padding-bottom: 0 !important; /* No bottom padding */
        padding-left: 40px !important;
        opacity: 0 !important;
        visibility: hidden !important;
        max-height: calc(90vh - var(--header-height, 100px)) !important;
        overflow-y: auto !important;
        /* Use clip-path to reveal downward from top (below header) - starts hidden from bottom */
        clip-path: inset(0% 0% 100% 0%) !important;
        transition: opacity 0.3s ease, visibility 0.3s ease, clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .aspire-expanded-menu-container.aspire-menu-open {
        opacity: 1 !important;
        visibility: visible !important;
        /* Reveal by unclipping from bottom - expands downward from below header (roll down effect) */
        clip-path: inset(0% 0% 0% 0%) !important;
    }
    
    /* Inner container - Column layout (top menu items at top, then description + sub-items below) */
    .aspire-expanded-menu-inner {
        display: flex !important;
        flex-direction: column !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Top-level menu items container - Horizontal at top */
    .aspire-expanded-menu-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 25px 0 0 0 !important; /* Add top padding here instead - 25px above menu items */
        margin-bottom: 0 !important;
    }
    
    /* Expanded menu list - Horizontal layout for top-level items */
    .aspire-expanded-menu-list {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        gap: 20px !important;
    }
    
    /* Below menu items - Two column layout for description + sub-items */
    .aspire-expanded-menu-inner .aspire-expanded-menu-description-wrapper {
        display: flex !important;
        align-items: flex-start !important;
        gap: 60px !important;
        margin-top: 0 !important; /* No margin - container padding handles spacing */
        margin-bottom: 0 !important;
        padding: 15px 0 0 0 !important; /* 15px top padding only */
    }
    
    /* Left column - Description */
    .aspire-expanded-menu-description {
        flex: 0 0 400px !important;
        padding-right: 40px !important;
        border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
        color: #ffffff !important;
        font-size: 16px !important;
        line-height: 1.8 !important;
    }
    
    /* Only add bottom padding when description has content */
    .aspire-expanded-menu-description:not(:empty) {
        padding-bottom: 20px !important;
    }
    
    .aspire-expanded-menu-description h2,
    .aspire-expanded-menu-description h3 {
        color: #ffffff !important;
        font-size: 32px !important;
        font-weight: 700 !important;
        margin: 0 0 20px 0 !important;
        line-height: 1.2 !important;
    }
    
    .aspire-expanded-menu-description p {
        color: rgba(255, 255, 255, 0.9) !important;
        margin: 0 !important;
        font-size: 16px !important;
        line-height: 1.8 !important;
    }
    
    /* Right column - Sub-menu items container */
    .aspire-expanded-menu-inner .aspire-expanded-menu-sub-items-wrapper {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
    }
    
    
    /* Top-level menu items in expanded menu */
    .aspire-expanded-menu-list > li {
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        position: relative !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
    
    .aspire-expanded-menu-list > li > a {
        display: block !important;
        padding: 12px 0 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #ffffff !important;
        text-decoration: none !important;
        border-bottom: 2px solid transparent !important;
        transition: border-color 0.3s ease, color 0.3s ease !important;
    }
    
    .aspire-expanded-menu-list > li > a:hover,
    .aspire-expanded-menu-list > li > a:focus,
    .aspire-expanded-menu-list > li.av-active-submenu > a {
        color: #77db89 !important; /* Highlight color for hover and active */
        border-bottom-color: #77db89 !important; /* Green underline for active */
        opacity: 1 !important;
    }
    
    /* Sub-menu items - Display as vertical stack (appears in right column beside description) */
    /* These now appear in .aspire-expanded-menu-sub-items-wrapper */
    .aspire-expanded-menu-sub-items-wrapper > ul.sub-menu {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important; /* Vertical layout - stack items vertically */
        flex-wrap: nowrap !important;
        gap: 10px !important; /* Reduced spacing between items - half of 20px */
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }
    
    /* Hide sub-menus that are still in the list items (they get moved to wrapper) */
    .aspire-expanded-menu-list > li > ul.sub-menu {
        display: none !important;
    }
    
    /* Sub-menu items styling - Stacked vertically */
    .aspire-expanded-menu-sub-items-wrapper > ul.sub-menu > li {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 0 0 auto !important;
        width: 100% !important; /* Full width for vertical stacking */
        align-items: flex-start !important; /* Align content to left */
    }
    
    .aspire-expanded-menu-sub-items-wrapper > ul.sub-menu > li > a {
        display: block !important;
        padding: 4px 0 !important; /* Reduced from 8px to 4px to reduce vertical spacing */
        font-size: 14px !important;
        font-weight: 600 !important; /* Bold for sub-menu headers */
        color: #ffffff !important;
        text-decoration: none !important;
        transition: opacity 0.3s ease !important;
        margin-bottom: 0 !important;
    }
    
    .aspire-expanded-menu-sub-items-wrapper > ul.sub-menu > li > a:hover,
    .aspire-expanded-menu-sub-items-wrapper > ul.sub-menu > li > a:focus,
    .aspire-expanded-menu-sub-items-wrapper > ul.sub-menu > li.av-show-submenu > a {
        color: #77db89 !important; /* Highlight color for hover and active */
        opacity: 1 !important;
    }
    
    /* Sub-sub menu items (nested) - Display vertically stacked (not horizontal) */
    .aspire-expanded-menu-sub-items-wrapper > ul.sub-menu > li > ul.sub-menu {
        list-style: none !important;
        margin: 8px 0 0 0 !important;
        padding: 0 !important;
        display: none !important;
        flex-direction: column !important; /* Stack vertically */
        gap: 4px !important; /* Reduced spacing between sub-sub items - half of 8px */
        width: 100% !important; /* Full width of parent column */
        overflow: hidden !important; /* For smooth animation */
        max-height: 0 !important; /* Start collapsed for animation */
        opacity: 0 !important;
        transition: max-height 0.3s ease, opacity 0.3s ease !important;
    }
    
    .aspire-expanded-menu-sub-items-wrapper > ul.sub-menu > li.av-show-submenu > ul.sub-menu {
        display: flex !important;
        max-height: 1000px !important; /* Large enough for content - JS will set actual height */
        opacity: 1 !important;
    }
    
    /* Sub-sub menu items styling (nested within their column) - Stack vertically */
    .aspire-expanded-menu-sub-items-wrapper > ul.sub-menu > li > ul.sub-menu > li {
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        width: 100% !important; /* Full width - stacked vertically */
        flex: none !important; /* Don't flex - stack naturally */
    }
    
    .aspire-expanded-menu-sub-items-wrapper > ul.sub-menu > li > ul.sub-menu > li > a {
        display: block !important;
        padding: 6px 0 !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        text-decoration: none !important;
        transition: opacity 0.3s ease !important;
    }
    
    .aspire-expanded-menu-sub-items-wrapper > ul.sub-menu > li > ul.sub-menu > li > a:hover,
    .aspire-expanded-menu-sub-items-wrapper > ul.sub-menu > li > ul.sub-menu > li > a:focus {
        color: #77db89 !important; /* Highlight color for hover */
        opacity: 1 !important;
    }
    
    /* Indicator for items with sub-menus */
    .aspire-expanded-menu-list > li.menu-item-has-children > a::after {
        content: " ▼" !important;
        font-size: 10px !important;
        margin-left: 6px !important;
        display: inline-block !important;
        transition: transform 0.3s ease !important;
        color: #ffffff !important;
    }
    
    .aspire-expanded-menu-list > li.menu-item-has-children.av-show-submenu > a::after {
        transform: rotate(180deg) !important;
    }
    
    /* Indicator for sub-menu items that have children (only show arrows on items with sub-sub menus) */
    .aspire-expanded-menu-sub-items-wrapper > ul.sub-menu > li.menu-item-has-children > a::after {
        content: " ▼" !important; /* Down arrow when collapsed */
        font-size: 8px !important;
        margin-left: 6px !important;
        display: inline-block !important;
        transition: transform 0.3s ease !important;
        color: #ffffff !important;
    }
    
    /* Rotate arrow to up when item is expanded (has av-show-submenu class) */
    .aspire-expanded-menu-sub-items-wrapper > ul.sub-menu > li.menu-item-has-children.av-show-submenu > a::after {
        transform: rotate(180deg) !important; /* Rotate down arrow to up arrow */
    }
    
    /* Hide alternate menu container on desktop so Enfold's JS doesn't find it */
    #top #avia_alternate_menu_container,
    #top #avia_alternate_menu {
        display: none !important;
        visibility: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }
}

/* Mobile: Ensure alternate menu container is findable (but hidden per Enfold's design) */
@media only screen and (max-width: 989px) {
    /* Keep container hidden (Enfold's design) but ensure menu is findable */
    #top #avia_alternate_menu_container {
        display: none !important; /* Enfold keeps this hidden */
    }
    
    /* But make the menu itself findable by Enfold's JS */
    #top #avia_alternate_menu {
        display: block !important;
        visibility: visible !important;
        position: static !important;
        left: auto !important;
    }
}

/* Mobile: Enfold already handles burger menu display, but ensure it's visible */
@media only screen and (max-width: 989px) {
    #top .main_menu .av-burger-menu-main,
    #top #avia-menu .av-burger-menu-main {
        display: block !important;
        visibility: visible !important;
    }
}

/* ===================================================================
   END CUSTOM MAIN NAVIGATION STYLES
   =================================================================== */


/* ===================================================================
   ASPIRE CUSTOM FOOTER EXTRAS
   =================================================================== */

/* Footer extras row - 2 column layout below widgets */
.aspire-footer-extras-row {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin-top: 40px !important;
    padding-top: 30px !important;
    margin-bottom: 10px;
    border-top: 1px solid rgba(255, 255, 255, 1) !important;
}

/* Left column - company info */
.aspire-footer-extras-left {
    text-align: left !important;
}

/* Right column - legal links (right-aligned) */
.aspire-footer-extras-right {
    text-align: right !important;
}

/* Footer extra links styling */
.aspire-footer-extras-row .footer-link {
    margin: 0 0 10px 0 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.aspire-footer-extras-row .footer-link a {
    color: #ffffff !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.aspire-footer-extras-row .footer-link a:hover {
    color: #77db89 !important;
    text-decoration: none !important;
}

/* Footer info text (non-link paragraphs) */
.aspire-footer-extras-row .footer-info {
    margin: 20px 0 5px 0 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.8) !important;
}
.aspire-footer-extras-row .footer-info2 {
    margin: 5px 0 10px 0 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

.aspire-footer-extras-row .footer-info strong {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Copyright text */
.aspire-footer-extras-row .footer-copyright {
    margin: 20px 0 0 0 !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Mobile responsive: Stack columns */
@media only screen and (max-width: 767px) {
    .aspire-footer-extras-row {
        margin-top: 30px !important;
        padding-top: 20px !important;
    }
    
    .aspire-footer-extras-left,
    .aspire-footer-extras-right {
        text-align: left !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }
}

/* ===================================================================
   END ASPIRE CUSTOM FOOTER EXTRAS
   =================================================================== */