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

        --pallete37: rgba(255, 99, 132, 0.7);
        --pallete38: rgba(54, 162, 235, 0.7);
        --pallete39: rgba(255, 206, 86, 0.7);
        --pallete40: rgba(75, 192, 192, 0.7);
        --pallete41: rgba(153, 102, 255, 0.7);
        --pallete42: rgba(255, 159, 64, 0.7);

        /* sweetAlertJs */
        --pallete43: #3085d6;
        --pallete44: #21B6A8;
        --pallete45: #38b6ff;
        --pallete46: #28a745;

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

        --box-shadow: 0 5px 20px 1px rgba(0, 0, 0, 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(--pallete11);
        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(--pallete11);
        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(--pallete5);
        letter-spacing: 2px;
}

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

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

.container-navbar.sticking .navbar-link .nav-item .nav-link .active {
        color: var(--pallete5);
        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(--pallete5);
        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=== */

.svg {
        width: 30px;
        height: 30px;
}

section {
        scroll-margin-top: 70px;
        height: 100vh;
        color: var(--on-background);
        background-color: var(--pallete5);
        background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%239C92AC' fill-opacity='0.06' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* === START - #DATATABLE === */
#datatable {
        margin-top: 60px;
        overflow: auto;
        height: auto;
        width: 100%;
        padding: 1rem;
        padding-bottom: 3rem;
        justify-content: center;
        background-color: var(--pallete25op);
}

#datatable .datatable-header {
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto;
        margin: 0.5rem auto;
}

#datatable .datatable-header .dropdown button {
        background-color: var(--pallete11);
        color: var(--pallete5);
        min-width: 13rem;
}

#datatable .datatable-header .dropdown-menu {
        max-height: 12rem;
        overflow-y: auto;
}

#datatable .datatable-body {
        width: 100% !important;
        background-color: var(--pallete12);
        border-radius: 0.5rem;
        text-wrap: nowrap;
}

.datatable-body table {
        width: 100%;
}

/* === END - #DATATABLE  === */

/* === 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: fixed;
        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 === */