*,
html,
body {
        margin: 0;
        padding: 0;
        scroll-behavior: smooth;
        font-family: 'Roboto', sans-serif;
}

ul li {
        list-style-type: none;
        margin: 7px auto;
}

a {
        text-decoration: none;
}

@media (max-width: 1024px) {

        html {
                font-size: 80%;
        }


        /* ===CONTAINER-NAVBAR=== */
        .navbar-hamburger #hamburgerMenu {
                position: fixed;
                display: inline-block;
                display: flex;
                align-items: center;
                width: 5rem;
                height: 70px;
                top: 0;
                right: 0;
                left: 0;
                z-index: 7;
                font-size: 3rem;
                color: var(--pallete18);
        }

        .container-navbar #iconNAv {
                display: none;
        }

        .container-navbar .navbar-link {
                display: block;
                position: absolute;
                color: var(--pallete10);
                top: 100%;
                left: -100%;
                z-index: 3;
                min-width: 27rem;
                transition: 0.3s;
                border-top-right-radius: 0.3rem;
                height: 100vh;
                overflow-y: auto;
        }

        .container-navbar .navbar-link.active {
                left: 0;
                font-size: 0.7rem;
                background-color: var(--pallete27);
        }

        .container-navbar .navbar-link .nav-item {
                display: flex;
                justify-content: start;
                margin: 0.5rem;
                font-size: 1.2rem;
                width: auto;
                border-bottom: 0.1rem solid var(--pallete12);
        }

        .container-navbar .navbar-link .nav-item .nav-link {
                display: flex;
                justify-content: start;
                align-items: start;
                width: auto;
        }

        .container-navbar .navbar-link .nav-item .nav-link:hover {
                color: var(--pallete12);
        }

        .container-navbar .navbar-link .nav-item .nav-link a {
                display: flex;
                align-items: center;
                text-align: start;
                text-indent: 1rem;
                height: 2.5rem;
                color: var(--pallete5);
                min-width: 12rem;
                max-width: 16rem;
        }

        .container-navbar.sticking .navbar-link .nav-item .nav-link a {
                color: var(--pallete5);
        }

        .container-navbar .navbar-link .nav-item .nav-link a:hover {
                min-width: 12rem;
                max-width: 16rem;
                transition: 0.1s linear;
                color: var(--pallete12);
                background-color: var(--pallete27);
                border-top-right-radius: 0.5rem;
        }

        .container-navbar .navbar-footer {
                position: fixed;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 1.3rem;
                width: 26rem;
                padding: 0 1%;
                bottom: 0;
                height: 3rem;
                background-color: var(--pallete27);
        }

        .container-navbar .navbar-footer .nav-footer {
                padding: 0.3rem 4%;
        }

        .container-navbar .navbar-footer .nav-footer:hover {
                background-color: var(--pallete24);
                padding: 0.3rem 4%;
                border-top-left-radius: 0.5rem;
                border-top-right-radius: 0.5rem;
                border-bottom-left-radius: 0.5rem;
                border-bottom-right-radius: 0.5rem;
        }

        .container-navbar .navbar-footer .nav-footer a {
                color: var(--pallete12);
        }

        .container-navbar .navbar-footer .nav-footer a:hover {
                color: var(--pallete10);
        }

        /* ===END CONTAINER-NAVBAR=== */


        #product .container-product .container-product-card {
                margin-left: 0;
        }

        /* ===START-CONTAINER-HERO=== */

        /* #hero .container-hero .hero-item-2 .hero-carousel .item {
                max-height: 0%;
        } */

        #hero .container-hero .hero-item-1 .hero-title .hero-item span h1 {
                font-size: 5rem;
        }

        #hero .container-hero .hero-item-1 .hero-title .hero-item h4 {
                font-size: 5rem;
        }

        /* ===END-CONTAINER-HERO=== */

}