@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");

.about {
  position: relative;
  background: #ffffff;
  /* background: #d69c37; */
  /* background: radial-gradient(at center bottom, #d69c37, #ffffff); */
  /* padding: 5em 10%; */
  display: flex;
  justify-content: center;
  height: auto;
}

.about-content {
  display: flex;
  align-items: center;
  gap: 5%;
  width: 100%;
  padding: 5em 10%;
  padding-bottom: 1%;
}

.about-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background: url(../images/bg_movil_about.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top; */
}

.about-content .first-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.first-content h1 {
  font-family: "Great Vibes", cursive;
  font-size: clamp(2.5rem, 0.858rem + 2.591vw, 3.125rem);
  font-weight: 500;
  text-align: center;
}

.about-content .paragh {
  text-align: center;
  padding-top: 3em;
  font-size: clamp(1.125rem, 0.03rem + 1.724vw, 1.75rem);
  font-weight: 300;
}

.about-content img {
  position: relative;
  z-index: 999;
  width: 32vw;
}

.desktop {
  width: 70%;
}

.desktop p {
  padding: 5%;
  text-align: center;
  font-family: "Great Vibes", cursive;
  font-size: clamp(1.875rem, 0.342rem + 2.414vw, 2.75rem);
  font-weight: 500;
}

.bg-about {
  position: absolute;
  bottom: -7px;
  width: 100%;
}

.bg-about img {
  width: 100%;
  object-fit: cover;
  object-position: right;
}

.bg-about p {
  position: absolute;
  bottom: 15%;
  color: #000000;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-family: "Great Vibes", cursive;
  font-size: 2.5em;
  font-weight: 500;
}