.font-inter {
  font-family: "Inter", sans-serif;
}

.container {
  max-width: 1440px;
  min-width: 100%;
  width: 100%;
  padding-inline: 16px;
}

@media (min-width: 1440px) {
  .container {
    padding-inline: 24px;
    margin-inline: auto;
  }
}

@media (min-width: 1440px) {
  .container {
    padding-inline: 64px;
  }
}

#hero-bg {
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 62.45%,
      rgba(255, 255, 255, 0.27) 68.8%,
      #fff 100%
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.4) 1.32%, rgba(0, 0, 0, 0) 37.71%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0.01%, rgba(0, 0, 0, 0) 73.89%),
    url("../images/hero-bg.png"),
    lightgray -120.654px -641.519px/115.432% 170.982% no-repeat;
}

.scroll-container {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.scroll-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.first-swiper-slide {
  flex: 0 0 420px !important;
  width: 420px !important;
  margin-right: 16px !important;
}

.swiper-slide-item-image::before {
  content: " ";
  position: absolute;
  display: block;
  position: absolute;
  border-radius: 12px;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 23.59%, #000 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.custom-swiper-button-prev.no-prev,
.custom-swiper-button-next.no-next {
  opacity: 0.3;
  cursor: not-allowed;
}

.custom-swiper-button-prev.has-prev,
.custom-swiper-button-next.has-next {
  opacity: 1;
  cursor: pointer;
}