/* carousel */
.carousel {
    padding: 0;
}

.carousel .carousel-indicators {
    position: static;
    margin-bottom: 0;
}

.carousel .carousel-indicators button {
    color: var(--primary-3);
    background-color: var(--primary-3);
    height: 10px;
    width: 10px;
    border-radius: 50%;
}

.carousel .carousel-indicators button.active {
    color: var(--primary-3);
    background-color: var(--primary-3);
    height: 10px;
    width: 24px;
    border-radius: unset;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
    border: var(--secondary-2) 1px solid;
    border-radius: 50%;
    padding: 10px;
}

/* card */
.card {
    border: 3px solid transparent; /* Mengubah border menjadi transparan */
    background: linear-gradient(181.15deg, #FCADCA 0.28%, #C2ACF8 31.9%, #ACE2FA 70.32%, #A4F4FA 99.01%); /* Menambahkan background gradient */
}

.card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
    background-color: var(--natural-2);
    border-radius: 12px;
}

.card .card-text {
    color: var(--secondary-2);
    font-weight: 400;
    font-size: 16px;
}

.card a {
    align-self: center;
    width: max-content;
}

/* button */
.btn {
    font-size: 14px;
    font-weight: 500;
}
.btn-first.gradient {
    background: linear-gradient(180deg, #CC0271 -19%, #F953C6 138%);
}

/* service */
.service {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.service h1 {
    align-self: center;
}

.service .card {
    border: 2px solid transparent;
    background: linear-gradient(to top,#FCADCA 0.28%, #C2ACF8 31.9%, #ACE2FA 70.32%, #A4F4FA 99.01%);
}

.service .card .card-body {
    gap: 12px;
}

.service h2 {
    font-size: 14px;
    font-weight: 700;
}

.service p {
    font-size: 12px;
    font-weight: 400;
}

/* hr */
hr {
    border-color: var(--secondary-2);
}