* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Nunito", sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  /* In case the bg image doesn't load*/

  background-size: cover;
  background-repeat: no-repeat; /* Responsive */
}

.flex {
  display: flex;
  gap: var(--gap, 5rem); /* Space between items*/
}

/* primary header */

header {
  background-image: url("img/hero.png");
  position: relative;
}
.logo {
  margin-top: 74px;
  margin-left: 78px;
}

.primary-header {
  align-items: center;
  justify-content: space-between;

  height: 100%;
}

.primary-navigation {
  list-style: none;
  margin: 0;
  margin-top: 74px;
  padding-right: 10rem;
  text-align: center;
}

.primary-navigation a {
  text-decoration: none;
  color: white;
  font-family: "Nunito", sans-serif;
  letter-spacing: 0.1em;
  font-size: 13px;
}

/* Hero elements*/
.hero {
  color: white;
  padding-top: 200px;
  padding-bottom: 100px;
  text-align: center;
}

.hero-container {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  font-family: "Nunito", sans-serif;
}

.hero-container h1 {
  font-size: 70px;
}

.hero-container h2 {
  font-size: 50px;
}

.hero-container p {
  word-spacing: 1rem;
  margin-top: 2rem;
}

.hero-container p span {
  color: black;
}

.hero a img {
  margin-top: 162px;
}

.hero img:hover {
  background-image: url("img/boton\ _mouseover.png");
}

.arrow {
  margin-top: 50px;
}

.hero-isotipo {
  position: absolute;
  bottom: 0px;
  right: 253px;
  mix-blend-mode: hard-light;
}
/*nosotros*/

.nosotros {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  text-align: center;
  position: relative;
  background-color: white;
}

.nosotros-titulo {
  margin: 121px 0px 138px 0px;
}

.nosotros-container {
  background-image: url(img/nosotros_section.png);
  background-repeat: no-repeat;
  margin: 0px 416px 90px 416px;
  overflow: hidden;
  background-size: contain;
}

.nosotros-container p {
  color: white;
  margin: 174px 0px 87px 485px;
  font-size: 24px;
  text-align: justify;
  letter-spacing: 0.4px;
}

.nosotros-isotipo {
  mix-blend-mode: hard-light;
  top: 0px;
  right: 253px;
  position: absolute;
}
/* Quienes somos */

.quienes-somos {
  background-color: #f6f6f6;
  border-radius: 0px 299px 0px 0px;
  overflow: hidden;
  position: relative;
}
.quienes-somos-fotos {
  margin: 42px 347px 72px 346px;
}

.quienes-somos-titulo {
  margin: 0px 118px 276px 355px;
  float: left;
}

.quienes-somos p {
  color: #3d2151;
  font-size: 24px;
  letter-spacing: 0.5px;
  margin: 0px 329px 98px 0px;
  text-align: justify;
}

.quienes-somos-isotipo {
  position: absolute;
  bottom: 0px;
  left: 234px;
  mix-blend-mode: hard-light;
}

/* Ofrecemos */

.ofrecemos {
  text-align: center;
  position: relative;
  background-color: white;
}

.ofrecemos p {
  color: #3d2151;
  font-size: 24px;
  margin-bottom: 133px;
  letter-spacing: 0.5px;
  line-height: 36px;
}

.ofrecemos-titulo {
  margin: 122px 0px 42px 0px;
}

.ofrecemos-isotipo {
  position: absolute;
  top: 0px;
  left: 234px;
  mix-blend-mode: hard-light;
}

/*servicios*/

.grid-servicios {
  background-image: url(img/nuestros_servicios_section.png);
  background-repeat: no-repeat;
  background-size: cover;
  /*/background-color: #f6f6f6;
  border-top-left-radius: 117px;
  */
  padding: 287px 300px 30px 300px;
  display: grid;
  grid-template-columns: auto auto;
  text-align: center;
  position: relative;
}

.servicios-isotipo {
  position: absolute;
  right: 101px;
  bottom: 0px;
  mix-blend-mode: hard-light;
}

.box {
  margin: 15px;
}

.box img {
  display: block;
  margin: 0 auto;
  margin-bottom: 65px;
}
.box p {
  font-size: 24px;
  color: #3d2151;
  margin-bottom: 40px;
}

.b2 {
  padding-top: 35px;
}

.b4 {
  padding-top: 23px;
}

/*footer*/

footer {
  font-size: 14px;
  font-weight: 400;
  position: relative;
}
.brand {
  background-color: #3d2151;
  display: flex;
  color: white;
}

.footer-logo {
  margin: 53px 140px 51px 122px;
  width: 241px;
  height: 69px;
}

.social-wrapper {
  margin-top: 72px;
}

.social-wrapper img {
  margin-right: 42px;
}

.brand p {
  margin-left: 171px;
  margin-top: 83px;
}

.legal {
  background-color: #180027;
  color: white;
  text-align: center;
  padding: 21px 0 21px 0;
}

.footer-isotipo {
  position: absolute;
  mix-blend-mode: hard-light;
  top: 0px;
  right: 101px;
}