@import url("https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Alex+Brush&family=Dancing+Script&family=Montserrat&family=Parisienne&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

.masthead {
    height: 100vh;
    background-image: url("https://github.com/bakaroti/resource/blob/main/bgliq8.png?raw=true");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.text-lead {
    font-family: "Pinyon Script", cursive;
}

.text-lead2 {
    font-family: "Playfair Display", serif;
}

.text-roboto {
    font-family: "Roboto", sans-serif;
}

.bg-warna1 {
    background-color: #e1e2da;
}

.bg-custom {
    background-color: #658864;
}

.bg-warna2 {
    background-color: #658864;
}

.bg-warnaIcon2 {
    background-color: rgba(101, 136, 100, 1);
}

.btn-border-bottom {
    border: bottom;
    border-bottom: 2px solid;
}

.bg-navbar-template {
    background-color: rgba(
        255,
        255,
        255,
        0.7
    ); /* Transparansi 50% untuk warna putih */
}

.countdown-value {
    max-width: 100%; /* Set the maximum width to 100% */
    display: inline-block; /* To allow max-width to work correctly */
}

.countdown-label {
    max-width: 100%; /* Set the maximum width to 100% */
    display: inline-block; /* To allow max-width to work correctly */
}

ul.fitur-list {
    list-style-type: none; /* Remove default list-style (bullets) */
}

ul.fitur-list li {
    position: relative;
    padding-left: 30px; /* Add some padding on the left to make room for the checkbox */
}

ul.fitur-list li::before {
    content: "\2713"; /* Unicode for checkmark symbol */
    position: absolute;
    left: 0;
    top: 0;
    font-size: 18px;
    line-height: 1;
}

.card {
    transition: background-color 0.5s ease, color 0.5s ease; /* Efek transisi lebih lambat dan lembut */
}
/* Gaya card saat dihover */
.custom-card:hover {
    background-color: #333; /* Warna latar belakang saat dihover */
    color: #fff; /* Warna teks saat dihover */
}

.custom-card:hover .text-hargaPaket {
    color: #fff;
}

.animate-dark:hover {
    background-color: rgba(0, 0, 0, 0.1);
    /* Warna latar belakang yang lebih gelap */
    transition: background-color 0.3s ease;
    /* Efek transisi */
}

.font-kecil {
    font-size: smaller;
}

.font-tebal {
    font-weight: bolder;
}

.icon-tanya {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM10 7C9.63113 7 9.3076 7.19922 9.13318 7.50073C8.85664 7.97879 8.24491 8.14215 7.76685 7.86561C7.28879 7.58906 7.12543 6.97733 7.40197 6.49927C7.91918 5.60518 8.88833 5 10 5C11.6569 5 13 6.34315 13 8C13 9.30622 12.1652 10.4175 11 10.8293V11C11 11.5523 10.5523 12 10 12C9.44773 12 9.00001 11.5523 9.00001 11V10C9.00001 9.44772 9.44773 9 10 9C10.5523 9 11 8.55228 11 8C11 7.44772 10.5523 7 10 7ZM10 15C10.5523 15 11 14.5523 11 14C11 13.4477 10.5523 13 10 13C9.44772 13 9 13.4477 9 14C9 14.5523 9.44772 15 10 15Z' fill='%234A5568'%3E %3C/path%3E %3C/svg%3E");
    width: 20px;
    height: 20px;
}