* {
    margin: 0;
    padding: 0;
    font-family: montserrat;
    box-sizing: border-box;
}

body {

    background-color: #1F2124;
    background-size: cover;
    background-position: center;
    color: #fff;
    margin-top: 30px; /* Ajusta el espacio superior según sea necesario */
    display: flex;
    /* Usamos flexbox */
    justify-content: center;
    /* Centramos horizontalmente */
    align-items: center;
    /* Centramos verticalmente */
    height: 100vh;
    /* Establecemos la altura al 100% de la ventana */
}

.title {   
  width: 921px;
  height: 73px;
  color: white;
  font-size: 40px;
  text-align: center;
  position: relative;
  z-index: 2;
  margin-top: 18%;
  margin-bottom: 6%;
  margin-left: 60%;
}

.video{
  width: 926px;
  height: 513px;
  /* margin-top: -53%; */
  margin-left: 60%;
}

.video video {
  width: 926px;
  height: 513px;
}

.carousel-item {
  align-items: center;
}

.carousel-images {
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.linea {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0%;
  
  left: 6.5%;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.3); /* Color de fondo blanco con 80% de opacidad */
  width: 2px;
  height: 100%;
}

.carousel-dots {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 5%;
  align-items: center;
}

.carousel-dots .dot {
  display: block;
  height: 30px;
  /* Altura de cada punto */
  width: 30px;
  /* Ancho de cada punto */
  background-color: white;
  border-radius: 50%;
  margin-bottom: 100%;
  margin-top: 100%;
  cursor: pointer;
  transition: transform 0.3s ease;

  animation: pulsate 4s infinite;
}

@keyframes pulsate {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

.carousel-dots .dot:hover {
  transform: scale(1.5);
  animation: none;
}



.active {
  height: 60px !important;
  width: 60px !important;
  background-color: white;
  background-image: url('../iconos/ui/play.svg');
  background-position: center;
  background-size: 40px 40px;
  background-repeat: no-repeat;
}

.carousel-container {
  position: absolute;
  /* Agregamos posición relativa para poder posicionar elementos hijos de forma absoluta */
}