:root {
  --secondaryColor: #f3f3f3;
  --primaryColor: #80a165;
}

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

.btn-calender {
  background-color: var(--primaryColor);
  color: white;
  padding: 0.4rem;
}

.btn-calender:hover {
  background-color: white;
  color: var(--primaryColor);
  border: 1px solid var(--primaryColor);
}

/* Invitation */
.invitation {
  min-height: 100vh;
  background-image: url("../image/bg.jpg");
  background-size: cover;
}

.invitation img {
  width: 30%;
}

.invitation h1 {
  font-family: "Style Script";
  color: var(--primaryColor);
  margin-bottom: 2rem;
}

.invitation .content {
  padding-top: 5rem;
}

.invitation .btn-undangan {
  background-color: var(--primaryColor);
  color: white;
  width: 200px;
  height: 50px;
  margin: auto;
  padding-top: 10px;
}

.invitation .btn-undangan:hover {
  background-color: var(--bgInvitation);
  color: var(--primaryColor);
  border: 2px solid var(--primaryColor);
}

/* Undangan */

/* Hero */
.hero {
  min-height: 100vh;
  background-image: url("../image/bg-hero.png");
  background-position: center;
  background-size: cover;
}

.hero .content-hero {
  padding-top: 15rem;
}

.hero h1 {
  font-family: "Style Script";
  font-size: 5rem;
  color: var(--primaryColor);
}

/* Surah */
.surah {
  background-image: url("../image/bg-none.png");
  background-position: center;
  background-size: cover;
}

.surah img {
  width: 60%;
}

/* Mempelai */
.jadwal {
  background-image: url("../image/bg-none.png");
  background-position: center;
  background-size: cover;
  padding-top: 2rem;
}

.jadwal h1,
.acara h1,
.maps h1,
.tamu h1 {
  font-family: "Style Script";
  font-size: 5rem;
  color: var(--primaryColor);
}

.jadwal h3 {
  font-family: "Style Script";
  color: var(--primaryColor);
  font-size: 2rem;
}

.jadwal img {
  width: 70%;
}

.jadwal .foto-mempelai {
  width: 120%;
}

/* Acara */
.acara {
  padding-top: 2rem;
  background-image: url("../image/bg-none.png");
  background-position: center;
  background-size: cover;
}

.acara h4 {
  font-family: "Style Script";
  color: var(--primaryColor);
  font-size: 2.5rem;
}

.acara span {
  color: var(--primaryColor);
}

/* Komen */
.tamu {
  background-image: url("../image/bg.jpg");
  background-position: center;
  background-size: cover;
  min-height: 50vh;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.tamu h5 {
  font-weight: 600;
  color: var(--color-button);
}

.tamu h3,
.gift h3,
.galeri h3 {
  font-family: "Style Script";
  font-size: 3rem;
  color: var(--primaryColor);
}

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

/* Maps */
.maps {
  background-image: url("../image/bg.jpg");
  background-position: center;
  background-size: cover;
  padding-top: 2rem;
}

/* Gift */
.gift {
  background-image: url("../image/bg.jpg");
  background-size: cover;
  background-position: center;
  padding-bottom: 1rem;
  padding-top: 2rem;
}

.gift .hadiah {
  background-color: var(--primaryColor);
  color: #d7e7c9;
  padding: 3rem;
  border-radius: 7px;
}

/* Galeri */
.galeri {
  background-position: center;
  background-size: cover;
  padding-top: 2rem;
  padding-bottom: 2rem;
  background-image: url("../image/bg-none.png");
}

.galeri img {
  width: 100%;
}

/* Thanks */
.thanks {
  background-image: url("../image/bg.jpg");
  background-position: center;
  background-size: cover;
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.thanks h3 {
  font-family: "Style Script";
  color: var(--primaryColor);
  font-size: 3rem;
}

.thanks img {
  width: 60%;
}

.thanks .logo {
  width: 20%;
  padding-top: 5rem;
}

@media (max-width: 1100px) {
  .invitation {
    padding-top: 0;
  }

  .acara h1,
  .jadwal h1,
  .maps h1 {
    font-size: 3rem;
  }
}

@media (max-width: 991px) {
  .invitation img {
    width: 40%;
  }
}

@media (max-width: 768px) {
  .invitation img {
    width: 50%;
  }

  .maps iframe {
    width: 100%;
  }

  .hero h1 {
    font-size: 4rem;
  }

  .galeri .galeri-mempelai img {
    width: 100%;
  }
}

@media (max-width: 375px) {
  .invitation h1 {
    font-size: 2.5rem;
  }

  .invitation img {
    width: 60%;
    padding-bottom: 2rem;
  }
}