.budi-kontakt-tab__wrapper{
    color: rgba(17, 17, 18, 0.6);
}

.budi-kontakt-tab__image {
    height: 100%;
    background-position: bottom center;
    background-size: cover;
}

.budi-kontakt-tab__right {
    background-color: var(--color-main);
    padding: 65px 40px 40px 40px;
}

.budi-kontakt-tab__buttons {
    background-color: #ffffff;
    border-radius: 20px;
    margin-bottom: 40px;
    padding: 2px;
    position: relative;
}

.tab-slider {
    position: absolute;
    width: calc(50% - 8px);
    height: calc(100% - 8px);
    background-color: var(--color-main);
    border-radius: 100px;
    top: 4px;
    left: 0;
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
    z-index: 1;
    --start-position: 0;
}

.budi-kontakt-tab__buttons li {
    position: relative;
    z-index: 2;
}

.budi-kontakt-tab__button {
    padding: 9px 20px;
    border-radius: 20px;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
    color: var(--color-main);
}


/* Active button state */
.budi-kontakt-tab__button.active {
    color: #ffffff; /* Force white color when active */
}

/* When hovering other buttons, make active button return to default color */
.budi-kontakt-tab__buttons:hover .budi-kontakt-tab__button.active:not(:hover) {
    color: var(--color-main);
}

/* Efek hover pada button pertama */
.budi-kontakt-tab__buttons li:first-child:hover ~ li .budi-kontakt-tab__button,
.budi-kontakt-tab__buttons li:first-child .budi-kontakt-tab__button.active {
    color: var(--color-main);
}

/* Efek hover pada button kedua */
.budi-kontakt-tab__buttons li:last-child:hover .budi-kontakt-tab__button,
.budi-kontakt-tab__buttons li:last-child .budi-kontakt-tab__button.active {
    color: #ffffff;
}

.budi-kontakt-tab__buttons li:last-child:hover ~ ::after,
.budi-kontakt-tab__buttons li:last-child .budi-kontakt-tab__button.active ~ ::after {
    transform: translateX(100%);
}

/* Add new rule for buttons under slider */
.budi-kontakt-tab__buttons li:hover .budi-kontakt-tab__button,
.budi-kontakt-tab__button.active:hover {
    color: #ffffff;
}
/* Base state for all buttons */
.budi-kontakt-tab__button:hover {
    color: #ffffff;
}

.budi-kontakt-tab__info-text p{
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 8px;
}

.meetergo-iframe{
    height: 575px !important;
    background-color: #fff;
    margin-bottom: 24px;
}

@media(max-width: 400px) {
    .meetergo-iframe{
        height: 600px !important;
    }
}

.meetergo-iframe iframe{
    min-height: auto !important;
}

@media only screen and (max-width: 1100px) {
    .budi-kontakt-tab__button{
        font-size: 14px;
    }
}

@media only screen and (max-width: 992px) {
    .budi-kontakt-tab__image {
        height: 100vw;
    }

    .budi-kontakt-tab__button{
        font-size: 16px;
    }
}

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

    .budi-kontakt-tab__right {
        padding: 20px;
    }

    /* .budi-kontakt-tab__right-inner {
        padding: 25px;
        background-color: var(--color-main);
    } */

    .budi-kontakt-tab__buttons {
        width: 100%;
        margin-bottom: 30px;
        /* background-color: var(--color-main); */
    }

    .budi-kontakt-tab__buttons li{
        width: 50%;
    }

    .budi-kontakt-tab__button{
        padding: 9px 10px;
        font-size: 14px;
        /* color: #ffffff; */
    }
}

.budi-kontakt-tab__info-text{
    font-size: 14px;
}

@media only screen and (max-width: 576px) {
    .meetergo-iframe{
        min-width: 100% !important;
    }
    .budi-kontakt-tab__buttons li{
        width: 45%;
    }

    .budi-kontakt-tab__buttons li:last-child{
        width: 55%;
    }
}

@media only screen and (max-width: 360px) {
    .budi-kontakt-tab__button {
        font-size: 12px;
    }
}

.budi-kontakt-tab__wrapper .codedropz-upload-handler{
    border: 1px solid rgba(17, 17, 18, 0.1);
}

.budi-kontakt-tab__wrapper .codedropz-upload-inner h3,
.budi-kontakt-tab__wrapper .codedropz-upload-inner a{
    font-size: 18px;
    color: rgba(17, 17, 18, 0.6);
}

/* Add animation for initial slide */
@keyframes initialSlide {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(calc(100% - 8px));
    }
    100% {
        transform: translateX(0);
    }
}

.tab-slider.animate-initial {
    animation: initialSlide 1s ease-in-out;
}

@keyframes gentleSlide {
    0%, 100% {
        transform: translateX(var(--start-position));
    }
    50% {
        transform: translateX(calc(var(--start-position) + 5px));
    }
}

.tab-slider.gentle-slide {
    animation: gentleSlide 2s ease-in-out infinite;
}

/* Pause animation on hover */
.budi-kontakt-tab__buttons:hover .tab-slider {
    animation-play-state: paused;
}