* {
  font-family: 'Cormorant Garamond';
}

.hero-container {
  position: relative;
  margin-bottom: 1em;
}

.hero-image {
  height: 100vh;
  opacity: 60%;
  width: 100%;
  display: block;
}

.hero-info {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  padding: 2em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}

@media (max-width: 768px) {
  .text-heading {
    font-size: 3em!important;
  }
}

.text-heading {
  font-size: 4em;
  letter-spacing: 0.1em;
  font-weight: bold;
  text-align: center;
}

@media (max-width: 768px) {
  .text-paragraph {
    font-size: 1em!important;
  }
}

.text-paragraph {
  font-size: 1.3em;
  font-style: italic;
  letter-spacing: 0.2em;
  text-align: center;
}

@media (max-width: 768px) {
  .cta {
    font-size: 15px!important;
  }
}

.cta {
  font-size: 25px;
  padding: 15px 17px;
  border-radius: 30px 30px 30px 30px;
  background-color: rgba(234,224,213,0.37);
  border-color: rgba(234,224,213,0.5);
}

.cta:hover {
  color: #ffd700;
  background-color: rgba(234,224,213,0.37);
  border-color: rgba(234,224,213,0.5);
}

.section-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 5em;
  padding-bottom: 5em;
}

.heading-2 {
  font-size: 3em;
  color: white;
}

@media (max-width: 768px) {
  .heading-2 {
    font-size: 2em!important;
    text-align: center;
    margin-bottom: 2rem!important;
  }
}

@media (max-width: 768px) {
  .heading {
    text-align: center;
    font-size: 3em!important;
  }
}

.heading {
  font-size: 5em;
  color: white;
}

@media (max-width: 768px) {
  .paragraph {
    font-size: 1em!important;
    text-align: center;
  }
}

.paragraph {
  font-size: 1.8em;
  color: white;
}

.content-image {
  height: 100%;
  min-height: 80vh;
  max-height: 100vh;
  opacity: 60%;
  width: 100%;
  display: block;
}

@media (max-width: 768px) {
  .content-image {
    height: 50vh;
  }
}

@media (max-width: 768px) {
  .row.reverse {
    flex-direction: column-reverse;
  }
}

@media (max-width: 768px) {
  .content-text {
    padding-bottom: 5em;
  }

  .first-image {
    margin-bottom: 5em;
  }

  .ethos {
    margin-bottom: 2em;
  }
}