#section-7 .bottom-left-frame {
  position: absolute;
  left: 0px;
  bottom: 0px;

  width: clamp(203px, 50vmin, 406px); /* need to be bigger */

  z-index: -1;
}
#section-7 .bottom-right-frame {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;

  z-index: -1;
}
#section-7 .hashtag {
  color: #000;
  text-align: center;
  font-family: "Poppins Extra Light Italic";
  font-size: clamp(9px, 2vmin, 18px);
  font-style: italic;
  font-weight: 275;

  margin-top: clamp(70px, 30vmin, 140px); /* need to be bigger */
  margin-bottom: clamp(90px, 38vmin, 180px); /* need to be bigger */
}
#section-7 .wish .time {
  color: #000;
  font-family: "Voyager Thin";
  font-size: clamp(9px, 2vmin, 18px);
  font-weight: 100;
  letter-spacing: 0.302px;

  text-transform: capitalize;

  margin-top: clamp(7px, 2vmin, 14px); /* need to be bigger */
}
#section-7 .wish .content {
  color: #000;
  /* font-family: "Voyager Thin"; */
  font-size: clamp(12px, 3vmin, 24px);
  font-weight: 100;

  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;

  width: 100%;

  margin-top: clamp(2px, 1vmin, 4px); /* need to be bigger */
}
#section-7 .wish .line {
  margin: 0px;
  padding: 0px;
  width: 100%;
  /* max-width: 200px; */
  border: none;
  border-top: 0.5px solid #000;

  margin-top: clamp(7px, 2vmin, 14px); /* need to be bigger */

  text-transform: capitalize;
}
#section-7 .wish .name {
  color: #000;
  font-family: "Voyager";
  font-size: clamp(18px, 4vmin, 36px);
  font-weight: 400;

  text-transform: capitalize;
}
#section-7 .wish {
  /* contain the name, content and date */
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  padding: 8px;

  width: clamp(200px, 60vmin, 400px); /* need to be bigger */
  margin-bottom: clamp(25px, 7vmin, 50px);
}
#section-7 .wish-dot {
  /* contain the name, content and date */
  height: clamp(8px, 2vmin, 16px);
  aspect-ratio: 1 / 1;
  border-radius: 200px;
  background-color: #aaa;

  opacity: 0.25;
}
#section-7 .wish-dot.show {
  opacity: 1;
}
#section-7 .wish-dot-container {
  /* contain the name, content and date */
  margin: 0 auto;

  display: flex;
  justify-content: center;

  gap: clamp(8px, 2vmin, 16px);

  margin-top: clamp(50px, 8vmin, 100px);
}
#section-7 .card #submit {
  background-color: transparent;
  display: block;
  border-radius: 7px;
  border: 1px solid #000;
  text-transform: uppercase;
  color: #000;
  text-align: center;
  font-family: "Poppins";
  font-size: clamp(10px, 3vmin, 20px);
  padding: clamp(4px, 1vmin, 8px) clamp(9px, 2vmin, 18px);
  font-weight: 500;

  height: clamp(30px, 7vmin, 60px);
}
::placeholder {
  color: #000;
  font-family: "Poppins Light";
  font-size: clamp(10px, 3vmin, 20px);
  font-weight: 300;
}
#section-7 #wishes {
  display: block;
  border-radius: 7px;
  border: 1px solid #eaeaea;
  padding: clamp(4px, 1vmin, 8px) clamp(9px, 2vmin, 18px);

  flex: 1;

  color: #000;
  font-family: "Poppins Light";
  font-size: clamp(10px, 3vmin, 20px);
  font-weight: 300;
}
#section-7 .card #name {
  display: block;
  border-radius: 7px;
  border: 1px solid #eaeaea;
  padding: clamp(4px, 1vmin, 8px) clamp(9px, 2vmin, 18px);

  height: clamp(30px, 7vmin, 60px);

  color: #000;
  font-family: "Poppins Light";
  font-size: clamp(10px, 3vmin, 20px);
  font-weight: 300;
}
#section-7 .card .form {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 3vmin, 20px);
  height: 100%;
}
#section-7 .card .flower {
  width: 35%; /* need to be bigger */
  height: auto;
  /* for flower decor */
  position: absolute;
  top: -12%;
  left: 50%;
  transform: translateX(-50%);
}
#section-7 .card {
  /* for flower decor */
  position: relative;
  padding: clamp(17px, 4vmin, 34px) clamp(21px, 5vmin, 42px);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0px 1px 5px 4px rgba(230, 230, 230, 0.55);
  width: clamp(250px, 80vmin, 600px); /* need to be bigger */
  aspect-ratio: 1 / 0.8;

  margin-top: clamp(50px, 8vmin, 100px);

  margin-bottom: clamp(50px, 8vmin, 100px);
}
#section-7 .header {
  color: #000;
  text-align: center;
  font-family: "Voyager Regular";
  font-size: clamp(27px, 7vmin, 54px);
  font-weight: 400;
  text-transform: capitalize;
}
#section-7 {
  /* for decor anchor */
  position: relative;

  /* full width and take full height */
  width: 100vw;
  min-height: 100vh;

  /* contain the text, cards, and decor */
  display: flex;
  flex-direction: column;
  align-items: center;

  /* the content here is too short */
  justify-content: center;

  padding: 0px clamp(9px, 2vmin, 18px);
}
#section-7 .bottom-left-flower-spread {
  position: absolute;
  left: 0px;
  top: 50%;

  z-index: -1;

  width: clamp(110px, 39vmin, 220px); /* need to be bigger */
  height: auto;
  transform: rotate(9deg);
}
#section-7 .top-left-flower-spread {
  position: absolute;
  left: 0px;
  top: 0%;

  z-index: -1;

  width: clamp(110px, 39vmin, 220px); /* need to be bigger */
  height: auto;
  transform: rotate(9deg);
}
#section-7 .top-right-flower-spread {
  position: absolute;
  right: 0px;
  top: 20%;

  z-index: -1;

  width: clamp(110px, 39vmin, 220px); /* need to be bigger */
  height: auto;
  transform: rotate(9deg);
}

#section-6 .top-right-flower {
  position: absolute;
  right: 0px;
  top: 10%;

  width: clamp(155px, 31vmin, 310px); /* need to be bigger */
  aspect-ratio: 1 / 1;

  z-index: -1;
}
#section-6 .bottom-left-flower {
  position: absolute;
  left: 0px;
  top: 50%;

  z-index: -1;

  width: clamp(110px, 39vmin, 220px); /* need to be bigger */
  height: auto;
  transform: rotate(9deg);
}

@media (prefers-reduced-motion: no-preference) {
  .animation-bottom-left-flower {
    animation: fade-right-100 2s 1 ease-out;
  }
  .animation-top-right-flower {
    animation: fade-left-100 2s 1 ease-out;
  }
}
#section-6 .grid {
  width: 100vw;
  aspect-ratio: 1 / 4;
  flex: 1;
  display: grid;
  grid-template: repeat(40, 1fr) / repeat(10, 1fr);

  gap: clamp(8px, 2vmin, 16px);
  padding: clamp(8px, 2vmin, 16px);
}
#section-6 .grid .item {
  display: block;

  width: 0;
  height: 0;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
}
#section-6 .item-grid-container {
  width: 0;
  height: 0;
  min-width: 100%;
  min-height: 100%;
  overflow: hidden;
}
#section-6 .grid #container-1 {
  grid-column: 3 / 7;
  grid-row: 1 / 4;
}
#section-6 .grid #container-2 {
  grid-column: 7 / 10;
  grid-row: 2 / 6;
}
#section-6 .grid #container-3 {
  grid-column: 1 / 5;
  grid-row: 4 / 7;
}
#section-6 .grid #container-4 {
  grid-column: 5 / 7;
  grid-row: 4 / 7;
}
#section-6 .grid #container-5 {
  grid-column: 7 / 9;
  grid-row: 5 / 7;
}
#section-6 .grid #container-6 {
  grid-column: 7 / 11;
  grid-row: 6 / 11;
}
#section-6 .grid #container-7 {
  grid-column: 2 / 7;
  grid-row: 7 / 11;
}
#section-6 .grid #container-8 {
  grid-column: 6 / 10;
  grid-row: 17 / 22;
}
#section-6 .grid #container-9 {
  grid-column: 2 / 6;
  grid-row: 17 / 22;
}
#section-6 .grid #container-10 {
  grid-column: 1 / 7;
  grid-row: 11 / 17;
}
#section-6 .grid #container-11 {
  grid-column: 9 / 11;
  grid-row: 11 / 14;
}
#section-6 .grid #container-12 {
  grid-column: 7 / 11;
  grid-row: 11 / 17;
}
#section-6 .grid #container-13 {
  grid-column: 4 / 11;
  grid-row: 15 / 18;
}
#section-6 .grid #container-14 {
  grid-column: 1 / 8;
  grid-row: 22 / 27;
}
#section-6 .grid #container-15 {
  grid-column: 8 / 11;
  grid-row: 22 / 27;
}
#section-6 .grid #container-16 {
  grid-column: 2 / 6;
  grid-row: 27 / 30;
}
#section-6 .grid #container-17 {
  grid-column: 6 / 10;
  grid-row: 27 / 33;
}
#section-6 .grid #container-18 {
  grid-column: 1 / 6;
  grid-row: 30 / 35;
}
#section-6 .grid #container-19 {
  grid-column: 6 / 10;
  grid-row: 33 / 40;
}
@media (prefers-reduced-motion: no-preference) {
  .animation-item-1,
  .animation-item-3,
  .animation-item-4,
  .animation-item-5,
  .animation-item-7,
  .animation-item-9,
  .animation-item-10,
  .animation-item-11,
  .animation-item-13,
  .animation-item-14,
  .animation-item-16,
  .animation-item-18 {
    animation: fade-right-200 2s 1 ease-out;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .animation-item-2,
  .animation-item-6,
  .animation-item-8,
  .animation-item-12,
  .animation-item-15,
  .animation-item-17,
  .animation-item-19 {
    animation: fade-left-200 2s 1 ease-out;
  }
}
#section-6 .title {
  color: #000;
  text-align: center;
  font-family: "Best Moments";
  line-height: 1;
  font-size: clamp(48px, 10vmin, 96px); /* need to be bigger */
  font-weight: 400;
  text-transform: capitalize;

  margin-bottom: clamp(16px, 4vmin, 32px);
}
@media (prefers-reduced-motion: no-preference) {
  .animation-title {
    animation: fade-up-25 2s 1 ease-out;
  }
}
#section-6 {
  /* for decor anchor */
  position: relative;

  /* full width and take full height */
  width: 100vw;
  min-height: 100vmax;

  /* contain the rsvp button, and sub heading */
  display: flex;
  flex-direction: column;
  align-items: center;

  /* the content here is too short */
  justify-content: center;

  margin-bottom: clamp(20px, 10vmin, 40px);
}
#section-5 .flower {
  position: absolute;
  left: -10%;
  top: -100%;

  width: clamp(85px, 22vmin, 170px); /* need to be bigger */
  aspect-ratio: 1 / 1;
}
#section-5 .sub-heading {
  color: #000;
  text-align: center;
  font-family: "Poppins Light";
  font-size: clamp(9px, 2vmin, 18px);
  font-weight: 300;

  margin-top: clamp(9px, 2vmin, 18px);
}
#section-5 .rsvp-button {
  /* flower anchor */
  position: relative;

  padding: clamp(0px, 2vmin, 1px) clamp(0px, 21vmin, 166px); /* need to be bigger */
  border: 1px solid #000;
  border-radius: 100px;
  background-color: transparent;

  color: #000;
  text-align: center;
  font-family: "Poppins";
  font-size: clamp(18px, 4vmin, 36px);
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
}
#section-5 {
  /* for decor anchor */
  position: relative;

  /* full width and take full height */
  width: 100vw;
  /* min-height: 390px; */
  padding-top: clamp(74px, 20vmin, 148px);
  padding-bottom: clamp(74px, 20vmin, 148px);

  /* contain the rsvp button, and sub heading */
  display: flex;
  flex-direction: column;
  align-items: center;

  /* the content here is too short */
  justify-content: center;
}
#section-4 .r-flower {
  position: absolute;
  right: 0px;
  top: 15%;

  width: clamp(68px, 12vmin, 136px); /* need to be bigger */
  aspect-ratio: 1 / 1;
}
#section-4 .r-leaf {
  position: absolute;
  right: 0px;
  top: 10%;

  width: clamp(74px, 20vmin, 148px); /* need to be bigger */
  height: auto;
}
#section-4 .l-flower {
  position: absolute;
  left: 0px;
  bottom: 15%;

  width: clamp(68px, 12vmin, 136px); /* need to be bigger */
  aspect-ratio: 1 / 1;
}
#section-4 .l-leaf {
  position: absolute;
  left: 0px;
  bottom: 10%;

  width: clamp(74px, 20vmin, 148px); /* need to be bigger */
  height: auto;
}
#section-4 .black {
  color: #000;
  text-align: center;
  font-family: "Poppins Light";
  font-size: clamp(10px, 3vmin, 20px);
  font-weight: 300;
  letter-spacing: 2px;

  margin-top: clamp(10px, 3vmin, 20px); /* need to be bigger */
}
#section-4 .dot {
  width: clamp(33px, 9vmin, 66px);
  aspect-ratio: 1 / 1;
  background-color: #000;
  border-radius: 100px;

  margin-top: clamp(10px, 5vmin, 40px); /* need to be bigger */
}
#section-4 .dresscode {
  color: #000;
  text-align: center;
  font-family: "Voyager Regular";
  font-size: clamp(27px, 7vmin, 54px);
  font-weight: 400;
  text-transform: capitalize;

  margin-top: clamp(60px, 11vmin, 120px); /* need to be bigger */
}
#section-4 .button {
  background-color: #000;
  color: #fff;
  text-align: center;
  font-family: "Poppins";
  font-size: clamp(12px, 3vmin, 24px);
  font-weight: 500;
  padding: clamp(5px, 2vmin, 10px) clamp(10px, 4vmin, 20px);
  border-radius: 100px;
  text-decoration: none;
  text-transform: uppercase;

  margin-top: clamp(7px, 2vmin, 14px); /* need to be bigger */
}
#section-4 .time {
  color: #000;
  font-family: "Made Voyager Thin";
  font-size: clamp(14px, 4vmin, 28px);
  font-weight: 100;

  margin-top: clamp(13px, 4vmin, 26px);
}
#section-4 .right-box .time {
  text-align: right;
}
#section-4 .address {
  color: #000;
  font-family: "Voyager Regular";
  font-size: clamp(16px, 4vmin, 32px);
  font-weight: 400;
  text-transform: capitalize;

  margin-top: clamp(13px, 4vmin, 26px);
}
#section-4 .right-box .address {
  text-align: right;
}
#section-4 .date {
  color: #000;
  font-family: "Made Voyager Thin";
  font-size: clamp(14px, 4vmin, 28px);
  font-weight: 100;
  text-transform: capitalize;
  text-align: center;

  margin-top: clamp(7px, 2vmin, 14px); /* need to be bigger */
}
#section-4 .right-box .date {
  text-align: right;
}
#section-4 .line {
  margin: 0px;
  padding: 0px;
  width: 100%;
  max-width: 200px;
  border: none;
  border-top: 0.5px solid #000;

  margin-top: clamp(7px, 2vmin, 14px); /* need to be bigger */
}
#section-4 .right-box .line {
  text-align: right;
}
#section-4 .heading {
  color: #000;
  font-family: "Voyager Regular";
  font-size: clamp(27px, 7vmin, 54px);
  font-weight: 400;
  text-align: left;
  text-transform: uppercase;
}
#section-4 .right-box .heading {
  text-align: right;
}
#section-4 .right-box {
  /* contain the center ring image and texts */
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  margin-top: clamp(30px, 8vmin, 60px);
  padding: 0px 10vw;
  width: 100%;
}
#section-4 .left-box {
  /* contain the center ring image and texts */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px 10vw;
  width: 100%;
}
#section-4 .ring {
  /* size */
  width: clamp(125px, 30vmin, 250px); /* need to be bigger */
  aspect-ratio: 1 / 1;

  /* top space */
  margin-top: clamp(7px, 3vmin, 14px); /* need to be bigger */
}
@media (prefers-reduced-motion: no-preference) {
  .animation-ring {
    animation: fade-up-25 2s 1 ease-out;
  }
  .animation-left-box {
    animation: fade-right-25 2.5s 1 ease-out;
  }
  .animation-right-box {
    animation: fade-left-25 2s 1 ease-out;
  }
  .animation-dresscode {
    animation: fade-down-25 2.5s 1 ease-out;
  }
  .animation-dot {
    animation: fade-up-25 2s 1 ease-out;
  }
  .animation-black {
    animation: fade-up-25 2.5s 1 ease-out;
  }
  .animation-r-flower {
    animation: fade-left-25 2s 1 ease-out;
  }
  .animation-r-leaf {
    animation: fade-left-25 2.5s 1 ease-out;
  }
  .animation-l-flower {
    animation: fade-right-25 2s 1 ease-out;
  }
  .animation-l-leaf {
    animation: fade-right-25 2.5s 1 ease-out;
  }
}
#section-4 {
  /* decor anchor */
  position: relative;

  /* full width and take full height */
  width: 100vw;
  min-height: 100vh;

  /* contain the center ring image and texts */
  display: flex;
  flex-direction: column;
  align-items: center;

  /* the content here is too short */
  justify-content: center;
}
@media (prefers-reduced-motion: no-preference) {
  .animation-days-container {
    animation: fade-up-100 3s 1 ease-out;
  }
  .animation-hours-container {
    animation: fade-up-100 4s 1 ease-out;
  }
  .animation-minutes-container {
    animation: fade-up-100 5s 1 ease-out;
  }
  .animation-seconds-container {
    animation: fade-up-100 6s 1 ease-out;
  }
}
#section-3 .countdown-container .item-container .label {
  color: #fff;
  text-align: center;
  font-family: "Louis George Cafe";
  font-size: clamp(7px, 2vmin, 14px);
  font-weight: 400;
  letter-spacing: 0.595px;
  text-transform: uppercase;

  display: block;
}
#section-3 .countdown-container .item-container .number {
  color: #fff;
  text-align: center;
  font-family: "Voyager Regular";
  font-size: clamp(14px, 4vmin, 28px);
  font-weight: 400;
  letter-spacing: 1.19px;

  display: block;
}
#section-3 .countdown-container .item-container {
  /* size */
  flex: 1;
  flex-basis: auto;
  padding: clamp(5px, 1vmin, 10px); /* need to be bigger */

  /* hold the number and label */
  display: flex;
  flex-direction: column;
  align-items: center;
}
#section-3 .countdown-container {
  margin: 0px auto;

  /* hold the countdown item containers */
  display: flex;

  /* wrap */
  flex-wrap: wrap;

  /* shrink and max width limit */
  width: clamp(250px, 70vmin, 700px); /* need to be bigger */
}
#section-3 .sub-heading {
  color: #fff;
  text-align: center;
  font-family: "Poppins Light";
  font-size: clamp(9px, 3vmin, 18px);
  font-weight: 300;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
@media (prefers-reduced-motion: no-preference) {
  .animation-sub-heading-section-3 {
    animation: fade-up-100 2.5s 1 ease-out;
  }
}
#section-3 .heading {
  color: #fff;
  text-align: center;
  font-family: "Voyager Regular";
  font-size: clamp(24px, 6vmin, 48px);
  font-weight: 400;
  letter-spacing: 2.28px;
  text-transform: capitalize;

  margin-top: clamp(11px, 3vmin, 22px);
  margin-bottom: clamp(11px, 3vmin, 22px);
}
@media (prefers-reduced-motion: no-preference) {
  .animation-heading-section-3 {
    animation: fade-up-100 2s 1 ease-out;
  }
}
#section-3 .background {
  /* cover full section 3 */
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;

  /* behind the text */
  z-index: -1;

  /* looks */
  background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(0, 0, 0, 0.7) 100%
    ),
    url(./images/count-down-bg.webp) no-repeat center center scroll;
  background-size: cover;
}
#section-3 .verse-content {
  color: #fff;
  text-align: center;
  font-family: "Poppins Light";
  font-size: clamp(9px, 2vmin, 18px); /* need to be bigger */
  font-style: italic;
  font-weight: 300;

  width: clamp(250px, 70vmin, 700px); /* need to be bigger */
}
@media (prefers-reduced-motion: no-preference) {
  .animation-verse-content {
    animation: fade-up-100 2.5s 1 ease-out;
  }
}
#section-3 .verse-decor {
  height: clamp(5px, 3vmin, 10px);
  width: auto;
  margin: clamp(5px, 3vmin, 10px) auto;
}
@media (prefers-reduced-motion: no-preference) {
  .animation-verse-decor {
    animation: fade-up-100 2s 1 ease-out;
  }
}
#section-3 .verse {
  text-transform: capitalize;
  text-align: center;
  margin-top: clamp(28px, 2.5vmin, 56px); /* need to be bigger */

  color: #fff;
  text-align: center;
  font-family: "Voyager Regular";
  font-size: clamp(12px, 3vmin, 24px);
  font-weight: 400;
}
@media (prefers-reduced-motion: no-preference) {
  .animation-verse {
    animation: fade-up-100 2.5s 1 ease-out;
  }
}
#section-3 {
  /* background anchor */
  position: relative;

  /* full width and take full height */
  width: 100vw;
  /* min-height: 390px; */

  /* contain the center texts and countdown */
  display: flex;
  flex-direction: column;
  align-items: center;

  /* the content here is too short */
  justify-content: center;

  padding-top: clamp(46px, 10vmin, 92px); /* need to be bigger */
  padding-bottom: clamp(46px, 10vmin, 92px); /* need to be bigger */
}

#section-2 .tr-text-container .text.fade {
  color: rgba(0, 0, 0, 0.07);
  text-align: center;
  font-family: "Cute Love";
  font-size: clamp(12px, 3vmin, 24px);
  font-weight: 400;

  transform: rotate(-12deg);
}
#section-2 .tr-text-container .text {
  color: #000;
  text-align: center;
  font-family: "Cute Love";
  font-size: clamp(16px, 4vmin, 32px);
  font-weight: 400;

  transform: rotate(-12deg);
}
#section-2 .tr-text-container {
  position: absolute;
  right: max(-50%, -18vw); /* prevent going to far left */
  top: 40%;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 3vmin, 24px);
}
@media (prefers-reduced-motion: no-preference) {
  .animation-tr-text-container {
    animation: fade-right-100 2.5s 1 ease-out;
  }
}
#section-2 .tl-text-container .text-bottom {
  color: #000;
  font-family: "Poppins Light";
  font-size: clamp(4px, 3vmin, 16px); /* need to be bigger */
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;

  margin-top: clamp(15px, 4vmin, 40px); /* need to be bigger */
}
#section-2 .tl-text-container .line {
  margin: 0px;
  padding: 0px;
  width: 100%;
  max-width: 30px;
  border: none;
  border-top: 0.5px solid #000;

  margin-top: clamp(28px, 2.5vmin, 56px); /* need to be bigger */
}
#section-2 .tl-text-container .text {
  color: #000;
  font-family: "Voyager Regular";
  font-size: clamp(8px, 3.5vmin, 32px); /* need to be bigger */
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.5;
}
#section-2 .tl-text-container {
  position: absolute;
  left: max(-50%, -18vw); /* prevent going to far left */
  top: 30%;

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

  z-index: -2;
}
@media (prefers-reduced-motion: no-preference) {
  .animation-tl-text-container {
    animation: fade-left-100 2s 1 ease-out;
  }
}
#section-2 .tl-text-container .b-butterfly {
  position: absolute;
  left: -10%;
  top: -8%;
  transform: scaleX(-1);

  width: clamp(24px, 2.5vmin, 48px); /* need to be bigger */
}
@media (prefers-reduced-motion: no-preference) {
  .animation-b-butterfly {
    animation: fade-left-100 2.5s 1 ease-out;
  }
}
#section-2 .photo-outer-container {
  /* purpose is anchor for the decors */
  position: relative;
  margin-bottom: clamp(60px, 3vmin, 120px); /* need to be bigger */
}
#section-2 .photo-container {
  /* purpose is to crop the scale anim of the photo */
  overflow: hidden;
}
#section-2 .photo {
  /* for the flower */
  position: relative;

  /* layout */
  margin-top: clamp(31px, 3vmin, 62px); /* need to be bigger */
  width: clamp(170px, 60vmin, 340px); /* need to be bigger */
  aspect-ratio: 0.6895 / 1;
  margin-bottom: clamp(31px, 3vmin, 62px); /* need to be bigger */

  /* looks */
  background: url(./images/main.webp) no-repeat center center scroll;
  background-size: cover;
}
#section-2 .photo-tr-butterfly {
  /* for the flower */
  position: absolute;
  top: 25%;
  right: 7%;

  width: clamp(24px, 8vmin, 48px); /* need to be bigger */
}
#section-2 .photo-lm-flower {
  /* for the flower */
  position: absolute;
  bottom: 15%;
  left: -15%;

  width: clamp(50px, 10vmin, 100px); /* need to be bigger */

  z-index: -1;
}
#section-2 .photo-bl-high-flower {
  /* for the flower */
  position: absolute;
  bottom: 11%;
  left: -5%;

  width: clamp(30px, 3vmin, 60px); /* need to be bigger */
}
#section-2 .photo-bl-flower-mid {
  /* for the flower */
  position: absolute;
  bottom: -5%;
  left: 15%;

  width: clamp(85px, 22vmin, 170px); /* need to be bigger */
}
#section-2 .photo-bl-flower {
  /* for the flower */
  position: absolute;
  bottom: -3%;
  left: -10%;

  width: clamp(90px, 22vmin, 180px); /* need to be bigger */
}
#section-2 .photo-tr-flower {
  /* for the flower */
  position: absolute;
  top: 11%;
  right: 0%;

  width: clamp(77px, 20vmin, 156px); /* need to be bigger */

  z-index: -1;
}
#section-2 .photo-tr-flower-top {
  /* for the flower */
  position: absolute;
  top: 0%;
  right: 10%;

  width: clamp(77px, 20vmin, 156px); /* need to be bigger */
  height: auto;
}
#section-2 .tl-decor-rose {
  position: absolute;
  left: 0px;
  top: 30px;
  width: clamp(53px, 10vmin, 106px); /* need to be bigger */
  height: auto;

  z-index: -1;
}
#section-2 .tl-decor-leaf {
  position: absolute;
  left: 0px;
  top: 0px;
  width: clamp(46px, 10vmin, 92px); /* need to be bigger */
  height: auto;

  z-index: -1;
}
#section-2 .br-decor-rose {
  position: absolute;
  right: 0px;
  bottom: 30px;
  width: clamp(53px, 10vmin, 106px); /* need to be bigger */
  height: auto;

  z-index: -1;
}
#section-2 .br-decor-leaf {
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: clamp(46px, 10vmin, 92px); /* need to be bigger */
  height: auto;

  z-index: -1;
}
@media (prefers-reduced-motion: no-preference) {
  .animation-tl-decor-leaf {
    animation: fade-up-100 2.5s 1 ease-out;
  }
  .animation-tl-decor-rose {
    animation: fade-up-100 2s 1 ease-out;
  }
  .animation-br-decor-leaf {
    animation: fade-up-100 2.5s 1 ease-out;
  }
  .animation-br-decor-rose {
    animation: fade-up-100 2s 1 ease-out;
  }
  .animation-photo-tr-flower-top {
    animation: fade-up-100 2.5s 1 ease-out;
  }
  .animation-photo-tr-flower {
    animation: fade-up-100 2s 1 ease-out;
  }
  .animation-photo-bl-flower {
    animation: fade-up-100 2.5s 1 ease-out;
  }
  .animation-photo-bl-flower-mid {
    animation: fade-up-100 2s 1 ease-out;
  }
  .animation-photo-bl-high-flower {
    animation: fade-up-100 2.5s 1 ease-out;
  }
  .animation-photo-lm-flower {
    animation: fade-up-100 2s 1 ease-out;
  }
  .animation-photo-tr-butterfly {
    animation: fade-up-100 2.5s 1 ease-out;
  }
  .animation-photo {
    animation: scale-2 2s 1 ease-out;
  }
}

#section-2 .heading {
  color: #000;
  text-align: center;
  /* something is wrong with this font, replace it */
  /* font-family: "Vilaka"; */
  font-family: "Times New Roman", Times, serif;
  font-size: clamp(20px, 5vmin, 40px); /* need to be bigger */
  font-size: clamp(0px, 5vmin, 40px); /* need to be bigger */
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;

  margin-bottom: clamp(15px, 4vmin, 30px); /* need to be bigger */

  /* layout */
  line-height: 1.5;
  font-size: clamp(15px, 4vmin, 40px); /* need to be bigger */
  padding: clamp(5px, 1vmin, 10px); /* need to be bigger */
}
@media (prefers-reduced-motion: no-preference) {
  .animation-heading {
    animation: fade-up-25 2s 1 ease-out;
  }
}

#section-2 .top-sub-heading {
  /* looks */
  color: #999;
  text-align: center;
  font-family: "Poppins";
  font-weight: 300;
  letter-spacing: 1.44px;
  text-transform: uppercase;

  /* layout */
  font-size: clamp(10px, 2vmin, 20px); /* need to be bigger */
  font-size: clamp(0px, 2vmin, 20px); /* need to be bigger */
  padding: clamp(5px, 1vmin, 10px); /* need to be bigger */

  /* top space */
  margin-top: clamp(28px, 2.5vmin, 56px); /* need to be bigger */
}

@media (prefers-reduced-motion: no-preference) {
  .animation-top-sub-heading {
    animation: fade-up-50 2.5s 1 ease-out;
  }
}

#section-2 {
  /* for the decorations */
  position: relative;

  /* full width and take full height */
  width: 100vw;
  /* min-height: 100vh; */

  /* contain the center text and logo */
  display: flex;
  flex-direction: column;
  align-items: center;

  /* the content here is too short */
  justify-content: center;
}

#section-1 .prompt {
  /* looks */
  color: #fff;
  text-align: center;
  font-family: "Poppins";
  font-size: clamp(10px, 2vmin, 20px); /* need to be bigger */
  font-weight: 300;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  padding: clamp(5px, 1vmin, 10px); /* need to be bigger */

  /* bottom space */
  margin-bottom: clamp(80px, 6vmin, 140px); /* need to be bigger */
  margin-bottom: clamp(90px, 12vmin, 180px); /* need to be bigger */

  filter: invert();
}
@media (prefers-reduced-motion: no-preference) {
  .animation-prompt {
    animation: fade-down-50 1s 1 ease-out;
  }
}

#section-1 .arrow {
  /* size */
  width: clamp(67px, 12vmin, 134px); /* need to be bigger */
  aspect-ratio: 1 / 1;

  /* layout */
  margin-top: auto;

  filter: invert();
}
@media (prefers-reduced-motion: no-preference) {
  .animation-arrow {
    animation: bounce 2s ease infinite;
  }
}
#section-1 #menu.sticky .link {
  color: #000;
}
#section-1 .link {
  transition: color 0.2s ease-out;

  /* looks */
  font-family: "Made Voyager Thin";
  color: #000;
  text-align: center;
  font-weight: 100;
  text-transform: uppercase;
  text-decoration: none;

  /* size */
  font-size: clamp(10px, 2vmin, 20px); /* need to be bigger */
  flex: 1;
  flex-basis: auto;
  padding: clamp(5px, 1vmin, 10px); /* need to be bigger */
}

@media (prefers-reduced-motion: no-preference) {
  .animation-link-1 {
    animation: fade-left-200 1s 1 ease-out;
  }
  .animation-link-2 {
    animation: fade-left-100 1s 1 ease-out;
  }
  .animation-link-3 {
    animation: fade 1s 1 ease-out;
  }
  .animation-link-4 {
    animation: fade-right-100 1s 1 ease-out;
  }
  .animation-link-5 {
    animation: fade-right-200 1s 1 ease-out;
  }
}

#section-1 #menu {
  width: 100vw;
  transition: background-color 0.2s ease-out;
  /* position: sticky; top: 0; */
}
#section-1 #menu.sticky {
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: rgba(255, 255, 255, 0.9);
  color: #000;
  z-index: 2;
}
#section-1 .menu {
  margin: 0px auto;
  /* hold the links */
  display: flex;

  /* wrap */
  flex-wrap: wrap;

  /* shrink and max width limit */
  width: clamp(250px, 70vmin, 1000px); /* need to be bigger */
}

#section-1 .logo {
  /* size */
  width: clamp(67px, 12vmin, 134px); /* need to be bigger */
  aspect-ratio: 1 / 1;

  /* top space */
  margin-top: clamp(28px, 2.5vmin, 56px); /* need to be bigger */

  filter: invert();
}

@media (prefers-reduced-motion: no-preference) {
  .animation-logo {
    animation: fade-down-100 1s 1 ease-out;
  }
}

#section-1 .hero {
  /* cover full section 1 */
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;

  /* behind the text */
  z-index: -1;

  /* looks */
  background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 50%,
      rgba(255, 255, 255, 1) 100%
    ),
    url(./images/hero.webp) no-repeat center center scroll;
  background-size: cover;
}

#section-1 {
  /* for the hero img */
  position: relative;

  /* full width and take full height */
  width: 100vw;
  height: 100vh;

  /* contain the logo, menu, arrow and prompt */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.whole-site-texture {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -2;

  /* looks */
  background: url(./images/whole_page_texture.webp) no-repeat center bottom
    scroll;
  background-size: cover;
}

body {
  overflow-x: hidden;
  /* for the texture */
  position: relative;
}

/* GLOBAL */
* {
  /* outline: 1px solid red; */
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body.active {
  overflow: hidden;
}

.modal.active {
  display: block;
  display: flex;
}

.modal,
.wish_modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 2; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* no scrolling */
  background: rgba(255, 255, 255, 0.8);
}

.modal #confirm-window.window .tick,
#wish-modal #wish-confirm-window.window .tick {
  width: clamp(30px, 7vmin, 60px); /* need to be bigger */
}

.modal #confirm-window.window .content,
#wish-modal #wish-confirm-window.window .content,
.modal #block-window.window .content {
  color: #696969;
  text-align: center;
  font-family: "Poppins";
  font-size: clamp(12px, 2vmin, 18px);
  font-style: italic;
  font-weight: 300;
}

::placeholder {
  color: #696969;
}

.modal .window .name {
  width: 100%;
  display: block;
  border-radius: 10px;
  border: 1px solid #eaeaea;
  padding: clamp(4px, 1vmin, 8px) clamp(9px, 2vmin, 18px);

  height: clamp(30px, 7vmin, 60px);

  color: #000;
  font-family: "Poppins Light";
  font-size: clamp(10px, 3vmin, 20px);
  font-weight: 300;
}

.modal .window .title {
  color: #000;
  text-align: center;
  font-family: "Voyager";
  font-size: clamp(25px, 7vmin, 50px);
  font-weight: 400;
}

.modal .window,
.wish-modal .window {
  background-color: #fff;
  margin: auto;
  padding: clamp(17px, 5vmin, 40px) clamp(21px, 6vmin, 50px);
  width: clamp(250px, 80vmin, 600px); /* need to be bigger */
  /* aspect-ratio: 1 / 0.8; */

  border-radius: 10px;
  box-shadow: 0px 1px 5px 4px rgba(230, 230, 230, 0.55);

  display: none;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;

  gap: clamp(9px, 3vmin, 30px);
}

.modal .window.active,
.wish-modal .window.active {
  display: flex;
}

.modal .window .rsvp-name {
  display: block;
  width: 100%;
  color: #696969;
  text-align: left;
  font-family: "Poppins";
  font-size: 0.8rem;
  font-weight: 300;

  border-radius: 7.318px;
  border: 1px solid #EAEAEA;
  padding: clamp(4px, 2vmin, 12px) clamp(9px, 3vmin, 24px);
}

.modal .window .submit {
  color: #000;
  text-align: center;
  font-family: "Poppins";
  font-weight: 500;

  border-radius: 200px;
  border: 1px solid #000;
  /* width: 100%; */
  background-color: transparent;

  /* need to be bigger */
  padding: clamp(0px, 5vmin, 5px) clamp(0px, 8vmin, 166px);
  font-size: clamp(12, 1vmin, 36px);
}

.modal .window .pax-container .radio-container .radio-item-container {
  display: flex;
  gap: clamp(6px, 1vmin, 12px); /* need to be bigger */
  margin-top: 0.4em;
}

.modal .window .pax-container .radio-container .radio-item-container.not-going {
  order: 100;
}

.modal .window .pax-container .radio-container.bottom {
  flex-direction: column;
  gap: 0px;
}

.modal .window .pax-container .radio-container {
  flex: 0.6;
  display: flex;
  justify-content: flex-start;
  gap: clamp(12px, 3vmin, 24px);
}

.modal .window .pax-container .radio-container .option-radio {
  display: block;
  color: #000;
  font-family: "Poppins Light";
  font-size: clamp(12px, 3vmin, 18px);
  font-weight: 300;
}

.modal .window .pax-container .label-container .option-label {
  display: block;
  color: #000;
  font-family: "Poppins Light";
  font-size: clamp(12px, 3vmin, 18px);
  font-weight: 300;
}

.modal .window .pax-container .label-container {
  flex: 0.4;
  padding-left: clamp(9px, 2vmin, 18px);
}

.modal .window .pax-container {
  display: flex;
  width: 100%;
}

#close {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  display: block;
  user-select: none;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* FONTS */
@font-face {
  font-family: "Made Voyager Thin";
  src: url("fonts/made_voyager_thin.otf") format("opentype");
}
@font-face {
  font-family: "Voyager Regular";
  src: url("fonts/made_voyager_regular.otf") format("opentype");
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins_medium.ttf") format("opentype");
}
@font-face {
  font-family: "Poppins Light";
  src: url("fonts/poppins_light.ttf") format("opentype");
}
@font-face {
  font-family: "Vilaka";
  src: url("fonts/vilaka.ttf") format("opentype");
}
@font-face {
  font-family: "Cute Love";
  src: url("fonts/cute_love.ttf") format("opentype");
}
@font-face {
  font-family: "Louis George Cafe";
  src: url("fonts/louis_george_cafe.ttf") format("opentype");
}
@font-face {
  font-family: "Best Moments";
  src: url("fonts/best_moment.otf") format("opentype");
}
@font-face {
  font-family: "Poppins Extra Light Italic";
  src: url("fonts/poppins_extra_light_italic.ttf") format("opentype");
}

/* ANIMATIONS */
@keyframes fade-left-200 {
  0% {
    opacity: 0;
    transform: translateX(200%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes fade-left-100 {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes fade-left-25 {
  0% {
    opacity: 0;
    transform: translateX(25%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-right-25 {
  0% {
    opacity: 0;
    transform: translateX(-25%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes fade-right-100 {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes fade-right-200 {
  0% {
    opacity: 0;
    transform: translateX(-200%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes fade-down-100 {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes fade-down-25 {
  0% {
    opacity: 0;
    transform: translateY(-25%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes fade-up-100 {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes fade-up-50 {
  0% {
    opacity: 0;
    transform: translateY(50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes fade-up-25 {
  0% {
    opacity: 0;
    transform: translateY(25%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes scale-2 {
  0% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(25px);
  }
  100% {
    transform: translateY(0);
  }
}
.carousel-container {
  /* button anchor */
  position: relative;
  width: fit-content;

  margin: 0 auto;
}
.carousel {
  overflow: hidden;

  /* https://stackoverflow.com/questions/30574110/how-to-fix-horizontal-scroll-on-ios-mobile */
  /* overflow-x: scroll; Must be 'scroll' not 'auto' */
  -webkit-overflow-scrolling: touch;

  /* hard coded */
  width: 200px;
}
.slide-container {
  display: flex;
}
.slide {
  height: 500px;
  flex: 0 0 100%;
}
.slide.red {
  background-color: #f00;
}
.slide.green {
  background-color: #0f0;
}
.slide.blue {
  background-color: #00f;
}
* {
  /* outline: 1px solid red; */
}
.next-button {
  position: absolute;
  top: 50%;
  right: 0px;

  width: 50px;
  height: 50px;

  transform: translateX(100%) translateY(-50%);

  background: url(./images/right_arrow.webp) no-repeat center center scroll;
  background-size: contain;
  filter: invert();
}
.back-button {
  position: absolute;
  top: 50%;
  left: 0px;

  width: 50px;
  height: 50px;

  transform: translateX(-100%) translateY(-50%);

  background: url(./images/left_arrow.webp) no-repeat center center scroll;
  background-size: contain;
  filter: invert();
}
.indicator-container {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: -3%;
  height: 3rem;
  width: 100%;
  gap: 0.5rem;
}
.audio {
  display: none;
}

footer {
  padding: clamp(6px, 1vmin, 12px); /* need to be bigger */
  background-color: #000;
  color: #fff;
  text-align: center;
  font-family: "Poppins";
  font-size: clamp(9px, 2vmin, 18px);
  font-weight: 300;
  display: flex;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  flex-direction: row-reverse;
}

.easteregg {
  flex: 1;
  padding: 0 5px;
  font-size: 1.45vw;
  align-items: center;
  display: flex;
}

.easteregg span {
  width: 100%;
  text-align: center;
}

/* IOS OVERFLOW FIX */
/* https://stackoverflow.com/questions/3047337/does-overflowhidden-applied-to-body-work-on-iphone-safari */
html,
body {
  position: relative;
  height: 100%;
}

.btn-container {
  margin-top: 0.5em;
  display: flex;
  gap: 5%;
  width: 100%;
  justify-content: center;
  height: 2em;
}

.btn-container input {
  width: 40%;
}

.invert-btn {
  color: #fff !important;
  background-color: #000 !important;
}

.hide {
  display: none !important;
}

.be-yourself {
  color: #000;
  text-align: center;
  font-family: "Poppins";
  font-size: clamp(20px, 5vmin, 30px);
  font-style: normal;
  font-weight: 500;
  line-height: normal;

  margin-top: clamp(10px, 4vmin, 40px); /* need to be bigger */
}