/* =========================================
   ROOT
========================================= */

:root {

  --pink: #ff78a9;
  --pink-dark: #ef568f;
  --pink-soft: #ffe7f0;

  --purple: #a88be8;
  --purple-soft: #eee7ff;

  --blue: #73d8ef;
  --blue-soft: #e5faff;

  --yellow: #ffd866;
  --yellow-soft: #fff5cf;

  --green: #7dd59a;

  --cream: #fffaf5;
  --cream-dark: #fff1e4;

  --text: #493d4b;
  --text-light: #89798a;

  --white: #ffffff;

  --shadow:
    0 20px 60px rgba(92, 64, 88, .10);

  --shadow-hover:
    0 25px 70px rgba(92, 64, 88, .16);

  --radius: 30px;

}


/* =========================================
   RESET
========================================= */

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


html {
  scroll-behavior: smooth;
}


body {

  background:
    var(--cream);

  color:
    var(--text);

  font-family:
    "Baloo 2",
    sans-serif;

  overflow-x:
    hidden;

}


body::selection {
  background: var(--pink);
  color: white;
}


button,
input,
select,
textarea {
  font-family: inherit;
}


button,
a {
  -webkit-tap-highlight-color:
    transparent;
}


.hidden {
  display: none !important;
}


img {
  max-width: 100%;
  display: block;
}


/* =========================================
   FLOATING DECORATIONS
========================================= */

.bg-decoration {

  position: fixed;

  pointer-events: none;

  z-index: 2;

  color:
    var(--yellow);

  font-size:
    28px;

  opacity:
    .65;

  animation:
    decorationFloat 5s
    ease-in-out
    infinite;

}


.decoration-one {

  top: 15%;
  left: 5%;

}


.decoration-two {

  top: 42%;
  right: 5%;

  color:
    var(--pink);

  animation-delay:
    1s;

}


.decoration-three {

  bottom: 25%;
  left: 7%;

  color:
    var(--pink);

  animation-delay:
    2s;

}


.decoration-four {

  bottom: 12%;
  right: 8%;

  color:
    var(--purple);

  animation-delay:
    1.5s;

}


@keyframes decorationFloat {

  0%,
  100% {
    transform:
      translateY(0)
      rotate(0deg);
  }

  50% {
    transform:
      translateY(-18px)
      rotate(12deg);
  }

}


/* =========================================
   BALLOONS
========================================= */

.balloon {

  position: fixed;

  z-index: 3;

  pointer-events: none;

  font-size:
    38px;

  animation:
    balloonFloat 6s
    ease-in-out
    infinite;

}


.balloon-pink {

  left: 3%;
  top: 27%;

}


.balloon-yellow {

  right: 3%;
  top: 18%;

  animation-delay:
    1.5s;

}


.balloon-blue {

  right: 5%;
  bottom: 18%;

  animation-delay:
    3s;

}


@keyframes balloonFloat {

  0%,
  100% {
    transform:
      translateY(0)
      rotate(-7deg);
  }

  50% {
    transform:
      translateY(-25px)
      rotate(7deg);
  }

}


/* =========================================
   COVER
========================================= */

.cover {

  min-height:
    100svh;

  position:
    relative;

  overflow:
    hidden;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    50px 20px;

  background:

    radial-gradient(
      circle at 20% 20%,
      rgba(255,255,255,.9),
      transparent 28%
    ),

    radial-gradient(
      circle at 80% 30%,
      rgba(255,231,240,.9),
      transparent 32%
    ),

    linear-gradient(
      145deg,
      #ffe3ef 0%,
      #fff6dd 48%,
      #e8f8ff 100%
    );

}


.cover::after {

  content: "";

  position:
    absolute;

  left:
    -10%;

  right:
    -10%;

  bottom:
    -100px;

  height:
    220px;

  background:
    var(--white);

  border-radius:
    50% 50% 0 0;

}


.cover-content {

  position:
    relative;

  z-index:
    5;

  width:
    100%;

  max-width:
    520px;

  text-align:
    center;

}


.invite-pill {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    9px 19px;

  background:
    rgba(255,255,255,.9);

  color:
    var(--pink-dark);

  border:
    1px solid
    rgba(255,255,255,.9);

  border-radius:
    999px;

  box-shadow:
    0 10px 30px
    rgba(80,50,70,.08);

  font-size:
    12px;

  font-weight:
    800;

  letter-spacing:
    2px;

}


.invite-pill span {
  color: var(--yellow);
}


.turning {

  margin-top:
    25px;

  color:
    var(--text-light);

  font-size:
    17px;

}


.age-wrapper {

  position:
    relative;

  width:
    150px;

  height:
    115px;

  margin:
    2px auto 5px;

}


.age-number {

  display:
    block;

  font-family:
    "Fredoka",
    sans-serif;

  font-size:
    115px;

  line-height:
    1;

  color:
    var(--pink);

  text-shadow:
    5px 6px 0
    rgba(255,255,255,.8);

}


.age-small {

  position:
    absolute;

  right:
    -4px;

  bottom:
    5px;

  padding:
    4px 9px;

  border-radius:
    10px;

  background:
    var(--yellow);

  color:
    #745c25;

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    1px;

  transform:
    rotate(-7deg);

}


.photo-wrapper {

  position:
    relative;

  width:
    225px;

  height:
    225px;

  margin:
    15px auto 17px;

}


.photo-ring {

  width:
    100%;

  height:
    100%;

  padding:
    9px;

  background:
    white;

  border:
    4px solid
    rgba(255,255,255,.75);

  border-radius:
    50%;

  box-shadow:
    0 20px 55px
    rgba(239,79,142,.18);

  transform:
    rotate(-4deg);

}


.photo-ring img {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  border-radius:
    50%;

}


.photo-sparkle {

  position:
    absolute;

  z-index:
    3;

  color:
    var(--yellow);

  font-size:
    27px;

  animation:
    sparkle 2.5s
    ease-in-out
    infinite;

}


.sparkle-one {

  top:
    5px;

  right:
    5px;

}


.sparkle-two {

  bottom:
    10px;

  left:
    2px;

  color:
    var(--pink);

  animation-delay:
    1s;

}


@keyframes sparkle {

  0%,
  100% {
    transform:
      scale(1)
      rotate(0deg);

    opacity:
      .7;
  }

  50% {
    transform:
      scale(1.25)
      rotate(20deg);

    opacity:
      1;
  }

}


.cover-name {

  font-family:
    "Fredoka",
    sans-serif;

  font-size:
    52px;

  line-height:
    1;

  color:
    var(--text);

}


.cover-subtitle {

  margin-top:
    8px;

  color:
    var(--text-light);

  font-size:
    17px;

}


.cover-date {

  display:
    flex;

  justify-content:
    center;

  align-items:
    center;

  gap:
    12px;

  margin:
    18px 0 24px;

  color:
    var(--pink-dark);

  font-size:
    13px;

  font-weight:
    700;

}


.cover-date span {
  color:
    var(--pink);
}


.open-button {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  border:
    0;

  padding:
    15px 24px;

  min-width:
    215px;

  border-radius:
    999px;

  color:
    white;

  background:

    linear-gradient(
      135deg,
      var(--pink),
      var(--purple)
    );

  box-shadow:
    0 15px 35px
    rgba(239,79,142,.27);

  font-size:
    16px;

  font-weight:
    800;

  cursor:
    pointer;

  transition:
    .25s ease;

}


.open-button:hover {

  transform:
    translateY(-4px)
    scale(1.02);

  box-shadow:
    0 20px 45px
    rgba(239,79,142,.34);

}


.open-button:active {
  transform:
    scale(.97);
}


.button-icon {
  font-size:
    18px;
}


.button-arrow {
  transition:
    .2s;
}


.open-button:hover .button-arrow {
  transform:
    translateX(4px);
}


.swipe-hint {

  margin-top:
    13px;

  color:
    #aa98a7;

  font-size:
    11px;

}


/* =========================================
   CLOUDS
========================================= */

.cloud {

  position:
    absolute;

  width:
    220px;

  height:
    65px;

  border-radius:
    999px;

  background:
    rgba(255,255,255,.62);

}


.cloud::before,
.cloud::after {

  content:
    "";

  position:
    absolute;

  background:
    inherit;

  border-radius:
    50%;

}


.cloud::before {

  width:
    90px;

  height:
    90px;

  left:
    25px;

  bottom:
    5px;

}


.cloud::after {

  width:
    110px;

  height:
    110px;

  right:
    25px;

  bottom:
    0;

}


.cloud-left {

  left:
    -80px;

  top:
    10%;

}


.cloud-right {

  right:
    -80px;

  bottom:
    18%;

}


/* =========================================
   CONFETTI
========================================= */

.confetti {

  position:
    absolute;

  width:
    10px;

  height:
    25px;

  border-radius:
    10px;

  opacity:
    .8;

  animation:
    confettiFloat 4s
    ease-in-out
    infinite;

}


.confetti-a {

  left:
    12%;

  top:
    24%;

  background:
    var(--pink);

  transform:
    rotate(25deg);

}


.confetti-b {

  right:
    14%;

  top:
    35%;

  background:
    var(--blue);

  transform:
    rotate(-25deg);

  animation-delay:
    1s;

}


.confetti-c {

  left:
    16%;

  bottom:
    23%;

  background:
    var(--yellow);

  transform:
    rotate(50deg);

  animation-delay:
    1.5s;

}


.confetti-d {

  right:
    16%;

  bottom:
    30%;

  background:
    var(--purple);

  transform:
    rotate(-35deg);

  animation-delay:
    2s;

}


.confetti-e {

  left:
    8%;

  top:
    48%;

  background:
    var(--green);

  transform:
    rotate(65deg);

  animation-delay:
    .5s;

}


@keyframes confettiFloat {

  0%,
  100% {
    transform:
      translateY(0)
      rotate(20deg);
  }

  50% {
    transform:
      translateY(-15px)
      rotate(70deg);
  }

}


/* =========================================
   GENERAL SECTION
========================================= */

.section {

  max-width:
    820px;

  margin:
    auto;

  padding:
    100px 20px;

  text-align:
    center;

}


.section-label {

  display:
    inline-block;

  color:
    var(--pink-dark);

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    2.5px;

  margin-bottom:
    10px;

}


.section h2 {

  font-family:
    "Fredoka",
    sans-serif;

  font-size:
    clamp(32px, 5vw, 44px);

  line-height:
    1.15;

  color:
    var(--text);

}


.section-intro {

  max-width:
    500px;

  margin:
    12px auto 0;

  color:
    var(--text-light);

  line-height:
    1.7;

}


.invitation {

  position:
    relative;

  overflow:
    hidden;

}


/* =========================================
   HERO
========================================= */

.hero {

  position:
    relative;

  padding-top:
    95px;

  background:
    var(--cream);

}


.hero-stars {

  margin-bottom:
    20px;

  color:
    var(--yellow);

  letter-spacing:
    5px;

  font-size:
    18px;

}


.hero-name-wrap {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    15px;

  margin:
    8px 0 10px;

}


.hero-name-wrap span {

  color:
    var(--pink);

  font-size:
    20px;

}


.hero-name {

  color:
    var(--pink);

  font-family:
    "Fredoka",
    sans-serif;

  font-size:
    50px;

  line-height:
    1;

}


.hero-text {

  max-width:
    580px;

  margin:
    auto;

  color:
    var(--text-light);

  font-size:
    17px;

  line-height:
    1.8;

}


.hero-decoration {

  margin-top:
    25px;

  font-size:
    25px;

  letter-spacing:
    8px;

}


/* =========================================
   COUNTDOWN
========================================= */

.countdown-section {

  padding:
    15px 20px 80px;

  background:
    var(--cream);

}


.countdown-card {

  position:
    relative;

  max-width:
    760px;

  margin:
    auto;

  padding:
    42px 25px 32px;

  text-align:
    center;

  overflow:
    hidden;

  border-radius:
    35px;

  background:

    linear-gradient(
      135deg,
      #fff,
      #fff7fa
    );

  box-shadow:
    var(--shadow);

  border:
    1px solid
    rgba(255,255,255,.9);

}


.countdown-card::before {

  content:
    "";

  position:
    absolute;

  width:
    170px;

  height:
    170px;

  right:
    -70px;

  top:
    -70px;

  border-radius:
    50%;

  background:
    var(--yellow-soft);

}


.countdown-card::after {

  content:
    "";

  position:
    absolute;

  width:
    130px;

  height:
    130px;

  left:
    -60px;

  bottom:
    -60px;

  border-radius:
    50%;

  background:
    var(--pink-soft);

}


.card-top-decoration {

  position:
    relative;

  z-index:
    2;

  color:
    var(--yellow);

  letter-spacing:
    7px;

  margin-bottom:
    8px;

}


.countdown-card h3 {

  position:
    relative;

  z-index:
    2;

  font-family:
    "Fredoka",
    sans-serif;

  font-size:
    28px;

}


.countdown-subtitle {

  position:
    relative;

  z-index:
    2;

  color:
    var(--text-light);

  margin:
    5px 0 25px;

}


.countdown {

  position:
    relative;

  z-index:
    2;

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    12px;

  max-width:
    620px;

  margin:
    auto;

}


.count-box {

  padding:
    17px 8px;

  border-radius:
    23px;

  background:
    #fff0f6;

  border:
    2px solid
    #ffe0ec;

}


.count-box:nth-child(2) {

  background:
    #eefaff;

  border-color:
    #d8f4fb;

}


.count-box:nth-child(3) {

  background:
    #fff8df;

  border-color:
    #ffefb5;

}


.count-box:nth-child(4) {

  background:
    #f2edff;

  border-color:
    #e4dcff;

}


.count-box strong {

  display:
    block;

  font-family:
    "Fredoka",
    sans-serif;

  font-size:
    38px;

  line-height:
    1;

  color:
    var(--pink-dark);

}


.count-box:nth-child(2) strong {
  color:
    #38aeca;
}


.count-box:nth-child(3) strong {
  color:
    #d99f17;
}


.count-box:nth-child(4) strong {
  color:
    #8062ca;
}


.count-box span {

  display:
    block;

  margin-top:
    6px;

  color:
    var(--text-light);

  font-size:
    12px;

  font-weight:
    700;

}


.countdown-bottom {

  position:
    relative;

  z-index:
    2;

  margin-top:
    25px;

  color:
    var(--text-light);

  font-size:
    13px;

}


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

.event-section {

  padding-top:
    90px;

}


.event-grid {

  display:
    grid;

  gap:
    15px;

  max-width:
    680px;

  margin:
    30px auto 20px;

}


.event-card {

  display:
    flex;

  align-items:
    center;

  gap:
    18px;

  padding:
    21px;

  text-align:
    left;

  background:
    white;

  border-radius:
    25px;

  box-shadow:
    var(--shadow);

  border:
    1px solid
    #f8edf2;

  transition:
    .25s ease;

}


.event-card:hover {

  transform:
    translateY(-4px);

  box-shadow:
    var(--shadow-hover);

}


.event-icon {

  flex:
    0 0 58px;

  width:
    58px;

  height:
    58px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    19px;

  font-size:
    27px;

  background:
    var(--pink-soft);

}


.time-card .event-icon {
  background:
    var(--blue-soft);
}


.location-card .event-icon {
  background:
    var(--yellow-soft);
}


.event-info {

  min-width:
    0;

}


.event-label {

  display:
    block;

  color:
    #ae9baa;

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    1.5px;

  margin-bottom:
    4px;

}


.event-info strong {

  display:
    block;

  color:
    var(--text);

  font-size:
    18px;

}


.event-info p {

  margin-top:
    3px;

  color:
    var(--text-light);

  font-size:
    13px;

}


.maps-button {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  padding:
    14px 24px;

  border-radius:
    999px;

  background:
    var(--green);

  color:
    white;

  text-decoration:
    none;

  font-weight:
    800;

  box-shadow:
    0 10px 25px
    rgba(125,213,154,.25);

  transition:
    .25s;

}


.maps-button:hover {

  transform:
    translateY(-3px);

  box-shadow:
    0 15px 30px
    rgba(125,213,154,.35);

}


/* =========================================
   GALLERY
========================================= */

.gallery-section {

  padding:
    90px 20px;

  background:

    linear-gradient(
      180deg,
      #fff0f6,
      #fff7e9
    );

}


.gallery-inner {

  max-width:
    820px;

  margin:
    auto;

  text-align:
    center;

}


.gallery {

  display:
    grid;

  grid-template-columns:
    repeat(12, 1fr);

  gap:
    15px;

  margin-top:
    32px;

}


.gallery-photo {

  position:
    relative;

  overflow:
    hidden;

  border-radius:
    25px;

  background:
    white;

  padding:
    7px;

  box-shadow:
    var(--shadow);

  transition:
    .3s ease;

}


.gallery-photo img {

  width:
    100%;

  height:
    100%;

  min-height:
    200px;

  object-fit:
    cover;

  border-radius:
    19px;

  transition:
    .4s ease;

}


.gallery-photo:hover {

  transform:
    translateY(-5px)
    rotate(-1deg);

  box-shadow:
    var(--shadow-hover);

}


.gallery-photo:hover img {

  transform:
    scale(1.04);

}


.gallery-photo span {

  position:
    absolute;

  right:
    14px;

  bottom:
    14px;

  width:
    35px;

  height:
    35px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    rgba(255,255,255,.9);

  box-shadow:
    0 5px 15px
    rgba(0,0,0,.08);

}


.photo-one {

  grid-column:
    span 7;

  transform:
    rotate(-2deg);

}


.photo-two {

  grid-column:
    span 5;

  transform:
    rotate(2deg);

}


.photo-three {

  grid-column:
    span 5;

  transform:
    rotate(2deg);

}


.photo-four {

  grid-column:
    span 7;

  transform:
    rotate(-2deg);

}


/* =========================================
   RSVP
========================================= */

.rsvp-section {

  position:
    relative;

  padding:
    95px 20px;

  background:

    radial-gradient(
      circle at 10% 10%,
      rgba(255,255,255,.8),
      transparent 30%
    ),

    linear-gradient(
      135deg,
      #ffdce9,
      #e8e0ff 55%,
      #dff7ff
    );

}


.rsvp-card {

  max-width:
    620px;

  margin:
    auto;

  padding:
    42px;

  border-radius:
    35px;

  background:
    rgba(255,255,255,.93);

  box-shadow:
    0 30px 80px
    rgba(94,68,95,.15);

  text-align:
    center;

}


.rsvp-decoration {

  margin-bottom:
    12px;

  font-size:
    21px;

  letter-spacing:
    5px;

}


.rsvp-card h2 {

  font-family:
    "Fredoka",
    sans-serif;

  font-size:
    37px;

}


.rsvp-description {

  max-width:
    480px;

  margin:
    10px auto 28px;

  color:
    var(--text-light);

  line-height:
    1.7;

}


.form-group {

  margin-bottom:
    18px;

}


.form-group label {

  display:
    block;

  margin:
    0 0 7px;

  text-align:
    left;

  color:
    var(--text);

  font-size:
    14px;

  font-weight:
    800;

}


.input-wrap {

  position:
    relative;

}


.input-wrap > span {

  position:
    absolute;

  z-index:
    2;

  left:
    15px;

  top:
    50%;

  transform:
    translateY(-50%);

  pointer-events:
    none;

}


.input-wrap input,
.input-wrap select {

  width:
    100%;

  height:
    54px;

  padding:
    0 15px 0 47px;

  border:
    2px solid
    #f1e4ec;

  border-radius:
    17px;

  outline:
    none;

  background:
    #fffafd;

  color:
    var(--text);

  font-size:
    15px;

  transition:
    .2s;

}


.form-group textarea {

  width:
    100%;

  padding:
    14px 15px;

  border:
    2px solid
    #f1e4ec;

  border-radius:
    17px;

  outline:
    none;

  background:
    #fffafd;

  color:
    var(--text);

  font-size:
    15px;

  resize:
    vertical;

  transition:
    .2s;

}


.input-wrap input:focus,
.input-wrap select:focus,
.form-group textarea:focus {

  border-color:
    var(--pink);

  background:
    white;

  box-shadow:
    0 0 0 4px
    rgba(255,120,169,.09);

}


.submit-button {

  width:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  margin-top:
    7px;

  padding:
    16px;

  border:
    0;

  border-radius:
    999px;

  background:

    linear-gradient(
      135deg,
      var(--pink),
      var(--purple)
    );

  color:
    white;

  font-size:
    16px;

  font-weight:
    800;

  cursor:
    pointer;

  box-shadow:
    0 14px 30px
    rgba(168,139,232,.25);

  transition:
    .25s;

}


.submit-button:hover {

  transform:
    translateY(-3px);

  box-shadow:
    0 18px 38px
    rgba(168,139,232,.32);

}


.submit-button:disabled {

  opacity:
    .6;

  cursor:
    wait;

  transform:
    none;

}


.success-message {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    4px;

  margin-top:
    22px;

  padding:
    20px;

  border-radius:
    20px;

  background:
    #eafbf0;

  color:
    #397b4d;

}


.success-icon {

  font-size:
    30px;

}


.success-message strong {

  font-size:
    17px;

}


.success-message span {

  font-size:
    13px;

}

/* =================================
   GUESTBOOK
================================= */

.guest-list {
  max-width: 650px;
  margin: 25px auto 0;
  text-align: left;

  /* Kotak scroll */
  max-height: 550px;
  overflow-y: auto;

  /* Supaya scrollbar tidak menempel */
  padding: 2px 10px 10px 2px;

  scroll-behavior: smooth;
}

/* Scrollbar */
.guest-list::-webkit-scrollbar {
  width: 6px;
}

.guest-list::-webkit-scrollbar-track {
  background: transparent;
}

.guest-list::-webkit-scrollbar-thumb {
  background: #ffc1d8;
  border-radius: 20px;
}

.guest-list::-webkit-scrollbar-thumb:hover {
  background: var(--pink);
}


/* =================================
   CARD UCAPAN
================================= */

.guest-item {
  background: #ffffff;
  padding: 20px 20px;
  border-radius: 24px;
  margin-bottom: 14px;

  box-shadow: 0 10px 30px rgba(89, 65, 91, 0.08);

  /* Penting */
  overflow: hidden;

  border-left: 5px solid var(--pink);
}

/* Warna bergantian seperti screenshot */

.guest-item:nth-child(2n) {
  border-left-color: #a98bea;
}

.guest-item:nth-child(3n) {
  border-left-color: #6ed7f7;
}

.guest-item:nth-child(4n) {
  border-left-color: #ff72a7;
}


/* =================================
   BAGIAN ATAS CARD
================================= */

.guest-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.guest-name {
  font-weight: 800;
  color: var(--pink-dark);
  font-size: 17px;
}

.guest-status {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;

  background: #e6f9ed;
  color: #36814c;

  padding: 5px 11px;
  border-radius: 20px;
}

.guest-message {
  margin-top: 9px;
  color: #776775;
  font-size: 14px;
  line-height: 1.6;
}

.loading {
  text-align: center;
  color: #927e8c;
}

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

footer {

  position:
    relative;

  overflow:
    hidden;

  padding:
    75px 20px;

  text-align:
    center;

  background:
    #493d4b;

  color:
    white;

}


.footer-content {

  position:
    relative;

  z-index:
    2;

  max-width:
    600px;

  margin:
    auto;

}


.footer-balloons {

  font-size:
    35px;

  letter-spacing:
    7px;

  margin-bottom:
    8px;

}


.footer-star {

  color:
    var(--yellow);

  font-size:
    20px;

}


.footer-small {

  margin-top:
    10px;

  color:
    #cfc3d0;

  font-size:
    13px;

}


footer h2 {

  margin:
    3px 0;

  font-family:
    "Fredoka",
    sans-serif;

  font-size:
    52px;

  color:
    #ff9fc3;

}


.footer-text {

  max-width:
    390px;

  margin:
    auto;

  color:
    #d9ceda;

  line-height:
    1.6;

}


.footer-line {

  width:
    55px;

  height:
    2px;

  margin:
    22px auto;

  background:
    var(--pink);

  border-radius:
    5px;

}


footer small {

  color:
    #a99ba9;

  font-size:
    11px;

}


.footer-cloud {

  position:
    absolute;

  width:
    260px;

  height:
    65px;

  background:
    rgba(255,255,255,.04);

  border-radius:
    999px;

}


.cloud-footer-one {

  left:
    -100px;

  bottom:
    40px;

}


.cloud-footer-two {

  right:
    -100px;

  top:
    40px;

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 800px) {

  .balloon {
    display:
      none;
  }

  .bg-decoration {
    opacity:
      .35;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

  .cover {

    padding:
      35px 18px;

  }


  .invite-pill {

    font-size:
      10px;

    letter-spacing:
      1.5px;

    padding:
      8px 15px;

  }


  .turning {

    margin-top:
      20px;

    font-size:
      15px;

  }


  .age-wrapper {

    height:
      95px;

    width:
      125px;

  }


  .age-number {

    font-size:
      95px;

  }


  .photo-wrapper {

    width:
      185px;

    height:
      185px;

    margin:
      12px auto;

  }


  .cover-name {

    font-size:
      43px;

  }


  .cover-subtitle {

    font-size:
      15px;

  }


  .cover-date {

    font-size:
      11px;

    margin:
      15px 0 20px;

  }


  .open-button {

    min-width:
      200px;

    padding:
      14px 20px;

    font-size:
      15px;

  }


  .section {

    padding:
      75px 18px;

  }


  .hero {

    padding-top:
      70px;

  }


  .hero-name {

    font-size:
      43px;

  }


  .hero-text {

    font-size:
      15px;

  }


  .countdown-section {

    padding:
      10px 14px 65px;

  }


  .countdown-card {

    padding:
      32px 14px 25px;

    border-radius:
      27px;

  }


  .countdown-card h3 {

    font-size:
      23px;

  }


  .countdown {

    gap:
      7px;

  }


  .count-box {

    padding:
      13px 3px;

    border-radius:
      16px;

  }


  .count-box strong {

    font-size:
      27px;

  }


  .count-box span {

    font-size:
      10px;

  }


  .countdown-bottom {

    font-size:
      11px;

  }


  .event-card {

    padding:
      17px;

    gap:
      13px;

    border-radius:
      21px;

  }


  .event-icon {

    flex-basis:
      50px;

    width:
      50px;

    height:
      50px;

    font-size:
      23px;

    border-radius:
      16px;

  }


  .event-info strong {

    font-size:
      15px;

  }


  .event-info p {

    font-size:
      12px;

  }


  .gallery {

    grid-template-columns:
      repeat(2, 1fr);

    gap:
      10px;

  }


  .gallery-photo {

    grid-column:
      span 1 !important;

    transform:
      none !important;

    border-radius:
      19px;

    padding:
      5px;

  }


  .gallery-photo img {

    min-height:
      155px;

    border-radius:
      14px;

  }


  .gallery-photo span {

    width:
      29px;

    height:
      29px;

    right:
      9px;

    bottom:
      9px;

    font-size:
      12px;

  }


  .rsvp-section {

    padding:
      70px 14px;

  }


  .rsvp-card {

    padding:
      30px 18px;

    border-radius:
      27px;

  }


  .rsvp-card h2 {

    font-size:
      29px;

  }


  .rsvp-description {

    font-size:
      13px;

  }


  .guest-top {

    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      6px;

  }


  .guest-item {

    padding:
      18px;

    border-radius:
      19px;

  }


  footer {

    padding:
      60px 20px;

  }


  footer h2 {

    font-size:
      43px;

  }

}


/* =========================================
   VERY SMALL PHONE
========================================= */

@media (max-width: 360px) {

  .photo-wrapper {

    width:
      165px;

    height:
      165px;

  }


  .cover-name {

    font-size:
      39px;

  }


  .count-box strong {

    font-size:
      24px;

  }


  .count-box span {

    font-size:
      9px;

  }


  .section h2 {

    font-size:
      29px;

  }

}