.detail-rice-box-promosi-main-image {
    /* height: 350px; */
    background-color: #F6F7FF;
    border-radius: 12px;
    border: 1px solid #EEE;
}

.detail-rice-box-main-image {
    border-radius: 12px;
    width: 440px;
}

.detail-rice-box-promosi-other-image {
    /* min-width: 150px; */
    height: 135px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #EEEEEE;
}

.detail-rice-box-promosi-other-image:hover {
    border: 1px solid #AAA8ED;
}

.detail-rice-box-promosi-other-image > img {
    border-radius: 6px;
}

.detail-rice-box-promosi-other-image-active {
    border: 1px solid #AAA8ED;
    border-radius: 6px;
    background-color: #F6F7FF;
}

.detail-rice-box-promosi-other-image-active > img {
    border-radius: 6px;
}

.detail-rice-box-container-other-image {
    gap: 24px;
    overflow-x: scroll;
    overflow-y: hidden;
}

.detail-rice-box-container-other-image::-webkit-scrollbar {
    display: none;
}

.detail-rice-box-customize-category {
    font-size: 32px;
    font-weight: 600;
    padding: 8px 12px;
    color: #dcdcdc;
}

.detail-rice-box-customize-category:hover {
    cursor: pointer;
    color: #D3D2F6;
}

.detail-rice-box-customize-category-active {
    font-size: 32px;
    font-weight: 600;
    background: linear-gradient(120deg, #17174f 57.32%, #e34a45 86.6%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 8px 12px;
}

.detail-rice-box-customize-content {
    display: none;
}

.detail-rice-box-customize-content-active {
    display: block;
}

.detail-rice-box-container-content-product {
    padding: 0px 42.5px;
}

.detail-rice-box-container-content-information {
    gap: 50px;
    flex-wrap: wrap;
}

.detail-rice-box-container-content-information-left {
    gap: 32px;
    flex: 1;
}

.detail-rice-box-back-button-gap {
    gap: 8px;
}

.detail-rice-box-container-back-button {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    border: 1px solid red;
}

.detail-rice-box-container-back-title {
    color: #E24B44;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.72px;
}

.detail-rice-box-information-left-title {
    margin-top: 10px;
    color: #313131;
    font-size: 40px;
    font-weight: 700;
    line-height: normal;
    font-style: normal;
}

.detail-rice-box-information-left-description {
    color: #5C5F75;
    font-size: 16px;
    font-weight: 400;
    line-height: 140.3%;
}

.detail-rice-box-information-left-solution {
    margin-top: 32px;
    color: #17164F;
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: 140.3%;
}

.detail-rice-box-container-content-katalog-material {
    padding: 0px 41px;
    gap: 36px;
}

.detail-rice-box-katalog-material-title {
    color: #313131;
    font-weight: 700;
    font-size: 40px;
}

.detail-rice-box-katalog-material-subtitle {
    color: #5C5F75;
    margin-top: 12px;
    line-height: 140.3%;
    font-weight: normal;
    font-size: 16px;
}

.detail-rice-box-container-content-card-pesan {
    padding: 0px 43px;
}

.detail-rice-box-container-content-manfaat {
    padding: 0px 65px 0px 42px;
}

.detail-rice-box-container-content-manfaat-list {
    gap: 24px;
    margin-top: 46px;
}

.detail-rice-box-container-content-customize {
    padding: 0px 42px;
}

.detail-rice-box-container-content-card-konsultasi {
    padding: 0px 42px;
}

.detail-rice-box-container-content-laminating {
    gap: 18px;
}

.detail-rice-box-container-scroll-tag-customize {
    overflow-y: hidden;
    overflow-x: scroll;
}

.detail-rice-box-container-tag-customize {
    column-gap: 8px;
    height: 54px;
    width: max-content;
}

.detail-rice-box-container-scroll-tag-customize::-webkit-scrollbar {
    display: none;
}

.detail-rice-box-container-content {
    gap: 61px;
    padding: 48px 98px 98px 98px;
}

.detail-rice-box-mobile-back-button {
    display: none;
}

.detail-rice-box-container-content-gambar {
    gap: 24px; 
    overflow: hidden;
}

.detail-rice-box-container-button-pesan {
    margin-top: 32px;
    background-color: #17164F;
    width: fit-content;
    border-radius: 4px;
    cursor: pointer;
}

.detail-rice-box-container-button-pesan-text {
    padding: 12px;
    font-size: 14px;
    color: #FFF;
    font-weight: 500;
    line-height: 136.8%;
}

.detail-rice-box-container-gap {
    gap: 98px;
}

.detail-rice-box-container-katalog {
    padding-bottom: 35px;
    gap: 36px;
    flex-wrap: wrap;
}

.detail-rice-box-container-katalog-material {
    padding-bottom: 35px;
    gap: 36px;
    flex-wrap: wrap;
}

.detail-rice-box-container-card-material {
    width: 195px;
    height: 196px;
    background-color: #F4F4FF;
    border-radius: 14px;
}

.detail-rice-box-container-card-material-padding {
    padding: 12px 12px 11px 12px;
}

.detail-rice-box-container-card-image-material {
    object-fit: cover; 
    border-radius: 4px;
}

.detail-rice-box-container-card-text-material {
    font-size: 16px;
    font-weight: 600;
    color: #17164F;
    margin-top: 14px;
    text-align: center;
}

.detail-rice-box-container-card-katalog {
    width: 243px;
    height: 293px;
    background-color: #F6F7FF;
    border-radius: 9px;
    border: 1px solid #F3F3F3;
    position: relative;
    display: none;
}

.detail-rice-box-container-card-katalog-active {
    display: block;
}

.detail-rice-box-container-card-katalog:hover {
    background-color: #FFF;
    box-shadow: 7px 13px 27px 0px rgba(69, 77, 117, 0.15);
    cursor: pointer;
}

.detail-rice-box-container-katalog-image {
    margin-top: 8px;
}

.detail-rice-box-container-katalog-text {
    margin-bottom: 8px;
    padding: 16px;
}

.detail-rice-box-container-katalog-product-text {
    font-size: 10px;
    font-weight: 500;
    color: RGBA(136,136,136,.76);
}

.detail-rice-box-container-katalog-title-text {
    font-size: 16px;
    font-weight: 500;
    color: #313131;
    margin: 9px 0px;
}

.detail-rice-box-container-katalog-size-text {
    font-size: 14px;
    font-weight: normal;
    color: #313131;
}

.detail-rice-box-card-katalog-image {
    height: 182px;
}

.detail-rice-box-container-card-katalog:hover .detail-rice-box-container-katalog-pesan {
    display: flex;
    align-items: center;
}

.detail-rice-box-container-katalog-pesan {
    display: none;
	padding: 8px 12px;
	border-radius: 21px;
	background-color: #17164F;
	color: #FFF;
	width: max-content;
	gap: 10px;
	position: absolute;
	bottom: -15px;
	left: 20%;
}

.desktop {
    display: block !important;
}

.mobile {
    display: none !important;
}

.softbox-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 9; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
  
.softbox-modal-content {
    border-radius: 16px;
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 645px;
    height: 321px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

.softbox-modal-content-padding {
    margin: 32px 37px 67px 38px; 
    position: relative;
}

.softbox-modal-title {
    font-weight: bold;
    font-size: 24px;
    color: #313131;
    flex: 1;
    text-align: center;
}

.softbox-modal-description {
    margin-top: 18px;
    font-weight: normal;
    font-size: 16px;
    line-height: 140.3%;
    text-align: center;
    color: #5C5F75;
}

.softbox-modal-container-sosmed {
    margin-top: 40px;
    gap: 19px;
}

.softbox-modal-container-content-sosmed {
    border: 3px solid #E8F0FF;
    width: 94px;
    height: 94px;
    border-radius: 9px;
    cursor: pointer;
}

.softbox-modal-container-content-sosmed:hover {
    border: 3px solid #181850;
}

.softbox-modal-content-sosmed-information {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #5C5F75;
}

.softbox-modal-container-content-sosmed:hover > .softbox-modal-content-sosmed-information {
    color: #181850;
}

#close-mobile {
    display: none;
}

#close-desktop {
    display: block;
}

@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}
  
@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@media only screen and (width <= 655px) {
    #close-mobile {
        display: block;
    }

    #close-desktop {
        display: none;
    }

    .softbox-modal-content {
        width: auto;
        margin: 0px 24px;
        height: fit-content;
    }

    .softbox-modal-content-padding {
        margin: 12px 15px 43px 18.5px;
    }
    
    .softbox-modal-container-sosmed {
        flex-wrap: wrap;
    }
}

@media only screen and (width <= 1080px) {
    .detail-rice-box-container-content-product {
        padding: unset;
    }

    .detail-rice-box-container-content-katalog-material {
        padding: unset;
    }

    .detail-rice-box-container-content-card-pesan {
        padding: unset;
    }

    .detail-rice-box-container-content-customize {
        padding: unset;
    }

    .detail-rice-box-container-content-manfaat {
        padding: unset;
    }

    /* .detail-rice-box-container-content-manfaat-list {
        justify-content: center;
    } */

    .detail-rice-box-container-content-card-konsultasi {
        padding: unset;
    }
}

@media only screen and (width <= 960px) {
    .detail-rice-box-container-content-laminating {
        flex-wrap: wrap;
    }

    .detail-rice-box-container-content {
        padding: 48px 24px 98px 24px;
    }
}

@media only screen and (width <= 768px) {
    .detail-rice-box-container-content-information {
        flex-direction: column-reverse;
        gap: 24px;
    }

    .detail-rice-box-back-button {
        display: none;
    }

    .detail-rice-box-mobile-back-button {
        display: block;
    }
    
    .detail-rice-box-container-content-gambar {
        width: 100%;
    }

    .detail-rice-box-promosi-main-image {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .detail-rice-box-container-button-pesan {
        margin-top: 0px;
    }

    .detail-rice-box-container-gap {
        gap: 57px;
    }

    .detail-rice-box-container-katalog-material {
        padding-bottom: 0px;
    }
}

@media only screen and (width <= 655px) {
    .desktop {
        display: none !important;
    }

    .mobile {
        display: block !important;
    }

    .detail-rice-box-container-katalog-image {
        margin: 0px;
        display: flex !important;
        flex-direction: row !important;
    }

    .detail-rice-box-container-katalog-pesan {
        left: 35%;
    }
}

@media only screen and (width <= 574px) {
    .detail-rice-box-container-katalog {
        flex-direction: column;
        align-items: flex-start;
    }

    .detail-rice-box-container-card-katalog {
        width: 100%;
        height: 121px;
        display: flex;
        gap: 12px;
    }

    .detail-rice-box-card-katalog-image {
        height: 121px;
    }

    .detail-rice-box-container-katalog-image {
        margin-top: 0px;
    }
}

@media only screen and (width <= 455px) {
    .detail-rice-box-container-katalog-material {
        gap: 18px;
    }

    .detail-rice-box-container-card-material {
        /* width: ; */
        flex: 195px;
    }
}

@media only screen and (width <= 425px) {
    .detail-rice-box-main-image {
        width: auto;
        height: 242px;
    }

    .detail-rice-box-container-katalog-pesan {
        left: 30%;
    }
}

@media only screen and (width <= 375px) {
    .detail-rice-box-container-gap {
        gap: 32px;    
    }

    .detail-rice-box-container-katalog-image {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .detail-rice-box-card-katalog-image {
        height: 84px;
    }

    .detail-rice-box-container-back-title {
        font-size: 14px;
    }

    .detail-rice-box-information-left-title {
        font-size: 24px;
    }

    .detail-rice-box-promosi-other-image {
        height: fit-content;
    }

    .detail-rice-box-promosi-other-image > img {
        height: 81px;
    }

    .detail-rice-box-katalog-material-title {
        font-size: 24px;
    }

    .detail-rice-box-container-katalog-pesan {
        left: 25%;
    }
}