:root {
    --blue: #0042B2;
    --blue-light: #3D91CE;
    --blue-dark: #212841;
    --primary: #216a7d;
    --dark-primary: #15434f;
    --accent: #00cba6;
    --yellow: #ff9f18;
}

html {
    scroll-behavior: smooth;
}

.font-cherry {
    font-family: 'Cherry Bomb One', cursive !important;
}

.bg-yellow {
    background-color: var(--yellow) !important;
}

.text-yellow {
    color: var(--yellow) !important;
}

.btn-yellow {
    background-color: var(--yellow) !important;
    color: white !important;
    border-color: var(--yellow) !important;
}

.bg-primary {
    background-color: var(--primary) !important;
}

.bg-primary-dark {
    background-color: var(--dark-primary);
}

.bg-accent {
    background-color: var(--accent);
}

.bg-light-primary {
    background-color: #ebfffb;
}

.btn-primary {
    background-color: var(--primary);
    color: white;
    border-color: var(--primary);
}

.rounded {
    border-radius: 0.375rem;
}

.rounded-lg {
    border-radius: 0.5rem;
}

* {
    font-family: 'Poppins', sans-serif !important;
}

.bg-primary-blue {
    background-color: var(--blue) !important;
}

.link-primary {
    color: var(--blue) !important;
}

.timeline-marker {
    color: var(--accent) !important;
}

.text-primary {
    color: var(--primary) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
}

p {
    font-weight: 400 !important;
}

.nav-link {
    font-weight: 600 !important;
}

.btn {
    font-weight: 600 !important;
}

/* smooth scroll */
html {
    scroll-behavior: smooth !important;
}

.list-pertanyaan {
    max-width: 80%;
}

/* btn transition smooth */
.btn {
    transition: all 0.2s ease;
}

.btn-outline-secondary {
    color: #727272;
}

/* @media mobile */
@media (max-width: 768px) {
    .list-pertanyaan {
        max-width: 100%;
    }
}

.audio-player {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.audio-player .seek-bar {
    flex: 1;
}

.audio-player .time {
    font-size: .9rem;
    width: 3rem;
    text-align: center;
}

.logo-container {
    margin-top: -40px;
}

.btn-landing {
    width: fit-content;
}

@media (max-width: 576px) {
    .logo-container {
        margin-top: 0;
    }
    
    .btn-landing {
        width: 100%;
    }
}