.rkit-tab-nav {
    list-style: none;
    padding: 0;
}

.rkit-tab-container {
    display: flex;
}

    .rkit-tab-container.horizontal {
        flex-direction: column;
    }

    .rkit-tab-container.vertical {
        flex-direction: row;
    }

.rkit-tab-nav {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.rkit-tab-container.horizontal .rkit-tab-nav {
    flex-direction: row;
}

.rkit-tab-container.vertical .rkit-tab-nav {
    flex-direction: column;
}

.rkit-tab-btn-item {
    width: auto;
    background-color: #e6e6e6;
    text-align: center;
    cursor: pointer;
    padding: 1rem;
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

    .rkit-tab-btn-item:hover {
        background-color: #00cea6;
        color: white;
    }

        .rkit-tab-btn-item:hover .tab-title-icon {
            color: white;
            fill: white;
        }

    .rkit-tab-btn-item.active {
        background-color: #00cea6;
        color: white;
    }



        .rkit-tab-btn-item.active .tab-title-icon {
            color: white;
            fill: white;
        }

.tab-title-icon {
    font-size: 18px;
    width: 18px;
    display: flex;
}

.rkit-tab-content {
    display: none;
    /* margin: 20px 0px 0px 0px; */
    /* padding: 20px; */
    opacity: 0;
    transition: all 0.5s;
}

    .rkit-tab-content.active {
        display: block;
        opacity: 1;
        animation: fade 0.5s ease-in-out;
    }

.rkit-tab-content-container {
    flex: 1;
    padding: 20px;
    max-width: 100%;
}

@media only screen and (max-width: 767px) {
    .rkit-tab-container.vertical {
        flex-direction: column;
    }
}

@keyframes fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
@property --progress {
    syntax: '<integer>';
    inherits: true;
    initial-value: 0;
}

@keyframes load {
    to {
        --progress: var(--value)
    }
}

.rkit-progress {
    --value: 17;
    --progress-color: #00cea6;
    --secondary-progress-color: #e3efff;
}

.progress-container {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.rkit-progress-animation,
.rkit-progress-animation::after {
    animation: load;
    animation-fill-mode: forwards;
    animation-duration: calc(var(--animation-duration) * 1ms);
    animation-timing-function: linear;
    animation-delay: 500ms;
}



.circular-progress {
    position: relative;
    width: 12rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: conic-gradient(var(--progress-color) calc(var(--progress) * 3.6deg), var(--secondary-progress-color) 0deg);
    display: flex;
    justify-content: center;
    align-items: center;
}

    .circular-progress .progress-value {
        background-color: #d6d6d6;
        position: absolute;
        width: 85%;
        aspect-ratio: 1/1;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        flex-direction: column-reverse;
    }

.percentage-label::after {
    counter-reset: percentage var(--progress);
    content: counter(percentage) '%';
}

.circular-progress .progress-value::before {
    content: var(--title);
}


.progress-bar {
    position: relative;
    width: 100%;
    height: 10px;
    background-color: var(--secondary-progress-color);
    display: flex;
    border-radius: 50px;
}

    .progress-bar .progress-value {
        height: 100%;
        width: calc(var(--progress) * 1%);
        background-color: var(--progress-color);
        position: relative;
        border-radius: 50px;
    }

    .progress-bar.percentage-label::after {
        display: inline-block;
        position: absolute;
        left: calc(var(--progress) * 1% - 2rem)
    }

.half-circular-progress {
    position: relative;
    width: 12rem;
    aspect-ratio: 2/1;
    border-radius: 50% / 100% 100% 0 0;
    background: conic-gradient(from 0.75turn at 50% 100%, var(--progress-color) calc(var(--progress) * 3.6deg / 2), var(--secondary-progress-color) 0deg);
    display: flex;
    justify-content: center;
    align-items: center;
}

    .half-circular-progress .progress-value {
        background-color: #d6d6d6;
        position: absolute;
        width: 75%;
        aspect-ratio: 2/1;
        border-radius: 50% / 100% 100% 0 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        flex-direction: column-reverse;
        bottom: 0;
    }

        .half-circular-progress .progress-value::before {
            content: var(--title);
        }

.prefix-postfix {
    width: 12rem;
    display: flex;
    justify-content: space-between
}

.progress-title {
    padding-block: 0.5rem;
    display: block;
}
.counter-suffix {
    white-space: pre-wrap;
}

.rkit-counter .counter {
    display: flex;
    font-size: 69px;
    font-weight: 600;
    line-height: 1;
    justify-content: center;
}

.rkit-counter {
    display: flex;
}

    .rkit-counter .counter-container {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
.rkit-countdown-widget {
    background-color: var(--section-background, transparent);
    color: var(--text-color, #000);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    font-family: 'Digital-7', sans-serif;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.countdown-title-wrapper {
    margin-bottom: -20px;
}

.rkit-countdown-widget .countdown-title {
    color: var(--title-color, #000);
    /* font-size: 2em;m */
}


.countdown_contain {
    display: flex;
    flex-wrap: wrap;
}


.rkit-countdown-widget .countdown-section {
    background-color: var(--section-background, transparent);
    padding: 15px 10px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
    text-align: center;
}

.rkit-countdown-widget .countdown-section-row {
    background-color: var(--section-background, transparent);
    padding: 15px 10px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5px;
}

.rkit-countdown-widget .countdown-days,
.rkit-countdown-widget .countdown-hours,
.rkit-countdown-widget .countdown-minutes,
.rkit-countdown-widget .countdown-seconds {
    font-size: var(--font-size, 3em);
    color: #000;
    display: block;
}

.rkit-countdown-widget .countdown-label {
    font-size: 1em;
    color: #00CEA6;
    display: block;
    margin-top: 5px;
}

.hidden {
    display: none;
}

@media (max-width: 600px) {
    #countdown {
        flex-wrap: wrap;
        justify-content: center;
    }
}

.rkit-pricelisttable-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    position: relative;
    padding: 0px 0px 0px 0px;
    align-items: center;
    justify-content: center;
    border-radius: 5px 5px 5px 5px;
    overflow: hidden;
    background-color: #EEEEEE;
}

.icon-list-button-pt {
    color: #ffffff;
}

    .icon-list-button-pt i:hover {
        color: rgb(255, 255, 255);
    }


.rkit-pricelisttable-item {
    width: calc(50% - 10px); /* Agar item memiliki lebar yang sama dan muat di satu baris */
}


.rkit-pricelisttable-item {
    /* flex: 1 1 calc(100% - 20px); 3 items per row with 20px gap */
    flex: 1 1 auto;
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
    border-radius: 0px;
    overflow: hidden;
    background: transparent;
    display: flex;
    flex-direction: column;
    position: relative; /* Ensure positioning for ribbon */
}

.rkit-pricelisttable-item-inner {
    background-color: transparent;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    /* overflow: hidden; */
}

.rkit-pricelisttable-item-inner-price {
    background-color: transparent;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.rkit-pricelisttable-item-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.rkit-pricelisttable-item-title {
    /* font-size: 1.5em; */
    color: #000000;
    /* font-weight: 800;
    font-style: normal;   */
    text-align: center;
    margin: 0px;
}

.rkit-pricelisttable-item-sub-heading {
    color: #000000;
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    text-align: center;
}


.rkit-pricelisttable-item-footer {
    justify-content: center;
    text-align: center;
    color: #9e9d9d;
    font-size: 12px;
    padding: 10px 10px 10px 10px;
}


.rkit-pricelisttable-item-subheading {
    /* font-size: 1.5em; */
    color: #626665;
    font-size: 28px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.5px;
    word-spacing: 15px;
    text-align: center;
    margin-bottom: 8px;
    padding-bottom: 20px;
}

.rkit-pricelisttable-item-price {
    /* font-size: 1.5em;
    margin-bottom: 0px; */
    /* font-family: "Verdana", Sans-serif; */
    font-size: 41px;
    letter-spacing: -1.1px;
    text-align: center;
    margin-bottom: 0px;
}


.rkit-pricelisttable-item-sale-price {
    /* font-family: "Verdana", Sans-serif; */
    font-size: 24px;
    letter-spacing: -1.1px;
    text-align: center;
    margin-bottom: -15px;
    text-decoration: line-through;
    color: #818e8e;
}

.rkit-pricelisttable-item-currency {
    font-size: 18px;
    letter-spacing: -1.1px;
    text-align: center;
    margin-bottom: 0px;
}

.rkit-pricelisttable-item-price-section-row {
    display: flex;
    align-items: center;
}

.price-container-row {
    display: flex;
    flex-direction: column;
}

.sale-price-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-top: 0px;
    margin-bottom: -30px;
}

.sale-price-container-inline {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0px;
}

.price-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.rkit-pricelisttable-item-currency,
.rkit-pricelisttable-item-price {
    margin: 0;
    padding: 0 0px;
}



.rkit-pricelisttable-item-sub-title {
    color: #777;
    margin-bottom: 15px;
}

.rkit-pricelisttable-item-sub-title-center {
    margin-left: 5px;
    letter-spacing: -1.1px;
}

.rkit-pricelisttable-item-description {
    display: flex;
    align-items: center;
    flex-direction: column;
    flex-grow: 1;
    color: #000000;
    padding: 16px 32px 16px 32px;
}

.rkit-pricelisttable-item-button .button-element-price-table {
    display: flex;
    align-self: center;
    margin-top: auto;
    background-color: #00cea6;
    color: #ffffff;
    max-width: none;
    padding: 16px 32px 16px 32px;
    justify-content: center;
    gap: 10px;
    /* box-shadow: 0px 6px 10px 5px rgba(0, 0, 0, 0.20)  ; */
}

.rkit-pricelisttable-item-button {
    display: flex;
}


.currency-option {
    display: flex;
    flex-direction: row;
}

.period-option {
    display: flex;
}


.rkit-pricelisttable-item-description-icon {
    color: #56d4c4;
}

.rkit-pricelisttable-item-button-icon {
    color: #ffff;
}

.rkit-pricelisttable-item-title-section {
    background-color: transparent;
    display: flex;
    flex-direction: column;
    padding: 15px 32px 16px 32px;
}

.rkit-pricelisttable-item-price-section {
    display: flex;
    flex-direction: column;
    background-color: transparent;
    padding: 16px 32px 16px 32px;
    justify-content: center;
    /* box-shadow: 0px 4px 20px 1px rgba(0, 0, 0, 0.20)   */
}

.icon-list-feature-pt {
    display: flex;
    align-items: center;
    align-self: center;
    justify-content: center;
    line-height: 0px !important;
    margin-top: 12px;
    margin-bottom: 12px;
}

.icon-list-button-pt {
    display: flex;
    align-items: center;
    align-self: center;
    justify-content: center;
    line-height: 0px !important;
}


.no-icon-hidden {
    list-style-type: none;
}

.rkit-wrap {
    width: 100%;
    height: 188px;
    position: absolute;
    top: -8px;
    left: 0px;
    overflow: hidden;
}


    .rkit-wrap .content {
        position: relative;
        color: #fff;
    }

    .rkit-wrap:before, .wrap:after {
        content: "";
        position: absolute;
    }

    .rkit-wrap:before {
        width: 40px;
        height: 8px;
        right: 100px;
        background: #4D6530;
        border-radius: 8px 8px 0px 0px;
    }

    .rkit-wrap:after {
        width: 8px;
        height: 40px;
        right: 0px;
        top: 100px;
        background: #4D6530;
        border-radius: 0px 8px 8px 0px;
    }


.rkit-ribbon-right {
    width: 200px;
    height: 35px;
    line-height: 33px;
    position: absolute;
    top: 30px;
    right: -38px;
    z-index: 0;
    overflow: hidden;
    -webkit-transform: rotate(95deg);
    transform: rotate(42deg);
    background: #95a5a1;
    text-align: center;
}

/* left ribbon */

.rkit-ribbon-left {
    width: 200px;
    height: 35px;
    line-height: 33px;
    position: absolute;
    top: 30px;
    left: -38px;
    z-index: 0;
    overflow: hidden;
    transform: rotate(315deg);
    background: #95a5a1;
    text-align: center;
}



.rkit-pricelisttable-ribbon {
    position: absolute;
    z-index: 1;
    top: 0;
    left: auto;
    right: -10px;
    transform: rotate(90deg);
    width: 150px;
    overflow: hidden;
    height: 150px;
}

    .rkit-pricelisttable-ribbon.rkit-pricelisttable-ribbon__left {
        transform: rotate(0);
        left: 0;
        right: auto;
    }

    .rkit-pricelisttable-ribbon.rkit-pricelisttable-ribbon__right {
        transform: rotate(90deg);
        left: auto;
        right: 0;
    }

.rkit-pricelisttable-ribbon__inner {
    text-align: center;
    left: 0;
    width: 200%;
    transform: translateY(-50%) translateX(-50%) translateX(35px) rotate(-45deg);
    margin-top: 35px;
    font-size: 13px;
    background: #00cea6;
    color: #000;
    line-height: 2;
    font-weight: 700;
    padding: 10px;
}

/* end ribbon */

.rkit-item-list-desc {
    display: flex;
    flex-direction: row;
    padding: 16px 32px;
    justify-content: center;
    text-align: center;
    width: 100%;
}


.divider_desc:not(:last-child) {
    display: flex;
    flex-direction: row;
    gap: 5px;
    border-bottom: 1px;
    border-bottom-style: solid;
    border-color: #726b6b;
}

.divider_desc.noline {
    border-width: 0px;
}


.divider_desc:last-child {
    display: flex;
    flex-direction: row;
    gap: 5px;
    border-bottom: 0px;
    list-style: none;
}

@media (max-width: 1200px) {
    /* .rkit-pricelisttable-item {
            flex: 1 1 calc(33.333% - 20px); 
        } */
    .rkit-pricelisttable-container {
        flex: 1 1 calc(33.333% - 20px);
    }
}

@media (max-width: 768px) {
    .rkit-pricelisttable-container {
        flex: 1 1 calc(50% - 20px);
    }
}

@media (max-width: 576px) {
    .rkit-pricelisttable-container {
        flex: 1 1 100%;
    }
}

.rkit-advanced-heading p {
    position: relative;
}


.rkit-advanced-heading {
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}


    .rkit-advanced-heading p {
        margin-bottom: 0;
    }

.combined-text {
    border-radius: 5px;
    gap: 10px;
    justify-content: center;
}


.rkit-trp-text {
    font-weight: bold;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

    .rkit-trp-text .headline_text {
        -webkit-background-clip: text;
        background-clip: text;
        background-color: #00cea6;
        z-index: 1;
    }

.std-text {
    background-color: black;
}


.bg-headline {
    background-color: transparent;
    display: inline-flex;
}

.bg-std {
    background-color: transparent;
    display: inline-flex;
}


/* Style untuk semua heading */


@media only screen and (max-width: 1024px) {
    .combined-text {
        gap: 20px;
    }
}


@media only screen and (max-width: 768px) {
    .combined-text {
        font-size: 2rem;
    }
}


@media only screen and (max-width: 480px) {
    .combined-text {
        font-size: 1rem;
    }

    .before_text {
        font-size: 1rem;
    }

    .center_text {
        font-size: 1rem;
    }

    .after_text {
        font-size: 1rem;
    }

    .headline_text {
        font-size: 1rem;
        display: inline-flex;
    }

    .wrap_text {
        font-size: 1rem;
    }
}
.con-wrap {
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.img-comp-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.img-comp-img {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.img-comp-container img {
    max-width: none !important;
}

.img-comp-img img {
    display: block;
}

.img-comp-slider {
    position: absolute;
    z-index: 9;
    cursor: ew-resize;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: none;
    box-shadow: 0 0 0 2px #ffffff;
}

    /* ini testing */
    .img-comp-slider::before,
    .img-comp-slider::after {
        content: '';
        position: absolute;
        width: 1500px;
        height: 2px;
        background-color: white;
        left: 0;
        z-index: 1;
        transform: rotate(90deg)
    }

    .img-comp-slider::before {
        top: -752px;
        left: -730px
    }

    .img-comp-slider::after {
        bottom: -752px;
        left: -730px;
    }



    /* vertical */
    .img-comp-slider.vertical::before,
    .img-comp-slider.vertical::after {
        content: '';
        position: absolute;
        width: 1800px;
        height: 2px;
        background-color: white;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
    }

    .img-comp-slider.vertical::before {
        left: -1800px;
    }

    .img-comp-slider.vertical::after {
        left: 40px;
    }





    /* ini tessting */
    .img-comp-slider i {
        font-size: 14px;
        color: #ffffff;
        padding: 2px;
    }

    .img-comp-slider.vertical {
        position: absolute;
        z-index: 9;
        cursor: ns-resize;
        width: 40px;
        height: 40px;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        transform: translatex(-50%, -50%);
        box-shadow: 0 0 0 2px #ffffff;
    }

        .img-comp-slider.vertical i {
            font-size: 14px;
            color: #ffffff;
            padding: 2px;
        }


/* caption css style */
/* caption left */
.caption-bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
}

.caption-top-left {
    position: absolute;
    top: 8px;
    left: 16px;
}

.caption-center-left {
    position: absolute;
    top: 50%;
    left: 16px;
}
/* caption left */

/* caption right */
.caption-top-right {
    position: absolute;
    top: 8px;
    right: 16px;
}

.caption-bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
}

.caption-center-right {
    position: absolute;
    top: 50%;
    right: 16px;
}
/* caption right */


/* filter image */
.filter-blur img {
    filter: blur(5px);
}

.filter-greyscale img {
    filter: grayscale(100%);
}

.filter-contrast img {
    filter: contrast(150%);
}

.filter-brightness img {
    filter: brightness(120%);
}
.rkit-swiper-cl {
    position: relative;
    overflow: hidden;
}

.rkit-clientslogo {
    background-color: transparent;
    overflow: hidden;
}

.rkit-clientslogo-slider {
    padding: 0px 20px 0px 20px;
}

.rkit-clientcaraosel-pagination {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    padding: 1rem;
    justify-content: center;
    align-items: center;
}


/* css image */

/* .image-container image-container {
   overflow: hidden ; 
    height: auto;
    max-width: 100%;
    max-height: 100%;
  } */

.image-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    aspect-ratio: 1/1;
}

.clientslogo-image {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 100%;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.clientslogo-image-full {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    overflow: hidden;
}

    .clientslogo-image-full img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        aspect-ratio: 1/1;
    }

/* image hover */
.image-hover {
    opacity: 0;
    display: relative;
    align-items: center;
    justify-content: center;
    /* color: #000000; */
}


.fade_in .image-hover {
    transform: scale(1);
}

.fade_in:hover .image-hover {
    opacity: 1;
    transition: opacity 0.3s ease;
    -webkit-transform: scale(1.01);
    -ms-transform: scale(1.01);
    transform: scale(1.01);
}

.fade_in:hover .image-default {
    opacity: 0;
}



.horizontal .image-hover {
    transform: translateX(100%);
}

.horizontal:hover .image-hover {
    opacity: 1;
    transform: translateX(0);
}

.horizontal:hover .image-default {
    opacity: 0;
    transform: translateX(-100%);
}

.vertical .image-hover {
    transform: translateY(100%);
}

.vertical:hover .image-hover {
    opacity: 1;
    transform: translateY(0);
}

.vertical:hover .image-default {
    opacity: 0;
    transform: translateY(-100%);
}




/*  text hover */
.hover-content {
    display: flex;
    flex-direction: column;
    justify-content: start;
    max-width: 100%;
    height: 100%;
    padding: 0px;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 0px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    text-align: center;
    overflow: hidden;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.fade_in .hover-conten {
    transform: none;
}

.fade_in:hover .hover-conten {
    opacity: 1;
    transition: opacity 0.3s ease;
    transform: translateX(0);
}


.horizontal .hover-conten {
    transform: translateX(100%);
}

.horizontal:hover .hover-conten {
    opacity: 1;
    transform: translateX(0);
}

.vertical .hover-conten {
    transform: translateY(100%);
}

.vertical:hover .hover-conten {
    opacity: 1;
    transform: translateY(0);
}


.hover-title {
    font-size: 16px;
    margin: 10px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease-in-out;
}

.hover-description {
    font-size: 11px;
    margin: 10px 10px 10px 10px;
    color: #ddd;
    line-height: 1.5;
    transition: color 0.3s ease-in-out;
}

/* end css image and hover */

/* navigation css */

.rkit-swiper-cl-button-prev {
    left: 0;
    top: 50%;
}

.rkit-swiper-cl-button-next {
    right: 0;
    top: 50%;
}

.rkit-swiper-cl-button-next,
.rkit-swiper-cl-button-prev {
    position: absolute;
    z-index: 999;
    cursor: pointer;
    width: 45px;
    height: 45px;
    background-color: #33e4c0;
    transform: translateY(-50%);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
    border-radius: 0px;
    --swiper-navigation-size: 44px;
    --swiper-navigation-top-offset: 50%;
    --swiper-navigation-sides-offset: 10px;
}


/* dots and overlay style css */
.rkit-clientcaraosel-bullet {
    width: 8px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: #aaaaaa;
    transition: all 0.5s ease;
}

.rkit-clientcaraosel-bullet-active {
    background-color: #161616;
}

.rkit-clientcaraosel-bullet-clickable .rkit-clientcaraosel-bullet {
    cursor: pointer;
}

.card-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

    .card-body::before {
        content: "";
        width: 100%;
        height: 100%;
        display: block;
        z-index: -1;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
    }

.card-title {
    margin: 0;
}

    .card-title a {
        text-decoration: none;
        color: #161616;
    }

.card-heading {
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
}

.rkit-swiper-cl-button-prev.swiper-button-disabled,
.rkit-swiper-cl-button-next.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none;
}

.rkit-clientslogo .card-button a {
    background-color: #33e4c0;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    color: white;
    transition: all 0.5s;
    border-radius: 0px;
}

.rkit-clientslogo .card-button {
    display: flex;
    justify-content: start;
}

    .rkit-clientslogo .card-button a .button-icon {
        transition: color 0.5s;
    }

.rkit-clientslogo.overlay {
    position: relative;
}

    .rkit-clientslogo.overlay .card-body {
        opacity: 0;
        transform: scaleY(0);
        transform-origin: bottom;
        transition: all 0.5s;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        justify-content: center;
    }

    .rkit-clientslogo.overlay .card-button {
        justify-content: center;
    }

    .rkit-clientslogo.overlay:hover .card-body {
        opacity: 1;
        transform: scaleY(1);
    }

.rkit-clientslogo-slider .swiper-slide {
    overflow: unset;
}

.card-button.fullwidth a {
    width: 100%;
}
.popular-posts {
    padding: 0px 0px 0px 0px;
}

.rkit-item-postlist {
    display: flex;
    /* align-items: flex-start; */
    align-items: stretch;
    gap: 10px;
    padding: 10px 10px 10px 10px;
}

.rkit-item-thumbnail {
    flex: 0 0 auto;
    display: flex;
    height: 100%;
    /* align-items: center;  
    justify-content: center;   */
}

    .rkit-item-thumbnail img {
        max-height: 100%;
        width: 125px;
    }

.rkit-item-content {
    flex-grow: 1; /* Konten memenuhi sisa ruang */
}

.rkit-content-reverse {
    justify-items: end;
}

.rkit-content-normal {
    justify-items: start;
}


.rkit-title-postlist {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.rkit-metadata-postlist-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.rkit-metadata-item-postlist {
    display: flex;
    align-items: center;
    gap: 5px;
}

.content_descripson {
    /* display: flex; */
    color: #666;
}

li {
    list-style-type: none;
    margin-bottom: 2px;
}


a.rkit-readmore-postlist-btn {
    background-color: #b0e7e0;
    border-radius: 5px;
    text-align: center;
    padding: 12px 20px 12px 20px;
    font-size: 15px;
    color: white;
    transition: all 0.5s;
    border: none;
    /* display: flex; */
    align-items: left;
    gap: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 10px 20px;
}

    a.rkit-readmore-postlist-btn:hover {
        background-color: #33e4c0;
        color: black;
    }

.rkit-readmore-postlist-div {
    display: flex;
}

.rkit-icon-readmore {
    font-size: 16px;
    margin-right: 8px;
    display: inline-block;
}

.div_test {
    border-bottom: 1px;
    border-bottom-style: solid;
    border-color: #726b6b;
}

.divider_line:first-child {
    padding-block-start: 10px !important;
}


.divider_line:not(:last-child) {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #C5B9B9;
}

.divider_line:last-child {
    border-bottom: 0px;
    list-style: none;
}




/* Default styles (untuk layar desktop dan tablet) sudah diatur seperti sebelumnya */

@media (max-width: 926px) {
    .rkit-item-postlist {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .rkit-item-thumbnail {
        margin-bottom: 15px;
    }

        .rkit-item-thumbnail img {
            max-width: 100%;
            height: auto;
        }

    .rkit-item-content {
        flex-grow: 0;
        width: 100%;
    }

    .rkit-metadata-postlist-row {
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
    }

    .rkit-metadata-item-postlist {
        justify-content: center;
    }

    .rkit-title-postlist {
        font-size: 16px;
    }

    .content_descripson {
        /* display: flex; */
        font-size: 14px;
    }

    li {
        margin-bottom: 2px;
    }
}

.rkit-pricebox-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    position: relative;
    padding: 0px 0px 0px 0px;
    /* ox-shadowb: 0px 6px 10px 5px rgba(0, 0, 0, 0.20)  ; */
}

.rkit-pricebox-item {
    /* flex: 1 1 calc(100% - 20px); 3 items per row with 20px gap */
    flex: 1 1 auto;
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
    border-radius: 0px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
    position: relative; /* Ensure positioning for ribbon */
}

.rkit-pricebox-item-inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    overflow: hidden;
}

.rkit-pricebox-item-inner-price {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.image_pricing_box {
    max-height: 100%;
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    object-fit: contain;
    padding: 16px 32px 16px 32px;
}

.image_load_box img {
    width: 70%;
    display: flex;
    justify-content: center;
    object-fit: contain;
}


.rkit-pricebox-item-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.rkit-pricebox-item-title {
    /* font-size: 1.5em; */
    color: #000000;
    font-size: 24px;
    font-weight: 800;
    font-style: normal;
    text-align: left;
    margin: 0px;
}

.rkit-pricebox-item-sub-heading {
    color: #383838;
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    text-align: left;
}


.rkit-pricebox-item-footer {
    color: #9e9d9d;
    font-size: 12px;
    padding: 16px 32px 16px 32px;
}

.rkit-pricebox-item-subheading {
    /* font-size: 1.5em; */
    color: #626665;
    font-size: 24px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.5px;
    word-spacing: 15px;
    text-align: center;
    margin-bottom: 8px;
    padding-bottom: 20px;
}

.rkit-pricebox-item-price {
    /* font-size: 1.5em;
    margin-bottom: 0px; */

    font-family: "Verdana", Sans-serif;
    font-size: 24px;
    letter-spacing: -1.1px;
    text-align: center;
    margin-bottom: 0px;
}


.rkit-pricebox-item-sale-price-pricebox {
    font-family: "Verdana", Sans-serif;
    font-size: 14px;
    letter-spacing: -1.1px;
    text-align: center;
    margin-bottom: 0px;
    text-decoration: line-through;
    color: #818e8e;
}

.rkit-pricebox-item-currency {
    font-family: "Verdana", Sans-serif;
    font-size: 14px;
    letter-spacing: -1.1px;
    text-align: center;
    margin-bottom: 0px;
}

.rkit-pricebox-item-price-section-row {
    display: flex;
    align-items: center;
}

.price-container-row {
    display: flex;
    flex-direction: column;
}

.sale-price-pricebox-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-top: 0px;
    margin-bottom: -30px;
}

.sale-price-pricebox-container-inline {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0px;
}

.price-container {
    display: flex;
    flex-direction: row;
    /* align-items: flex-start;  */
    justify-content: center;
}

.rkit-pricebox-item-currency,
.rkit-pricebox-item-price {
    margin: 0;
    padding: 0 0px;
}



.rkit-pricebox-item-sub-title {
    color: #777;
    margin-bottom: 15px;
}

.rkit-pricebox-item-sub-title-center {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0px;
    padding: 0px;
}

.rkit-pricebox-item-description {
    display: flex;
    flex-direction: column;
    color: #000000;
    font-family: "Amiko", Sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 27px;
    letter-spacing: -0.1px;
    word-spacing: 2px;
    gap: 18px;
    padding: 16px 32px 16px 32px;
}

.rkit-pricebox-item-button .new-rkit-elementor-button {
    display: inline-flex; /* Gunakan flexbox untuk centering */
    align-items: center; /* Vertical alignment */
    justify-content: center; /* Horizontal alignment */
    text-decoration: none; /* Hilangkan underline */
    padding: 10px 20px;
    align-self: flex-start;
    margin-top: auto;
    background-color: #000000;
    color: white;
    max-width: none;
    padding: 16px 32px 16px 32px;
    /* box-shadow: 0px 6px 10px 5px rgba(0, 0, 0, 0.20)  ; */
}

.rkit-pricebox-item-button.button-full-size .new-rkit-elementor-button {
    width: 100%;
}

.currency-option {
    display: flex;
    flex-direction: row;
}


/* .rkit-pricebox-item-button-full .new-rkit-elementor-button {
    align-self: flex-start; 
    background-color:  #00cea6;
    max-width: none;
    padding : 16px 32px 16px 32px;
    width: 100%;
    
    box-shadow: 0px 6px 10px 5px rgba(0, 0, 0, 0.20)  ;
    /* color :#00cea6;  */
/* }  */

.rkit-pricebox-item-description-icon {
    color: #56d4c4;
}

.rkit-pricebox-item-button-icon {
    color: #56d4c4;
}

.rkit-pricebox-item-title-section {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    padding: 16px 32px 16px 32px;
}

.rkit-pricebox-item-price-section {
    display: flex;
    flex-direction: column;
    padding: 16px 32px 16px 32px;
    /* box-shadow: 0px 4px 20px 1px rgba(0, 0, 0, 0.20)   */
}



.no-icon-hidden {
    list-style-type: none;
}

.rkit-wrap {
    width: 100%;
    height: 188px;
    position: absolute;
    top: -8px;
    left: 0px;
    overflow: hidden;
}

.rkit-pricebox-ribbon {
    position: absolute;
    z-index: 1;
    top: 0;
    left: auto;
    right: -10px;
    transform: rotate(90deg);
    width: 150px;
    overflow: hidden;
    height: 150px;
}

    .rkit-pricebox-ribbon.rkit-pricebox-ribbon__left {
        transform: rotate(0);
        left: 0;
        right: auto;
    }

    .rkit-pricebox-ribbon.rkit-pricebox-ribbon__right {
        transform: rotate(90deg);
        left: auto;
        right: 0;
    }

.rkit-pricebox-ribbon__inner {
    text-align: center;
    left: 0;
    width: 200%;
    transform: translateY(-50%) translateX(-50%) translateX(35px) rotate(-45deg);
    margin-top: 35px;
    font-size: 13px;
    background: #000000;
    color: #ffffff;
    line-height: 2;
    font-weight: 700;
    padding: 10px;
    /* box-shadow: 0px 4px 20px 1px rgba(0, 0, 0, 0.20)   */
}

/* end ribbon */





.divider_desc:not(:last-child) {
    display: flex;
    flex-direction: row;
    gap: 5px;
    border-bottom: 1px;
    border-bottom-style: solid;
    border-color: #726b6b;
}

.divider_desc.noline {
    border-bottom: 0px;
}


.divider_desc:last-child {
    display: flex;
    flex-direction: row;
    gap: 5px;
    border-bottom: 0px;
    list-style: none;
}


@media (max-width: 1200px) {
    .rkit-pricebox-item {
        flex: 1 1 calc(33.333% - 20px);
    }
}

@media (max-width: 768px) {
    .rkit-pricebox-item {
        flex: 1 1 calc(50% - 20px);
    }
}

@media (max-width: 576px) {
    .rkit-pricebox-item {
        flex: 1 1 100%;
    }
}
.rkit-image_box-card {
    display: flex;
    flex-direction: column;
    background-color: transparent;
    transition: all 0.3s;
    overflow: hidden;
    /* padding: 16px 32px 16px 32px; */
}

    .rkit-image_box-card.rkit-direction {
        flex-direction: column;
    }


.rkit-icon-top {
    font-size: 45px;
    width: 45px;
    height: 45px;
}

.rkit-icon-readmore {
    font-size: 25px;
    width: 25px;
    height: 25px;
}

.rkit-container-top {
    display: flex;
    flex-direction: row;
    padding: 0px;
}

.rkit-container-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.left {
    width: 45%;
    text-align: left;
}

.right {
    position: relative;
    text-align: right;
    /* width: 45%;     */
}



.rkit-image_box_det {
    width: 100%;
    display: flex;
    justify-content: center;
}


.rkit-image_box__detail {
    height: 100%;
    width: 100%;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: center;
    overflow: hidden;
}

.image-box-item-desc {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.rkit-image_box__detail h4 {
    margin-bottom: 0;
}

.rkit-image_box__img {
    display: flex;
    justify-content: center;
    object-fit: contain;
    padding: 0px 0px 0px 0px;
}

.rkit-image_box__img {
    overflow: hidden;
}

    .rkit-image_box__img img {
        width: 100%;
        aspect-ratio: 3/2;
        object-fit: cover;
        overflow: hidden;
    }

.rkit-image_box__description {
    width: 100%;
    margin-bottom: 0.5rem;
    /* padding : 16px 32px 16px 32px; */
    text-align: center;
}

.rkit-image_box__title {
    width: 100%;
    font-weight: 500;
    margin-bottom: 0.5rem;
    /* padding : 16px 32px 16px 32px; */
    text-align: center;
}



/* css style float card */
.rkit-image_box_det {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.float-card {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.float-detail {
    position: relative;
    background-color: #ffffff;
    width: 90%;
    padding: 1rem;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1px;
    border-radius: 0px;
    margin-top: -75px;
    /* box-shadow: 0px 4px 24px rgba(8, 8, 8, 0.479); */
    /* border-style: solid;
      border-color:#33e4c16b; */
}

.float-detail {
    position: relative;
    overflow: hidden;
    max-height: 300px;
    transition: max-height 0.5s ease, opacity 0.5s ease;
}

.float-card-desc-ext {
    opacity: 0;
    max-height: 0;
    transition: opacity 0.5s ease, max-height 0.5s ease;
}

/* Menampilkan deskripsi dan tombol saat hover */
.rkit-image_box-card:hover .float-card-desc-ext {
    opacity: 1;
    max-height: 200px;
}

.float-card:hover {
    max-height: 300px;
}





/* css style overlay */
/* .rkit-image_box__overlay .rkit-image_box_det {
    visibility: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: all;
    color: white;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding : 16px 32px 16px 32px; 
    z-index: 2;
}
 
.rkit-image_box__overlay:hover .rkit-image_box_det .bg_overlay{
    visibility: visible;
    animation: overlay_animation_in 0.3s ease-in;
}

.rkit-image_box__overlay:not(:hover) .rkit-image_box_det .bg_overlay{
    transform: scaleY(0);    
    opacity: 0;
    animation: overlay_animation_out 0.3s ease-out;
} */
.rkit-image_box__overlay {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

    .rkit-image_box__overlay .rkit-image_box_det {
        visibility: hidden;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        color: white;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 16px 32px;
        opacity: 0;
        transition: opacity 0.4s ease, visibility 0.4s ease;
        z-index: 2;
    }

.bg_overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #00CEA6;
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
    z-index: 1;
}

.rkit-image_box__overlay:hover .rkit-image_box_det {
    visibility: visible;
    opacity: 1;
}

.rkit-image_box__overlay:hover .bg_overlay {
    visibility: visible;
    transform: scaleY(1);
    opacity: 0.2;
}

.rkit-image_box__overlay:not(:hover) .bg_overlay {
    transform: scaleY(0);
    opacity: 0;
    visibility: hidden;
}




/* overlay fade in */

.rkit-image_box_detaa {
    max-width: 100%;
    height: 100%;
    padding: 0px;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 0px;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);  */
    text-align: center;
    overflow: hidden;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.fade_in .rkit-image_box_detaa {
    transform: none;
}

.fade_in:hover .rkit-image_box_detaa {
    opacity: 1;
    transition: opacity 0.3s ease;
    transform: translateX(0);
}


/* new default css */

.rkit-image_box_det {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.def-card {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.def-detail {
    position: relative;
    background-color: #ffffff;
    width: 90%;
    padding: 1rem;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1px;
    border-radius: 0px;
    margin-top: -75px;
}

.def-detail {
    position: relative;
    overflow: hidden;
    max-height: 100%;
    transition: max-height 0.5s ease, opacity 0.5s ease;
}

.def-card-desc-ext {
    opacity: 0;
    max-height: 0;
    transition: opacity 0.5s ease, max-height 0.5s ease;
}

/* Menampilkan deskripsi dan tombol saat hover */
.rkit-image_box-card .def-card-desc-ext {
    opacity: 1;
    max-height: 200px;
}





/* centered image css */
.rkit-image_box__centered .rkit-image_box-card {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.rkit-image_box__centered .rkit-image_box__img {
    border-radius: 0%;
    overflow: hidden;
    width: 50%;
    min-width: 180px;
}

    .rkit-image_box__centered .rkit-image_box__img img {
        aspect-ratio: 1/1;
    }

.rkit-image_box__centered .rkit-image_box__detail {
    text-align: center;
    justify-content: center;
    align-items: center;
}





a.rkit-readmore-imagebox-btn {
    display: inline-flex;
    align-items: center; /* Posisikan ikon dan teks vertikal sejajar */
    justify-content: center;
    background-color: #00CEA6;
    border-radius: 0px;
    padding: 12px 20px 12px 20px;
    font-size: 15px;
    color: white;
    transition: all 0.5s;
    border: none;
    gap: 0.5rem;
}

    a.rkit-readmore-imagebox-btn:hover {
        background-color: #33e4c0;
        color: black;
    }


.rkit-readmore-imagebox-div {
    display: flex;
    justify-content: center;
}

/*  */


a.rkit-button-top {
    background-color: #00CEA6;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 15px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
    border: 0px;
}


    a.rkit-button-top:hover {
        background-color: #33e4c0;
        color: black;
    }





@keyframes overlay_animation_in {
    from {
        opacity: 0;
        transform: scaleY(0);
        transform-origin: center;
    }

    to {
        opacity: 1;
        transform: scaleY(1);
        transform-origin: center;
    }
}

@keyframes overlay_animation_out {
    from {
        opacity: 1;
        transform: scaleY(1);
        transform-origin: center;
    }

    to {
        opacity: 0;
        transform: scaleY(0);
        transform-origin: center;
    }
}

.fade-in {
    animation: overlay_animation_in 0.5s ease-in-out forwards; /* Animasi fade in */
}

.fade-out {
    animation: overlay_animation_out 0.5s ease-in-out forwards; /* Animasi fade out */
}
.container-image-accordion {
    display: flex;
    width: auto;
    overflow: hidden;
    position: relative;
}

.gallery-wrap {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 70vh;
    overflow: hidden;
}

.item-ia {
    flex: 1;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: none;
    transition: flex 0.8s ease;
    overflow: hidden;
    &:hover

{
    flex: 5;
}

}

.item-text {
    opacity: 0;
    display: flex;
    overflow: hidden;
}

.text-title {
    z-index: 2;
    text-align: center;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    margin: 10px 10px 10px 10px;
    transform: translateY(0);
}

.text-description {
    z-index: 2;
    text-align: center;
    color: #ddd;
    margin: 10px 10px;
    transform: translateY(20px); /* Awal: teks berada di bawah */
    opacity: 0; /* Awal: transparan */
    animation: fadeInUpText 0.8s ease forwards; /* Jalankan animasi */
}

@keyframes fadeInUpText {
    0% {
        transform: translateY(20px); /* Mulai dari bawah */
        opacity: 0; /* Transparan */
    }

    100% {
        transform: translateY(0); /* Normal */
        opacity: 1; /* Sepenuhnya terlihat */
    }
}

/* button */

.icon-button {
    color: red;
}

    .icon-button i:hover {
        color: rgb(255, 255, 255);
    }

.rkit-image-accordion-item-button {
    display: flex;
    justify-content: center;
}

.button-element-image-accordion {
    position: relative;
    z-index: 1;
    display: flex;
    align-self: center;
    align-items: center;
    margin-top: 30px;
    width: auto;
    background-color: #000000;
    color: #ffffff;
    max-width: none;
    padding: 16px 32px 16px 32px;
    justify-content: center;
    transform: translateY(0);
    overflow: hidden;
    /* box-shadow: 0px 6px 10px 5px rgba(0, 0, 0, 0.20)  ; */
}


.rkit-image-accordion-item-button-icon {
    color: #56d4c4;
}




/* hover mode */
.item-ia-hover {
    flex: 1;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: none;
    transition: flex 1s ease;
    overflow: hidden;
}

    .item-ia-hover.active {
        flex: 3;
    }

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.item-ia-hover.active .item-text {
    position: relative;
    z-index: 2;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    padding: 0px;
    overflow: hidden;
    transition-delay: 2s;
    animation: fadeIn 2s ease-in-out forwards;
}

.background-item-text {
    position: absolute;
    z-index: 1;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: #9A9191;
    opacity: 20%;
}

/* .item-ia-hover.active .item-text{
  height: 100%;
  width: 100%;
  display: flex;  
  flex-direction: column;
  justify-content: center;
  opacity: 1;  
  padding: 0px;   
  overflow: hidden;
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;  
} */



/* klik mode */
.item-ia-click {
    flex: 1;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: none;
    transition: flex 1s ease;
    overflow: hidden;
}

    .item-ia-click.active {
        flex: 3;
    }

@keyframes fadeInClick {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.item-ia-click.active .item-text {
    position: relative;
    z-index: 2;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    padding: 0px;
    overflow: hidden;
    transition-delay: 2s;
    animation: fadeIn 2s ease-in-out forwards;
}

/* .item-ia-click.active .item-text{
  height: 100%;
  width: 100%;
  display: flex;  
  flex-direction: column;
  justify-content: center;
  opacity: 1;  
  padding: 0px;     
  overflow: hidden;
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;  
} */





@media only screen and (max-width: 480px) {

    .gallery-wrap {
        flex-direction: column !important;
    }
}



.dual-button-outer-wrapper {
    display: flex;
    justify-content: center;
}

.dual-button-inner-wrapper {
    display: flex;
    flex-direction: row;
    position: relative;
    height: auto;
    background-color: transparent;
    vertical-align: middle;
    align-items: center;
    align-self: center;
    overflow: hidden;
}

    .dual-button-inner-wrapper .column {
        gap: 1px;
    }

.dual-button {
    display: flex;
    width: 180px;
    height: auto;
    float: left;
    box-sizing: border-box;
}

.dual-left {
    background-color: #333;
    border-radius: 0px;
}

.dual-right {
    background-color: #00cea6;
    border-radius: 0px;
}

.dual-text {
    font-size: 18px;
    display: flex;
    font-family: arial;
    font-weight: bold;
    text-align: center;
    justify-content: center;
    color: white;
    width: 100%;
    position: relative;
    z-index: 0;
}

.left_button {
    display: flex;
    gap: 5px;
    align-self: center;
    padding: 12px 30px 12px 30px;
}


.right_button {
    display: flex;
    gap: 5px;
    align-self: center;
    padding: 12px 30px 12px 30px;
}

.dual-button:hover {
    background-color: #4a4a4a;
}

.dual-text:hover {
    color: #ffffff;
}

.dual-right:hover {
    background-color: #5eebcf;
}




.middle-button {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    text-align: center;
    z-index: 9999;
}

.middle {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    text-align: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: white;
    position: absolute;
    font-size: 15px;
    line-height: 1px;
}

.rkit-icon-left-button {
    display: inline-flex;
    position: relative;
    align-self: center;
}

.rkit-icon-right-button {
    display: inline-flex;
    position: relative;
    align-self: center;
}

.rkit-icon-middle-button {
    display: inline-flex;
    position: relative;
    align-self: center;
}
.rkit-pricelist-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    padding: 10px;
    background-color: transparent;
}

.rkit-pricelist-wrapper-outer {
    display: flex;
    justify-content: center;
    flex-direction: row;
    margin: 0 auto;
    width: 100%;
    gap: 10px;
}

.rkit-pricelist-image {
    width: auto;
    max-width: 50%;
    height: auto;
    position: relative;
    overflow: hidden;
}

    .rkit-pricelist-image img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
    }


.rkit-pricelist-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    justify-content: center;
}

.rkit-pricelist-item-new {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.rkit-pricelist-title {
    color: #000000;
    padding-right: 20px;
    margin: 0px;
}

.rkit-pricelist-separator {
    flex-basis: 1;
    overflow: hidden;
    flex: 20;
    flex-shrink: 4;
    align-self: center;
    text-align: right;
    margin-right: 10px;
    border-bottom-style: dotted;
    border-bottom-color: black;
    border-bottom-width: 1px;
}

.rkit-pricelist-price {
    font-size: 18px;
    min-width: 60px;
    align-self: center;
    padding: 20px;
    text-wrap: wrap;
    color: #000000;
}

.rkit-pricelist-description {
    color: #000000;
    width: 80%;
    padding: 0px;
    margin-top: 12px;
}
.rkit-gallery-masonry-container {
    width: 100%;
    display: block;
    margin: 0 auto;
}

.rkit-gallery-masonry {
    column-count: 2;
    column-gap: 5px;

    @media (min-width: 768px) {
        column-count: 3;
    }

    @media (min-width: 992px) {
        column-count: 4;
    }

    @media (min-width: 1199px) {
        column-count: 5;
    }
}

.brick {
    box-sizing: border-box;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    counter-increment: brick-counter;
    overflow: hidden;
    position: relative;
}



/* Placeholder Skeleton */
/* Gambar Lazy Load */
.gallery_image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition-duration: 900ms;
    transition: transform 0.8s ease;
    left: 0;
}

/* Skeleton Placeholder */
.skeleton {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    opacity: 1;
    position: relative;
}


/* Keyframe Animasi Placeholder */
@keyframes loading {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}


/* .gallery_image  {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
 transition-duration: 900ms; 
  transition: transform 0.8s ease;  
} */

.gallery_image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition-duration: 900ms;
    transition: transform 0.6s ease;
}

.zoom:hover img {
    transform: scale(1.1);
    transition-duration: 900ms;
}



.overlay:hover {
    background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black */
    opacity: 0.6;
    transition: opacity 0.6s ease;
}


.rkit-swiper-hs {
    position: relative;
    overflow: hidden;
}

.rkit-homeslider {
    background-color: transparent;
    overflow: hidden;
}

.container-image-hsl {
    overflow: hidden;
    background-color: transparent;
}

.rkit-hs-client {
    width: 100%;
    height: 90vh;
    overflow: hidden;
}

.rkit-homeslider-slider {
    padding: 0px 0px 0px 0px;
}

.rkit-homeslider-pagination {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    padding: 1rem;
    justify-content: center;
    align-items: center;
}

/* Image container (ensure the image is contained properly) */
.image-container-hsl {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.image-cover-hsl {
    height: 100% !important;
}

.image-container-hsl img {
    transform: scale(1.1);
    opacity: 1;
    transition: transform 0.5s, opacity 0.5s;
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

.swiper-slide-active > .image-container-hsl {
    transform: scale(1);
    opacity: 1;
}

.image-container-hsl.animate-zoom-out {
    animation: zoomOut 5s ease-out forwards;
}

@keyframes zoomOut {
    0% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}





/* Content overlay */
.hs-content {
    display: flex;
    text-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    height: 100%;
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 10%;
    background-color: transparent;
    z-index: 0;
}

.hs-content-background {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    height: 100%;
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 10%;
    background-color: #000000;
    z-index: 0;
}

.icon-subtitle-hs {
    display: flex;
    align-self: center;
    z-index: 3;
}

.hs-subtitle-section {
    display: inline-flex;
    flex-direction: row;
    color: #ffffff;
    gap: 10px;
    width: fit-content;
    z-index: 3;
}

.hs-sub-title {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    z-index: 3;
    /* text-align: center; */
    align-self: center;
    width: 100%;
    display: block;
    text-wrap: auto;
    max-width: fit-content;
}

.hs-title {
    font-size: 40px;
    font-weight: bold;
    color: #ffffff;
    z-index: 3;
    /* text-align: center; */
    display: block;
    text-wrap: auto;
}

.hs-description {
    font-size: 20px;
    color: #ffffff;
    z-index: 3;
    display: block;
    text-wrap: auto;
}

/* .hs-mw{
  max-width: 50%;
} */

/* text animate */
.hs-animation-1-subtitle span {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUpSubtitle 0.5s ease forwards;
}

.hs-animation-1-title span {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUpTitle 0.5s ease forwards;
}

.hs-animation-1-desc span {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUpDesc 0.5s ease forwards;
}

@keyframes fadeInUpSubtitle {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUpTitle {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUpDesc {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.hs-animation-2-subtitle {
    display: inline-block;
    overflow: hidden;
    animation: typewritersubtitle 4s steps(30) 1s forwards, blink 0.7s;
    white-space: nowrap;
}

.hs-animation-2-title {
    display: inline-block;
    overflow: hidden;
    animation: typewritertitle 4s steps(30) 1s forwards, blinks 0.7s;
    white-space: wrap;
}

.hs-animation-2-desc {
    display: inline-block;
    overflow: hidden;
    animation: typewriterdesc 4s steps(30) 1s forwards, blinkz 0.7s;
    white-space: wrap;
}

@keyframes typewritersubtitle {
    0% {
        width: 30%;
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        width: 50%;
        opacity: 1;
    }
}

@keyframes typewritertitle {
    0% {
        width: 30%;
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        width: 50%;
        opacity: 1;
    }
}

@keyframes typewriterdesc {
    0% {
        width: 30%;
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        width: 50%;
        opacity: 1;
    }
}


@keyframes blink {
    from {
        border-color: transparent;
    }

    to {
        border-color: #ffffff;
    }
}

@keyframes blinks {
    from {
        border-color: transparent;
    }

    to {
        border-color: #ffffff;
    }
}

@keyframes blinkz {
    from {
        border-color: transparent;
    }

    to {
        border-color: #ffffff;
    }
}

/* Navigation buttons */
.swiper-nav-cont {
    display: flex;
    gap: 15px;
    position: absolute;
    cursor: pointer;
    padding: 10px;
    top: 2%;
    max-width: 100%;
    width: 100%;
    height: 100%;
}

.swiper-bullet-cont {
    display: flex;
    gap: 15px;
    position: absolute;
    z-index: 5;
    cursor: pointer;
    left: 48%;
    top: 95%;
}


.rkit-swiper-hs-button-next,
.rkit-swiper-hs-button-prev {
    position: relative;
    z-index: 1;
    width: 45px;
    height: 45px;
    background-color: transparent;
    transform: translateY(-50%);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
    border-radius: 0%;
    border-style: solid;
    border-width: 1px;
    border-color: #fff;
    --swiper-navigation-size: 44px;
    --swiper-navigation-top-offset: 50%;
    --swiper-navigation-sides-offset: 10px;
}

/* 
.rkit-swiper-hs-button-next:hover{  
  width: 75px;
  height: 45px;
  background-color: #ff0000;
  transform: translateY(-50%);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s;
  border-radius: 0% 50% 50% 0%; 
  }
  
  .rkit-swiper-hs-button-prev:hover{  
  width: 75px;
  height: 45px;
  background-color: #ff0000;
  transform: translateY(-50%);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s;
  border-radius: 50% 0% 0% 50%; 
  } */

/* Dots and overlay style */
.rkit-homeslider-bullet {
    width: 8px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: #aaaaaa;
    transition: all 0.5s ease;
}

.rkit-homeslider-bullet-active {
    background-color: #161616;
}

.rkit-homeslider-bullet-clickable .rkit-homeslider-bullet {
    cursor: pointer;
}

.card-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

    .card-body::before {
        content: "";
        width: 100%;
        height: 100%;
        display: block;
        z-index: -1;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
    }

.card-title {
    margin: 0;
}

    .card-title a {
        text-decoration: none;
        color: #161616;
    }

.card-heading {
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
}

.rkit-swiper-hs-button-prev.swiper-button-disabled,
.rkit-swiper-hs-button-next.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none;
}

/* .rkit-homeslider .card-button a {
  background-color: #33e4c0;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  color: white;
  transition: all 0.5s;
  border-radius: 0px;
} */

/* .rkit-homeslider .card-button {
  display: flex;
  justify-content: start;
}

.rkit-homeslider .card-button a .button-icon {
  transition: color 0.5s;
}

.rkit-homeslider.overlay {
  position: relative;
}

.rkit-homeslider.overlay .card-body {
  opacity: 0;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: all 0.5s;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
}

.rkit-homeslider.overlay .card-button {
  justify-content: center;
}

.rkit-homeslider.overlay:hover .card-body {
  opacity: 1;
  transform: scaleY(1);
}

.rkit-homeslider-slider .swiper-slide {
  overflow: unset;
}

.card-button.fullwidth a {
  width: 100%;
}
 */



/* button */

.icon-list-button-hs {
    color: red;
    align-self: center;
}

.icon-subtitle-hs {
    color: #ffffff;
    align-self: center;
}

.icon-list-button-hs i:hover {
    color: rgb(255, 255, 255);
}

.rkit-homeslider-item-button .button-element-homeslider {
    display: flex;
    align-self: center;
    margin-top: auto;
    background-color: #333333;
    color: #ffffff;
    max-width: none;
    padding: 16px 32px 16px 32px;
    justify-content: center;
    position: relative;
    /* box-shadow: 0px 6px 10px 5px rgba(0, 0, 0, 0.20)  ; */
}

.rkit-homeslider-item-button.button-full-size .button-element-homeslider {
    display: flex;
    justify-content: center;
    width: 100%
}

.rkit-homeslider-item-button-icon {
    color: #56d4c4;
}

/* Minimalist design option css */
.rkit-product-grid-wpg {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    flex-direction: row;
    gap: 5px;
    background-color: transparent;
    justify-content: center;
}




.rkit-product-card-wpg {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding-bottom: 10px;
    position: relative;
    height: min-content;
    width: -webkit-fill-available;
}

.rkit-addcart-wrap-button-wpg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
}

.rkit-product-card-wpg:hover {
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.rkit-product-image-wpg {
    position: relative;
    overflow: hidden;
}

    .rkit-product-image-wpg img {
        width: 100%;
        height: auto;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .rkit-product-image-wpg:hover img {
        transform: scale(1.1);
    }

    .rkit-product-image-wpg:hover::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #575555;
        opacity: 0.3;
        transition: width 0.6s ease;
        z-index: 0;
    }

.rkit-product-details-wpg {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rkit-product-info-wpg {
    display: flex;
    flex-direction: column;
    flex: 0 0 50%;
}

.rkit-product-title-wpg {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    margin: 0;
    text-wrap: wrap;
    text-wrap-style: stable;
}

.rkit-product-category-wpg {
    font-size: 14px;
    color: #888888;
    margin-top: 4px;
}

.rkit-product-price-wpg {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
}

.rkit-product-feat-wpg {
    display: flex;
    flex-direction: column;
    justify-content: right;
    text-align: end;
}

.rkit-addcart-wrap-button-wpg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 30px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

.rkit-product-image-wpg:hover .rkit-addcart-wrap-button-wpg {
    transform: translate(-50%, -50%);
    opacity: 1;
    visibility: visible;
    z-index: 99;
}

.rkit-addcart-button-wpg {
    display: inline-block;
    padding: 12px 24px;
    background-color: #ffffff;
    color: #000000;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    position: relative;
    transition: background-color 0.3s ease;
}

    .rkit-addcart-button-wpg span {
        position: relative;
        display: inline-block;
    }

        .rkit-addcart-button-wpg span::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0%;
            height: 2px;
            background-color: #000000;
            transition: width 0.6s ease;
            z-index: 999;
        }

.rkit-product-image-wpg:hover span::after {
    width: 100%;
}


.rkit-product-rating-wpg {
    font-size: 14px;
    color: #f5c518;
}

/* ribbon */
.rkit-product-ribbon-wpg {
    position: absolute;
    /* top: 10px;  */
    background-color: #FF0000; /* Warna background ribbon */
    color: #fff; /* Warna teks */
    padding: 5px 15px;
    font-size: 12px;
    font-weight: bold;
    z-index: 10;
    border-radius: 0px;
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); */
}

.rkit-product-card-wpg {
    position: relative;
}

/* =============================================divider======================================================= */

/* profesional design css layout 2 */

.rkit-product-grid-wpg-pro {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    background-color: transparent;
    justify-content: center;
}

.rkit-product-card-wpg-pro {
    border-radius: 20px 20px 20px 20px;
    /* background-color: transparent; */
    /* background: linear-gradient(29deg, #000000 20%, #A0A0A0 100%); */
    background-color: #A0A0A0;
    padding: 20px 20px 20px 20px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding-bottom: 10px;
    position: relative;
    height: min-content;
    width: -webkit-fill-available;
}

.rkit-product-image-wpg-pro {
    position: relative;
    overflow: hidden;
    border-radius: 20px 20px 20px 20px;
}

    .rkit-product-image-wpg-pro img {
        width: 100%;
        height: auto;
        object-fit: cover;
        transition: transform 0.3s ease;
        border-radius: 20px 20px 20px 20px;
    }

    .rkit-product-image-wpg-pro:hover::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: transparent;
        opacity: 0.3;
        transition: width 0.6s ease;
        z-index: 1;
    }

/* content */

.rkit-product-details-wpg-pro {
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.rkit-product-info-wpg-pro {
    display: flex;
    flex-direction: column;
    flex: 0 0 50%;
}

.rkit-product-title-wpg-pro {
    /* font-size: 18px; */
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    text-wrap: wrap;
}

.rkit-product-price-wpg-pro {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
}

.rkit-product-feat-wpg-pro {
    display: flex;
    flex-direction: column;
    justify-content: right;
    text-align: end;
}

.rkit-product-desc-wpg-pro {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition-delay: 2s;
    transition: max-height 0.5s ease, opacity 0.5s ease;
}

.rkit-product-text-desc-wpg-pro {
    font-size: 14px;
    font-weight: 100;
    color: #ffffff;
    text-wrap: wrap;
    text-align: center;
}

.rkit-product-card-wpg-pro:hover .rkit-product-desc-wpg-pro {
    opacity: 1;
    max-height: 200px;
}


/* button */
.rkit-addcart-wrap-button-wpg-all-pro {
    display: inline-flex;
    position: relative;
    justify-content: center;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: transparent;
}

.rkit-addcart-wrap-button-wpg-pro {
    position: relative;
    display: inline-block;
}

/* Gradient border wrapper */
.gradient-border {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 15px;
    /* background-image: linear-gradient(30deg, #00cea6, #535353); */
    background-image: linear-gradient(30deg, var(--gradient-color-one), var(--gradient-color-two));
    /* background-color: #D0D1D5; */
    background-size: 500%;
    z-index: 0;
    animation: border-ambient 3s linear infinite;
}

/* The button itself */
.rkit-addcart-button-wpg-pro {
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: linear-gradient(30deg, #00cea6, #1a1818); */
    background-color: #00CEA6;
    border-radius: 15px;
    padding: 12px 30px;
    width: 100%;
    max-width: 100%;
    font-size: 15px;
    color: white;
    position: relative;
    z-index: 1;
    transition: all 0.5s;
    overflow: hidden;
}

.rkit-addcart-wrap-button-wpg-pro {
    width: 100%;
    margin: 0 auto;
    /* overflow: hidden;  */
}


/* Gradient animation */
@keyframes border-ambient {
    0% {
        background-position: 0% 50%;
    }

    25% {
        background-position: 50% 75%;
    }

    50% {
        background-position: 100% 50%;
    }

    75% {
        background-position: 50% 25%;
    }

    100% {
        background-position: 0% 50%;
    }
}


.rkit-product-rating-wpg-pro {
    font-size: 14px;
    color: #f5c518;
}

/* ribbon pro*/
.rkit-product-ribbon-wpg-pro {
    background-color: #00CEA6;
    /* background: linear-gradient(305deg, #393131 0%, #00CEA6 100%); */
    margin-top: 0px;
    border-radius: 0px;
    position: absolute;
    color: #fff;
    padding: 5px 15px;
    font-size: 12px;
    font-weight: bold;
    z-index: 10;
}

.rkit-product-card-wpg-pro {
    position: relative;
}


/* =============================================================================================================== */
/* premium style css layout 3 */



.rkit-product-grid-wpg-prem {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    justify-content: center;
}

.rkit-product-card-wpg-prem {
    /* width: 100%;  */
    padding: 20px;
    background-color: #D0D1D5;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    height: min-content;
    width: -webkit-fill-available;
}


.rkit-product-image-wpg-prem {
    position: relative;
    background-color: transparent;
}

    .rkit-product-image-wpg-prem img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
        margin: 0 auto;
    }

    .rkit-product-image-wpg-prem:hover::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: transparent;
        opacity: 0.3;
        transition: width 0.6s ease;
        z-index: 0;
    }

.rkit-product-ribbon-wpg-prem {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: #00CEA6;
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 20px;
}

.rkit-product-details-wpg-prem {
    display: flex !important;
    flex-direction: column-reverse;
    align-content: flex-start;
    justify-content: flex-start;
    text-align: left;
    gap: 15px;
    position: relative;
    z-index: 1;
    transition: transform 0.6s ease-in-out;
    height: min-content;
    gap: 10px;
    /* transform: translateY(60%);  */
}

    .rkit-product-details-wpg-prem::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: transparent;
        opacity: 0.5;
        z-index: -1;
    }


.rkit-product-info-wpg-prem {
    margin-bottom: 12px;
    flex: 0 0 50%;
}

.rkit-product-title-wpg-prem {
    font-weight: bold;
    margin: 0;
    color: #333;
    width: fit-content;
    position: relative;
    padding-bottom: 25px;
}

    .rkit-product-title-wpg-prem::after {
        content: '';
        text-align: left;
        justify-content: start;
        display: block;
        width: 50%;
        border-bottom: 3px solid #000000;
        margin: 0 auto;
        position: absolute;
        left: 0;
        padding-bottom: 10px;
    }

.rkit-product-feat-wpg-prem {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
}

.rkit-product-price-wpg-prem {
    font-size: 24px;
    font-weight: 300;
    color: #000000;
}

.rkit-product-rating-wpg-prem {
    font-size: 14px;
    color: #f4a261;
}



.rkit-product-hov-wpg-prem {
    display: flex;
    flex-direction: row;
    width: 100%;
    /* padding-top: 10px; */
    height: min-content;
    position: relative;
    text-align: center;
    opacity: 0;
    max-height: min-content;
    overflow: hidden;
    visibility: hidden;
    transform: translateY(-80%);
    transition: max-height 0.5s ease, opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.rkit-product-card-wpg-prem:hover .rkit-product-details-wpg-prem {
    transform: translateY(-70%);
}

.rkit-product-card-wpg-prem:hover .rkit-product-hov-wpg-prem {
    opacity: 1;
    height: fit-content;
    max-height: min-content;
    visibility: visible;
    transform: translateY(-100%);
}


.rkit-addcart-button-wpg-prem {
    display: flex;
    justify-content: center;
    background-color: #1F1F29;
    border-radius: 15px;
    padding: 10px 20px;
    font-size: 15px;
    color: #D9DADE;
    position: relative;
}

.rkit-addcart-wrap-button-wpg-prem {
    display: flex;
    flex: 0 0 40%;
    align-items: end;
    width: 100%;
    margin: 0 auto;
    align-content: center;
    transition: max-height 0.5s ease, opacity 0.5s ease;
}

    .rkit-addcart-wrap-button-wpg-prem span {
        display: flex;
        align-items: center;
    }

    .rkit-addcart-wrap-button-wpg-prem i {
        display: flex;
        align-items: center;
    }




.text-button {
    display: flex;
}


.rkit-product-desc-wpg-prem {
    padding: 0px 8px 0px 0px;
    display: flex;
    flex: 0 0 60%;
    overflow: hidden;
    transition-delay: 2s;
    transition: max-height 0.5s ease, opacity 0.5s ease;
}

.rkit-product-text-desc-wpg-prem {
    font-size: 14px;
    font-weight: 100;
    color: #000000;
    text-wrap: wrap;
    text-align: left;
    max-width: 100%;
    overflow: hidden;
}



/* Styling untuk bintang */
.star-rating-wpg {
    display: inline-block;
    font-size: 20px;
    line-height: 1;
    color: #ddd;
    position: relative;
}

    .star-rating-wpg span {
        display: block;
        color: #f5c518;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        white-space: nowrap;
        width: 0;
    }


/* SALE PRICE */
.rkit-product-sale-price-wpg {
    color: #000000;
    font-weight: bold;
    margin-right: 10px;
    font-size: 20px;
}

.rkit-product-sale-price-wpg-pro {
    color: #ffffff;
    font-weight: bold;
    margin-right: 10px;
    font-size: 20px;
}

.rkit-product-sale-price-wpg-prem {
    color: #000000;
    font-weight: bold;
    margin-right: 10px;
    font-size: 24px;
}

/* REGULAR PRICE (Jika Ada Sale Price) */
.if-sale-price-wpg {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    line-height: 0px;
    gap: 2px;
    padding-bottom: 20px;
}

.if-sale-price-wpg-pro {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* line-height: 0px; */
    gap: 5px;
}

.if-sale-price-wpg-prem {
    display: flex;
    flex-direction: column-reverse;
}

.rkit-product-sale-price-reguler-wpg {
    color: #777;
    text-decoration: line-through;
    font-size: 14px;
    font-weight: normal;
}

.rkit-product-sale-price-reguler-wpg-pro {
    color: #ffffff;
    text-decoration: line-through;
    font-size: 16px;
    font-weight: normal;
}

.rkit-product-sale-price-reguler-wpg-prem {
    color: #777;
    text-decoration: line-through;
    font-size: 14px;
    font-weight: normal;
}

/* REGULAR PRICE (Tanpa Sale Price) */
.rkit-product-price-reguler-wpg {
    color: #333;
    font-weight: bold;
    font-size: 20px;
}

.rkit-product-price-reguler-wpg-pro {
    color: #ffffff;
    font-weight: bold;
    font-size: 20px;
}

.rkit-product-price-reguler-wpg-prem {
    color: #333;
    font-weight: bold;
    font-size: 24px;
}


@import url("./rtmicon-regular.css");
@import url("./rtmicon-thin.css");