@charset "UTF-8";

/* ==========================================================
   Influence+
   header.css
========================================================== */

/* ===========================
   Header
=========================== */

.header{
    position:sticky;
    top:0;
    z-index:1000;
    width:100%;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border);
}

.header .container{
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
}

.header__inner{
    height:80px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* ===========================
   Logo
=========================== */

.header__logo{
    margin:0;
    font-size:1.8rem;
    font-weight:700;
    line-height:1;
}

.header__logo a{
    color:var(--text);
    display:flex;
    align-items:center;
}

.header__logo span{
    color:var(--primary);
}

/* ===========================
   Navigation
=========================== */

.header__nav{
    margin-left:auto;
}

.header__nav ul{
    display:flex;
    align-items:center;
    gap:32px;
    list-style:none;
}

.header__nav a{
    position:relative;
    display:block;
    font-size:.95rem;
    font-weight:600;
    color:var(--text);
}

.header__nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:2px;
    background:var(--primary);
    transition:.3s;
}

.header__nav a:hover{
    color:var(--primary);
}

.header__nav a:hover::after{
    width:100%;
}

/* ===========================
   Buttons
=========================== */

.header__buttons{
    display:flex;
    align-items:center;
    gap:12px;
    margin-left:35px;
}

/* ===========================
   Hamburger
=========================== */

.hamburger{
    display:none;
    position:relative;
    width:44px;
    height:44px;
    border:none;
    background:none;
    cursor:pointer;
    z-index:1300;
}

.hamburger span{
    position:absolute;
    left:8px;
    width:28px;
    height:3px;
    background:var(--text);
    border-radius:10px;
    transition:.3s;
}

.hamburger span:nth-child(1){

    top:12px;

}

.hamburger span:nth-child(2){
    top:20px;
}

.hamburger span:nth-child(3){
    top:28px;
}

/* hamburger active */

.hamburger.is-active span:nth-child(1){
    top:20px;
    transform:rotate(45deg);
}

.hamburger.is-active span:nth-child(2){
    opacity:0;
}

.hamburger.is-active span:nth-child(3){
    top:20px;
    transform:rotate(-45deg);
}

/* ===========================
   Overlay
=========================== */

.header__overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.45);
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:1100;
}

.menu-open .header__overlay{
    opacity:1;
    visibility:visible;
}

/* ===========================
   Responsive
=========================== */

@media(max-width:1024px){

    .header__nav{
        position:fixed;
        top:0;
        right:-100%;
        width:320px;
        max-width:90%;
        height:100vh;
        padding:100px 30px 40px;
        background:#fff;
        box-shadow:-10px 0 30px rgba(0,0,0,.1);
        transition:right .35s ease;
        z-index:1200;
    }

    .header__nav.is-active{
        right:0;
    }

    .header__nav ul{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:25px;
    }

    .header__nav li{
        width:100%;
    }

    .header__buttons{
        display:none;
    }

    .hamburger{
        display:block;
        position:relative;
        z-index:1500;
    }

}

@media(max-width:768px){
    .header__inner{
        height:72px;
    }
    .header__logo{
        font-size:1.5rem;
    }
}

@media(max-width:480px){

    .header__inner{
        height:66px;
    }

    .header__logo{
        font-size:1.35rem;
    }

}