/* //////////////////////////////////////////////// */
/* Hero */

.hero {
  position: relative;
  height: 85vh;
  width: 100%;
  overflow: hidden;
  background-color: var(--creme);
}

@media (min-width: 1024px) {
  .hero {
    height: 100vh;
  }
}

/* //////////////////////////////////////////////// */
/* Logos */

.hero-bg-logo {
  position: absolute;
  width: auto;
  pointer-events: none;
}

#hero-bg-logo-1 {
  top: -12rem;
  left: -15rem;
  transform: rotate(135deg);
  height: 30rem;
}

#hero-bg-logo-2 {
  bottom: -6rem;
  right: -8rem;
  transform: rotate(-45deg);
  height: 16rem;
}

@media (min-width: 480px) {
  #hero-bg-logo-1 {
    top: -19rem;
    left: -24rem;
    transform: rotate(135deg);
    height: 50rem;
  }

  #hero-bg-logo-2 {
    bottom: -10rem;
    right: -12rem;
    transform: rotate(-45deg);
    height: 24rem;
  }
}

@media (min-width: 768px) {
  #hero-bg-logo-1 {
    top: -19rem;
    left: -24rem;
    transform: rotate(135deg);
    height: 50rem;
  }

  #hero-bg-logo-2 {
    bottom: -10rem;
    right: -12rem;
    transform: rotate(-45deg);
    height: 24rem;
  }
}

@media (min-width: 1200px) {
  #hero-bg-logo-2 {
    bottom: -14rem;
    right: -17rem;
    transform: rotate(-45deg);
    height: 36rem;
  }
}

@media (min-width: 1700px) {
  #hero-bg-logo-1 {
    top: -26rem;
    left: -33rem;
    transform: rotate(135deg);
    height: 68rem;
  }

  #hero-bg-logo-2 {
    bottom: -17rem;
    right: -21rem;
    transform: rotate(-45deg);
    height: 44rem;
  }
}

/* //////////////////////////////////////////////// */
/* Container */

.hero-content {
  position: absolute;
  bottom: 1.2rem;
  left: 1.2rem;
  right: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

@media (min-width: 480px) {
  .hero-content {
    bottom: 8.6rem;
  }
}

@media (min-width: 768px) {
  .hero-content {
    bottom: 35%;
    left: 50%;
    right: 50%;
    transform: translate(-50%, 50%);
    align-items: center;
    width: 100%;
    text-align: center;
  }
}

@media (min-width: 1024px) {
  .hero-content {
    bottom: 40%;
  }
}

@media (min-width: 1600px) {
  .hero-content {
    bottom: 45%;
  }
}

/* //////////////////////////////////////////////// */
/* Sub Title */

.hero-sub-title {
  font-family: quicksand, sans-serif;
  font-size: 2.4rem;
  font-weight: 400;
  max-width: 53rem;
}

@media (min-width: 1024px) {
  #services-hero-sub-title {
    max-width: 75%;
    margin: auto;
  }

  #about-hero-sub-title {
    max-width: 60rem;
    margin: auto;
  }
}

/* //////////////////////////////////////////////// */
/* Title */

.hero-title {
  font-family: seasons-bold, sans-serif;
  font-size: 8.4rem;
  text-transform: uppercase;
  line-height: 0;
  margin: 5.6rem 0 4.4rem 0;
}

#services-hero-title {
  font-size: 3.6rem;
  text-transform: none;
  line-height: 1.4;
  margin: 0 0 1.8rem 0;
}

#about-hero-title {
  font-size: 3.6rem;
  text-transform: none;
  line-height: 1.4;
  margin: 0 0 1.8rem 0;
}

@media (min-width: 480px) {
  .hero-title {
    font-size: 12.4rem;
    margin: 8rem 0 6rem 0;
  }

  #services-hero-title {
    font-size: 4.8rem;
  }

  #about-hero-title {
    font-size: 4.8rem;
  }
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 16rem;
    margin: 10.4rem 0 8.4rem 0;
  }

  #services-hero-title {
    font-size: 5.6rem;
    max-width: 75%;
    margin: 0 auto 1.8rem auto;
  }

  #about-hero-title {
    font-size: 5.6rem;
    max-width: 75%;
    margin: 0 auto 1.8rem auto;
  }
}

@media (min-width: 1200px) {
  #about-hero-title {
    max-width: 84rem;
  }
}

@media (min-width: 1500px) {
  #services-hero-title {
    max-width: 108rem;
  }
}

/* //////////////////////////////////////////////// */
/* CTA */

#hero-cta {
  margin-top: 5.6rem;
}

@media (min-width: 480px) {
  #hero-cta {
    margin-top: 7.2rem;
  }
}

@media (min-width: 1024px) {
  #hero-cta {
    margin-top: 5.6rem;
  }
}