@font-face {
    font-family: 'Alex Brush';
    src: url('/tema1/font/Alex_Brush/AlexBrush-Regular.ttf') format('ttf'),
        url('/tema1/font/Alex_Brush/AlexBrush-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Allura';
    src: url('/tema1/font/Allura/Allura-Regular.ttf') format('ttf'),
        url('/tema1/font/Allura/Allura-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Elsie';
    src: url('/tema1/font/Elsie/Elsie-Regular.ttf') format('ttf'),
        url('/tema1/font/Elsie/Elsie-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Italianno';
    src: url('/tema1/font/Italianno/Italianno-Regular.ttf') format('ttf'),
        url('/tema1/font/Italianno/Italianno-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Dancing Script';
    src: url('/tema1/font/Dancing_Script/static/DancingScript-Regular.ttf') format('ttf'),
        url('/tema1/font/Dancing_Script/static/DancingScript-Regular.ttf') format('truetype');
}

* {
    text-decoration: none !important;
    color: transparent !important;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    overflow-y: scroll;
    overflow-x: hidden !important;
}

.border-animation {
    border: 1px solid white;
}

.floats {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    text-align: center;
    z-index: 1000;
}

.section-one {
    position: relative;
    height: 100vh;
    overflow: hidden;
    /* Mencegah konten container melewati batas */
}

.section-one .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: cover;
    filter: brightness(50%);
    /* transition: filter 0.5s; */
}

.section-one .center-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

#welcoming-sentences-sec1 {
    font-family: 'Playball', serif;
    font-weight: 400;
    z-index: 0;
    font-size: 0vh;
    opacity: 0;
}

#user-name {
    font-family: 'Italianno', cursive;
    font-size: 0vh;
    opacity: 0;
    font-weight: 400;
    z-index: 0;
    color: rgb(255, 255, 255) !important;
}

#wedding-date-sec1 {
    font-family: 'Playball', serif;
    font-weight: 400;
    font-size: 0;
    opacity: 0;
}

#save-date-button {
    opacity: 0;
}

@media only screen and (max-width: 600px) {
    #welcoming-sentences-sec1 {
        font-family: 'Playball', serif;
        font-weight: 400;
        z-index: 0;
        font-size: 0vh;
        opacity: 0;
        font-size: 2.9vh !important;
    }

    #wedding-date-sec1 {
        font-family: 'Playball', serif;
        font-weight: 400;
        font-size: 0;
        opacity: 0;
        font-size: 2.2vh !important;
    }
}




/* Section Two */
.couple-information {
    background-color: black;
    padding: 2%;
}

#bible-verse-sec2 {
    font-family: 'Italianno', serif;
    font-size: 10vh;
    opacity: 0;
    color: #EBB760 !important;
}

#bible-verses-sec2 {
    font-family: 'Playball', serif;
    font-style: italic;
    opacity: 0;
    color: white !important;
}

#groom,
#bride {
    font-family: 'Playball', serif;
    font-weight: 400;
    opacity: 0;
}

.overlay-container {
    position: relative;
    overflow: hidden;
}

.overlay-container .overlayImage {
    position: absolute;
    top: 46.5%;
    left: 46.5%;
    transform: translate(-50%, -50%);
}

.overlay-container .ornament {
    max-width: 1000px;
    max-height: 1000px;
    width: auto;
    height: auto;
    object-fit: cover;
}

@media only screen and (max-width: 600px) {
    .overlay-container .ornament {
        max-width: 460px !important;
        max-height: 460px !important;
    }
}

@media only screen and (max-width: 390px) {
    .overlay-container .ornament {
        max-width: 470px;
        max-height: 470px;
    }
}


@media only screen and (max-width: 600px) {

    #groomProfileImage,
    #brideProfileImage {
        width: 90% !important;
        height: 55vh !important;
        max-width: none;
    }

    .groom-information {
        text-align: center !important;
    }

    .bride-information,
    .bride-information h1,
    .bride-information h3,
    .bride-information h4 {
        text-align: center !important;
    }
}

@media (min-width: 601px) {

    #groomProfileImage,
    #brideProfileImage {
        max-width: 100%;
        height: auto;
    }
}

@media only screen and (max-width: 600px) {
    #bible-verse-sec2 {
        font-size: 6vh;
    }

    #groom-name,
    #bride-name {
        font-size: 6vh;
    }

    #groomProfileImage,
    #brideProfileImage {
        max-width: 100%;
        height: 65vh !important;
    }

    .overlay-container .ornament {
        max-width: 420px;
        max-height: 420px;
    }
}


#groomProfileImage,
#brideProfileImage {
    width: 505.11px;
    height: 757.66px;
    object-fit: cover;
}

#groom-name,
#bride-name {
    font-family: 'Elsie', serif;
    font-size: 8vh;
    opacity: 0;
    color: rgba(255, 255, 255, 0.774) !important;
}

#groom-parent-name,
#bride-parent-name {
    font-family: 'Playball', serif;
    font-style: italic;
    color: #EBB760 !important;
    opacity: 0;
}

#big-text-couple-information {
    font-family: 'Playball', serif;
    font-weight: bold;
}



/* Section 3 */
.couple-story {
    position: relative;
    height: 120vh;
    overflow: hidden;
    z-index: 1;
}

.couple-story .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-image: url('https://media.istockphoto.com/id/621379358/photo/couple-enjoying-sunset-on-the-beach-in-winter.jpg?s=612x612&w=0&k=20&c=mmg0rtrA9g0OTsl1GgBc55QU0_9uQGFAzQMODhnTZ04=');
    background-repeat: no-repeat;
    background-size: cover;
    filter: brightness(50%);
}

/* Section 4 */
.event-detail {
    background-color: black;
    padding: 5% 0;
}

#save-date-text {
    font-family: 'Italianno', serif;
    font-size: 0vh;
    opacity: 0;
    color: #EBB760 !important;
}

#event-date {
    font-family: 'Playball', serif;
    font-size: 0vh;
    opacity: 0;
    color: white !important;
}

.countdown-box {
    font-family: 'Playball', serif;
}

.countdown-box .countdown {
    width: 50%;
}

.countdown-box h2 {
    font-size: 7.7vh;
}


@media (max-width: 768px) {
    .countdown-box .countdown {
        width: 95%;
    }

    .countdown-box h2 {
        font-size: 3.5vh;
    }

    .countdown-box h4 {
        font-size: 1.5vh;
    }
}

@media (max-width: 250px) {
    .countdown-box .countdown {
        width: 75%;
    }

    .countdown-box h2 {
        font-size: 4vh;
    }

    .countdown-box h4 {
        font-size: 2vh;
    }
}

@media (max-width: 390px) {
    .countdown-box .countdown {
        width: 95%;
    }

    .countdown-box h2 {
        font-size: 5.5vh;
    }

    .countdown-box h4 {
        font-size: 2.6vh;
    }
}


.countdown-box .days,
.hours,
.minutes,
.second {
    opacity: 0;
}

.event-detail-box {
    background-image: url('/Template One/asset/bg/geometric-bg.png');
    padding: 5% 0;
}

#liveStreamingText {
    font-family: 'Playball', serif;
    font-size: 6.5vh;
    color: #EBB760 !important;
    opacity: 0;
}

#liveStreamingSubText {
    font-family: 'Playball', serif;
    font-size: 2.5vh;
    font-style: italic;
    width: 65%;
    display: block;
    margin: 1% auto 4% auto;
    color: white !important;
    opacity: 0;
}

@media (max-width: 768px) {
    #liveStreamingSubText {
        font-family: 'Playball', serif;
        font-size: 2vh;
        font-style: italic;
        width: 85%;
        display: block;
        margin: 1% auto 4% auto;
        padding-bottom: 5%;
        color: white !important;
        opacity: 0;
    }

    .liveStreamingVid {
        width: 85%;
    }
}

#wedding-day-text-sec4 {
    font-family: 'Italianno', serif;
    font-size: 13vh;
    opacity: 0;
}

#wedding-days-text-sec4,
#wedding-date-text-sec4 {
    font-family: 'Playball', serif;
    opacity: 0;
}

@media (max-width: 768px) {
    #wedding-date-text-sec4 {
        font-family: 'Playball', serif;
        opacity: 0;
        margin-bottom: 15% !important;
    }

    .viewMapButtonAkadNikah {
        margin-bottom: 15%;
    }

    #wedding-day-text-sec4 {
        font-family: 'Italianno', serif;
        font-size: 7vh;
        opacity: 0;
    }

    #akad-nikah-event-text,
    #resepsi-event-text {
        font-family: 'Italianno', serif;
        font-size: 8.5vh !important;
        padding: 0;
        margin: 0;
        padding-bottom: 1.3%;
        opacity: 0;
    }

    #event-location-text {
        font-family: 'Playball', serif;
        font-size: 2.5vh;
        opacity: 0;
        padding: 0 3.5%;
    }

    .viewMapButton {
        font-size: 2vh !important;
        width: 65% !important;
    }
}

@media (max-width: 414px) {
    #wedding-date-text-sec4 {
        font-family: 'Playball', serif;
        opacity: 0;
        margin-bottom: 15% !important;
        font-size: 0.01vh !important;
    }

    .viewMapButtonAkadNikah {
        margin-bottom: 15%;
    }
}

#akad-nikah-event-text,
#resepsi-event-text {
    font-family: 'Italianno', serif;
    font-size: 11vh;
    padding: 0;
    margin: 0;
    padding-bottom: 1.3%;
    opacity: 0;
}

#event-time-text {
    font-family: 'Playball', serif;
    opacity: 0;
}

#event-location-text {
    font-family: 'Playball', serif;
    font-size: 2.5vh;
    opacity: 0;
}

#health-protocol-text-sec4 {
    font-family: 'Playball', serif;
    font-size: 8.5vh;
    padding-top: 4%;
    opacity: 0;
}

#protocol-card-text-sec4 {
    font-family: 'Playball', serif;
    font-size: 2.5vh;
}

@media (max-width: 768px) {
    .health-protocol-inside {
        width: 85% !important;
    }

    #health-protocol-text-sec4 {
        font-family: 'Playball', serif;
        font-size: 3.5vh !important;
        padding-top: 4%;
        opacity: 0;
    }


}



/* Section 5 */
.couple-gallery {
    background-color: black;
}

#coupleGalleryText {
    font-family: 'Playball', serif;
    color: #EBB760 !important;
    opacity: 0;
}

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
    margin: 0 -4px;
}

.column {
    flex: 25%;
    max-width: 33.3%;
    padding: 0 4px;
    margin-bottom: 5%;
}

.column img {
    margin-top: 8px;
    margin-bottom: 5%;
    width: 95%;
    height: 25%;
    filter: grayscale(1) brightness(0.5);
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s linear;
    object-fit: cover;
}

.column img:hover {
    filter: grayscale(0);
}

@media screen and (max-width: 600px) {
    .column {
        flex: 100%;
        max-width: 100%;
        margin: 0 !important;
        margin-bottom: auto !important;
    }

    .column img {
        filter: grayscale(0) brightness(1);
        display: block;
        margin: 5.5% auto;
        margin-top: 2.5% !important;
        height: auto;
    }
}

@media screen and (max-width: 768px) {
    .couple-story-container {
        flex-direction: column-reverse;
    }

    #coupleStoryImage1,
    #coupleStoryImage2,
    #coupleStoryImage3 {
        margin-bottom: 5%;
    }

    #coupleGalleryText {
        font-family: 'Playball', serif;
        color: #EBB760 !important;
        opacity: 0;
        padding-top: 5%;
    }
}

/* Section 6 */
.couple-stories {
    background-color: black;
    padding: 4% 0;
}

#love-story-text-sec6 {
    font-family: 'Playball', serif;
}

#love-story-head-sec6 {
    font-family: 'Playball', serif;
    opacity: 0;
}

#love-story-desc-sec6 {
    font-family: 'Elsie', serif;
    font-size: 2.5vh;
    opacity: 0;
}

@media (max-width: 768px) {
    #footageText {
        margin-bottom: 3% !important;
    }

    #footageVideo {
        width: 85%;
        padding: 0 0;
    }
}

/* Section 9 - Instagram Wedding Filter */
@media (max-width: 768px) {
    .instagramWeddingFilterWrapper {
        width: 75% !important;
    }

    .instagramWeddingFilterHeadingText {
        font-family: 'Cormorant Garamond', serif;
        font-size: 5vh !important;
        font-weight: 400;
    }

    .instagramWeddingFilterHeading {
        font-family: 'Cormorant Garamond', serif;
        font-size: 3.5vh !important;
        font-weight: 500;
    }
}

.instagramWeddingFilterWrapper {
    width: 50%;
}

.instagramWeddingFilterHeadingText {
    font-family: 'Cormorant Garamond', serif;
    font-size: 7.5vh;
    font-weight: 400;
}

.instagramWeddingFilterHeading {
    font-family: 'Cormorant Garamond', serif;
    font-size: 4.5vh;
    font-weight: 500;
}

/* Section 7 */
.digiEnve {
    background-image: url('/Template One/asset/bg/geometric-bg.png');
    background-color: black;
    padding: 3% 0;
}

label {
    font-family: 'Playball', serif;
}

#wedding-gift-text-sec7 {
    font-family: 'Playball', serif;
    opacity: 0;
}

@media (max-width: 768px) {
    #wedding-gift-text-sec7 {
        font-family: 'Playball', serif;
        opacity: 0;
        margin-top: 2% !important;
    }
}

#wedding-gift-subtext-sec7 {
    font-family: 'Elsie', serif;
    font-style: italic;
    opacity: 0;
}

#wedding-gift-form-text {
    font-family: 'Playball', serif;
}

@media screen and (max-width: 768px) {
    #wedding-gift-subtext-sec7 {
        font-family: 'Elsie', serif;
        font-style: italic;
        font-size: 1.9vh !important;
        opacity: 0;
        width: 85% !important;
    }
}

@media screen and (max-width: 768px) {
    .weddingGiftWrappersz {
        width: 75% !important;
    }
}

.weddingGiftWrappersz {
    width: 50%;
}

.weddingWishLog {
    max-height: 60vh;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    opacity: 0;
}

.weddingWishLog::-webkit-scrollbar {
    width: 0.4em;
}

.weddingWishLog::-webkit-scrollbar-track {
    background: transparent;
}

.weddingWishLog::-webkit-scrollbar-thumb {
    background-color: #888;
}

#wedding-wish-text-sec7 {
    font-family: 'Playball', serif;
}

#weddingWishTextSec7 {
    font-family: 'Playball', serif;
}

#weddingWishUserName {
    font-family: 'Playball', serif;
    font-size: 4vh;
    font-style: italic;
}

#weddingWishTimestamp {
    font-family: 'Playball', serif;
    font-size: 2vh;
    color: #EBB760 !important;
}

#weddingWishUserMessage {
    font-family: 'Playball', serif;
    font-size: 2.5vh;
    font-weight: bold;
}

.coupleQuote {
    padding: 0 0;
}

#couple-quote-sec7 {
    font-family: 'Playball', serif;
    font-style: italic;
    font-size: 2.7vh;
    opacity: 0;
    width: 85%;
    display: block;
    margin: 0 auto;
}

#coupleWeddingDate {
    font-family: 'Playball', serif;
    font-style: italic;
    color: white !important;
    text-align: center;
    padding-top: 1.5%;
    padding-bottom: 2.5%;
    opacity: 0;
}

#coupleName {
    font-family: 'Italianno', cursive;
    color: white !important;
    text-align: center;
    font-size: 0vh;
    opacity: 0;
}

.licensePart #licenseText {
    font-size: 2.2vh;
    font-family: 'Elsei', serif;
    color: rgba(255, 255, 255, 0.541) !important;
    text-align: center;
}

.music-box {
    width: 20%;
    margin: 7%;
    cursor: pointer;
    opacity: 0;
}

.music-box-rotating {
    animation: spin 4s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* RSVP */
.rsvp {
    display: block;
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: 0;
    /* background-image: url('https://media.istockphoto.com/id/639644728/pt/foto/texture-of-light-cream-paper-background-for-design-with-copy.jpg?s=170667a&w=0&k=20&c=8-YcFj8Hp88QvutkAsJKIhIZhGQNOtX1hU0rNvWT0r4='); */
}

.rsvpWrapper {
    padding: 2.5%;
    width: 54%;
    display: block;
    margin: 0 auto;
    margin-bottom: .5%;
}

.rsvpHeadingText {
    font-family: 'Anglecia';
    font-size: 5.5vh;
    text-align: center;
    color: #EBB760 !important;
}

.rsvpSubHeadingText {
    font-family: 'Anglecia';
    font-size: 3vh;
    text-align: center;
    color: white !important;
    margin-bottom: 7vh;
}

.rsvpButton {
    padding: 50%;
    cursor: pointer;
    background: #212529;
    color: white !important;
    width: 25px;
    height: 15px;
    text-align: center;
    display: inline-block;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rsvpButton:hover {
    background: rgb(39, 39, 39);
}

.peopleYouBringInput {
    text-align: center;
    color: black !important;
}

.peopleYouBringInput:focus {
    text-align: center;
    color: black !important;
}

.rsvpConfirmButton {
    background-color: #212529;
    color: white !important;
    text-decoration: none;
    text-align: center;
    font-size: 2.5vh;
    padding: 1% 4%;
    transition: .2s ease-in-out;
}

.rsvpConfirmButton:hover {
    background-color: #1a1a1a;
    color: white;
    text-decoration: none;
    text-align: center;
    font-weight: 500;
    font-size: 2.5vh;
}

/* Responsive Setup */
@media only screen and (max-width: 390px) {
    .rsvp {
        width: 90%;
        display: block;
        margin: 1% auto;
    }

    .rsvpWrapper {
        padding: 2.5%;
        width: 90%;
        display: block;
        margin: 0 auto;
        margin-bottom: 25%;
    }

    .rsvpHeadingText {
        font-family: 'Anglecia';
        font-size: 5.5vh;
        text-align: center;
        color: #794b28;
        margin-bottom: 2.5vh;
    }

    .rsvpButton {
        padding: 15px;
        margin: auto;
        cursor: pointer;
        background: #ce834a;
        color: white;
        width: 100%;
        max-width: 200px;
        text-align: center;
        display: inline-block;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .peopleYouBringInput {
        text-align: center;
        width: 75%;
        display: block;
        margin: 0 auto;
    }

    .rsvpConfirmButton {
        background-color: #212529;
        color: white !important;
        text-decoration: none;
        text-align: center;
        font-size: 2.5vh;
        padding: 1% 4%;
        transition: .2s ease-in-out;
        display: block;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 600px) {
    .rsvp {
        width: 90%;
        display: block;
        margin: 1% auto;
    }

    .rsvpWrapper {
        padding: 2.5%;
        width: 90%;
        display: block;
        margin: 0 auto;
        margin-bottom: 25%;
    }

    .rsvpHeadingText {
        font-family: 'Anglecia';
        font-size: 5.5vh;
        text-align: center;
        color: #794b28;
        margin-bottom: 2.5vh;
    }

    .rsvpButton {
        padding: 15px;
        margin: auto;
        cursor: pointer;
        background: #ce834a;
        color: white;
        width: 100%;
        max-width: 200px;
        text-align: center;
        display: inline-block;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .peopleYouBringInput {
        text-align: center;
        width: 75%;
        display: block;
        margin: 0 auto;
    }

    .rsvpConfirmButton {
        background-color: #212529;
        color: white !important;
        text-decoration: none;
        text-align: center;
        font-size: 2.5vh;
        padding: 1% 4%;
        transition: .2s ease-in-out;
        display: block;
        margin: 0 auto;
    }
}

.custom-select {
    position: relative;
    width: 100%;
    max-width: 100%;
    font-size: 1.15rem;
    color: #000 !important;
    z-index: 999 !important;
}

.select-button {
    width: 100%;
    font-size: 1.15rem;
    background-color: #fff;
    padding: 0.675em 1em;
    border: 1px solid #caced1;
    border-radius: 0.25rem;
    cursor: pointer;
    color: black !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.selected-value {
    text-align: left;
}

.arrow {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #000;
    transition: transform ease-in-out 0.3s;
}

.select-dropdown {
    position: absolute;
    list-style: none;
    width: 100%;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    border: 1px solid #caced1;
    border-radius: 4px;
    padding: 10px;
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
    transition: 0.5s ease;

    transform: scaleY(0);
    opacity: 0;
    visibility: hidden;
}

.select-dropdown:focus-within {
    box-shadow: 0 10px 25px rgba(94, 108, 233, 0.6);
}

.select-dropdown li {
    position: relative;
    cursor: pointer;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.select-dropdown li label {
    width: 100%;
    padding: 8px 10px;
    cursor: pointer;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.select-dropdown::-webkit-scrollbar {
    width: 7px;
}

.select-dropdown::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 25px;
}

.select-dropdown::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 25px;
}

.select-dropdown li:hover,
.select-dropdown input:checked~label {
    background-color: #f2f2f2;
}

.select-dropdown input:focus~label {
    background-color: #dfdfdf;
}

.select-dropdown input[type="radio"] {
    position: absolute;
    left: 0;
    opacity: 0;
}

.custom-select.active .arrow {
    transform: rotate(180deg);
}

.custom-select.active .select-dropdown {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
}