main {
  background-image: url("https://luquecomercializadora.com/home/public/media/banners/local.jpg") !important;
}

h2,
.btn--home {
  font-family: var(--font-family-title);
  text-shadow: 2px 2px 10px black;
  letter-spacing: -1px;
  font-style: italic;
  color: var(--color-brand);

  font-size: 4.5rem;
  font-weight: 600 !important;
}

p {
  font-size: 1.5rem;
  font-weight: 300;
}

.about__hero {
  .action-wrapper--wrap {
    align-items: start;
    justify-content: start;
  }

  h2,
  .btn--home {
    font-family: var(--font-family-title);
    text-shadow: 2px 2px 10px black;
    letter-spacing: -1px;
    font-style: italic;
    color: var(--color-brand);

    font-size: 4.5rem;
    font-weight: 600 !important;
  }

  p {
    font-size: 1.5rem;
    font-weight: 300;
  }

  .btn--home {
    border-radius: 0px !important;
    width: fit-content !important;
    font-size: 1.5rem;
    color: var(--color-brand-sec);
    border: 1px solid #8a8700 !important;
    background-color: rgba(44, 44, 44, 0.193) !important;
  }
}
@media (max-width: 598px) {
  .about__hero .hero__content {
    padding: 25px !important;
  }
  .hero__content {
    text-align: start;
    align-items: start !important;
    justify-content: center !important;

    h2 {
      font-size: 2.1rem !important;
    }
  }
}

@media (max-width: 930px) {
  .about__hero {
    .action-wrapper--wrap {
      align-items: start;
      justify-content: start;
    }

    .action-wrapper--wrap {
      align-items: start;
      justify-content: start;

      .btn--home {
        font-size: 0.9rem;
      }
    }

    h2 {
      font-size: 2.5rem;
      font-weight: 600 !important;
    }

    p {
      font-size: 1rem;
      font-weight: 300;
    }
  }
  .hero__content {
    align-items: center !important;
    padding: 50px !important;
    justify-content: center !important;
  }
}

.hero__content {
  align-items: start !important;
  padding: 0 100px;
  /* justify-content: start !important; */
}

.home {
  height: 100%;

  .home__hero,
  .home__info {
    height: calc(100vh - var(--header-height));
    width: 100%;
    align-items: start;
    justify-content: center;
    color: #ddd;

    @media (max-width: 1000px) {
      height: min-content;
    }

    @media (max-width: 600px) {
      height: 1000px;
    }
    img-text {
      backdrop-filter: blur(5px);
    }

    .hero__body {
      align-items: start;
      justify-content: center;
      width: 100%;
      height: 100%;
      backdrop-filter: blur(4px);
      backdrop-filter: brightness(40%);

      .body__content {
        padding: 100px;
        gap: 25px;

        h1 {
          font-size: 4.5rem;
          font-weight: 600;
        }

        p {
          font-size: 1.5rem;
          font-weight: 300;
        }

        .btn {
          border-radius: 0px;
          width: fit-content;
          border: 1px solid black;
          background-color: rgba(44, 44, 44, 0.452);
        }
      }
    }
  }

  .home__about {
    padding: 100px;
    background-color: #ddd;

    .about__img {
      height: 300px;
      width: 100%;
      border-bottom: 8px double var(--color-brand-sec);
    }

    .about__info {
      padding: 50px 0;
      color: #333;
      gap: 25px;

      h2 {
        font-weight: 700;
        font-size: 3rem;
        text-shadow: 2px 2px 5px var(--color-brand-thi);
      }

      h3 {
        font-weight: 400;
        font-size: 1.8rem;
      }

      .info__card-wrap {
        display: flex;
        justify-content: space-between;
      }

      .info__card {
        gap: 10px;
        width: 300px;
      }
    }
  }

  .home__info {
    border-top: 25px double var(--color-brand-thi);
    border-bottom: 25px double var(--color-brand-thi);
    img {
      backdrop-filter: brightness(50%);
    }
    .body__content {
      height: 100%;

      h2 {
        font-size: 2.3rem !important;
        font-weight: 700;
      }

      .info__wrap {
        width: 100%;
        height: min-content;
        align-items: start;
        justify-content: center;
        flex-wrap: wrap;

        .info__card {
          width: 50%;
          padding: 25px 0;
          gap: 20px;
          display: flex;
          flex-direction: column;

          h4 {
            font-size: 1.7rem;
            font-weight: 500;
          }

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

.contact {
  height: calc(100vh);
  width: 100%;
  align-items: center;
  justify-content: center;

  .contact__wrapper {
    width: clamp(350px, 70vw, 800px);

    .wrapper__side {
      flex: 1 1;
      padding: 25px;

      h2,
      h1 {
        color: #ddd;
        font-weight: 400;
      }

      h3,
      p {
        color: #bbb;
        font-size: 0.8rem;
        letter-spacing: 0.5px;
      }
    }

    .wrapper__side .component__form {
      background: none;
      flex: 1;
      border: none;
      box-shadow: none;
      height: 100%;

      h3,
      h2,
      h1 {
        font-weight: 400;
      }
    }

    .wrapper__side.form__content-wrapper {
      background-color: #3333336e;

      text-shadow: 0px 0px 1.1px aliceblue;
      backdrop-filter: blur(10px);
      text-shadow: 0px 0px 1.1px aliceblue;
      border-top: 25px solid #333;
      border-right: 25px solid #222;
      border-left: 25px solid #222;
    }

    .wrapper__side.find-us {
      justify-content: space-between;
      width: 100%;
      height: 100%;
      background-color: #333;

      .find-us__data {
        display: flex;
        flex-direction: column;
        padding: 10px 0;

        h2 {
          font-size: 2.3rem;
          font-weight: 500;
          text-align: center;
        }

        h3 {
          font-size: 1.5rem;
        }

        a {
          color: #ddd;
        }
      }
    }
  }
}

@media (max-width: 818px) {
  .contact {
    height: fit-content;
    padding: 50px 0;

    .contact__wrapper {
      flex-direction: column !important;
    }
  }
}

@media (max-width: 700px) {
  .hero__body {
    .body__content {
      padding: 50px !important;
      h1 {
        font-size: 3rem !important;
      }

      p {
        font-size: 1rem !important;
      }

      .btn {
      }
    }
  }

  .home {
    & .home__about {
      padding: 25px !important;
    }

    & .info__card {
      gap: 25px !important;
      padding: 0 0 25px 0 !important;
    }
  }

  .home__info {
    .body__content {
      height: 100%;

      h2 {
        font-size: 2.2rem !important;
        font-weight: 700;
      }

      .info__wrap {
        width: 100%;

        .info__card {
          width: 100% !important;
          padding: 25px 0;
          gap: 20px;

          h4 {
            font-size: 1.7rem;
            font-weight: 300;
          }

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

@media (max-width: 440px) {
  .hero__body {
    .body__content {
      padding: 50px !important;
      h2 {
        font-size: 3rem !important;
      }

      p {
        font-size: 1rem !important;
      }

      .btn {
      }
    }
  }

  .home {
    & .home__about {
      padding: 20px !important;
    }

    & .info__card {
      gap: 25px !important;
      padding: 0 0 25px 0 !important;
    }
  }
}