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

.fdd-header{

    position:sticky;

    top:0;

    z-index:9999;
}

/* =====================================================
   TOP HEADER
===================================================== */

.fdd-header-top{

    background:#ffffff;

    height:68px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-bottom:1px solid #ececec;

    transition:
    transform .35s ease,
    opacity .35s ease;

    will-change:transform;
}

.fdd-header-top.fdd-hidden{

    transform:translateY(-100%);

    opacity:0;
}

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

.fdd-header-logo{

    display:flex;

    align-items:center;

    justify-content:center;
}

.fdd-header-logo img{

    height:46px;

    width:auto;

    display:block;

    filter:
    drop-shadow(
        0 5px 12px rgba(0,0,0,.12)
    );
}

/* =====================================================
   BOTTOM HEADER
===================================================== */

.fdd-header-bottom{

    background:#0f172a;

    border-bottom:3px solid #c8a75b;

    box-shadow:
    0 8px 25px rgba(0,0,0,.08);
}

.fdd-header-container{

    max-width:1400px;

    margin:0 auto;

    padding:0 20px;
}

/* =====================================================
   NAVIGATION
===================================================== */

.fdd-header-nav{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:45px;

    min-height:54px;
}

.fdd-header-nav a{

    color:#ffffff;

    text-decoration:none;

    font-size:16px;

    font-weight:700;

    transition:.25s ease;

    white-space:nowrap;
}

.fdd-header-nav a:hover{

    color:#c8a75b;
}

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

@media(max-width:768px){

    .fdd-header-top{

        height:58px;
    }

    .fdd-header-logo img{

        height:38px;
    }

    .fdd-header-container{

        padding:0;
    }

    .fdd-header-nav{

        justify-content:flex-start;

        overflow-x:auto;

        overflow-y:hidden;

        gap:0;

        scrollbar-width:none;

        min-height:48px;
    }

    .fdd-header-nav::-webkit-scrollbar{

        display:none;
    }

    .fdd-header-nav a{

        flex:0 0 auto;

        padding:0 18px;

        font-size:14px;
    }
}