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

.hamburger,
.nav-contact{
    display:none;
}

@media screen and (max-width:1024px){

    .global-nav{
        display:block;
        position:fixed;
        top:0;
        right:0;

        margin:0;
        width:240px;
        height:100dvh;
        padding:110px 32px 40px;
        box-sizing:border-box;

        background:#fff;
        box-shadow:-8px 0 24px rgba(0,0,0,.12);

        transform:translateX(100%);
        transition:transform .35s;
        z-index:999;
    }

    .global-nav.is-open{
        transform:translateX(0);
    }

    .global-nav ul{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:28px;

        margin:0;
        padding:0;
        list-style:none;
    }

    .global-nav a{
        font-size:1rem;
        font-weight:700;
        color:#222;
        text-decoration:none;
    }

    .nav-contact{
        display:block;
        margin-top:10px;
    }

    .nav-contact a{
        display:inline-flex;
        align-items:center;
        justify-content:center;

        min-width:160px;
        height:44px;
        padding:0 24px;

        background:var(--main-color);
        color:#fff;
        border-radius:999px;
        font-weight:700;
    }

    .nav-contact a:hover{
        color:#fff;
        opacity:.85;
    }

    .hamburger{
        position:relative;
        z-index:1001;

        display:flex;
        flex-direction:column;
        justify-content:center;
        gap:6px;

        width:46px;
        height:46px;
        margin-left:auto;
        margin-right:8px;

        background:#fff;
        border:none;
        border-radius:50%;
        box-shadow:0 6px 16px rgba(0,0,0,.08);
        cursor:pointer;
    }

    .hamburger span{
        display:block;
        width:22px;
        height:2px;
        margin:0 auto;
        background:var(--main-color);
        border-radius:999px;
        transition:.3s;
    }

    .hamburger.is-open span:nth-child(1){
        transform:translateY(8px) rotate(45deg);
    }

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

    .hamburger.is-open span:nth-child(3){
        transform:translateY(-8px) rotate(-45deg);
    }
}