@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Sacramento&display=swap');

@font-face{

    font-family:'MyFont';

    src:url('assets/fonts/josephsophia.otf')
    format('opentype');

    font-weight:normal;

    font-style:normal;
}
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,
body{
    width:100%;
    overflow-x:hidden;

    background:#e4d4c5;

    font-family:'Poppins',sans-serif;
}

body{
    position:relative;
}

body.lock-scroll{
    overflow:hidden;
    height:100dvh;
}

/* COVER */
.cover{
    position:fixed;
    inset:0;

    width:100%;
    height:100dvh;

    z-index:9999;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:30px 20px;

    background:
    radial-gradient(
    circle at left,
    rgba(255,255,255,.18),
    transparent 35%
    ),
    radial-gradient(
    circle at right,
    rgba(123,22,40,.05),
    transparent 35%
    ),
    linear-gradient(
    90deg,
    #d7b9a3 0%,
    #eadbcf 50%,
    #d7b9a3 100%
    );

    overflow:hidden;

    transition:
    opacity 1s ease,
    visibility 1s ease;
}

.cover.hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.cover-inner{
  width:100%;
  max-width:430px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.invite-text{
  font-family:'MyFont', sans-serif;
  font-size:clamp(48px, 10vw, 72px);
  line-height:1;
  color:#065544;
  margin-bottom:clamp(14px, 4vw, 22px);
  padding-top: 5px;
  font-weight:400;
  letter-spacing:0.5px;
}

.photo-box{
  width:100%;
  display:flex;
  justify-content:center;
  margin-bottom:clamp(16px, 4vw, 24px);
}

.photo-box img{
  width:min(78vw, 340px);
  aspect-ratio: 3 / 4;
  object-fit:cover;
  display:block;
}

.hashtag{
  font-size:clamp(48px, 10vw, 72px);
  line-height:1;
  color:#065544;
  font-weight:700;
  padding-top: 5px;
  margin-bottom:clamp(10px, 3vw, 16px);
  font-family:'MyFont', sans-serif;
}

.guest-box{
  margin-top:4px;
  margin-bottom:clamp(18px, 4vw, 26px);
}

.guest-box p{
  font-size:clamp(14px, 3.2vw, 18px);
  color:#5d030e;
  margin-bottom:6px;
  font-family: 'Josefin Sans', sans-serif;
}

.guest-box h2{
  font-size:clamp(26px, 5.8vw, 40px);
  padding-top: 5px;
  color:#065544;
  font-weight:700;
  line-height:1.1;
  font-family: 'Josefin Sans', sans-serif;
}

.open-btn{
  width:min(100%, 280px);
  padding:15px 22px;
  border:none;
  border-radius:18px;
  background:#5d030e;
  border:2px solid #5d030e;
  color:#ffffff;
  font-size:clamp(15px, 3.5vw, 17px);
  font-weight:600;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  transition:0.25s ease;
}

.open-btn:active{
  transform:scale(0.98);
}

/* =========================
MUSIC BUTTON
========================= */

.music-btn{

position:fixed;

right:20px;

bottom:25px;

width:52px;

height:52px;

border:none;

border-radius:50%;

background:#7b1628;

color:white;

font-size:18px;

display:flex;

align-items:center;

justify-content:center;

z-index:999;

cursor:pointer;

box-shadow:
0 8px 20px rgba(0,0,0,.18);

animation:
musicFloat 2s ease-in-out infinite;

}

/* SPIN */

.music-btn.playing i{

animation:
spinMusic 4s linear infinite;
}

@keyframes spinMusic{

from{
transform:rotate(0deg);
}

to{
transform:rotate(360deg);
}
}

/* FLOAT */

@keyframes musicFloat{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-6px);
}

100%{
transform:translateY(0);
}
}

/* =========================
   REVEAL
========================= */

.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:
    opacity .9s ease,
    transform 1.2s cubic-bezier(.22,1,.36,1);

    will-change:
    transform,
    opacity;
}

/* TOP */

.reveal-top{
    transform:translateY(-64px);
}

/* BOTTOM */

.reveal-bottom{
    transform:translateY(64px);
}

/* LEFT */

.reveal-left{
    transform:translateX(-64px);
}

/* RIGHT */

.reveal-right{
    transform:translateX(64px);
}

/* ZOOM */

.reveal-zoom{
    transform:scale(.75);
}

/* ACTIVE */

.reveal.active,
.reveal-top.active,
.reveal-bottom.active,
.reveal-left.active,
.reveal-right.active,
.reveal-zoom.active{

    opacity:1;

    transform:
    translate(0,0)
    scale(1);
}

.frame-box{

opacity:0;

transform:scale(.75);

transition:
opacity 1.1s ease,
transform 1.2s cubic-bezier(.22,1,.36,1);

}

.frame-box.show{

opacity:1;

transform:scale(1);

}

/* =========================
   SECTION 1
========================= */

.section1{
    width:100%;
    padding:20px 22px 20px;

    background:
radial-gradient(
circle at left,
rgba(255,255,255,.18),
transparent 35%
),
radial-gradient(
circle at right,
rgba(6,85,68,.05),
transparent 35%
),
linear-gradient(
90deg,
#d5c0aa 0%,
#ece1d6 50%,
#d5c0aa 100%
);

    display:flex;
    flex-direction:column;
    align-items:center;

    overflow:hidden;
}

/* FRAME */

.frame-box{
    position:relative;
    width:100%;
    max-width:360px;
    transition:
opacity 1.2s ease,
transform 1.2s cubic-bezier(.22,1,.36,1);
}

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

/* CONTENT */

.frame-content{
    position:absolute;

    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    padding:
    90px 40px
    90px;

    text-align:center;
}

/* ARAB */

.arabic{
    font-size:18px;
    color:#9b1233;

    margin-bottom:18px;
}

/* AYAT */

.ayat{
    font-size:10px;
    line-height:1.9;
color:#065544;
    font-family: 'Josefin Sans', sans-serif;

    margin-bottom:20px;
}

/* SURAT */

.surat{
    font-size:19px;
    font-weight:700;
    font-family: 'Josefin Sans', sans-serif;

    color:#9b1233;
}

/* LOVE */

.love-wrap{
    width:100%;
    max-width:360px;

    margin-top:30px;
}

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

/* COUNTING */

.counting-title{

    margin-top:40px;

    margin-bottom:18px;

    line-height:1.2;

    font-family:'MyFont', sans-serif;

    font-size:40px;

    color:#065544;

    text-align:center;
}

/* COUNTDOWN */

.countdown-wrap{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin-top:30px;
}

/* BOX */

.time-box{

    width:78px;
    height:92px;

    background:#5d030e;

    border-radius:
    40px 40px 14px 14px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    box-shadow:
    0 10px 20px rgba(0,0,0,.08);

    flex-shrink:0;
}

.time-box h3{
    color:#fff;
    font-size:28px;
    font-family: 'Josefin Sans', sans-serif;
}

.time-box p{
    color:#fff;
    font-size:14px;
    font-family: 'Josefin Sans', sans-serif;
    margin-top:4px;
}

/* =========================
   SECTION 2
========================= */

.section2{

    width:100%;

    padding:
    20px 0 20px;

   background:
radial-gradient(
circle at left,
rgba(255,255,255,.18),
transparent 35%
),
radial-gradient(
circle at right,
rgba(6,85,68,.05),
transparent 35%
),
linear-gradient(
90deg,
#d5c0aa 0%,
#ece1d6 50%,
#d5c0aa 100%
);
    display:flex;
    flex-direction:column;

    overflow:visible;
}
/* =========================
   DATE IMAGE
========================= */

.date-image{

    width:100%;
    max-width:420px;

    margin:auto;
}

.date-image img{

    width:100%;
    display:block;
}

.date-image,
.bottom-love{
    padding:0 22px;
}

/* =========================
   SLIDER
========================= */

.slider{
    width:100%;
    overflow:hidden;
    margin-top:20px;
}

.slider-wrap{

    width:100%;

    overflow:hidden;
}

.slide-track{

    display:flex;

    width:max-content;

    animation:
    autoSlide 22s linear infinite;

    will-change:transform;
}

/* IMAGE */

.slide-track img{

    width:180px;
    height:250px;

    object-fit:cover;

    margin-right:14px;

    border-radius:28px;

    flex-shrink:0;

    box-shadow:
    0 10px 25px rgba(0,0,0,.12);

    border:
    4px solid #5d030e;

    transition:.4s;
}

/* AUTO SLIDE */

@keyframes autoSlide{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:
        translateX(calc(-194px * 4));
    }

}

/* =========================
   ORNAMEN
========================= */

.bottom-love{

    width:100%;
    max-width:360px;

    margin:30px auto 0;
}

.bottom-love img{

    width:100%;
    display:block;
}

/* =========================================
SECTION 3
========================================= */

.section3{

    width:100%;
    min-height:100vh;

    padding:
20px 22px 20px;

background:
radial-gradient(
circle at left,
rgba(255,255,255,.18),
transparent 35%
),
radial-gradient(
circle at right,
rgba(6,85,68,.05),
transparent 35%
),
linear-gradient(
90deg,
#d5c0aa 0%,
#ece1d6 50%,
#d5c0aa 100%
);


    overflow:hidden;
}

/* TITLE */

.s3-title{

    text-align:center;

    margin-bottom:20px;

}

.s3-title h2{

    font-size:52px;

    color:#065544;

    font-family:'MyFont', sans-serif;

    margin-bottom:15px;

    line-height: 1.2;
}

.s3-title p{

    font-size:12px;

    line-height:1.9;

    color:#5d030e;

    max-width:340px;

    font-family: 'Josefin Sans', sans-serif;

    margin: auto;
}

/* CARD */

.couple-card{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;
}

/* FOTO */

.couple-photo-wrap{

    width:290px;
    height:300px;
}

/* IMAGE */

.couple-photo{

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:26px;

    display:block;
}

/* TEXT */

.couple-info{

    text-align:center;
}

.couple-info h3{

    font-size:30px;

    color:#065544;

    margin-bottom:5px;
    padding-top: 10px;

    font-family:'MyFont', sans-serif;


}

.couple-info p{

    font-size:10px;

    color:#5d030e;

    font-family: 'Josefin Sans', sans-serif;

    margin-bottom:5px;
}

.couple-info span{

    display:block;

    font-size:15px;

    font-family: 'Josefin Sans', sans-serif;

    color:#5d030e;

    line-height:1.5;
}

/* & */

.and-text{

    text-align:center;

    font-size:60px;

    color:#065544;

    margin-bottom: -20px;

    font-family:'MyFont', sans-serif;

    line-height: 1.2;
}

/* LOVE */

.bottom1-love{
    width:100%;
    max-width:360px;

    margin-top:30px;

    position:relative;
    left:10px;
}

.bottom1-love img{

width:100%;
    display:block;
}

/* =========================================
SECTION 4
========================================= */

.section4{

    width:100%;
    min-height:100vh;

    padding:
    20px 22px 20px;

background:
radial-gradient(
circle at left,
rgba(255,255,255,.18),
transparent 35%
),
radial-gradient(
circle at right,
rgba(6,85,68,.05),
transparent 35%
),
linear-gradient(
90deg,
#d5c0aa 0%,
#ece1d6 50%,
#d5c0aa 100%
);

    overflow:hidden;

    display:flex;
    flex-direction:column;
    align-items:center;
}

/* TITLE */

.s4-title{

    width:100%;

    text-align:center;

    margin-bottom:35px;
}

.s4-title h2{

    font-size:
    clamp(42px, 9vw, 62px);

    font-family:'MyFont', sans-serif;

    color:#7b1628;

    line-height:1.2;
}

/* DATE */

.s4-date{

    width:100%;

    text-align:center;

    font-family: 'Josefin Sans', sans-serif;

    margin-bottom:35px;
}

.s4-day{

    font-size:
    clamp(18px, 4vw, 26px);

    color:#065544;

    letter-spacing:4px;

    font-weight:600;

    margin-bottom:10px;
}

/* COUNTER */

.date-counter{

    width:100%;

    display:flex;
    justify-content:center;
    align-items:center;

    margin-bottom:10px;
}

.date-counter span{

    font-size: clamp(50px, 8vw, 50px);

    line-height:1;

    font-weight:700;

    color:#7b1628;

    animation:pulseDate .45s ease;
}

.s4-month{

    font-size:
    clamp(22px, 5vw, 34px);

    color:#065544;

    font-weight:600;

    letter-spacing:2px;
}

.event-wrapper{
  margin-top:0px;
}

.event-card{
  padding:15px 15px;
  margin-bottom:30px;

  text-align:center;

  background:transparent;

  border:none;

  box-shadow:none;
}

.event-name{
  font-size:40px;
  color:#0d5c4f;
  margin-bottom:0px;
  padding-top: 10px;
  font-family:'MyFont', sans-serif;
}

.event-logo{
  width:230px;

  display:block;

  margin:25px auto;

  filter:
  drop-shadow(0 8px 18px rgba(120,20,40,.12));
}

.event-info{
  margin-top:10px;
  padding-top: 5px;
}

.event-info h4{
  font-size:32px;
  color:#0d5c4f;
  margin-bottom:20px;
  font-family: 'Josefin Sans', sans-serif;
}

.event-info p{
  font-size:15px;
  line-height:1.8;
  color:#35554d;
  font-family: 'Josefin Sans', sans-serif;
}

.event-line{
  width:80px;
  height:3px;
  background:#8d1733;
  margin:30px auto;
  border-radius:999px;
}

.event-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;

  margin-top:20px;

  padding:12px 24px;

  border-radius:999px;

  background:#7b1628;

  color:white;

  text-decoration:none;

  font-size:15px;
}



/* LOVE */

.bottom-love{

    width:100%;

    max-width:390px;

    margin-top:10px;
}

.bottom-love img{

    width:100%;

    display:block;
}

/* =========================
ANIMATION DATE
========================= */

@keyframes pulseDate{

    0%{

        transform:
        scale(.6);

        opacity:.2;
    }

    100%{

        transform:
        scale(1);

        opacity:1;
    }
}

/* =========================
SECTION 5
LOVE STORY
========================= */

.section5{

    width:100%;

    background:
radial-gradient(
circle at left,
rgba(255,255,255,.18),
transparent 35%
),
radial-gradient(
circle at right,
rgba(6,85,68,.05),
transparent 35%
),
linear-gradient(
90deg,
#d5c0aa 0%,
#ece1d6 50%,
#d5c0aa 100%
);

    padding:
    20px 22px 20px;

    overflow:hidden;
}

/* TITLE */

.story-title{

    text-align:center;

    font-size:
    clamp(42px, 8vw, 62px);

    font-family:'MyFont', sans-serif;

    color:#065544;

    margin-bottom:20px;

    line-height:1.2;
}

/* BOX */

.story-box{

    width:100%;

    max-width:100%;

    margin:0 auto 50px;

    text-align:center;
}

/* IMAGE */

.story-img-wrap{

    width:100%;

    display:flex;

    justify-content:center;

    margin-bottom:10px;
}

.story-img{

    width:100%;

    max-width:260px;

    object-fit:cover;

    display:block;
}

/* HEADING */

.story-heading{

    font-size:
    clamp(30px, 6vw, 42px);

    font-family:'MyFont', sans-serif;

    color: #7b1628;

    margin-bottom:10px;

    line-height:1.2;
}

/* TEXT */

.story-text{

    width:100%;

    max-width:520px;

    margin:0 auto;

    font-size:14px;

    line-height:2;

    color:#065544;

    text-align:center;

    font-family:
    'Josefin Sans', sans-serif;
}

/* ORNAMEN */

.story-love{

    width:100%;

    display:flex;

    justify-content:center;

    margin-top:0px;
}

.story-love img{

    width:70%;

    max-width:360px;

    display:block;
}

/* =========================
SECTION 6
THINGS TO KNOW
========================= */

.section6{

    width:100%;

    padding:
    20px 22px 20px;

    background:
radial-gradient(
circle at left,
rgba(255,255,255,.18),
transparent 35%
),
radial-gradient(
circle at right,
rgba(6,85,68,.05),
transparent 35%
),
linear-gradient(
90deg,
#d5c0aa 0%,
#ece1d6 50%,
#d5c0aa 100%
);

    overflow:hidden;
}

/* TITLE */

.s6-title{

    text-align:center;

    font-size:40px;

    font-family:'MyFont', sans-serif;

    color:#7b1628;

    margin-bottom:10px;

    line-height:1.3;
}

/* ITEM */

.s6-item{

    width:100%;

    margin-bottom:30px;

    text-align:center;
}

/* IMAGE */

.s6-img-wrap{

    width:100%;

    display:flex;

    justify-content:center;

    margin-bottom:20px;
}

.s6-img{

    width:50%;

    max-width:230px;

    display:block;

    object-fit:contain;
}

/* TEXT */

.s6-text{
    width:100%;

    max-width:520px;

    margin:0 auto;

    font-size:15px;

    line-height:2;

    color:#065544;

    text-align:center;

    font-family:
    'Josefin Sans', sans-serif;
}

/* LOVE */

.s6-love{

    width:100%;

    display:flex;

    justify-content:center;

    margin-top:20px;
}

.s6-love img{

    width:70%;

    max-width:360px;

    display:block;
}


/* =========================
SECTION 7
========================= */

.section7{

    width:100%;

    padding:
    20px 22px 20px;

    background:
radial-gradient(
circle at left,
rgba(255,255,255,.18),
transparent 35%
),
radial-gradient(
circle at right,
rgba(6,85,68,.05),
transparent 35%
),
linear-gradient(
90deg,
#d5c0aa 0%,
#ece1d6 50%,
#d5c0aa 100%
);

    display:flex;

    justify-content:center;

    overflow:hidden;
}

/* FRAME */

.gift-frame{

    width:100%;

    max-width:520px;

    background:#f7eee4;

    border:
    1.5px solid #f7eee4;

    border-radius:38px;

    padding:
    20px 28px 20px;

    text-align:center;

    position:relative;

    box-shadow:
    0 20px 40px rgba(0,0,0,.05);
}

/* SMALL */

.gift-small{

    display:block;

    font-size:14px;

    color: #7b1628;

    margin-bottom:15px;

    font-family:
    'Josefin Sans', sans-serif;
}

/* TITLE */

.gift-title{

    font-size:40px;

    font-family:'MyFont', sans-serif;

    font-style:italic;

    font-weight:500;

    color:#7b1628;

    line-height:1.1;

    margin-bottom:10px;
}

/* DESC */

.gift-desc{

    width:100%;

    max-width:500px;

    margin:0 auto 25px;

    font-size:15px;

    line-height:1.7;

    color: #065544;

    font-family:
    'Josefin Sans', sans-serif;
}

/* BUTTON */

.gift-open{

    border:none;

    outline:none;

    background:#7b1628;

    font-weight: 300px;

    color:#fff;

    padding:
    12px 26px;

    min-width:220px;

    height:auto;

    border-radius:999px;

    font-size:13px;

    letter-spacing:3px;

    cursor:pointer;

    transition:.3s;

    font-family:
    'Josefin Sans', sans-serif;

    margin-bottom:0px;

    box-shadow:
    0 8px 18px rgba(0,0,0,.08);
}

.gift-open:active{

    transform:scale(.97);
}

/* POPUP */

.gift-popup{

    width:100%;

    max-height:0;

    opacity:0;

    overflow:hidden;

    transition:
    max-height .9s cubic-bezier(.22,1,.36,1),
    opacity .7s ease,
    margin-top .7s ease;

    margin-top:0;
}

/* SHOW */

.gift-popup.show{

    max-height:9999px;

    opacity:1;

    margin-top:35px;
}

/* CARD */

.gift-card{

    width:100%;

    background:#fafafa;

    border:
    1px solid #ececec;

    border-radius:22px;

    padding:
    18px 16px;

    margin-bottom:14px;

    box-shadow:
    0 6px 18px rgba(0,0,0,.03);
}

/* LOGO */

.gift-bank{

    width:100%;

    display:flex;

    justify-content:center;

    margin-bottom:10px;
}

.gift-bank img{

    width:52px;

    height: auto;

    object-fit:contain;
}

/* REK */

.rek-number{

    font-size:14px;

    letter-spacing:1px;

    color:#7b1628;

    font-weight:700;

    margin-bottom:12px;

    font-family:
    'Josefin Sans', sans-serif;
}

/* NAME */

.gift-card p{

    font-size:15px;

    color:#065544;

    margin-bottom:16px;

    font-family:
    'Josefin Sans', sans-serif;
}

.gift-bank-text{

    font-size:13px;

    font-weight:700;

    color:#7b1628;

    margin-bottom:14px;

    letter-spacing:1px;

    font-family:
    'Josefin Sans', sans-serif;
}

/* COPY */

.copy-btn{

    border:none;

    outline:none;

    background:#7b1628;

    color:#fff;

    padding:
    9px 16px;

    cursor:pointer;

    font-size:11px;

    border-radius:999px;

    min-width:150px;

    letter-spacing:1px;

    transition:.3s;

    font-family:
    'Josefin Sans', sans-serif;
}
.copy-btn:active{

    transform:scale(.96);
}

/* =========================
   SECTION 8
========================= */

.section8{

    width:100%;

    padding:15px 22px;

    background:
radial-gradient(
circle at left,
rgba(255,255,255,.18),
transparent 35%
),
radial-gradient(
circle at right,
rgba(6,85,68,.05),
transparent 35%
),
linear-gradient(
90deg,
#d5c0aa 0%,
#ece1d6 50%,
#d5c0aa 100%
);

}

/* TITLE */

.portrait-title{

    text-align:center;

    font-size:40px;
  padding-top: 10px;

    color:#7b1628;
    margin-bottom:10px;

    font-family:'MyFont', sans-serif;

}

/* MAIN */

.portrait-main{

    width:100%;

    position:relative;

    overflow:hidden;

    border-radius:34px;

    border:4px solid #7b1628;

}

#mainPortrait{

    width:100%;

    height:520px;

    object-fit:cover;

    display:block;

    transition:.5s;
}

/* BUTTON */

.slide-btn{

position:absolute;

top:50%;

transform:translateY(-50%);

background:transparent;

border:none;

outline:none;

color:white;

font-size:42px;

cursor:pointer;

z-index:5;

padding:0;

}

.prev{
    left:12px;
}

.next{
    right:12px;
}

/* THUMB */

.portrait-thumb{

    display:flex;

    gap:14px;

    margin-top:18px;
}

.portrait-thumb img{

    width:33.3%;

    height:120px;

    object-fit:cover;

    border-radius:24px;

    border:4px solid #7b1628;

    cursor:pointer;

    transition:.3s;
}

.portrait-thumb img:hover{

    transform:scale(.97);
}

.s8-love{

    width:100%;

    display:flex;

    justify-content:center;

    margin-top:0px;
}

.s8-love img{

    width:70%;

    max-width:360px;

    display:block;
}

/* =========== */
/* SECTION 9 */
/* ============ */
.section9{

padding:0px 24px;

text-align:center;
background:
radial-gradient(
circle at left,
rgba(255,255,255,.18),
transparent 35%
),
radial-gradient(
circle at right,
rgba(6,85,68,.05),
transparent 35%
),
linear-gradient(
90deg,
#d5c0aa 0%,
#ece1d6 50%,
#d5c0aa 100%
);

}

.ucapan-title{

font-size:48px;

color:#7b1628;
padding-top: 10px;
margin-bottom:10px;

font-family:'MyFont', sans-serif;

}

.ucapan-text{

font-size:15px;

color:#065544;

margin-bottom:10px;

line-height:1.7;

font-family:'Josefin Sans', sans-serif;

}

.ucapan-couple{

font-size:34px;

color:#7b1628;
margin-bottom:30px;
padding-top: 10px;

font-family:'MyFont', sans-serif;

font-weight:400;

}

.s9-love{

    width:100%;

    display:flex;

    justify-content:center;

    margin-top:20px;
}

.s9-love img{

    width:70%;

    max-width:360px;

    display:block;
}


.ucapan-box{

display:flex;

flex-direction:column;

gap:16px;

margin-bottom:30px;

}

.ucapan-box input,
.ucapan-box textarea{

width:100%;

padding:18px;

border:2px solid #7b1628;

border-radius:20px;

font-size:15px;

outline:none;

background:white;

font-family:'Josefin Sans', sans-serif;

}

.ucapan-box textarea{

height:120px;

resize:none;

}

.kirim-btn{

border:none;

background:#7b1628;

color:white;

padding:14px;

border-radius:999px;

font-size:16px;

cursor:pointer;

font-family:'Josefin Sans', sans-serif;

}

.list-ucapan{

display:flex;

flex-direction:column;

gap:18px;

}

.ucapan-item{

background:white;

padding:20px;

border-radius:22px;

text-align:left;

box-shadow:0 4px 15px rgba(0,0,0,.05);

}

.ucapan-item h4{

color:#7b1628;

margin-bottom:6px;

}

.ucapan-item small{

color:#065544;

display:block;

margin-bottom:12px;

}

.ucapan-item p{

color:#065544;

line-height:1.6;

}

/* =========================
FOOTER BRAND
========================= */

.brand-footer-section{
    padding: 10px 25px 10px;
    text-align: center;
  background:
radial-gradient(
circle at left,
rgba(255,255,255,.18),
transparent 35%
),
radial-gradient(
circle at right,
rgba(6,85,68,.05),
transparent 35%
),
linear-gradient(
90deg,
#d5c0aa 0%,
#ece1d6 50%,
#d5c0aa 100%
);
}

.brand-footer-label{
    font-size: 15px;
    letter-spacing: 1px;
    color: #7b1628;
    margin-bottom: 10px;
    font-family: 'Josefin Sans', sans-serif;
}

.brand-footer-line{
    width: 70px;
    height: 2px;
    background: #7b1628;
    margin: 0 auto 35px;
    border-radius: 20px;
}

.brand-footer-brand{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
}

.brand-footer-logo{
    width: 65px;
    height: 65px;
    border-radius: 50%;
    object-fit: cover;
}

.brand-footer-made{
    font-size: 13px;
    color: #666;
    margin-bottom: 4px;
    font-family: 'Josefin Sans', sans-serif;
}

.brand-footer-name{
    font-size: 18px;
    color: #7b1628;
    letter-spacing: 2px;
    font-family: 'Josefin Sans', sans-serif;
}

.brand-footer-social{
    display: flex;
    justify-content: center;
    gap: 18px;
}

.brand-footer-social a{
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #7b1628;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 20px;
    transition: .3s;
}

.brand-footer-social a:hover{
    transform: translateY(-4px);
}

/* ============ */
/* SPARKLE */
/* =========== */
.section3{
    position:relative;
    overflow:hidden;
}

/* SPARKLE */

.mini-sparkle{
    position:absolute;

    font-size:20px;

    opacity:.32;

    animation: twinkle 3s ease-in-out infinite;

    pointer-events:none;
}

/* BRIDE */

.bs1{
    top:250px;
    left:70px;
    color: #065544;;
}

.bs3{
    top:400px;
    left:14px;
    font-size:30px;
    animation-delay:1.2s;
    color: #7b1628;;
}

.bs5{
    top:390px;
    right:24px;
    color: #065544;;
    animation-delay:1.5s;
}

.bs6{
    top:180px;
    right:78px;
    font-size:30px;
    color: #7b1628;;
}

/* GROOM */

.gs1{
    top:730px;
    left:70px;
    color: #065544;;
}

.gs3{
    top:880px;
    left:14px;
    font-size:30px;
    animation-delay:1.2s;
    color: #7b1628;;
}

.gs5{
    top:870px;
    right:24px;
    color: #065544;;
    animation-delay:1.5s;
}

.gs6{
    top:670px;
    right:78px;
    font-size:30px;
    color: #7b1628;;
}

/* ANIMATION */

@keyframes twinkle{

    0%{
        opacity:.12;
        transform:scale(.8);
    }

    50%{
        opacity:.75;
        transform:scale(1.15);

        text-shadow:
        0 0 10px rgba(255,245,210,.8);
    }

    100%{
        opacity:.12;
        transform:scale(.8);
    }
}

/* =========================
EVENT SPARKLE
========================= */

.section4{
    position:relative;
    overflow:hidden;
}

.event-sparkle{
    position:absolute;

    font-size:20px;

    opacity:.20;

    pointer-events:none;

    animation:eventGlow 3.5s ease-in-out infinite;
}

/* AKAD */

.es1{
    top:360px;
    left:45px;

    color:#7b1628;
}

.es2{
    top:420px;
    right:55px;

    color:#065544;

    font-size:26px;

    animation-delay:1s;
}

.es3{
    top:520px;
    left:30px;

    color:#065544;

    animation-delay:2s;
}

.es4{
    top:620px;
    right:35px;

    color:#7b1628;

    font-size:24px;

    animation-delay:1.5s;
}

/* RESEPSI */

.es5{
    top:1180px;
    left:40px;

    color:#065544;
}

.es6{
    top:1260px;
    right:50px;

    color:#7b1628;

    font-size:26px;

    animation-delay:1s;
}

.es7{
    top:1380px;
    left:28px;

    color:#065544;
    animation-delay:2s;
}

.es8{
    top:1470px;
    right:35px;

    color:#065544;

    font-size:24px;

    animation-delay:1.5s;
}

/* ANIMATION */

@keyframes eventGlow{

    0%{
        opacity:.12;
        transform:scale(.85);
    }

    50%{
        opacity:.7;
        transform:scale(1.15);

        text-shadow:
        0 0 10px rgba(255,255,255,.6);
    }

    100%{
        opacity:.12;
        transform:scale(.85);
    }
}