.digr_image_glider .wrapper {
    overflow: hidden;
    /* background: linear-gradient(135deg, black, #220033); */
    position: relative;

  }
  .digr_image_glider .carousel {
    position: relative;
    z-index: 1;
    height: 500px;
    overflow: hidden;
    pointer-events: none;
  }
  
  .digr_image_glider .carousel-item{
    /* Number of items in the carousel */
    --items: 3; /* Change this to adjust the number of visible items */
    /* Width of each carousel item, customizable */
    --width: clamp(150px, 30vw, 300px); /* min-width: 150px, default: 30vw, max-width: 300px */
    --height: clamp(250px, 40vw, 400px); /* min-height: 250px, default: 40vw, max-height: 400px */
    /* Dynamic position and transform properties based on active item */
    /* --x: calc(var(--active) * 800%);
    --y: calc(var(--active) * 200%);
    --rot: calc(var(--active) * 120deg);
    --opacity: calc(var(--zIndex) / var(--items) * 3 - 2); */

    --distance: 3;
    --rotation: 120deg;

    --x: calc(var(--active) * (100% / var(--items) * var(--distance))); /* Distance between items */
    --y: calc(var(--active) * 100%); /* Vertical offset, adjust if needed */
    --rot: calc(var(--active) * var(--rotation)); /* Reduce rotation to avoid large gaps */
    --opacity: calc(var(--zIndex) / var(--items) * 3 - 2); /* Adjust opacity based on z-index */
    --opacity: calc(1 - abs(var(--active))); /* Reduce opacity for non-active items */

/* Other styling */
    overflow: hidden;
    position: absolute;
    
    z-index: var(--zIndex);
    /* z-index:1; */
    width: var(--width);
    height: var(--height);
    margin: calc(var(--height) * -0.5) 0 0 calc(var(--width) * -0.5);
    border-radius: 10px;
    border-style: solid;
    top: 50%;
    left: 50%;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    transform-origin: 0% 100%;
    box-shadow: 0 10px 50px 10px rgba(0, 0, 0, 0.5);
    background: black;
    pointer-events: all;
    transform: translate(var(--x), var(--y)) rotate(var(--rot));
    transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.5s ease-in-out;
   
  }
  /* .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    pointer-events: none;
} */
.digr_image_glider .carousel-item .carousel-box {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* transition: opacity 0.8s cubic-bezier(0, 0.02, 0, 1); */
    opacity: var(--opacity);
    opacity: calc(1 - abs(var(--active))); /* Reduce opacity for non-active items */
    font-family: "Orelo-sw-db", serif;
  }
  .digr_image_glider .carousel-item .carousel-box:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5));
  }
  .digr_image_glider .carousel-item .image-title {
    position: absolute;
    z-index: 1;
    color: #fff;
    bottom: 0;
    /* transition: opacity 0.8s cubic-bezier(0, 0.02, 0, 1); */
    font-size: clamp(20px, 3vw, 30px);
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    width: 100%;
    opacity: 0; /* Hide titles by default */
    transition: opacity 0.3s ease-in-out;
  }
  
  .digr_image_glider .carousel-item.show-title .image-title {
    opacity:1;
  }
  .digr_image_glider .carousel-item .num {
    position: absolute;
    z-index: 1;
    color: #fff;
    top: 10px;
    left: 20px;
    transition: opacity 0.8s cubic-bezier(0, 0.02, 0, 1);
    font-size: clamp(20px, 10vw, 80px);
  }
  .digr_image_glider .carousel-item img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    pointer-events: none;

  }
  
/*==== custom cursor */
  
.digr_image_glider .cursor, .digr_image_glider .cursor2 {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  /* transform: translate(-50%, -50%) scale(1); */
}

.digr_image_glider .cursor {
  width: 20px;
  height: 20px;
  background-color: transparent;
  border:2px solid #686868;
  box-shadow: 0 0 10px rgba(9, 4, 249, 0.2);
  transition: transform 0.2s ease-out, opacity 0.1s ease-out;
  animation: cursorAnim .5s infinite alternate;

}

.digr_image_glider .cursor2 {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(124, 124, 124, 0.5);
  background:transparent;
  transition: transform 0.3s ease-out, opacity 0.15s ease-out;
  animation: cursorAnim2 .5s infinite alternate;
} 

@keyframes cursorAnim {
  from {
      transform: scale(1);
  }
  to {
      transform: scale(.7);
  }
}

@keyframes cursorAnim2 {
  from {
      transform: scale(1);
  }
  to {
      transform: scale(.4);
  }
}

@keyframes cursorAnim3 {
  0% {
      transform: scale(1);
  }
  50% {
      transform: scale(3);
  }
  100% {
      transform: scale(1);
      opacity: 0;
  }
}

.digr_image_glider .expand {
  animation: cursorAnim3 .5s forwards;
  background:rgba(54, 54, 244, 0.332);
}

.digr_image_glider .carousel-box .image-title a.image-title{
  position: relative;
}