:root { 
  --crsl-bg: transparent; 
  --box-bg: #1e272e; 
  --box-shadow-border: #0800000f; 
  --box-border: #3e4459; } 
  /* html, body { 
  padding: 0; 
  margin: 0; 
  width: 100%; 
  height: 100%; 
  background: #2f3539; 
  background: 
  -moz-radial-gradient(circle, #2f3539 0%, #1e272e 100%); 
  background: -webkit-radial-gradient(circle, #2f3539 0%, #1e272e 100%); 
  background: radial-gradient(circle, #2f3539 0%, #1e272e 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2f3539",endColorstr="#1e272e",GradientType=1); 
  } 
  *, *:before, *:after { 
  box-sizing: border-box; 
  } 
  html *, body * { 
  font-family: "Source Sans Pro", sans-serif; 
  } 
  html > p, body > p { 
  font-size: 0.95em; 
  font-weight: bold; 
  position: absolute; 
  top: 7.5%; 
  width: 100%; 
  letter-spacing: 4px;
  text-transform: uppercase; 
  text-align: center;
  color: white; 
  user-select: none; 
  } 
  */ 
  
  /* html > .carousel, body > .carousel { 
  margin-top: 5%; 
  } */ 
  .carouselHead{ 
    width: 95%;
  } 
  .carousel { 
    position: relative; 
    display: flex; 
    width: 100%; 
    box-sizing: border-box; 
  } 
  .carousel__prev, .carousel__next { 
    transition: transform 0.25s ease; 
    align-content: center; 
    justify-items: center;
    margin-top: 20%;
    z-index: 9999999;
    margin-left: 10px;
  }

  .carousel__prev{
    margin-right: 10px;
  }

  .carousel__prev i, .carousel__next i { 
    font-size: 60px; 
    color: var(--box-border); 
    cursor: pointer; 
}

.carousel__prev:hover, .carousel__next:hover { 
    transform: scale(1.25); 
}

.carousel__body { 
    width: 100%; 
    justify-items: self-start; 
    position: relative; 
    margin: 0 auto; 
    overflow: hidden;
}

.carousel__body .carousel__slider { 
    position: relative; 
    transition: transform 1s ease-in-out; 
    background: var(--crsl-bg); 
    margin-top: 35%; 
}

.carousel__body .carousel__slider__item { 
    position: relative; 
    display: flex; 
    float: left; 
    box-sizing: border-box; 
}

.carousel__body .carousel__slider__item .item__3d-frame { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    transition: transform 1s ease-in-out; 
    transform-style: flat; 
}

.carousel__body .carousel__slider__item .item__3d-frame:after { 
    content: ""; 
    position: absolute; 
    bottom: -15%; 
    width: 100%; 
    height: 40px; 
    background: var(--box-shadow); 
    box-shadow: 0px 0px 5px 5px var(--box-shadow); 
    transform: rotateX(90deg) translate3d(0px, -20px, 0px); 
    opacity: 0.85; 
}

.carousel__body .carousel__slider__item .item__3d-frame__box { 
    display: flex; 
    align-items: center; 
    vertical-align: middle; 
    text-align: center; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    box-sizing: border-box; 
}

.carousel__body .carousel__slider__item .item__3d-frame__box h1 { 
    font-size: 7em; 
    width: 100%; 
    color: var(--box-border); 
}

.carousel__body .carousel__slider__item .item__3d-frame__box--right, 
.carousel__body .carousel__slider__item .item__3d-frame__box--left { 
    top: 0; 
    width: 40px; 
    backface-visibility: hidden; 
}

.carousel__body .carousel__slider__item .item__3d-frame__box--left { 
    left: 0; 
    border-left-width: 5px; 
    transform: translate3d(1px, 0, -40px) rotateY(-90deg); 
    transform-origin: 0%; 
}

.carousel__body .carousel__slider__item .item__3d-frame__box--right { 
    right: 0; 
    border-right-width: 5px; 
    transform: translate3d(-1px, 0, -40px) rotateY(90deg); 
    transform-origin: 100%; 
}

.carousel__body .carousel__slider__item .item__3d-frame__box img { 
    width: 100%; /* Ajusta el tamaño de las imágenes */ 
    height: auto; /* Mantiene la proporción de las imágenes */ 
    object-fit: contain; 
    display: block; 
    margin: 0 auto; 
    cursor: pointer; 
    border-radius: 10px; /* Bordes redondeados para evitar cortes */ 
}

.image-modal { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.8); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 1000; 
    overflow: auto; 
}

.image-modal-content { 
    position: relative; 
    width: 70%; 
    height: 95%; 
    max-width: none; 
    max-height: none; 
    overflow: auto; 
    background: white; 
    padding: 20px; 
    border-radius: 10px; 
}

.image-modal-content img { 
    width: 100%; 
    height: auto; 
    border: 3px solid white; 
    display: block; 
    margin: 0 auto; 
}

/* Media Queries for Responsiveness */

@media (max-width: 1200px) { 
    .carouselHead { padding-top: 150px; } 
    .carousel__prev i, .carousel__next i { font-size: 50px; } 
}

@media (max-width: 992px) { 
    .carouselHead { padding-top: 150px; } 
    .carousel__prev, .carousel__next { width: 15%; } 
    .carousel__prev i, .carousel__next i { font-size: 40px; } 
    .carousel__body .carousel__slider__item { margin: 0 15px; } 
}

@media (max-width: 768px) { 
    .carouselHead { padding-top: 150px; } 
    .carousel__prev, .carousel__next { width: 20%; } 
    .carousel__prev i, .carousel__next i { font-size: 30px; } 
    .carousel__body .carousel__slider__item { margin: 0 10px; } 
}

@media (max-width: 576px) { 
    .carouselHead { padding-top: 150px; } 
    .carousel__prev, .carousel__next { width: 25%; } 
    .carousel__prev i, .carousel__next i { font-size: 20px; } 
    .carousel__body .carousel__slider__item { margin: 0 5px; } 
    .carousel__body .carousel__slider__item .item__3d-frame__box h1 { font-size: 4em; } 
}