html, body{
    margin: 0;
    padding: 0;
    font-family: "Work Sans", sans-serif;
    background-color: #f4f4f4;
}

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

.bg-light-pink{
    background-color: var(--bs-bg-light-pink);
}

/* NAVBAR */
/* Default: transparan */
nav {
    background: var(--bs-bg-light-pink);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Setelah di-scroll → background putih + shadow tipis */
nav.scrolled {
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.navbar-toggler {
    color: var(--bs-primary-color);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23C2185B' stroke-width='3' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Typography */
@media (max-width: 767px) {
    .lead {
        font-size: 1rem;
    }
}

/* carousel */
.carousel-indicators [data-bs-target] {
    background-color: var(--bs-secondary-color);
}

/* STEP CIRCLE */
.step-circle {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-weight: bold;
    color: #C2185B;
    border: 2px solid #C2185B;
    border-radius: 50%;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.step-circle.active {
    background-color: #C2185B;
    color: white;
}

/*  Blog */
.excerpt-truncate {
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Number of lines to show */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* Ensures ellipsis appears */
}
.two-line-truncate {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Number of lines to show */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* Ensures ellipsis appears */
}
a {
    color: var(--bs-primary-color);
    text-decoration: underline;
}