body {
  margin: 0;
  /* background: #e6e6e6; */
  background: rgb(22, 23, 27);
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  letter-spacing: 2pt;
}

.overlay {
  position: fixed;
  top: 0;
  left: 5%;
  width: 50%;
  height: 95%;
  display: flex;
  justify-content: left;
  align-items: end;
  /* background-color: rgba(0, 0, 0, 0.9); */
  z-index: 2; /* Por encima del carrusel */
}

.content-container {
  width: 100%;
  text-align: left;
  color: #e6e6e6;
  
}

.content-container img {
  max-width: calc(450px + 40%);
  /* max-height: 80vh; */
  object-fit: contain;
  margin-top: calc(20px + 0.8vw); /* Espacio entre la imagen y la lista */
}

.mail, .wa_contact {
  text-decoration: none;
  color: #ffffff;
  /* text-shadow: rgba(0, 0, 0, 0.5) 0px 0px 2px; */
  transition: color 1s;
  transition-timing-function: ease-out;
}

.wa_contact:hover {
  color: rgb(190, 216, 201);
}

.mail:hover{
  color: rgb(238, 221, 215);
}



.list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list li {
  font-size: calc(15px + 1.2vw);
  margin-bottom: 1vw; /* Espacio entre elementos de la lista */
}

.carousel {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.carousel-image {
  width: 100%;
  height: 100vh;
  background-size: cover;
  /* background-position: center center; */
  background-position:right center;
  position: relative;
}

.slick-prev, .slick-next {
    font-size: 80px; /* Ajusta el tamaño de las flechas */
    color: #e6e6e6; /* Color de las flechas */
    z-index: 10; /* Asegura que las flechas estén por encima de las imágenes */
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
}

.slick-prev {
    left: 3%; /* Posición izquierda de la flecha "Previous" */
}

.slick-prev:before {
  content: "<";
  color: #e6e6e6ba;
  font-family: 'Montserrat', sans-serif;
  font-weight: 200;
  font-size: calc(40px + 1vw);
}

.slick-next {
    right: 3%; /* Posición derecha de la flecha "Next" */
}

.slick-next:before {
  content: ">";
  color: #e6e6e6ba;
  font-family: 'Montserrat', sans-serif;
  font-weight: 200;
  font-size: calc(40px + 1vw); 
}


/* RESPONSIVE  */


@media(max-width: 800px){
  .overlay {

    width: 90%;
    height: 95%;
    display: flex;
    justify-content: center;
    align-items: end;
    /* background-color: rgba(0, 0, 0, 0.9); */
  }

  .content-container img{
    max-width: 70%;
    margin-top: 3vw;
  }

  .list li {
    font-size: 4vw;
    margin-bottom: 2.5vw; /* Espacio entre elementos de la lista */
  }

  .carousel-image {
    background-position: center;
  }
  
}