section.hand-picked-comments {
  margin: 0;
  padding: 1vw;
  width: 100%;
  min-height: 26vw;
  color: var(--dark-font) !important;
  position: relative;
  justify-content: start !important;
  gap: 3vw;
  background-color: #ffffff;
}

section.hand-picked-comments > svg {
  width: 128%;
  position: absolute;
  top: -24%;
  z-index: 2;
}

section.hand-picked-comments > h2 {
  color: var(--dark-font);
  text-align: center;
  position: relative;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  transition-delay: 0.1s;
  font-weight: 600;
  font-size: 1.85vw;
}

section.hand-picked-comments.active > h2 {
  opacity: 1;
  visibility: visible;
}

section.hand-picked-comments > h2::before {
  content: "";
  width: 0;
  height: 0.15vw;
  border-radius: 0.25vw;
  background-color: var(--blue2);
  position: absolute;
  bottom: -0.75vw;
  transition: all 0.35s;
  opacity: 0;
  visibility: hidden;
  transition-delay: 0.3s;
  box-shadow: 0 0 0.5vw rgba(40, 125, 250, 0.5);
}

section.hand-picked-comments.active > h2::before {
  opacity: 1;
  visibility: visible;
  width: 107%;
}

section.hand-picked-comments > h5 {
  font-weight: 300;
  font-size: 1.4vw;
  position: relative;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease-in-out;
  transition-delay: 0.2s;
}

section.hand-picked-comments.active > h5 {
  opacity: 1;
  visibility: visible;
}

section.hand-picked-comments .swiper {
  width: 80vw;
  padding: 2vw !important;
  opacity: 0;
  transition: all 0.3s;
  position: relative;
  z-index: 3;
}

section.hand-picked-comments .swiper-wrapper {
  padding-bottom: 1vw;
}

section.hand-picked-comments .swiper.active {
  opacity: 1;
}

section.hand-picked-comments .swiper-slide {
  padding: 1vw;
  background-position: center;
  background-size: cover;
  width: 24vw !important;
  min-height: 15vw !important;
  border-radius: 0.8vw;
  position: relative;
  overflow: hidden;
  background-color: var(--light-bg);
  box-shadow: 0 0 0.7vw rgba(0, 0, 0, 0.25);
}

section.hand-picked-comments .swiper-slide a {
  width: 100%;
  height: 100%;
  justify-content: start !important;
  gap: 0.5vw;
}

section.hand-picked-comments .swiper-slide figure {
  margin: 0;
  position: relative;
  width: 3.5vw;
  height: 3.5vw;
  overflow: hidden;
  border-radius: 50%;
}

section.hand-picked-comments .swiper-slide figure img {
  width: 100%;
}

section.hand-picked-comments .swiper-slide a h2 {
  color: var(--blue2);
  font-size: 0.95vw;
  text-align: center;
}

section.hand-picked-comments .swiper-slide a h5 {
  font-size: 0.85vw;
  font-weight: 300;
  text-align: center;
  color: var(--dark-font);
  transform: translateY(-0.5vw);
}

section.hand-picked-comments .swiper-slide a q {
  font-size: 0.95vw;
  font-weight: 300;
  text-align: center;
  font-family: Kalameh, sans-serif;
  color: var(--dark-font);
}

section.hand-picked-comments > a.btn {
  background-color: var(--blue2);
  color: white;
  font-weight: 500;
  font-size: 0.9vw;
  margin-bottom: 4vw;
}

section.hand-picked-comments > a.btn:hover {
  filter: brightness(1.25);
  color: var(--dark-font);
}

@media screen and (max-width: 992px) {
  section.hand-picked-comments {
    margin-top: 40vw;
    padding: 0;
    min-height: 40vw;
    gap: 2vw;
  }

  section.hand-picked-comments > h1 {
    margin-bottom: 4vw;
    font-size: 3.2vw;
  }

  section.hand-picked-comments > h1::before {
    height: 0.4vw;
    top: 120%;
  }

  section.hand-picked-comments .swiper {
    width: 100vw;
  }

  section.hand-picked-comments .swiper-slide {
    width: 30vw !important;
    height: 36vw !important;
    border-radius: 10px;
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.25);
  }

  section.hand-picked-comments .swiper-slide a {
    gap: 2vw;
  }

  .brief-details-tour {
    padding: 0 2vw;
  }

  section.hand-picked-comments .swiper-slide a h2 {
    font-size: 2.7vw;
    text-align: center;
  }

  .brief-details-tour span {
    font-size: 1.9vw;
  }

  section.hand-picked-comments .swiper-slide a h3.price {
    padding: 0 2vw;
    margin-top: 1vw;
    font-size: 2.8vw;
  }

  section.hand-picked-comments .swiper-slide a h3.price span {
    font-size: 1.9vw;
  }

  section.hand-picked-comments a.btn {
    margin-top: 7vw;
    padding: 1.6vw 5vw;
    font-size: 2.99vw !important;
    border-radius: 2.2vw;
  }
}

@media screen and (max-width: 450px) {
  section.hand-picked-comments {
    margin-top: 2vw;
    min-height: 80vw;
    gap: 4vw;
    background-color: white;
  }

  section.hand-picked-comments > h2 {
    font-size: 4.5vw;
  }
  section.hand-picked-comments > h5 {
    font-weight: 300;
    font-size: 2.7vw;
    position: relative;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease-in-out;
    transition-delay: 0.2s;
  }

  section.hand-picked-comments > h2::before {
    height: 0.4vw;
    border-radius: 0.5vw;
    bottom: -1.75vw;
  }

  section.hand-picked-comments .swiper {
    padding: 6vw 2vw !important;
  }

  section.hand-picked-comments .swiper-slide {
    padding: 3vw 2.5vw;
    width: 60vw !important;
    height: 72vw !important;
  }

  section.hand-picked-comments .swiper-pagination {
    transform: translateY(2vw) !important;
  }

  section.hand-picked-comments .swiper-slide a {
    gap: 3vw;
  }

  section.hand-picked-comments .brief-details-tour {
    padding: 0 3vw;
  }

  section.hand-picked-comments .swiper-slide a h2 {
    font-size: 4vw;
    text-align: center;
  }

  .brief-details-tour span {
    font-size: 2.9vw;
  }

  section.hand-picked-comments .swiper-slide figure {
    width: 16vw;
    height: 16vw;
  }
  section.hand-picked-comments .swiper-slide a h5 {
    font-size: 3.15vw !important;
  }
  section.hand-picked-comments .swiper-slide a h2 {
    font-size: 3.35vw;
  }

  section.hand-picked-comments .swiper-slide a q {
    font-size: 3.15vw;
    line-height: 6vw;
  }
  section.hand-picked-comments > svg {
    top: -23%;
    height: 35vw;
  }
  section.hand-picked-comments > a.btn {
    padding: 2vw 7vw;
    font-size: 3.7vw !important;
    margin-bottom: 4vw;
  }
}