@import "responsive1024/nav.css";
@import "responsive1366/nav.css";
@import "mobile/nav.css";

.navigation_area {
    display: flex;
    align-items: center;
    width: 100%;
    position: fixed;
    padding: 30px 80px;
    justify-content: space-between;
    z-index: 99999;
    transition: all .3s ease-in-out;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 59px);
    left: 0;
}

.navigation_area_mobile {
    padding: 20px 15px;
    position: fixed;
    z-index: 999999;
    width: 100%;
    background-color: #0f1935;
    display: none;

    justify-content: space-between;
    flex-direction: row-reverse;
}

.navigation_area_mobile .hamburger svg {
    fill: white;
    height: 32px;
    margin-right: 15px;

}

.navigation_area_mobile .logo a img {
    fill: white;
    width: 130px;
    height: 32px;

}

.navigation_area.fixed {
    transition: all .3s ease-in-out;
    top: var(--wp-admin--admin-bar--height, 0px) !important;
    background: rgba(15, 25, 53, 0.97);
}

.navigation_area .nav {
    display: flex;
    z-index: 9999;

}

.navigation_area .logo {
    z-index: 9999;
    width: 180px;
    height: 40px;
}

.navigation_area .logo img {
    width: 100%;
}

.navigation_area .nav .menu {
    margin: 0 50px;
}

.navigation_area .nav .menu a {
    color: white;
    text-decoration: none;

}

.navigation_area .button {
    padding: 10px 25px;
    z-index: 9999;
    font-weight: 600;
    border-radius: 28px;
    background-color: #21c9d9;

}

.navigation_area .button a {
    text-decoration: none;
}

.navigation_area .nav .menu a:hover {
    color: #21c9d9 !important;
}

.popup_navigation_area.inactive {
    width: 0;
    transition: all .3s ease-in-out;
    top: 0;
    height: 100%;
    overflow-x: hidden;
    position: fixed;
}

.popup_navigation_area.active {
    width: 70%;
    height: 100%;
    top: 0;
    position: fixed;
    transition: all .3s ease-in-out;
    z-index: 99999999999999;
    background: #0f1935;
}

.popup_navigation_area .top {
    display: flex;
    padding: 20px;
    justify-content: space-between;
}

.popup_navigation_area .top .logo a img {
    width: 130px;
    height: 32px;
}

.popup_navigation_area .top .close {
}

.popup_navigation_area .top .close svg {
    fill: white;
    margin-top: 10px;
    width: 20px;
    height: 20px;
}

.popup_navigation_area .menus {
    margin: 0 20px;
}

.popup_navigation_area .menus .menu {
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.48);
}

.popup_navigation_area .menus .menu a {
    color: white;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

.popup_navigation_area .menus .menu a:hover {
    color: #21c9d9 !important;
}

.popup_navigation_area .products {
    margin: 0 20px;
}

.popup_navigation_area .products .products-title {
    margin: 40px 0 15px 0;
}

.popup_navigation_area .products .products-title p {
    color: white;
    font-size: 16px;
    font-weight: 600;

}


.popup_navigation_area .products .product {
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.48);
}

.popup_navigation_area .products .product a {
    color: white;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}