header {
    height: 80px;
    width: 100vw;
}
header .header-inner{
    position:fixed;
    z-index:99999;
    width:100vw;
    height:80px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background-image:linear-gradient(169deg, #102917, #150b0b);
}
header .logo{
    position: relative;
    height: 100%;
    width: 370px;
    background-color: white;
    border-right: 8px solid lightseagreen;
}
header .logo a{
    position:absolute;
    top:50%;
    transform: translateY(-50%);
}
header .logo img{
    width:250px;
    height:auto;
    padding:0 2rem;
    justify-content:center;
    display:block
}
header .global-nav{
    display:inline-flex;
    width:max-content;
    padding-right:5rem;
    gap: 2rem;
}
header .global-nav ul{
    display:contents;
    opacity:0;
    transition:opacity 0.3s;
    transition-delay:0.5s;
}
header .global-nav ul li{
    list-style-type:none;
    text-align:center;
    line-height:1.5;
    white-space: nowrap;
}
header .global-nav ul a{
    display:inline-block;
    width:100%;
    height:100%;
    color:white;
    font-weight:bold;
    font-size: 16px;
}
@media screen and (max-width: 767px){
    header{
        position:fixed;
        z-index:99999;
        width:100vw;
        height:18vw;
        display:flex;
        justify-content:space-between;
        align-items:center;
        background-image:linear-gradient(169deg, #104917, #150b0b);
    }
    header .header-inner{
        position:fixed;
        z-index:99999;
        width:100vw;
        height:18vw;
        border-bottom: 2px solid #102917;
        display:flex;
        justify-content:space-between;
        align-items:center;
        background-image:linear-gradient(169deg, #102917, #150b0b);
    }
    header .menu-icon{
        z-index:1001;
        margin:auto 2.5vw;
    }
    header .menu-icon>span{
        display:block;
        width:7.5vw;
        height:1.5vw;
        background-color:white;
        transition:transform 0.5s, opacity 0.5s
    }
    header .menu-icon>span:not(:last-child){
        margin-bottom:1vw
    }
    header.open-menu .menu-icon>span:nth-child(1){
        transform:translateY(2.5rem) rotate(225deg)
    }
    header.open-menu .menu-icon>span:nth-child(2){
        transform:translateX(-100%);
        opacity:0;
    }
    header.open-menu .menu-icon>span:nth-child(3){
        transform:translateY(-2.5rem) rotate(-225deg)
    }
    header.open-menu .global-nav{
        right:0;
        mix-blend-mode: overlay;
    }
    header.open-menu .global-nav ul{
        opacity:1
    }
    header .global-nav{
        position:fixed;
        top:0;
        right:-100vw;
        bottom:0;
        width:100vw;
        z-index:1000;
        background-color:#004138;
        padding:30vw 0;
        transition:right 0.5s;
    }
    header .global-nav ul{
        opacity:0;
        transition: opacity 0.3s;
        transition-delay:0.5s
    }
    header .global-nav ul li{
        font-size:9vw;
        padding:1vw 0;
    }
    header .global-nav ul a{
        display:inline-block;
        width:100%;
        height:100%;
        color:white
    }
    header .logo{
        position:relative;
        height:100%;
        width:50vw;
        background-color:white;
        border-radius:0 0 100vw 0
    }
    header .logo a{
        position:absolute;
        top:50%;
        transform:translateY(-50%)
    }
    header .logo img{
        width:35vw;
        height:auto;
        padding:0 4vw;
        justify-content:center;
        display:block
    }
    header .global-nav{
        display:inline-grid;
    }
    header .global-nav ul{
        display:contents;
        opacity:0;
        transition:opacity 0.3s;
        transition-delay:0.5s
    }
    header .global-nav ul li{
        list-style-type:none;
        text-align:center;
        padding:1vw 2vw;
        font-size:18px;
        line-height:1.5; 
        white-space: nowrap;
    }
    header .global-nav ul a{
        display:inline-block;
        width:100%;
        height:100%;
        color:white;
        font-size:18px;
        font-weight:bold
    }
    header .global-nav ul li a span {
        font-size: 20px;
    }
}