/* Gaya CSS untuk Video Slider */
body {
    font-family: "Poppins";
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}

#videoSliderContainer {
    overflow: hidden;
    width: 90%;
    max-width: 100%;
    margin: 0 2.5rem;
    position: relative;
    /* Tambahkan posisi relatif */
}

#videoSlider {
    display: flex;
    transition: transform 0.5s ease;
}

.video-slide {
    flex: 0 0 20%;
    padding-right: 10px;
    box-sizing: border-box;
    display: inline-block;
}

.video-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-align: center;
    padding: 20px;
    position: relative;
    /* Tambahkan posisi relatif */
}

.video-title {
    font-size: 18px;
    margin: 10px 0;
}

.video-description {
    margin: 5px 0;
}

.video-slider-control-btn {
    background-color: #3c4396;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 10px;
    margin: 5px;
    cursor: pointer;
    position: absolute;
    top: 60%;
    z-index: 1;
}

/* Style khusus untuk tombol "Previous" */
#videoPrevBtn {
    left: 10px;
}

/* Style khusus untuk tombol "Next" */
#videoNextBtn {
    right: 10px;
}

/* Style untuk ikon */
.video-slider-control-btn i {
    font-size: 24px;
    color: #fff;
    cursor: pointer;
}

/* Gaya CSS untuk tombol nominal di donasi umum */
.nominal-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.nominal-button {
    background-color: #f7f4f2;
    border-color: #3c4396;

    color: #838080;
    /* border: none; */
    border-radius: 30px;
    padding: 10px 35px;
    cursor: pointer;
    margin-bottom: 20px;
    margin-right: 2px;
}

/* Gaya CSS untuk input "Nominal Lainnya" */
#customNominal {
    width: 100%;
    /* background-color: #f7f4f2; */
    padding: 13px;
    border: 1px solid #ccc;
    border-radius: 8px;
    /* margin-top: 5px; */
    margin-bottom: 20px;
}

/* nominal button */


/* Styling saat tombol aktif */
.nominal-button.active {
    background-color: #3c4396;
    color: #fff;
}

/* #whatsapp-icon {
    margin-left: 30px; 
} */

#whatsapp-icon {
    color: #25d366;
}

#facebook-icon {
    color: #3B5998;
    /* margin-left: 30px;  */
}

#copy-link-icon {
    color: #838080;
}

#twitter-icon {
    color: #1BAAE1;
}


/* Kartu Berita Responsif */
.news-one__single {
    margin-bottom: 30px;
    /* Beri jarak antara kartu berita */
    border: 1px solid #eae5e3;
    border-radius: 10px;
}

/* Mengatur lebar kolom kartu berita pada tampilan mobile */
@media (max-width: 767px) {
    .news-one__single {
        text-align: center;
        /* Teks di tengah pada tampilan mobile */
    }

    .news-one__single .news-one__img {
        margin-bottom: 15px;
        /* Jarak antara gambar dan teks */
    }

    .news-one__single .news-one__img img {
        max-width: 100%;
        /* Lebarkan gambar agar sesuai dengan lebar kartu */
    }

    .news-one__content {
        padding: 20px;
        /* Padding lebih sedikit pada tampilan mobile */
    }

    .news-one__date-box {
        bottom: -10px;
        height: 30px;
        width: 30px;
        font-size: 7px;
        right: 5px;
    }
}

/* Button "Load More" */
.more-post__btn .thm-btn {
    padding: 10px 20px;
    /* Atur padding yang lebih kecil */
}



/* batas SUKSESSSSS */
.success-container.hidden {
    display: none;
}

.checkmark-container {
    width: 100px;
    /* Lebar container centang */
    height: 100px;
    /* Tinggi container centang */
    margin: 20px auto;
    /* Posisi tengah */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.checkmark {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 15px;
    left: 0;
    opacity: 0;
    transform-origin: left center;
    animation: drawCheckmark 0.5s ease forwards;
    text-align: center;
    margin-left: 20px;
}

@keyframes drawCheckmark {
    0% {
        transform: scaleX(0);
        opacity: 1;
    }

    100% {
        transform: scaleX(1);
        opacity: 1;
    }
}



#btnOK {
    background-color: #faffff;
    color: #100f0f;
    padding: 5px 10px;
    /* border: none;  */
    border-color: #3c4396;
    border-radius: 5px;
    cursor: pointer;
    /* Kursor berubah menjadi tangan saat diarahkan */
    font-size: 14px;
    /* Ukuran teks */
}

#btnOK:hover {
    background-color: #3c4396;
    /* Warna latar belakang saat tombol dihover */
}

/* batas SUKSESSSSS END*/
.swiper-slide {
    display: flex;
    /* Use flexbox to layout iframes in a row */
    justify-content: center;
}

.short {
    width: 255px;
    height: 450px;
}

@media screen and (max-width: 992px) {
    .short {
        width: 150px;
        height: 265px;
    }
}