@font-face {
      font-family: "Oswald";
      src: url("../fonts/Aku&Kamu.otf");
  }

  /* CIEEELOOOOO */
  .contenedor {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 2;

  }

  .imagen,
  .imagen2 {
      position: absolute;
      width: 900px;


  }

  .imagen {
      animation: moverDerechaIzquierda 90s linear infinite;
      top: 0;
      /* Ajusta la posición vertical de la imagen si es necesario */
  }

  .imagen2 {
      animation: moverIzquierdaDerecha 80s linear infinite;
      top: 50px;
      /* Ajusta la posición vertical de la imagen si es necesario */
  }

  @keyframes moverDerechaIzquierda {
      0% {
          right: -100px;
          /* Comienza fuera de la pantalla a la derecha */
      }

      100% {
          right: 100%;
          /* Termina fuera de la pantalla a la izquierda */
      }
  }

  @keyframes moverIzquierdaDerecha {
      0% {
          left: -100px;
          /* Comienza fuera de la pantalla a la izquierda */
      }

      100% {
          left: 100%;
          /* Termina fuera de la pantalla a la derecha */
      }
  }

  /* HOJAS de menta */
  .mint-leaf {
      position: absolute;
      will-change: transform;
      z-index: 1;
      /* Por defecto detrás de la mujer */
  }

  .leaf1 {
      top: 10%;
      left: 23%;
      width: 10%;
      z-index: 0;
  }

  .leaf2 {
      top: 3%;
      left: 60%;
      width: 10%;
  }

  .leaf3 {
      top: 60%;
      left: 10%;
      z-index: 11;
      width: 6%;
      /* Delante de la mujer */
  }

  .leaf4 {
      top: 80%;
      left: 65%;
      z-index: 11;
      width: 30%;
      /* Delante de la mujer */
  }

  /* FADE DE IMAGENES frascos header */
  .rotating-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      opacity: 0;
      transition: opacity 1s ease-in-out;
      z-index: 1;
  }

  .rotating-image.active {
      opacity: 1;
      z-index: 2;
  }


  #frascos {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
  }

  /* FADE DE IMAGENES jardin */
  .fade-image {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      transition: opacity 1s ease-in-out;
  }

  .fade-image.active {
      opacity: 1;
  }

  /* FADE DE IMAGENES frascos que es */

  .fade-image-2 {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      transition: opacity 1s ease-in-out;
  }

  .fade-image-2.active {
      opacity: 1;
  }