:root,
[data-bs-theme=light] {
    --bs-primary: #d06334;
    --bs-primary-rgb: 208, 99, 52;
    --bs-primary-text-emphasis: #532815;
    --bs-primary-bg-subtle: #F6E0D6;
    --bs-primary-border-subtle: #ECC1AE;
    --bs-body-color: #000000;
    --bs-body-color-rgb: 0, 0, 0;
    --bs-secondary-color: rgba(0, 0, 0, 0.75);
    --bs-secondary-color-rgb: 0, 0, 0, 0.75;
    --bs-tertiary-color: rgba(0, 0, 0, 0.5);
    --bs-tertiary-color-rgb: 0, 0, 0, 0.5
}

.btn-primary {
    --bs-btn-color: #000000;
    --bs-btn-bg: #d06334;
    --bs-btn-border-color: #d06334;
    --bs-btn-hover-color: #000000;
    --bs-btn-hover-bg: #D77A52;
    --bs-btn-hover-border-color: #D57348;
    --bs-btn-focus-shadow-rgb: 31, 15, 8;
    --bs-btn-active-color: #000000;
    --bs-btn-active-bg: #D9825D;
    --bs-btn-active-border-color: #D57348;
    --bs-btn-disabled-color: #000000;
    --bs-btn-disabled-bg: #d06334;
    --bs-btn-disabled-border-color: #d06334
}

.btn-outline-primary {
    --bs-btn-color: #d06334;
    --bs-btn-border-color: #d06334;
    --bs-btn-focus-shadow-rgb: 208, 99, 52;
    --bs-btn-hover-color: #000000;
    --bs-btn-hover-bg: #d06334;
    --bs-btn-hover-border-color: #d06334;
    --bs-btn-active-color: #000000;
    --bs-btn-active-bg: #d06334;
    --bs-btn-active-border-color: #d06334;
    --bs-btn-disabled-color: #d06334;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #d06334
}

.underline:after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 8px;
    border-radius: 5px;
    background: #572120;
    z-index: -1
}

.genius-hero {
    padding-top: 100px
}

@media only screen and (max-width:768px) {
    nav ul li:not(:nth-last-child(-n + 1)) {
        width: 137px;
        margin: 0 auto;
    }

    .button-masuk {
        margin-top: 10px
    }

    .centered-android {
        text-align: center
    }

    .hidden-android {
        display: none
    }

    .genius-hero {
        padding-top: 60px;
        padding-bottom: 5px
    }

    #column-line {
        overflow: hidden
    }
}

.icon-gg {
    color: #fff;
    background: #d06334
}

.hover-image-container {
    perspective: 1000px
}

.hover-image {
    width: 100%;
    transition: transform .3s;
    transform-origin: center center
}

.underline-image {
    position: absolute;
    width: 180px;
    top: 81%;
    left: 55%
}
.container {
    max-width: 70%;
}
@media (max-width:768px) {
    .underline-image {
        width: 114px !important
    }
    .container {
        max-width: 98%;
    }
}

.required:after {
    content: " *";
    font-weight: 700;
    color: red
}

.accordion-button:not(.collapsed) {
    color: var(--bs-primary);
    background-color: var(--bs-accordion-active-bg);
    box-shadow: inset 0 calc(-1*var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color)
}
.navbar {
    -webkit-box-shadow: 0 8px 20px -6px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 8px 20px -6px rgba(0,0,0,0.3);
    box-shadow: 0 8px 20px -6px rgba(0,0,0,0.3); 
    /* the rest of your styling */
}

.navbar-toggler {

}
.navbar-toggler:focus {
    box-shadow: 0px 0px 0px 4px rgba(208, 99, 52,1);
    -webkit-box-shadow: 0px 0px 0px 4px rgba(208, 99, 52,1);
    -moz-box-shadow: 0px 0px 0px 4px rgba(208, 99, 52,1);
}