header{
    width: 100%;
    height: fit-content;
    position: sticky;
    top: 0px;
    z-index: 1000;
    backdrop-filter: blur(2px);
    padding: 15px 0;
}

.headerwrapper {
    justify-content: space-between;
    width: 100%;
    height: fit-content;
    padding: 10px 30px;
    border: var(--border-thin);
    border-radius: 200px;
    gap: 20px;
    background-color: var(--primary-bg);
    box-shadow: 0px 5px 20px -5px #0003;
}

.logobox a img{
    width: 50px;
    height: 50px;
    object-fit: contain;
}

/* Navigation Bar */
#menucontainer {
    width: 100%;
}
#menuwrapper{
    width: 100%;
    gap: 30px;
}
.menubox {
    width: 100%;
    flex-wrap: wrap;
    gap: 15px 30px;
}

.menubox li a {
    font-size: var(--font-md);
    font-weight: 500;
    color: var(--text-primary);
    position: relative;
}

.menubox li a::before{
    content: "";
    width: 0%;
    height: 1px;
    position: absolute;
    bottom: -3px;
    background-color: var(--border-muted);
    transition: all 0.3s;
}
.menubox li a:hover::before{
    width: 100%;
}

.ctawrapper {
    gap: 10px;
}
.ctawrapper li a {
    padding: 10px;
    border-radius: 5px;
    border: solid 1px transparent;
    transition: all 0.2s ease-in-out;
    &:hover {
        border: var(--border-black);
        border-style: dashed;
    }
}
.ctawrapper li:first-child a i{
    font-size: var(--font-lg);
    color: var(--ui-secondary);
    font-weight: 900;  
}
.ctawrapper li:last-child a i{
    font-size: var(--font-xl);
    color: var(--accent-green);
}


#menuicon {
    border: solid 1px var(--border);
    display: none;
    padding: 10px 15px;
    border-radius: 10px;
}
#menuicon i{
    font-size: var(--font-xl);
    color: var(--text-muted);
}

@media screen and (max-width: 650px) {
    #menuicon {
        display: flex;
    }
    #menucontainer {
        flex-direction: column;
        position: absolute;
        left: -110vw;
        top: 100px;
        opacity: 0;
        width: 100%;
        height: calc(100vh - 100px);
        z-index: 1010;
        padding: 20px;
        backdrop-filter: blur(2px) !important;
        transition: all 0.5s ease-in-out;
    }
    #menucontainer.openmenu {
        left: 0;
        opacity: 1;
    }
    
    #menuwrapper {
        width: 100%;
        height: 100%;
        flex-direction: column;
        justify-content: flex-start;
        flex-wrap: nowrap;
        background-color: var(--primary-bg);
        box-shadow: 0px 5px 20px -5px #0003;
        border-radius: 10px;
        gap: 0;
        padding: 50px 30px;
        overflow: scroll;
        overflow-x: hidden;
        position: relative;
    }
    #menuwrapper::before{
        content: "";
        position: absolute;
        top: 0;
        height: 3px;
        display: block;
        width: 55px;
        margin: 15px auto;
        background-color: var(--text-muted);
        border-radius: var(--radius-full);
    }
    .menubox{
        gap: 0;
    }
    .menubox li {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 15px;
        border-bottom: var(--border-thin);
        border-color: var(--secondary-bg);
        &:last-child {
            border-bottom: none;
        }
    }
    
    .menubox li a {
        padding: 15px 0px;
        font-size: var(--font-lg);
        width: 100%;
        font-weight: 500;
    }
    
    .menubox li::after {
        content: "⟫";
        font-size: var(--font-xl);
    }

    .ctawrapper {
    gap: 30px;
}
    .ctawrapper li{
        margin-top: 40px;
    }
    .ctawrapper li a{
        padding: 15px 35px;
        font-size: var(--font-xl);
        transition: all 0.2s ease-in-out;
        border-radius: 10px;
        box-shadow: 0px 5px 20px -5px #0003;
        &:hover {
            background-color: var(--secondary-bg);
        }
    }
}

/* End of Responsive Style */