/* ==================================================
   HEADER WRAPPER
================================================== */

.site-header{
    position: sticky;
    top: 0;
    z-index: 9999;

    width: 100%;

    background: rgba(0,0,0,var(--header-opacity,.92));

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border-bottom: 1px solid rgba(212,175,55,.15);

    box-shadow: 0 10px 35px rgba(0,0,0,.45);

    transition: background .4s ease,
                box-shadow .4s ease;
}



/* ==================================================
   SHRINK MODE
================================================== */

.site-header.shrink{
    background: rgba(0,0,0,.96);

    box-shadow:
    0 8px 26px rgba(0,0,0,.55);
}

/* ==================================================
   HEADER INNER
================================================== */

.site-header-inner{
    width: min(94%,1600px);

    margin: auto;

    display: grid;

    grid-template-columns:
    minmax(0,1fr)
    auto
    minmax(0,1fr);

    align-items: center;

    gap: 24px;

    min-height:
    var(--header-height,140px);

    padding: 18px 20px;

    transition:
    min-height .4s ease,
    padding .4s ease,
    gap .4s ease;
}

.site-header.shrink .site-header-inner{
    min-height:
    var(--header-shrink-height,70px);

    padding: 8px 18px;

    gap: 14px;
}

/* ==================================================
   HEADER COLUMNS
================================================== */

.header-left,
.header-center,
.header-right{
    display: flex;
    align-items: center;
    min-width: 0;
}

.header-left{
    justify-content: center;
}

.header-right{
    justify-content: center;
}

/* ==================================================
   PROMO BOX
================================================== */

.header-promo{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:14px;

    width:100%;
    min-width:0;

    min-height:
    var(--promo-box-height,72px);

    padding:16px 20px;

    overflow:hidden;

    text-decoration:none;
    color:#d4af37;

    border-radius:22px;

    border:1px solid rgba(212,175,55,.20);

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.06),
        rgba(255,255,255,.03)
    );

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    box-shadow:
    0 6px 18px rgba(0,0,0,.28);

    transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    padding .35s ease,
    min-height .35s ease;

    cursor:pointer;
}

.header-promo:hover{
    transform:translateY(-2px);

    border-color:
    rgba(64,224,208,.30);

    box-shadow:
    0 10px 28px rgba(0,0,0,.35);
}

.site-header.shrink .header-promo{
    padding:10px 14px;
    min-height:
    var(--promo-box-height-shrink,56px);
    border-radius:16px;
}

/* ==================================================
   PROMO IMAGE
================================================== */

.promo-image{
    width:
    var(--promo-image-size,100px);

    height:
    var(--promo-image-size,100px);

    min-width:58px;

    object-fit:cover;

    border-radius:50%;

    border:
    2px solid rgba(212,175,55,.25);

    flex-shrink:0;

    transition:
    width .35s ease,
    height .35s ease,
    min-width .35s ease;
}

.site-header.shrink .promo-image{
    width:
    var(--promo-image-size-shrink,48px);

    height:
    var(--promo-image-size-shrink,48px);
    min-width:48px;
}

/* ==================================================
   PROMO CONTENT
================================================== */

.promo-content{
    display:flex;
    flex-direction:column;

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

    text-align:center;

    gap:4px;

    min-width:0;

    flex:1;
}

.promo-content h4{
    margin:0;

    font-size:15px;
    font-weight:700;

    line-height:1.25;

    color:#d4af37;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

    width:100%;
}

.promo-content p{
    margin:0;

    font-size:13px;

    line-height:1.45;

    color:#ffffff;

    opacity:.9;

    overflow:hidden;
    text-overflow:ellipsis;

    width:100%;
}
/* ==================================================
   LOGO
================================================== */

.logo-wrapper{
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;
}

.custom-logo{
    display: block;

    width: auto !important;

    height: auto !important;

    object-fit: contain;

    max-width:
    var(--logo-width,320px)
    !important;

    max-height: 120px !important;

    transition:
    max-width .4s ease,
    max-height .4s ease;
}

.site-header.shrink .custom-logo{
    max-width:
    var(--logo-shrink-width,220px)
    !important;

    max-height: 80px !important;
}


/* ==================================================
   LOGO
================================================== */

.custom-logo{

    width:auto !important;

    height:auto !important;

    max-width:320px !important;

    max-height:140px !important;

    object-fit:contain;

}

.logo-wrapper img{

    width:auto !important;

    height:auto !important;

    max-width:320px !important;

    max-height:140px !important;

    object-fit:contain;

}

/* ==================================================
   SHRINK LOGO
================================================== */

.site-header.shrink .custom-logo,
.site-header.shrink .logo-wrapper img{

    max-width:220px !important;

    max-height:90px !important;

}

/* ==================================================
   SHRINK PROMO CONTENT ONLY
================================================== */

.site-header.shrink .header-promo{

    min-height:50px !important;

    padding:4px 8px !important;
}

.site-header.shrink .promo-image{

    transform:scale(.85);

    transform-origin:center;

    transition:all .3s ease;
}

.site-header.shrink .promo-content h4{

    font-size:.95rem !important;

    line-height:1.1 !important;

    margin-bottom:2px !important;
}

.site-header.shrink .promo-content p{

    font-size:.80rem !important;

    line-height:1.1 !important;

    margin:0 !important;
}

.site-header.shrink .promo-content{

    gap:2px !important;
}

/* ==================================================
   POSITION OF HEADER
================================================== */

@-moz-document url-prefix() {

    .site-header{

        left:0 !important;
        right:0 !important;
        width:100% !important;
        margin:0 auto !important;
    }

}

.site-header{

    position:fixed !important;

    top:15px;

    left:50%;

    transform:translateX(-50%);

    width:calc(100% - 40px);

    max-width:1400px;

    z-index:99999;

    border-radius:16px;

    background:#050505;
}

/* ==================================================
   HEADER OFFSET
================================================== */

/* Chromium / Opera */

.premium-navbar{
    margin-top:0 !important;
    padding-top:33px !important;
}

/* Firefox */

@-moz-document url-prefix(){

    .premium-navbar{
        padding-top:0 !important;
    }

}

@-moz-document url-prefix(){

    @media (max-width:768px){

        .premium-navbar{

            padding-top:12px !important;

        }

    }

}

/* Desktop */

@media (min-width:769px){

    body{

        padding-top:110px;
    }

    .premium-navbar{

        margin-top:5px !important;
    }
}

/* Mobile */

@media (max-width:768px){

    body{

        padding-top:125px;
    }

    .premium-navbar{

        margin-top:5px !important;
    }
}

@media(max-width:700px){

    body{

        padding-top:120px;
    }
}

/* ==================================================
   NAVBAR
================================================== */

.premium-navbar{
    width: 100%;

    padding: 18px 0;

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

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border-bottom:
    1px solid rgba(212,175,55,.10);
}

/* ==================================================
   NAV MENU
================================================== */

.premium-nav-menu{
    width: min(92%,1400px);

    margin: auto;

    padding: 0;

    list-style: none;

    display: grid;

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

    gap: 18px;
}

.premium-nav-menu li{
    display: flex;
}

.premium-nav-menu li a{
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 18px 24px;

    text-decoration: none;

    border-radius: 18px;

    color: #d4af37 !important;

    font-weight: 700;

    letter-spacing: .5px;

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.05),
        rgba(255,255,255,.02)
    );

    border:
    1px solid rgba(212,175,55,.20);

    box-shadow:
    0 6px 18px rgba(0,0,0,.35);

    transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    color .35s ease;
}

.premium-nav-menu li a:hover,
.premium-nav-menu li.current-menu-item a{
    color: #40E0D0 !important;

    transform: translateY(-3px);

    border-color:
    rgba(64,224,208,.35);

    box-shadow:
    0 0 18px rgba(64,224,208,.16);
}

/* ==================================================
   FIXES FOR FIREFOX / MOBILE
================================================== */

.premium-nav-menu li::before,
.premium-nav-menu li a::before,
.premium-nav-menu li a::after{
    display: none !important;
    content: none !important;
}

button,
input,
textarea,
select,
a{
    touch-action: manipulation;
}

/* ==================================================
   MOTION BAR
================================================== */

.motion-bar{
    width: 100%;

    height: 3px;

    background:
    linear-gradient(
        90deg,
        transparent,
        #40E0D0,
        #d4af37,
        #40E0D0,
        transparent
    );

    background-size: 200% 100%;

    animation:
    motionBar 8s linear infinite;
}

@keyframes motionBar{
    from{
        background-position: 0 0;
    }

    to{
        background-position: 200% 0;
    }
}

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

@media(max-width:1200px){

    .site-header-inner{
        grid-template-columns:
        minmax(220px,1fr)
        auto
        minmax(220px,1fr);

        gap: 14px;
    }

    .header-promo{
        padding: 12px 14px;

        min-height: 62px;

        gap: 10px;
    }

    .promo-image{
        width: 48px;

        height: 48px;

        min-width: 48px;
    }

    .promo-content h4{
        font-size: 13px;
    }

    .promo-content p{
        font-size: 12px;
    }

    .custom-logo{
        max-width: 240px !important;

        max-height: 90px !important;
    }
}


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

@media(max-width:700px){

    .site-header-inner{

        grid-template-columns:1fr auto 1fr;

        gap:8px;

        min-height:90px;

        padding:10px 8px;

        align-items:center;
    }

    .header-promo{

        width:64px;

        height:64px;

        min-height:64px;

        padding:0 !important;

        gap:0;

        border-radius:50% !important;

        justify-content:center;

        align-items:center;

        margin:auto;

        overflow:hidden;
    }

    .promo-image{

        width:64px;

        height:64px;

        min-width:64px;

        border:none !important;

        margin:0;

        object-fit:cover;
    }

    .promo-content{

        display:none;
    }

    .site-header.shrink .header-promo{

        width:48px !important;

        height:48px !important;

        min-height:48px !important;

        padding:0 !important;

        border-radius:50% !important;
    }

    .site-header.shrink .promo-image{

        width:48px !important;

        height:48px !important;

        min-width:48px !important;

        border:none !important;
    }

    .custom-logo{

        max-width:160px !important;

        max-height:62px !important;
    }

    .site-header.shrink .custom-logo{

        max-width:120px !important;

        max-height:46px !important;
    }

    .premium-navbar{

        padding:8px 0;
    }

    .premium-nav-menu{

        grid-template-columns:1fr;

        gap:10px;

        width:94%;
    }

    .premium-nav-menu li a{

        padding:12px 14px;

        font-size:14px;

        border-radius:14px;
    }
}

/* ==================================================
   FIREFOX SAFE MODE
================================================== */

@-moz-document url-prefix(){

    .site-header,
    .header-promo,
    .premium-navbar{

        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
    }

    .site-header{

        transform:none !important;
    }

    .site-header-inner{

        transition:
        min-height .25s ease,
        padding .25s ease !important;
    }

    @media(max-width:700px){

        .site-header-inner{

            min-height:auto !important;
        }

        .site-header.shrink .site-header-inner{

            min-height:auto !important;
        }
    }
}