/* Animation for slideInLeft */

/* CORES PALETA: #a5a5a5 (CINZA) #546471 (CINZA ESCURO) #131842 (AZUL) */ 
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slideInLeft {
  animation-name: slideInLeft;
  animation-duration: 2s;
  animation-fill-mode: both;
}

/* Floating rectangles styles */
#hero-section .flut-left {
  width: 180px;
  height: 95%;
  background: #C7C7C7;
  border-radius: 0 35px 0 0;
  position: absolute;
  left: -100px;
  bottom: 0;
  opacity: 0.3;
}

/* Additional floating rectangles for index page */
.floating-rect-small {
  width: 100px;
  height: 100px;
  background: #28a745;
  position: absolute;
  top: 20%;
  left: 5%;
  opacity: 0.3;
  border-radius: 8px;
}

.floating-rect-medium {
  width: 150px;
  height: 150px;
  background: #218838;
  position: absolute;
  top: 50%;
  left: 15%;
  opacity: 0.3;
  border-radius: 8px;
}

.floating-rect-tiny {
  width: 80px;
  height: 80px;
  background: #28a745;
  position: absolute;
  top: 70%;
  left: 10%;
  opacity: 0.3;
  border-radius: 8px;
}