.modalBanner {
  position: fixed;
  inset: 0;
  z-index: 99;	
  width: 100vw;
  height: 100vh;
  overflow: hidden;		
  animation: 
  disapere 0s ease-out 7s 1 forwards;
}		

.modalBanner.noSee {
  display: none;
}

.paracaidasContainer {
  height: auto;
  position: absolute;
  top: -800px; /* Start off-screen */
  left: 50%;
  transform: translateX(-50%);
 	
  
  /* Linear or slight ease-out works best for terminal velocity descent */
  animation: 
    fall 7s linear 1 forwards,
    fadeOut 1s ease-out 7s 1 forwards; /* Starts at second 6, lasts 1 second */
}	
.paracaidas {
  width: 440px;
  height: auto;
  
  /* Crucial: Set the pivot point to the very top of the parachute canopy */
  transform-origin: top center; 
 
  /* Increased duration slightly and added 'alternate' to match the 7s fall */
  animation: sway 2.3s ease-in-out 3 alternate forwards;
}
.paracaidas img{
  width: 100%;
  height: auto;
}
	
/* --- Animation Keyframes --- */

/* Smooth, constant downward movement */
@keyframes fall {
  0% { top: -800px; }
  100% { top: 100vh; } /* Keeps it visible on screen before fading out */
}

/* Swaying back and forth */
@keyframes sway {
  0% { transform: rotate(-12deg) translateX(-15px); }
  100% { transform: rotate(12deg) translateX(15px); }
}

/* Smoothly disappears from sight */
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden; /* Prevents clicks on the invisible element */
  }
}
@keyframes disapere {
  0% {
    display: block;
  }
  100% {
    display: none;
  }
}
@media only screen and (max-width: 1280px) {
	.paracaidas {
	  width: 440px;
	}
}
@media only screen and (max-width: 580px) {
	.paracaidas {
	  width: 400px;
	}
}
@media only screen and (max-width: 420px) {
	.paracaidas {
	  width: 330px;
	}
}
@media only screen and (max-width: 375px) {
	.paracaidas {
	  width: 300px;
	}
}