:root {
  --mc-green: #1f5f3b;
  --mc-green-dark: #123f28;
  --mc-olive: #5f6f3a;
  --mc-olive-dark: #46552a;
  --fj-ink: #123f28 !important;
  --fj-rose-dark: #1f5f3b !important;
  --fj-rose: #2f7a4f !important;
  --fj-rose-soft: #eaf3ed !important;
  --wine: #1f5f3b !important;
  --primary: #1f5f3b !important;
  --gold: #1f5f3b !important;
  --ink: #123f28 !important;
}

body {
  background-color: #fff !important;
  color: var(--mc-green-dark) !important;
}

html,
.invitation,
.couple-gallery,
.countdown,
.details,
.location,
.rsvp,
.verse-section {
  background-color: #fff !important;
}

.couple-gallery,
.location,
.rsvp,
.verse-section {
  background: #fff !important;
}

.location::before,
.location::after,
.rsvp::before,
.rsvp::after,
.countdown::before,
.countdown::after,
.verse-section::before,
.verse-section::after {
  display: none !important;
  background: none !important;
  background-image: none !important;
}

.details {
  background-color: #fff !important;
  background-image: url("./fg2.png") !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.countdown {
  background-color: #fff !important;
  background-image: url("./fundo-contagem-frame.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.hero-title,
.hero-title h1,
.hero-title .date,
.hero-title .wedding-day,
.section h2,
.section h3,
.gallery-caption,
.venue,
.address,
.gift-note,
.rsvp p,
.verse-text,
.parents-title,
.parents-side span,
.parents-side p,
.clock span,
.clock small,
.timeline time,
.timeline li > span:last-child {
  color: var(--mc-green-dark) !important;
}

.hero-title h1 span,
.scroll-link {
  color: var(--mc-green) !important;
}

.map-card,
.map-link,
.pix-copy-button,
.confirm-button,
.rsvp-label,
.music-toggle {
  color: #fff !important;
  background: var(--mc-green) !important;
  background-image: none !important;
  border-color: var(--mc-green) !important;
  box-shadow: 0 10px 22px rgba(31, 95, 59, 0.24) !important;
  text-shadow: 0 1px 2px rgba(18, 63, 40, 0.45) !important;
}

body .music-toggle,
body .music-toggle:hover,
body .open-envelope span,
body .open-envelope:hover span,
body .skip,
body .skip:hover,
body .invitation .map-link,
body .invitation .map-link:hover,
body .invitation .rsvp .rsvp-label,
body .invitation .rsvp .rsvp-label:hover,
body .invitation .rsvp .pix-copy-button,
body .invitation .rsvp .pix-copy-button:hover,
body .confirm-button,
body .confirm-button:hover,
body .whatsapp-button,
body .whatsapp-button:hover {
  color: #fff !important;
  background: linear-gradient(180deg, #2f7a4f 0%, #1f5f3b 100%) !important;
  border: 1px solid #3c8a5d !important;
  box-shadow: 0 10px 22px rgba(31, 95, 59, 0.26) !important;
  text-shadow: 0 1px 2px rgba(18, 63, 40, 0.5) !important;
}

body .open-envelope span,
body .open-envelope:hover span,
body .skip,
body .skip:hover {
  color: #fff !important;
  background: linear-gradient(180deg, var(--mc-olive) 0%, var(--mc-olive-dark) 100%) !important;
  border: 1px solid rgba(119, 132, 76, 0.95) !important;
  box-shadow: 0 10px 22px rgba(70, 85, 42, 0.26) !important;
  text-shadow: 0 1px 2px rgba(40, 50, 24, 0.42) !important;
}

body .hero .hero-wash {
  display: block !important;
  height: 100% !important;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(18, 63, 40, 0.56) 0%, rgba(18, 63, 40, 0.32) 22%, rgba(18, 63, 40, 0.12) 38%, transparent 54%),
    linear-gradient(to bottom, transparent 0%, transparent 52%, rgba(255, 255, 255, 0.82) 86%, #fff 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body .hero .hero-title,
body .hero .hero-title .date,
body .hero .hero-title h1,
body .hero .hero-title .script,
body .hero .hero-title h1 span,
body .hero .scroll-link {
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(18, 63, 40, 0.88), 0 1px 2px rgba(18, 63, 40, 0.95) !important;
}

body .countdown h2,
body .countdown .clock span,
body .countdown .clock small,
body .rsvp h2,
body .invitation .rsvp > h2,
body .invitation .rsvp .gift-panel h2,
body .rsvp p,
body .rsvp .script,
body .location h2,
body .location h3,
body .location .venue,
body .location .address,
body .gallery-caption {
  color: var(--mc-green-dark) !important;
}

.timeline-dot,
.map-pin {
  background: var(--mc-green) !important;
  color: #fff !important;
}

.timeline-track {
  background: rgba(31, 95, 59, 0.28) !important;
}

.location .decor,
body .invitation .location .decor {
  filter: sepia(1) saturate(1.8) hue-rotate(348deg) brightness(0.95) drop-shadow(0 1px 2px rgba(147, 113, 0, 0.22)) !important;
  opacity: 1 !important;
}

.details .parents-title,
body .invitation .details .parents-title {
  font-size: clamp(2.28rem, 8.4vw, 3rem) !important;
  line-height: 1.14 !important;
}

.gift-panel .gift-page-link,
.gift-panel .gift-whatsapp-link {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: min(100%, 260px) !important;
  min-height: 46px !important;
  margin: 14px auto 0 !important;
  text-decoration: none !important;
}

.gift-panel .gift-whatsapp-link {
  margin-top: 10px !important;
}

.welcome h2,
.welcome p,
.details h2,
.details p,
.schedule h2,
.schedule .timeline time,
.schedule .timeline li > span:last-child,
.location .map-card,
.location .map-card span,
.location .map-card small {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(18, 63, 40, 0.55) !important;
}

body .invitation .welcome h2,
body .invitation .welcome p,
body .invitation .details h2,
body .invitation .details p,
body .invitation .schedule h2,
body .invitation .schedule .timeline time,
body .invitation .schedule .timeline li > span:last-child,
body .invitation .location .map-card,
body .invitation .location .map-card span,
body .invitation .location .map-card small {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(18, 63, 40, 0.65) !important;
}

.gallery-slides img,
.verse-photos img {
  object-fit: cover !important;
}

.gallery-slides img[src*="maria-clara-02"],
.gallery-slides.maria-clara-gallery-loop img:nth-child(2) {
  object-position: 18% center !important;
}

.gallery-slides.maria-clara-gallery-loop img {
  animation: none !important;
  opacity: 0 !important;
  transform: scale(1.035) !important;
  transition: opacity 700ms ease, transform 1200ms ease !important;
}

.gallery-slides.maria-clara-gallery-loop img.is-active {
  opacity: 1 !important;
  transform: scale(1) !important;
}
