.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: var(--invitation-bg);
}
.loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font: 14px arial;
    color: var(--counter-bg);
}
.bg-navigation {
    background-color: var(--invitation-bg);
}
#modalInvitation .modal-content {
    background-color: var(--invitation-bg);
}
html body {
    /* background-color: var(--bs-primary); */
    font-family: "Baskervville", serif;
    background-size: contain, contain;
    background-repeat: no-repeat, no-repeat;
    background-position: top right, bottom left;
    background-attachment: fixed;
}
.font-title {
    font-family: "Great Vibes", cursive;
}
#cover .title,
#modalInvitation .title {
    font-size: 32px !important;
}
.badge-countdown {
    background-color: var(--bs-primary);
}
.splide__arrow {
    background: var(--bs-primary);
}
.splide--nav
    > .splide__slider
    > .splide__track
    > .splide__list
    > .splide__slide.is-active,
.splide--nav > .splide__track > .splide__list > .splide__slide.is-active {
    border: 3px solid var(--bs-primary);
}
.splide__arrow svg {
    fill: var(--bs-primary-light);
}
.form-control.form-control-solid {
    background-color: var(--bs-primary-light);
    border-color: var(--bs-primary-light);
    /* color: var(--); */
    transition: color 0.2s ease, background-color 0.2s ease;
}
.dropdown.show > .form-control.form-control-solid,
.form-control.form-control-solid:active,
.form-control.form-control-solid.active,
.form-control.form-control-solid:focus,
.form-control.form-control-solid.focus {
    background-color: var(--bs-primary-light);
    border-color: var(--bs-primary-light);
    /* color: var(--bs-primary-light); */
}
#kt_content {
    background: url(/themes/culture-greeny-javanese/img/asset-2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
.card-transparant {
    background-color: var(--invitation-bg);
    border-radius: 5px;
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 30%);
    color: var(--bs-primary);
    background-image: url(/themes/culture-greeny-javanese/img/asset-1-1.png);
    background-position: center;
    background-size: 50%;
    background-repeat: no-repeat;
    opacity: 0.2;
}
.bg-avatar .symbol {
    box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 30%);
    border: 4px solid var(--bs-primary);
}
.btn-primary,
.btn-primary .bi,
.btn-primary .fas {
    color: var(--invitation-bg) !important;
}
.badge-primary {
    color: var(--invitation-bg) !important;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: var(--invitation-bg) !important;
}
.svg-icon.svg-icon-primary svg [fill]:not(.permanent):not(g) {
    fill: var(--invitation-bg) !important;
}
.splide__arrow svg {
    fill: var(--invitation-bg) !important;
}
.bg-cover {
    opacity: 0.11;
}
.timeline .timeline-line {
    border-left-color: var(--bs-primary);
}
.border-secondary {
    border-color: var(--bs-secondary) !important;
}
.btn.btn-secondary {
    color: var(--invitation-bg);
    border-color: var(--bs-secondary) !important;
    background-color: var(--bs-secondary) !important;
}
.btn.btn-secondary i{
    color: var(--invitation-bg);
}
.decoration-img {
    background-image: url("/themes/culture-greeny-javanese/img/asset-1.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    animation: zoom-in-zoom-out 5s ease infinite;
    transform-origin: bottom center;
}
.decoration-left {
    animation: rotate-left 5s ease infinite;
    transform-origin: bottom center;
}
.decoration-right {
    animation: rotate-right 5s ease infinite;
    transform-origin: bottom center;
}
#modalGift .text-primary {
    color: var(--invitation-bg) !important;
}
#modalGift .btn-light {
    color: var(--invitation-bg) !important;
    background-color: var(--bs-primary) !important;
}
@keyframes zoom-in-zoom-out {
    0% {
        transform: scale(1.3, 1.3);
    }
    50% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(1.3, 1.3);
    }
}

@keyframes rotate-left {
    0% {
        transform: rotate(20deg);
    }
    50% {
        transform: rotate(-10deg);
    }
    100% {
        transform: rotate(20deg);
    }
}
@keyframes rotate-right {
    0% {
        transform: rotate(-20deg);
    }
    50% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(-20deg);
    }
}

.frame.ar-9-16{
    color: var(--bs-primary) !important;
}

.card-gift{
    background-color: var(--invitation-bg);
    margin-bottom: 10px;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}
.btn.btn-light {
    color: var(--invitation-bg);
    background-color: var(--bs-primary-hover);
}
.btn-check:checked + .btn.btn-active-primary, .btn-check:active + .btn.btn-active-primary, .btn.btn-active-primary:focus:not(.btn-active), .btn.btn-active-primary:hover:not(.btn-active), .btn.btn-active-primary:active:not(.btn-active), .btn.btn-active-primary.active, .btn.btn-active-primary.show, .show > .btn.btn-active-primary {
    color: var(--invitation-bg);
    border-color: var(--invitation-bg);
    background-color: var(--bs-primary-hover) !important;
}
.btn-check:checked + .btn.btn-secondary, .btn-check:active + .btn.btn-secondary, .btn.btn-secondary:focus:not(.btn-active), .btn.btn-secondary:hover:not(.btn-active), .btn.btn-secondary:active:not(.btn-active), .btn.btn-secondary.active, .btn.btn-secondary.show, .show > .btn.btn-secondary {
    color: var(--invitation-bg);
    border-color: var(--bs-primary-hover);
    background-color: var(--bs-primary-hover) !important;
}
.btn-check:checked + .btn.btn-secondary i, .btn-check:active + .btn.btn-secondary i, .btn.btn-secondary:focus:not(.btn-active) i, .btn.btn-secondary:hover:not(.btn-active) i, .btn.btn-secondary:active:not(.btn-active) i, .btn.btn-secondary.active i, .btn.btn-secondary.show i, .show > .btn.btn-secondary i {
    color: var(--invitation-bg);
}