

.card-heading {
 padding-bottom: 10px;
  text-align: center;
}

.carousel {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  font-family: Arial;
}

.carousel__list {
    display: flex;
    list-style: none;
    position: relative;
    width: 100%;
    height: 500px;
    justify-content: center;
    perspective: 500px;
  padding-inline-start: 0px;
  }
  
.carousel__item {
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    width: 30%;
    height: 90%;
    border-radius: 12px;
    box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.5);
    position: absolute;
    transition: all .3s ease-in;
  flex-direction: column;
  padding: 3%;
  cursor: pointer;
}
   
@media screen and (max-width: 760px) {
  .carousel__item {
   width: 50%; 
  }
  
 .carousel__item[data-pos="-2"],
.carousel__item[data-pos="2"] {
      display: none;
    }
}

.carousel__item:nth-child(1) {
      background: white;
    }
.carousel__item:nth-child(2) {
      background: white;
    }
.carousel__item:nth-child(3) {
      background: white;
    }
.carousel__item:nth-child(4) {
      background: white;
    }
.carousel__item:nth-child(5) {
      background: white;
    }
    
.carousel__item[data-pos="0"] {
      z-index: 5;
    }

.carousel__active_color_coral[data-pos="0"] {
  background-color: #e53749;
  color: white;
}

.carousel__active_color_navy[data-pos="0"] {
  background-color: #121733;
  color: white;
}

.carousel__active_color_indigo[data-pos="0"] {
  background-color: #28315c;
  color: white;
}

.carousel__active_color_ai300[data-pos="0"] {
  background-color: #cdd3f6;
  color: #121733;
}

.carousel__active_color_ai[data-pos="0"] {
  background-color: #7287ee;
  color: #121733;
}
    
.carousel__item[data-pos="-1"],
.carousel__item[data-pos="1"] {
      opacity: 0.7;
      filter: blur(1px) grayscale(10%);
      background: #bec0ce;
    }
    
.carousel__item[data-pos="-1"] {
      transform: translateX(-40%) scale(.9);
      z-index: 4;
      background: #bec0ce;
    }
    
.carousel__item[data-pos="1"] {
      transform: translateX(40%) scale(.9);
      z-index: 4;
      background: #bec0ce;
    }
    
.carousel__item[data-pos="-2"],
.carousel__item[data-pos="2"] {
      opacity: 0.4;
      filter: blur(3px) grayscale(20%);
      background: #bec0ce;
    }
    
.carousel__item[data-pos="-2"] {
      transform: translateX(-70%) scale(.8);
      z-index: 3;
      background: #bec0ce;
    }
    
.carousel__item[data-pos="2"] {
      transform: translateX(70%) scale(.8);
      z-index: 3;
      background: #bec0ce;
    }
  }
}

