.swiper {
  width: 100%;
  padding-bottom: 50px;
}

.swiper-wrapper {
  min-width: 950px;
}

.package-box {
  background-color: var(--light);
  border-radius: 25px;
  max-width: 400px;
  box-shadow: 0 0 20px #00000030;
  border: solid 1px var(--primary-1);
}

.package-box.recommanded {
  position: relative;
}
.package-box.recommanded {
  position: relative; /* Ensure the container is positioned */
}

.package-box.recommanded::before {
  content: '';
  display: block;
  width: 120px;
  height: 120px;
  background-image: url('../images/recommanded-badge.png');
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

.services-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0 -100px;
  place-items: center;
}

.service-box {
  max-width: 400px;
  height: 600px;
  border-radius: 25px;
  position: relative;
  box-shadow: 0 0 20px #00000030;
}

.service-price {
  position: absolute;
  top: 0;
  right: 30px;
  background-color: var(--primary-1);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.service-details-container {
  height: 300px;
  background: #fff;
  position: absolute;
  bottom: 0;
  border-radius: 25px;
}

.service-details-text-container {
  flex: 1;
}

.service-details-section {
  flex: 1;
}

.service-detail-separate-line {
  width: 2px;
  background-color: var(--primary-1);
}

.service-action-container {
  height: 60px;
}

.service-card-button {
  border-radius: 50px;
  border: none;
  outline: none;
  background-color: var(--primary-1);
  transition: 0.3s;
}

.service-card-button:hover {
  background-color: var(--background2-1);
}

.service-card-button:active {
  background-color: var(--light);
}

@media screen and (max-width: 1205px) {
  .service-box {
    height: 500px;
  }
}

@media screen and (max-width: 995px) {
  .services-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 690px) {
  .services-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media screen and (max-width: 500px) {
  .service-box {
    width: 100%;
    max-width: 100%;
  }
}