/* for por-que-elegirnos.html */

/* HERO */
.hero-header {
  background-color: white;
  height: clamp(80px, 20vw, 200px);
}

.hero-header .text {
  float: right;
  margin-top: clamp(40px, 10vw, 85px);
  padding-right: 5px;
  width: clamp(120px, 25vw, 350px);
  text-align: center;
}

.hero-header .text h1 {
  margin: 0;
  padding: 0;
  font-size: clamp(14px, 5vw, 70px);
  color: var(--secondary-text-color);
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
}

.hero-header .text .subtitle {
  color: #666;
  margin-top: clamp(-20px, -1.5vw, -5px);
  font-weight: 700;
  font-size: clamp(8px, 1.5vw, 21px);
}

.logo-wrapper img {
  position: absolute;
  width: 50%;
  max-width: 550px;
  left: 50%;
  top: clamp(-270px, -21vw, -100px);
  transform: translateX(-50%);
}

.hero {
  background-color: var(--background-color);
  display: grid;
  padding: clamp(20px, 9vw, 110px) 0px;
  margin-top: clamp(10px, 6.5vw, 70px);
  padding-bottom: 0px;
}

.hero h1 {
  color: var(--hylight-color);
  font-size: clamp(14px, 4vw, 45px);
}

.hero h1 span {
  font-weight: 800;
}

.hero h2 {
  color: var(--hylight-color);
  font-size: clamp(10px, 2vw, 35px);
}

.hero h2 span {
  font-weight: 800;
}

.hero h3 {
  color: var(--base-text-color);
  font-size: clamp(8px, 2.2vw, 30px);
  padding: 0px;
  margin: 0px;
}

.hero span {
  color: var(--hylight-color);
}

.hero.green {
  color: var(--secondary-text-color);
  gap: 0;
  padding-bottom: 0;
}

.hero.green h1 {
  color: var(--secondary-text-color);
}

.hero.green h3 {
  color: var(--secondary-text-color);
}

.hero.green span {
  color: var(--secondary-text-color);
  font-weight: 800;
}

.hero-group {
  display: grid;
  grid-template-columns: 1fr 6fr 1fr;
  column-gap: 0rem;
  text-align: center;
  color: var(--base-text-color);
}

.hero-text {
  text-align: center;
}

.hero.secondary {
  padding: 0;
  margin: 0px;
  background-color: white;
}

.hero.secondary .hero-group img {
  height: clamp(100px, 30vw, 390px);
  width: clamp(50px, 20vw, 300px);
}

.circle-image {
  height: clamp(145px, 30vw, 456px);
  aspect-ratio: 1 / 1;  /* keeps it perfectly round */
  border-radius: 50%;
  overflow: hidden;
  justify-self: center;
}

.circle-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;    /* key part */
}

.side-kick {
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: var(--background-color);
  color: var(--base-text-color);
}

.side-kick h1{
  font-size: clamp(14px, 4vw, 45px);
}

.side-kick h1 span {
  color: var(--hylight-color);
}