@import url("general.css");
img {
  max-width: 100%;
}
/* Banner */
.home-banner {
  background-image: url(../img/home/banner-home-2.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 1000px;
  background-position: bottom;
}

.home-banner h1 {
  color: var(--color-blanco);
  padding-top: 250px;
}

.home-banner h3 {
  color: var(--color-blanco);
}

/* Skills */
.home-skills h5 {
  color: var(--color-verde);
  padding: 20px 0px 0px 0px;
}

.home-skills h3 {
  color: var(--color-verde-fuerte);
}

.home-skills .brocoli {
  position: absolute;
  z-index: 1;
  margin-top: -315px !important;
  left: -72px;
  width: 390px;
}

.home-skills .rabanos {
  position: absolute;
  z-index: 1;
  margin-top: -450px !important;
  right: -80px;
  width: 850px;
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
  .home-skills .brocoli {
    position: absolute;
    z-index: 1;
    margin-top: -315px !important;
    left: -72px;
    width: 290px;
  }

  .home-skills .rabanos {
    position: absolute;
    z-index: 1;
    margin-top: -450px !important;
    right: -80px;
    width: 550px;
  }
}

@media (max-width: 767.98px) {
  .home-banner {
    background-position: bottom;
  }
  .home-skills .rabanos {
    display: none;
  }
}

/* Empresa */
.empresa {
  background-image: url(../img/home/nuestra-empresa.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 1100px;
  background-position: center;
}

.empresa h2 {
  color: var(--color-blanco);
  padding-top: 350px;
}

.empresa .text_1 {
  color: var(--color-blanco);
  padding-top: 30px;
}

.empresa .text_2 {
  color: var(--color-blanco);
  padding-top: 550px;
}

.empresa .zanahorias {
  position: absolute;
  z-index: 1;
  margin-top: -100px;
  left: -80px;
}

.empresa .cebolla {
  position: absolute;
  z-index: 1;
  margin-top: 100px;
  right: -40px;
  width: 300px;
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
  .empresa {
    height: 800px;
  }

  .empresa h2 {
    padding-top: 230px;
  }

  .empresa .text_2 {
    padding-top: 373px;
  }

  .empresa .cebolla {
    width: 200px;
  }

  .empresa .zanahorias {
    width: 400px;
  }
}

@media (max-width: 767.98px) {
  .empresa {
    height: 850px;
  }
  .empresa .cebolla {
    width: 185px;
    margin-top: 30px;
    right: 0px;
  }
  .empresa .zanahorias {
    display: none !important;
  }
  .empresa .text_2 {
    padding-top: 0px;
  }
}

/* Datos variedad de productos */
.datos span {
  color: var(--color-naranja) !important;
  font-family: "Poppins-SemiBold" !important;
  font-size: 100px !important;
  position: relative !important;
  display: block ruby !important;
}

.datos .__js_number {
  color: var(--color-naranja) !important;
  font-family: "Poppins-SemiBold" !important;
  font-size: 150px !important;
}

.datos .statistics__item-value {
  position: relative;
}

.datos h1 {
  color: var(--color-verde);
  font-size: 50px !important;
}

.datos .plato-comida {
  position: absolute;
  right: -70px;
  margin-top: -230px;
  max-width: 90%;
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
  .datos .__js_number {
    font-size: 120px !important;
  }

  .datos h1 {
    font-size: 37px !important;
  }
}

@media (max-width: 767.98px) {
  .datos .plato-comida {
    position: relative;
    right: 0px;
    margin-top: 0px;
    max-width: 100%;
  }
}

/* Pie de página */
.pie-home {
  background-image: url(../img/home/footer.png);
  margin-top: -50px;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 900px;
  background-position: top;
}

.pie-home h1,
.pie-home h2 {
  color: var(--color-blanco);
}

.pie-home .letrawill {
  padding-top: 260px;
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
  .pie-home {
    height: 880px;
  }
}

/* Redes*/
.redes {
  text-align: center;
  padding-top: 200px;
}

.iconos {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 75px;
  cursor: pointer;
}

.icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  background-color: var(--color-naranja);
  border-radius: 90%;
  transition: 1s;
}

.icono:hover {
  background-color: var(--color-verde);
}

.icono svg {
  fill: #fff;
  width: 20px;
  height: 20px;
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
  .redes {
    text-align: center;
    height: 340px;
  }
}