/* ALS */
@font-face {
    font-family: 'ALS Script';
    src: url("https://katsudoto.id/plugin/fonts/alsscrp.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Abhaya Libre */
@font-face {
    font-family: "Abhaya Libre Bold";
    src: url('https://katsudoto.id/plugin/fonts/AbhayaLibre-Bold.ttf') format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Abhaya Libre Extra Bold";
    src: url('https://katsudoto.id/plugin/fonts/AbhayaLibre-ExtraBold.ttf') format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Abhaya Libre Medium";
    src: url('https://katsudoto.id/plugin/fonts/AbhayaLibre-Medium.ttf') format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Abhaya Libre Regular";
    src: url('https://katsudoto.id/plugin/fonts/AbhayaLibre-Regular.ttf') format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Abhaya Libre Semi Bold";
    src: url('https://katsudoto.id/plugin/fonts/AbhayaLibre-SemiBold.ttf') format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Background */
body, html {  
    background-color: #EAE2DC;
}
body {
    height: auto;
}

/* Body Helga-Marcel */
body.helga-marcel {
    /* Font Family */
    --roboto: 'Roboto', sans-serif;
    --playfair: 'Playfair Display', serif;
    --als: 'ALS Script', sans-serif;

    --abhayalibre: 'Abhaya Libre Regular', sans-serif;
    --abhayalibre-medium: 'Abhaya Libre Medium', sans-serif;
    --abhayalibre-semibold: 'Abhaya Libre Semi Bold', sans-serif;
    --abhayalibre-bold: 'Abhaya Libre Bold', sans-serif;
    --abhayalibre-extrabold: 'Abhaya Libre Extra Bold', sans-serif;

    /* Font Size */
    --fs-title: 40px;
    --fs-content: 16px;

    /* Attribute */
    --body-height: 100vh;    

    /* Color */
    --light-clr: #FFFFFF;
    --dark-clr: #000000;

    /* RGB */
    --light-rgb: 255, 255, 255;
    --dark-rgb: 0, 0, 0;
}

@media (min-width: 1440px) {
    body.helga-marcel {
        /* Font Size */
        --fs-title: 44px;
        --fs-content: 18px;
    }
}

/* Original */
body.helga-marcel.original {
    /* Color */
    --primary-clr: #7D2229;         /* bg_agenda */
    --secondary-clr: #EAE2DC;       /* body, bg_acara, button_default_rsvp */
    --tertiary-clr: #DAC7B9;        /* button_confirm */
    
    --title-clr: #89565C;           /* font, button */    
    --live-streaming-clr: #EADFD7;  /* font_live_streaming */
    --bg-protocol-clr: #BFC6BA;     /* protocol */

    --shadow-01-clr: #D8B476;       /* font, shadow_love_story */

    --button-primary-clr: #A5785D;  /* button */
    --button-delete-clr: #B90000;   /* button_delete */

    /* RGB */
    --primary-rgb: 125, 34, 41;
    --secondary-rgb: 234, 226, 220;
    --tertiary-rgb: 218, 199, 185;
    
    --title-rgb: 137, 86, 92;
    --live-streaming-rgb: 234, 223, 215;
    --bg-protocol-rgb: 191, 198, 186;

    --shadow-01-rgb: 216, 180, 118;

    --button-primary-rgb: 165, 120, 93;
    --button-delete-rgb: 185, 0, 0;

    /* Ornaments */
    --bg-overlay: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/bg-overlay.png");
    --bg-rsvp: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/bg-rsvp.png");

    --bigbang: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/bigbang.png");
    --bridge: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/bridge.png");

    --cover-flowers-01: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/cover-flowers-01.png");
    --cover-flowers-02: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/cover-flowers-02.png");

    --fall-tree: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/fall-tree.png");

    --flowers-01: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/flowers-01.png");
    --flowers-02: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/flowers-02.png");
    --flowers-03: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/flowers-03.png");
    --flowers-04: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/flowers-04.png");
    --flowers-05: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/flowers-05.png");
    --flowers-06: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/flowers-06.png");
    --flowers-07: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/flowers-07.png");
    --flowers-08: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/flowers-08.png");
    --flowers-09: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/flowers-09.png");
    --flowers-10: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/flowers-10.png");
    --flowers-11: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/flowers-11.png");
    --flowers-12: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/flowers-12.png");
    --flowers-13: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/flowers-13.png");
    --flowers-14: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/flowers-14.png");
    --flowers-15: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/flowers-15.png");
    --flowers-16: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/flowers-16.png");

    --flowers-outline-01: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/flowers-outline-01.png");
    --flowers-outline-02: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/flowers-outline-02.png");

    --frame-cover: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/frame-cover.png");

    --gate-and-flowers: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/gate-and-flowers.png");
    --gate-only: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/gate-only.png");

    --leaves-01: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/leaves-01.png");
    --leaves-02: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/leaves-02.png");
    --leaves-03: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/leaves-03.png");

    --orn-gate-collection-01: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/orn-gate-collection-01.png");
    --orn-gate-collection-02: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/orn-gate-collection-02.png");
    --orn-gate-collection-03: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/orn-gate-collection-03.png");

    --peacock: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/peacock.png");
    --peacock-right: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/peacock-right.png");
    --peacock-and-flowers: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/peacock-and-flowers.png");

    --traditional-house: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/traditional-house.png");

    --ulos-fabric: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/ulos-fabric.png");
    --ulos-rainbow-lg: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/ulos-rainbow-lg.png");
    --ulos-rainbow-sm: url("https://katsudoto.id/media/template/custom/helga-marcel/assets/ulos-rainbow-sm.png");
}

body.helga-marcel h1,
body.helga-marcel h2,
body.helga-marcel h3,
body.helga-marcel h4,
body.helga-marcel h5,
body.helga-marcel h6 {
    font-size: var(--fs-title);
    font-family: var(--als);
    font-weight: normal;
    line-height: 1.3;
    color: var(--dark-clr);
}
body.helga-marcel p {
    font-family: var(--abhayalibre-medium);
    font-size: var(--fs-content);
    font-weight: normal;
    line-height: 1.3;  
    color: var(--dark-clr);    
}
body.helga-marcel sup {
    font-family: inherit;
    color: inherit;
    vertical-align: super;
}
body.helga-marcel font {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    text-decoration: inherit;
    font-style: inherit;
}

html {
    scroll-behavior: smooth;
}
body.helga-marcel {
    overflow: visible;

    /* body background */
    background-image: var(--bg-overlay);
    background-position: top left;
    background-size: 100% auto;
    background-repeat: repeat-y;
}
@media only screen and (max-width: 960px) {
    body.helga-marcel {
        overflow: hidden;
    }
}

body.helga-marcel::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
body.helga-marcel::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
    border-width: 2px;
    background-color: var(--primary-clr);
}

.form-control:focus, 
.form-control:active {
    background: var(--light-clr);
    box-shadow: 0 0 2px var(--primary-clr);
    border-color: var(--primary-clr);
}



/* ==============================
        Modal
============================== */
.modal-content .mde1 {
    border-bottom: 2px solid var(--title-clr);
}
.modal-content .modal-caption {

}
.modal-content .btn {
    background-color: rgba(var(--dark-rgb), .05);
    font-family: var(--abhayalibre-medium);
    font-size: var(--fs-content);
    color: var(--dark-clr);
}
.modal-content .btn:hover {
    background-color: rgba(var(--dark-rgb), .1);
}
.modal-content .btn-wood {
    background-color: var(--title-clr);
    color: var(--light-clr);
}
.modal-content .btn-wood:hover {
    background-color: var(--button-primary-clr);
}



/* ============================================
    SIDE TO SIDE
============================================ */
.kat-page__side-to-side {
    min-height: 480px;
    display: block;
    position: relative;
    height: 100%;
}
.kat-page__side-to-side,
.kat-page__side-to-side * {
    -webkit-overflow-scrolling: touch;
}

.kat-page__side-to-side .primary-pane {
    overflow: hidden;
    top: 0;
    left: 0;
    bottom: 0;
    position: fixed;
    width: 61%;
}
.kat-page__side-to-side .secondary-pane {
    position: static;
    right: 0;
    width: 39%;
    margin-left: auto;
}

@media only screen and (min-width: 960px) and (max-width: 1400px) {

    .kat-page__side-to-side .secondary-pane section.video-gallery .inner .video-outer .video {
        width: 100%;
    }

}

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

    .kat-page__side-to-side .primary-pane {
        position: relative;
        width: 100%;
        display: none;
    }
    .kat-page__side-to-side .secondary-pane {
        position: relative;
        width: 100%;
    }

}



/* ============================================
    SIDE TO SIDE => PRIMARY PANE
============================================ */
.kat-page__side-to-side .primary-pane .inner {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 15px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: absolute;
}

/* details */
.kat-page__side-to-side .primary-pane .inner .details {    
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 10% 20% 11% 7%;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 10px;
    z-index: 2;
}

/* logo */
.kat-page__side-to-side .primary-pane .inner .details .logo-h,
.kat-page__side-to-side .primary-pane .inner .details .logo-m {
    position: relative;
    display: block;
    height: auto;
    object-fit: contain;
}
.kat-page__side-to-side .primary-pane .inner .details .logo-h {
    width: 130px;
}
.kat-page__side-to-side .primary-pane .inner .details .logo-m {
    width: 120px;
    margin-top: -60px;
    margin-left: 60px;
}

.kat-page__side-to-side .primary-pane .inner .details p {
    font-size: calc(var(--fs-content) + 4px);
    color: var(--light-clr);
    font-family: var(--abhayalibre-medium);
    margin-bottom: 5px;
    margin-left: 7.5px;
}

/* video background */
.kat-page__side-to-side .primary-pane .inner .video-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* ======================
    TOP COVER
====================== */
section.top-cover {
    background-color: var(--secondary-clr);
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: var(--body-height);
    z-index: 999999;
    top: 0;
    /* top: -120%; */
    left: 0;
    padding: 0;
    
    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);

    display: flex;
    flex-direction: column;
    display: none;
}

@media only screen and (max-width: 960px) {
    section.top-cover {
        display: flex;   
    }
}

section.top-cover.hide {
    top: -120%;
    bottom: 120%;
    pointer-events: none;
}
section.top-cover .inner {
    padding: 15px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* details */
section.top-cover .inner .details {
    text-align: center;
    margin: auto;
    padding: 20px 10px;
    position: relative;
}
section.top-cover .inner .details::before {
    content: '';
    position: absolute;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
    width: 150%;
    height: 30%;
    background: radial-gradient(
                    50% 50% at 50% 50%, 
                    var(--light-clr) 0%,
                    rgba(var(--light-rgb), 0) 100%);
    opacity: 0.5;
}

section.top-cover .inner .details p {
    font-size: calc(var(--fs-content) + 2px);
    color: var(--dark-clr);
    font-family: var(--abhayalibre-medium);
}

/* logo */
section.top-cover .inner .details .logo-h,
section.top-cover .inner .details .logo-m {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    height: auto;
    object-fit: contain;
}
section.top-cover .inner .details .logo-h {
    width: 110px;
    margin-left: -25px;
}
section.top-cover .inner .details .logo-m {
    width: 100px;
    margin-top: -50px;
    margin-left: 25px;
    margin-bottom: 25px;
}

/* Cover free text */
section.top-cover .cover-free-text {        
    font-size: calc(var(--fs-content) + 0px);
    color: var(--dark-clr);
    font-family: var(--abhayalibre-bold);
    line-height: 1.3;
}

section.top-cover .inner .details a.link {
    background-color: var(--button-primary-clr);
    border: none;
    font-size: calc(var(--fs-content) + 0px);
    font-family: var(--abhayalibre-medium);
    font-weight: normal;
    text-decoration: none;
    margin: 15px auto 0px;
    display: inline-block;
    color: var(--light-clr);
    padding: 10px 25px;
    border-radius: 25px;
    transition: all 0.25s ease-in-out;
    cursor: pointer;
}
section.top-cover .inner .details a.link:hover {
    background-color: var(--title-clr);
}

/* video background */
section.top-cover .video-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ornaments */
section.top-cover .inner .fall-tree {
    position: absolute;
    width: 460px;
    height: 433px;
    background-image: var(--fall-tree);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
section.top-cover .inner .fall-tree.left {
    top: -90px;
    left: -280px;
}
section.top-cover .inner .fall-tree.right {
    top: -90px;
    right: -280px;
}

section.top-cover .inner .flowers-03 {
    position: absolute;
    top: 180px;
    right: -59px;
    width: 194px;
    height: 170px;
    transform: rotate(30deg);
    background-image: var(--flowers-03);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

section.top-cover .inner .flowers-outline-01 {
    position: absolute;
    bottom: 45px;
    left: -45px;
    width: 167px;
    height: 211px;
    background-image: var(--flowers-outline-01);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
section.top-cover .inner .flowers-outline-02 {
    position: absolute;
    bottom: -24.6px;
    right: 13.4px;
    width: 130px;
    height: 199px;
    background-image: var(--flowers-outline-02);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

section.top-cover .inner .flowers-01 {
    position: absolute;
    bottom: -5px;
    left: -18px;
    width: 116px;
    height: 159px;
    background-image: var(--flowers-01);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

section.top-cover .inner .flowers-02 {
    position: absolute;
    bottom: -12px;
    right: -28px;
    width: 117px;
    height: 165px;
    transform: scaleX(-1);
    background-image: var(--flowers-02);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}



/* ==============================
        Cover
============================== */
section.cover {
    background: none;
    min-height: var(--body-height);
    position: relative;
    overflow: hidden;
    padding: 0;

    display: flex;
    flex-direction: column;
}
section.cover .inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 40px 0px;
    position: relative;
}

/* cover center */
section.cover .cover-center {
    position: relative;
    width: 80%;
    max-width: 400px;
    margin: 0px auto;
}

/* cover frame */
.cover-center .cover-frame-wrap {

}
.cover-center .cover-frame {
    display: block;
    width: 100%;
    height: auto;
    margin: 0px auto;
    object-fit: contain;
}

/* cover details */
.cover-center .cover-details {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.cover-center .cover-date {
    font-size: calc(var(--fs-content) + 0px);
    color: var(--title-clr);
}

/* the wedding of */
.cover-details .theweddingof-wrap {
    
}
.cover-details .theweddingof {
    width: 67%;
    height: auto;
    margin: 0px auto;
    display: block;
}


/* ornaments */
.cover-center .cover-flowers-01 {
    position: absolute;
    top: -6%;
    left: 50%;
    transform: translateX(-50%);
    width: 110%;
    height: 40%;
    margin-left: 6%;
    background-image: var(--cover-flowers-01);
    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat;
}
.cover-center .cover-flowers-02 {
    position: absolute;
    bottom: 1%;
    left: -15%;
    width: 52%;
    height: 100%;
    background-image: var(--cover-flowers-02);
    background-position: bottom left;
    background-size: contain;
    background-repeat: no-repeat;
}
.cover-center .flowers-10 {
    position: absolute;
    bottom: 14%;
    right: -4%;
    width: 42%;
    height: 42%;
    background-image: var(--flowers-10);
    background-position: bottom right;
    background-size: contain;
    background-repeat: no-repeat;
}
.cover-center .flowers-06 {
    position: absolute;
    bottom: 4%;
    right: 1%;
    width: 29%;
    height: 29%;
    transform: scaleX(-1);
    background-image: var(--flowers-06);
    background-position: bottom right;
    background-size: contain;
    background-repeat: no-repeat;
}
.cover-center .flowers-04 {
    position: absolute;
    bottom: -8%;
    left: 8%;
    width: 32%;
    height: 32%;
    transform: rotate(-90deg);
    background-image: var(--flowers-04);
    background-position: bottom left;
    background-size: contain;
    background-repeat: no-repeat;
}
.cover-center .flowers-05 {
    position: absolute;
    bottom: -1%;
    left: 38%;
    width: 47%;
    height: 47%;
    background-image: var(--flowers-05);
    background-position: bottom left;
    background-size: contain;
    background-repeat: no-repeat;
}



/* ==============================
        Quote
============================== */
.quote-wrap {
    background-color: var(--secondary-clr);
    position: relative;
    overflow: hidden;
    padding: 20px 0px 50px;
}

.quote-wrap .quote {
    text-align: center;
    padding: 20px;
    width: 100%;
    max-width: 600px;
    margin: 0px auto;
}
.quote-wrap .quote .quote-title {
    font-size: calc(var(--fs-title) - 8px);
    color: var(--title-clr);
    font-family: var(--als);
    margin-bottom: 20px;
}
.quote-wrap .quote .quote-caption {
    color: var(--dark-clr);
}

/* ornament */
.quote-wrap .house {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: var(--traditional-house);
    background-position: bottom center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    opacity: .2;
}



/* ==============================
        Couple
============================== */
.couple-wrap {
    position: relative;
    overflow: hidden;
}
.couple-wrap .couple {
    padding: 20px 0px 60px;
}

/* Couple Head */
.couple-head {
    text-align: center;
    padding: 20px;
}
.couple-head .couple-title {
    font-family: var(--als);
    font-size: calc(var(--fs-title) + 0px);
    margin-bottom: 0px;
    line-height: 1;
    color: var(--title-clr);
}
.couple-head .couple-description {
    font-family: var(--abhayalibre-medium);
    color: var(--dark-clr);
    margin-top: 15px;
}

/* Couple Body */
.couple-body {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}
.couple-body.bride-first {
    flex-direction: column-reverse;
}

.couple-info {
    width: 100%;
    position: relative;
    padding: 20px 0px;
    display: flex;
    flex-direction: column-reverse;
}

/* Couple Preview */
.couple-preview {
    position: relative;
    z-index: 1;
}
.couple-info.groom .couple-preview {
    margin-top: -145px;
    margin-left: auto;
    width: 220.63px;
    height: 319.99px;
    transform-origin: 100% 100%;
}
.couple-info.bride .couple-preview {
    margin-top: -115px;
    margin-right: auto;
    width: 222.26px;
    height: 320px;
    transform-origin: 0% 100%;
}

.couple-preview .couple-img-wrap {
    position: relative;
    z-index: 2;
}
.couple-preview .couple-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
}


/* texture */
.couple-info .couple-preview .texture-outer > * {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
}

/* couple (groom) ornaments */
.couple-info.groom .couple-preview .texture-outer > * {
    background-position: bottom right;
}
.couple-info.groom .couple-preview .texture-outer:nth-child(1),
.couple-info.groom .couple-preview .texture-outer:nth-child(2),
.couple-info.groom .couple-preview .texture-outer:nth-child(6) {
    z-index: 1;
}
.couple-info.groom .couple-preview .texture-outer:nth-child(3) {
    z-index: 4;
}
.couple-info.groom .couple-preview .texture-outer:nth-child(4),
.couple-info.groom .couple-preview .texture-outer:nth-child(5) {
    z-index: 3;
}

.couple-info.groom .couple-preview .leaves-02 {
    right: 0px;
    bottom: 139px;
    width: 82px;
    height: 169px;
    background-image: var(--leaves-02);
}
.couple-info.groom .couple-preview .flowers-04 {
    right: -66.37px;
    bottom: 22px;
    width: 136px;
    height: 159px;
    transform: matrix(-1, 0, 0, 1, 0, 0);
    background-image: var(--flowers-04);
}
.couple-info.groom .couple-preview .flowers-05 {
    right: -43.54px;
    bottom: -42.9px;
    width: 128.93px;
    height: 80.48px;
    transform: rotate(-60deg);
    background-image: var(--flowers-05);
}
.couple-info.groom .couple-preview .flowers-11 {
    width: 126px;
    height: 81px;
    transform: scaleX(-1);
    background-image: var(--flowers-11);
    background-position: center;
}
.couple-info.groom .couple-preview .flowers-11.first {
    right: 10px;
    bottom: -40px;
}
.couple-info.groom .couple-preview .flowers-11.second {
    right: 68px;
    bottom: -44px;
}
.couple-info.groom .couple-preview .flowers-02 {
    right: 61.63px;
    bottom: 35px;
    width: 140px;
    height: 197px;
    transform: scaleX(-1);
    background-image: var(--flowers-02);
}

/* groom additional ornaments */
.couple-info.groom .flowers-01 {
    position: absolute;
    left: -2px;
    bottom: -58px;
    width: 116px;
    height: 159px;
    transform: rotate(90deg);
    background-image: var(--flowers-01);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}


/* couple (bride) ornaments */
.couple-info.bride .couple-preview .texture-outer > * {
    background-position: bottom left;
}
.couple-info.bride .couple-preview .texture-outer:nth-child(1),
.couple-info.bride .couple-preview .texture-outer:nth-child(2),
.couple-info.bride .couple-preview .texture-outer:nth-child(6) {
    z-index: 1;
}
.couple-info.bride .couple-preview .texture-outer:nth-child(3) {
    z-index: 4;
}
.couple-info.bride .couple-preview .texture-outer:nth-child(4),
.couple-info.bride .couple-preview .texture-outer:nth-child(5) {
    z-index: 3;
}

.couple-info.bride .couple-preview .leaves-02 {    
    left: -2px;
    bottom: 126px;
    width: 82px;
    height: 169px;
    transform: scaleX(-1);
    background-image: var(--leaves-02);
}
.couple-info.bride .couple-preview .flowers-05 {
    left: -53px;
    bottom: 51px;
    width: 165px;
    height: 103px;
    transform: rotate(90deg);
    background-image: var(--flowers-05);
}
.couple-info.bride .couple-preview .flowers-04 {
    left: -14px;
    bottom: -44px;
    width: 92px;
    height: 108px;
    background-image: var(--flowers-04);
}
.couple-info.bride .couple-preview .flowers-11 {
    width: 126px;
    height: 81px;
    background-image: var(--flowers-11);
    background-position: center;
}
.couple-info.bride .couple-preview .flowers-11.first {
    left: 10px;
    bottom: -40px;
}
.couple-info.bride .couple-preview .flowers-11.second {
    left: 68px;
    bottom: -44px;
}
.couple-info.bride .couple-preview .flowers-07 {
    left: 101px;
    bottom: 2px;
    width: 124px;
    height: 200px;
    background-image: var(--flowers-07);
}


/* Couple Details */
.couple-details {
    width: 60%;
    min-width: 240px;
    max-width: 300px;
    padding: 0px 20px;
    position: relative;
    z-index: 2;
}
.couple-info.groom .couple-details {
    text-align: left;
    margin-right: auto;
}
.couple-info.bride .couple-details {
    text-align: right;
    margin-left: auto;
}

.couple-details .couple-nickname {
    font-family: var(--als);
    color: var(--title-clr);
    font-size: calc(var(--fs-title) + 12px);
    line-height: 1;
}
.couple-details .couple-name {
    font-family: var(--abhayalibre-medium);
    color: var(--title-clr);
    font-size: calc(var(--fs-content) + 0px);
}
.couple-details .couple-parents {
    font-family: var(--abhayalibre-medium);
    color: var(--dark-clr);
    font-size: calc(var(--fs-content) - 2px);
}
.couple-details .couple-bio {
    font-style: italic;
    color: var(--dark-clr);
    font-size: calc(var(--fs-content) - 2px);
}
.couple-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: var(--abhayalibre-medium);
    text-decoration: none;
    background-color: transparent;    
    color: var(--title-clr);
    font-size: calc(var(--fs-content) - 2px);
    transition: color 0.25s ease-in-out;
}
.couple-link:hover {
    color: var(--button-primary-clr);
}

/* ornaments */
.couple-info.bride .couple-details .leaves-01 {
    position: absolute;
    right: 0px;
    top: 100%;
    width: 111px;
    height: 214px;
    margin-top: -45px;
    transform: scaleY(-1) rotate(-89deg);
    background-image: var(--leaves-01);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}


/* Separator */
.separator-wrap {
    /* padding: 20px 0px 25px; */
    margin: 44px 0px 32px;
}
.separator-wrap .separator {
    display: flex;
}
.separator-wrap .separator .couple-separator {
    font-family: var(--playfair);
    font-size: 80px;
    line-height: 1;
    margin: auto;
    color: var(--title-clr);
}

@media (max-width: 375px)  {
    .couple-info.bride .couple-preview {
        margin-top: -75px;
    }
    .couple-info.groom .couple-preview {
        margin-top: -125px;
    }
}

@media (min-width: 375px)  {
    .couple-info.bride .couple-preview {
        margin-top: -95px;
    }
}

@media (min-width: 390px)  {
    .couple-info.groom .couple-preview {
        transform: scale(1.05);        
        margin-top: -115px;
    }
    .couple-info.bride .couple-preview {
        transform: scale(1.05);
    }   
}

@media (min-width: 425px)  {
    .couple-info.groom .couple-preview {
        transform: scale(1.2);
        margin-top: -75px;
    }
    .couple-info.bride .couple-preview {
        transform: scale(1.2);
    }   
}

@media (min-width: 500px)  {
    .couple-details .couple-nickname {
        font-size: calc(var(--fs-title) + 16px);
    }
    .couple-details .couple-name {
        font-size: calc(var(--fs-content) + 2px);
    }
    .couple-details .couple-parents {
        font-size: calc(var(--fs-content) + 0px);
    }
    .couple-details .couple-bio {
        font-size: calc(var(--fs-content) + 0px);
    }
    .couple-link {
        font-size: calc(var(--fs-content) + 0px);
    }

    .couple-info.groom .couple-preview {
        margin-top: -155px;
    }
}

@media (min-width: 600px)  {
    .couple-details .couple-nickname {
        font-size: calc(var(--fs-title) + 20px);
    }
    .couple-details .couple-name {
        font-size: calc(var(--fs-content) + 4px);
    }
    .couple-details .couple-parents {
        font-size: calc(var(--fs-content) + 2px);
    }
    .couple-details .couple-bio {
        font-size: calc(var(--fs-content) + 2px);
    }
    .couple-link {
        font-size: calc(var(--fs-content) + 2px);
    }

    .couple-info.groom .couple-preview {
        transform: scale(1.5);
        margin-top: -85px;
    }
    .couple-info.bride .couple-preview {
        transform: scale(1.5);
        margin-top: -15px;
    }   
}

@media (min-width: 960px)  {
    .couple-details {
        max-width: none;
    }
    .couple-details .couple-nickname {
        font-size: calc(var(--fs-title) + 12px);
    }
    .couple-details .couple-name {
        font-size: calc(var(--fs-content) + 0px);
    }
    .couple-details .couple-parents {
        font-size: calc(var(--fs-content) - 2px);
    }
    .couple-details .couple-bio {
        font-size: calc(var(--fs-content) - 2px);
    }
    .couple-link {
        font-size: calc(var(--fs-content) - 2px);
    }

    .couple-info.groom .couple-preview {
        transform: scale(1);
        margin-top: -145px;
    }
    .couple-info.bride .couple-preview {
        transform: scale(1);
        margin-top: -115px;
    }   
}

@media (min-width: 1366px)  {
    .couple-details .couple-nickname {
        font-size: calc(var(--fs-title) + 16px);
    }
    .couple-details .couple-name {
        font-size: calc(var(--fs-content) + 2px);
    }
    .couple-details .couple-parents {
        font-size: calc(var(--fs-content) + 0px);
    }
    .couple-details .couple-bio {
        font-size: calc(var(--fs-content) + 0px);
    }
    .couple-link {
        font-size: calc(var(--fs-content) + 0px);
    }

    .couple-info.groom .couple-preview {
        transform: scale(1.2);
        margin-top: -155px;
    }
    .couple-info.bride .couple-preview {
        transform: scale(1.2);
    }   
}

@media (min-width: 1600px)  {
    .couple-details .couple-nickname {
        font-size: calc(var(--fs-title) + 20px);
    }
    .couple-details .couple-name {
        font-size: calc(var(--fs-content) + 4px);
    }
    .couple-details .couple-parents {
        font-size: calc(var(--fs-content) + 2px);
    }
    .couple-details .couple-bio {
        font-size: calc(var(--fs-content) + 2px);
    }
    .couple-link {
        font-size: calc(var(--fs-content) + 2px);
    }

    .couple-info.groom .couple-preview {
        transform: scale(1.5);
        margin-top: -85px;
    }
    .couple-info.bride .couple-preview {
        transform: scale(1.5);
        margin-top: -15px;
    }   
}



/* ==============================
        Save The Date
============================== */
.save-date-wrap {
    background-color: transparent;
    position: relative;
    overflow: hidden;
}
.save-date-wrap .save-date {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 40px 20px 50px;
}

/* Save Date Head */
.save-date-head {
    padding: 10px 0px;
    text-align: left;
    position: relative;
}
.save-date-head .save-date-title {
    font-family: var(--als);
    font-size: calc(var(--fs-title) + 0px);
    color: var(--title-clr);
}
.save-date-head .save-date-event {
    font-family: var(--abhayalibre-medium);
    font-size: calc(var(--fs-content) + 0px);
    color: var(--dark-clr);
}

/* Save Date Body */
.save-date-body {
    padding: 10px 0px;
}

/* Countdown */
.countdown {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    width: 200px;
}
.countdown .count-item {
    width: 75px;
    padding: 20px 5px;
    border-radius: 12px;
    text-align: center;
    background-color: rgba(var(--light-rgb), .5);
}
.count-item .count-num {
    font-family: var(--abhayalibre-medium);
    line-height: 1;
    font-size: calc(var(--fs-title) + 4px);
}
.count-item .count-text {
    font-family: var(--abhayalibre-medium);    
    font-size: calc(var(--fs-content) - 2px);
}

/* Add To Calendar */
.add-to-calendar-wrap {
    width: 200px;
    padding: 10px 20px;
    margin-top: 15px;
    text-align: center;
}
.add-to-calendar {
    padding: 10px 20px;
    border-radius: 28px;
    display: inline-block;
    vertical-align: top;
    text-decoration: none;
    white-space: nowrap;
    font-family: var(--abhayalibre-medium);
    font-size: var(--fs-content);
    background-color: var(--title-clr);
    border: 1px solid var(--title-clr);
    color: var(--light-clr);
    transition: all 0.25s ease-in-out;
}
.add-to-calendar:hover {
    background-color: var(--button-primary-clr);
    border-color: var(--button-primary-clr);
    color: var(--light-clr);
}

/* ornaments */
.save-date-wrap .bigbang {
    position: absolute;
    top: 0;
    right: 0;
    width: 132px;
    height: 665px;
    background-image: var(--bigbang);
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    opacity: .5;
}

@media (min-width: 560px) {
    .save-date-wrap .save-date {
        max-width: 420px;
    }
}

@media (min-width: 1440px) {
    .save-date-wrap .save-date {
        max-width: 500px;
    }
    .countdown {
        width: 260px;
    }
    .countdown .count-item {
        width: 100px;
        padding: 30px 5px;
    }
    .add-to-calendar-wrap {
        width: 260px;
    }
}



/* ==============================
        Agenda
============================== */
.agenda-wrap {
    position: relative;
    overflow: hidden;
    background-color: var(--primary-clr);
}
.agenda-inner {
    width: 100%;
    padding: 110px 0px 110px;
    margin: 0px auto;
}

.agenda-head {
    padding: 0px 20px;
    text-align: left;
}
.agenda-head .agenda-title {
    font-size: calc(var(--fs-content) + 8px);
    margin-bottom: 0px;
    color: var(--shadow-01-clr);
    font-family: var(--als);
}
.agenda-head .agenda-description {
    font-size: calc(var(--fs-content) + 0px);
    color: var(--light-clr);
}

.agenda-body {
    position: relative;
    z-index: 1;
}

/* Event */
.event-item {
    width: 100%;
    margin: 0px auto 80px;
    position: relative;
}

.event-head {
    padding: 20px;
    text-align: right;
}
.event-item:nth-child(even) .event-head {
    text-align: left;
}

.event-head .event-day {
    font-family: var(--abhayalibre-medium);
    font-size: calc(var(--fs-content) + 6px);
    color: var(--light-clr);
    line-height: 1.2;
}
.event-head .event-date {
    font-size: calc(var(--fs-content) + 8px);
    font-family: var(--abhayalibre-semibold);
    color: var(--light-clr);
    line-height: 1.2;
}
.event-head .event-description {
    margin-top: 0.5em;
    font-size: calc(var(--fs-content) + 0px);
    font-family: var(--abhayalibre-medium);
    color: var(--light-clr);
}

/* Activity */
.activity-item {
    position: relative;
    margin: 25px 0px 0px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
}
.activity-wrap.same-location {
    
}

.activity-wrap .activity-item:first-of-type {
    width: 342px;
    height: 478px;
    padding: 35% 0px 13%;
}
.activity-wrap .activity-item:not(:first-of-type) { 
    width: 390px;
    height: 546px;
    padding: 40% 0px 13%;
}

/* background */
.activity-wrap .activity-item::before {
    content: "";
    position: absolute;
    top: 15%;
    left: 50%;
    width: 80%;
    height: 85%;
    transform: translateX(-50%);
    background-color: var(--secondary-clr);
    pointer-events: none;
}
.activity-wrap:not(.single) .activity-item:not(:first-of-type)::before {
    background-image: var(--bg-overlay);
    background-position: center;
    background-size: cover; 
    background-repeat: repeat-y;
}

/* activity content */
.activity-wrap .activity-content {
    flex-grow: 1;
    width: 70%;
    margin: 0 auto;
    overflow-y: auto;

    display: flex;
    flex-direction: column;

    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.activity-wrap .activity-content::-webkit-scrollbar {
    display: none;
}

.activity-head {
    padding: 10px 20px;
    margin: auto;
    text-align: center;
}

.activity-head .activity-icon {
    width: 55px;
    height: 55px;
    display: block;
    object-fit: contain;
    object-position: center;
    margin: 0px auto 10px;
}
.activity-head .activity-title {
    font-family: var(--abhayalibre-semibold);
    font-size: calc(var(--fs-content) + 8px);
}
.activity-head .activity-description {
    font-style: italic;
    font-family: var(--abhayalibre-medium);
    font-size: calc(var(--fs-content) - 2px);
}
.activity-head .activity-time {
    font-family: var(--abhayalibre-bold);
    font-size: calc(var(--fs-content) + 0px);
    display: inline-block;
    vertical-align: top;
    margin-top: 1em;
}

/* Agenda Details */
.event-details,
.activity-details {
    padding: 10px 20px;
    margin: auto;
    text-align: center;
}
.event-details .event-hall,
.activity-details .activity-hall {
    font-family: var(--abhayalibre-medium);
    font-size: calc(var(--fs-content) + 2px);
    margin-bottom: 0.25em;
}
.event-details .event-address,
.activity-details .activity-address {
    margin-bottom: 0.25em;
    font-size: calc(var(--fs-content) - 2px);
}
.event-details .event-city,
.activity-details .activity-city {
    font-style: italic;
    font-size: calc(var(--fs-content) - 2px);
}
.event-details .event-link-wrap,
.activity-details .activity-link-wrap {
    margin-top: 10px;
}
.event-details .event-link,
.activity-details .activity-link {
    width: auto;
    text-decoration: none;    
    padding: 10px 20px;
    border-radius: 25px;
    background-color: var(--title-clr);
    border: none;
    color: var(--light-clr);
    display: inline-block;
    vertical-align: top;
    font-family: var(--abhayalibre-medium);
    font-size: calc(var(--fs-content) + 0px);
    transition: all 0.25s ease-in-out;
}
.event-details .event-link:hover,
.activity-details .activity-link:hover {
    background-color: var(--button-primary-clr);
    color: var(--light-clr);
}

/* event detail when same location */
.activity-wrap.same-location + .event-details {
    margin: 80px 0px -40px;
}
.activity-wrap.same-location + .event-details .event-hall,
.activity-wrap.same-location + .event-details .event-address,
.activity-wrap.same-location + .event-details .event-city {
    color: var(--light-clr);
}
.activity-wrap.same-location + .event-details .event-link {
    background-color: var(--title-clr);
}
.activity-wrap.same-location + .event-details .event-link:hover {
    background-color: var(--button-primary-clr);
}

/* Ulos ornament */
.agenda-wrap .ulos-top {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 65px;
    background-image: var(--ulos-rainbow-sm);
    background-position: top center;
    background-size: contain;
    background-repeat: repeat-x;
}
.agenda-wrap .ulos-bottom {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 243px;
    background-image: var(--ulos-rainbow-lg);
    background-position: bottom center;
    background-size: contain;
    background-repeat: repeat-x;
}

/* event ornaments */
.activity-wrap .activity--ornaments {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}

.activity-wrap .activity-item:first-of-type .activity--ornaments {
    width: 342px;
    height: 478px;
    background-image: var(--gate-only);
}
.activity-wrap .activity-item:not(:first-of-type) .activity--ornaments { 
    width: 390px;
    height: 546px;
    background-image: var(--gate-and-flowers);
}

/* opener and side and closer */
.activity--ornaments .opener--1,
.activity--ornaments .opener--2,
.activity--ornaments .side--1,
.activity--ornaments .side--2,
.activity--ornaments .closer--1 {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.activity-wrap .activity-item:first-of-type .activity--ornaments .opener--1,
.activity-wrap .activity-item:first-of-type .activity--ornaments .side--1 {
    display: block;
}
.activity-wrap .activity-item:not(:first-of-type) .activity--ornaments .opener--2,
.activity-wrap .activity-item:not(:first-of-type) .activity--ornaments .side--2 {
    display: block;
}
.activity-wrap .activity-item:last-of-type .activity--ornaments .closer--1 {
    display: block;
}

/* media query */
@media (min-width: 414px) {
    .agenda-head .agenda-title {
        font-size: calc(var(--fs-content) + 12px);
    }
}

@media (min-width: 425px) {
    .activity-wrap .activity-item:first-of-type {
        width: 376.2px;
        height: 525.8px;
    }
    .activity-wrap .activity-item:not(:first-of-type) { 
        width: 429px;
        height: 600.6px;
    }

    .activity-wrap .activity-item:first-of-type .activity--ornaments {
        transform: translate(-50%, -50%) scale(1.1);
    }
    .activity-wrap .activity-item:not(:first-of-type) .activity--ornaments {
        transform: translate(-50%, -50%) scale(1.1);
    }
}

@media (min-width: 560px) {
    .activity-wrap .activity-item:first-of-type {
        width: 444.6px;
        height: 621.4px;
    }
    .activity-wrap .activity-item:not(:first-of-type) { 
        width: 507px;
        height: 709.8px;
    }

    .activity-wrap .activity-item:first-of-type .activity--ornaments {
        transform: translate(-50%, -50%) scale(1.3);
    }
    .activity-wrap .activity-item:not(:first-of-type) .activity--ornaments {
        transform: translate(-50%, -50%) scale(1.3);
    }
}

@media (min-width: 768px) {
    .activity-wrap .activity-item:first-of-type {
        width: 684px;
        height: 956px;
    }
    .activity-wrap .activity-item:not(:first-of-type) { 
        width: 720px;
        height: 1092px;
    }

    .activity-wrap .activity-item:first-of-type .activity--ornaments {
        transform: translate(-50%, -50%) scale(2);
    }
    .activity-wrap .activity-item:not(:first-of-type) .activity--ornaments {
        transform: translate(-50%, -50%) scale(2);
    }
}

@media (min-width: 961px) {
    .activity-wrap .activity-item:first-of-type {
        width: 342px;
        height: 478px;
    }
    .activity-wrap .activity-item:not(:first-of-type) { 
        width: 390px;
        height: 546px;
    }

    .activity-wrap .activity-item:first-of-type .activity--ornaments {
        transform: translate(-50%, -50%) scale(1);
    }
    .activity-wrap .activity-item:not(:first-of-type) .activity--ornaments {
        transform: translate(-50%, -50%) scale(1);
    }
}

@media (min-width: 1366px) {
    .activity-wrap .activity-item:first-of-type {
        width: 478.8px;
        height: 669.2px;
    }
    .activity-wrap .activity-item:not(:first-of-type) { 
        width: 546px;
        height: 764.4px;
    }

    .activity-wrap .activity-item:first-of-type .activity--ornaments {
        transform: translate(-50%, -50%) scale(1.4);
    }
    .activity-wrap .activity-item:not(:first-of-type) .activity--ornaments {
        transform: translate(-50%, -50%) scale(1.4);
    }
}

@media (min-width: 1440px) {
    .activity-wrap .activity-item:first-of-type {
        width: 513px;
        height: 717px;
    }
    .activity-wrap .activity-item:not(:first-of-type) { 
        width: 585px;
        height: 819px;
    }

    .activity-wrap .activity-item:first-of-type .activity--ornaments {
        transform: translate(-50%, -50%) scale(1.5);
    }
    .activity-wrap .activity-item:not(:first-of-type) .activity--ornaments {
        transform: translate(-50%, -50%) scale(1.5);
    }
}

@media (min-width: 1600px) {
    .activity-wrap .activity-item:first-of-type {
        width: 547.2px;
        height: 764.1px;
    }
    .activity-wrap .activity-item:not(:first-of-type) { 
        width: 624px;
        height: 873.6px;
    }

    .activity-wrap .activity-item:first-of-type .activity--ornaments {
        transform: translate(-50%, -50%) scale(1.6);
    }
    .activity-wrap .activity-item:not(:first-of-type) .activity--ornaments {
        transform: translate(-50%, -50%) scale(1.6);
    }
}

@media (min-width: 1900px) {
    .activity-wrap .activity-item:first-of-type {
        width: 684px;
        height: 956px;
    }
    .activity-wrap .activity-item:not(:first-of-type) { 
        width: 780px;
        height: 1092px;
    }

    .activity-wrap .activity-item:first-of-type .activity--ornaments {
        transform: translate(-50%, -50%) scale(2);
    }
    .activity-wrap .activity-item:not(:first-of-type) .activity--ornaments {
        transform: translate(-50%, -50%) scale(2);
    }
}


/* opener 1 */
.activity--ornaments .opener--1 .cover-flowers-01 {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 160px;
    margin-left: 30px;
    background-image: var(--cover-flowers-01);
    background-position: top center;
    background-size: auto 100%;
    background-repeat: no-repeat;
}

/* opener 2 */
.activity--ornaments .opener--2 .peacock-right {
    position: absolute;
    top: -159px;
    left: 0px;
    width: 152px;
    height: 304px;
    background-image: var(--peacock-right);
    background-position: top center;
    background-size: auto 100%;
    background-repeat: no-repeat;
}
.activity--ornaments .opener--2 .flowers-04 {
    position: absolute;
    top: -79.2px;
    left: 196.23px;
    width: 115px;
    height: 134px;
    transform: rotate(-60deg);
    background-image: var(--flowers-04);
    background-position: top center;
    background-size: auto 100%;
    background-repeat: no-repeat;
}
.activity--ornaments .opener--2 .flowers-08 {
    position: absolute;
    top: -71px;
    left: 111px;
    width: 114px;
    height: 113px;
    background-image: var(--flowers-08);
    background-position: top center;
    background-size: auto 100%;
    background-repeat: no-repeat;
}
.activity--ornaments .opener--2 .flowers-05 {
    position: absolute;
    width: 166.22px;
    height: 103.06px;
    background-image: var(--flowers-05);
    background-position: top center;
    background-size: auto 100%;
    background-repeat: no-repeat;
}
.activity--ornaments .opener--2 .flowers-05.left {
    top: 34px;
    left: -52.06px;
    transform: matrix(-0.5, 0.87, 0.87, 0.5, 0, 0);
}
.activity--ornaments .opener--2 .flowers-05.right {
    top: -26.08px;
    left: 263.89px;
    transform: rotate(60deg);
}

/* side 1 */
.activity--ornaments .side--1 .flowers-11 {
    position: absolute;
    width: 166px;
    height: 81px;
    transform: scaleX(-1) rotate(-90deg);
    background-image: var(--flowers-11);
    background-position: bottom;
    background-size: contain;
    background-repeat: no-repeat;
}
.activity--ornaments .side--1 .flowers-11.first {
    left: -60px;
    bottom: 60px;
}
.activity--ornaments .side--1 .flowers-11.second {
    left: -64px;
    bottom: 118px;
}
.activity--ornaments .side--1 .flowers-09 {
    position: absolute;
    width: 75px;
    height: 108px;
    right: -23.5px;
    bottom: 131.36px;
    background-image: var(--flowers-09);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.activity--ornaments .side--1 .leaves-02 {
    position: absolute;
    width: 82px;
    height: 169px;
    right: -19.5px;
    bottom: 5.36px;
    transform: scaleX(-1);
    background-image: var(--leaves-02);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

/* side 2 */
.activity--ornaments .side--2 .flowers-03 {
    position: absolute;
    width: 157px;
    height: 138px;
    left: -57px;
    bottom: 73px;
    transform: rotate(90deg);
    background-image: var(--flowers-03);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

/* closer 1 */
.activity--ornaments .closer--1 .flowers-04 {
    position: absolute;
    width: 71px;
    height: 83px;
    left: 0px;
    bottom: -44.86px;
    transform: matrix(0.71, -0.71, -0.71, -0.71, 0, 0);
    background-image: var(--flowers-04);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.activity--ornaments .closer--1 .flowers-05 {
    position: absolute;
    width: 100px;
    height: 66px;
    left: 55.89px;
    bottom: -38.97px;
    transform: matrix(-1, 0, 0, 1, 0, 0);
    background-image: var(--flowers-05);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.activity--ornaments .closer--1 .flowers-11 {
    position: absolute;
    width: 131px;
    height: 81px;
    background-image: var(--flowers-11);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.activity--ornaments .closer--1 .flowers-11.first {
    left: 82.89px;
    bottom: -40.96px;
}
.activity--ornaments .closer--1 .flowers-11.second {
    left: 140.89px;
    bottom: -44.96px;
}
.activity--ornaments .closer--1 .peacock-and-flowers {
    position: absolute;
    width: 182px;
    height: 222px;
    right: -40px;
    bottom: -100px;
    background-image: var(--peacock-and-flowers);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}



/* ==============================
        RSVP
============================== */
.torsvp__btn-wrap {
    margin-top: 7px;
}
.torsvp__btn {
    font-size: calc(var(--fs-content) + 2px);
    font-family: var(--garamond);
    color: var(--dark-clr);
    font-weight: normal;
    padding: 5px 20px;
}
.torsvp__btn:hover {
    background: var(--primary-clr);
    color: var(--light-clr);
}

/* Wrap */
.rsvp-wrap {
    position: relative;
    overflow: hidden;
    padding: 40px 22px;
    background-image: var(--bg-rsvp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.rsvp-inner {
    padding: 36px 0px;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    border-radius: 24px;
    background: var(--primary-clr);
    border: 2px solid var(--tertiary-clr);
}

/* Head */
.rsvp-head {    
    text-align: center;
    padding: 0px 16px;
}
.rsvp-head .rsvp-title {
    font-size: var(--fs-title);
    color: var(--live-streaming-clr);
}
.rsvp-head .rsvp-caption {
    color: var(--light-clr);
}

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

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

/* RSVP Status */
.rsvp-status-wrap {
    margin-bottom: 30px;
}
.rsvp-status-head {
    padding: 0px;
    text-align: center;
}
.rsvp-status-head .rsvp-status-caption {
    color: var(--light-clr);
}

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

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

.rsvp-amount-head {    
    text-align: center;
    padding: 0px;
}
.rsvp-amount-head .rsvp-amount-caption {
    margin-bottom: 10px;
    color: var(--light-clr);
}

.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-btn.plus {
    border-color: var(--secondary-clr);
    background-color: var(--secondary-clr);
    color: var(--primary-clr);
}
.rsvp-amount-controller .toggle-btn.plus .toggle-icon path {
    stroke: var(--primary-clr);
}
.rsvp-amount-controller .toggle-btn.plus:hover {
    border-color: var(--title-clr);
    background-color: var(--title-clr);
    color: var(--light-clr);
}
.rsvp-amount-controller .toggle-btn.plus:hover .toggle-icon path {
    stroke: var(--light-clr);
}
.rsvp-amount-controller .toggle-btn.minus {
    border-color: var(--light-clr);
    background-color: var(--light-clr);
    color: var(--dark-clr);
}
.rsvp-amount-controller .toggle-btn.minus .toggle-icon path {
    stroke: var(--dark-clr);
}
.rsvp-amount-controller .toggle-btn.minus:hover {
    border-color: var(--button-primary-clr);
    background-color: var(--button-primary-clr);
    color: var(--light-clr);
}
.rsvp-amount-controller .toggle-btn.minus:hover .toggle-icon path {
    stroke: var(--light-clr);
}

.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(--light-clr);
    text-align: center;
    font-family: var(--abhayalibre-medium);
    font-size: var(--fs-content);
    color: var(--dark-clr);
    border: 1px solid var(--light-clr);
    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 {
    width: 100%;
    display: block;
    padding: 10px 20px;
    margin: 0px auto;
    border-radius: 8px;
    font-family: var(--abhayalibre-medium);
    font-size: var(--fs-content);
    background-color: transparent;
    border: 1px solid transparent;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
}

.rsvp-confirm-btn.going {
    border-color: var(--secondary-clr);
    background-color: var(--secondary-clr);
    color: var(--primary-clr);
}

.rsvp-status-wrap input[name="rsvp_status"]:checked + .rsvp-confirm-btn.going,
.rsvp-confirm-btn.going:hover {
    border-color: var(--title-clr);
    background-color: var(--title-clr);
    color: var(--light-clr);
}

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

.rsvp-confirm-btn.confirm {
    border-color: var(--tertiary-clr);
    background-color: var(--tertiary-clr);
    color: var(--primary-clr);
}
.rsvp-confirm-btn.confirm:hover {
    border-color: var(--title-clr);
    background-color: var(--title-clr);
    color: var(--light-clr);
}

.rsvp-confirm-btn.download {
    border-color: var(--tertiary-clr);
    background-color: var(--tertiary-clr);
    color: var(--primary-clr);
}
.rsvp-confirm-btn.download:hover {
    border-color: var(--title-clr);
    background-color: var(--title-clr);
    color: var(--light-clr);
}

.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: 240px;
    height: auto;
    margin: 0 auto;
    border-radius: 8px;
    object-fit: contain;
}

/* RSVP Message */
.rsvp-message-wrap {
    margin-top: 30px;
}
.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(--abhayalibre-bold);
    font-size: calc(var(--fs-content) + 2px);
    margin-bottom: 10px;
    color: var(--light-clr);
}
.rsvp-message-wrap .rsvp-message-caption {
    font-family: var(--abhayalibre-medium);
    font-size: calc(var(--fs-content) + 0px);
    color: var(--light-clr);
}

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



/* ==============================
        Photo & Video Wrapper
============================== */
section.photo-video-wrapper {
    position: relative;
    overflow: hidden;
    padding: 80px 0px 140px;
}

section.photo-video-wrapper .bottom-ornaments {
    transform: scale(1);
    transform-origin: 0% 100%;
}

/* ornaments top */
section.photo-video-wrapper .top-leaves {
    position: absolute;
    top: 7px;
    right: 87px;
    width: 82px;
    height: 169px;
    transform: scaleX(-1) rotate(90deg);
    transform-origin: 0% 0%;
    background-image: var(--leaves-02);
    background-position: top right;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

/* ornaments bottom */
section.photo-video-wrapper .bottom-fall-tree {
    position: absolute;
    bottom: -5px;
    left: -183px;
    width: 323px;
    height: 323px;
    background-image: var(--fall-tree);
    background-position: bottom left;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

section.photo-video-wrapper .bottom-flowers-01 {
    position: absolute;
    width: 116px;
    height: 159px;
    background-image: var(--flowers-01);
    background-position: bottom left;
    background-size: 100% auto;
    background-repeat: no-repeat;
}
section.photo-video-wrapper .bottom-flowers-01.left {
    bottom: 0px;
    left: -20px;
}
section.photo-video-wrapper .bottom-flowers-01.right {
    bottom: -9px;
    left: 287px;
}

section.photo-video-wrapper .bottom-leaves-02 {
    position: absolute;
    bottom: 0px;
    left: 53px;
    width: 75px;
    height: 163px;
    background-image: var(--leaves-02);
    background-position: bottom left;
    background-size: 100% auto;
    background-repeat: no-repeat;
}
section.photo-video-wrapper .bottom-flowers-16 {
    position: absolute;
    bottom: -16px;
    left: 110px;
    width: 77px;
    height: 113px;
    background-image: var(--flowers-16);
    background-position: bottom left;
    background-size: 100% auto;
    background-repeat: no-repeat;
}
section.photo-video-wrapper .bottom-flowers-13 {
    position: absolute;
    bottom: -3px;
    left: 75px;
    width: 59px;
    height: 87px;
    transform: scaleX(-1);
    background-image: var(--flowers-13);
    background-position: bottom left;
    background-size: 100% auto;
    background-repeat: no-repeat;
}
section.photo-video-wrapper .bottom-flowers-09 {
    position: absolute;
    bottom: -11px;
    left: 157px;
    width: 75px;
    height: 108px;
    transform: scaleX(-1);
    background-image: var(--flowers-09);
    background-position: bottom left;
    background-size: 100% auto;
    background-repeat: no-repeat;
}
section.photo-video-wrapper .bottom-flowers-12 {
    position: absolute;
    bottom: -19px;
    left: 187px;
    width: 73px;
    height: 98px;
    background-image: var(--flowers-12);
    background-position: bottom left;
    background-size: 100% auto;
    background-repeat: no-repeat;
}
section.photo-video-wrapper .bottom-flowers-15 {
    position: absolute;
    bottom: 0px;
    left: 232px;
    width: 65px;
    height: 82px;
    background-image: var(--flowers-15);
    background-position: bottom left;
    background-size: 100% auto;
    background-repeat: no-repeat;
}
section.photo-video-wrapper .bottom-flowers-14 {
    position: absolute;
    bottom: -2px;
    left: 271px;
    width: 52px;
    height: 85px;
    background-image: var(--flowers-14);
    background-position: bottom left;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

@media (min-width: 600px) {
    section.photo-video-wrapper .bottom-ornaments {
        transform: scale(1.4);
    }
}

@media (min-width: 768px) {
    section.photo-video-wrapper .bottom-ornaments {
        transform: scale(1.8);
    }
}

@media (min-width: 961px) {
    section.photo-video-wrapper .bottom-ornaments {
        transform: scale(1);
    }
}

@media (min-width: 1200px) {
    section.photo-video-wrapper .bottom-ornaments {
        transform: scale(1.4);
    }
}

@media (min-width: 1600px) {
    section.photo-video-wrapper .bottom-ornaments {
        transform: scale(1.8);
    }
}



/* ==============================
        Gallery Photo
============================== */
.gallery-wrap {
    position: relative;
    overflow: hidden;
}
.gallery-inner {
    
}

/* head */
.gallery-head {
    padding: 20px;
    text-align: center;
}
.gallery-head .gallery-title {
    margin-bottom: 0px;
    color: var(--title-clr);
}
.gallery-head .gallery-description {
    color: var(--dark-clr);
}

.gallery-body {
    padding: 0px 0px 30px;
}

/* galleries */
.galleries {
    padding: 0px 5px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.galleries > a {
    height: 159px;
    margin: 0.5%;
    flex-basis: 32%;
    flex-grow: 1;
}
.galleries > a > img {
    height: 100%;
    object-fit: cover;
    max-width: 100%;
    min-width: 100%;
    display: inline-block;
    vertical-align: top;
}

/* Custom Helga-Marcel */
.galleries > a:nth-child(1) {
    height: 235px;
    flex-basis: 100%;
}
.galleries > a:nth-child(2) {
    
}
.galleries > a:nth-child(3) {
    flex-basis: 64%;
}
.galleries > a:nth-child(4) {
    flex-basis: 64%;
}
.galleries > a:nth-child(5) {
    
}
.galleries > a:nth-child(6) {
    
}
.galleries > a:nth-child(7) {
    
}
.galleries > a:nth-child(8) {
    
}
.galleries > a:nth-child(9) {
    height: 235px;
    flex-basis: 100%;
}

@media (min-width: 1366px) {
    .galleries > a {
        height: 199px;
    }
    .galleries > a:nth-child(1),
    .galleries > a:nth-child(9) {
        height: 295px;
    }
}



/* ==============================
        Video
============================== */
section.video-gallery {
    position: relative;
    overflow: hidden;
    padding: 0px;
}
section.video-gallery .inner {
    padding: 0px;
}

/* head (title) */
section.video-gallery .inner > .title {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    text-align: center;
    padding: 20px;
}
section.video-gallery .inner > .title h1 {
    font-size: var(--fs-title);
    color: var(--title-clr);
    padding: 0px;
    margin-bottom: 0px;
}
section.video-gallery .inner > .title p {
    font-size: var(--fs-content);
    font-family: var(--abhayalibre-medium);
    color: var(--dark-clr);
    line-height: 1.3;
}

/* body (video outer) */
section.video-gallery .inner .video-outer {
    padding: 0px 0px 30px;
}
section.video-gallery .inner .video-outer .video {
    width: 100%;
    max-width: 425px;
    margin: 0px 0px 30px;
    padding: 0px 20px;
}
section.video-gallery .inner .video-outer .video:last-of-type {
    margin-bottom: 0;
}

section.video-gallery .inner .video-outer .video .preview,
section.video-gallery .inner .video-outer .video .preview img {
    border-radius: 15px;
}

.video-gallery .inner .video-outer .video .preview {
    width: 100%;
    height: 240px;
}
@media only screen and (max-width: 1240px) {
    .video-gallery .inner .video-outer .video .preview {
        width: 100%;
        height: 210px;
    }
}
@media only screen and (max-width: 360px) {
    .video-gallery .inner .video-outer .video .preview {
        width: 100%;
        height: 170px;
    }
}

/* video title */
section.video-gallery .inner .video-outer .video > .title {
    margin-top: 15px;
    padding: 0px;
}
section.video-gallery .inner .video-outer .video > .title h2 {
    font-size: calc(var(--fs-content) + 4px);
    line-height: 1.3;
    font-weight: normal;
    font-family: var(--abhayalibre-bold);
    color: var(--title-clr);
}



/* ==============================
        Love Story
============================== */
section.love-story-wrap {
    position: relative;
    overflow: hidden;
    min-height: 280px;
    padding: 20px 0px 50px;
}
section.love-story-wrap .love-story-inner {
    width: 100%;
    max-width: 640px;
    margin: 0px auto;
}

/* head */
section.love-story-wrap .love-story-head {
    padding: 20px;
    text-align: center;
}
section.love-story-wrap .love-story-title {
    font-family: var(--als);
    font-size: calc(var(--fs-title) + 0px);
    line-height: 1;
    color: var(--title-clr);
}

/* body */
section.love-story-wrap .love-story-body {

}

/* stories */
section.love-story-wrap .stories {
    padding: 20px 0px;
}

/* story item */
.stories .story-item {
    padding: 0px 20px;
    margin-bottom: 50px;
}
.stories .story-item:last-of-type {
    margin-bottom: 0px;
}

.stories .story-item .story-img-wrap {
    width: 180px;
    height: 180px;
    margin-right: auto;
    margin-left: 10px;
    position: relative;
    display: flex;
}
.stories .story-item:nth-child(even) .story-img-wrap {
    margin-right: 10px;
    margin-left: auto;    
}
.stories .story-item .story-img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    position: relative;
    z-index: 1;
}
.stories .story-item .story-img-wrap .story-img-shadow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--shadow-01-clr);
    margin-left: -5px;
}
.stories .story-item:nth-child(even) .story-img-wrap .story-img-shadow {
    margin-left: 5px;
}

.stories .story-item .story-content {
    text-align: left;
    margin-top: 25px;
}
.stories .story-item:nth-child(even) .story-content {
    text-align: right;
}
.stories .story-item .story-content .story-title {
    font-size: calc(var(--fs-title) - 8px);
    color: var(--title-clr);
    font-family: var(--als);
}
.stories .story-item .story-content .story-caption {
    font-family: var(--abhayalibre-medium);
    color: var(--dark-clr);
    font-size: var(--fs-content);
}
.stories .story-item .story-content .story-title + .story-caption {
    margin-top: 5px;
}

/* ornament */
section.love-story-wrap .bridge {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: var(--bridge);
    background-position: bottom center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    opacity: .4;
}



/* ==============================
        Live Streaming
============================== */
section.live-streaming {
    background-color: var(--primary-clr);
    padding: 0px 0px 50px;
    position: relative;
    overflow: hidden;
}
section.live-streaming .inner {
    padding: 20px 0px;
}
section.live-streaming .inner .head {
    padding: 20px;
}
section.live-streaming .inner .head h1 {
    padding: 0px;
    margin-bottom: 0px;
    color: var(--live-streaming-clr);
    font-size: var(--fs-title);
}   
section.live-streaming .inner .head p {
    font-family: var(--abhayalibre-medium);
    color: var(--light-clr);
}

.live-streaming .inner .head + .body {
    margin-top: -20px;
}

.live-streaming .inner .body {
    padding: 0;
}
.live-streaming .inner .body p {
    font-size: calc(var(--fs-content) - 2px);
    color: var(--light-clr);
}

.live-streaming .inner .body p.meeting-text {
    font-size: calc(var(--fs-content) + 2px);
    font-family: var(--abhayalibre-bold);
}
.live-streaming .inner .body > .streaming-info {
    padding: 20px;
}

.live-streaming .inner .body > .streaming-info > div.zoom-details {
    padding: 10px 20px;
    flex-wrap: nowrap;
    gap: 10px;
}
.live-streaming .inner .body > .streaming-info > div.zoom-details > div {
    border: 1px solid var(--light-clr);
    border-radius: 5px;
    margin: 0;
    padding: 10px 20px 8px;
    flex-grow: 1;
    width: 100%;
}

.live-streaming .inner .body > .streaming-info > div > .preview {
    width: 70px;
}

.live-streaming .inner .body > .streaming-info > div > .preview.google-meet {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(var(--light-rgb), .8);
}
.live-streaming .inner .body > .streaming-info > div > .preview.google-meet > img {
    width: 62.5%;
    height: auto;
    border-radius: 0;
}

.live-streaming .inner .body > .streaming-info > div > .preview,
.live-streaming .inner .body > .streaming-info > div > .preview > img {
    border-radius: 15px;
}

.live-streaming .inner .body > .streaming-info > div > .preview.wide {
    height: 260px;
}
.live-streaming .inner .body > .streaming-info > div > .preview.wide > img {
    object-fit: cover;
}

.live-streaming .inner .body > .streaming-info > div > .preview.wide.youtube {
    height: auto;
}
@media only screen and (min-width: 425px) {
    .live-streaming .inner .body > .streaming-info > div > .preview.wide.youtube {
        height: auto;
    }
}

.live-streaming .inner .body > .streaming-info > div > .preview > .play-btn {
    width: 70px;
    height: 70px;
    font-size: 30px;

}

.live-streaming .inner .body > .streaming-info > div.link {
    margin-top: 0px;
}
.live-streaming .inner .body > .streaming-info > div.link > a {
    display: inline-block;
    vertical-align: top;
    width: auto;
    border-radius: 25px;
    font-family: var(--abhayalibre-medium);
    font-weight: normal;
    font-size: var(--fs-content);
    background-color: var(--light-clr);
    color: var(--primary-clr);
    padding: 10px 25px;
}
.live-streaming .inner .body > .streaming-info > div.link > a:hover {
    background-color: var(--secondary-clr);
    color: var(--primary-clr);
}

/* Ornaments */
section.live-streaming .ulos-fabric {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 80px;
    background-image: var(--ulos-fabric);
    background-size: auto 100%;
    background-position: center;
    background-repeat: repeat-x;
}



/* =====================================
        INSTAGRAM FILTER
==================================== */
.ig-filter {
    padding: 40px 0px;
}

.ig-filter-head .ig-filter-title {
    color: var(--title-clr);
    margin-bottom: 0px;
}
.ig-filter-head .ig-filter-caption {
    font-style: italic;
}

.ig-filter-img {
    border: 3px solid var(--shadow-01-clr);
}

.ig-filter-link {
    border-radius: 25px;
    padding: 10px 20px;
    color: var(--light-clr);
    font-family: var(--abhayalibre-medium);
    font-size: var(--fs-content);
    background-color: var(--title-clr);
    border: none;
}
.ig-filter-link:hover {
    background-color: var(--button-primary-clr);
    color: var(--light-clr);
}

/* ornament */
.ig-filter-wrap .bridge {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: var(--bridge);
    background-position: bottom center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    opacity: .4;
}



/* ==============================
        Wedding Gift
============================== */
.wedding-gift-wrap {
    position: relative;
    overflow: hidden;
}
.wedding-gift-inner {
    padding: 65px 0px 40px;
}

/* Head */
.wedding-gift-head {
    width: 75%;
    padding: 20px 0px 20px 20px;
    text-align: left;
    margin-right: auto;
}
.wedding-gift-head .wedding-gift-title {
    font-family: var(--als);
    font-size: calc(var(--fs-title) + 0px);
    line-height: 1;
    margin-bottom: 0.25em;
    color: var(--title-clr);
}
.wedding-gift-head .wedding-gift-description {
    font-family: var(--abhayalibre-medium);
}

/* Body */
.wedding-gift-body {
    padding: 0px;
    position: relative;
    z-index: 1;
}
.wedding-gift-form {
    position: relative;
}

/* Details */
.wedding-gift-details {
    width: 80%;
    padding: 20px;
    margin-left: auto;
}

/* Bank */
.wedding-gift-bank-wrap {
    padding: 0px;
}
.wedding-gift-bank-wrap .bank-item {
    padding: 0px;
    margin-bottom: 15px;
}
.wedding-gift-bank-wrap .bank-item:last-of-type {
    margin-bottom: 0px;
}
/* Bank Detail */
.wedding-gift-bank-wrap .bank-detail { 
    padding: 10px;
    text-align: center;
}
.wedding-gift-bank-wrap .bank-name {
    font-size: calc(var(--fs-content) + 2px);
    font-family: var(--abhayalibre-bold);
    color: var(--title-clr);
}
.wedding-gift-bank-wrap .bank-account-name {
    font-size: calc(var(--fs-content) - 2px);
    font-family: var(--abhayalibre-medium);
    color: var(--dark-clr);
}

/* Bank Img Wrap */
.wedding-gift-bank-wrap .bank-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}
.wedding-gift-bank-wrap .bank-img-link {
    
}
.wedding-gift-bank-wrap .bank-img {
    width: 90px;
    height: 90px;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* Bank Copy */
.wedding-gift-bank-wrap .bank-copy-wrap {
    
}
.wedding-gift-bank-wrap .bank-copy {
    border: none;
    outline: none;
    box-shadow: none;
    display: block;
    margin: 0px auto;
    padding: 10px 15px;
    border-radius: 25px;
    font-family: var(--abhayalibre-medium);
    background-color: var(--button-primary-clr);
    font-size: var(--fs-content);
    color: var(--light-clr);
    cursor: pointer;
    transition-duration: 0.25s;
    transition-property: background-color;
}
.wedding-gift-bank-wrap .bank-copy:hover {
    background-color: var(--title-clr);
}

/* Ornaments */
.wedding-gift-wrap .sun-flower {
    position: absolute;
    top: -47px;
    left: -43px;
    width: 100%;
    height: 130px;
    background-image: var(--flowers-08);
    background-position: top left;
    background-size: auto 100%;
    background-repeat: no-repeat;
}
.wedding-gift-wrap .peacock-and-flowers {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 40%;
    max-width: 230px;
    height: 100%;
    background-image: var(--peacock-and-flowers);
    background-position: top right;
    background-size: 100% auto;
    background-repeat: no-repeat;
}
.wedding-gift-wrap .peacock {
    position: absolute;
    bottom: 0px;
    left: 5px;
    width: 25%;
    max-width: 140px;
    height: 100%;
    background-image: var(--peacock);
    background-position: bottom left;
    background-size: 100% auto;
    background-repeat: no-repeat;
}



/* ======================
    PROTOCOL
====================== */
section.protocol {    
    overflow: hidden;
}
section.protocol.protocol-01 .inner .head,
section.protocol.protocol-03 .inner .head {
    padding: 20px 10px;
}

section.protocol.protocol-01 .inner .head,
section.protocol.protocol-03 .inner .head,
section.protocol.protocol-02 .inner .head .step-outer {
    background-color: var(--title-clr);
}

section.protocol.protocol-01 .inner .head p,
section.protocol.protocol-03 .inner .head p {
    font-family: var(--abhayalibre-medium);
    font-size: calc(var(--fs-content) + 3px);
    color: var(--light-clr);
    font-weight: normal;
    margin-bottom: 0;
}
section.protocol.protocol-01 .inner .head h1,
section.protocol.protocol-03 .inner .head h1 {
    margin-top: 10px;
    font-family: var(--abhayalibre-medium);
    font-size: calc(var(--fs-title) + 7px);
    font-weight: normal;
    line-height: 1;
    color: var(--light-clr);
}

/* Protocol 03 */
.protocol.protocol-03 {
    background-color: transparent;
    position: relative;
}
.protocol.protocol-03 .inner .body {
    padding: 20px 0 30px;
}

section.protocol.protocol-03 .inner .body .slider {
    max-width: 960px;
}
section.protocol.protocol-03 .inner .body .slider .slider-item {
    height: 420px;
    padding: 20px 30px 40px;
    display: flex;
    flex-direction: column;
}
section.protocol.protocol-03 .inner .body .slider .slider-item .content {
    border-radius: 10px;
    margin: auto;
    padding: 10px 0;
    width: 100%;
    height: 78%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--bg-protocol-clr);
    box-shadow: 0 19px 20px -10px rgba(var(--bg-protocol-rgb), .15);
    transition: height 0.5s ease-in-out;
}
section.protocol.protocol-03 .inner .body .slider .slider-item.slick-slide.slick-center .content {
    height: 100%;
}
section.protocol.protocol-03 .inner .body .slider .slider-item .content .text-wrap {
    
}
section.protocol.protocol-03 .inner .body .slider .slider-item .content .img-wrap {
    width: 100%;
    height: 85%;
}
.protocol.protocol-03 .inner .body .slider .slick-list {
    min-height: 0;
}
.protocol.protocol-03 .inner .body .slider .slick-slide {
    opacity: 0.4;
    width: 320px;
}
.protocol.protocol-03 .inner .body .slider .slick-slide.slick-center {
    opacity: 1;
}
.protocol.protocol-03 .inner .body .slider .content .img-01,
.protocol.protocol-03 .inner .body .slider .slick-slide.slick-center .content .img-01 {
    width: 100%;
    height: 100%;
}

@media only screen and (max-width: 425px) {
    section.protocol.protocol-03 .inner .body .slider .slider-item {
        height: 380px;
        padding: 20px 10px 40px;
    }
    .protocol.protocol-03 .inner .body .slider .slick-slide {
        width: 250px;
    }
}

@media only screen and (max-width: 420px) {
    .protocol.protocol-03 .inner .body .slider .content .img-01,
    .protocol.protocol-03 .inner .body .slider .slick-slide.slick-center .content .img-01 {
        height: 100%!important;
    }
    .protocol.protocol-03 .inner .body .slider .slick-list {
        min-height: 0!important;
    }
    .protocol.protocol-03 .inner .body .slider .slick-slide {
        width: 250px!important;
    }
}

section.protocol.protocol-03 .inner .body .slider .content .text-01 {
    font-family: var(--abhayalibre-bold);
    font-weight: normal;
    font-size: calc(var(--fs-content) + 4px);
    color: var(--title-clr);
    text-transform: capitalize;
}
.protocol.protocol-03 .inner .body .slider_dots::before {
    border-color: var(--title-clr);
}
.protocol.protocol-03 .inner .body .slider_dots .slider_navigator {
    background-color: rgba(var(--title-rgb), .25);
}
.protocol.protocol-03 .inner .body .slider_dots .slider_navigator.slick-current.slick-center {
    background-color: var(--title-clr);
}

/* Protocol 04 */
section.protocol-04 {
    background-color: transparent;
}
section.protocol-04 .inner {
    padding: 30px 0px;
}

section.protocol-04 .inner .head .title {
    font-size: var(--fs-title);
    font-family: var(--als);
    font-weight: normal;
    line-height: 1.4;
    color: var(--title-clr);
}

section.protocol-04 .inner .body {
    padding: 0px;
}

/* protocol items */
.kat-page__side-to-side .secondary-pane section.protocol-04 .protocol-item-wrap {
    max-width: none;
}
section.protocol-04 .protocol-item-wrap {
    flex-direction: row;
}

section.protocol-04 .protocol-item-wrap .slick-slide {
    
}

section.protocol-04 .protocol-item-wrap .protocol-item {
    width: 100%;
    height: 200px;
    margin: 5px;
    background-color: var(--bg-protocol-clr);
    border-color: var(--bg-protocol-clr);
}
section.protocol-04 .protocol-item-wrap .protocol-item .icon-wrap {
    padding: 0px;
}
section.protocol-04 .protocol-item-wrap .protocol-item .icon-wrap .icon {
    width: 80px;
    height: 80px;
}
section.protocol-04 .protocol-item-wrap .protocol-item .text-wrap {
    padding: 0px 10px;
}
section.protocol-04 .protocol-item-wrap .protocol-item .text-wrap .text {
    font-size: calc(var(--fs-content) + 4px);
    font-family: var(--abhayalibre-medium);
    font-weight: normal;
    color: var(--dark-clr);
}

/* protocol dots */
section.protocol-04 .protocol-dots {
    display: flex;
    align-items: center;
    margin: 20px auto 0px;
    width: 100%;
    max-width: 140px;
}
section.protocol-04 .protocol-dots .slick-slide {
    
}
section.protocol-04 .protocol-dots .dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin: 5px;
    background: var(--light-clr);
}
section.protocol-04 .protocol-dots .slick-slide.slick-center .dot {
    background: var(--title-clr);
}



/* ==============================
        Wedding Wish
============================== */
.wedding-wish-wrap {
    position: relative;
    overflow: hidden;
    background: none;
}
.wedding-wish-inner {
    padding: 20px 0px;
}

/* head */
.wedding-wish-head {
    padding: 20px;
    text-align: center;
}
.wedding-wish-head .wedding-wish-title {
    font-family: var(--als);
    font-size: calc(var(--fs-title) + 0px);
    line-height: 1;
    margin-bottom: 0.25em;
    color: var(--title-clr);
}
.wedding-wish-head .wedding-wish-description {
    font-style: italic;
    font-family: var(--abhayalibre-medium);
}

/* Body */
.wedding-wish-body {
    
}

/* Form */
.wedding-wish-form {
    padding: 20px;
}

.wedding-wish-form .hide {
    display: none;
}
.wedding-wish-form .form-control {
    background-color: rgba(var(--light-rgb), .8);
    border: none;
    border-radius: 15px;
    padding: 15px;
    font-family: var(--abhayalibre-medium);
    font-size: var(--fs-content);
    color: var(--dark-clr);
}
.wedding-wish-form .form-control:focus {
    border: none;
    box-shadow: none;
}
.wedding-wish-form textarea.form-control {
    max-height: 250px;
}
.wedding-wish-form .submit-comment {
    border-radius: 10px;
    padding: 10px 25px;
    cursor: pointer;
    border: none;
    outline: none;
    background-color: var(--button-primary-clr);
    color: var(--light-clr);
    font-family: var(--abhayalibre-medium);
    font-size: var(--fs-content);
    transition: all 0.25s ease-in-out;
}
.wedding-wish-form .submit-comment > i {
    margin-left: 5px;
}
.wedding-wish-form .submit-comment > i.fa-paper-plane {
    display: none;
}
.wedding-wish-form .submit-comment:hover {
    background-color: var(--title-clr);
}

/* Comment Wrap */
.comment-wrap {
    padding: 20px;
    display: none;
}
.comment-wrap.show {
    display: block;
}
.comment-item {
    margin-bottom: 16px;
}
.comment-item:last-of-type {
    margin-bottom: 0px;
}
.comment-head {
    position: relative;
    margin-bottom: 10px;
}
.comment-head .comment-name {
    font-family: var(--abhayalibre-bold);
    font-size: calc(var(--fs-content) + 2px);
    margin-bottom: 0.15em;
    color: var(--title-clr);
}
.comment-head .comment-name > i {
    font-size: 0.65em;
    margin-left: 5px;
}
.comment-head .comment-date {
    font-family: var(--abhayalibre-bold);
    font-size: calc(var(--fs-content) - 2px);
    display: block;
    color: var(--dark-clr);
    margin-top: 5px;
}

.comment-head .delete-comment {
    position: absolute;
    top: 5px;
    right: 0;
    text-decoration: none;
    font-size: calc(var(--fs-content) - 2px);
    display: inline-block;
    vertical-align: top;
    color: rgba(var(--button-delete-rgb), .5);
    transition: color 0.25s ease-in-out;
}
.comment-head .delete-comment:hover {
    color: var(--button-delete-clr);
}

.comment-body {
    
}
.comment-body .comment-caption {
    font-family: var(--abhayalibre-medium);
    color: var(--dark-clr);
}

/* More Comment */
.more-comment-wrap {
    padding: 20px;
    display: none;
}
.more-comment-wrap.show {
    display: block;
}
#moreComment {
    width: 100%;
    display: block;
    border-radius: 20px;
    padding: 10px 20px;
    margin: 0 auto;
    text-decoration: none;
    background-color: var(--title-clr);
    border: none;
    outline: none;
    color: var(--light-clr);
    font-family: var(--abhayalibre-medium);
    font-size: var(--fs-content);
    cursor: pointer;
    transition: all 0.25s ease-in-out;
}
#moreComment:hover {
    background-color: var(--button-primary-clr);
}



/* ==============================
        Footnote
============================== */
.footnote-wrap {
    position: relative;
    overflow: hidden;
    padding: 40px 0px 0px;
    background-color: var(--secondary-clr);
}

/* birdge */
.footnote-wrap .footnote-bridge-wrap {
    min-height: 280px;
}
.footnote-wrap .footnote-bridge-img {
    width: 100%;
    height: auto;
    display: block;
    opacity: .4;
}

/* footnote */
.footnote-wrap .footnote {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.footnote-wrap .footnote .footnote-title {
    color: var(--title-clr);
    font-family: var(--als);
    font-size: calc(var(--fs-title) + 22px);
    line-height: 1;
}
.footnote-wrap .footnote .footnote-title.and {
    font-size: calc(var(--fs-title) + 16px);
}
.footnote-wrap .footnote .footnote-title.groom {
    margin-left: 60px;
}
.footnote-wrap .footnote .footnote-title.bride {
    margin-left: -60px;
}



/* =======================
        FOOTER
======================= */
section.footer {
    background: var(--title-clr);
    padding: 0;
}
section.footer .footer-inner {
    padding: 10px 0;
}
section.footer .footer-inner p {
    font-weight: normal;
    color: var(--secondary-clr);
    font-size: var(--fs-content);
    font-family: var(--abhayalibre-medium);
}
.footer .footer-inner .footer-logo {
    width: 55px;
}
section.footer .footer-inner .footer-logo path {
    fill: var(--secondary-clr);
}

@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-size: calc(var(--fs-content) + 5px);
    }
    section.footer .footer-inner.flex-column .footer-logo {
        margin-top: 10px;
        width: 150px;
    }
}



/* Person */
section.person p {
    font-family: var(--roboto);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    color: #000000;
}