.swiper {
  width: 100%;
  overflow-x: clip !important;
  overflow-y: visible !important;
  padding-top: 3.125rem;
  /*pointer-events: none;*/
}

.swiper-pagination-bullet,
.swiper-pagination-bullet-active {
  background: #fff;
}

.swiper-pagination {
  height: 24px;
  position: relative !important;
  top: 0 !important;
}
.swiper-wrapper {
  align-items: center;
}
.swiper-slide {
  align-items: center;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, .3);
  width: 360px;
  height: 100% !important;
  padding: 0 0 36px;
  display: flex !important;
  flex-direction: column;
  justify-content: end;
  align-items: self-start;
}
.swiper-slide img {
  border-radius: 12px 12px 0 0;
  object-fit: cover;
  min-height: 240px;
}
.swiper-slide h3 {
  font-size: 28px;
  font-weight: 500;
  margin: 0 auto;
  padding: 36px 36px 9px;
  text-align: center;
}
.swiper-slide p {
  font-size: 0.95rem;
  margin: 0 auto;
  padding: 0 36px 24px;
  text-align: center;
}
.swiper-slide .button {
  display: block;
  height: 0;
  margin: 0 auto;
  padding: 0;
  transition: all 0.25s;
  visibility: hidden;
}
.swiper-slide-fully-visible.swiper-slide-active .button {
  height: auto;
  padding: 9px 18px;
  transition: all 0.25s;
  visibility: visible;
}
.swiper-pagination-bullet {
  background-color: #00848440 !important;
  opacity: 1 !important;
}
.swiper-pagination-bullet-active {
  background-color: #008484 !important;
}
  

@media screen and (min-width: 93.75rem) {
  .swiper {
    width: 85%;
  }
}

//as we want to see details which are being cut of by default css from swiper contner we change it top overflow visible.
.swiper-container {
    overflow: visible !important; 
}
//we changed over hidden to visible all slides of the swiper slider would we visible so we need to hide them so we add below css.
.swiper-slide{
    opacity: 0 !important;
    visibility: hidden !important;
}
// now because of the above css all the slider are set to opacity 0 , which makes them not visible, now as we want to see out active and next slide we supply below css by using their name. and set there opacity to 1.
.swiper-slide.swiper-slide-active,.swiper-slide.swiper-slide-next,.swiper-slide.swiper-slide-prev{
opacity: 1 !important;
    visibility: visible !important;
}