.coupon-background{background-image:linear-gradient(45deg,rgba(255,255,255,.03) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.03) 50%,rgba(255,255,255,.03) 75%,transparent 75%,transparent 100%);background-size:20px 20px}.flex{display:flex}.clip-path-number{-webkit-clip-path:polygon(0 11.94%,0 11.94%,.105% 10.004%,.408% 8.166%,.893% 6.453%,1.544% 4.889%,2.343% 3.497%,3.275% 2.304%,4.324% 1.333%,5.471% .609%,6.702% .156%,8% 0,91.233% 0,91.233% 0,92.869% .246%,94.374% .946%,95.722% 2.047%,96.889% 3.492%,97.849% 5.227%,98.577% 7.198%,99.048% 9.348%,99.238% 11.624%,99.121% 13.97%,98.672% 16.332%,78.5% 92.451%,78.5% 92.451%,78.087% 93.77%,77.578% 94.986%,76.982% 96.091%,76.306% 97.077%,75.559% 97.934%,74.75% 98.655%,73.887% 99.231%,72.979% 99.652%,72.035% 99.912%,71.061% 100%,8% 100%,8% 100%,6.702% 99.844%,5.471% 99.391%,4.324% 98.667%,3.275% 97.696%,2.343% 96.503%,1.544% 95.112%,.893% 93.547%,.408% 91.834%,.105% 89.996%,0 88.06%,0 11.94%);clip-path:polygon(0 11.94%,0 11.94%,.105% 10.004%,.408% 8.166%,.893% 6.453%,1.544% 4.889%,2.343% 3.497%,3.275% 2.304%,4.324% 1.333%,5.471% .609%,6.702% .156%,8% 0,91.233% 0,91.233% 0,92.869% .246%,94.374% .946%,95.722% 2.047%,96.889% 3.492%,97.849% 5.227%,98.577% 7.198%,99.048% 9.348%,99.238% 11.624%,99.121% 13.97%,98.672% 16.332%,78.5% 92.451%,78.5% 92.451%,78.087% 93.77%,77.578% 94.986%,76.982% 96.091%,76.306% 97.077%,75.559% 97.934%,74.75% 98.655%,73.887% 99.231%,72.979% 99.652%,72.035% 99.912%,71.061% 100%,8% 100%,8% 100%,6.702% 99.844%,5.471% 99.391%,4.324% 98.667%,3.275% 97.696%,2.343% 96.503%,1.544% 95.112%,.893% 93.547%,.408% 91.834%,.105% 89.996%,0 88.06%,0 11.94%)}.flex-col{flex-direction:column}.relative{position:relative}.rounded-xl{border-radius:.75rem}@media (min-width:768px){.md\:scroll-mt-\[7\.5rem\]{scroll-margin-top:7.5rem}}.gap-4{gap:1rem}.bg-primary-505{--tw-bg-opacity:1;background-color:#0369a1}@media (min-width:1024px){.lg\:col-span-2{grid-column:span 2/span 2}.lg\:gap-8{gap:2rem}}.grid{display:grid}@media (min-width:768px){.md\:gap-8{gap:2rem}}@media (min-width:1024px){.lg\:mt-8{margin-top:2rem}.lg\:block{display:block}}:root{--order-variant-image:url(https://cdn.bangjeff.com/meta/background.png)}.bg-order-variant-image{background-image:var(--order-variant-image)}.bg-cover{background-size:cover}.bg-background1{background-color:hsl(0deg 0% 0)}.bg-background2{background-color:hsl(0deg 0% 6.77%)}.bg-center{background-position:50%}.bg-no-repeat{background-repeat:no-repeat}.text-muted-foreground{color:hsl(var(--muted-foreground))}.text-order-variant-foreground{color:hsl(var(--order-variant-foreground))}.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.duration-300{transition-duration:.3s;animation-duration:.3s}.text-kece{color:#ffa10f}.hover\:ring-2:hover{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.hover\:ring-offset-2:hover{--tw-ring-offset-width:2px}.hover\:ring-offset-background:hover{--tw-ring-offset-color:hsl(var(--background))}.w-full{width:100%}.h-full{height:100%}.justify-between{justify-content:space-between}.justify-start{justify-content:flex-start}.gap-1{gap:.25rem}.p-3{padding:.75rem}.items-end{align-items:flex-end}.justify-end{justify-content:flex-end}.rounded-b-xl{border-bottom-right-radius:.75rem;border-bottom-left-radius:.75rem}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.from-muted{--tw-gradient-from:hsl(var(--muted)) var(--tw-gradient-from-position);--tw-gradient-to:hsl(var(--muted)/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-muted\/40{--tw-gradient-to:hsl(var(--muted)/0.4) var(--tw-gradient-to-position)}.p-2{padding:.5rem}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.divide-muted-foreground\/10>:not([hidden])~:not([hidden]){border-color:hsl(var(--muted-foreground)/.1)}.block{display:block}.text-xs{font-size:.75rem;line-height:1rem}.font-semibold{font-weight:600}.items-center{align-items:center}.gap-2{gap:.5rem}@media (min-width:768px){.md\:gap-3{gap:.75rem}}.h-fit{height:-moz-fit-content;height:fit-content}.w-fit{width:-moz-fit-content;width:fit-content}.rounded{border-radius:.25rem}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.p-1{padding:.25rem}.aspect-square{aspect-ratio:1/1}.w-6{width:1.5rem}@media (min-width:768px){.md\:w-8{width:2rem}}svg{display:block;vertical-align:middle}.h-3{height:.75rem}.w-12{width:3rem}img{display:block;vertical-align:middle;max-width:100%;height:auto}.object-contain{-o-object-fit:contain;object-fit:contain}.object-right{-o-object-position:right;object-position:right}.group\/flashsale:hover .group-hover\/flashsale\:rotate-12,.group\/variant:hover .group-hover\/variant\:rotate-12{--tw-rotate:12deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.text-\[14px\]{font-size:14px}.text-primary{color:hsl(var(--primary))}@media (min-width:768px){.md\:text-\[16px\]{font-size:16px}}

   .product-list {
    background-color: initial; 
    color: initial; 
}

.product-list.active1 {
    background: #fff !important;
    box-shadow: 0px 0px 0px 0px rgb(255 255 255 / 0%), 0 0 0px 0px #ffffff, var(--tw-ring-shadow), 0px 0px 0px 0px rgb(0 0 0 / 0%);
    transition: box-shadow 0.2s ease;
}

.bg-hary {
    background: linear-gradient(to bottom, #ffffff 0%, #787878 100%);
}

.bg-muted\/50 {
    background: linear-gradient(to bottom right, #383838 0%, #383838 50%, #383838 100%);
}

        .scroll-container {
            display: flex;
            overflow-x: auto;
            padding: 1rem 0;
            white-space: nowrap;
            scrollbar-width: thin;
        }
        
        .bg-bangweb-800 {
    --tw-bg-opacity: 1;
    background-color: var(--warna_2);
}

        .scroll-container::-webkit-scrollbar {
            height: 8px;
        }

        .scroll-container::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }

        .scroll-container::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

       .button-3d {
   
    background: linear-gradient(145deg, var(--warna_2),var(--warna_1));
    border-radius: 1rem;
    color: #f2efef;
    font-weight: bold;
    margin: 0 5px;
    padding: 5px 20px;
    cursor: pointer;
}

        .button-3d:active {
            transform: translateY(4px);
            
        }
        
        
.bg-black\/80 {
    background-color: rgba(0, 0, 0, .8);
}
.shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.opacity-100 {
    opacity: 1;
}

.bg-popover {
    background-color: var(--warna_4);
}
.relative {
    position: relative;
}

.font-medium {
    font-weight: 500;
}
.text-xs {
    font-size: .75rem;
    line-height: 1rem;
}
.truncate, .whitespace-nowrap {
    white-space: nowrap;
}
.justify-center {
    justify-content: center;
}
.items-center {
    align-items: center;
}
.h-8 {
    height: 2rem;
}
.bg-destructive {
    background-color: #dc2626;
}

.mt-2 {
    margin-top: 0.5rem;
}

.bg-primary-5401 {
    --tw-bg-opacity: 1;
    background-color: var(--warna_1);
}

.bg-light {
    --bs-bg-opacity: 1;
    background-color: #fff;
}
.text-dark {
    --bs-text-opacity: 1;
    color: #000 !important;
}
.mt-2 {
    margin-top: .5rem !important;
}
.badge {
    --bs-badge-padding-x: 0.65em;
    --bs-badge-padding-y: 0.35em;
    --bs-badge-font-size: 0.75em;
    --bs-badge-font-weight: 700;
    --bs-badge-color: #fff;
    --bs-badge-border-radius: 0.375rem;
    display: inline-block;
    padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
    font-size: var(--bs-badge-font-size);
    font-weight: var(--bs-badge-font-weight);
    line-height: 1;
    color: var(--bs-badge-color);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--bs-badge-border-radius);
}

:root {
    --PhoneInput-color--focus: #03b2cb;
    --PhoneInputInternationalIconPhone-opacity: 0.8;
    --PhoneInputInternationalIconGlobe-opacity: 0.65;
    --PhoneInputCountrySelect-marginRight: 0.35em;
    --PhoneInputCountrySelectArrow-width: 0.3em;
    --PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);
    --PhoneInputCountrySelectArrow-borderWidth: 1px;
    --PhoneInputCountrySelectArrow-opacity: 0.45;
    --PhoneInputCountrySelectArrow-color: currentColor;
    --PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);
    --PhoneInputCountrySelectArrow-transform: rotate(45deg);
    --PhoneInputCountryFlag-aspectRatio: 1.5;
    --PhoneInputCountryFlag-height: 1em;
    --PhoneInputCountryFlag-borderWidth: 1px;
    --PhoneInputCountryFlag-borderColor: rgba(0,0,0,.5);
    --PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);
    --PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,.1)
}

.PhoneInput {
    display: flex;
    align-items: center
}

.PhoneInputInput {
    flex: 1;
    min-width: 0
}

.PhoneInputCountryIcon {
    width: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));
    height: var(--PhoneInputCountryFlag-height)
}

.PhoneInputCountryIcon--square {
    width: var(--PhoneInputCountryFlag-height)
}

.bg-title-order {
    background-color: var(--warna_4);
    color: rgb(255 255 255 / var(--tw-text-opacity));
    /*background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTkyMCAxMDAwIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPnBhdGh7b3BhY2l0eTouMTtjbGlwLXBhdGg6dXJsKCNjbGlwUGF0aCk7ZmlsbDp1cmwoI2xpbmVhckdyYWRpZW50KTt9PC9zdHlsZT48Y2xpcFBhdGggaWQ9ImNsaXBQYXRoIj48cmVjdCB3aWR0aD0iMTkyMCIgaGVpZ2h0PSIxMDAwIi8+PC9jbGlwUGF0aD48bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhckdyYWRpZW50IiB4MT0iMCUiIHkxPSIwJSIgeDI9IjkwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9ImhzbCgwIDAlIDEwMCUvMSkiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9ImhzbCgwIDAlIDEwMCUvMCkiLz48L2xpbmVhckdyYWRpZW50PjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE5MjAsMTAwMClzY2FsZSgtMSwtMSkiPjxwYXRoIGQ9Ik0xMzg0LjUgMzQzLjJMMTkyLjcgMTUzNWwtMjEzLjUtM0wxMzgzIDEyOC4ybDEuNSAyMTV6Ii8+PHBhdGggZD0iTTE5MTkuNyA0NDguM0wxMzU5IDEwMDlsLTEwMC40LTEuNEwxOTE5IDM0Ny4xbC43IDEwMS4yeiIvPjxwYXRoIGQ9Ik0xMTc2LjcgNTE0LjNMNjE2IDEwNzVsLTEwMC40LTEuNEwxMTc2IDQxMy4xbC43IDEwMS4yeiIvPjxwYXRoIGQ9Ik02NDQuNyA0NTcuM0w4NCAxMDE4bC0xMDAuNC0xLjRMNjQ0IDM1Ni4xbC43IDEwMS4yeiIvPjxwYXRoIGQ9Ik0xMzg3LjcgNDQ4LjNMODI3IDEwMDlsLTEwMC40LTEuNEwxMzg3IDM0Ny4xbC43IDEwMS4yeiIvPjxwYXRoIGQ9Ik0xMjUwLjEgNDkzLjhsLTU0NSA1NDUtNTIuNyA0My42IDY0MS45LTY0MS45LTQ0LjIgNTMuM3oiLz48cGF0aCBkPSJNODkxLjEgNjM5LjFMLTc3OCAyMzA4LjNsLTI5OC45LTQuMkw4ODkgMzM4LjFsMi4xIDMwMXoiLz48cGF0aCBkPSJNMTg3MC40IDQxOS44TC0yOC44IDIzMTlsLTM0MC4xLTQuOEwxODY4IDc3LjNsMi40IDM0Mi41eiIvPjxwYXRoIGQ9Ik05MDguNCA0MzYuOEwtOTkwLjggMjMzNmwtMzQwLjEtNC44TDkwNiA5NC4zbDIuNCAzNDIuNXoiLz48cGF0aCBkPSJNMTYzMi40IDUxNS44TC0yNjYuOCAyNDE1bC0zNDAuMS00LjhMMTYzMCAxNzMuM2wyLjQgMzQyLjV6Ii8+PHBhdGggZD0iTTExNzYuMyA1NjcuMUwtMTQ0NS42IDMxODlsLTQ2OS41LTYuNkwxMTczIDk0LjNsMy4zIDQ3Mi44eiIvPjxwYXRoIGQ9Ik0xNDI3LjMgNTgwLjFMLTExOTQuNiAzMjAybC00NjkuNS02LjZMMTQyNCAxMDcuM2wzLjMgNDcyLjh6Ii8+PHBhdGggZD0iTTE2NDkuNSA4ODAuMkw0NTcuNyAyMDcybC0yMTMuNS0zTDE2NDggNjY1LjJsMS41IDIxNXoiLz48cGF0aCBkPSJNNjc1LjggNTIyLjJsLTI2MjEuOSAyNjIxLjktNDY5LjQtNi42TDY3Mi41IDQ5LjRsMy4zIDQ3Mi44eiIvPjxwYXRoIGQ9Ik0yNTk1LjkgNTIyLjJMLTI2IDMxNDQuMWwtNDY5LjUtNi42TDI1OTIuNiA0OS40bDMuMyA0NzIuOHoiLz48L2c+PC9zdmc+);*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.PhoneInputCountryIcon--border {
    background-color: var(--PhoneInputCountryFlag-backgroundColor--loading);
    box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor)
}

.PhoneInputCountryIconImg {
    display: block;
    width: 100%;
    height: 100%
}

.PhoneInputInternationalIconPhone {
    opacity: var(--PhoneInputInternationalIconPhone-opacity)
}

.PhoneInputInternationalIconGlobe {
    opacity: var(--PhoneInputInternationalIconGlobe-opacity)
}

.PhoneInputCountry {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    margin-right: var(--PhoneInputCountrySelect-marginRight)
}

.PhoneInputCountrySelect {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    border: 0;
    opacity: 0;
    cursor: pointer
}

.PhoneInputCountrySelect[disabled],.PhoneInputCountrySelect[readonly] {
    cursor: default
}

.PhoneInputCountrySelectArrow {
    display: block;
    content: "";
    width: var(--PhoneInputCountrySelectArrow-width);
    height: var(--PhoneInputCountrySelectArrow-width);
    margin-left: var(--PhoneInputCountrySelectArrow-marginLeft);
    border-style: solid;
    border-color: var(--PhoneInputCountrySelectArrow-color);
    border-top-width: 0;
    border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);
    border-left-width: 0;
    border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);
    transform: var(--PhoneInputCountrySelectArrow-transform);
    opacity: var(--PhoneInputCountrySelectArrow-opacity)
}

.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon+.PhoneInputCountrySelectArrow {
    opacity: 1;
    color: var(--PhoneInputCountrySelectArrow-color--focus)
}

.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon--border {
    box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus)
}

.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {
    opacity: 1;
    color: var(--PhoneInputCountrySelectArrow-color--focus)
}
  .populaasdasdasdawrwr-t4124t3523ag-con42324124tainer3p423ath {
            width: 85px;
            left: -1px;
            position: absolute;
            top: -9px;
            background-image: linear-gradient(to right, var(--warna_1), var(--warna_2));
            background-size: cover;
            border-start-start-radius: 12px;
            border-start-end-radius: 12px;
            border-end-end-radius: 12px;
            border-end-start-radius: 0;
        }

        .popular-tag-container {
            width: .popular-tag-container {
                width: 70px;
                left: -1px;
                position: absolute;
                top: -9px;
                background-image: linear-gradient(to right, var(--warna_1), var(--warna_2));
                background-size: cover;
                border-start-start-radius: 12px;
                border-start-end-radius: 12px;
                border-end-end-radius: 12px;
                border-end-start-radius: 0;
            }
            0px;
            left: -1px;
            position: absolute;
            top: -9px;
            background-image: linear-gradient(to right,
            var(--warna_1),
            var(--warna_2));
            background-size: cover;
            border-start-start-radius: 12px;
            border-start-end-radius: 12px;
            border-end-end-radius: 12px;
            border-end-start-radius: 0;
        }

        .popular-tag-content {
            color: #f6f5fc;
            padding: 0 8px;
            position: relative;
            font-size: 12px;
            display: flex;
            align-items: center;
        }

        .popular-tag-overlay {
            position: absolute;
            top: 0;
            animation: shimmer-data 4s ease-in infinite;
            background: linear-gradient(90deg, rgba(254, 255, 201, 0), rgb(194 194 194 / 75%) 50%, rgba(254, 255, 201, 0));
            background-repeat: no-repeat;
            background-position: 0;
            background-size: 50% 100%;
            width: 100%;
            height: 100%;
            border-start-start-radius: 12px;
            border-start-end-radius: 12px;
            border-end-end-radius: 12px;
            border-end-start-radius: 0;
            mix-blend-mode: overlay;
        }

        @keyframes shimmer-data {
            0% {
                background-position: -100%;
            }
            100% {
                background-position: 100%;
            }
        }

        .efwasdsf2f34f34v34v3v4 {
            position: relative;
            overflow: hidden;
        }

        .assdafsdvsvasgdsgsdgwgreragwgwrgeargwrgergegsvdsDVSVcsdvdszvsbwtergerg43t34f34343ff34g34gG2 {
            display: flex;
            width: 100%;
            animation: leftMarquee 45s linear infinite;
        }

        .marquee-content {
            width: 100%;
            gap: 10px;
        }

        @keyframes leftMarquee {
            0% {
                transform: translateX(0%);
            }
            100% {
                transform: translateX(-50%);
            }
        }

        .assdafsdvsvasgdsgsdgwgreragwgwrgeargwrgergegsvdsDVSVcsdvdszvsbwtergerg43t34f34343ff34g34gG2:hover {
            animation-play-state: paused;
        }

        .efwasdsf2f34f34v34v3v4:before,
        .efwasdsf2f34f34v34v3v4:after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            width: 20px;
            z-index: 2;
            pointer-events: none;
        }

        @media (min-width: 768px) {
            .efwasdsf2f34f34v34v3v4:before,
            .efwasdsf2f34f34v34v3v4:after {
                width: 100px;
            }
        }

        @media (min-width: 1024px) {
            .efwasdsf2f34f34v34v3v4:before,
            .efwasdsf2f34f34v34v3v4:after {
                width: 150px;
            }
        }
        
        .asdasdwe_2353_Sdfsdccxxx_Xx3979b {
    position: absolute;
    top: -4px;
    right: 0;
    background-color: #FF3956;
    color: #1f1f1f;
    background: linear-gradient(45deg, #92918f, #b6b6b6, #e4e4e4, #8c8c8c, #f8f8f8, #b3b3b3, #636363, rgba(255, 255, 255, 0.9) 80%, #dcdbd6, #b6b6b5, #9e9e9e, #d0d0d0, #c8c8c8, #a3a3a2, #bebebe);
    background-size: 700% 200%;
    animation: gradientAnimation 2.5s linear infinite;
}
.rate {
    background-color: var(--warna_1);
    box-shadow: 0 0 6px 1px var(--warna_1);
    color: #fffbfb;
    padding: 0 .5em;
    font-weight: 800;
    text-align: center;
    border-radius: 1em;
}
.rate2 {
    background-color: var(--warna_1);
    box-shadow: 0 0 6px 1px var(--warna_1);
    color: #000000;
    padding: 0 .5em;
    font-weight: 800;
    text-align: center;
    border-radius: 1em;
}

.bg-murky-601 {
    --tw-bg-opacity: 1;
    background-color: var(--warna_2);
}