.container-svg {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      position: relative;
    }
    .login-box{
      width: 300px;
    }
    @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

svg {
	font-family: "Poppins", sans-serif !important;
	width: 100%; height: 100%;
}
svg text {
	animation: stroke .8s linear alternate;
	stroke-width: 2;
  fill: #3E3B87;
	stroke: #3E3B87;
	font-size: 60px;
}
@keyframes stroke {
	0%   {
		fill: rgba(10,8,58,0); stroke: rgba(62,59,135,1);
		stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 2;
	}
	70%  {fill: rgba(10,8,58,0); stroke: rgba(62,59,135,1); }
	80%  {fill: rgba(10,8,58,0); stroke: rgba(62,59,135,1); stroke-width: 3; }
	100% {
		fill: rgba(10,8,58,1); stroke: rgba(62,59,135,0);
		stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;
	}
}

.wrapper {background-color: transparent};

    /* Estilo das imagens aleatórias */
    .background-image {
      position: absolute;
      opacity: 0.6;
      transition: all 0.3s ease-in-out;
      width: auto;
      height: auto;
    }

    /* Animações personalizadas para cada imagem */
    @keyframes moveImage1 {
      0% {
        transform: translateX(0) translateY(0);
      }
      50% {
        transform: translateX(30px) translateY(40px);
      }
      100% {
        transform: translateX(0) translateY(0);
      }
    }

    @keyframes moveImage2 {
      0% {
        transform: translateX(0) translateY(0);
      }
      50% {
        transform: translateX(-50px) translateY(20px);
      }
      100% {
        transform: translateX(0) translateY(0);
      }
    }

    @keyframes moveImage3 {
      0% {
        transform: translateX(0) translateY(0);
      }
      50% {
        transform: translateX(50px) translateY(-40px);
      }
      100% {
        transform: translateX(0) translateY(0);
      }
    }

    @keyframes moveImage4 {
      0% {
        transform: translateX(0) translateY(0);
      }
      50% {
        transform: translateX(20px) translateY(50px);
      }
      100% {
        transform: translateX(0) translateY(0);
      }
    }

    @keyframes moveImage5 {
      0% {
        transform: translateX(0) translateY(0);
      }
      50% {
        transform: translateX(-30px) translateY(-20px);
      }
      100% {
        transform: translateX(0) translateY(0);
      }
    }

    @keyframes moveImage6 {
      0% {
        transform: translateX(0) translateY(0);
      }
      50% {
        transform: translateX(40px) translateY(30px);
      }
      100% {
        transform: translateX(0) translateY(0);
      }
    }

    @keyframes moveImage7 {
      0% {
        transform: translateX(0) translateY(0);
      }
      50% {
        transform: translateX(-10px) translateY(60px);
      }
      100% {
        transform: translateX(0) translateY(0);
      }
    }

    @keyframes moveImage8 {
      0% {
        transform: translateX(0) translateY(0);
      }
      50% {
        transform: translateX(10px) translateY(-30px);
      }
      100% {
        transform: translateX(0) translateY(0);
      }
    }

    /* Aplicando animações diferentes para cada imagem */
    .image1 {
	  position:fixed;
      animation: moveImage1 20s infinite linear;
      top: 5%;
      left: 5%;
      width: 18%;
    }

    .image2 {
		position:fixed;
		animation: moveImage2 25s infinite linear;
	    top: 10%;
    	right: 10%;
		width: 14%;
    }

    .image3 {
      position:fixed;
      animation: moveImage3 30s infinite linear;
      top: 12%;
    left: 51%;
    width: 17%;
    }

    .image4 {
      position:fixed;
      animation: moveImage4 35s infinite linear;
      top: 5%;
      right: 15%;
      width: 20%;
    }

    .image5 {
      position:fixed;
      animation: moveImage5 40s infinite linear;
      top: 40%;
      left: 30%;
      width: 12%;
    }

    .image6 {
      position:fixed;
      animation: moveImage6 45s infinite linear;
      top: 50%;
      right: 20%;
      width: 16%;
    }

    .image7 {
      position:fixed;
      animation: moveImage7 50s infinite linear;
      bottom: 21%;
      left: 15%;
      width: 20%;
    }

    .image8 {
      position:fixed;
      animation: moveImage8 55s infinite linear;
      bottom: 6%;
      right: 8%;
      width: 16%;
    }

    @media (max-width: 768px) {
      .login-box {
        width: 80%;
      }

      .background-image {
        width: 18%; /* Imagens um pouco maiores em telas pequenas */
      }
    }