@media (min-width: 576px) {
    .container {
        max-width: 540px !important;
    }
}

@media (min-width: 768px) {

    .container {
        max-width: 720px !important;
    }
}

@media (min-width: 992px) {

    .container {
        max-width: 960px !important;
    }
}

@media (min-width: 1200px) {

    .container {
        max-width: 1170px !important;
    }
}

@media screen and (min-width: 1400px) {

    .container {
        max-width: 1300px !important;
    }
}

@media screen and (min-width: 1600px) {
    .container {
        max-width: 1440px !important;
    }
}

@media screen and (max-width: 991px) {
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 9;
        opacity: 0;
        visibility: hidden;
        transition: 0.3s;
    }

    body.menu-open::before {
        opacity: 1;
        visibility: visible;
    }

    body.menu-open {
        overflow: hidden;
    }

    .header .navbar {
        flex-direction: row-reverse;
    }

    .header .navbar .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        background: #FFFFFF;
        width: 100%;
        transform: translate3d(-100%, 0, 0);
        transition: all 0.5s ease;
        z-index: 1;
    }

    .header .navbar .navbar-toggler {
        display: flex;
    }

    .navbar-collapse.showMenu {
        transform: translateX(0) !important;
        width: 90% !important;
    }

    .header .close-nav {
        display: block;
        position: fixed;
        top: 24px;
        right: 24px;
        background: transparent;
        border: 0;
    }

    .header .navbar-nav,
    .header .navbar .navbar-nav>div,
    .header .navbar-nav>div .header_menu_wrapper {
        height: 100%;
    }

    .header .navbar-nav>div .header_menu_wrapper {
        flex-direction: column;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        margin-top: 5rem;
        gap: 20px;
    }

    .header .navbar .navbar-collapse>div .header_menu_wrapper li {
        width: 100%;
    }

    .header .navbar .navbar-collapse>div .header_menu_wrapper li a {
        padding: 0 24px !important;
    }
}

@media screen and (max-width: 767px) {
    footer {
        padding: 60px 0;
    }
}