.site-header{
    position:sticky;
    top:0;
    z-index:999;
    
    display:flex;
    justify-content:space-between;
    align-items:center;
    
    padding:18px 40px;

    background:
    rgba(13,13,13,.60);

    backdrop-filter:
    blur(18px);

    border-bottom:
    1px solid
    rgba(255,255,255,.04);

    transition:
    var(--transition);
}

.logo{
    font-size:34px;
    font-weight:800;
    color:#fff;
}

.header-center{
    flex:1;
    display:flex;
    justify-content:center;
}

.header-search-box{
    width:100%;
    max-width:550px;

    background:#131d33;

    border:1px solid rgba(255,255,255,.08);

    border-radius:60px;

    padding:14px 22px;

    display:flex;
    align-items:center;
}

.search-icon{
    width:22px;
    color:#94a3b8;
    margin-right:12px;
}

.header-search-box input{
    width:100%;
    border:none;
    outline:none;
    background:none;
    color:#fff;
    font-size:15px;
}

.header-search-box input::placeholder{
    color:#94a3b8;
}

.header-right{
    display:flex;
    gap:30px;
}

.header-right a{

    position:relative;

    color:
    var(--text-light);

    transition:
    var(--transition);

    font-weight:500;
}

.header-right a:hover{
    color:#fff;
}

.header-right a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0%;
    height:2px;

    background:
    var(--primary-orange);

    transition:.3s;
}

.header-right a:hover::after{
    width:100%;
}