@media (max-width: 1400px) {
    .container {
        padding: 0 3rem;
    }

    nav {
        padding: 2.5rem 5rem;
    }

    #contactUs .contact-us-detail .contact-us-form {
        padding: 0 5rem 0 2.5rem
    }
}

@media (max-width: 992px) {
    * {
        font-size: 15px;
    }

    .main-logo-in-splide {
        position: absolute;
        top: 2.5rem;
        left: 2rem;
    }

    nav {
        padding: 2.5rem 2rem;
    }

    nav .main-navbar .navbar-menu {
        width: 70%;
    }

    nav .main-navbar .navbar-menu ul {
        position: absolute;
        top: 0px;
        right: -65vw;

        display: block;
        background: rgb(var(--cc-primary));
        width: 65vw;
        height: 100vh;

        padding: 10rem 0 0;
        transition: .5s;
    }

    nav .main-navbar .navbar-menu ul.open {
        right: 0;
        transition: .5s;
    }

    .dropdown-menu.show {
        position: relative;
        background: none;
        box-shadow: none;
    }

    .dropdown-item:hover, .dropdown-item:focus {
        background: none;
    }

    .dropdown-toggle::after {
        background-image: url(icons/icon-chevron_right.svg);
        vertical-align: -0.1em;
    }

    /* nav .main-navbar .navbar-menu ul.open::after {
        position: absolute;
        top: 7rem;
        right: 2rem;

        content: url(icons/icon-times.svg);
        width: 2rem;
        height: 2rem;
    } */

    nav .main-navbar .navbar-menu ul li.nav-link {
        padding: 0 2rem;
    }

    nav .main-navbar .navbar-menu ul li.nav-link:not(:last-child) {
        margin-bottom: 2rem;
    }

    nav .main-navbar .navbar-menu ul li.nav-link a {
        color: rgb(var(--cc-light));
        font-family: var(--ff-primary);
    }

    nav .main-navbar .navbar-menu ul li.nav-close-menu {
        display: block;
        text-align: right;
    }

    nav .main-navbar .navbar-menu ul li.nav-close-menu a {
        content: url(icons/icon-times.svg);
    }

    nav .main-navbar .navbar-menu .navbar-menu-mobile {
        display: block;
        background: rgb(var(--cc-primary));

        content: url(icons/icon-menu_bar.svg);
        width: 25px;
        height: 25px;

        margin-left: auto;
        padding: 5px;
    }

    .container {
        padding: 0 2rem !important;
    }

    .splide__arrow--prev {
        left: 0rem;
    }

    .splide__arrow--next {
        right: 0rem;
    }

    .title {
        text-align: center;
    }

    .slide-page:not(#slideLandingPage) {
        padding: 0 2rem;
    }

    section:not(#splideMainHero) {
        min-height: unset;
    }

    .slide-page#slideLandingPage {
        align-items: flex-end;
        padding: 0 2rem 5rem;
    }

    #slideLandingPage .inner-landing-page .inner-content-left .title-landing-page {
        max-width: 50vw;
    }

    #slideLandingPage .inner-landing-page .inner-content-right .landing-page-image {
        max-width: 75vw;
        margin: 0 auto 5rem;
    }

    .slide-page .product-detail .product-description, .slide-page .product-detail .product-image {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: 100%;
    }

    .slide-page .product-detail .product-image {
        width: 85%;
        margin: 0 auto;
    }

    .slide-page .product-detail .product-description .title {
        margin-left: auto;
        margin-bottom: 2rem;
    }

    .slide-page .product-detail .product-description .content {
        margin-bottom: 1.5rem;
        text-align: center;
    }

    #slideLandingPage .inner-landing-page {
        flex-direction: column-reverse;
    }

    #slideLandingPage .inner-landing-page .inner-content-left,
    #slideLandingPage .inner-landing-page .inner-content-right {
        width: 100%;
    }

    #slideAboutUs::after {
        bottom: 0px;
        width: calc(100% - 5rem);
    }

    .slide-page .product-detail {
        flex-direction: column-reverse;
    }

    section#contactUs {
        align-items: unset;
        margin-top: 10rem;
        padding-top: 0px;
    }

    #ourHistory .our-histories .row,
    #ourHistory .our-histories:nth-of-type(odd) .row {
        flex-direction: column;
    }

    #ourHistory .our-histories .our-history-image {
        margin-bottom: 2.5rem
    }

    #ourHistory .our-histories .content {
        text-align: justify;
    }

    #contactUs .contact-us-detail {
        flex-direction: column-reverse;
    }

    #contactUs .contact-us-detail .contact-us-information, 
    #contactUs .contact-us-detail .contact-us-form {
        width: 100%;
    }

    #contactUs .contact-us-detail .contact-us-form {
        margin-bottom: 2rem;
        padding: 0 2rem;
    }

    #contactUs .contact-us-detail .contact-us-information {
        display: none;
    }

    #contactUs .contact-us-detail .contact-us-information ul li {
        flex-direction: column;
        align-items: center;
        margin-bottom: 2rem;
        text-align: center;
    }

    #contactUs .contact-us-detail .contact-us-information ul li .ias-start {
        margin-right: 0px;
        margin-bottom: .75rem;
    }

    #contactUs .contact-us-detail .contact-us-form .title {
        margin-left: auto;
    }

    #contactUs .contact-us-detail .contact-us-form form {
        text-align: center;
    }

    #productDetail .product-banner {
        flex-direction: column;
    }

    #productDetail .product-banner .product-banner-image,
    #productDetail .product-banner .product-banner-description {
        width: 75%;
    }

    #productDetail #variantProduct .related-product {
        max-width: 200px;
        margin: 0 auto;
    }

    .list-product-support .product-support {
        width: 100%;
    }

    section#contactUs {
        height: auto;
    }

    footer.footer-contact-us {
        display: flex;
    }

    footer .footer-container .maps-detail {
        margin-bottom: 2rem;
    }

    footer .footer-container .web-detail {
        align-items: flex-start;
        justify-content: space-between;
    }
}

@media (min-width: 768px) {
    #splideLogoOurClient .splide__arrow--prev {
        left: -2em;
    }
    
    #splideLogoOurClient .splide__arrow--next {
        right: -2em;
    }
}

@media (max-width: 768px) {
    #productDetail #variantProduct .list-variant-product .variant-product-row .variant-product {
        width: 100%;
    }
}

@media (max-width: 576px) {
    * {
        font-size: 14px;
    }

    .text-huge {
        font-size: 2rem;
        line-height: 2.5rem;
    }

    .title {
        margin-bottom: 2rem;
        font-size: 2rem;
        line-height: 2.5rem;
    }

    .content {
        font-size: 1rem;
    }

    #slideLandingPage .inner-landing-page .inner-content-left .main-logo {
        max-width: 15rem;
        margin-bottom: 2rem;
    }

    #slideAboutUs .content-container {
        padding: 2rem 0;
    }

    #ourClient .maps {
        max-width: 100vw;
    }

    #productDetail .container {
        padding: 0 2rem !important;
    }

    #productDetail .product-banner .product-banner-image,
    #productDetail .product-banner .product-banner-description {
        width: 100%;
    }

    #ourClient #splideLogoOurClient .logo-our-client {
        width: 50%;
    }

    .floating-contact-us {
        right: 2rem;
        bottom: 2rem;
    }

    .floating-contact-us .form-floating-contact-us {
        width: 80vw;
    }
    .floating-contact-us .form-floating-contact-us .btn-confirm-contact-submit {
        margin-top: 1rem;
    }

    .btn-confirm-contact-submit {
        width: 100%;
    }

    footer .footer-container {
        flex-wrap: wrap;
    }

    footer .footer-container .maps-detail,
    footer .footer-container .web-detail {
        width: 100%;
    }

    footer .footer-container .web-detail .products-footer {
        margin-bottom: 2rem;
    }

    footer .footer-container .web-detail {
        flex-wrap: wrap;
    }

    footer .footer-container .web-detail .products-footer,
    footer .footer-container .web-detail .contact-us-footer {
        width: 100%;
    }
}

@media (max-width: 350px) {
    * {
        font-size: 10px;
    }
}

@media (max-height: 768px) {
    .slide-page .product-detail .product-image {
        width: 100%;
        height: 350px;
    }
}

@media (max-height: 650px) {
    .main-logo-in-splide {
        top: 2rem;
        width: 50%;
    }

    .slide-page .product-detail .product-description .title {
        margin-bottom: 2rem;
    }

    .slide-page .product-detail .product-image {
        height: 200px;
    }
}