.navigation {
    font-family: "SukhumvitSet";
}

.navigation .navbar-inner {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 18px 40px;
}

/*Navigation Logo*/
.navigation .nav-logo-content {
    width: 200px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.navigation .nav-logo {
    display: flex;
    align-items: center;
}

.navigation .nav-logo img {
    width: 52px;
    height: 52px;
}

.navigation .nav-logo:hover {
    text-decoration: none;
}

.navigation .nav-logo h4 {
    color: #000000;
    font-size: 20px;
    font-weight: 700;
    padding-left: 10px;
}

/*Navigation Menu*/
.navigation .nav {
    display: flex;
    flex: 1;
    justify-content: center;
}

.navigation .nav li.active a {
    border-bottom: 3px solid #00B0FF;
}

.navigation .nav li a {
    color: #000000;
}

.navigation .nav li a:hover {
    background-color: transparent;
}


/*Navigation Contact*/
.navigation .nav-contact-content {
    width: 400px;
    display: flex;
    justify-content: flex-end;
}

.navigation .nav-contact-content .btn-face {
    display: flex;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
    border-radius: 30px;
    padding: 8px 20px;
    align-items: center;
    color: #000;
    cursor: pointer;
    margin-right: 5px;
}

.navigation .nav-contact-content .btn-face i {
    width: 100%;
}

.navigation .nav-contact-content .btn-face:hover {
    text-decoration: none;
}

.navigation .nav-contact-content .btn-line {
    display: flex;
    background-color: #FFF;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
    border-radius: 30px;
    padding: 8px 20px;
    align-items: center;
    color: #000;
    cursor: pointer;
}

.navigation .nav-contact-content .btn-line i {
    width: 100%;
}

.navigation .nav-contact-content .btn-line:hover {
    text-decoration: none;
}

.navigation .nav-contact-content .btn-contact {
    display: flex;
    background-color: #FFF;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
    border-radius: 30px;
    padding: 8px 20px;
    align-items: center;
    color: #000;
    cursor: pointer;
    margin-right: 5px;
}

.navigation .nav-contact-content .btn-contact i {
    margin-right: 5px;
}

.navigation .nav-contact-content .btn-contact:hover {
    text-decoration: none;
}

.navigation .background-navigation{
    opacity: 0;
    transition: 0.8s;
    position: absolute;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(15px);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.navigation.show-background .background-navigation {
    opacity: 1;
}

.navigation .btn-contact-list{
    display: none;
}

.navigation .close-nav{
    display: none;
}

.navigation .show-nav-ham{
    display: none;
}

@media (max-width: 992px) {
    .navigation .nav {
        position: fixed;
        z-index: 12;
        top: 0;
        bottom: 0;
        width: 80%;
        background-color: #FFF;
        flex-direction: column;
        justify-content: flex-start;
        left: -100vw;
        transition: 0.8s;
    }

    .navigation .backdrop {
        content: "";
        position: fixed;
        top: 0;
        width: 100vw;
        right: 0;
        height: 100vh;
        z-index: 11;
        background: rgba(0, 0, 0, 0.51);
        opacity: 0;
        left: -100vw;
        transition: opacity 0.8s ease-out, left 0.8s ease-out 0.8s;
    }

    .navigation .nav.show-nav ~ .backdrop {
        transition: opacity 0.5s ease-in 0.4s, left 0.1s ease-in;
        opacity: 1;
        left: 0;
    }

    .navigation .nav.show-nav {
        left: 0;
    }

    .navigation .nav li {
        padding: 0 30px;
    }

    .navigation .nav li a {
        margin: 10px 0;
        font-size: 16px;
        line-height: 26px;
    }

    .navigation .nav li.active a {
        border-left: 3px solid #00B0FF;
        border-bottom: none;
    }

    .navigation .btn-contact-list {
        display: initial;
        background: rgba(196, 196, 196, 0.1);
    }

    .navigation .close-nav{
        display: initial;
    }

    .navigation .show-nav-ham{
        display: initial;
    }

    .navigation li.close-nav {
        padding: 20px 15px 20px 20px;
        text-align: right;
        font-size: 25px;
    }

    .navigation li.close-nav i {
        padding: 10px;
    }

    .navigation .nav-contact-content {
        display: none;
    }

    .navigation .nav-logo h4 {
        font-size: 16px;
    }

    .navigation .nav-logo img {
        width: 40px;
        height: 40px;
    }

    .navigation .nav-logo-content {
        flex: 1
    }

    .navigation .navbar-inner {
        padding: 10px 20px;
    }

    .show-nav-ham{
        font-size: 20px;
    }
}