:root{
  --item1-transform: translate(-100%, -5%) scale(1.5);
  --item1-filter: blur(30px);
  --item1-z-index: 11;
  --item1-opacity: 0;
  
  --item2-transform: translate(0, 0);
  --item2-filter: blur(0);
  --item2-z-index: 10;
  --item2-opacity: 1;

  --item3-transform: translate(50%, 10%) scale(0.8);
  --item3-filter: blur(10px);
  --item3-z-index: 9;
  --item3-opacity: 1;

  --item4-transform: translate(90%, 20%) scale(0.5);
  --item4-filter: blur(30px);
  --item4-z-index: 8;
  --item4-opacity: 1;

  --item5-transform: translate(120%, 30%) scale(0.3);
  --item5-filter: blur(40px);
  --item5-z-index: 7;
  --item5-opacity: 0;


}

.caro{
  height: 800px;
  overflow: hidden;
  position: relative;
}

.caro .list{
   position: absolute;
   top: 0;
   width: 1140px;
   max-width: 90%;
   left: 50%;
   transform: translateX(-50%);
   height: 80%;
}

.caro .list .item{
  position: absolute;
  left: 0;
  top: 0;
  width: 70%;
  height: 100%;
  font-size: 15px;
}

.caro .list .item img{
  width: 50%;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.caro .list .item .text{
  position: absolute;
  width: 200px;
  top: 40%;
  transform: translateY(-50%);
  font-size: 30px;
  margin-right: 10px;
  margin-left: 95px;
  z-index: 12;
}

.caro .list .item:nth-child(2) .text{
  opacity: 1;
  pointer-events: auto; 
  transition: opacity 0.5s;
  z-index: 12;
  
}

.caro .list .item:nth-child(n+6){
  opacity: 0;
  pointer-events: none;
}

.caro .list .item:nth-child(2){
    transform: var(--item2-transform);
    filter: var(--item2-filter);
    z-index: var(--item2-z-index);
    opacity: var(--item2-opacity);
} 
.caro .list .item:nth-child(1){
    transform: var(--item1-transform);
    filter: var(--item1-filter);
    z-index: var(--item1-z-index);
    opacity: var(--item1-opacity);
    pointer-events: none;
} 
.caro .list .item:nth-child(3){
    transform: var(--item3-transform);
    filter: var(--item3-filter);
    z-index: var(--item3-z-index);
    opacity: var(--item3-opacity);
} 
.caro .list .item:nth-child(4){
    transform: var(--item4-transform);
    filter: var(--item4-filter);
    z-index: var(--item4-z-index);
    opacity: var(--item4-opacity);
} 
.caro .list .item:nth-child(5){
    transform: var(--item5-transform);
    filter: var(--item5-filter);
    z-index: var(--item5-z-index);
    opacity: var(--item5-opacity);
    pointer-events: none;
}  

.caro .list .item:nth-child(2) .text{
  opacity: 0;
  animation: showContent 0.5s 0.7s ease-in-out 1 forwards;
}

@keyframes showContent{
  from{
    transform: translateY(50px);
    filter: blur(30px);
  }to{
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
    z-index: 12;
  }
}

/* arrows */
.arrows{
  position: absolute;
  bottom: 10px;
  width: 1140px;
  max-width: 90%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.arrows #next, 
.arrows #prev{
  width: 80px;
  height: 80px;
  border-radius: 35px;
  cursor: pointer;
  font-family: monospace;
  font-size: 50px;
  font-weight: bold;
  border: 10px solid #ffffff;
  outline: 1px solid black;
  background-color: rgb(255, 107, 188);

}

.caro.next .list .item:nth-child(1){
  animation: positionItem2 0.5s ease-in-out 1 forwards;
}

@keyframes positionItem2{
  from{
    transform: var(--item2-transform);
    filter: var(--item2-filter);
    z-index: var(--item2-z-index);
    opacity: var(--item2-opacity);
  }
}

.caro.next .list .item:nth-child(2){
  animation: positionItem3 0.7s ease-in-out 1 forwards;
}

@keyframes positionItem3{
  from{
    transform: var(--item3-transform);
    filter: var(--item3-filter);
    z-index: var(--item3-z-index);
    opacity: var(--item3-opacity);
  }
}

.caro.next .list .item:nth-child(3){
  animation: positionItem4 0.9s ease-in-out 1 forwards;
}

@keyframes positionItem4{
  from{
    transform: var(--item4-transform);
    filter: var(--item4-filter);
    z-index: var(--item4-z-index);
    opacity: var(--item4-opacity);
  }
}

.caro.next .list .item:nth-child(4){
  animation: positionItem5 1.1s ease-in-out 1 forwards;
}

@keyframes positionItem5{
  from{
    transform: var(--item5-transform);
    filter: var(--item5-filter);
    z-index: var(--item5-z-index);
    opacity: var(--item5-opacity);
  }
}

.caro.prev .list .item:nth-child(2){
  animation: positionItem1 0.5s ease-in-out 1 forwards;
}

@keyframes positionItem1{
  from{
    transform: var(--item1-transform);
    filter: var(--item1-filter);
    z-index: var(--item1-z-index);
    opacity: var(--item1-opacity);
  }
}


.caro.prev .list .item:nth-child(3){
  animation: positionItem2 0.7s ease-in-out 1 forwards;
}
.caro.prev .list .item:nth-child(4){
  animation: positionItem3 0.9s ease-in-out 1 forwards;
} 
.caro.prev .list .item:nth-child(5){
  animation: positionItem4 1.1s ease-in-out 1 forwards;
}

@media screen and (max-width: 991px){
  .caro .list .item{
    width: 90%;
  }
}


@media (max-width: 1000px){
  .caro{
  height: 1800px;
  overflow: hidden;
  position: relative;
}
  .arrows #next, 
  .arrows #prev{
      width: 160px;
      height: 160px;
      font-size: 100px;

}
}

@media screen and (max-width: 1000px) {
  /* make the items scale bigger */
  :root {
    --item1-transform: translate(-100%, -5%) scale(2);
    --item2-transform: translate(0, 0) scale(1.4);
    --item3-transform: translate(50%, 10%) scale(1.2);
    --item4-transform: translate(90%, 20%) scale(1);
    --item5-transform: translate(120%, 30%) scale(0.8);
  }

  /* resize text so it’s big but not overflowing */
  .caro .list .item .text {
    width: 20%;          /* let text breathe */
    font-size: 28px;     /* bigger, but not breaking */
    left: 9%;            /* keep it inside the slide */
    top: 50%;            /* center better */
    transform: translateY(-50%);
    text-align: left;    /* keeps it aligned neatly */
    word-wrap: break-word;
  }

  /* images scale bigger */
  .caro .list .item img {
    width: 50%;
    max-width: 100%; /* keep inside container */
    right: auto;     /* stop forcing it too far right */
    left: 50%;       /* center it */
    transform: translate(-15%, -45%); /* center horizontally & vertically */
  }
  
}