html {
    scroll-behavior: smooth;
}

/* Exclusive 03 (JUWITA) */
body.juwita {
    /* Heading Family */
    --heading-family: "Bonheur Royale", cursive;
    --heading-style: normal;
    --heading-weight: 400;
    --heading-size: calc(13vw - 2.752px);
    --heading-lettercase: none;

    /* Body Text */
    --body-text-family: 'Playfair Display', serif;
    --body-text-style: normal;
    --body-text-weight: 400;
    --body-text-size: calc(4vw + 0.384px);
    --body-text-lettercase: none;

    /* Font Size Extra */
    --fs-extra-1: 1px;
    --fs-extra-2: calc(var(--fs-extra-1) * 2);      /* 2px */
    --fs-extra-3: calc(var(--fs-extra-1) * 3);      /* 3px */
    --fs-extra-4: calc(var(--fs-extra-1) * 4);      /* 4px */
    --fs-extra-5: calc(var(--fs-extra-1) * 5);      /* 5px */
    --fs-extra-6: calc(var(--fs-extra-1) * 8);      /* 8px */
    --fs-extra-7: calc(var(--fs-extra-1) * 10);     /* 10px */
    --fs-extra-8: calc(var(--fs-extra-1) * 13);     /* 13px */
    --fs-extra-9: calc(var(--fs-extra-1) * 14);     /* 14px */
    --fs-extra-10: calc(var(--fs-extra-1) * 15);    /* 15px */
    --fs-extra-11: calc(var(--fs-extra-1) * 20);    /* 20px */
    
    /* Colors */
    --error-clr: #B22222;
    --error-rgb: 178, 34, 34;

    /* Attribute */
    --body-height: 100vh;
    height: auto;
    overflow: hidden;

    /* Body background */
    background-color: var(--background-primary);

}
@media (min-width: 768px) and (max-width: 960px) {
    body.juwita {
        --heading-size: 56px;
        --body-text-size: 20px;
    }
}

@media (min-width: 961px) {
    body.juwita {
        --heading-size: 56px;
        --body-text-size: 18px;
    }
}

/* JUWITA - NAVY */
body.juwita.navy {
    /* Hex Color */
    --background-primary: #081023;
    --background-primary-rgb: 8, 16, 35;
    --background-secondary: #F5F5F5;
    --background-secondary-rgb: 245, 245, 245;
    --background-tertiary: #CFB381;
    --background-tertiary-rgb: 207, 179, 129;

    --text-primary: #F0B98B;
    --text-primary-rgb: 240, 185, 139;
    --text-secondary: #081023;
    --text-secondary-rgb: 8, 16, 35;
    --text-tertiary: #FFFFFF;
    --text-tertiary-rgb: 255, 255, 255;

    --button-text-primary: #081023;
    --button-text-primary-rgb: 8, 16, 35;
    --button-background-primary: #F0B98B;
    --button-background-primary-rgb: 240, 185, 139;
    --button-text-secondary: #FFFFFF;
    --button-text-secondary-rgb: 255, 255, 255;
    --button-background-secondary: #FFFFFF;
    --button-background-secondary-rgb: 255, 255, 255;

    /* ORNAMENT */
    --orn-01: url("https://katsudoto.id/media/template/exclusive-01/01/orn-01.png");
    --orn-02: url("https://katsudoto.id/media/template/exclusive-01/01/orn-02.png");
    --orn-03: url("https://katsudoto.id/media/template/exclusive-01/01/orn-03.png");
    --orn-04: url("https://katsudoto.id/media/template/exclusive-01/01/orn-04.png");
    --orn-05: url("https://katsudoto.id/media/template/exclusive-01/01/orn-05.png");
    --orn-06: url("https://katsudoto.id/media/template/exclusive-01/01/orn-06.png");

    /* BACKGROUND IMAGE */
    --bg-cover-01: url("https://katsudoto.id/media/template/exclusive-01/01/bg-cover-01.png");
    --bg-cover-02: url("https://katsudoto.id/media/template/exclusive-01/01/bg-cover-02.png");

    --bg-cover-lg-01: url("https://katsudoto.id/media/template/exclusive-01/01/bg-cover-lg-01.png");
    --bg-cover-lg-02: url("https://katsudoto.id/media/template/exclusive-01/01/bg-cover-lg-02.png");

    --bg-combine-01: url("https://katsudoto.id/media/template/exclusive-01/01/bg-combine-01.jpg");
    --bg-couple: url("https://katsudoto.id/media/template/exclusive-01/01/bg-couple.jpg");
    --bg-event: url("https://katsudoto.id/media/template/exclusive-01/01/bg-event.png");
    --bg-gift: url("https://katsudoto.id/media/template/exclusive-01/01/bg-gift.jpg");
    --bg-rsvp: url("https://katsudoto.id/media/template/exclusive-01/01/bg-rsvp.jpg");
    --bg-greet: url("https://katsudoto.id/media/template/exclusive-01/01/bg-greet.jpg");
    --bg-photo: url("https://katsudoto.id/media/template/exclusive-01/01/bg-photo-min.png");
    --bg-wish: url("https://katsudoto.id/media/template/exclusive-01/01/bg-wish.jpg");

    --wrapper-01: url("https://katsudoto.id/media/template/exclusive-01/01/wrapper-01.png");
    --wrapper-01-lg: url("https://katsudoto.id/media/template/exclusive-01/01/wrapper-01-lg.jpeg");
    
}

/* JUWITA - MAROON */
body.juwita.maroon {
    /* Hex Color */
    --background-primary: #2c070e;   
    --background-secondary: #f0b98b;
    --background-tertiary: #aa5e1f;    
    --wood-clr: #671726;

    /* RGB Color */
    --background-primary-rgb: 44, 7, 14;
    --background-secondary-rgb: 240, 185, 139;
    --background-tertiary-rgb: 170, 94, 31;
    --rgb-wood-clr: 103, 23, 38;

    /* ORNAMENT */
    --orn-01: url("https://katsudoto.id/media/template/exclusive-01/02/orn-01.png");
    --orn-02: url("https://katsudoto.id/media/template/exclusive-01/02/orn-02.png");
    --orn-03: url("https://katsudoto.id/media/template/exclusive-01/02/orn-03.png");
    --orn-04: url("https://katsudoto.id/media/template/exclusive-01/02/orn-04.png");
    --orn-05: url("https://katsudoto.id/media/template/exclusive-01/02/orn-05.png");
    --orn-06: url("https://katsudoto.id/media/template/exclusive-01/02/orn-06.png");

    /* BACKGROUND IMAGE */
    --bg-cover-01: url("https://katsudoto.id/media/template/exclusive-01/02/bg-cover-01.png");
    --bg-cover-02: url("https://katsudoto.id/media/template/exclusive-01/02/bg-cover-02.png");

    --bg-cover-lg-01: url("https://katsudoto.id/media/template/exclusive-01/02/bg-cover-lg-01.png");
    --bg-cover-lg-02: url("https://katsudoto.id/media/template/exclusive-01/02/bg-cover-lg-02.png");

    --bg-combine-01: url("https://katsudoto.id/media/template/exclusive-01/02/bg-combine-01.jpg");
    --bg-couple: url("https://katsudoto.id/media/template/exclusive-01/02/bg-couple.jpg");
    --bg-event: url("https://katsudoto.id/media/template/exclusive-01/02/bg-event.png");
    --bg-gift: url("https://katsudoto.id/media/template/exclusive-01/02/bg-gift.jpg");
    --bg-rsvp: url("https://katsudoto.id/media/template/exclusive-01/02/bg-rsvp.jpg");
    --bg-greet: url("https://katsudoto.id/media/template/exclusive-01/02/bg-greet.jpg");
    --bg-photo: url("https://katsudoto.id/media/template/exclusive-01/02/bg-photo.jpg");
    --bg-wish: url("https://katsudoto.id/media/template/exclusive-01/02/bg-wish.jpg");

    --wrapper-01: url("https://katsudoto.id/media/template/exclusive-01/02/wrapper-01.png");
    --wrapper-01-lg: url("https://katsudoto.id/media/template/exclusive-01/02/wrapper-01-lg.jpg");

}


/* JUWITA - LAVENDER */
body.juwita.lavender {
    /* Hex Color */
    /* --background-primary: #c69dd5;    */
    --background-primary: #c8a8d9;   
    /* --background-secondary: #2a0040; */
    --background-secondary: #613379;
    --background-tertiary: #2a0040;    
    --wood-clr: #5a4d81;

    /* --haha: #c8a8d9;
    --font-clr: #613379; */

    /* RGB Color */
    --background-primary-rgb: 192, 157, 213;
    --background-secondary-rgb: 42, 0, 64;
    --background-tertiary-rgb: 170, 94, 31;
    --rgb-wood-clr: 90, 77, 129;

    /* ORNAMENT */
    --orn-01: url("https://katsudoto.id/media/template/exclusive-01/03/orn-01.png");
    --orn-02: url("https://katsudoto.id/media/template/exclusive-01/03/orn-02.png");
    --orn-03: url("https://katsudoto.id/media/template/exclusive-01/03/orn-03.png");
    --orn-04: url("https://katsudoto.id/media/template/exclusive-01/03/orn-04.png");
    --orn-05: url("https://katsudoto.id/media/template/exclusive-01/03/orn-05.png");
    --orn-06: url("https://katsudoto.id/media/template/exclusive-01/03/orn-06.png");

    /* BACKGROUND IMAGE */
    --bg-cover-01: url("https://katsudoto.id/media/template/exclusive-01/03/bg-cover-01.png");
    --bg-cover-02: url("https://katsudoto.id/media/template/exclusive-01/03/bg-cover-02.png");

    --bg-cover-lg-01: url("https://katsudoto.id/media/template/exclusive-01/03/bg-cover-lg-01.png");
    --bg-cover-lg-02: url("https://katsudoto.id/media/template/exclusive-01/03/bg-cover-lg-02.png");

    --bg-combine-01: url("https://katsudoto.id/media/template/exclusive-01/03/bg-combine-01.jpg");
    --bg-couple: url("https://katsudoto.id/media/template/exclusive-01/03/bg-couple.jpg");
    --bg-event: url("https://katsudoto.id/media/template/exclusive-01/03/bg-event.png");
    --bg-gift: url("https://katsudoto.id/media/template/exclusive-01/03/bg-gift.jpg");
    --bg-rsvp: url("https://katsudoto.id/media/template/exclusive-01/03/bg-rsvp.jpg");
    --bg-greet: url("https://katsudoto.id/media/template/exclusive-01/03/bg-greet.jpg");
    --bg-photo: url("https://katsudoto.id/media/template/exclusive-01/03/bg-photo.jpg");
    --bg-wish: url("https://katsudoto.id/media/template/exclusive-01/03/bg-wish.jpg");

    --wrapper-01: url("https://katsudoto.id/media/template/exclusive-01/03/wrapper-01.png");
    --wrapper-01-lg: url("https://katsudoto.id/media/template/exclusive-01/03/wrapper-01-lg.jpg");

}

/* JUWITA - BABY BLUE */
body.juwita.baby_blue {

    /* Hex Color */
    --background-primary: #a9c6cc;
    /* --background-primary: #aacacf; */
    --background-secondary: #304555;
    --background-tertiary: #182834;
    --wood-clr: #a9c6cc;

    /* RGB Color */
    --background-primary-rgb: 169, 198, 204;
    /* --background-primary-rgb: 170,202,207; */
    --background-secondary-rgb: 48, 69, 85;
    --background-tertiary-rgb: 24, 40, 52;
    --rgb-wood-clr: 169, 198, 204;

    /* ORNAMENT */
    --orn-01: url("https://katsudoto.id/media/template/exclusive-01/04/orn-01.png");
    --orn-02: url("https://katsudoto.id/media/template/exclusive-01/04/orn-02.png");
    --orn-03: url("https://katsudoto.id/media/template/exclusive-01/04/orn-03.png");
    --orn-04: url("https://katsudoto.id/media/template/exclusive-01/04/orn-04.png");
    --orn-05: url("https://katsudoto.id/media/template/exclusive-01/04/orn-05.png");
    --orn-06: url("https://katsudoto.id/media/template/exclusive-01/04/orn-06.png");

    /* BACKGROUND IMAGE */
    --bg-cover-01: url("https://katsudoto.id/media/template/exclusive-01/04/bg-cover-01.png");
    --bg-cover-02: url("https://katsudoto.id/media/template/exclusive-01/04/bg-cover-02.png");

    --bg-cover-lg-01: url("https://katsudoto.id/media/template/exclusive-01/04/bg-cover-lg-01.png");
    --bg-cover-lg-02: url("https://katsudoto.id/media/template/exclusive-01/04/bg-cover-lg-02.png");

    /* Eliminate bg combine */
    --bg-combine-01: url("https://katsudoto.id/media/template/exclusive-01/04/bg-combine-01.webp");

    --bg-couple: url("https://katsudoto.id/media/template/exclusive-01/04/bg-couple.jpg");
    --bg-event: url("https://katsudoto.id/media/template/exclusive-01/04/bg-event.png");
    --bg-gift: url("https://katsudoto.id/media/template/exclusive-01/04/bg-gift.jpg");
    --bg-rsvp: url("https://katsudoto.id/media/template/exclusive-01/04/bg-rsvp.jpg");
    --bg-greet: url("https://katsudoto.id/media/template/exclusive-01/04/bg-greet.jpg");
    --bg-photo: url("https://katsudoto.id/media/template/exclusive-01/04/bg-photo.jpg");
    --bg-wish: url("https://katsudoto.id/media/template/exclusive-01/04/bg-wish.jpg");

    --wrapper-01: url("https://katsudoto.id/media/template/exclusive-01/04/wrapper-01.jpg");
    --wrapper-01-lg: url("https://katsudoto.id/media/template/exclusive-01/04/wrapper-01-lg.jpg");

}

/* Fonts */
body.juwita h1,
body.juwita h2,
body.juwita h3,
body.juwita h4,
body.juwita h5,
body.juwita h6 {
    font-family: var(--heading-family);
    font-style: var(--heading-style);
    font-weight: var(--heading-weight);
    font-size: var(--heading-size);
    text-transform: var(--heading-lettercase);
    line-height: normal;
    color: var(--text-primary);
}
body.juwita p {
    font-family: var(--body-text-family);
    font-style: var(--body-text-style);
    font-weight: var(--body-text-weight);
    font-size: var(--body-text-size);
    text-transform: var(--body-text-lettercase);
    line-height: normal;
    color: var(--text-secondary);
}
.body.juwita span {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    font-weight: bold;
}
body.juwita sup {
    font-family: inherit;
    font-size: 0.7em;
    color: inherit;
}
body.juwita font {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    text-decoration: inherit;
    font-style: inherit;
}

/* Top Cover */
.top-cover {
    background-color: var(--background-secondary);
    width: 100%;
    /* height: 100vh; */
    height: var(--body-height);
    /* position: relative; */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    overflow: hidden;
    opacity: 1;
    
    transition: all 1.8s;
    transition-timing-function: cubic-bezier(.23,.56,.38,.78);
    -webkit-transition-timing-function: cubic-bezier(.23,.56,.38,.78);
    -moz-transition-timing-function: cubic-bezier(.23,.56,.38,.78);
    -o-transition-timing-function: cubic-bezier(.23,.56,.38,.78);
}
.top-cover.hide {
    top: -120%;
    bottom: 120%;
    pointer-events: none;
}
.top-cover .inner {
    width: 100%;
    height: 100%;    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
}

.top-cover .inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
}
.top-cover.overlay-1 .inner::before {
    background: linear-gradient( to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2) );
}

.top-cover .inner .details {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px 0px;
    position: relative;
    margin-top: auto;
    margin-bottom: min(calc(var(--body-height) * 15 / 100), 170px);
    /* margin-bottom: min(17vh, 170px); */    
    /* margin-top: auto;
    margin-bottom: 25%; */
}
.top-cover .inner .details > div {
    width: 100%;
    display: block;
    text-align: center;
    padding: 10px;
}
.top-cover .inner .details .text-01 {
    font-size: calc(var(--heading-size) + var(--fs-extra-10) + var(--fs-extra-1));
    font-family: var(--heading-family);
    color: var(--text-primary);
    word-wrap: break-word;
}
body.juwita.light .top-cover .inner .details .text-01 {
    color: var(--text-tertiary);
}
.top-cover .inner .details .text-02 {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    color: var(--text-tertiary);
    margin-bottom: 0.15em;
}

/* Cover free text */
section.top-cover .cover-free-text {
    font-size: var(--body-text-size);
    margin-bottom: 0.15em;
    font-family: var(--body-text-family);
    color: var(--text-tertiary);
}

.top-cover .inner .details .link-01 {
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 7px;
    border: none;
    background: var(--button-background-primary);
    color: var(--button-text-primary);
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    font-weight: 400;
    display: inline-block;
    transition: all 0.35s ease-in-out;
}
.top-cover .inner .details .link-01:hover {
    background: rgba(var(--button-background-primary-rgb), 0.8);
    color: var(--button-text-primary);
}
body.juwita.light .top-cover .inner .details .link-01 {
    border-color: var(--background-secondary);
    background: var(--background-secondary);   
    color: var(--text-tertiary);
}
body.juwita.light .top-cover .inner .details .link-01:hover {
    border-color: var(--background-tertiary);
    background: var(--background-tertiary);
}
.top-cover > .cover-show {
    width: 100%!important;
    height: 100%!important;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    background: #fff;
}
.top-cover > .cover-show .slick-list {
    width: 100%!important;
    height: 100%!important;
}
.top-cover > .cover-show .slick-track {
    width: 100%!important;
    height: 100%!important;
    position: relative!important;
}
.top-cover > .cover-show .picture-outer {
    width: 100%!important;
    height: 100%!important;
    position: absolute!important;
    top: 0!important;
    left: 0!important;
}
.top-cover > .cover-show .picture-outer img {
    width: 100%!important;
    height: 100%!important;
    object-fit: cover;
    object-position: center;
    /* animation: zoom-out 40s infinite; */
}


@keyframes zoom-out {
    0% {
        transform: scale(1);
    }
    70% {
        transform: scale(1.4);
    }
    100% {
        transform: scale(1);
    }
}






/* COVER */
.cover {
    width: 100%;
    height: auto;
    background: var(--background-primary);
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.cover .cover-inner {
    position: relative;
    width: 100%;
    /* min-height: 100vh; */
    /* height: 100vh; */
    height: var(--body-height);
    padding: 10px 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.cover .cover-inner.covers {
    justify-content: flex-start;
}
.cover .cover-inner::before {
    content: '';
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--background-primary-rgb), 0.5);
    background-image: none;
}
.cover .cover-inner.covers.desktop::before {
    height: 50%;
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(var(--background-primary-rgb),0), rgba(var(--background-primary-rgb),0.8), rgba(var(--background-primary-rgb),1));
}
.cover .cover-inner .cover-greet {
    width: 100%;    
    margin-bottom: 0;
    color: var(--background-primary);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 5;
    padding: 15px 10px;
    /* background-color: lightblue; */
}
/* .cover .cover-inner.covers.desktop .cover-greet {
    height: 20%;
} */
.cover .cover-greet > div {
    width: 100%;
    padding: 5px;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    position: relative;
}

.cover .cover-greet > div .logo {
    width: clamp(55px, 3%, 80px);
    max-height: 55px;
    object-fit: contain;
    margin: 0;
    object-position: center;
    display: block;
}
.cover .cover-greet > div .logo.logo-2x {
    width: 100px;
    max-height: 100px;
}

.cover .cover-greet > div p {
    font-size: var(--body-text-size);
    line-height: clamp(28px, 2vw, 30px);
    font-weight: 500;
    font-family: var(--body-text-family);
    letter-spacing: 3px;
    color: var(--text-tertiary);
    margin-bottom: .25em;
}
.cover .cover-greet > div p:last-child {
    font-size: var(--body-text-size);
    font-weight: 500;
    margin-bottom: 0;
}
.cover .cover-wrapper {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;    
    overflow: hidden;
    padding: 10px;
    /* background-color: lightsalmon; */
}
.cover .cover-inner.covers .cover-wrapper {
    height: 60%;
    /* background-color: lightsalmon; */
}
.cover .cover-picture {
    margin-top: auto;
    position: relative;
    display: none;
    height: 100%;
    width: 100%;
}
.cover .cover-inner.covers .cover-picture {
    display: block;
}
.cover .cover-picture > .cover-show {
    position: relative;
    z-index: 4;
    width: 70%!important;
    max-width: 1366px!important;
    height: 100%;
    overflow: hidden;
    border-radius: 24px;
    margin: 0 auto;
    background: #fff;
}
.cover .cover-picture > .cover-show .slick-list {
    width: 100%!important;
    height: 100%!important;
}
.cover .cover-picture > .cover-show .slick-track {
    width: 100%!important;
    height: 100%!important;
    position: relative!important;
}
.cover .cover-picture > .cover-show .picture-outer {
    width: 100%!important;
    height: 100%!important;
    overflow: hidden;
    top: 0;
    left: 0;
    position: absolute!important;
}
.cover .cover-picture > .cover-show .picture-outer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(var(--background-primary-rgb),0), rgba(var(--background-primary-rgb),0), rgba(var(--background-primary-rgb),0.8), rgba(var(--background-primary-rgb),1));
    z-index: 1;    
}
.cover .cover-picture > .cover-show .picture-outer .picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: inline-block;
}
.cover .cover-picture > .cover-show .picture-outer .picture[src*=".png"] {
    object-fit: contain;
}

.cover .cover-bridegroom {
    position: relative;
    z-index: 5;    
    padding: 10px;
    z-index: 40;
    width: 75%;
    max-width: 1366px;
    margin-top: 20px;
    /* background-color: lightcoral; */
    /* background-color: lightblue; */
    /* border-bottom: 1px solid lightblue; */
}
.cover .cover-inner.covers .cover-bridegroom {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: clamp(20px, 2.5%, 75px);    
}
.cover .cover-bridegroom > div {   
    text-align: center;
    padding: 5px;   
}
.cover .cover-bridegroom > div h1 {
    /* font-size: clamp(42px, 5.5vw, 85px); */
    font-size: calc(var(--heading-size) + var(--fs-extra-11) + var(--fs-extra-6));
    line-height: 110%;
    font-family: var(--heading-family);
    font-weight: 500;
    color: var(--text-primary);
    word-wrap: break-word;
}
body.juwita.light .cover .cover-bridegroom > div h1 {
    color: var(--text-tertiary);
}
.cover .cover-bridegroom > div p {
    font-size: var(--body-text-size);
    line-height: clamp(28px, 2vw, 30px);
    margin-bottom: 1em;
    font-family: var(--body-text-family);
    letter-spacing: 4px;
    color: var(--text-tertiary);
}
.cover .cover-inner.with-covers .cover-bridegroom > div p {
    margin-bottom: 1em;
}
.cover .cover-bridegroom > div p.date {
    text-transform: uppercase;
}
.cover .cover-bridegroom > div p.date sup {
    font-family: var(--body-text-family);
    font-size: clamp(8px, 1.1vw, 10px);
}
.cover .cover-bridegroom > div a {
    text-decoration: none;
    padding: 0.25em 1em;
    border-radius: 7px;
    background: transparent;
    border: 1px solid var(--background-secondary);
    color: var(--background-secondary);
    /* font-size: 1.5vw; */
    font-size: clamp(16px, 1.75vw, 20px);
    line-height: clamp(26px, 2vw, 30px);
    font-family: var(--body-text-family);
    font-weight: 700;
    letter-spacing: 3px;
    display: inline-block;
    transition: all 0.25s ease-in-out;
}
body.juwita.light .cover .cover-bridegroom > div a {
    border-color: var(--text-tertiary);
    color: var(--text-tertiary);
}
.cover .cover-bridegroom > div a:hover {
    background: var(--background-secondary);
    color: var(--background-primary);
}
body.juwita.light .cover .cover-bridegroom > div a:hover {
    border-color: var(--background-tertiary);
    background: var(--background-tertiary);
}
/* Cover Show (Cover Banner) */
.cover .cover-inner > .cover-show {
    width: 100%!important;
    height: 100%!important;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    background: #fff;
}
.cover .cover-inner > .cover-show .slick-list {
    width: 100%!important;
    height: 100%!important;
}
.cover .cover-inner > .cover-show .slick-track {
    width: 100%!important;
    height: 100%!important;
    position: relative!important;
}
.cover .cover-inner > .cover-show .picture-outer {
    width: 100%!important;
    height: 100%!important;
    position: absolute!important;
    top: 0!important;
    left: 0!important;
}
.cover .cover-inner > .cover-show .picture-outer img {
    width: 100%!important;
    height: 100%!important;
    object-fit: cover;
    object-position: center;
    filter: blur(2px);
}
.cover .cover-inner > .cover-show .picture-outer img[src*=".png"] {
    object-fit: contain;
}

body.juwita.baby_blue .cover .cover-greet > div p,
body.juwita.baby_blue .cover .cover-bridegroom > div h1,
body.juwita.baby_blue .cover .cover-bridegroom > div p {
    color: var(--background-secondary);
}
body.juwita.baby_blue .cover .cover-bridegroom > div a {
    border-color: var(--background-secondary);
    background-color: var(--background-secondary);
    color: var(--text-tertiary);
}
body.juwita.baby_blue .cover .cover-bridegroom > div a:hover {
    border-color: var(--background-tertiary);
    background-color: var(--background-tertiary);
    color: var(--text-tertiary);
}



.cover .orn {
    position: absolute;
}
.cover .orn.orn-02 {
    bottom: 0;
    right: 0;
    width: 40%;
    height: min(28%, 250px);
    /* height: min(28%, 250px); */
    z-index: 30;
    background: var(--orn-02);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom 0 right 0;
    /* background-color: lightsalmon; */
    pointer-events: none;
}
.cover .orn.bg-cover-01 {
    top: 0;
    left: 0;
    width: 100%;
    /* height: 220px; */
    /* height: clamp(420px, 72.5%, 780px); */
    /* height: clamp(420px, 80%, 760px); */
    height: clamp(630px, 80%, 680px);
    z-index: 1;
    background: var(--bg-cover-lg-01);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom 0 right 0;
    pointer-events: none;
    /* background-color: lightblue; */
}
.cover .orn.bg-cover-02 {
    left: 0;
    bottom: 0;
    width: 50%;
    /* height: min(22%, 210px); */
    height: clamp(175px, 21.5%, 210px);
    /* height: min(25%, 250px); */
    z-index: 20;
    background-image: var(--bg-cover-lg-02);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top 0 left -75px;
    pointer-events: none;
    /* background-color: lightcoral; */
}



/* BRIDE GROOM */
.bridegroom {
    width: 100%;
    /* min-height: 100vh; */
    background-color: var(--background-primary);
    background-image: var(--bg-couple);
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.bridegroom.hide {
    display: none;
}
.bridegroom .bridegroom-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 40px 20px;
}
.bridegroom .bridegroom-inner .head {
    width: 960px;
    padding: 10px;
    text-align: center;
}
.bridegroom .bridegroom-inner .head h1 {
    font-family: var(--heading-family);
    color: var(--text-tertiary);
    margin-bottom: .25em;
}
.bridegroom .bridegroom-inner .head p {
    font-family: var(--body-text-family);
    color: var(--text-tertiary);
}
.bridegroom .bridegroom-inner .body {
    padding: 20px 0;
    width: 100%;
    min-height: 400px;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    position: relative;
}
.bridegroom .bridegroom-inner .body.bride-first {
    flex-direction: row-reverse;
}
.bridegroom .bridegroom-inner .body .bride,
.bridegroom .bridegroom-inner .body .groom {
    width: min(40%, 720px);
    overflow: hidden;
}
.bridegroom .bridegroom-inner .body .bridegroom-border {
    width: 100%;
    max-width: 280px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 5px;
    margin: 10px auto;
}
.bridegroom .bridegroom-inner .body .bridegroom-border .bridegroom-picture {
    width: 100%;
    height: 100%;
    border-radius: 22px;
    object-fit: cover;
    position: relative;
    z-index: 2;
    background: var(--background-tertiary);
}
.bridegroom .bridegroom-inner .body .bridegroom-border::before {
    content: '';
    position: absolute;
    z-index: 9999;    
    width: clamp(70px, 45%, 110px);;
    height: clamp(70px, 45%, 110px);;
    background-image: var(--orn-01);
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0;
}
.bridegroom .bridegroom-inner .body > div:nth-of-type(1) .bridegroom-border::before {
    left: 0;
    background-position: left 0 bottom 0;
}
.bridegroom .bridegroom-inner .body > div:nth-of-type(3) .bridegroom-border::before {
    right: 0;
    background-position: right 0 bottom 0;
    transform: scaleX(-1);
}
.bridegroom .bridegroom-inner .body.bride-first > div:nth-of-type(1) .bridegroom-border::before {
    left: unset;
    right: 0;
    background-position: right 0 bottom 0;
    transform: scaleX(-1) translate(12px, -12px);
}
.bridegroom .bridegroom-inner .body.bride-first > div:nth-of-type(3) .bridegroom-border::before {
    left: 0;
    bottom: 0;
    background-position: left 0 bottom 0;
    transform: scaleX(1) translate(12px, -12px);
}
.bridegroom .bridegroom-inner .body .bridegroom-separator {
    position: absolute;
    left: 50%;
    top: 25%;
    transform: translate(-50%, -50%);
    padding: 10px;
    font-size: var(--heading-size);
    color: var(--text-primary);
    font-family: var(--heading-family);
}
.bridegroom .bridegroom-inner .body .bridegroom-details {
    text-align: center;
    padding: 20px;
}
.bridegroom .bridegroom-inner .body .bridegroom-details h1 {
    font-family: var(--heading-family);
    color: var(--text-primary);
    margin-bottom: .25em;
}
.bridegroom .bridegroom-inner .body .bridegroom-details p {
    font-family: var(--body-text-family);
    color: var(--text-tertiary);
    margin-bottom: .5em;
}
.bridegroom .bridegroom-inner .body .bridegroom-details a,
.bridegroom .bridegroom-inner .body .bridegroom-details a em {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    line-height: normal;
    color: var(--button-text-secondary);
    text-decoration: none;
}
.bridegroom .bridegroom-inner .body .bridegroom-details a:hover {
    border-bottom: 1px solid var(--button-text-secondary);
}
body.juwita.light .bridegroom .bridegroom-inner .body .bridegroom-separator {
    color: var(--text-primary);
}
body.juwita.light .bridegroom .bridegroom-inner .head h1,
body.juwita.light .bridegroom .bridegroom-inner .head p,
body.juwita.light .bridegroom .bridegroom-inner .body .bridegroom-details h1,
body.juwita.light .bridegroom .bridegroom-inner .body .bridegroom-details p,
body.juwita.light .bridegroom .bridegroom-inner .body .bridegroom-details a,
body.juwita.light .bridegroom .bridegroom-inner .body .bridegroom-details a em {
    color: var(--background-secondary);
}




/* SAVE DATE */
.save-date {
    width: 100%;
    min-height: 200px;
    background: var(--background-tertiary);
    overflow: hidden;
}
.save-date .save-date-inner {
    width: 640px;
    padding: 20px 0 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.save-date-inner .save-date-title {
    padding: 20px;
    text-align: center;
    width: 100%;
}
.save-date-inner .save-date-title h1 {
    font-family: var(--heading-family);
    font-size: var(--heading-size);
    color: var(--background-primary);
}
.save-date-inner .save-date-title p {
    font-family: var(--body-text-family);
    color: var(--background-primary);
}
.save-date-inner .save-date-title p sup {
    font-family: var(--body-text-family);
}
.save-date-inner .separator {
    padding: 0 10px;
    width: 100%;
}
.save-date-inner .separator .orn.orn-03 {
    width: 100%;
    height: clamp(40px, 5vw, 70px);
    background-image: var(--orn-03);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    /* margin: -17px 0; */
}
.save-date .save-date-inner .schedule {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--background-primary);
    width: 100%;
}
.save-date .save-date-inner .schedule > h1 {
    font-size: 30px;
    margin-bottom: 0.35em;
    color: var(--background-primary);
}
.save-date .save-date-inner .schedule .countdown {
    width: 80%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    column-gap: 10px;
    row-gap: 10px;
}
.save-date .save-date-inner .schedule .countdown > div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 10px;
}
.save-date .save-date-inner .schedule .countdown h1 {
    font-family: var(--body-text-family);
    font-size: var(--heading-size);
    color: var(--text-secondary);
    margin-bottom: 0.15em;
}
.save-date .save-date-inner .schedule .countdown small {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    color: var(--text-secondary);
}
.save-date .save-date-inner .foot {
    padding: 10px 10px;
    width: 100%;
    text-align: center;
    margin-top: 30px;
    display: block;
}
.save-date .save-date-inner .foot .link-01 {
    outline: none;
    border: none;
    padding: 8px 24px;
    border-radius: 4px;
    font-size: var(--body-text-size);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    font-family: var(--body-text-family);
    font-weight: var(--body-text-weight);
    margin: 0 auto;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    background: var(--button-background-primary);
    color: var(--button-text-primary);
}
.save-date .save-date-inner .foot .link-01:hover {
    background: rgba(var(--button-background-primary-rgb), 0.8);
    color: var(--button-text-primary);
}
body.juwita.light .save-date .save-date-inner .foot .link-01 {
    border-color: var(--background-secondary);
    color: var(--background-secondary);
}
body.juwita.light .save-date .save-date-inner .foot .link-01:hover {
    color: var(--text-tertiary);
}
body.juwita.light .save-date-inner .save-date-title h1,
body.juwita.light .save-date-inner .save-date-title p ,
body.juwita.light .save-date-inner .save-date-title p sup,
body.juwita.light .save-date .save-date-inner .schedule .countdown h1,
body.juwita.light .save-date .save-date-inner .schedule .countdown small {
    color: var(--background-secondary);
}



/* LOVE STORY */
.love-story {
    padding: 40px 20px;
    background: var(--background-primary);
}
.love-story .inner {
    width: 1200px;
    margin: 0 auto;
    display: block;
}
.love-story .inner .title {
    padding: 10px;
    text-align: center;
}
.love-story .inner .title h1 {
    font-family: var(--heading-family);
    font-size: var(--heading-size);
    color: var(--text-primary);
    margin-bottom: 0;
}
body.juwita.light .love-story .inner .title h1 {
    color: var(--text-tertiary);
}
.love-story .inner .title p {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    line-height: clamp(28px, 2vw, 30px);
    color: var(--text-tertiary);
}
.love-story .inner .timeline {
    position: relative;
    margin: 20px auto;
}
.love-story .inner .timeline .story {
    line-height: normal;
    position: relative;
    padding: 20px 40px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
}
.love-story .inner .timeline .story:nth-child(odd) {
    flex-direction: row;
    text-align: left;
}
.love-story .inner .timeline .story:nth-child(even) {
    flex-direction: row-reverse;
    text-align: right;
}
.love-story .inner .timeline .story .picture {
    height: clamp(200px, 27.5vw, 320px);
    width: 48%;
    border-radius: 22px;
    overflow: hidden;
    /* background-color: lightsalmon; */
}
.love-story .inner .timeline .story .picture img {
    width: 100%;
    height: 100%;
    border-radius: 22px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    object-position: center;
    background-color: var(--background-secondary);
}
.love-story .inner .timeline .story .content {
    width: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.love-story .inner .timeline .story .content .content-inner {
    padding: 10px 15px 25px 15px;
    border-bottom: 2px solid var(--background-secondary);
}
.love-story .inner .timeline .story .content .content-inner h2 {    
    margin-bottom: .5em;
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    font-weight: 600;
    color: var(--text-tertiary);
}
.love-story .inner .timeline .story .content .content-inner p {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    color: var(--text-tertiary);
}
body.juwita.baby_blue .love-story .inner .title h1,
body.juwita.baby_blue .love-story .inner .title p,
body.juwita.baby_blue .love-story .inner .timeline .story .content .content-inner h2,
body.juwita.baby_blue .love-story .inner .timeline .story .content .content-inner p {
    color: var(--background-secondary);
}
body.juwita.baby_blue .love-story .inner .timeline .story .content .content-inner {
    border-color: var(--text-tertiary);
}





/* GAALLERY WRAPPER */
.gallery-wrapper {
    position: relative;
}
.gallery-wrapper::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: var(--bg-photo);
    background-size: 100% auto;
    background-position: top center;
    background-repeat: repeat;
    opacity: .5;
}

/* GALLERY */
.gallery-wrapper .gallery {
    background: var(--background-secondary);
}
.gallery > .title {
    background-color: transparent;
    margin: 0;
    margin-top: 20px;
}
.gallery > .title h1,
.video-gallery .inner > .title h1 {
    font-family: var(--heading-family);
    font-size: var(--heading-size);
    margin-bottom: .35em;
    color: var(--text-secondary);
}
.gallery > .title p,
.video-gallery .inner > .title p {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    color: var(--text-secondary);
}

.video-gallery {
    background-color: var(--background-secondary);
}
.video-gallery .inner .video-outer .video > .title h2 {
    text-align: center;
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    color: var(--text-secondary);
}

.video-gallery .inner .video-outer .video .preview .play-btn {
    color: var(--text-tertiary);
}

/* Light */
body.juwita.light .gallery > .title h1,
body.juwita.light .video-gallery .inner > .title h1,
body.juwita.light .gallery > .title p,
body.juwita.light .video-gallery .inner > .title p,
body.juwita.light .video-gallery .inner .video-outer .video > .title h2 {
    color: var(--background-secondary);
}





/* EVENT */
.event-outer {
    position: relative;
    background: var(--background-secondary);
    overflow: hidden;
}
.event-outer .event-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.event-outer .event-inner .head {
    padding: 20px;
    padding-top: 200px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 250px;
    margin-bottom: -80px;
}
.event-outer .event-inner .head::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--bg-event);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
}
.event-outer .event-inner .head > .title {
    width: 960px;
    text-align: center;
    padding: 20px;
    margin: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 3;
    margin-bottom: -10px;
}
.event-outer .event-inner .head > .title h1 {
    font-family: var(--heading-family);
    font-size: var(--heading-size);
    color: var(--text-tertiary);
    margin-bottom: .25em;
} 
.event-outer .event-inner .head > .title p {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    color: var(--text-tertiary);
}
.event-inner .body {
    width: 100%;
    padding-top: 100px;
    padding-bottom: 50px;
    background-color: var(--background-primary);
}
.event-inner .event {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    margin-bottom: 10px;    
}
.event-inner .event > .title {
    padding: 10px 20px 20px 20px;
    width: 640px;
    margin: 0 auto 20px auto;
    position: relative;
    text-align: center;
}
.event-inner .event > .title h1 {
    font-family: var(--body-text-family);
    font-size: var(--heading-size);
    color: var(--text-tertiary);
}
.event-inner .event > .title h1 sup {
    font-family: var(--body-text-family);
}
.event-inner .event > .title p {
    font-size: var(--body-text-size);
    line-height: clamp(28px, 2vw, 30px);
    margin-top: 0.25em;
    font-family: var(--body-text-family);
    font-style: italic;
    color: var(--text-tertiary);
}   
.event-inner .event > .title::before,
.event-inner .event > .title::after {
    content: '';
    position: absolute;
    height: 2px;
    width: 80%;
    background: var(--background-secondary);
    left: 50%;
    transform: translateX(-50%);
}
body.baby_blue .event-inner .event > .title::before,
body.baby_blue .event-inner .event > .title::after {
    background-color: var(--text-tertiary);
}
.event-inner .event > .title::before {
    top: 0;
}
.event-inner .event > .title::after {
    bottom: 0;
}
.event-outer .event-inner .body .event > .details {
    width: 640px;
    padding: 10px;
    text-align: center;
}
.event-outer .event-inner .body .event > .details .address {
    text-align: center;
    margin-bottom: 20px;
}
.event-outer .event-inner .body .event > .details .address p {
    font-size: var(--body-text-size);
    line-height: clamp(26px, 2.4vw, 28px);
    margin-bottom: .35em;
    font-family: var(--body-text-family);
    color: var(--text-tertiary);
}
.event-outer .event-inner .body .event > .details .address p strong {
    font-family: var(--body-text-family);
    color: var(--text-primary);
}
.event-outer .event-inner .body .event > .details a {
    display: inline-block;
    border: none;
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    background-color: var(--button-background-primary);
    color: var(--button-text-primary);
    padding: 7px 18px;
    margin: 0 auto;
    text-decoration: none;
    border-radius: 7px;
    transition: all 0.2s ease-in-out;
}
.event-outer .event-inner .body .event > .details a:hover {
    background-color: rgba(var(--button-background-primary-rgb), 0.8);
    color: var(--button-background-primary);
}
.event-inner .event .activities {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}
.event-inner .event .activities .activity {
    border-radius: 7px;
    /* width: clamp(250px, 50%, 350px); */
    width: clamp(20%, 50%, 350px);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
    padding: 10px;
}
.event-inner .event .activities .activity span {
    font-size: 44px;
    margin-bottom: 0.2em;
    color: var(--wood-clr);
}
.event-inner .event .activities .activity .title {
    text-align: center;    
    width: 100%;
}
.event-inner .event .activities .activity .title h1 {
    font-family: var(--heading-family);
    font-size: var(--heading-size);
    color: var(--text-tertiary);
}
body.juwita.light .event-inner .event .activities .activity .title h1 {
    color: var(--text-tertiary);
}
.event-inner .event .activities .activity .title .activity-icon,
.event-inner .event .activities .activity .title .activity-icon-image {
    width: 70px;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto 15px auto;
}
.event-inner .event .activities .activity .title .activity-icon path {
    fill: var(--text-primary);
}
.event-inner .event .activities .activity .title > .hide {
    display: none;
}
.event-inner .event .activities .activity .title p {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    margin-bottom: 1.25em;
    color: var(--text-tertiary);
}
.event-inner .event .activities .activity .title p.time {
    font-size: var(--body-text-size);
    line-height: clamp(26px, 2.4vw, 28px);
}
.event-inner .event .activities .activity .title p em {
    font-family: var(--body-text-family);
}
.event-inner .event .activities .activity .address {
    text-align: center;
    width: 100%;
}
.event-inner .event .activities .activity .address p {
    /* margin-bottom: .2em; */
    font-size: var(--body-text-size);
    line-height: clamp(26px, 2.4vw, 28px);
    font-family: var(--body-text-family);
    color: var(--text-tertiary);
}
.event-inner .event .activities .activity .address p.hall {
    font-weight: 700;
}
.event-inner .event .activities .activity .address p:first-child {
    /* margin-bottom: .6em; */
}
.event-inner .event .activities .activity > div:last-of-type {
    padding: 10px;
    display: inline-block;
}
.event-inner .event .activities .activity a {
    border: none; 
    padding: 12px 28px;
    text-decoration: none;
    border-radius: 7px;
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    background-color: var(--button-background-primary);
    color: var(--button-text-primary);
    margin: 15px auto 0 auto;
    display: inline-block;
    transition: all 0.2s ease-in-out;
}
.event-inner .event .activities .activity a:hover {
    background: rgba(var(--button-background-primary-rgb), 0.8);
    color: var(--button-text-primary);
}
body.juwita.light .event-inner .event .activities .activity a:hover,
body.juwita.light .event-outer .event-inner .body .event > .details a:hover {
    color: var(--background-secondary);
    border-color: var(--text-tertiary);
    background: var(--white-clr);
}

body.baby_blue .event-outer .event-inner .head > .title p,
body.baby_blue .event-outer .event-inner .head > .title h1,
body.baby_blue .event-outer .event-inner .body .event > .details .address p,
body.baby_blue .event-inner .event > .title p,
body.baby_blue .event-inner .event > .title h1,
body.baby_blue .event-inner .event .activities .activity .title h1,
body.baby_blue .event-inner .event .activities .activity .title p,
body.baby_blue .event-inner .event .activities .activity .title h1,
body.baby_blue .event-inner .event .activities .activity .address p {
    color: var(--background-secondary)!important;
}
body.baby_blue .event-outer .event-inner .body .event > .details a,
body.baby_blue .event-inner .event .activities .activity a {
    background-color: var(--text-tertiary);
    border-color: var(--text-tertiary);
    color: var(--background-secondary);
    font-family: var(--body-text-family);
}
body.baby_blue .event-outer .event-inner .body .event > .details a:hover,
body.baby_blue .event-inner .event .activities .activity a:hover {
    background-color: var(--background-secondary)!important;
    border-color: var(--background-secondary)!important;
    color: var(--white-clr)!important;
}


/* Link inside P (tag) */
.event-inner .event .activities .activity p > a,
body.baby_blue .event-inner .event .activities .activity p > a {
    border: none!important;
    outline: none!important;
    padding: 0!important;
    margin: 0!important;
    border-radius: 0!important;
    font-size: inherit!important;
    line-height: inherit!important;
    color: #4455aa!important;
    text-decoration: none!important;
    font-style: italic!important;    
    font-family: inherit!important;
    background-color: transparent!important;
    display: inline-block!important;
}
.event-inner .event .activities .activity p > a:hover,
body.baby_blue .event-inner .event .activities .activity p > a:hover {
    text-decoration: underline!important;
    background-color: transparent!important;
    color: #4455aa!important;
}



/* FORM LABEL => CENTER */
.form-label.center {
    display: block;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
}
.form-control {
    border-color: var(--background-primary);
}



/* wrapper 01 */
.wrapper-01 {
    background-image: var(--wrapper-01-lg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

}

/* ==============================
        RUNDOWN
============================== */
.rundown-inner .rundown-event-list {
    max-width: 640px;
    margin: 0 auto;
}
.rundown-inner .rundown-title {
    color: var(--text-tertiary);
}
.rundown-event-horizontal .rundown-event-horizontal-title {
    color: var(--text-tertiary);
}
.rundown-agenda-horizontal .rundown-agenda-horizontal-time {
    color: var(--text-tertiary);
}
.rundown-agenda-horizontal-content .rundown-agenda-horizontal-text {
    color: var(--text-tertiary);
}

/* ==============================
        RSVP
============================== */
/* .torsvp__btn-wrap {
    margin-top: 10px;
}
.torsvp__btn {
    font-family: var(--heading-family);
    font-size: var(--fs-sub-title);
}
.torsvp__btn:hover {
    background: var(--background-primary);
    color: var(--light-clr);
} */


/* Wrap */
.rsvp-wrap {
    position: relative;
    overflow: hidden;
    padding: 50px 0px;
    background: transparent;
}

.rsvp-inner {
    padding: 36px 0px;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

/* Head */
.rsvp-head {    
    text-align: center;
    padding: 0px 20px;
}
.rsvp-head .rsvp-title {
    position: relative;
    display: inline-block;
    font-family: var(--heading-family);
    font-size: var(--heading-size);
    color: var(--text-tertiary);
}
.rsvp-head .rsvp-title::before,
.rsvp-head .rsvp-title::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 150px;
    height: 110%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: var(--orn-04);
}
.rsvp-head .rsvp-title::before {
    transform: translateY(-50%) scaleX(-1);
    right: 100%;
}
.rsvp-head .rsvp-title::after {
    transform: translateY(-50%);
    left: 100%;
}

.rsvp-head .rsvp-info .info-text,
.rsvp-head .rsvp-info .info-date {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    color: var(--text-tertiary);
}

/* Body */
.rsvp-body {
    padding: 0px 20px;
    margin-top: 40px;
}

.rsvp-confirm-step {
    display: none;
}

/* RSVP Status */
.rsvp-status-wrap {
    margin-bottom: 40px;
}
.rsvp-status-head {
    padding: 0px;
    text-align: center;
}
.rsvp-status-head .rsvp-status-caption,
.form-label {
    font-size: 18px;
    font-family: var(--body-text-family);
    color: var(--light-clr);
}

.rsvp-status-wrap input[name="rsvp_status"] {
    display: none;
}

/* RSVP Amount */
.rsvp-amount-wrap {
    margin-bottom: 40px;
}

.rsvp-amount-head {    
    text-align: center;
    padding: 0px;
}
.rsvp-amount-head .rsvp-amount-caption {
    margin-bottom: 10px;
    font-size: 18px;
    font-family: var(--body-text-family);
    color: var(--light-clr);
}
.session-caption-wrap .caption{
    font-family: var(--body-text-family);
    color: var(--light-clr);    
    font-size: 18px;
}

.rsvp-amount-body {
    
}

/* Amount Controller */
.rsvp-amount-controller-wrap {
    padding: 0px;
}
.rsvp-amount-controller {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
}

.rsvp-amount-controller .toggle-btn {
    background-color: transparent;
    border: none;
    outline: none;
    height: 40px;
    width: 40px;
    border-radius: 4px;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
}
.rsvp-amount-controller .toggle-icon {
    width: 15px;
    height: auto;
    display: block;
}
.rsvp-amount-controller .toggle-icon path {
    stroke: var(--light-clr);
    stroke-width: 10;
}

.rsvp-amount-controller .toggle-btn.plus {
    border-color: var(--button-background-primary);
    background-color: var(--button-background-primary);
    color: var(--button-text-secondary);
}
.rsvp-amount-controller .toggle-btn.plus .toggle-icon path {
    stroke: var(--button-text-primary);
}
.rsvp-amount-controller .toggle-btn.plus:hover {
    border-color: rgba(var(--button-background-primary-rgb), 0.8);
    background-color: rgba(var(--button-background-primary-rgb), 0.8);
    color: var(--button-text-primary);
}
.rsvp-amount-controller .toggle-btn.plus:hover .toggle-icon path {
    stroke: var(--button-text-primary);
}
.rsvp-amount-controller .toggle-btn.minus {
    border-color: var(--button-background-secondary);
    background-color: transparent;
    color: var(--button-text-secondary);
}
.rsvp-amount-controller .toggle-btn.minus .toggle-icon path {
    stroke: var(--button-text-secondary);
}
.rsvp-amount-controller .toggle-btn.minus:hover {
    border-color: rgba(var(--button-background-secondary-rgb), 0.8);
    background-color: transparent;
    color: var(--button-text-secondary);
}
.rsvp-amount-controller .toggle-btn.minus:hover .toggle-icon path {
    stroke: rgba(var(--button-text-secondary-rgb), 0.8);
}

.rsvp-amount-controller .input-wrap {
    width: 100%;
}
.rsvp-amount-controller .input-control {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;

    width: 100%;
    height: 40px;
    margin: 0px auto;
    border-radius: 4px;
    background-color: var(--white-clr);
    text-align: center;
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    color: var(--text-secondary);
    border: none;
    pointer-events: none;
}

/* RSVP Confirm */
.rsvp-confirm-wrap {
    padding: 0px;
    text-align: center;
}

.rsvp-confirm-wrap label {
    display: block;
    margin-top: 10px;
}
.rsvp-confirm-btn, .rsvp-session-btn, .form-check-label {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 25px;
    margin: 0px auto;
    border-radius: 7px;
    font-weight: 600;
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    line-height: 1;
    background-color: transparent;
    border: 1px solid var(--button-background-secondary);
    color: var(--button-text-secondary);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
}
.rsvp-confirm-btn.going {
    border-color: var(--button-background-secondary);
    background-color: transparent;
    color: var(--button-text-secondary);
}

.rsvp-status-wrap input[name="rsvp_status"]:checked + .rsvp-confirm-btn.going,
.form-check-label:has(.form-check-input:checked),
.form-check-label:hover,
.rsvp-confirm-btn.going:hover {
    border-color: var(--button-background-primary);
    background-color: var(--button-background-primary);
    color: var(--button-text-primary);
}
.session-btn-wrap input[name="selected_event[]"]:checked + .rsvp-session-btn, .session-btn-wrap input[name="selected_event_all"]:checked +  .rsvp-session-btn{
    border-color: var(--button-background-primary);
    background-color: var(--button-background-primary);
    color: var(--button-text-primary);
}

.rsvp-confirm-btn.not-going {
    border-color: var(--button-background-secondary);
    background-color: transparent;
    color: var(--button-text-secondary);
}
.rsvp-status-wrap input[name="rsvp_status"]:checked + .rsvp-confirm-btn.not-going,
.rsvp-confirm-btn.not-going:hover {
    border-color: var(--button-background-primary);
    background-color: var(--button-background-primary);
    color: var(--button-text-primary);
}

.rsvp-confirm-btn.confirm {
    background-color: var(--button-background-primary);
    border-color: var(--button-background-primary);
    color: var(--button-text-primary);
}
.rsvp-confirm-btn.confirm:hover {
    background-color: rgba(var(--button-background-primary-rgb), 0.8);
    color: var(--button-text-primary);
}

.rsvp-confirm-btn.download {
    border-color: var(--button-background-primary);
    background-color: var(--button-background-primary);
    color: var(--button-text-primary);
    width: auto;
    display: inline-block;
    vertical-align: top;
}
.rsvp-confirm-btn.download:hover {
    background-color: rgba(var(--button-background-primary-rgb), 0.8);
}

.rsvp-confirm-btn > i {
    font-size: 0.8em;
    margin-left: 5px;
}


/* QR Card */
.rsvp-qrcard-wrap {
    /* margin-top: 30px; */
    /* margin-bottom: 40px; */
}
.rsvp-qrcard-img-wrap {
    margin-bottom: 30px;
}
.rsvp-qrcard-img {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

/* RSVP Message */
.rsvp-message-wrap {
    margin-top: 50px;
}
.rsvp-message-content {
    background-color: transparent;
    text-align: center;
}
.rsvp-message-icon {
    width: 30px;
    height: auto;
    display: none;
    margin: 0 auto 20px;
}
.rsvp-message-wrap .rsvp-message-title {
    font-family: var(--body-text-family);
    font-size: calc(var(--body-text-size));
    color: var(--text-tertiary);
    margin-bottom: 10px;
}
.rsvp-message-wrap .rsvp-message-caption {
    font-family: var(--body-text-family);
    font-size: calc(var(--body-text-size) + 0px);
    color: var(--text-tertiary);
}

/* RSVP Change */
.rsvp-change-wrap {
    margin-top: 40px;
    padding: 0px;
}


/* Color - Light */
body.juwita.light .rsvp-amount-controller .toggle-btn.plus {
    color: var(--light-clr);
}
body.juwita.light .rsvp-amount-controller .toggle-btn.plus .toggle-icon path {
    stroke: var(--light-clr);
}

body.juwita.light .rsvp-confirm-btn.confirm {
    color: var(--light-clr);
}
body.juwita.light .rsvp-confirm-btn.download {
    color: var(--light-clr);
}

/* Color - Baby Blue */
body.baby_blue .rsvp-head .rsvp-title {
    color: var(--background-secondary);
}


/* Media Query */
@media only screen and (max-width: 780px) {
    .rsvp-head .rsvp-title::before {
        right: 95%;
    }
    .rsvp-head .rsvp-title::after {
        left: 95%;
    }
}


/* ==============================
        Live Streaming
============================== */
.live-streaming {
    background-color: transparent;
}
.live-streaming > .inner > .head > h1 {
    font-family: var(--heading-family);
    font-size: var(--heading-size);
    color: var(--text-tertiary);
}
body.baby_blue .live-streaming > .inner > .title h1 {
    color: var(--background-secondary);
}
.live-streaming > .inner > .head > p {
    font-family: var(--body-text-family);
    font-style: var(--body-text-style);
    color: var(--text-tertiary);
}
.live-streaming .inner .body p {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    color: var(--text-tertiary);
}
.live-streaming .inner .body p.meeting-text {
    font-size: var(--body-text-size);
}
.live-streaming .inner .body > .streaming-info > div.link > a {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    background: var(--button-background-primary);
    color: var(--button-text-primary);
}
body.juwita.light .live-streaming .inner .body > .streaming-info > div.link > a {
    color: var(--text-tertiary);
}
.live-streaming .inner .body > .streaming-info > div.link > a:hover {
    background: rgba(var(--button-background-primary-rgb), 0.8);
    color: var(--button-text-primary);
}

.live-streaming .inner .orn.orn-05 {
    width: 640px;
    height: 85px;
    background-image: var(--orn-05);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 auto;
    margin-top: 50px;
}


/* ======================
    INSTAGRAM FILTER
====================== */
.ig-filter-wrap {
    background-color: var(--background-primary);
}
.ig-filter {
    width: 100%;
    max-width: 640px;
}
.ig-filter-head .ig-filter-title {
    font-size: var(--heading-size);
    font-family: var(--heading-family);
    color: var(--text-tertiary);
}
.ig-filter-head .ig-filter-caption {
    font-family: var(--body-text-family);
    color: var(--text-tertiary);
    font-style: var(--body-text-style);
}
.ig-filter-link {
    font-family: var(--body-text-family);
    background: var(--button-background-primary);
    color: var(--button-text-primary);
    font-size: 16px;
    font-weight: 600;
}
body.juwita.light .ig-filter-link {
    color: var(--text-tertiary);
}
.ig-filter-link:hover {
    background: rgba(var(--button-background-primary-rgb), 0.8);
    color: var(--button-text-primary);
}




/* GIFT */
.gift {
    background-color: var(--background-primary);
    padding: 30px 20px 80px 20px;
}
.gift .gift-inner .gift-title h1 {
    font-size: var(--heading-size);
    font-family: var(--heading-family);
    color: var(--text-tertiary);
}
.gift .gift-inner .gift-title p {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    color: var(--text-tertiary);
    font-style: var(--body-text-style);
}
body.baby_blue .gift .gift-inner .gift-title h1,
body.baby_blue .gift .gift-inner .gift-title p {
    color: var(--background-secondary);
}
.gift-inner .gift-form {
    font-family: var(--body-text-family);
}

.gift .gift-inner .gift-form .selectize-control.single .selectize-input {
    background: var(--background-secondary);
    border: 1px solid var(--text-secondary);
    color: var(--text-secondary);
}
.gift .gift-inner .gift-form .selectize-control .item {
    background: var(--background-secondary);
}
.gift .gift-inner .gift-form .selectize-control .item:hover {
    background: rgba(var(--background-secondary-rgb),0.8);
}
.gift .gift-inner .gift-form .selectize-control .item p strong {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
}
.gift .gift-inner .gift-form .gift-details .bank-detail .saving-books .copy-account {
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}

/* GIFT DETAILS */
#gift-form p,
#gift-form span,
#gift-form label,
#gift-form input,
#gift-form textarea,
#gift-form div,
#gift-form button {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    color: var(--text-secondary);
}
body.juwita.light #gift-form p,
body.juwita.light #gift-form span,
body.juwita.light #gift-form label,
body.juwita.light #gift-form input,
body.juwita.light #gift-form textarea,
body.juwita.light #gift-form div {
    color: var(--background-secondary);
}
body.juwita.light #gift-form button {
    color: var(--text-tertiary);
}
.gift-form .gift-details {
    background: transparent;
}
.gift-form .gift-picture {
    background: transparent;
    display: none;
}
.gift-form .gift-picture .picture-detail {
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.gift-form .gift-picture .picture-detail .gift-back {
    border: none;
    outline: none;
    background: transparent;
    cursor: pointer;
    font-size: var(--body-text-size);
    line-height: clamp(20px, 2.3vw, 25px);
    margin: 10px 0;
}
.gift-form .gift-picture .picture-detail .gift-back:hover {
    text-decoration: underline;
}
.gift-form .gift-picture .picture-detail .head {
    padding: 10px;
    text-align: center;
}
.gift .gift-inner .gift-form .gift-picture .picture-detail .head h2 {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    margin-bottom: .25em;
    color: var(--text-secondary);
}
.gift .gift-inner .gift-form .gift-picture .picture-detail .head p {
    font-size: var(--body-text-size);
    line-height: clamp(20px, 2.3vw, 25px);
    color: var(--font-clr);
}
.gift-form .gift-picture .picture-detail .body {
    padding: 20px;
    width: 100%;
}
.gift-form .gift-picture .picture-detail .body div[data-upload="gift-picture"] {
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px auto;
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
}
.gift-form .gift-picture .picture-detail .body div[data-upload="gift-picture"]:hover {
    background: #eee;
}
.gift-form .gift-picture .picture-detail .body div[data-upload="gift-picture"]::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    border: 1px dashed var(--background-primary);
}
.gift-form .gift-picture .picture-detail .body div[data-upload="gift-picture"] > i {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--background-primary);
}
.gift-form .gift-picture .picture-detail .body div[data-upload="gift-picture"] > img[data-image] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: relative;
    display: none;
}
.gift-form .gift-picture .gift-submit {
    margin-top: auto;
}

.gift .gift-inner .gift-form .gift-next,
.gift .gift-inner .gift-form .gift-submit {
    background: var(--button-background-primary);
    color: var(--button-text-primary);
}
.gift .gift-inner .gift-form .gift-next:hover,
.gift .gift-inner .gift-form .gift-submit:hover {
    background: rgba(var(--button-background-primary-rgb), 0.8);
}

.gift-form [name="nominal"]:checked + .nominal {
    background: var(--background-secondary);
    border-color: var(--background-secondary);
    color: var(--background-primary);
}
body.juwita.light .gift-form [name="nominal"]:checked + .nominal {
    color: var(--white-clr)!important;
}

/* No Form */
.gift.no-form {
    position: relative;
    z-index: 1;
}
.gift.no-form .gift-inner .gift-form {
    overflow: visible;
}



/* PROTOCOL */
.protocol.protocol-02 .inner .head .step-outer {
    background-color: var(--background-tertiary);
}
body.baby_blue .protocol .inner .head {
    background-color: var(--background-secondary);
}
body.baby_blue .protocol.protocol-02 .inner .head .step-outer {
    background-color: transparent;
}
.protocol.protocol-01 .inner .head h1,
.protocol.protocol-03 .inner .head h1 {
    font-size: 48px;
    text-transform: uppercase;
    font-family: var(--body-text-family);
    font-size: var(--heading-size);
}

section.protocol-04 .inner .head .title { 
    font-family: var(--body-text-family);
    font-size: var(--heading-size);
    color: var(--text-secondary);
}

.protocol.protocol-01 .inner .head p,
.protocol.protocol-03 .inner .head p {
    margin-bottom: .15em;
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    color: var(--text-tertiary);
}
body.baby_blue .protocol.protocol-01 .inner .head h1,
body.baby_blue .protocol.protocol-01 .inner .head p,
body.baby_blue .protocol.protocol-03 .inner .head h1,
body.baby_blue .protocol.protocol-03 .inner .head p {
    color: var(--text-tertiary);
}
@media only screen and (max-width: 600px) {

    .protocol.protocol-01 .inner .head p > br,
    .protocol.protocol-03 .inner .head p > br {
        display: block;
    }

}

/* Protocol 03 */
.protocol.protocol-03 .inner .body .slider .content .text-01 {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    line-height: clamp(28px, 2vw, 30px);
    color: var(--font-clr);
}
.protocol.protocol-03 .inner .body .slider .slick-center .content .text-01 {
    color: var(--text-secondary);
}
.protocol.protocol-03 .inner .body .slider_dots::before {
    border-color: var(--button-text-primary)!important;
}
.protocol.protocol-03 .inner .body .slider_dots .slider_navigator {
    background-color: var(--button-background-primary);    
}
.protocol.protocol-03 .inner .body .slider_dots .slider_navigator.slick-current.slick-center {
    background-color: var(--button-text-primary )!important;
}

/* protocol 4 */
body.baby_blue section.protocol-04 .inner .head {
    background-color: transparent;
}
body.baby_blue section.protocol-04 .inner .head .title { 
    color: var(--background-secondary);
}
section.protocol-04 .protocol-item-wrap .protocol-item {
    background-color: var(--text-tertiary);
    border: 2px solid var(--background-primary);
}
section.protocol-04 .protocol-item-wrap .protocol-item .text-wrap .text {
    font-family: var(--body-text-family);
    font-size: calc(var(--body-text-size) + var(--fs-extra-6));
    color: var(--text-secondary);
}



/* COMMENT */
.comment-outer {
    position: relative;
    padding: 20px 20px 75px 20px;
}
.comment-outer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--bg-photo);
    background-position: top center;
    background-repeat: repeat;
    background-size: cover;
    
}
.comment-outer .comment-inner .head > h1 {
    font-family: var(--heading-family);
    font-size: var(--heading-size);
    color: var(--text-secondary);
    margin-bottom: .1em;
}
.comment-outer .comment-inner .head > p {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    font-style: var(--body-text-style);
    color: var(--text-secondary);
}
.comment-outer .comment-inner .head > p,
.comment-outer .comment-inner .more-comment,
.comment-form button,
.comment-form input,
.comment-form textarea,
.comment .comment-head p,
.comment .comment-head p strong,
.comment .comment-body p {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    color: var(--text-secondary);
}
.comment .comment-foot small,
.comment .comment-foot a {
    font-family: var(--body-text-family);
    font-size: clamp(13px, 1.8vw, 15px);
    line-height: clamp(23px, 2.2vw, 25px);
}

/* Light */
body.juwita.light .comment-outer .comment-inner .head > h1 {
    color: var(--background-secondary);
}
body.juwita.light .comment-outer .comment-inner .head > p,
body.juwita.light .comment-outer .comment-inner .head > p,
body.juwita.light .comment-form input,
body.juwita.light .comment-form textarea,
body.juwita.light .comment .comment-head p,
body.juwita.light .comment .comment-head p strong,
body.juwita.light .comment .comment-body p {
    color: var(--background-secondary);
    font-size: var(--body-text-size);
    line-height: clamp(26px, 2.4vw, 28px);
}
body.juwita.light .comment .comment-foot small,
body.juwita.light .comment .comment-foot a {
    color: var(--background-secondary);
    font-size: clamp(13px, 1.8vw, 15px);
    line-height: clamp(23px, 2.2vw, 25px);
}
body.juwita.light .comment-outer button {
    background: var(--background-secondary);
    font-size: var(--body-text-size);
    line-height: clamp(26px, 2.4vw, 28px);
}
body.juwita.light .comment-outer button:hover {
    background: var(--background-tertiary);
}

/* More comment and Send button */
.comment-outer .comment-inner .more-comment,
.comment-form .send-comment {
    background: var(--button-background-primary);
    color: var(--button-text-primary);
}
.comment-outer .comment-inner .more-comment:hover,
.comment-form .send-comment:hover {
    background: rgba(var(--button-background-primary-rgb), 0.8);
    color: var(--button-text-primary);
}



/* FOOT WRAPPER */
.foot-wrapper {
    background: var(--background-primary);
    padding-top: 50px;
    padding-bottom: 360px;
    display: block;
    position: relative;
    overflow: hidden;
}
.foot-wrapper .orn {
    position: absolute;
}
.foot-wrapper .orn.orn-06 {
    bottom: -340px;
    left: 50%;
    transform: translate(-50%);
    width: 95%;
    max-width: 1024px;
    height: 700px;
    background-image: var(--orn-06);
    /* background-color: rgba(144, 238, 144, 0.2); */
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

@media only screen and (max-width: 820px) {
    .foot-wrapper {
        padding-bottom: 240px;
    }
}
@media only screen and (max-width: 600px) {
    .foot-wrapper {
        padding-bottom: 180px;
    }
}
@media only screen and (max-width: 425px) {
    .foot-wrapper {
        padding-bottom: 120px;
    }
}



/* QUOTE */
.quote-end {
    /* background-color: lightsalmon; */
}
.quote-end .quote-end-inner p {
    color: var(--text-tertiary);
    font-size: var(--body-text-size);
    font-family: var(--body-text-family);
    font-style: var(--body-text-style);
}
.quote-end .quote-end-inner p strong {
    font-family: var(--body-text-family);
}

/* FOOTNOTE */
.note .note-description {
    color: var(--text-tertiary);
}

/* FOOTNOTE */
.footnote {
    width: 100%;
    /* background-color: lightseagreen; */
}
.footnote .footnote-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 40px 10px;
    text-align: center;
}
.footnote .footnote-inner h1 {
    font-size: var(--heading-size);
    line-height: clamp(45px, 4.25vw, 80px);
    color: var(--text-tertiary);
    font-family: var(--heading-family);
    padding: 15px 10px;
}
.footnote .footnote-inner p {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    color: var(--text-tertiary);
}
.footnote .footnote-inner .date-text {
    margin-bottom: 16px;
}
.footnote .footnote-inner p sup {
    font-family: var(--body-text-family);
    font-size: clamp(8px, 1.1vw, 20px);
}
body.juwita.light .quote-end .quote-end-inner p,
body.juwita.light .footnote .footnote-inner h1,
body.juwita.light .footnote .footnote-inner p {
    color: var(--background-secondary);
}


/* FOOTER */
.footer {
    background: var(--white-clr);
}
.footer .footer-inner {
    width: 100%;
}

.footer .footer-inner p {
    color: var(--background-primary);
    font-family: var(--body-text-family);
    font-size: clamp(15px, 2vw, 18px);
}
body.juwita.light .footer .footer-inner p {
    color: var(--background-secondary);
}

section.footer .footer-inner .footer-logo {
    width: 55px;
}
section.footer .footer-inner .footer-logo path {
    fill: var(--background-primary);
}
body.juwita.light section.footer .footer-inner .footer-logo path {
    fill: var(--background-secondary);
}

@media only screen and (max-width: 960px) {
    section.footer .footer-inner.flex-column {
        flex-direction: column;
        padding-top: 80px;
        padding-bottom: 150px;
    }
    section.footer .footer-inner.flex-column p {
        margin-right: 0;
        font-family: var(--body-text-family);
        font-size: 16px;
    }
    section.footer .footer-inner.flex-column .footer-logo {
        margin-top: 10px;
        width: 150px;
    }
}









/* ===========================================

    Responsiveness 
    
=========================================== */


/* 1400 */
@media only screen and (max-width: 1400px) {

    .cover .orn.bg-cover-01 {
        height: clamp(480px, 80%, 520px);
    }
    .cover .orn.bg-cover-02 {
        width: 60%;
    }

}


/* 1366px */
@media only screen and (max-width: 1366px) {

    /* Cover */
    /* .cover .orn.orn-02 {
        height: min(28%, 250px);
    }
    .cover .orn.bg-cover-01 {
        height: clamp(420px, 80%, 760px);        
    }
    .cover .orn.bg-cover-02 {        
        height: min(25%, 250px);        
    } */

}



/* 1240px */
@media only screen and (max-width: 1240px) {

    /* Cover */
    .cover .orn.orn-02 {
        height: min(25%, 250px);
    }
    .cover .orn.bg-cover-01 {
        height: clamp(420px, 80%, 470px);
    }
    .cover .orn.bg-cover-02 {
        width: 70%;
        height: clamp(150px, 25%, 170px);
    }

    /* LOVE STORY */
    .love-story .inner {
        width: 100%;
    }
    .love-story .inner .title {
        padding: 10px;
    }
    .love-story .inner .timeline {
        margin: 20px auto;
    }
    .love-story .inner .timeline .story {
        padding: 20px;
    }

}

/* 1124px */
@media only screen and (max-width: 1124px) {

    /* BRIDE GROOM */
    .bridegroom .bridegroom-inner .head {
        width: 100%;
    }

}

/* Screen size for Desktop 1024 x 768px */
@media only screen and (max-width: 1024px) {

    /* COVER */
    .cover .cover-wrapper {
        width: 100%;
    }
    .cover .cover-inner.covers.mobile::before {
        height: 50%;
        background-color: transparent;
        background-image: linear-gradient(to bottom, rgba(var(--background-primary-rgb),0), rgba(var(--background-primary-rgb),0.8), rgba(var(--background-primary-rgb),1));
    }
    .cover .cover-inner.covers.mobile .cover-picture {
        display: block;
        /* opacity: 0; */
        pointer-events: none;
    }
    .cover .cover-inner > .cover-show .picture-outer img {
        filter: blur(0px);
        margin-top: 60px;
    }   
    .cover .cover-bridegroom {
        width: 100%;
    }
    .cover .orn.orn-02 {
        height: min(30%, 160px);
    }    
    .cover .orn.bg-cover-01 {
        height: clamp(420px, 40%, 520px);
    }
    .cover .orn.bg-cover-02 {
        width: 70%;
        height: clamp(130px, 25%, 150px);
    }
    /* =================================== */

    
    /* EVENT */
    .event-outer .event-inner .head {
        padding: 10px;
    }
    .event-outer .event-inner .head > .title {
        width: 100%;
        padding: 10px;
    }
    .event-inner .body {
        width: 100%;
    }
    .event-inner .event {
        width: 100%;
    }
    .event-inner .event > .title::before,
    .event-inner .event > .title::after {
        width: 60%;
    }
    /* =================================== */


}


/* 920px */
@media only screen and (max-width: 920px) {
    
    .cover .orn.bg-cover-02 {
        z-index: 2;
    }

}


/* 835 px */
@media only screen and (max-width: 835px) {

    /* Cover */
    .cover .orn.orn-02 {
        height: min(30%, 140px);
    }    
    .cover .orn.bg-cover-01 {
        background-image: var(--bg-cover-01);
        /* height: clamp(360px, 40%, 480px); */
    }
    .cover .orn.bg-cover-02 {
        width: 80%;
        height: clamp(100px, 25%, 130px);
    }

    /* Event */
    .event-inner .event > .title {
        width: 100%;
    }
    .event-inner .event > .title::before,
    .event-inner .event > .title::after {
        width: 80%;
    }
    .event-outer .event-inner .body .event > .details {
        width: 100%;
    }

}



/* 780px */
@media only screen and (max-width: 780px) {

    /* Cover */
    .cover .orn.orn-02 {
        height: min(25%, 120px);
    }
    .cover .orn.bg-cover-02 {
        width: 100%;
        height: min(30%, 130px);
        background-position: top 0 left -60px;
    }
    .cover .orn.bg-cover-01 {
        height: clamp(240px, 40%, 480px);
    }


    /* Love Story */
    .love-story .inner .timeline .story:nth-child(odd) {
        flex-direction: column;
    }
    .love-story .inner .timeline .story:nth-child(even) {
        flex-direction: column;
    }
    .love-story .inner .timeline .story .picture {
        width: 100%;
    }
    .love-story .inner .timeline .story .content {
        width: 100%;
    }
    .love-story .inner .timeline .story .content .content-inner {
        padding: 25px 10px;
    }


    /* Event */
    .event-inner .event .activities .activity {
        width: 100%;
    }


    /* RSVP */
    .rsvp-form .head h1::before,
    .rsvp .rsvp-confirm h1::before,
    .rsvp .rsvp-full h1::before {
        right: 95%;
    }
    .rsvp-form .head h1::after,
    .rsvp .rsvp-confirm h1::after,
    .rsvp .rsvp-full h1::before {
        left: 95%;
    }

}


/* 680px */
@media only screen and (max-width: 680px) {

    /* Couple */
    .bridegroom .bridegroom-inner .body {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .bridegroom .bridegroom-inner .body.bride-first {
        flex-direction: column-reverse;
    }
    .bridegroom .bridegroom-inner .body .bride,
    .bridegroom .bridegroom-inner .body .groom {
        width: 100%;
        margin: 0;
    }
    .bridegroom .bridegroom-inner .body .bridegroom-separator {
        top: 0;
        left: 0;
        transform: translate(0,0);
        position: relative;
    }


    /* SAVE DATE */
    .save-date .save-date-inner {
        width: 100%;
    }

    /* Event */
    .event-inner .event > .title {
        width: 100%;
    }
    .event-outer .event-inner .body .event > .details {
        width: 100%;
    }

    /* Live Streaming */
    .live-streaming .inner .orn.orn-05 {
        width: 420px;
        height: 50px;
    }

    /* Foot Wrapper */
    /* .foot-wrapper {
        padding-bottom: 170px;
    } */

}


/* Screen size for tablet 600 x 960 px */
@media only screen and (max-width: 600px) {

    /* Cover */
    .cover .cover-inner.covers .cover-bridegroom {
        bottom: 0;    
    }
    .cover .orn.bg-cover-01 {
        background-image: var(--bg-cover-01);
        /* height: clamp(240px, 40%, 480px); */
    }
    .cover .orn.bg-cover-02 {
        background-image: var(--bg-cover-02);
        height: min(27%, 110px);
    }


    /* Bride and Groom */
    .bridegroom .bridegroom-inner {
        padding: 45px 10px 65px 10px;
    }
    .bridegroom .bridegroom-inner .body {
        padding: 0;
    }


    /* Save The Date */
    .save-date .save-date-inner {
        padding-top: 0;
        padding-bottom: 20px;
    }


    /* Love Story */
    .love-story {
        padding: 20px 10px;
    }
    .love-story .inner .timeline .story {
        padding: 0;
    }

    
    /* wrapper 01 */
    .wrapper-01 {
        background-image: var(--wrapper-01);
    }


    /* Reservation */
    .rsvp-form .head h1,
    .rsvp .rsvp-confirm h1 {
        font-size: 5vw;
    }
    
    
    /* Foot Wrapper */
    /* .foot-wrapper .orn.orn-06 {
        bottom: -200px;
        left: 50%;
        transform: translate(-50%);
        width: 110%;
        height: 400px;
        background-image: var(--orn-06);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    } */


}



/* 480px */
@media only screen and (max-width: 480px) {

    /* Cover */
    .cover .cover-bridegroom > div h1 {
        /* font-size: clamp(42px, 5.5vw, 80px); */
        font-size: calc(var(--heading-size) - var(--fs-extra-8));
    }
    .cover .orn.bg-cover-01 {
        height: clamp(220px, 37%, 320px);
    }
    .cover .orn.bg-cover-02 {
        height: min(27%, 80px);
        background-position: top 0 left -20px;
    }

    /* Save the Date */
    .save-date .save-date-inner .schedule .countdown {
        width: 100%;
    }

    /* Live Streaming */
    .live-streaming .inner .orn.orn-05 {
        width: 85%;
        /* margin: 10px auto 20px auto; */
    }

}

/* 400 */
@media only screen and (max-width: 400px) {

    .cover .orn.bg-cover-01 {
        height: clamp(220px, 34.5%, 320px);
    }

}


/* 380 */
@media only screen and (max-width: 380px) {

    .cover .orn.bg-cover-01 {
        height: clamp(245px, 40%, 320px);
    }

}


/* 300px */
@media only screen and (max-width: 300px) {

    /* Save the Date */
    .save-date .save-date-inner .schedule .countdown {
        grid-template-columns: repeat(2, 1fr);
    }

}



/* =============================
        GENERAL QR CODE
============================= */
.general-qrcode {
    padding: 20px 20px 60px;
    background-color: var(--background-primary);
}



/* KADO */
.container.wedding-gifts-wrap{
    background: var(--background-primary) !important;
    width: 100%;
    /* padding: 50px 20px; */
    position: relative;
}
.hadiah-card-button, .buying-kado-btn, .kado-send-btn{
    background-color: var(--button-background-primary) !important;
    color: var(--button-text-secondary) !important;
    cursor: pointer !important;
    border: none !important;
    font-family: var(--ff-02) !important;
    border-radius: 4px !important;
    font-size: clamp(14px, 2vw, 18px) !important;
}

.modal-kado-header .title, .modal-confirm-header .title, .modal-kado-header .address{
    font-family: inherit;
    color: inherit;
    /* font-size: 32px; */
}

.modal-kado-header .caption, 
.modal-kado-header .address, .kado-description .kado-ket{
    font-size: 16px !important;
    font-family: var(--ff-02) !important;
}

.modal-kado-header .title,
.modal-confirm-header .title,
.kado-description .kado-name,
.img-caption{
    font-family: var(--ff-02) !important;
    font-size: clamp(14px, 2vw, 18px) !important;
}
.confirm-kado-btn{
    border: none !important;
    outline: none !important;
    border: 1px solid  var(--button-background-primary) !important;
    color:  var(--button-background-primary) !important;
    font-family: var(--ff-02) !important;
    width: 100%;
    border-radius: 4px !important;
    font-weight: 500 !important;
    font-size: clamp(14px, 2vw, 18px) !important;
}

.modal-kado-note .note-kado{
    font-family: var(--ff-02) !important;
}

.confirm-kado-btn:hover{
    background-color: var(--button-background-primary) !important;
    color: var(--button-text-secondary) !important;
}

.hadiah-card-button:hover, .buying-kado-btn:hover, .kado-send-btn:hover{
    color: var(--button-background-secondary) !important;
    background-color: rgba(var(--button-background-primary-rgb), 0.8) !important;
}

.wedding-gift-address-label, .inner-address-info{
    font-family: var(--body-text-family) !important;
    font-weight: 500 !important;
    color: var(--text-tertiary) !important;
    font-size: clamp(14px, 2vw, 18px) !important;
}


.btn-hadiah-copy{
    color: var(--text-tertiary) !important;
    border: 1px solid var(--text-tertiary) !important;
/*     font-family: var(--ff-01) !important; */
}

.hadiah-card-title{
    font-family: var(--ff-02) !important;
    font-size: clamp(14px, 2vw, 18px) !important;
    font-weight: 600;
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hadiah-card-price {
    font-size: 16px !important;
    color: #CB3A31 !important;
    padding: 4px !important;
    font-weight: 600 !important;
}

.hadiah-card-amount, .hadiah-card-amount .total-amount{
    font-weight: 500 !important;
    font-size: 16px !important;
}

.wedding-gifts-title{
    font-size: clamp(22px, 5vw, 30px);
    font-weight: 700;
    font-family: var(--ff-02);
    color: var(--text-tertiary) !important;
}

.wedding-gifts-description{
    font-family: var(--ff-02);
    font-size: clamp(16px, 2vw, 18px);
    line-height: clamp(26px, 2.4vw, 28px);
    color: var(--text-tertiary) !important;
    font-style: italic;
}

.wedding-gifts-inner{
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}



/* =============================
        DRESSCODE
============================= */
.dress-wrapper .dress-title {
    color: var(--text-tertiary);
}
.dress-wrapper .dress-desc,
.dress-wrapper .dress-item-title,
.dress-wrapper .dress-note {
    color: var(--text-tertiary);
}