*,
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;
}

:root {
        --animate-duration: 1s;
        --animate-delay: 1s;
        --animate-repeat: infinite;

        --pallete1: #5271ff;
        --pallete2: #38b6ff;
        --pallete3: #5e17eb;
        --pallete4: #004aad;
        --pallete5: #F5F7F8;
        --pallete6: #F6F5F5;
        --pallete7: #d9d9d9;
        --pallete8: #a6a6a6;
        --pallete9: #737373;
        --pallete10: #100C08;
        --pallete11: #3049A5;
        --pallete12: #F5F5F5;
        --pallete13: #60A3D9;
        --pallete14: #FD49A0;
        --pallete15: #070F2B;
        --pallete16: #222831;
        --pallete17: #31363F;
        --pallete18: #ff3131;
        --pallete19: #B4B4B8;
        --pallete20: #C7C8CC;
        --pallete21: #EF7C8E;
        --pallete22: rgb(245, 245, 245, 0.9);
        --pallete23: rgb(16, 12, 8, 0.8);
        --pallete24: #d8eefe;
        --pallete25: #e3f6f5;
        --pallete26: #ff5470;
        --pallete27: #094067;
        --pallete28: #232946;
        --pallete29: #25d366;
        --pallete30: #f25c05;
        --pallete31: rgb(255, 180, 0);
        --pallete32: rgb(9, 64, 103, 0.9);
        --pallete33: rgb(255, 244, 0);
        --pallete34: rgb(244, 205, 42);
        --pallete35: rgb(253, 246, 140);
        --pallete36: #ffffff;

        --pallete1op: rgba(82, 113, 255, 0.2);
        --pallete2op: rgba(56, 182, 255, 0.2);
        --pallete11op: rgba(48, 73, 165, 0.5);
        --pallete13op: rgba(96, 163, 217, 0.3);
        --pallete24op: rgba(216, 238, 254, 0.2);
        --pallete25op: rgba(227, 246, 245, 0.3);
        --pallete27op: rgba(9, 64, 103, 0.5);
}

@media (max-width: 1024px) {

        html {
                font-size: 80%;
        }

        /* ===START-FLOATING-WA=== */

        .float {
                bottom: 30px;
                right: 20px;
                color: var(--pallete12);
                border-radius: 50px;
                text-align: center;
                font-size: 2.5rem;
                z-index: 100;
        }

        .float:hover {
                font-size: 2.7rem;
        }

        /* ===END-FLOATING-WA=== */

        /* ===CONTAINER-NAVBAR=== */
        .container-navbar .navbar-logo {
                width: 100%;
                display: flex;
                justify-content: center;
        }

        .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(--pallete33);
        }

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

        .container-navbar .navbar-link {
                position: absolute;
                color: var(--pallete10);
                display: block;
                top: 100%;
                left: -100%;
                z-index: 3;
                width: 75%;
                transition: 0.3s;
                justify-content: space-between;
                border-top-right-radius: 0.5rem;
        }

        .container-navbar .navbar-link.active-hamburger {
                left: 0;
                font-size: 0.7rem;
                background-color: var(--pallete23);
                height: 100vh;
                overflow-y: scroll;
                padding-bottom: 8rem;
        }

        .container-navbar .navbar-link .nav-item {
                display: flex;
                flex-direction: column;
                justify-content: start;
                margin: 0.5rem;
                margin-top: 1.5rem;
                font-size: 1.2rem;
                max-width: max-content;
                background-color: var(--pallete25op);
                border-top-right-radius: 1rem;
        }

        .container-navbar .navbar-link .nav-item .active {
                margin-left: 1rem;
                border-top-right-radius: 1rem;
                transition: 0.2s ease-in-out;
        }

        .container-navbar .navbar-link .nav-item .nav-link {
                display: flex;
                justify-content: start;
                align-items: center;
                min-width: 17rem;
                color: var(--pallete12);
                border-top-right-radius: 1rem;
        }

        .container-navbar.sticking .navbar-link .nav-item .nav-link {
                display: flex;
                justify-content: start;
                align-items: center;
                width: auto;
                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;
                min-width: 12rem;
                max-width: 16rem;
                color: var(--pallete12);
        }

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

        .container-navbar .navbar-link .nav-item .nav-link .active {
                color: var(--pallete33);
        }

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

        .container-navbar .navbar-link .dropdown {
                display: flex;
                flex-direction: column;
        }

        .container-navbar .navbar-link .dropdown-content {
                display: none;
                position: relative;
                min-width: 10rem;
                box-shadow: none;
                z-index: 2;
        }

        .container-navbar .navbar-link .dropdown .dropdown-content a {
                padding-left: 2rem;
        }

        .container-navbar .navbar-link .dropdown:hover .dropdown-content {
                display: block;
        }

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

        .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=== */

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

        #hero .container-hero .hero-item-2 .hero-carousel .card {
                /* height: 20rem; */
                width: 100%;
        }

        #hero .container-hero .hero-item-1 .hero-title .hero-item span h1 {
                font-size: 2.5rem;
                margin: auto 0.5rem;
                color: var(--pallete12);
        }

        #hero .container-hero .hero-item-1 .hero-title .hero-item h4 {
                font-size: 1.5rem;
                text-indent: 1rem;
                justify-content: center;
        }

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


        /* === START - CONTAINER - NAVBAR - PAGE === */

        .container-navbar-page .navbar-logo {
                width: 100%;
                display: flex;
                justify-content: center;
        }

        .navbar-hamburger-page #hamburgerMenuGallery {
                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(--pallete33);
        }

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

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

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

        .container-navbar-page .navbar-link .nav-item {
                display: flex;
                justify-content: start;
                margin: auto 0.5rem;
                margin-top: 1.5rem;
                font-size: 1.2rem;
                max-width: max-content;
                background-color: var(--pallete25op);
                border-top-right-radius: 1rem;
        }

        .container-navbar-page .navbar-link .nav-item .active {
                margin-left: 1rem;
                border-top-right-radius: 1rem;
                transition: 0.2s ease-in-out;
        }

        .container-navbar-page .navbar-link .nav-item .nav-link {
                display: flex;
                justify-content: start;
                align-items: center;
                min-width: 17rem;
                color: var(--pallete12);
                border-top-right-radius: 1rem;
        }

        .container-navbar-page.sticking .navbar-link .nav-item .nav-link {
                display: flex;
                justify-content: start;
                align-items: center;
                width: auto;
                color: var(--pallete12);
        }

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

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

        .container-navbar-page .navbar-link .nav-item .nav-link .active {
                color: var(--pallete33);
        }

        .container-navbar-page.sticking .navbar-link .nav-item .nav-link .active {
                color: var(--pallete33);
        }

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

        /* === START - PAGES === */

        #productDialogGallery {
                /* z-index: -2; */
                min-width: 20rem;
                max-width: 27rem;
        }

        #productDialogGallery .dialog-navigation #prevProduct {
                width: 40px;
                height: 40px;
                font-size: 1rem;
        }

        #productDialogGallery .dialog-navigation #nextProduct {
                width: 40px;
                height: 40px;
                font-size: 1rem;
        }

        .wrapper-7 .container-header {
                margin-top: 2rem;
        }

        /* === END - PAGES === */

}