/*********************************
     IMPORT DEFAULT PACKAGE
**********************************/
@import "./../../packages/default.css"; 


/*********************************
       IMPORT ANIMATION
**********************************/
@import "./animation.css";


/*********************************
       DEFAULT SETTING
**********************************/
.logo, .logo img{
    max-width:160px;
}

.title, .sub_title{
    font-weight:400;
}

@media (max-width:820px){
    .logo, .logo img{
        max-width:130px;
    }
}


/*********************************
                NAV
**********************************/
nav{
    width:100%;
    padding:1rem 2rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:var(--lite);
}

nav .links{
    display:flex;
    align-items:center;
    gap:2.5rem;
}

nav .links a{
    padding:0.6rem 0rem;
    border-radius:0px;
    display:flex;
    align-items:center;
    gap:5px;
    white-space:nowrap;
    position:relative;
}

nav .links .active, nav .links a:hover{
    color:var(--white);
}

nav .links .active:after{
    content:"";
    position:absolute;
    width:50%;
    height:2px;
    background-color:var(--white);
    bottom:0;
    left:0;
}

nav .links .active .icon{
    width:24px;
}

nav .icon_buttons{
    gap:0.5rem;
}

@media (max-width:820px){
    nav{
        padding:1rem;
    }
    
    nav .links{
        position:fixed;
        background-color:var(--white);
        color:var(--white);
        width:100%;
        height:300px;
        border-radius:40px 40px 0 0;
        bottom:-270px;
        left:0;
        z-index:9;
        flex-wrap:wrap;
        flex-direction:column;
        gap:1rem;
        padding:1rem 2rem;
        padding-top:3rem;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }
    
    nav .links:before{
        content:"";
        position:absolute;
        width:100px;
        height:3px;
        border-radius:3px;
        background-color:var(--dark);
        top:15px;
        left:50%;
        transform:translate(-50%, 0);
    }
    
    nav .links .active:after{
        display:none;
    }
    
    nav .links .active, nav .links .active:hover{
        background-color:var(--dark);
        color:var(--white);
    }
    
    nav .links li{
        width:100%;
    }
    
    nav .links a{
        display:block !important;
        min-width:100% !important;
        max-width:100% !important;
        width:100% !important;
        background-color:rgba(1,1,1,0.2);
        color:var(--dark);
        padding:1rem;
        text-align:center;
    }
    
    nav .links a:hover{
        color:var(--dark);
    }
    
}