/* ==========================================
   CONTAINER
========================================== */
.top-header-container{

    width:min(1400px,95%);

    margin:auto;

}

.sticky-navbar .top-header-container{

    display:flex;
    align-items:center;

}
/* ==========================================
   OVERLAY
========================================== */

.mobile-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:998;

}

.mobile-overlay.show{

    opacity:1;
    visibility:visible;

}

/* ==========================================
   SIDEBAR
========================================== */

.mobile-sidebar{

    position:fixed;

    left:-330px;

    top:0;

    width:320px;

    height:100vh;

    background:white;

    z-index:999;

    transition:.35s;

    overflow-y:auto;

    box-shadow:5px 0 30px rgba(0,0,0,.2);

}

.mobile-sidebar.show{

    left:0;

}

.mobile-sidebar-header{

    height:75px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 20px;

    border-bottom:1px solid #ddd;

}

.mobile-sidebar-close{

    border:none;

    background:none;

    cursor:pointer;

    font-size:30px;

}

#mobileMenuContainer{

    padding:15px 0;

}



/* ==========================================
   TOP HEADER
========================================== */
.main-top-header{
    background:white;

    border-bottom:1px solid #ddd;

    padding-top: 5px;
    padding-bottom: 5px;
}

.main-top-header .top-header-container{

    height:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    width:min(1400px,95%);

    margin:auto;

}

.main-header-left{
    display:flex;

    align-items:center;

    gap:15px;
}

/* ==========================================
   HAMBURGER
========================================== */

.main-header-left .top-nav-hamburger{

    display:none;

    width:42px;

    height:42px;

    border:none;

    cursor:pointer;

    font-size:24px;

    background:transparent;

}


.main-header-right .social-links{

    display:flex;
    align-items:center;
    gap:1rem;

}

.main-header-right .social-links a{

    display:flex;
    align-items:center;
    justify-content:center;
    width:2rem;
    height:2rem;
    border-radius:50%;
    color:#12234E;
    text-decoration:none;
    transition:all .3s ease;

}

.main-header-right .social-links a:hover{

    background:#12234E;
    color:#fff;

    transform:translateY(-3px);

}

.main-header-right .social-links i{

    font-size:20px;

}

.main-header-right .x-icon{

    width:18px;
    height:18px;

    fill:currentColor;

}

/* ==========================================
   STICKY NAVBAR
========================================== */
.sticky-navbar{

    position:sticky;

    top:0;

    z-index:900;
    
    background:#12234E;
    font-size:0.9rem;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
    transition:
        background .4s ease,
        box-shadow .4s ease;

}

.sticky-navbar-menu{

    display: flex;
    align-items: stretch;
    justify-content: space-between;

    width: 100%;
    margin: 0;
    padding: 0;

    list-style: none;


}

.sticky-navbar-menu>li{

    position:relative;

}

.sticky-navbar-menu>li>a{

    display: flex;
    align-items: center;
    justify-content: center;

    height: 65px;

    padding: 0 18px;

    color: #fff;
    text-decoration: none;

    white-space: nowrap;

    transition: background .25s ease;
    

}

.sticky-navbar-menu>li>a:hover{

    background:#203a7c;

}

/* ==========================================
   MEGA MENU
========================================== */

.sticky-navbar-mega-menu{

    position: absolute;

    top: 100%;
    left: 0;

    width: min(800px, calc(100vw - 30px));
    max-width: 800px;

    padding: 25px;

    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(180px, 1fr)
    );

    gap: 25px;

    box-sizing: border-box;

    background: #fff;

    border-radius: 0 0 14px 14px;

    box-shadow: 0 20px 40px rgba(0,0,0,.15);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform: translateY(10px);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease;

    z-index: 950;
}

.has-sticky-navbar-mega::after{

    content:"";

    position:absolute;

    left:0;

    top:100%;

    width:100%;

    height:15px;

    background:transparent;

}

/* ==========================================
   OPEN
========================================== */

.has-sticky-navbar-mega:hover
> .sticky-navbar-mega-menu,

.has-sticky-navbar-mega:focus-within
> .sticky-navbar-mega-menu {

    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);
}

/* ==========================================
   RIGHT-SIDE MEGA MENU
========================================== */

.sticky-navbar-menu
> li:nth-child(6).has-sticky-navbar-mega
> .sticky-navbar-mega-menu {

    left: auto;
    right: -120px;
}


.sticky-mega-column {
    min-width: 0;
}

/* ==========================================
   MEGA CONTENT
========================================== */


.sticky-mega-column a{

    display: block;

    padding: 9px 0;

    color: #666;
    text-decoration: none;

    line-height: 1.4;

    transition:
        color .2s ease,
        padding-left .2s ease;

}

.sticky-mega-column a:hover{

    color:#12234E;

    padding-left:8px;

}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 1150px) {

    .sticky-navbar-menu > li > a {
        padding-left: 11px;
        padding-right: 11px;

        font-size: .85rem;
    }

    .sticky-navbar-mega-menu {
        width: min(700px, calc(100vw - 30px));

        grid-template-columns:
            repeat(auto-fit, minmax(170px, 1fr));

        gap: 20px;
    }
}


/* ==========================================
   MOBILE MENU
========================================== */

.mobile-sidebar .sticky-navbar-menu{
    display:block;
}

.mobile-sidebar .sticky-navbar-menu>li{

    border-bottom:1px solid #eee;

}

.mobile-sidebar .sticky-navbar-menu>li>a{

    color:#333;

    height:auto;

    padding:18px 20px;

    background:white;

    justify-content: flex-start;
    
    text-align: left;

}

.mobile-sidebar .sticky-navbar-menu>li>a:hover{

    background:#f7f7f7;

}

.mobile-sidebar .sticky-navbar-mega-menu{

    position:static;

    width:100%;

    display:none;

    opacity:1;

    visibility:visible;

    transform:none;

    box-shadow:none;

    border-radius:0;

    padding:15px 20px;

    grid-template-columns:1fr;

    background:#fafafa;

}

.mobile-sidebar .has-sticky-navbar-mega.mobile-sidebar-open>.sticky-navbar-mega-menu{

    display:grid;

}

.mobile-sidebar .sticky-mega-column{

    margin-bottom:20px;

}

.mobile-sidebar .sticky-mega-column h3{

    font-size:16px;

    margin-bottom:10px;

}

.mobile-sidebar .sticky-mega-column a{

    padding:8px 0 8px 15px;

}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:992px){
    .main-header-left .top-nav-hamburger{

        display:block;

    }

    .sticky-navbar{

        display:none;

    }

    .main-top-header{
        position:sticky;

        top:0;

        z-index:997;
    }
}


@media(max-width:768px){


    .main-header-left .logo-lettering{

        display: none;

    }

    .mobile-sidebar{

        width:280px;

    }

}