html {
  margin: 0;
}

html,
body {
  margin: 0;
  padding: 0;
}

p {
  margin: 0 3vw;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  line-height: 2em;
  color: #0c1e36;
}

h1 {
  margin: 0 3vw;
  font-family: "Kalam", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 2em;
  margin: 5vh 2vw;
  text-align: center;
  color: #0c1e36;
}

h2 {
  margin: 0 3vw;
  font-family: "Kalam", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 2em;
  margin: 5vh 2vw 2.5vh 2vw;
  text-align: center;
  color: #0c1e36;
}

h3 {
  margin: 0 3vw;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  color: #0c1e36;
  font-size: 1.25em;
  line-height: 2em;
}

.menu {
  display: flex;
  height: 5vh;
  align-items: center;
  position: sticky;
  top: 0;
  background-color: rgb(244, 241, 236);
  z-index: 1;
}

.menu_container {
  display: flex;
  flex-direction: row;
  justify-content: space-between; /* Space between the elements */
  align-items: center;
  margin: 0 3vw;
  width: 100%; /* Make sure it uses the full height of .menu */
  height: 100%;
}

.menu_container img {
  height: 50%; /* Control the size of the logo */
}

.menu_container h1 {
  font-family: "Kalam", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 1em;
  margin: 0;
  text-align: center; /* Center the h1 text within its space */
}

.menu_container h1:nth-of-type(2) {
  text-align: right; /* Align the email to the right */
}

.menu_container A {
  text-decoration: none;
  font-family: "Kalam", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 1em;
  color: black;
}

.landing_page {
  margin: -5vh 0 0 0;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.landing_page img {
  width: 100%;
  display: block;
}

.landing_page_text {
  position: absolute; /* Absolute positioning to place it on top of the image */
  top: 0; /* Start at the top of the container */
  left: 0;
  right: 0; /* Make it span the full width */
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center content vertically */
  align-items: center; /* Center content horizontally */
  z-index: 2; /* Higher than the image */
}

.landing_page_text h1 {
  font-family: "Kalam", cursive;
  font-weight: 400;
  font-style: normal;
  padding: 1vh;
  margin: 0 2vw;
  font-size: 2em;
  background-color: rgba(14, 36, 68, 0.5);
  color: white; /* Ensure text is visible on the image */
}

.title {
  display: flex;
  flex-direction: row;
  gap: 1.5vw;
  height: 10%;
  justify-content: center; /* Center content vertically */
  align-items: center;
}

.title img {
  height: 100%;
  width: auto;
  margin-top: -15vh;
}

.landing_page h1 {
  align-self: center;
}

.intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgb(244, 241, 236);
  padding: 10vh 0 10vh 0;
}

.intro h3 {
  margin: 0vh 3vw;
}

.intro h2 {
  margin: 5vh 1vw 0 1vw;
}

.step1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgb(253, 253, 252);
  padding: 10vh 0 5vh 0;
}

.image_container1 {
  display: flex;
  width: 94%;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 5vh 0;
}

.image_container1 img {
  height: 50vh;
  min-width: 20%;
  padding-bottom: 5vw;
}

.step2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgb(244, 241, 236);
  padding: 10vh 0 15vh 0;
}

.step3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgb(253, 253, 252);
  padding: 10vh 0 15vh 0;
}

.step4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgb(244, 241, 236);
  padding: 10vh 0 15vh 0;
}

.voila {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgb(253, 253, 252);
  padding: 10vh 0 10vh 0;
}

.voila img {
  width: 100%;
  padding: 10vh 0;
}

.footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(253, 253, 252);
  padding: 0 0 10vh 0;
}

@media (max-width: 500px) {
  .image_container1 {
    flex-direction: column;
  }

  .image_container1 img {
    height: auto;
    width: 100%;
    padding-bottom: 5vw;
  }

  .title img {
    display: none;
  }
}