#card-banner { aspect-ratio: 420 / 630; background-size: cover; background-position: center top; background-repeat: no-repeat; position: relative; }

#card-banner .wedding-name { position: absolute; z-index: 1; left: 0px; bottom: 0px; font-size: 80px; line-height: 1; color: rgb(255, 255, 255); text-align: left; font-family: vip-hastegi, sans-serif; text-transform: uppercase; padding-left: 2rem; padding-right: 2rem; width: 100%; }

#card-banner .wedding-name .groom { display: block; margin-bottom: -10%; }

#card-banner .wedding-name .and { font-family: vip-arcittya-begatri; vertical-align: top; font-size: 115%; float: left; }

#card-banner .wedding-name .bride { display: inline-block; margin-top: 6%; }

#card-banner::before { z-index: 0; height: 400px; width: 100%; position: absolute; left: 0px; bottom: 0px; content: ""; display: block; background-image: linear-gradient(rgba(253,251,251,0),rgba(var(--color-primary-raw),0.4)); background-color: initial; background-size: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-attachment: initial; }

#card-banner .wedding-name { line-height: 1.5; font-size: 75px; font-family: ntn-v2; text-transform: none; }

#card-banner .wedding-name .groom { margin-bottom: 0px; }

#card-banner .wedding-name .bride { margin-top: 0px; }

#card-banner .wedding-name .and { font-size: 100px; line-height: 1; }

#card-info { color: var(--text-color-primary); position: relative; }

#card-info > .inner { padding: 50px 0px; position: relative; z-index: 1; }

#card-info .parents { margin-top: 32px; margin-bottom: 36px; display: flex; align-items: start; justify-content: center; }

#card-info .parents .parent { text-align: center; font-size: 14px; flex: 1 1 0%; }

#card-info .parents .parent .label { text-transform: uppercase; font-weight: 600; color: var(--text-color-primary-darker); }

#card-info .parents .parent .location { font-size: 13px; font-style: italic; margin-top: 3px; }

#card-info .main-content-event { text-align: center; position: relative; padding: 100px 0px 80px; width: 104%; left: -2%; }

#card-info .main-content-event .frame-bottom { content: ""; display: block; width: 100%; background-position: center bottom; background-repeat: no-repeat; background-size: 100%; height: 50%; position: absolute; bottom: 0px; left: 0px; }

#card-info .main-content-event .frame-top { content: ""; display: block; width: 100%; background-position: center top; background-repeat: no-repeat; background-size: 100%; height: 60%; position: absolute; top: 0px; left: 0px; }

#card-info .main-content-event .frame-left { height: 44%; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); aspect-ratio: 10 / 13; background-position: left top; background-size: 50%; background-repeat: repeat-y; }

#card-info .main-content-event .frame-right { height: 44%; position: absolute; right: 0px; top: 50%; transform: translateY(-50%) scaleX(-1); aspect-ratio: 10 / 13; background-position: left top; background-size: 50%; background-repeat: repeat-y; }

#card-info .main-content-event .main-content-event-inner { position: relative; padding: 16px 12px 0px; }

#card-info .main-content-event .greeting { font-family: lora; line-height: 1.6; color: var(--text-color-primary); text-align: center; font-size: 16px; margin-top: 32px; margin-bottom: 24px; }

#card-info .main-content-event .greeting strong { font-size: 22px; }

#card-info .main-content-event .bottom-text { font-size: 14px; }

#card-info .main-content-event .text { font-family: lora; font-size: 14px; line-height: 1.6; color: var(--text-color-primary); text-transform: uppercase; text-align: center; margin-bottom: 12px; }

#card-info .main-content-event .names { line-height: 1; padding: 16px 0px; color: var(--color-primary); }

#card-info .main-content-event .names .name { font-family: TH-Maginia; font-size: 50px; line-height: 1; }

#card-info .main-content-event .names .and { font-family: beyondperfection; font-size: 30px; margin-bottom: 15px; }

#card-info .main-content-event .time-wrapper { text-transform: uppercase; font-size: 18px; margin-bottom: 8px; }

#card-info .main-content-event .time-wrapper strong { font-weight: 600; }

#card-info .main-content-event .date-wrapper .date-wrapper-inner { display: flex; justify-content: center; color: var(--color-primary); }

#card-info .main-content-event .date-wrapper .date-wrapper-inner > div { width: 80px; }

#card-info .main-content-event .date-wrapper .date-wrapper-inner > div.v-divider { width: 2px; height: 50px; background-color: var(--color-primary); }

#card-info .main-content-event .date-wrapper .date-wrapper-inner > div.day { text-align: right; padding-right: 24px; flex: 1 1 0%; }

#card-info .main-content-event .date-wrapper .date-wrapper-inner > div.day > div { text-align: center; display: inline-block; }

#card-info .main-content-event .date-wrapper .date-wrapper-inner > div.year { text-align: left; padding-left: 24px; flex: 1 1 0%; }

#card-info .main-content-event .date-wrapper .date-wrapper-inner > div.year > div { text-align: center; display: inline-block; }

#card-info .main-content-event .date-wrapper .date-wrapper-inner .label { font-size: 13px; }

#card-info .main-content-event .date-wrapper .date-wrapper-inner .value { font-size: 36px; font-weight: 600; line-height: 1; }

#card-info .main-content-event .date-wrapper .lunar-date { margin-top: 12px; font-size: 15px; }

#card-info .main-content-event .location-wrapper { margin-top: 30px; margin-bottom: 16px; }

#card-info .main-content-event .location-wrapper .address-title { line-height: 1.1; color: var(--text-color-primary-darker); text-align: center; margin-bottom: 8px; text-transform: uppercase; font-size: 22px; }

#card-info .main-content-event .location-wrapper .address { font-family: lora; font-size: 15px; font-style: italic; line-height: 1.6; color: var(--text-color-primary); text-align: center; }

#card-info .main-content-event .location-wrapper .map-btn { text-align: center; margin-top: 12px; }

#card-info .main-content-event .location-wrapper .map-btn .btn { font-family: lora; font-weight: 600; font-size: 14px; line-height: 1.6; color: var(--text-color-primary); text-transform: uppercase; text-align: center; margin: auto; display: inline-block; }

#card-info .main-content-event .location-wrapper .map-btn .btn i { font-size: 20px; }

#card-info .main-content-event .multiple-events { margin-top: 12px; }

#card-info .main-content-event .multiple-events hr { margin: 32px; }

#card-calendar { background-repeat: repeat; background-position: center center; background-attachment: scroll; background-origin: content-box; background-size: cover; color: rgb(255, 255, 255); font-family: lora; }

#card-calendar .calendar-header { font-family: uvnhoatay; font-size: 65px; line-height: 1.6; text-align: center; }

#card-calendar > .inner { background-color: rgba(0, 0, 0, 0.5); padding: 16px 20px 24px; }

#card-calendar .mini_calendar.mini_calendar_white table { --tb-border-color: transparent; --tb-color-wedding-day: var(--color-primary); }

#card-timeline { position: relative; padding: 50px 0px; }

#card-timeline .frame-bottom { content: ""; display: block; width: 100%; background-position: center bottom; background-repeat: no-repeat; background-size: 100%; height: 50%; position: absolute; bottom: 0px; left: 0px; }

#card-timeline .frame-top { content: ""; display: block; width: 100%; background-position: center top; background-repeat: no-repeat; background-size: 100%; height: 60%; position: absolute; top: 0px; left: 0px; }

#card-timeline .frame-left { height: var(--height,120px); position: absolute; left: 1%; top: 50%; transform: translateY(-50%); aspect-ratio: 10 / 13; background-position: left top; background-size: 100%; background-repeat: no-repeat; }

#card-timeline .frame-right { height: var(--height,120px); position: absolute; right: 1%; top: 50%; transform: translateY(-50%) scaleX(-1); aspect-ratio: 10 / 13; background-position: left top; background-size: 100%; background-repeat: no-repeat; }

#card-timeline > .inner { position: relative; z-index: 1; width: 104%; left: -2%; padding: 120px 0px; --height: 180px; }

#card-timeline .card-section-title { font-size: 71px; line-height: 1.6; margin-bottom: 0px; color: var(--color-primary); text-align: center; font-family: uvnhoatay; position: relative; }

#card-timeline .card-section-title img { position: absolute; right: 0px; top: 0px; width: 120px; }

#card-timeline .timeline { position: relative; }

#card-timeline .timeline::before { content: ""; display: block; width: 1px; height: 100%; position: absolute; left: 50%; transform: translateX(-50%); background-color: var(--text-color-primary-darker); }

#card-timeline .timeline-line { position: relative; display: flex; align-items: center; gap: 16px; padding: 24px 0px; }

#card-timeline .timeline-line:nth-child(2n) { flex-flow: row-reverse; }

#card-timeline .timeline-line:nth-child(2n) > div:last-child { text-align: right; }

#card-timeline .timeline-line:nth-child(2n+1) > div:first-child { text-align: right; }

#card-timeline .timeline-line .content { color: var(--text-color-primary-darker); flex: 1 1 0%; text-transform: uppercase; font-family: Montserrat; }

#card-timeline .timeline-line .content .time { font-weight: 600; line-height: 1; }

#card-timeline .timeline-line .content .text { font-size: 15px; }

#card-timeline .timeline.simple::before { content: none; }

#card-timeline .timeline.simple .timeline-line { flex-direction: column; gap: 12px; padding: 16px 0px; align-items: center; justify-content: center; }

#card-timeline .timeline.simple .timeline-line:nth-child(2n) { flex-flow: column; }

#card-timeline .timeline.simple .timeline-line:nth-child(2n) > div:last-child { text-align: center; }

#card-timeline .timeline.simple .timeline-line:nth-child(2n+1) > div:first-child { text-align: center; }

#card-timeline .timeline.simple .timeline-line .content { text-align: center; }

#card-timeline .timeline.simple .timeline-line .content .time { line-height: unset; font-size: 24px; }

#card-timeline .timeline.simple .timeline-line .content .text { font-size: 16px; }

#card-dresscode { position: relative; text-align: center; margin-top: 20px; margin-bottom: 20px; }

#card-dresscode .dresscode-title { font-size: 71px; line-height: 1.6; margin-bottom: 0px; color: var(--color-primary); text-align: center; font-family: uvnhoatay; }

#card-dresscode .dresscode-wrapper { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; }

#card-dresscode .dresscode-wrapper .code-box { position: relative; width: 40px; height: 40px; box-shadow: rgb(0, 0, 0) 0px 15px 20px -15px; background-color: var(--color); border-radius: 40px; border: 2px solid rgb(255, 255, 255); margin-bottom: 5px; }

#couple-images { position: relative; margin-top: 65px; }

#couple-images .decor-flower { position: absolute; }

#couple-images .decor-flower.decor-flower1 { width: 120px; top: -20px; right: 20px; }

#couple-images .decor-flower.decor-flower2 { width: 120px; left: 30px; top: -50px; transform: rotate(45deg); }

#couple-images .decor-flower.decor-flower3 { width: 90px; left: 90px; bottom: -150px; transform: rotate(80deg); }

#couple-images > .inner { text-align: center; padding-bottom: 50px; position: relative; }

#couple-images .photo-card { display: inline-block; padding: 24px 5px 5px; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; }

#couple-images .photo-card .img { aspect-ratio: 9 / 13; background-position: center center; background-repeat: no-repeat; background-size: cover; width: 40vw; max-width: 190px; }

#couple-images .photo-card.groom { transform: rotate(-5deg); }

#couple-images .photo-card.bride { z-index: 1; position: relative; transform: rotate(10deg) translate(10px, 40px); }

#couple-images .photo-card.bride img { position: absolute; top: -40px; height: 50px; right: 5px; transform: rotate(-10deg); }

#card-love-story .gallery-header { position: relative; }

#card-love-story .gallery-header::before { height: 300px; width: 100%; display: block; content: ""; position: absolute; bottom: 0px; left: 0px; background-image: linear-gradient(rgba(253, 251, 251, 0), rgba(1, 1, 1, 0.6)); background-color: initial; background-size: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-attachment: initial; }

#card-love-story .gallery-header .section-title { position: absolute; bottom: 50px; left: 0px; color: rgb(255, 255, 255); line-height: 1.7; font-family: beyondperfection; font-size: 35px; width: 100%; text-align: center; }

#card-love-story .gallery-header .section-title > span { margin-right: 12px; }

#card-love-story .timeline { position: relative; padding: 50px 16px; background: var(--color-primary); color: rgb(255, 255, 255); }

#card-love-story .timeline::before { content: ""; display: block; position: absolute; border-right: 1px solid rgba(255, 255, 255, 0.3); left: 50%; height: calc(100% - 100px); top: 50px; }

#card-love-story .timeline .timeline-line { display: flex; gap: 24px; position: relative; padding: 24px 0px; }

#card-love-story .timeline .timeline-line::before { content: ""; display: inline-block; position: absolute; z-index: 1; top: -16px; left: 50%; transform: translateX(-50%); font-family: bootstrap-icons !important; }

#card-love-story .timeline .timeline-line:nth-child(2n) { flex-direction: row-reverse; }

#card-love-story .timeline .timeline-line:nth-child(2n) .text { text-align: left; }

#card-love-story .timeline .timeline-line:nth-child(2n) .text p { text-align: justify; }

#card-love-story .timeline .timeline-line:last-child { padding-bottom: 0px; }

#card-love-story .timeline .timeline-line .text { flex: 1 1 0%; text-align: right; display: flex; flex-direction: column; align-items: center; justify-content: center; }

#card-love-story .timeline .timeline-line .text > div { width: 100%; }

#card-love-story .timeline .timeline-line .text .title { font-size: 16px; font-style: italic; }

#card-love-story .timeline .timeline-line .text .year { font-size: 18px; font-weight: 600; }

#card-love-story .timeline .timeline-line .text p { margin-top: 10px; text-align: justify; font-size: 14px; }

#card-love-story .timeline .timeline-line .img { flex: 1 1 0%; }

.photo-grid { column-count: 2; column-gap: 5px; }

.photo-grid .photo { width: 100%; display: block; margin-bottom: 5px; }

.photo-grid .photo img { width: 100%; display: block; }

.photo-grid + .view-more { margin-top: 50px; }

.photo-grid[data-masonry] { column-gap: unset; column-count: unset; margin: 0px -3px; }

.photo-grid[data-masonry] .photo { padding: 3px; width: 50%; margin-bottom: 0px; }

.photo-grid[data-masonry] .photo img { height: auto; }

#card-gallery { padding: 24px 20px 50px; background-color: var(--color-primary); color: rgb(255, 255, 255); }

#card-save-the-date { aspect-ratio: 16 / 11; background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; }

#card-save-the-date::before { content: ""; background-color: rgba(1, 1, 1, 0.3); display: block; position: absolute; left: 0px; bottom: 0px; height: 100%; width: 100%; }

#card-save-the-date h2 { position: absolute; z-index: 1; font-size: 36px; line-height: 1.8; letter-spacing: 1px; color: rgb(255, 255, 255); bottom: 0px; left: 0px; padding-left: 24px; padding-bottom: 10px; margin-bottom: 0px; font-weight: 400; font-family: beyondperfection; }

#card-comments { position: relative; }

#card-comments .inner { position: relative; padding: 20px 16px 50px; z-index: 1; }

#card-comments .card-section-title { font-size: 71px; line-height: 1.6; margin-bottom: 0px; color: var(--color-primary); text-align: center; font-family: uvnhoatay; }

#card-comments .card-section-subtitle { margin-bottom: 24px; color: var(--text-color-primary); text-align: center; }

#card-comments .comment-form { background-color: rgba(var(--color-primary-raw),0.25); padding: 16px; }

#card-comments .comment-form .btn { background-color: var(--color-primary); }

#card-comments .comment-list .comment-box { padding: 12px 0px; }

#card-comments .comment-list .comment-box .fullname { font-weight: 500; color: var(--text-color-primary); }

#card-thankyou { position: relative; background-size: cover; background-origin: content-box; background-position: center center; background-repeat: no-repeat; background-attachment: scroll; aspect-ratio: 1 / 1; }

#card-thankyou::after { height: 100%; width: 100%; display: block; content: ""; position: absolute; bottom: 0px; left: 0px; background-color: rgba(1, 1, 1, 0.25); }

#card-thankyou .card-thankyou-inner { position: absolute; left: 0px; bottom: 0px; width: 100%; padding: 24px 16px 32px; z-index: 1; color: rgb(255, 255, 255); }

#card-thankyou .card-thankyou-inner .thankyou-title { font-family: uvnhoatay; font-size: 48.41px; line-height: 1.6; text-align: center; }

#card-thankyou .card-thankyou-inner .thankyou-text { font-size: 14px; line-height: 1.5; text-align: center; }

#card-countdown { background-image: url("https://cocohappii.com/templates/012/images/decor1.png"); background-position: center bottom; background-repeat: no-repeat; background-size: 160px; }

#card-countdown > .inner { padding: 50px 16px; text-align: center; background-size: 100% 60%; background-repeat: no-repeat; background-position: center bottom; }

#card-countdown .logo { margin-bottom: 30px; }

#card-countdown .logo img { width: 110px; transform: translateX(-15px); }

#card-countdown h3 { text-transform: uppercase; font-size: 21px; line-height: 1.5; letter-spacing: 1px; font-weight: 400; font-family: brygada1918; color: var(--color-primary); position: relative; }

#countdown .countdown-inner { display: flex; align-items: center; justify-content: center; }

#countdown .box, #countdown .colon { font-size: 33px; color: var(--color-primary); font-family: lora; }

#countdown .colon { padding: 0px 8px; font-size: 20px; }

#countdown .box { min-width: 45px; }

@media screen and (max-width: 430px) {
  #groom-bride .groom-bride .bride .img .button { width: 90px; right: -75px; }
  #groom-bride .groom-bride .groom .img > div > img.flower { width: 115px; bottom: -100px; right: -90px; }
  #groom-bride .groom-bride .bride .img > div > img.flower { width: 120px; }
  #groom-bride .info .label { line-height: 1.4; font-size: 30px; }
  #groom-bride .info .name { font-size: 22px; }
}

@media screen and (min-width: 400px) {
  #card-timeline > .inner { --height: 160px; }
}

@media screen and (min-width: 440px) {
  #card-timeline > .inner { --height: 120px; }
}

@font-face { font-family: beyondperfection; src: url("../font/beyondperfection-regular.ttf"); }

@font-face { font-family: vip-arcittya-begatri; src: url("../font/1ftv-vip-arcittya-begatri.otf"); }

@font-face { font-family: vip-hastegi; src: url("../font/1ftv-vip-hastegi.otf"); }

@font-face { font-family: lora; src: url("../font/lora-regular.ttf"); }

@font-face { font-family: lora; src: url("../font/lora-semibold.ttf"); font-weight: 600; }

@font-face { font-family: uvnhoatay; src: url("../font/uvnhoatay1.ttf"); }

@font-face { font-family: TH-Maginia; src: url("../font/TH-Maginia.ttf"); }

@font-face { font-family: ntn-v2; src: url("../font/ntn-v2.ttf"); }

body { background-color: rgb(51, 51, 51); font-family: lora; font-size: 16px; }

body a { text-decoration: none; color: inherit; }

body .btn-link { text-decoration: none; color: rgb(63, 81, 181); }

body img { max-width: 100%; }

body { --color-primary: rgba(189, 149, 84); --text-color-primary: rgb(55, 52, 53); --color-primary-raw: 189, 149, 84; --text-color-primary-darker: rgb(55, 52, 53); }

.card-wrapper { max-width: 480px; margin: auto; overflow: hidden; background-color: rgb(254, 254, 254); }

#card-dresscode { position: relative; text-align: center; margin-top: 20px; margin-bottom: 20px; }

#card-dresscode .dresscode-title { font-size: 71px; line-height: 1.6; margin-bottom: 0px; color: var(--text-color-primary-darker); text-align: center; font-family: uvnhoatay; }

#card-dresscode .dresscode-wrapper { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; }

#card-dresscode .dresscode-wrapper .code-box { position: relative; width: 40px; height: 40px; box-shadow: rgb(0, 0, 0) 0px 15px 20px -15px; background-color: var(--color); border-radius: 40px; border: 2px solid rgb(255, 255, 255); margin-bottom: 5px; }

#card-info .main-content-event .multiple-events hr { opacity: 0.05; }

.card-wrapper.theme-blue { --color-primary: rgb(63, 92, 132); --text-color-primary: rgb(63, 92, 132); --color-primary-raw: 63, 92, 132; }

.card-wrapper.theme-blue img.img-themeable { filter: brightness(0) saturate(100%) invert(35%) sepia(14%) saturate(1598%) hue-rotate(175deg) brightness(90%) contrast(87%); }

.card-wrapper.theme-blue div.div-themeable { background: var(--color-primary) !important; }

.card-wrapper.theme-blue #card-countdown { background-image: none !important; }

.card-wrapper.theme-blue #card-info .main-content-event .frame-top { background-image: url("../images/frame_top_blue.png") !important; }

.card-wrapper.theme-blue #card-info .main-content-event .frame-bottom { background-image: url("../images/frame_bottom_blue.png") !important; }

.card-wrapper.theme-blue #card-info .main-content-event .frame-left { background-image: url("../images/frame-center-piece-blue.png") !important; }

.card-wrapper.theme-blue #card-info .main-content-event .frame-right { background-image: url("../images/frame-center-piece-blue.png") !important; }

#card-info .main-content-event .frame-left { height: 50%; background-size: 25%; }

#card-info .main-content-event .frame-right { height: 50%; background-size: 25%; }

#card-info .main-content-event .greeting { padding: 0px 36px; }

#card-gift { position: relative; overflow: hidden; padding-bottom: 50px; }

#card-gift .inner { position: relative; padding: 50px 20px; z-index: 1; border-bottom: 1px solid var(--color-primary); }

#card-gift .card-section-title { font-size: 71px; line-height: 1.6; margin-bottom: 0px; color: var(--color-primary); text-align: center; font-family: uvnhoatay; }

#card-gift .card-section-subtitle { margin-bottom: 24px; color: var(--color-primary); text-align: center; }

#card-gift .present-box { text-align: center; }

#card-gift .present-box .present-box-inner { color: var(--color-primary); border: 2px solid; padding: 16px; border-radius: 8px; display: inline-block; margin: auto; cursor: pointer; }

#card-gift .present-box .present-box-inner img { width: 200px; }

#card-banks { position: relative; overflow: hidden; padding-bottom: 50px; }

#card-banks .inner { position: relative; padding: 50px 20px; z-index: 1; }

#card-banks .card-section-title { font-size: 71px; line-height: 1.6; margin-bottom: 0px; color: var(--color-primary); text-align: center; font-family: uvnhoatay; }

#card-banks .card-section-subtitle { margin-bottom: 24px; color: var(--text-color-primary); text-align: center; }

.bank-list { display: flex; flex-direction: column; gap: 24px; }

.bank-list .bank-box { flex: 1 1 0%; padding: 16px; border: 2px dashed var(--color-primary); border-radius: 12px; text-align: center; color: var(--color-primary); }

.bank-list .bank-box.single { border: 0px; }

.bank-list .bank-box .title { text-transform: uppercase; margin-bottom: 10px; font-weight: 500; }

.bank-list .bank-box .qr-code img { width: 100%; display: block; cursor: zoom-in; margin: auto; max-width: 300px; }

.bank-list .bank-box.single .qr-code img { max-width: 85%; }

.bank-list .bank-box .info > div { margin: 10px 0px; }

.bank-list .bank-box .info > div:last-child { margin-bottom: 0px; }