
            .greeting-text {
                font-family:'Playfair Display';
            }

            .greeting-name-text {
                
            }

            body, .form-select, .form-control, .form-control::placeholder{
                
            }

            :root {
--color-dark: #4A403A;
--gold-deep: #8A6D1F;
--av-noise: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/><feComponentTransfer><feFuncA type="linear" slope="0.045"/></feComponentTransfer></filter><rect width="180" height="180" filter="url(%23n)"/></svg>');
--bs-body-color: #4A403A;
}
.main-app { background-color: #FDFBF7 !important; }
.cover-section {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100vh !important;
z-index: 1000 !important;
}
.loader-wrapper {
z-index: 1500 !important;
}
.cover-section, .header-section {
background-color: #6B5D42 !important;
background-image: url('/assets/mxmyj2.png') !important;
background-repeat: repeat !important;
background-position: center top !important;
background-size: 512px auto !important;
}
.cover-body {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding-top: 200px !important;
}
.header-content::after {
content: '';
position: absolute;
top: clamp(55px, 10vh, 85px);
left: 50%;
transform: translateX(-50%);
width: clamp(84px, 12vh, 100px);
height: clamp(84px, 12vh, 100px);
background: url('/assets/rlue20.png') no-repeat center / contain;
opacity: 0;
animation: av-crest-in 1.2s ease-out forwards;
animation-delay: 1.15s;
pointer-events: none;
z-index: 0;
}
@keyframes av-crest-in {
from { opacity: 0; transform: translateX(-50%) translateY(28px); }
to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.cover-wrapper .cover-body .cover-content { background: transparent !important; }
.cover-body::before { background: transparent !important; border: none !important; }
.cover-content h1.title, .cover-content h1.cover_style, .cover-content h1 {
font-family: 'Great Vibes', 'Pinyon Script', cursive !important;
color: #D4AF37 !important;
text-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 0 15px rgba(232,200,74,0.3);
font-weight: 400; letter-spacing: .02em; text-transform: none !important;
}
.cover-description p, .cover-description .title {
font-family: 'Playfair Display', Georgia, serif !important;
text-transform: uppercase; letter-spacing: .12em; color: #D4C086 !important;
}
.header-section .header-title-content { padding-top: 180px !important; }
.header-section .header-title-content h1,
.header-section .header-title-content .title { color: #D4AF37 !important; }
.header-section .header-title-content p {
color: #F5E6B8 !important;
text-shadow: 0 1px 3px rgba(0,0,0,0.35) !important;
}
.header-section .countdown,
.header-section .countdown .angka,
.header-section .countdown .huruf,
.header-section .countdown p,
.header-section .countdown span,
.cover-section .countdown,
.cover-section .countdown .angka,
.cover-section .countdown .huruf,
.cover-section .countdown p,
.cover-section .countdown span {
color: #FDFBF7 !important;
text-shadow: 0 1px 3px rgba(0,0,0,0.35) !important;
}
.header-title-content {
background-color: transparent !important;
background-image: none !important;
}
.header-title-content h1, .header-title-content h2,
.header-title-content .title {
font-family: 'Great Vibes', 'Pinyon Script', cursive !important;
color: #4A403A !important; font-weight: 400; text-transform: none !important;
}
.header-title-content {
color: #4A403A; text-transform: uppercase; letter-spacing: .08em;
font-family: 'Playfair Display', Georgia, serif !important;
}
.header-title-content h1.title span {
font-size: 1em !important; line-height: 1 !important; display: inline !important;
vertical-align: baseline !important; padding: 0 0.15em !important;
}
.title-section h2, .title-section h3, .title-section h4,
h2, h3, h4, h5 {
font-family: 'Playfair Display', Georgia, serif !important;
}
.title-section { color: #4A403A; text-transform: uppercase; letter-spacing: .1em; }
p, body, .couple-content, .venue-content, .rsvp-section,
.wishes-section, .stream-section, .thank-section {
color: #4A403A; font-family: 'Playfair Display', Georgia, serif !important;
}
.bride_style, .groom_style, .couple-content h3, .couple-name {
font-family: 'Great Vibes', 'Pinyon Script', cursive !important;
font-weight: 400 !important;
text-transform: none !important;
letter-spacing: .02em !important;
}
.bride_style, .groom_style { font-size: 50px !important; }
@media (max-width: 767px) {
.bride_style, .groom_style { font-size: 42px !important; }
}
.bride_style, .groom_style, .couple-description h3,
.couple-content h3, .couple-name {
color: #4A403A !important; text-shadow: none !important;
}
.couple-content h1, .couple-content .couple-name, .couple-name,
.couple-content h2 {
font-family: 'Great Vibes', 'Pinyon Script', cursive !important;
color: var(--gold-deep) !important; 
font-weight: 400; font-size: 2.2em;
text-transform: none !important;
}
.bg-forest-card, .venue-wrapper [class*="card"] {
background-color: #FDFBF7 !important; color: #4A403A !important;
border: 1px solid #D4AF37 !important;
}
.reminder-content, .countdown, .time {
font-family: 'Playfair Display', Georgia, serif !important;
color: #4A403A !important;
}
input, textarea, select {
font-family: 'Playfair Display', Georgia, serif !important;
color: #4A403A !important;
}
img.flower, img.flower-1, img.flower-2, img.tree,
img[alt="flower-cover"], img[alt="flower-1"], img[alt="flower-2"],
img[alt="tree"], img[alt="bg-header"],
.ornaments-wrapper, .orn-1, .orn-2, .orn-4,
.elements-wrapper-absolute .orn-1, .background-element {
display: none !important;
}
.scroll-icon, .mouse-icon, .scroll-down { display: none !important; }
img[src*="viding_loading.gif"] { display: none !important; }
nav.navbar, svg.logo-viding { display: none !important; }
.gallery-section a, .gallery-default a, .zoom-gallery-default a {
font-size: 0 !important; color: transparent !important;
}
.gallery-default img, .zoom-gallery-default img, .gallery-section a img {
border: 2px solid #D4AF37 !important;
border-radius: 4px !important;
box-shadow: 0 2px 8px rgba(74, 64, 58, 0.15) !important;
}
.couple-content img[src*='media'], .couple-wrapper img[src*='media'] {
border: 2px solid #D4AF37 !important;
border-radius: 4px !important;
box-shadow: 0 2px 8px rgba(74, 64, 58, 0.15) !important;
box-sizing: border-box !important;
padding: 10px !important;
background-color: #FDFBF7 !important;
}
.venue-section .row .col-md-6, .venue-section .row [class*="col-"] {
display: flex !important;
}
.venue-section .row .col-md-6 > .card, .venue-section .row [class*="col-"] > .card {
width: 100% !important;
height: auto !important;
}
.venue-section .card { padding: 18px !important; }
.venue-section .card .card-body {
width: 100% !important; height: auto !important;
min-height: 360px !important;
display: flex !important; flex-direction: column !important;
justify-content: center !important; align-items: center !important;
text-align: center !important;
}
.venue-section .card > h4 {
font-size: 40px !important;
line-height: 1.2 !important;
white-space: nowrap !important;
padding: 0 !important; margin: 0 0 12px 0 !important;
}
@media (max-width: 1199px) {
.venue-section .card > h4 { font-size: 34px !important; }
}
@media (max-width: 767px) {
.venue-section .card > h4 { font-size: 30px !important; white-space: normal !important; }
}
.venue-section .card .card-body .elements-wrapper-absolute { display: none !important; }
.venue-section .card .card-body .event-name {
padding: 0 !important; margin: 0 0 8px 0 !important; margin-top: 40px !important;
}
.venue-section .card .card-body .position-relative.has-animate {
display: flex !important; flex-wrap: wrap !important;
justify-content: center !important; align-items: baseline !important;
column-gap: 6px !important; row-gap: 4px !important;
width: 100% !important; padding: 0 !important;
}
.venue-section .card .card-body .date {
width: auto !important; flex: 0 0 auto !important;
margin: 0 2px !important; min-height: 0 !important;
}
.venue-section .card .card-body .date hr { display: none !important; }
.venue-section .card .card-body .date h5 {
font-size: 40px !important; line-height: 1 !important; margin: 0 !important;
}
.venue-section .card .card-body .position-relative.has-animate p { margin: 0 !important; }
.venue-section .card .card-body .position-relative.has-animate p:not(:last-of-type) {
font-size: 16px !important;
}
.venue-section .card .card-body .position-relative.has-animate p:last-of-type {
flex-basis: 100% !important; font-size: 18px !important;
font-weight: 600 !important; color: #4A403A !important;
letter-spacing: .02em !important;
}
.venue-section .card .card-body .event-place { margin-top: 8px !important; }
.venue-section .card .card-body .event-place .position-relative { margin: 0 !important; }
.venue-section .card .card-body .event-place .ribbon-venue {
padding-top: 0 !important; margin-bottom: 2px !important;
}
.venue-section .card .card-body .ribbon-venue svg {
width: 40px !important; height: 40px !important;
}
.venue-section .card .card-body .ribbon-venue .has-animate { height: 40px !important; }
.venue-section .card .card-body .event-place h4 {
font-size: 22px !important; line-height: 1.3 !important;
padding: 0 !important; margin: 2px 0 0 0 !important;
}
.main-app {
background-image: url('/assets/lgrf2e.png'), url('/assets/qsilwr.svg') !important;
background-size: 512px, cover !important;
background-position: center top, center top !important;
background-repeat: repeat, no-repeat !important;
background-attachment: fixed !important;
}
.main-app > div:not(.cover-section):not(.header-section),
.main-app > section:not(.cover-section):not(.header-section),
.content-section, .page-section, .section-wrapper,
.wrapper:not(.thank-wrapper):not(.cover-wrapper),
[class*="wrapper"]:not(.thank-wrapper):not(.cover-wrapper) {
background-color: transparent !important;
background-image: none !important;
}
:root {
--av-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
.couple-content {
background-color: rgba(253, 251, 247, 0.72) !important;
background-image: var(--av-noise) !important;
background-size: 180px 180px !important;
border-top: 1px solid rgba(255, 255, 255, 0.55) !important;
border-bottom: 1px solid rgba(74, 64, 58, 0.12) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
inset 0 -1px 0 rgba(74, 64, 58, 0.08),
inset 0 0 60px rgba(74, 64, 58, 0.06) !important;
}
.wishes-section {
background-color: rgba(253, 251, 247, 0.72) !important;
background-image: var(--av-noise) !important;
background-size: 180px 180px !important;
border-top: 1px solid rgba(255, 255, 255, 0.55) !important;
border-bottom: 1px solid rgba(74, 64, 58, 0.12) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
inset 0 -1px 0 rgba(74, 64, 58, 0.08),
inset 0 0 60px rgba(74, 64, 58, 0.06) !important;
}
.rsvp-section,
.apology-section,
.stream-section {
background-color: rgba(253, 251, 247, 0.72) !important;
background-image: var(--av-noise) !important;
background-size: 180px 180px !important;
border-top: 1px solid rgba(255, 255, 255, 0.55) !important;
border-bottom: 1px solid rgba(74, 64, 58, 0.12) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
inset 0 -1px 0 rgba(74, 64, 58, 0.08),
inset 0 0 60px rgba(74, 64, 58, 0.06) !important;
}
.venue-section .card,
.venue-section .card-body {
background-color: rgba(253, 251, 247, 0.72) !important;
background-image: var(--av-noise) !important;
background-size: 180px 180px !important;
}
.venue-section .card {
border: 1px solid #D4AF37 !important;
border-radius: 4px !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
inset 0 0 60px rgba(74, 64, 58, 0.06) !important;
}
.couple-section .title-section h2,
.venue-section .title-section h2,
.rsvp-section .title-section h2,
.wishes-section .title-section h2,
.apology-section .title-section h2,
.stream-section .title-section h2 {
background: none !important;
background-color: transparent !important;
color: var(--gold-deep) !important; 
}
.couple-section .title-section h2 p,
.couple-section .title-section h2 span,
.venue-section .title-section h2 p,
.venue-section .title-section h2 span,
.rsvp-section .title-section h2 p,
.rsvp-section .title-section h2 span,
.wishes-section .title-section h2 p,
.wishes-section .title-section h2 span,
.apology-section .title-section h2 p,
.apology-section .title-section h2 span,
.stream-section .title-section h2 p,
.stream-section .title-section h2 span {
color: var(--gold-deep) !important; 
background: none !important;
background-color: transparent !important;
}
.venue-section .title-section::after {
content: "We look forward to celebrating with you. Kindly confirm your attendance below.";
display: block;
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(16px, 1.8vw, 18px) !important;
color: #4A403A !important;
margin-top: 12px;
text-align: center;
line-height: 1.5;
padding: 0 20px;
}
.couple-content, .couple-content .title-section,
.wishes-section, .wishes-section .title-section,
.rsvp-section, .rsvp-section .title-section,
.apology-section, .apology-section .title-section,
.stream-section, .stream-section .title-section {
color: #4A403A !important;
}
.stream-section .stream-description {
background-color: rgba(253, 251, 247, 0.72) !important;
background-image: var(--av-noise) !important;
background-size: 180px 180px !important;
border: 1px solid rgba(212, 175, 55, 0.45) !important;
border-radius: 6px !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
inset 0 0 40px rgba(74, 64, 58, 0.05) !important;
}
.story-section .col-md-8, .story-section .col-xl-6,
.story-section .container {
background-color: rgba(253, 251, 247, 0.72) !important;
background-image: var(--av-noise) !important;
background-size: 180px 180px !important;
border-radius: 12px !important;
padding: 32px 40px !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
inset 0 0 60px rgba(74, 64, 58, 0.05) !important;
margin-bottom: 24px !important;
}
.story-section p {
position: relative !important;
z-index: 1 !important;
}
.story-section .story-background {
opacity: 0.25 !important;
z-index: 0 !important;
}
.story-section .image-element img.story-background {
opacity: 0 !important;
}
.story-section .image-element {
background: url('/assets/viding_gcif.jpg') center / cover no-repeat !important;
}
.stream-section input::placeholder,
.stream-section textarea::placeholder {
color: #8A7A6B !important;
}
.wishes-section .wishes-preview,
.wishes-section .wishes-preview .card,
.wishes-section .wishes-preview p,
.wishes-section .wishes-preview span,
.wishes-section .wishes-preview .card-text,
.wishes-section .wishes-preview .card-title {
color: #4A403A !important;
}
.wishes-section input::placeholder,
.wishes-section textarea::placeholder {
color: #8A7A6B !important;
opacity: 1 !important;
}
.rsvp-section input::placeholder,
.rsvp-section select::placeholder,
.rsvp-section textarea::placeholder {
color: #8A7A6B !important;
opacity: 1 !important;
}
.couple-section .and span {
color: #59642D !important;
text-shadow: 0 1px 2px rgba(253, 251, 247, 0.6) !important;
}
.venue-section .card .card-body .event-place h4 {
font-size: 21px !important;
font-weight: 800 !important;
letter-spacing: .04em !important;
color: var(--gold-deep) !important; 
text-transform: uppercase !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) !important;
display: block !important;
width: fit-content !important;
max-width: 100% !important;
margin: 0 auto !important;
text-align: center !important;
}
.venue-section .card .card-body .event-place .position-relative.has-animate .notranslate p {
font-size: 16px !important; 
font-weight: 400 !important;
line-height: 1.45 !important;
color: #4A403A !important; 
-webkit-text-fill-color: #4A403A !important;
display: block !important;
width: fit-content !important;
max-width: 88% !important;
margin: 6px auto 0 !important;
text-align: center !important;
text-transform: none !important;
letter-spacing: normal !important;
}
.venue-section .card .card-body .event-place p {
font-size: 16px !important; 
font-weight: 400 !important;
line-height: 1.45 !important;
color: #4A403A !important; 
-webkit-text-fill-color: #4A403A !important;
display: block !important;
width: fit-content !important;
max-width: 88% !important;
margin: 6px auto 0 !important;
text-align: center !important;
text-transform: none !important;
letter-spacing: normal !important;
}
.venue-section .card .card-body .event-place .position-relative.has-animate {
display: block !important;
width: 100% !important;
text-align: center !important;
}
.venue-section .card .card-body .event-place .position-relative.has-animate .notranslate {
display: block !important;
width: 100% !important;
}
.venue-section .card .card-body .event-place .btn-custom,
.venue-section .card .card-body .btn-custom {
font-size: 0 !important;
padding: 10px 22px !important;
}
.venue-section .card .card-body .event-place .btn-custom::after,
.venue-section .card .card-body .btn-custom::after {
content: "📍 Open Maps" !important;
font-size: 16px !important; 
font-weight: 600 !important;
letter-spacing: .02em !important;
}
.cover-section .btn, .header-section .btn,
.venue-section .btn, .rsvp-section .btn, .wishes-section .btn,
.stream-section .btn, .thank-section .btn,
.btn, .btn-custom, .btn-reminder, .btn-primary, .btn-secondary,
button.btn, a.btn {
font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Arial, 'Apple Color Emoji', 'Segoe UI Emoji',
'Noto Color Emoji', sans-serif !important;
letter-spacing: .04em !important;
font-weight: 600 !important;
}
.venue-section .card .card-body .btn-custom::after,
.venue-section .card .card-body .event-place .btn-custom::after {
font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Arial, 'Apple Color Emoji', 'Segoe UI Emoji',
'Noto Color Emoji', sans-serif !important;
font-weight: 600 !important;
}
.modal.show-maps .btn-custom.color__button__trans.mt-3,
.modal.show-maps .btn-custom.color-secondary.mt-3 {
background-color: var(--color-secondary) !important;
border-color: var(--color-secondary) !important;
color: #FDFBF7 !important;
font-size: 0 !important;
padding: 10px 22px !important;
width: auto !important;
}
.modal.show-maps .btn-custom.color__button__trans.mt-3::after,
.modal.show-maps .btn-custom.color-secondary.mt-3::after {
content: "📍 Open In Google Maps" !important;
font-size: 16px !important;
font-weight: 600 !important;
letter-spacing: .02em !important;
font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Arial, 'Apple Color Emoji', 'Segoe UI Emoji',
'Noto Color Emoji', sans-serif !important;
}
.modal.show-maps .btn-modal {
color: #C86D63 !important;
background: transparent !important;
border-color: transparent !important;
}
.footer .footer-text {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
color: #EFE0B0 !important;
font-style: italic !important;
}
.cover-section input, .cover-section textarea, .cover-section select,
.header-section input, .header-section textarea, .header-section select,
.venue-section input, .venue-section textarea, .venue-section select,
.rsvp-section input, .rsvp-section textarea, .rsvp-section select,
.wishes-section input, .wishes-section textarea, .wishes-section select,
.stream-section input, .stream-section textarea, .stream-section select,
.thank-section input, .thank-section textarea, .thank-section select,
input, textarea, select, .form-control, .form-select {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif !important;
}
.rsvp-section input, .rsvp-section textarea, .rsvp-section select,
.rsvp-section .form-control, .rsvp-section .form-select,
.wishes-section input, .wishes-section textarea, .wishes-section select,
.wishes-section .form-control, .wishes-section .form-select,
.wishes-form-wrapper input, .wishes-form-wrapper textarea {
background: rgba(245, 238, 220, 0.82) !important;
border: 1px solid rgba(212, 175, 55, 0.35) !important;
border-radius: 8px !important;
box-shadow: none !important;
color: #4A403A !important;
padding: 10px 14px !important;
transition: border-color 0.2s ease, background 0.2s ease !important;
}
.rsvp-section input:focus, .rsvp-section textarea:focus, .rsvp-section select:focus,
.rsvp-section .form-control:focus, .rsvp-section .form-select:focus,
.wishes-section input:focus, .wishes-section textarea:focus, .wishes-section select:focus,
.wishes-section .form-control:focus, .wishes-section .form-select:focus,
.wishes-form-wrapper input:focus, .wishes-form-wrapper textarea:focus {
background: rgba(245, 238, 220, 0.92) !important;
border-color: rgba(138, 109, 31, 0.6) !important;
box-shadow: 0 0 0 3px rgba(138, 109, 31, 0.1) !important;
outline: none !important;
}
.rsvp-section input.form-control::placeholder,
.rsvp-section input.form-control::-webkit-input-placeholder,
.rsvp-section input.form-control::-moz-placeholder,
.rsvp-section select.form-control::placeholder,
.rsvp-section select.form-control::-webkit-input-placeholder,
.rsvp-section select.form-control::-moz-placeholder,
.wishes-section input.form-control::placeholder,
.wishes-section input.form-control::-webkit-input-placeholder,
.wishes-section input.form-control::-moz-placeholder,
.wishes-section select.form-control::placeholder,
.wishes-section select.form-control::-webkit-input-placeholder,
.wishes-section select.form-control::-moz-placeholder,
.wishes-form-wrapper input.form-control::placeholder,
.wishes-form-wrapper input.form-control::-webkit-input-placeholder,
.wishes-form-wrapper input.form-control::-moz-placeholder,
.wishes-form-wrapper select.form-control::placeholder,
.wishes-form-wrapper select.form-control::-webkit-input-placeholder,
.wishes-form-wrapper select.form-control::-moz-placeholder {
padding-left: 0 !important;
text-indent: 0 !important;
margin-left: 0 !important;
color: #A8A098 !important;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
.rsvp-section input.form-control::-webkit-input-placeholder,
.rsvp-section input.form-control::-moz-placeholder,
.wishes-section input.form-control::-webkit-input-placeholder,
.wishes-section input.form-control::-moz-placeholder,
.wishes-form-wrapper input.form-control::-webkit-input-placeholder,
.wishes-form-wrapper input.form-control::-moz-placeholder {
text-indent: 0 !important;
padding-left: 0 !important;
}
.rsvp-section input, .rsvp-section textarea,
.rsvp-section select.form-control, .rsvp-section select.form-select,
.wishes-section input, .wishes-section textarea,
.wishes-section select.form-control, .wishes-section select.form-select,
.wishes-form-wrapper input, .wishes-form-wrapper textarea,
.wishes-form-wrapper select.form-control, .wishes-form-wrapper select.form-select {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
.rsvp-section select.form-control, .rsvp-section select.form-select,
.wishes-section select.form-control, .wishes-section select.form-select,
.wishes-form-wrapper select.form-control, .wishes-form-wrapper select.form-select {
box-sizing: border-box !important;
margin-left: 0 !important;
text-indent: 0 !important;
padding-left: 14px !important;
text-align: left !important;
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
}
.rsvp-section input.form-control, .rsvp-section input.form-select,
.wishes-section input, .wishes-section textarea,
.wishes-form-wrapper input, .wishes-form-wrapper textarea {
box-sizing: border-box !important;
margin-left: 0 !important;
text-indent: 0 !important;
padding-left: 14px !important;
text-align: left !important;
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
}
@media (max-width: 767px) {
.btn-custom, .btn-reminder, .rsvp-section .btn,
.wishes-form-wrapper .btn, .venue-section .btn,
button[type=submit], .btn-primary {
min-height: 48px !important;
min-width: 48px !important;
}
}
.cover-section .btn, .header-section .btn,
.venue-section .btn, .rsvp-section .btn, .wishes-section .btn,
.stream-section .btn, .thank-section .btn,
.btn, .btn-custom, .btn-reminder, .btn-primary, .btn-secondary,
button.btn, a.btn {
border: 1px solid #48522A !important;
border-radius: 50px !important;
box-shadow:
0 2px 4px rgba(74, 64, 58, 0.12),
0 6px 16px rgba(89, 100, 45, 0.28) !important;
padding: 12px 32px !important;
cursor: pointer !important;
transition: transform .2s ease, box-shadow .2s ease,
filter .2s ease, background .2s ease !important;
-webkit-tap-highlight-color: rgba(89, 100, 45, 0.2) !important;
}
.cover-section .btn:hover, .header-section .btn:hover,
.venue-section .btn:hover, .rsvp-section .btn:hover, .wishes-section .btn:hover,
.stream-section .btn:hover, .thank-section .btn:hover,
.btn:hover, .btn-custom:hover, .btn-reminder:hover,
button.btn:hover, a.btn:hover {
transform: translateY(-2px) !important;
filter: brightness(1.06) !important;
box-shadow:
0 4px 8px rgba(74, 64, 58, 0.15),
0 10px 24px rgba(89, 100, 45, 0.38) !important;
}
.cover-section .btn:active, .header-section .btn:active,
.venue-section .btn:active, .rsvp-section .btn:active, .wishes-section .btn:active,
.stream-section .btn:active, .thank-section .btn:active,
.btn:active, .btn-custom:active, .btn-reminder:active,
button.btn:active, a.btn:active {
transform: translateY(0) scale(0.97) !important;
filter: brightness(0.97) !important;
box-shadow:
0 1px 2px rgba(74, 64, 58, 0.15),
0 3px 8px rgba(89, 100, 45, 0.2) !important;
}
.cover-section .btn:focus-visible, .header-section .btn:focus-visible,
.venue-section .btn:focus-visible, .rsvp-section .btn:focus-visible,
.wishes-section .btn:focus-visible, .stream-section .btn:focus-visible,
.thank-section .btn:focus-visible,
.btn:focus-visible, .btn-custom:focus-visible, .btn-reminder:focus-visible,
button.btn:focus-visible, a.btn:focus-visible {
outline: 2px solid #59642D !important;
outline-offset: 2px !important;
}
@media (min-width: 768px) and (max-width: 1199px) {
.main-app {
background-image: url('/assets/lgrf2e.png'), url('/assets/9s5aog.svg') !important;
background-size: 512px, cover !important;
}
}
@media (min-width: 1200px) {
.main-app {
background-image: url('/assets/lgrf2e.png'), url('/assets/7or44x.svg') !important;
background-size: 512px, cover !important;
}
}
.thank-wrapper, .thank, .thank-body { background-image: none !important; }
.thank-section { position: relative !important; }
.thank-wrapper::before {
content: ''; position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(to bottom, rgba(74, 64, 58, 0.55), rgba(74, 64, 58, 0.75)) !important;
z-index: 1 !important; pointer-events: none !important;
}
.thank-wrapper {
background-image: url('/assets/m7o36o.jpg') !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
min-height: 680px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
.thank-wrapper .row { width: 100% !important; margin: 0 !important; }
.thank-wrapper .image-wrapper,
.thank-wrapper .image-wrapper .image-element,
img.thank-background { display: none !important; }
.thank-wrapper .thank {
background: transparent !important; box-shadow: none !important;
padding: 32px !important; text-align: center !important;
position: relative !important; z-index: 2 !important;
width: 100% !important; max-width: 720px !important;
margin: 0 auto !important; height: auto !important; overflow: visible !important;
}
.thank-wrapper .thank h2, .thank-wrapper .thank p,
.thank-wrapper .thank-body h2, .thank-wrapper .thank-body p,
.thank-wrapper .title-section h2, .thank-wrapper .title-section {
color: #FDFBF7 !important;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55) !important;
text-align: center !important;
animation: none !important; transition: none !important;
opacity: 1 !important; transform: none !important; visibility: visible !important;
}
@keyframes av-shimmer {
0%   { transform: translateX(-120%) skewX(-16deg); opacity: 0; }
30%  { opacity: .45; }
60%  { transform: translateX(240%) skewX(-16deg); opacity: 0; }
100% { transform: translateX(240%) skewX(-16deg); opacity: 0; }
}
.cover-section, .header-section { position: relative; overflow: hidden; }
.cover-section::before, .header-section::before {
content: '';
position: absolute;
left: 0; bottom: 0;
width: clamp(150px, 33vw, 430px);
aspect-ratio: 1041 / 1920;
background: url('/assets/shbwul.webp') no-repeat left bottom / contain,
url('/assets/2d3ywu.png') no-repeat left bottom / contain;
transform-origin: 10% 96%;
animation: av-sway 12s ease-in-out infinite alternate;
will-change: transform;
pointer-events: none;
z-index: 0;
}
.cover-section::after, .header-section::after {
content: '';
position: absolute;
top: 0; bottom: 0; left: 0;
width: 45%;
background: linear-gradient(105deg, transparent, rgba(212,175,55,.28), transparent);
animation: av-shimmer 18s ease-in-out infinite;
will-change: transform, opacity;
pointer-events: none;
z-index: 0;
}
.cover-section > *, .header-section > * { position: relative; z-index: 1; }
.header-section .btn-reminder { margin-bottom: 0 !important; }
.header-section { padding-bottom: 28px !important; }
@media (max-width: 767px) {
.header-section { padding-bottom: 20px !important; }
}
.header-section {
height: auto !important;      
min-height: 100vh !important;  
min-height: 100svh !important; 
max-height: none !important;
overflow: hidden !important;   
}
.header-section .header-content,
.header-section .header,
.header-section .header-title,
.header-section .header-title-content {
height: auto !important;
min-height: 0 !important;
}
.header-section .header { padding-top: clamp(50px, 8vh, 72px) !important; }
.header-section .header-title-content {
min-height: clamp(340px, 48vh, 640px) !important;
padding-top: clamp(170px, 24vh, 230px) !important;
padding-bottom: clamp(40px, 9vh, 120px) !important;
}
.header-section .header-title-content h1.title,
.header-section .header-title-content .title {
font-size: clamp(34px, 6.5vw, 56px) !important;
line-height: 1.15 !important;
margin-bottom: clamp(6px, 1.5vh, 16px) !important;
}
.header-section .header-title-content p {
font-size: clamp(16px, 2.2vw, 18px) !important; 
line-height: 1.4 !important;
margin-bottom: clamp(6px, 1.5vh, 16px) !important;
}
.header-section .countdown {
margin-top: clamp(4px, 1vh, 12px) !important;
margin-bottom: clamp(4px, 1vh, 12px) !important;
}
.header-section .reminder-wrap {
position: relative;
background: rgba(74, 64, 58, 0.5) !important;
border-radius: 16px;
margin-top: clamp(8px, 2vh, 24px) !important;
margin-inline: clamp(4px, 1vw, 12px) !important;
padding: clamp(12px, 2vh, 24px) clamp(8px, 2vw, 20px) !important;
}
.header-section .countdown .days,
.header-section .countdown .hours,
.header-section .countdown .minutes,
.header-section .countdown .seconds {
min-width: 0 !important;
flex: 1 1 0 !important;
}
.header-section .countdown .angka { font-size: clamp(24px, 4.5vw, 38px) !important; }
.header-section .countdown .huruf { font-size: clamp(16px, 1.8vw, 18px) !important; } 
.header-section .btn-reminder {
margin-top: clamp(4px, 1vh, 12px) !important;
padding: clamp(8px, 1.5vh, 12px) clamp(20px, 4vw, 32px) !important;
}
.header-section .btn-reminder { font-size: 0 !important; }
.header-section .btn-reminder::after {
content: "Save to Google Calendar" !important;
font-size: clamp(16px, 2vw, 18px) !important; 
font-weight: 600 !important;
font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Arial, 'Apple Color Emoji', 'Segoe UI Emoji',
'Noto Color Emoji', sans-serif !important;
letter-spacing: .02em !important;
line-height: 1.2 !important;
}
#musicControl.btn-control {
background: #59642D !important;
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
max-width: 44px !important;
max-height: 44px !important;
padding: 0 !important;
border-radius: 50% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
}
#musicControl .icofont, #musicControl i, #musicControl svg {
margin: 0 !important;
font-size: 18px !important;
line-height: 1 !important;
}
.header-section .reminder-wrap { padding-top: clamp(40px, 8vh, 96px) !important; }
.header-section .countdown { margin-top: clamp(4px, 1vh, 12px) !important; margin-bottom: clamp(4px, 1vh, 12px) !important; }
.header-section .btn-reminder { margin-top: clamp(4px, 1vh, 12px) !important; }
.header-section .reminder-content { padding-bottom: clamp(16px, 3.5vh, 40px) !important; }
@media (min-width: 768px) and (max-height: 760px) {
.header-section .reminder-wrap { padding-top: clamp(4px, 1vh, 16px) !important; }
.header-section .countdown {
margin-top: clamp(2px, .5vh, 6px) !important;
margin-bottom: clamp(2px, .5vh, 6px) !important;
}
.header-section .btn-reminder { margin-top: clamp(2px, .5vh, 6px) !important; }
.header-section { padding-bottom: 20px !important; }
}
@media (max-height: 560px) {
.header-section {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
.header-section .header-title-content {
min-height: 0 !important;
padding-top: clamp(150px, 24vh, 190px) !important;
padding-bottom: clamp(20px, 4vh, 40px) !important;
}
.header-section .header-title-content h1.title,
.header-section .header-title-content .title { font-size: clamp(22px, min(7vw, 6vh), 34px) !important; }
.header-section .countdown .angka { font-size: clamp(18px, min(4.5vw, 4vh), 28px) !important; }
.header-section .countdown .huruf { font-size: clamp(16px, min(1.8vw, 1.8vh), 18px) !important; } 
}
@media (min-width: 768px) and (max-width: 1199px) {
.header-section .header-title-content h1.title,
.header-section .header-title-content .title { font-size: clamp(30px, 5vw, 48px) !important; }
}
@media (max-width: 767px) {
.header-section .header-title-content h1.title,
.header-section .header-title-content .title { font-size: clamp(30px, 10vw, 42px) !important; } 
.header-section .header-title-content .title br { display: none !important; }
.header-section .header { padding-top: clamp(40px, 6vh, 64px) !important; }
.header-section .reminder-wrap { padding-top: clamp(16px, 4vh, 48px) !important; }
.header-section .countdown {
margin-top: clamp(2px, .5vh, 8px) !important;
margin-bottom: clamp(2px, .5vh, 8px) !important;
}
.header-section .btn-reminder { margin-top: clamp(2px, .5vh, 8px) !important; }
.header-section { padding-bottom: clamp(12px, 2.5vh, 24px) !important; }
}
.couple-section .row > [class*="col-"],
.couple .image-wrap { min-width: 0 !important; }
.couple .image-wrap { max-width: 100% !important; }
.couple .image-wrap img { max-width: 100% !important; height: auto !important; }
@media (max-width: 767px) {
.couple-content { padding-left: 20px !important; padding-right: 20px !important; }
.couple-section .row { margin-left: 0 !important; margin-right: 0 !important; }
.couple-section .row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
.couple .image-wrap { width: 100% !important; max-width: 340px !important; margin: 0 auto !important; }
.couple .image-wrap img { width: 100% !important; height: auto !important; }
}
.couple-content .image-element,
.couple-wrapper .image-element { overflow: hidden !important; }
.image-wrap.has-animate {
animation: av-couple-in 1.2s ease-out both !important;
}
@keyframes av-couple-in {
from { opacity: 0; transform: translateY(24px); }
to   { opacity: 1; transform: translateY(0); }
}
.image-wrapper.has-animate {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
@keyframes av-sway {
from { transform: rotate(-1.6deg); }
to   { transform: rotate(1.6deg); }
}
@keyframes av-sway2 {
from { transform: rotate(-3.2deg); }
to   { transform: rotate(3.2deg); }
}
.couple-section { position: relative; overflow: hidden; }
.couple-section::before {
content: '';
position: absolute;
right: 0; bottom: 0;
width: clamp(200px, 34vw, 460px);
aspect-ratio: 1041 / 1920;
background: url('/assets/2d3ywu.png') no-repeat right bottom / contain;
transform-origin: 90% 96%;
animation: av-sway2 10s ease-in-out infinite alternate;
opacity: .8;
filter: drop-shadow(0 2px 8px rgba(74, 64, 58, 0.18));
pointer-events: none;
z-index: 0;
}
.couple-section::after {
content: '';
position: absolute;
left: 0; top: 0;
width: clamp(110px, 18vw, 240px);
aspect-ratio: 184 / 340;
background: url('/assets/ou7zkp.png') no-repeat left top / contain;
transform-origin: 10% 4%;
animation: av-sway 14s ease-in-out infinite alternate;
opacity: .75;
filter: drop-shadow(0 2px 6px rgba(74, 86, 48, 0.25));
pointer-events: none;
z-index: 0;
}
.couple-section > * { position: relative; z-index: 1; }
.venue-section { position: relative; overflow: hidden; }
.venue-section::before {
content: '';
position: absolute;
left: 0; bottom: 0;
width: clamp(160px, 28vw, 380px);
aspect-ratio: 184 / 340;
background: url('/assets/ou7zkp.png') no-repeat left bottom / contain;
transform-origin: 10% 96%;
animation: av-sway2 10s ease-in-out infinite alternate;
opacity: .9;
filter: drop-shadow(0 2px 6px rgba(74, 86, 48, 0.3));
pointer-events: none;
z-index: 0;
}
.venue-section::after {
content: '';
position: absolute;
right: 0; top: 0;
width: clamp(80px, 14vw, 180px);
aspect-ratio: 1041 / 1920;
background: url('/assets/2d3ywu.png') no-repeat right top / contain;
transform-origin: 90% 4%;
animation: av-sway 16s ease-in-out infinite alternate;
opacity: .55;
pointer-events: none;
z-index: 0;
}
.venue-section > * { position: relative; z-index: 1; }
.thank-section::after {
content: '';
position: absolute;
right: 0; bottom: 0;
width: clamp(160px, 26vw, 340px);
aspect-ratio: 1041 / 1920;
background: url('/assets/2d3ywu.png') no-repeat right bottom / contain;
transform-origin: 90% 96%;
animation: av-sway 16s ease-in-out infinite alternate;
opacity: .6;
pointer-events: none;
z-index: 0;
}
.thank-section > * { position: relative; z-index: 2; }
@media (max-width: 480px) {
.couple-section::before { width: clamp(130px, 30vw, 200px); }
.venue-section::before { width: clamp(110px, 26vw, 170px); }
.couple-section::after, .venue-section::after { display: none; }
.thank-section::after { display: none; }
}
.cover-section {
box-shadow:
inset 0 0 120px 30px rgba(0, 0, 0, 0.50),
inset 0 0 0 2px rgba(201, 166, 95, 0.70),
inset 0 0 0 8px rgba(107, 93, 66, 0.5),
inset 0 0 0 10px rgba(201, 166, 95, 0.45),
inset 0 0 0 9999px rgba(0, 0, 0, 0.28) !important;
}
.cover-section::before {
filter: brightness(0.72) !important;
}
.cover-section.cover-opened {
transform: none !important;
box-shadow: none !important;
opacity: 0 !important;
pointer-events: none !important;
transition:
box-shadow 0.6s ease-out,
opacity 0.4s ease-out 0.6s !important;
}
.cover-section.cover-opened::before {
filter: brightness(1) !important;
transition: filter 0.6s ease-out !important;
}
@keyframes av-cover-exit {
0%   { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-40px); }
}
.cover-section.cover-opened .cover-body,
.cover-section.cover-opened #btn-envelope {
animation: av-cover-exit 0.6s ease-in forwards !important;
}
.header-section {
box-shadow:
inset 0 90px 60px -50px rgba(255, 240, 210, 0.16) !important;
}
@keyframes av-header-reveal {
0% { opacity: 0; transform: translateY(28px); }
100% { opacity: 1; transform: translateY(0); }
}
.header-section .header-title-content,
.header-section .countdown,
.header-section .reminder-wrap {
animation: av-header-reveal 0.7s ease-out forwards;
animation-delay: 1.0s;
opacity: 0;
}
.header-section .countdown {
animation-delay: 1.15s;
}
.header-section .reminder-wrap {
animation-delay: 1.3s;
}
@media (prefers-reduced-motion: reduce) {
.cover-section { box-shadow: none !important; }
.cover-section::before { filter: none !important; }
.cover-section.cover-opened {
box-shadow: none !important; opacity: 0 !important; transform: none !important;
transition: none !important;
}
.cover-section.cover-opened::before {
filter: none !important; transition: none !important;
}
.cover-section.cover-opened .cover-body,
.cover-section.cover-opened #btn-envelope {
opacity: 0 !important; animation: none !important;
}
.header-section { box-shadow: none !important; }
.header-content::after {
animation: none !important; opacity: 1 !important; filter: none !important;
}
.image-wrap.has-animate {
animation: none !important; opacity: 1 !important; transform: none !important;
}
.header-section .header-title-content,
.header-section .countdown,
.header-section .reminder-wrap {
animation: none !important; opacity: 1 !important; transform: none !important;
}
}
@keyframes av-wash-sweep {
0%   { background-position: 50% 100%; }
50%  { background-position: 50% 0%; }
100% { background-position: 50% 100%; }
}
.main-app::before {
content: '';
position: fixed;
inset: 0;
background: linear-gradient(to bottom,
transparent 0%,
rgba(212, 175, 55, 0) 30%,
rgba(212, 175, 55, 0.30) 48%,
rgba(212, 175, 55, 0.30) 52%,
rgba(212, 175, 55, 0) 70%,
transparent 100%);
background-size: 100% 200%;
background-position: 50% 100%;
animation: av-wash-sweep 7s ease-in-out infinite;
opacity: .4;
pointer-events: none;
z-index: 0;
}
.animate-loop, .image-element.animate-loop { animation: none !important; }
@media (min-width: 1200px) {
.couple-section [class*="col-xl-6"],
.venue-section [class*="col-xl-6"],
.rsvp-section [class*="col-xl-6"] {
flex: 0 0 66.6667% !important;
max-width: 66.6667% !important;
}
.couple-section [class*="col-xl-5"],
.venue-section [class*="col-xl-5"] {
flex: 0 0 50% !important;
max-width: 50% !important;
}
.couple-section [class*="col-xl-4"] {
flex: 0 0 50% !important;
max-width: 50% !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.couple-section [class*="col-lg-8"],
.venue-section [class*="col-lg-8"],
.rsvp-section [class*="col-lg-8"] {
flex: 0 0 75% !important;
max-width: 75% !important;
}
.couple-section [class*="col-lg-6"],
.venue-section [class*="col-lg-6"] {
flex: 0 0 58.333% !important;
max-width: 58.333% !important;
}
.couple-section [class*="col-lg-5"],
.venue-section [class*="col-lg-5"] {
flex: 0 0 50% !important;
max-width: 50% !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.couple-section [class*="col-md-10"],
.venue-section [class*="col-md-10"],
.rsvp-section [class*="col-md-10"] {
flex: 0 0 83.333% !important;
max-width: 83.333% !important;
}
.couple-section [class*="col-md-8"],
.venue-section [class*="col-md-8"],
.rsvp-section [class*="col-md-8"] {
flex: 0 0 75% !important;
max-width: 75% !important;
}
}
@media (prefers-reduced-motion: reduce) {
.main-app::before { display: none; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
.rsvp-section .multiple-event-wrapper .btn-event-check-input,
.rsvp-section input.btn-event-check-input {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
opacity: 0 !important;
clip: rect(0, 0, 0, 0) !important;
clip-path: inset(50%) !important;
overflow: hidden !important;
pointer-events: none !important;
white-space: nowrap !important;
appearance: none !important;
}
.rsvp-section .multiple-event-wrapper label.btn-event-check-label,
.rsvp-section .multiple-event-wrapper button.btn-event-check-label-all,
.rsvp-section .multiple-event-wrapper label.btn-event-check-label-all {
background: transparent !important;
border: 2px solid rgba(89, 100, 45, 0.5) !important;
box-shadow: none !important;
color: #4A403A !important;
font-weight: 600 !important;
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
font-size: max(14px, min(15px, 1.2vw)) !important;
padding: max(9px, min(12px, 0.9vw)) max(20px, min(32px, 2.4vw)) !important;
line-height: 1.3 !important;
white-space: nowrap !important;
}
.rsvp-section .multiple-event-wrapper label.btn-event-check-label.active,
.rsvp-section .multiple-event-wrapper button.btn-event-check-label-all.active,
.rsvp-section .multiple-event-wrapper label.btn-event-check-label-all.active {
background: #59642D !important;
border-color: #48522A !important;
box-shadow: 0 2px 6px rgba(74, 64, 58, 0.14) !important;
color: #FDFBF7 !important;
font-weight: 600 !important;
}
@media (hover: hover) {
.rsvp-section .multiple-event-wrapper label.btn-event-check-label:not(.active):hover,
.rsvp-section .multiple-event-wrapper button.btn-event-check-label-all:not(.active):hover,
.rsvp-section .multiple-event-wrapper label.btn-event-check-label-all:not(.active):hover {
border-color: rgba(89, 100, 45, 0.85) !important;
background: rgba(89, 100, 45, 0.1) !important;
}
}
.rsvp-section select.form-control, .rsvp-section select.form-select,
.wishes-section select.form-control, .wishes-section select.form-select {
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%238A6D1F' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
background-size: 14px 9px !important;
padding-right: 38px !important;
cursor: pointer !important;
}
.rsvp-section select.form-control:invalid, .rsvp-section select.form-select:invalid,
.wishes-section select.form-control:invalid, .wishes-section select.form-select:invalid {
color: #8A7A6B !important;
}
.rsvp-section select.form-control:valid, .rsvp-section select.form-select:valid,
.wishes-section select.form-control:valid, .wishes-section select.form-select:valid {
color: #4A403A !important;
}
.rsvp-section .multiple-event-wrapper p.mb-1 {
color: #4A403A !important;
}
.sosmed-wrap a.sosmed, .sosmed-wrap .sosmed i {
color: #FDFBF7 !important;
}
.cover-section .btn, .header-section .btn,
.venue-section .btn, .rsvp-section .btn, .wishes-section .btn,
.stream-section .btn, .thank-section .btn,
.btn, .btn-custom, .btn-reminder, .btn-primary, .btn-secondary,
button.btn, a.btn {
border: 1px solid #48522A !important;
color: #FDFBF7 !important;
box-shadow: 0 2px 6px rgba(74, 64, 58, 0.14) !important;
}
.cover-section .btn:hover, .header-section .btn:hover,
.venue-section .btn:hover, .rsvp-section .btn:hover, .wishes-section .btn:hover,
.stream-section .btn:hover, .thank-section .btn:hover,
.btn:hover, .btn-custom:hover, .btn-reminder:hover,
button.btn:hover, a.btn:hover {
background: #4E5A28 !important; 
box-shadow: 0 4px 10px rgba(74, 64, 58, 0.18) !important;
}
.gallery-default img, .zoom-gallery-default img, .gallery-section a img {
border: none !important;
border-radius: 8px !important;
box-shadow: 0 4px 18px rgba(74, 64, 58, 0.12) !important;
}
.couple-content img[src*='media'], .couple-wrapper img[src*='media'],
.couple-content img.couple-image, .couple-wrapper img.couple-image {
border: none !important;
border-radius: 16px !important; 
padding: 0 !important;
background-color: transparent !important;
box-shadow: 0 14px 34px rgba(74, 64, 58, 0.18) !important; 
}
.couple-section .couple-content, .couple-section .couple-wrapper {
background-color: rgba(253, 251, 247, 0.82) !important;
}
.venue-section .card {
border: none !important;
border-radius: 14px !important;
box-shadow: 0 10px 30px rgba(74, 64, 58, 0.10) !important;
}
.venue-section .card .card-body .date h5,
.venue-section .card .card-body .position-relative.has-animate p:not(:last-of-type),
.venue-section .card .card-body .event-place h4,
.venue-section .card .card-body .event-place p,
.venue-section .card .card-body .event-address,
.wishes-section form small, .wishes-section form .text-muted,
.rsvp-section label, .rsvp-section .multiple-event-wrapper p.mb-1 {
font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Arial, sans-serif !important;
color: #4A403A !important;
}
.cover-section .countdown .angka, .header-section .countdown .angka,
.cover-section .countdown .huruf, .header-section .countdown .huruf {
font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Arial, sans-serif !important;
color: #FDFBF7 !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
}
.venue-section .card .card-body .event-place h4 {
font-size: 18px !important;
font-weight: 600 !important;
text-transform: none !important;
letter-spacing: .03em !important;
}
.cover-section .countdown .angka, .header-section .countdown .angka {
font-weight: 600 !important;
}
.wishes-section form small, .wishes-section form .text-muted {
color: rgba(74, 64, 58, 0.62) !important;
}
.main-app {
background-image:
linear-gradient(rgba(253, 251, 247, 0.55), rgba(253, 251, 247, 0.55)),
url('/assets/lgrf2e.png'),
url('/assets/qsilwr.svg') !important;
}
:root {
--av-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");
}
.loader-wrapper span{
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
color: #EFE0B0 !important;
font-style: italic !important;
}
.egift-section .angpao .form-control{
background-color: rgba(253, 251, 247, 0.82) !important;
border: 1px solid rgba(212, 175, 55, 0.35) !important;
color: #4A403A !important;
}
.egift-section .angpao .input-group-text{
background-color: #FDFBF7 !important;
color: #4A403A !important;
border: 1px solid rgba(212, 175, 55, 0.35) !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
.egift-section .angpao .form-check-label{
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
color: #4A403A !important;
}
.egift-section .angpao .form-check-input{
accent-color: #59642D !important;
}
.header-section a.btn-reminder { display: none !important; }
.greeting-text{ color:#D4C086 !important; font-family:'Playfair Display',Georgia,serif !important; font-size:20px !important; }
.greeting-name-text{ color:#D4C086 !important; font-family:'Playfair Display',Georgia,serif !important; font-size:36px !important; }
.greeting-name-text { line-height: 1.15 !important; text-wrap: balance !important; }
@media (max-height:700px) and (max-width:779px) {
.greeting-name-text { font-size: 24px !important; }
.greeting-text { font-size: 15px !important; }
}
@media (max-height:575px) and (max-width:379px) {
.greeting-name-text { font-size: 19px !important; line-height: 1.08 !important; }
}
.wishes-section form button[type=submit],.wishes-form-wrapper form button[type=submit]{font-size:0!important}.wishes-section form button[type=submit]::after,.wishes-form-wrapper form button[type=submit]::after{content:"Send Wish \1F49B"!important;font-size:16px!important;font-weight:600!important;font-family:'Montserrat','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important}.rsvp-section form button[type=submit],#tombolsimpan{font-size:0!important}.rsvp-section form button[type=submit]::after,#tombolsimpan::after{content:"Confirm Attendance \2713"!important;font-size:16px!important;font-weight:600!important;font-family:'Montserrat','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important}
.rsvp-section #cardRSVP p.mb-5{font-size:0 !important;line-height:0 !important;margin:0 !important;}
.rsvp-section #cardRSVP p.mb-5::after{content:"Your RSVP has been saved. Thank you for confirming your attendance.\AIf you are attending, you can save the dates to your Google Calendar using the buttons below.\A\ARSVP Anda sudah tersimpan. Terima kasih atas konfirmasi kehadirannya.\AJika Anda hadir, silakan simpan tanggal acaranya ke Google Calendar lewat tombol di bawah.";display:block;font-size:16px !important;line-height:1.5 !important;font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif !important;color:#4A403A !important;font-weight:500 !important;letter-spacing:normal !important;text-transform:none !important;font-size:14px;line-height:1.45;white-space:pre-line;}
.rsvp-section .title-section p, .rsvp-section .title-section p em, .rsvp-section .title-section p strong{text-transform:none !important;letter-spacing:normal !important;}
.wishes-section .title-section p, .wishes-section .title-section p em, .wishes-section .title-section p strong{text-transform:none !important;letter-spacing:normal !important;}
.rsvp-form a[href*=calendar]{display:none!important}
.rsvp-form:has(#cardRSVP .mb-5){display:flex;flex-direction:column}.rsvp-form:has(#cardRSVP .mb-5) .title-section h2{display:contents}.rsvp-form:has(#cardRSVP .mb-5) .title-section h2 p:has(a[href*=calendar]){order:9;margin-top:12px}

.rsvp-form:has(#cardRSVP .mb-5) .title-section{display:contents!important}
.rsvp-form:has(#cardRSVP .mb-5) a[href*=calendar]{display:block!important;margin:12px auto 0;width:fit-content;max-width:100%}
        