:root {
  --Blue: #2e5073;
}

* {
  font-family: "Poppins", sans-serif;
}

.btn-primary {
  background-color: var(--Blue);
  border: none;
}

/* Invitation */
.undangan {
  min-height: 100vh;
  background-image: url("../image/bg-undangan.jpg");
  background-size: cover;
  padding-top: 5rem;
}

.undangan h1 {
  font-family: "Style Script";
  font-size: 4rem;
  color: var(--Blue);
}

/* Undangan */

.hero {
  min-height: 100vh;
  background-image: url("../image/bg-gradient.jpg");
  background-size: cover;
  padding-top: 7rem;
}

.hero h1,
.acara h1,
.galery h1,
.tamu h1,
.penutup h1,
.thanks h1 {
  font-family: "Style Script";
  font-size: 4rem;
  color: var(--Blue);
}

/* Acara */
.acara {
  min-height: 100vh;
  background-image: url("../image/bg-gradient-Down.png");
  background-size: cover;
  padding-top: 5rem;
}

/* Galeri */
.galery {
  min-height: 100vh;
  background-image: url("../image/bg-gradient.jpg");
  background-size: cover;
  padding-top: 5rem;
}

.galery img {
  width: 18rem;
}

.galery .galeri-mempelai {
  display: flex;
  justify-content: center;
}

/* Tamu */
.tamu {
  min-height: 100vh;
  background-image: url("../image/bg-gradient-Down.png");
  background-size: cover;
  padding-top: 5rem;
}

.tamu .wrapper {
  height: 50vh;
  overflow: auto;
}

.penutup {
  min-height: 100vh;
  background-image: url("../image/bg-gradient.jpg");
  background-size: cover;
  padding-top: 10rem;
  padding-bottom: 10rem;
}

.penutup img {
  width: 20rem;
}

.penutup h3 {
  font-weight: 400;
}

/* Thanks */
.thanks {
  min-height: 100vh;
  background-image: url("../image/bg-undangan.jpg");
  background-size: cover;
  padding-top: 10rem;
  padding-bottom: 10rem;
}

.thanks .footer img {
  width: 20rem;
}

/* Responsve */
@media (max-width: 1100px) {
  .simply-countdown > .simply-section {
    padding: 35px;
  }
}

@media (max-width: 425px) {
  .hero img {
    width: 100%;
  }

  .hero h1,
  .acara h1,
  .tamu h1,
  .galery h1,
  .penutup h1 {
    font-size: 2.6rem;
  }

  .acara h4,
  .penutup h4 {
    font-size: 1rem;
    padding-bottom: 2rem;
  }

  .simply-countdown > .simply-section .simply-amount {
    font-size: 0.8rem;
  }

  .simply-countdown > .simply-section {
    padding: 25px;
    width: 20px;
    height: 20px;
    margin: 5px;
    font-size: 1rem;
  }
}

@media (max-width: 320px) {
  .galery img,
  .tamu img,
  .penutup img {
    width: 100%;
  }
}