.menu {
  background-color: var(--dark);
}

section .container {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

/*
=============================================================
== SECTION ABOUT US =========================================
=============================================================
*/
.sobrenosotros {
  margin-top: 6.4rem;
  background-color: color-mix(in oklab, var(--primary) 5%, transparent);
}

.sobrenosotros .section-head {
  text-align: left;
}

.sobrenosotros .box {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  align-items: start;

  @media (min-width: 1023px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }
}

.sobrenosotros .image {
  height: 42rem;
  overflow: hidden;
}

.sobrenosotros .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sobrenosotros .section-head .h2 {
  margin-bottom: 2rem;
  font-size: 4rem;
}

.sobrenosotros p {
  line-height: 2.6rem;
  margin-bottom: 1.6rem;
}

/*
=============================================================
== SECTION VALUES ===========================================
=============================================================
*/
.values {
  background-color: color-mix(in oklab, var(--primary) 10%, transparent);
}

.values .box {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 3rem;

  @media (min-width: 640px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (min-width: 1023px) {
    grid-template-columns: repeat(4, 1fr);
  }
}

.values .card {
  background-color: var(--light);
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  box-shadow: 0rem 0.4rem 0.4rem rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s ease-in-out;
}

.values .card:hover {
  box-shadow: 0rem 0.7rem 1.2rem rgba(0, 0, 0, 0.1);
}

.values .card-icon {
  width: 5.6rem;
  height: 5.6rem;
  margin-bottom: 1rem;
  background-color: color-mix(in oklab, var(--primary) 5%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s ease-in-out;
}

.values .card:hover .card-icon {
  background-color: var(--primary);
}

.values .card-icon .icon {
  width: 2.8rem;
  height: 2.8rem;
  color: var(--primary);
  transition: 0.2s ease-in-out;
}

.values .card:hover .card-icon .icon {
  color: var(--light);
}

.values .card-head {
  font-size: 1.6rem;
  font-weight: 700;
}

.values .card-description {
  font-size: 1.2rem;
  opacity: 0.7;
}

/*
=============================================================
== SECTION OUR TEAM =========================================
=============================================================
*/
.ourteam {
  background-color: color-mix(in oklab, var(--primary) 5%, transparent);
}

.ourteam .box {
  margin-bottom: 4rem;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 3rem;

  @media (min-width: 640px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (min-width: 1023px) {
    grid-template-columns: repeat(4, 1fr);
  }
}

.ourteam .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ourteam .card-image {
  width: 20rem;
  height: 20rem;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ourteam .card .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease-in-out;
}

.ourteam .card:hover .card-image img {
  transform: scale(1.05);
}

.ourteam .card-head {
  margin-bottom: 0.4rem;
  font-size: 1.4rem;
  font-weight: 700;
}

.ourteam .card-subhead {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  color: var(--primary);
}

.ourteam .card-description {
  font-size: 1.4rem;
  opacity: 0.7;
}

/*
=============================================================
== SECTION DETAILS ==========================================
=============================================================
*/
.details {
  background-color: var(--primary);
}

.details .box {
  padding: 2rem 0;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 3rem;

  @media (min-width: 640px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (min-width: 1023px) {
    grid-template-columns: repeat(4, 1fr);
  }
}

.details .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--light);
}

.details .card-head {
  font-size: 4rem;
  font-weight: 700;
  font-family: var(--ff-primary);
}

.details .card-description {
  opacity: 0.8;
}