.navbar_side_container {
    position: absolute;
    left: 0;
    top: 0;
    width: 30%;
    height: 100vh;
    background-color: var(--color3);
    box-shadow: var(--boxshadow);
    z-index: 101;
    overflow-x: hidden;
    overflow-y: scroll;
    visibility: hidden;
    opacity: 0;
    transition: visiblity 0.5s ease-in-out;
}

.navbar_side_container .navbar_side_logo_container {
     position: relative;
     width: 100%;
     display: flex;
     height: 7vw;
}

.navbar_side_container .navbar_side_logo_container .navbar_side_logo {
    display: block;
    position: relative ;
    width: 7vw;
    height: 7vw;
}

.navbar_side_container .navbar_side_logo_container .navbar_side_logo img {
    width: 100%;
    height: 100%;
}


.navbar_side_container .navbar_side_logo_container .navbar_side_close {
    position: relative; 
    left: 65%;
    margin: auto 0;
    height: 2vw;
    width: 2vw;
    cursor: pointer;
}

.navbar_side_container .navbar_side_items_container {
    position: relative;
    width: 100%;
    min-height: 40vh;
    height: fit-content;
}

.navbar_side_container .navbar_side_items_container a {
    position: relative;
    width: 100%;
    height: fit-content;
    padding: 0.5vw 0.5vw 0.5vw 2vw;
    font-size: 1.8vw;
    color: var(--color17);
    font-family: var(--font9);
    display: block;
    text-decoration: none;
    border: solid;
    border-width: 0.08vw 0 0.08vw 0;
    border-color: var(--shadow3);
    margin: auto;
    transition: all 0.3s ease-in;
}

.navbar_side_container .navbar_side_contact_container {
    position: relative;
    width: 100%;
    min-height: 20vh;
    height: fit-content;
    display: block;
    border: solid;
    border-width: 0 0 0.1vw 0;
    border-color: var(--shadow3);
}

.navbar_side_container h3 {
    position: relative;
    left: 4%;
    font-family: var(--font9);
    color: var(--color17);
    font-size: 1.8vw;
}

.navbar_side_container .navbar_side_contact_container a {
    position: relative;
    left: 5%;
    width: 90%;
    height: 3vw;
    padding: 0;
    font-size: 1.5vw;
    color: var(--color17);
    font-family: var(--font9);
    height: fit-content;
    display: block;
    text-decoration: none;
    transition: all 0.3s ease-in;
}

.navbar_side_container a:hover{
    color: var(--color4)
}

@media screen and (max-width: 62.438em) {
    .navbar_side_container {
        width: 80%;
    }
    
    .navbar_side_container .navbar_side_logo_container {
         height: 20vw;
    }
    
    .navbar_side_container .navbar_side_logo_container .navbar_side_logo {
        width: 20vw;
        height: 20vw;
    }  
    
    .navbar_side_container .navbar_side_logo_container .navbar_side_close {
        left: 62%;
        height: 7vw;
        width: 7vw;
    }
        
    .navbar_side_container .navbar_side_items_container a {
        font-size: 5vw;
    }
    
    .navbar_side_container h3 {
        font-size: 9.5vw;
        margin-bottom: 2vw
    }
    
    .navbar_side_container .navbar_side_contact_container a {
        font-size: 5vw;
    }
}