header {
    margin-bottom: 0px;
	position: relative;
	z-index:1000;
	width:100%;
}
.swiper-container {
   width: 100%;
   height: calc(100vh - 135px);
}
.overlay {
   height: calc(100vh - 135px);
}

.contenedor-slider,
.swiper,
.swiper-wrapper{
  position: relative;
  z-index: 1; 
}

.swiper-slide {
   display: flex;
   align-items: center;
   justify-content: center;
   background-size: cover;
   background-position: center;
}
	/* Keyframe Animations */
	@keyframes fadeIn {
	  from {
		opacity: 0;
	  }
	  to {
		opacity: 1;
	  }
	}

	@keyframes slideInLeft {
	  from {
		transform: translateX(-100%);
		opacity: 0;
	  }
	  to {
		transform: translateX(0);
		opacity: 1;
	  }
	}
	@keyframes slideInRight {
	  from {
		transform: translateX(100%);
		opacity: 0;
	  }
	  to {
		transform: translateX(0);
		opacity: 1;
	  }
	}

	@keyframes zoomIn {
	  from {
		transform: scale(0.5);
		opacity: 0;
	  }
	  to {
		transform: scale(1);
		opacity: 1;
	  }
	}

	/* Animation Classes */
	.fade-in {
	  animation: fadeIn 1s forwards;
	}

	.slide-in-left {
	  animation: slideInLeft 1s forwards;
	}

	.zoom-in {
	  animation: zoomIn 1s forwards;
	}

	.swiper-slide h2{
      opacity: 0; /* Inicialmente ocultos */
    }
    .swiper-slide-active h2 {
      animation: slideInLeft 1s forwards;
    }
	.swiper-slide p{
      opacity: 0; /* Inicialmente ocultos */
	  font-size: 1em;
      text-align: center;
	  color: var(--gray-400);
    }
    .swiper-slide-active p {
      animation: slideInRight 1s forwards;
    }
	.swiper-slide button{
      opacity: 0; /* Inicialmente ocultos */
    }
    .swiper-slide-active button {
      animation: zoomIn 1s forwards;
    }

:root {
    --swiper-theme-color: var(--theme-secondary);
}

.overlay {
   width: 100%;
   text-align: center;
   color: #fff;
   background: rgba(0, 0, 0, 0.5);

   font-family: 'Barlow', sans-serif;
   font-size: 4rem;
   font-weight: 300;
   color: #ffffff;
   text-align: center;
   letter-spacing: 1px;
   text-transform: uppercase;
   padding:200px;
   
}
.overlay h2 {
   color: #fff;
   font-size: 1.4em;
}

.overlay button {
   margin-top: 10px;
   padding: 10px 20px;
   color: #fff;
   background: var(--swiper-theme-color);
   border: none;
   border-radius: 5px;
   cursor: pointer;
   text-transform: uppercase;
   font-size: 20px;
}

.overlay button:hover {
   color: var(--swiper-theme-color);
   background: white;
}

@media (max-width: 767px) {
	.overlay {
	   font-size: 2rem;
	   padding:200px 30px;
	}
	.overlay h2 {
	   font-size: 1.2em;
	}
}