*,
html,
body {
        margin: 0;
        padding: 0;
        scroll-behavior: smooth;
        scroll-padding: var(--scroll-padding, 50px);
        font-family: 'Roboto', sans-serif;
        box-sizing: border-box;
}

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);
}

/* ===CONTAINER-NAVBAR=== */
.container-navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 7;
        display: flex;
        width: 100%;
        height: 70px;
        align-items: center;
        justify-content: space-around;
        /* background-color: transparent; */
        background-color: var(--pallete6);
        transition: background-color 600ms;
        /* box-shadow: 0 0 13px 0 var(--pallete5), 0 0 13px 0 var(--pallete9); */
}

/* .sticking get  from Javascript */
.container-navbar.sticking {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 70px;
        z-index: 7;
        display: flex;
        align-items: center;
        justify-content: space-around;
        /* background-color: var(--pallete11); */
        background-color: var(--pallete6);
        transition: 0.5s ease-in-out;
        box-shadow: 0 0 13px 0 var(--pallete6), 0 0 13px 0 var(--pallete9);
}

.container-navbar .navbar-logo img {
        margin: 0 auto;
        width: 100%;
        border-radius: 0.3rem;
        height: 50px;
}

.container-navbar .navbar-link {
        display: flex;
}

.container-navbar .navbar-link .icon-burger {
        display: none;
}

.container-navbar .navbar-link .nav-item {
        margin: auto 0.5rem;
        text-align: center;
        font-size: 0.9rem;
}

.container-navbar .navbar-link .nav-item .nav-link a {
        color: var(--pallete15);
        letter-spacing: 2px;
}

.container-navbar.sticking .navbar-link .nav-item .nav-link a {
        /* color: var(--pallete5); */
        color: var(--pallete15);
        letter-spacing: 2px;
}

.container-navbar .navbar-link .nav-item .nav-link .active {
        color: var(--pallete28);
        font-weight: 700;
}

.container-navbar.sticking .navbar-link .nav-item .nav-link .active {
        color: var(--pallete35);
        font-weight: 700;
}

.container-navbar .navbar-link .nav-item .nav-link::after {
        content: '';
        display: block;
        padding-bottom: 0.1rem;
        border-bottom: 0.15rem solid var(--pallete28);
        transform: scaleX(0);
}

.container-navbar.sticking .navbar-link .nav-item .nav-link::after {
        content: '';
        display: block;
        padding-bottom: 0.1rem;
        border-bottom: 0.15rem solid var(--pallete5);
        transform: scaleX(0);
}

.container-navbar .navbar-link .nav-item .nav-link:hover::after,
.container-navbar.sticking .navbar-link .nav-item .nav-link:hover::after {
        transform: scaleX(0.9);
        transition: 0.2s linear;
}

.container-navbar .navbar-link .nav-item span {
        position: fixed;
        display: flex;
        flex-direction: column;
        text-align: start;
        margin: 0.5rem;
        color: var(--pallete10);
        background-color: var(--pallete12);
        border-radius: 5px;
}

.container-navbar .navbar-link .nav-item span a {
        color: var(--pallete10);
        padding: 0.3rem 1rem;
        width: 100%;
        transition: 0.1s ease-out;
        font-size: 1rem;
}

.container-navbar .navbar-link .nav-item span a:hover {
        color: var(--pallete12);
        background-color: var(--pallete4);
        border-radius: 0.2rem;
        transition: 0.1s ease-in-out;
}

#hamburgerMenu {
        display: none;
}

/* CSS untuk jquery class active */
/* .container-navbar .navbar-link .nav-item .active {
        border-radius: 5px;
        text-align: center;
} */

/* CSS untuk jquery class active pada navbar sticking */
/* .container-navbar.sticking .navbar-link .nav-item .active {
        background-color: var(--pallete12);
        color: var(--pallete10);
} */

.navbar-footer {
        display: none;
}

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


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

#hero {
        height: 100vh;
}

#hero .container-hero {
        display: flex;
        height: 100%;
        width: 100%;
        margin: auto;
}

#hero .container-hero .hero-item-1 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        background-color: var(--pallete6);
}

#hero .container-hero .hero-item-1 .hero-title {
        display: flex;
        flex-direction: column;
        color: var(--pallete12);
        opacity: 1;
        width: 100%;
}

#hero .container-hero .hero-item-1 .hero-title .hero-item {
        display: flex;
        align-items: center;
        justify-content: center;
}

#hero .container-hero .hero-item-1 .hero-title .hero-item span {
        position: relative;
        z-index: 1;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        width: 100%;
        height: 7rem;
        background-color: var(--pallete5);
}

#hero .container-hero .hero-item-1 .hero-title .hero-item span h1 {
        font-size: 7rem;
        width: 100%;
        margin: 0 auto;
        text-align: center;
        color: var(--pallete18);
        text-shadow: 1px 1px 4px var(--pallete12);
}

#hero .container-hero .hero-item-1 .hero-title .hero-item h4 {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        letter-spacing: 0.3rem;
        background-color: var(--pallete11);
        color: var(--pallete5);
        text-shadow: 1px 1px 4px var(--pallete8);
        font-size: 7rem;
        width: 100%;
        margin-bottom: 1rem;
}

#hero .container-hero .hero-item-1 .hero-title .hero-item p {
        display: flex;
        justify-content: center;
        margin: auto 1rem;
        margin-bottom: 1rem;
        text-align: center;
        width: 100%;
        font-size: 1.2rem;
        letter-spacing: 2px;
        color: var(--pallete15);
}

#hero .container-hero .hero-item-1 .hero-title .hero-item a {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        width: fit-content;
        border: var(--pallete13) solid 1px;
        color: var(--pallete11);
        background-color: var(--pallete5);
        font-size: 1.2rem;
        letter-spacing: 2px;
}

#hero .container-hero .hero-item-1 .hero-title .hero-item a:hover {
        color: var(--pallete5);
        background-color: var(--pallete11);
}

#hero .container-hero .hero-item-2 {
        display: flex;
        align-items: center;
        width: 50%;
        height: 100vh;
        background-color: var(--pallete12);
}

#hero .container-hero .hero-item-2 .hero-carousel {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 70%;
        background-color: var(--pallete11);
}

#hero .container-hero .hero-item-2 .hero-carousel .item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 75%;
        margin: auto;
}

#hero .container-hero .hero-item-2 .hero-carousel img {
        border: 5px solid var(--pallete5);
        box-shadow: 0 0 7px 3px rgba(0, 0, 0, 0.2);
        margin: 1rem auto;
        width: 100%;
}

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

/* === START SECTION CONTENT === */
#containerContent {
        position: relative;
        top: 70px;
}

/* === END SECTION CONTENT === */

/* === START SECTION CATEGORY === */

#category {
        height: auto;
        margin: 0.5rem auto;
}

#category .container-category {
        display: flex;
        flex-wrap: wrap;
        margin: auto;
        width: 100%;
        z-index: 0;
        margin-top: 80px;
}

#category .container-category .category-card {
        width: 100%;
}

#category .container-category .category-card .card-body {
        margin: 0 auto;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: auto;
        background-color: var(--pallete5);
}

#category .container-category .category-card .card-body a {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        color: var(--pallete15);
        margin: 0.5rem;
        width: 13rem;
        background-color: var(--pallete7);
}

#category .container-category .category-card .card-body a:hover {
        box-shadow: 0 1px 10px 0 var(--pallete25op), 0 1px 5px 0 var(--pallete9);
        background-color: var(--pallete26);
        color: var(--pallete12);
}

/* === END SECTION CATEGORY === */


/* === START SECTION PRODUCT === */
#product {
        height: 100vh;
}

#product .container-product {
        position: relative;
        color: var(--pallete12);
        text-align: start;
        word-spacing: 2px;
        width: 100%;
        background-color: var(--pallete36);
}

#product .container-product .container-product-card {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: auto;
        margin: auto;
}



#product .container-product .container-product-card .card {
        display: flex;
        border: none;
        border-top-right-radius: 0.5rem;
        border-top-left-radius: 0.5rem;
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
        width: 17rem;
        margin: 0.5rem;
        z-index: 0;
}

#product .container-product .container-product-card .card img {
        position: relative;
        width: 100%;
        height: 12rem;
        object-fit: cover;
}

#product .container-product .container-product-card .card-body {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-content: end;
        background-color: var(--pallete36);
}

#product .container-product .container-product-card .card-body .card-title {
        font-size: 1rem;
}

#product .container-product .container-product-card .card-body .card-info {
        position: absolute;
        bottom: 0;
}

#product .container-product .container-product-card .card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: var(--pallete5);
}

#product .container-product .container-product-card #modalProduct .card {
        margin: auto;
}

#product .container-product .container-pagination-header {
        display: flex;
        justify-content: start;
        margin: 0 auto;
        width: 90%;
}

#product .container-product .container-pagination-header .pagination,
#product .container-product .container-pagination-footer .pagination {
        margin: 0;
}


#product .container-product .container-pagination-footer {
        display: flex;
        justify-content: end;
        margin: 0 auto;
        width: 90%;
}

/* === END SECTION PRODUCT === */

/* === START SECTION FOOTER === */

footer {
        width: 100%;
        position: relative;
        bottom: 0;
}

footer .container-copyright {
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--pallete10);
        height: 40px;
        letter-spacing: 1px;
        font-size: 0.7rem;
        background-color: var(--pallete12);
}

/* === END SECTION FOOTER === */