body {
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  background-color: #fafafaff;
  color: #0a0c10;
  margin: 0px;
  padding: 0px;
}

a:link {
  color: #185967;
}

.container {
  margin: 0 auto;
  text-align: center;
}

header {
  margin: 0 auto;
  text-align: center;
}

.brand img {
  margin-top: 60px;
  height: 172px;
}

.hero {
  background-image: url("../img/decoration_first_slide_mobile.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  padding-top: 103px;
  padding-bottom: 30px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 60px;
}

.hero h2 {
  margin: 0 auto;
  text-align: center;
  font-size: 32px;
  margin-bottom: 44px;
}

.hero p {
  margin: 0 auto;
  text-align: center;
  font-size: 1rem;
  width: 350px;
  height: 58px;
  margin-bottom: 30px;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card__left {
  background-image: url("../img/decoration_starts_curves_mobile.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.card__left h2 {
  text-transform: uppercase;
  font-size: 28px;
}

.card__right {
  padding: 0px 15px;
}

.window-border {
  text-align: center;
  background-image: url("../img/decoration_window.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.window-border img {
  width: 350px;
  padding: 60.74px 19.16px 71.63px 16.14px;
}

.card__contact {
  margin: 0 auto 60px auto;
  text-align: center;
}

.card__contact h2 {
  margin-top: 57px;
  margin-bottom: 38px;
  font-size: 40px;
  text-transform: uppercase;
}

.card__contact p {
  font-size: 1rem;
}

footer p {
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: center;
}

/* MEDIA QUERY*/

@media screen and (min-width: 43rem) {
  .hero {
    width: 736px;
    background-image: url("../img/decoration_first_slide_table.webp");
  }
  .card {
    flex-direction: row;
  }
  .card__left {
    background-image: url("../img/decoration_starts_curves.svg");
    display: flex;
    align-items: center;
    justify-items: center;
  }
  .card__right {
    width: 675px;
  }
  .card__contact {
    margin: 87.81px auto 90px auto;
    width: 443px;
  }
}

@media screen and (orientation: landscape) {
  .card__left h2 {
    width: 444px;
    font-size: 30px;
  }
}

@media screen and (min-width: 43rem) and (orientation: landscape) {
}

@media screen and (min-width: 62rem) {
  .hero {
    margin-bottom: 160px;
  }
  .window-border img {
    padding: 60.74px 19.16px 71.63px 16.14px;
  }
  .card {
    padding: 70px 67px;
    height: 620px;
    gap: 55px;
  }
  .card__left {
    height: 547px;
  }
  .card__contact {
    margin: 87.81px auto 304px auto;
  }
}
@media screen and (min-width: 62rem) and (orientation: landscape) {
}
@media screen and (min-width: 82rem) {
  .hero {
    width: 903px;
    background-image: url("../img/decoration_first_slide.webp");
  }
  .hero h2 {
    width: 736px;
    font-size: 58px;
  }
  .hero p {
    width: 493px;
  }
  .card__left h2 {
    width: 444px;
    height: 225px;
    font-size: 40px;
    margin: 0px 55px 0px 48px;
  }
}
@media screen and (min-width: 82rem) and (orientation: landscape) {
}