@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");

header {
  background-image: url(../img/servicios-ambientales/mantenimiento-paisajistico/fondo.jpg);
}

.contenedor-enunciado {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.imagen-enunciado {
  position: relative;
  width: 51rem;
}

.imagen-enunciado-2 {
  display: none;
}

.imagen-enunciado-3 {
  display: none;
}

.texto-enunciado {
  position: absolute;
  width: 615px;
  top: 27%;
  font-family: "quicksand";
  font-size: 1.25rem;
  font-weight: bold;
  text-align: center;
  color: #fff;
}

/* Puntos de interrupción */

@media only screen and (max-width: 991px) {
  .imagen-enunciado {
    min-width: 43rem;
  }
  .texto-enunciado {
    width: 517px;
    top: 21%;
  }
}

@media only screen and (max-width: 688px) {
  .imagen-enunciado {
    display: none;
  }
  .imagen-enunciado-2 {
    display: block;
    min-width: 32rem;
  }
  .texto-enunciado {
    width: 414px;
    top: 20%;
  }
}

@media only screen and (max-width: 523px) {
  .imagen-enunciado-2 {
    min-width: 22rem;
  }
  .imagen-enunciado-3 {
    min-width: 22rem;
  }
  .texto-enunciado {
    width: 320px;
    top: 21%;
    line-height: 17px;
    font-size: 1rem;
  }
}

/*
--------------------------/
Contenido
--------------------------/
 */

.c-container {
  max-width: 1300px;
}

.contenedor-item {
  position: relative;
  margin: auto;
}

.item {
  position: relative;
  display: flex;
  width: 540px;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.item > img {
  width: 100%;
}

.titulo-item-1 {
  position: absolute;
  width: 53%;
  top: 3%;
  font-family: "ubuntu";
  font-size: 1.2rem;
  text-align: center;
}

.titulo-item-2 {
  position: absolute;
  width: 53%;
  top: 7%;
  font-family: "ubuntu";
  font-size: 1.2rem;
  text-align: center;
}

.enunciado-item-1 {
  position: absolute;
  width: 77%;
  top: 36%;
  font-family: "quicksand";
  font-size: 1.15rem;
  text-align: center;
  color: #fff;
}

.enunciado-item-2 {
  position: absolute;
  width: 77%;
  top: 28%;
  font-family: "quicksand";
  font-size: 1.15rem;
  text-align: center;
  color: #fff;
}

.linea {
  position: absolute;
  width: 114%;
  left: -13%;
}

.contenedor-fotos {
  position: relative;
  text-align: center;
}

.fotos {
  position: relative;
  margin: auto;
  width: 80%;
  animation: temblor 2s infinite;
}

.linea-2 {
  position: absolute;
  visibility: hidden;
  width: 125%;
  left: -12%;
}

@keyframes temblor {
  0% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(5deg);
  }
  100% {
    transform: rotateZ(0deg);
  }
}

/* Puntos de interrupción */
@media only screen and (max-width: 1152px) {
  .item {
    width: 485px;
  }
  .titulo-item-1 {
    width: 57%;
  }
  .enunciado-item-1 {
    top: 30%;
  }
  .enunciado-item-2 {
    width: 79%;
    top: 24%;
  }
}

@media only screen and (max-width: 991px) {
  .linea-2 {
    visibility: visible;
  }
  .contenedor-item {
    margin-bottom: 25px;
  }
}

@media only screen and (max-width: 530px) {
  .item {
    width: 400px;
  }
  .titulo-item-1,
  .titulo-item-2 {
    font-size: 0.9rem;
  }
  .enunciado-item-1,
  .enunciado-item-2 {
    font-size: 0.9rem;
  }
}

@media only screen and (max-width: 422px) {
  .item {
    width: 334px;
  }
  .titulo-item-1,
  .titulo-item-2 {
    font-size: 0.8rem;
  }
  .enunciado-item-1,
  .enunciado-item-2 {
    font-size: 0.8rem;
    line-height: 17px;
  }
}
