/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

.cardCarosal {
  display: flex;
  box-sizing: border-box;
  padding: 35px 35px;
  align-items: center;
  justify-content: center;
 height: max-content;

  background: linear-gradient(to left top, #f9fafc, #ffffff);
}
.wrapper {
  max-width: 1100px;
  width: 100%;
  position: relative;
}
.wrapper i {
  z-index: 2;
  top: 50%;
  height: 50px;
  width: 50px;
  cursor: pointer;
  font-size: 1.25rem;
  position: absolute;
  text-align: center;
  line-height: 50px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0,0,0,0.23);
  transform: translateY(-50%);
  transition: transform 0.1s linear;
}
.wrapper i:active{
  transform: translateY(-50%) scale(0.85);
}
.wrapper i:first-child{
  left: -22px;
}
.wrapper i:last-child{
  right: -22px;
}
.wrapper .cardCarousels{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% / 4) - 12px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
  border-radius: 0px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.cardCarousels::-webkit-scrollbar {
  display: none;
}
.cardCarousels.no-transition {
  scroll-behavior: auto;
}

.cardCarousels.dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.cardCarousels.dragging .card {
  cursor: grab;
  user-select: none;
}
.card{
  height: 360px;
  width: 250px;
  display: flex;
  flex-direction: column;
  padding: 10px;
  background-color: rgba(73, 72, 72, 0.23);
  border-radius: 0px;
  left: 40px;
}
.upperCard{
  height: 230px;
  background-color: aqua;
  position: relative;
}
.lowerCard{
  height: 120px;
position: relative;

}
.lowerCard1{

  background-color: #1abc9c;
}
.lowerCard2{

  background-color: #3498db;
}
.lowerCard3{

  background-color: #7352a1;
}
.lowerCard4{

  background-color: #ff8d1d;
}
.lowerCard5{

  background-color: #ff4949;
}
.lowerCard6{

  background-color: #f547ef;
}
.lowerCard .imgcolor{
position: absolute;
top: -78px;
}
.img img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.lowerCard .massagecar{
    padding-top: 1.3rem !important;
  text-align: center;
  color: white;
}

@media screen and (max-width: 900px) {
  .wrapper .cardCarousels {
    grid-auto-columns: calc((100% / 2) - 9px);
  }
}

@media screen and (max-width: 600px) {
  .wrapper .cardCarousels {
    grid-auto-columns: 100%;
  }
}