@font-face {
    font-family: 'Badra';
    src: url('../fonts/badra/badra.otf') format('opentype'),
        url('../fonts/badra/badra.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

.badra-font {
    font-family: 'Badra', sans-serif;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-family: 'Badra', sans-serif !important;
    font-weight: 400 !important;
    color: #fff;
}



.banner-text p,
.banner-text h1 {
    font-family: 'Badra', sans-serif !important;
}

.btn-primary {
    background-color: #C60000;
}

.btn-primary:hover {
    background: #C60000cc;
            border: solid 1px #C60000cc !important;
            box-shadow: 0 0 50px #FD0000;
}

.btn-primary:active,
.btn-primary:focus {
    background-color: #C60000;
    box-shadow: none;
}

.decoration-1::after {
    content: "";
    display: block;
    height: 6px;
    background: url('../assets/images/decoration-1.png');
    background-repeat: no-repeat;
    margin: 8px auto 0 auto;
    border-radius: 2px;
    background-position: right;
}

.decoration-1.decoration-center::after {
    background-position: center;
}

.decoration-1.decoration-left::after {
    background-position: left;
}

.custom-line-height {
    line-height: 1.2;
}

.btn-custom {
    background: #C60000;
    border: none;
    border-radius: 6px;
    padding: .75rem 2rem;
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .5rem;
    transition: all 0.3s ease;
}

.btn-custom:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}


label {
    color: #fff !important;
    font-family: 'Badra', sans-serif !important;
}

input[type="text"].form-control,
input[type="email"].form-control,
input[type="tel"].form-control {
    border: 1px solid #fff;
    background: rgba(16, 16, 16, 1);
    color: #fff;
    padding: 12px 16px;
    border-radius: 8px;
    ;
}

.input[type="text"].form-control:focus,
input[type="email"].form-control:focus,
input[type="tel"].form-control:focus {
    border: 1px solid #fff;
    box-shadow: none;
    background: rgba(16, 16, 16, 1);
    color: #fff;
}

input[type="text"].form-control::placeholder,
input[type="email"].form-control::placeholder,
input[type="tel"].form-control::placeholder {
    color: #aaa;
}

.navbar-brand img {
    height: 40px;
}

@media screen and (min-width: 1444px) {
    .hero-content.container {
        padding-left: 10rem !important;
    }
}


.header-container .nav-link {
    color: white;
    font-weight: 500;
    transition: color 0.3s;
    position: relative;
    padding-bottom: 12px;
}

.header-container .nav-link:hover {
    color: #ff0000 !important;
}

.header-container .nav-link.active {
    color: #ff0000 !important;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.header-container .nav-link.active::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;

    transform: translate(-50%, -30%);

    width: 120%;
    height: 70px;
    background: radial-gradient(ellipse at center, rgba(198, 0, 0, 0.8) 0%, transparent 100%);

    filter: blur(12px);
    clip-path: inset(-10px -10px 12px -10px);
}


.header-container .nav-link.active::after {
    content: "";
    display: block;
    width: 80%;
    height: 4px;
    background: url('../assets/images/decoration-1.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
}

.btn-next {
    background-color: #C60000;
    color: white;
    border-radius: 6px;
    padding: 12px 18px;
    font-weight: 600;
    position: relative;
    /* border: 1px solid #fff; */
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-next:hover {
    background: #C60000cc;
    border: solid 1px #C60000cc !important;
    box-shadow: 0 0 50px #FD0000;
}

.btn-next:disabled {
    background-color: #860000;
    cursor: not-allowed;
    border: none;
}

.card {
    background: #1B1B1D !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 1rem;
    border-radius: 1rem;
}

.robux-card {
    background: rgba(42, 43, 47, 1);
    border-radius: .75rem;
    padding: 1rem;
    text-align: left;
    color: #fff;
    border: 2px solid transparent;
    cursor: pointer;
    transition: .3s;
    position: relative;
    min-height: 130px;
    min-width: 100%;
    display: flex;
    align-items: center;
}

.robux-card:hover {
    border-color: #fff;
}

.robux-card.active {
    border-color: rgba(198, 0, 0, .6);
    box-shadow: 0 0 20px rgba(198, 0, 0, .6);
}

.robux-card img {
    width: 65px;
}

.robux-card .checkmark {
    /* position: absolute; */
    /* top: 8px;
                                                                                right: 8px; */
    width: 20px;
    height: 20px;
    border: 2px solid rgba(239, 68, 68, 1);
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: white;
}

/* input checked -> aktifkan border card */
.robux-card-wrapper input:checked+.robux-card {
    border: 1px solid #fff;
    background: rgba(198, 0, 0, 0.36)
}

/* input checked -> isi lingkaran dengan centang */
.robux-card-wrapper input:checked+.robux-card .checkmark {
    /* background: #fff; */
    border: 1px solid #fff;
}

.robux-card-wrapper input:checked+.robux-card .checkmark::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 0.25C8.07164 0.25 6.18657 0.821828 4.58319 1.89317C2.97982 2.96451 1.73013 4.48726 0.992179 6.26884C0.254225 8.05042 0.061142 10.0108 0.437348 11.9021C0.813554 13.7934 1.74215 15.5307 3.10571 16.8943C4.46928 18.2579 6.20656 19.1865 8.09787 19.5627C9.98919 19.9389 11.9496 19.7458 13.7312 19.0078C15.5127 18.2699 17.0355 17.0202 18.1068 15.4168C19.1782 13.8134 19.75 11.9284 19.75 10C19.747 7.41506 18.7188 4.93684 16.891 3.10901C15.0632 1.28118 12.5849 0.252988 10 0.25ZM14.6436 8.29272L9.14307 13.5427C9.00322 13.6758 8.81756 13.75 8.62452 13.75C8.43147 13.75 8.24582 13.6758 8.10596 13.5427L5.35645 10.9177C5.2128 10.7801 5.12965 10.5911 5.12524 10.3923C5.12084 10.1934 5.19555 10.0009 5.33297 9.8571C5.47038 9.71328 5.65927 9.62989 5.85813 9.62523C6.05699 9.62058 6.24956 9.69504 6.39356 9.83228L8.62452 11.9629L13.6064 7.20728C13.7504 7.07004 13.943 6.99558 14.1419 7.00023C14.3407 7.00489 14.5296 7.08828 14.667 7.2321C14.8045 7.37592 14.8792 7.56841 14.8748 7.76727C14.8704 7.96614 14.7872 8.15513 14.6436 8.29272Z' fill='white'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.robux-card .badge {
    position: absolute;
    padding: 8px;
    top: 0;
    left: .5rem;
    border-radius: 0px 0px 12px 12px;
    font-weight: 100;
}

:root {
    --max-height: 200px;
}

.popup-sukses {
    background-color: #2d2d2d;
    border-radius: 16px;
    padding: 2.5rem 2rem;
}

.popup-sukses .swal2-image.image-sukses {
    margin: 1.5rem auto 0.5rem;
    /* min-height: 300px; */
    max-height: var(--max-height) !important;
    height: var(--max-height) !important;
    width: auto !important;
}

.popup-sukses .swal2-title.title-sukses {
    color: #ffffff;
    font-size: 2.25rem;
    font-weight: 700;
    /* margin-bottom: 0.5rem;
    margin-bottom: 10px !important; */
}

.popup-sukses .swal2-html-container.text-sukses {
    color: #a0a0a0;
    font-size: 1rem;
    margin: 0 0 1.25rem 0;
}

div:where(.swal2-container) div:where(.swal2-html-container) {
    padding: 0 !important;
}

div:where(.swal2-container) h2:where(.swal2-title) {
    padding: 0 !important;
}

.popup-sukses .swal2-actions {
    /* margin-top: 15px !important; */
}

div:where(.swal2-container) div:where(.swal2-actions) {
    margin: 0 !important;
}

.popup-sukses .swal2-confirm.button-sukses {
    background-color: #d92727;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(217, 39, 39, 0.3);
    transition: background-color 0.2s ease;
    margin-top: 15px !important;
}

.popup-sukses .swal2-confirm.button-sukses:hover {
    background-color: #c02121;
    margin-top: 15px !important;
}

.popup-sukses .swal2-close {
    color: #a0a0a0;
    font-size: 2rem;
    margin-top: 15px !important;
}

.popup-sukses .swal2-close:hover {
    color: #ffffff;
}

.modal-body .ornament {
    height: 400px;
    width: auto;
    object-fit: contain;
}

.modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: #fff;
    position: relative;
    z-index: 1;
}

.modal-content {
    background: #2A2B2F;
}

.modal .btn-close {
    color: #fff;
    position: absolute;
    top: 1rem;
    right: 1rem;
    opacity: 1;
    z-index: 10;
}

.teks-badra {
    font-family: 'Badra', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: normal;
}