/* Main Header */
.main-header{ width: 100%; z-index: 9999; transition: var(--transition); position: fixed; background: transparent; padding: 60px 0 22px 0; }
.main-header.header-bg{ background: black; padding: 22px 0; }
.main-header .content{ height: 100%; display: flex; align-items: center; justify-content: space-between; position: relative; }

/* Logo */
.main-header .logo{ width: 162px; transition: var(--transition); position: absolute; z-index: 9999; }
.main-header .logo figure img{ width: 100%; }

/* Main Menu */
.main-header .main-menu{ width: 100%; display: flex; justify-content: center; }
.main-header .main-menu .menu{ display: flex; align-items: center; gap: 35px; justify-content: center; position: relative; }
.main-header .main-menu .menu li{ position: relative; z-index: 1; color: #FFF; text-align: center; padding: 3px 16px; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: 0.84px; text-transform: uppercase; }
.main-header .main-menu .menu li a{ color: var(--white); padding: 10px; text-decoration: none; transition: var(--transition); text-align: start; }
.main-header .main-menu .menu li:hover{ color: #FFF; }
.main-header .main-menu .menu li.current_page_item{ background: transparent; border-radius: 5px;}

/* Sliding nav indicator */
.main-header .main-menu .nav-indicator { position: absolute; background: #FF5407; border-radius: 5px; pointer-events: none; z-index: 0; opacity: 0; transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), top 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.4s cubic-bezier(0.4, 0, 0.2, 1), height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease; }
.main-header .main-menu .nav-indicator.is-visible { opacity: 1; }
.main-header .main-menu .nav-indicator.no-transition { transition: none !important; }
.main-header .main-menu .menu .menu-item-has-children > a:after{ content: '\f107'; font-family: var(--fa); font-weight: 900; margin-left: 10px; font-size: 14px; transition: var(--transition); display: inline-block; }
.main-header .main-menu .menu .sub-menu{ position: absolute; width: 200px; max-height: 0; height: auto; visibility: hidden; background: var(--black); display: flex; flex-direction: column; top: 48px; left: 0; transition: var(--transition); overflow: hidden; z-index: 9999; }
.main-header .main-menu .menu .sub-menu li a{ color: var(--white); padding: 15px; display: block; }
.main-header .main-menu .menu .sub-menu li a:hover{ background: var(--grey-222); }
.main-header .main-menu .menu li:hover .sub-menu{ opacity: 1; visibility: visible; max-height: 500px; }
.main-header .main-menu .menu li:hover > a:after{ transform: rotate(180deg); }
.main-header .background{ display: none;}
/* Menu Mobile */
.main-header .hamburger{ width: 27px; height: 30px; display: none; position: relative; z-index: 10890; top: 4px; margin-left: auto;}
.main-header .hamburger span{ display: block; background: var(--white); margin-bottom: 9px; height: 2px; width: 100%; border-radius: 5px; transition: transform 0.3s ease, opacity 0.3s ease; }
.main-header .close-menu{ width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,.4); position: fixed; z-index: 999; opacity: 0; visibility: hidden; transition: var(--transition); }

.main-header .button{ display: none; }


@media screen and (max-width: 1280px){
    .main-header .main-menu { justify-content: end; }
    .main-header .main-menu .menu { gap: 5px; }
}

@media screen and (max-width: 1023px){


    
}

@media screen and (max-width: 767px){
    .main-header .logo { width: 125px; }

    /* Menu Mobile */
    .main-header .hamburger{ display: block; }
    
    .main-header .main-menu{ opacity: 0; visibility: hidden; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; position: fixed; height: 100%; top: 0; left: 0; z-index: 1000; width: 100%; padding: 185px 30px 50px; background-color: #0C1A31; background-image: url('../img/mobile-nav-background.jpg'); background-size: cover; transition: opacity 0.35s ease, visibility 0.35s ease; }
    .main-header .main-menu .menu{ gap: 0; flex-direction: column; margin: 0; align-items: stretch; width: 100%; opacity: 0; filter: blur(10px); transition: opacity 0.5s ease 0.2s, filter 0.5s ease 0.2s; }
    .main-header .main-menu .menu li{ width: 100%; padding: 0; }
    .main-header .main-menu .menu li a{ padding: 22px 0; display: block; width: 100%; text-align: left; }
    .main-header .main-menu .menu li.current_page_item{ background: none; padding: 0; }
    .main-header .main-menu .menu li.current_page_item a{ background: linear-gradient(91deg, #FF5407 0.82%, #D49D56 159.7%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    .main-header .main-menu .menu li:nth-child(2){ border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
    .nav-indicator{ display: none;}

    /* Menu CTA */
    .main-header .button{ display: flex; opacity: 0; filter: blur(8px); transition: opacity 0.5s ease 0.4s, filter 0.5s ease 0.4s; height: 57px; }

    /* Menu Mobile Open */
    .main-header.menu-open .close-menu{ opacity: 0; visibility: hidden; }
    .main-header.menu-open .main-menu{ opacity: 1; visibility: visible; }
    .main-header.menu-open .main-menu .menu{ opacity: 1; filter: blur(0); }
    .main-header.menu-open .button{  opacity: 1; filter: blur(0); }

    /* Hamburger → X */
    .main-header.menu-open .hamburger span:nth-child(1){ transform: translateY(11px) rotate(45deg); }
    .main-header.menu-open .hamburger span:nth-child(2){ opacity: 0; transform: scaleX(0); }
    .main-header.menu-open .hamburger span:nth-child(3){ transform: translateY(-11px) rotate(-45deg); }

    /* Sub-menus */
    .main-header .main-menu .menu .menu-item-has-children > a:after{ display: none; }
    .main-header .main-menu .menu .sub-menu{ position: relative; opacity: 1; visibility: visible; max-height: 5000px; width: 100%; background: none; top: 0; }
    .main-header .main-menu .menu .sub-menu li a{ padding: 16px 20px 16px 40px; }
    .main-header .main-menu .menu .sub-menu li a:hover{ background: none; }

    .main-header .background{ display: none; }
}

@media screen and (max-width: 540px){
    
}