:root {
    --primary: #2C3E50;
    --accent: #3498DB;
    --neutral: #ECF0F1;
    --text: #111921;
    --grey: #373737;
    --white: #ffffff;

    --font-1: "Poppins", sans-serif;
    --font-2: "Roboto", sans-serif;

    --transition: all 300ms ease;
    --border-radius: 12px;
}

/* Button Declaration */

/* Utils */
.mb-32 {
    margin-bottom: 32px;
}

.mt-32 {
    margin-top: 32px;
}

.radius-lg {
    border-radius: var(--border-radius);
}

html,
body {
    overflow-x: hidden;
}

.btn-primary {
    background-color: var(--accent);
    font-family: var(--font-2);
    font-weight: 600;
    color: var(--white);
    transition: var(--transition);
    font-size: 16px;
    border-color: var(--accent);
}

.btn-primary:hover {
    background-color: var(--accent);
    color: var(--white);
    filter: brightness(85%);
}

.btn-secondary {
    background-color: var(--primary);
    font-family: var(--font-2);
    font-weight: 600;
    color: var(--white);
    transition: var(--transition);
    font-size: 16px;
    border-color: var(--primary);
}

.btn-secondary:hover {
    background-color: var(--primary);
    color: var(--white);
    filter: brightness(85%);
}

/* End Utils */

/* Navbar */
.navbar-brand {
    font-size: 24px;
    font-weight: 700;
}

.navbar-btn-daftar {
    background-color: var(--accent);
    font-family: var(--font-2);
    font-weight: 600;
    color: var(--white);
    transition: var(--transition);
}

.navbar-btn-daftar:hover {
    background-color: var(--accent);
    color: var(--white);
    filter: brightness(85%);
}

.navbar-btn-masuk {
    border: 1px solid var(--primary);
    font-family: var(--font-2);
    font-weight: 600;
    color: var(--primary);
    transition: var(--transition);
}

.navbar-btn-masuk:hover {
    filter: brightness(85%);
    background-color: var(--primary);
    color: var(--white)
}

.navbar {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.navbar-scrolled {
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* End Navbar */


/* Footer */
footer {
    background-color: var(--white);
    padding: 40px 0 0 0;
    border-top: 1px solid var(--primary);
}

.footer-title {
    font-family: var(--font-2);
    color: var(--primary);
    font-size: 24px;
    margin-bottom: 32px;
}

.footer-copyright {
    background-color: var(--primary);
    padding: 16px;
}

/* End Footer */

/* Header Custom */
.header-custom {
    padding: 120px 0 40px;
    background-color: var(--neutral);
}

.header-custom .card {
    border-radius: 12px;
}

.header-custom ol>li {
    margin-right: 24px;
}

.header-custom ol>li:last-of-type {
    margin-right: 0;
}

/* End Header Custom */

@media (max-width: 767.98px) {

    /* Navbar */

    /* End Navbar */

    /* Footer */

    /* Footer */

}

@media (max-width: 997.98px) {

    /* Header Custom */
    .header-custom {
        padding: 80px 0 40px;
        background-color: var(--neutral);
    }

    /* End Header Custom */

    /* Navbar */
    .navbar {
        background-color: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* End Navbar */
}

@media (min-width: 768px) and (max-width: 998px) {
    /* Navbar */

    /* End Navbar */
}