.section-hero {
     position: relative;
 }

 .banner-img {
     height: 300px;
     width: 100%;
 }

 .banner-img img {
     width: 100%;
     height: 300px;
     object-fit: cover;
 }

 .banner-product {
     height: auto;
     background-image: linear-gradient(109.6deg, rgba(132, 222, 255, 1) 11.2%, rgba(2, 0, 4, 1) 91.1%);
     position: relative;
     width: 100%;
     border-top: transparent 5px solid;
     border-bottom: transparent 5px solid;
     box-shadow:
         inset 6px 5px 5px rgba(0, 0, 0, 0.5);
     color: white;
     text-shadow: 3px 2px 4px rgba(0, 0, 0, 0.998);
 }

 .banner-product .row {
     width: 100%;
 }

 .wrapper-img {
     height: 150px;
     width: 150px;
     margin-top: -250px;
 }

 .banner-product .wrapper-img img {
     margin-top: -25px;
     border-radius: 20px;
     --a: 15deg;
     width: 200px;
     aspect-ratio: 0.80;
     object-fit: cover;
     transform: perspective(400px) rotateY(calc(var(--_i, 1)*var(--a)));
     box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.72);
 }

 @media (max-width: 991.98px) {
     .banner-product .wrapper-img img {
         width: 190px;
     }
 }

 @media (max-width: 767.98px) {
     .banner-product .wrapper-img img {
         width: 180px;
     }
 }

 @media (max-width: 575.98px) {
     .banner-product .wrapper-img img {
         width: 160px;
         box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.72);
     }
 }

 .layanan {
     margin-top: 10px;
     margin-bottom: 20px;
 }

 .layanan img {
     width: 25px;
 }

 .layanan .row {
     font-size: 13px;
 }

 .main-product {
     position: relative;
     height: auto;
     width: 100%;
     padding: 50px 0;
 }

 .head-service {
     margin-bottom: 30px;
 }

 .info-product,
 .services-product {
     background-color: #223c45;
     margin: 10px;
     padding: 20px 20px 30px 20px;
     border: 2px solid transparent;
     border-radius: 20px;
     font-weight: 500;
     color: white;
     border: 3px solid #67efe1;
 }

 @media (max-width:990px) {

     .info-product,
     .services-product {
         margin: 10px 100px;
     }
 }

 @media (max-width:770px) {

     .info-product,
     .services-product {
         margin: 10px 10px;
     }
 }

 @media (max-width:505px) {

     .info-product,
     .services-product {
         margin: 10px 0px;
     }
 }

 .ribbon-2 {
     --f: 10px;
     /* control the folded part*/
     --r: 10px;
     /* control the ribbon shape */
     --t: 5px;
     /* the top offset */

     position: absolute;
     inset: var(--t) calc(-1*var(--f)) auto auto;
     padding: 0 10px var(--f) calc(10px + var(--r));
     clip-path:
         polygon(0 0, 100% 0, 100% calc(100% - var(--f)), calc(100% - var(--f)) 100%,
             calc(100% - var(--f)) calc(100% - var(--f)), 0 calc(100% - var(--f)),
             var(--r) calc(50% - var(--f)/2));
     background: #BD1550;
     box-shadow: 0 calc(-1*var(--f)) 0 inset #0005;
     color: white;
 }

 .card-product {
     /* width: 220px; */
     width: 150px;
     /* width: auto; */
     height: auto;
     margin: 10px auto 0;
     background: #ade9ff;
     position: relative;
     border-radius: 15px;
     font-size: 10px;
     font-weight: 600;
     color: #121212;
     padding: 10px;
     padding-left: 15px;
     box-shadow: inset 3px 3px 3px rgba(0, 0, 0, 0.5);
     border: transparent 2px solid;
     outline: transparent 2px solid;
 }

 .card-product:hover {
     border: #223c45 solid 2px;
     outline: white solid 2px;
     box-shadow: 0px 3px 8px rgba(250, 250, 250, 0.66);
 }

 .card-product img {
    width: 40px;
 }

@media (max-width: 576px) {
    .card-product {
        /* width: 150px !important; */
        font-size: 13px;
    }
    .card-product img {
        display: none;
    }

}

@media (max-width: 768px) {
    .card-product {
        /* width: 150px !important; */
        }
    .info-product {
        font-size: 13px;
    }
    .input-data-akun {
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .card-product {
        /* width: 150px !important; */
    }

    .info-product {
        font-size: 13px;
    }

    .input-data-akun {
        width: 100%;
    }
}

 .active-product {
     background-color: white;
     box-shadow: 0px 3px 8px rgba(250, 250, 250, 0.66);
 }

 .special-items {
     height: auto;
 }

 .head-service span {
     text-shadow: 4px 4px 3px rgba(0, 0, 0, 0.5);
     font-size: 19px;
     font-weight: 600;
 }

 .input-data-akun {
     border-radius: 10px;
     border: solid 2px transparent;
     height: 35px;
     background-color: #ade9ff;
     box-shadow: inset 3px 3px 3px rgba(0, 0, 0, 0.5);
     padding-left: 10px;
     font-weight: 600;
     font-size: 15px;
 }

 .input-data-akun:focus {
     border: #223c45 solid 2px;
     outline: white solid 2px;
     background-color: white;
 }

 .input-data-akun::placeholder {
     color: black;
     font-weight: 600;
 }

 .input-kode-promo {
     border-radius: 10px;
     border: solid 2px transparent;
     height: 35px;
     background-color: #ade9ff;
     box-shadow: inset 3px 3px 3px rgba(0, 0, 0, 0.5);
     padding-left: 10px;
     font-weight: 600;
     font-size: 15px;
     width: 100%;
 }

 .input-kode-promo:focus {
     border: #223c45 solid 2px;
     outline: white solid 2px;
     background-color: white;
 }

 .input-kode-promo::placeholder {
     color: black;
     font-weight: 600;
 }

 .btn-promo {
     box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
     background-color: #67efe1;
     border-radius: 10px;
     color: black;
     font-weight: bold;
     border: transparent 2px solid;
     text-shadow: 3px 3px 3px rgba(0, 0, 0, 0);
 }

 .btn-promo:hover {
     box-shadow: 3px 3px 3px rgba(0, 0, 0, 0),
         inset 3px 3px 3px rgba(0, 0, 0, 0.5);
     background-color: #67efe1;
     border-radius: 10px;
     color: black;
     font-weight: bold;
     border: transparent 2px solid;
     text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
 }

 .btn-cari-promo {
     background-color: #67efe1;
     border-radius: 10px;
     color: black;
     font-weight: bold;
     border: transparent 2px solid;
     text-shadow: 3px 3px 3px rgba(0, 0, 0, 0);
     width: 100%;
     font-size: 13px;
     height: 30px;
     padding: 0 10px;
 }

 .btn-cari-promo:hover {
     border: 2px white solid;
 }

 .btn-cari-promo:hover svg {
     fill: white;
 }

 .accordion-button {
     background-color: #cfe2ff;
 }

 .accordion-collapse {
     background-color: #cfe2ff;
 }

 .card-payment {
     width: 200px;
     height: auto;
     margin: 10px auto 0;
     margin-left: 10px !important;
     background: #ade9ff;
     position: relative;
     border-radius: 15px;
     font-size: 12px;
     font-weight: 600;
     color: #121212;
     padding: 10px;
     padding-left: 25px;
     padding-right: 25px;
     border: transparent 2px solid;
     outline: transparent 2px solid;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0),
            inset 3px 3px 3px rgba(0, 0, 0, 0.5);
 }

 .card-payment:hover {
     border: transparent 2px solid;
     outline: #223c45 2px solid;
     box-shadow: inset 3px 3px 3px rgba(0, 0, 0, 0.5);
     background-color: white;
 }

 .payment-active {
     border: transparent 2px solid;
     outline: #223c45 2px solid;
     box-shadow: inset 3px 3px 3px rgba(0, 0, 0, 0.5);
     background-color: white;
 }

 .payment-img-wrapper {
     width: auto;
     height: 30px;
     margin-bottom: 2px;
 }

 .card-payment img {
     margin-bottom: 15px;
     width: 80%;
     /* height: 50px; */
     object-fit: cover;
 }

 .card-payment span i {
     font-size: 10px;
 }

 .card-payment hr {
     margin: 1px 0;
 }

 .no-spinners {
     -moz-appearance: textfield;
 }

 .no-spinners::-webkit-outer-spin-button,
 .no-spinners::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }

 .modal-body-promo {
     background-color: #223c45;
     border: 2px solid #67efe1;
     color: white;
 }

 .modal-body-promo .btn-close {
     background-color: #67efe1 !important;
     outline-color: red !important;
 }

 .card-promo {
     border: 2px solid #67efe1;
     border-radius: 10px;
     margin: 0 20px;
     width: 100%;
     color: black;
     font-weight: bold;
 }

 .status-promo {
     background-color: #223c45;
     font-size: 14.5px;
     font-weight: 600;
     width: 100%;
     border-radius: 20px;
 }

 .status-tersedia {
     background-color: #ade9ff;
 }

 .status-tersedia .status-promo {
     color: greenyellow;
 }

 .status-tidak-tersedia {
     background-color: #384d54;
 }

 .status-tidak-tersedia .status-promo {
     color: rgb(255, 113, 47);
 }

 .button-pesan {
     width: 100%;
     border-radius: 20px;
     background-color: #67efe1;
     color: black;
     font-weight: bold;
     border: transparent solid 2px;
 }

 .button-pesan:hover {
     border: #67efe1 solid 2px;
     color: #67efe1;
     box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.257);
 }

 .button-pesan:hover span {
     text-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.257);
 }

 .header-buat-pesanan-modal {
    margin-top: -10px;
    font-size: 20px;
    font-weight: bold;
 }

 .body-modal-pesanan {
background-color: #459693;
    margin: 20px;
    padding: 20px;
    border-radius: 10px;
    border: #67efe1 2px solid;
 }

 .btn-pesan-modal{
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
 }

 .btn-pesan-modal button{
    font-weight: bold;
    font-size: 14px;
 }

 .btn-pesan-sekarang {
    /* background-color: #459693; */
    background-color: #ade9ff !important;
    color: white;
    font-weight: bold;
    border: #67efe1 solid 2px;
 }

 .btn-pesan-sekarang:hover{
    background-color: #306866;
 }

 .body-modal-pesanan input{
    background-color: transparent !important;
    color: white;
    font-weight: bold;
    border: 0;
    text-align: right;
 }

 .body-modal-pesanan input:focus,
 .body-modal-pesanan input:active {
     border: none;
     outline: none;
     box-shadow: none;
 }