.project-swiper {

  position: relative;

  isolation: isolate;

  width: 100%;

  padding: 0 0 20px;

}

.project-swiper::before,

.project-swiper::after {

  content: none;

  display: none;

}

.project-swiper .project-viewport {

  position: relative;

  z-index: 2;

  width: 100%;

  height: 460px;

  min-height: 460px;

  overflow: hidden;

  background: #0d2748;

  box-shadow:

    0 30px 65px rgba(13, 39, 72, 0.22),

    0 8px 20px rgba(13, 39, 72, 0.12);

}

.project-swiper .project-track {

  position: relative;

  display: flex;

  width: 100%;

  height: 460px;

  min-height: 460px;

  overflow: visible;

  touch-action: pan-y;

  background: #0d2748;

  will-change: transform;

}

.project-swiper .project-track > .project-card {

  position: relative;

  flex: 0 0 100%;

  display: block;

  width: 100%;

  height: 460px;

  min-height: 460px;

  overflow: hidden;

  border: 0;

  background: #0d2748;

  box-shadow: none;

  opacity: 1;

  visibility: visible;

}

.project-swiper .project-track > .project-card::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

  display: block;

  pointer-events: none;

  background:

    linear-gradient(180deg, transparent 55%, rgba(4, 17, 33, 0.3) 100%),

    linear-gradient(90deg, rgba(4, 17, 33, 0.08), transparent 48%);

}

.project-swiper .project-track > .project-card > img {

  position: absolute;

  inset: 0;

  z-index: 0;

  display: block;

  width: 100%;

  height: 100%;

  min-height: 0;

  object-fit: cover;

  filter: saturate(0.9) contrast(1.08) brightness(0.94);

  opacity: 1;

  visibility: visible;

}

.project-swiper .project-track > .project-card[aria-hidden="false"] > img {

  animation: none;

  transform: none;

}

.project-swiper .project-overlay,

.project-swiper .project-card:nth-child(even) .project-overlay {

  position: absolute;

  left: auto;

  right: clamp(34px, 5vw, 72px);

  bottom: 38px;

  z-index: 3;

  display: block;

  width: min(410px, 44%);

  padding: 27px 30px 29px;

  border: 1px solid rgba(13, 39, 72, 0.14);

  border-top: 4px solid #bdd54a;

  background: rgba(248, 248, 244, 0.94);

  box-shadow: 0 18px 38px rgba(4, 17, 33, 0.24);

  transform: none;

}

.project-swiper .project-overlay::after {

  display: none;

}

.project-swiper .project-overlay span {

  color: #173e6f;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1.8px;

  text-transform: uppercase;

}

.project-swiper .project-overlay p {

  margin: 11px 0 7px;

  color: #627080;

  font-size: 12px;

  letter-spacing: 1px;

  text-transform: uppercase;

}

.project-swiper .project-overlay h3 {

  margin: 0;

  color: #0d2748;

  font-size: clamp(28px, 2.8vw, 38px);

  line-height: 1.05;

}

.project-swiper .project-arrow {

  position: absolute;

  top: 50%;

  z-index: 5;

  width: 44px;

  height: 44px;

  padding: 0;

  transform: translateY(-50%);

  border: 1px solid rgba(255, 255, 255, 0.5);

  border-radius: 50%;

  background: rgba(7, 26, 49, 0.72);

  color: white;

  font-size: 20px;

  cursor: pointer;

}

.project-swiper .project-prev {

  left: 34px;

}

.project-swiper .project-next {

  right: 34px;

}

.project-swiper .project-dots {

  position: relative;

  z-index: 3;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  margin-top: 16px;

}

.project-swiper .project-dot {

  width: 7px;

  height: 7px;

  padding: 0;

  border: 0;

  border-radius: 999px;

  background: #aeb8c1;

  cursor: pointer;

}

.project-swiper .project-dot.is-active {

  width: 25px;

  background: #173e6f;

}

@media (max-width: 800px) {

  .project-swiper {

    padding: 0 0 16px;

  }

  .project-swiper .project-viewport,

  .project-swiper .project-track,

  .project-swiper .project-track > .project-card {

    height: 385px;

    min-height: 385px;

  }

  .project-swiper .project-overlay,

  .project-swiper .project-card:nth-child(even) .project-overlay {

    left: 22px;

    right: 22px;

    bottom: 22px;

    width: auto;

    padding: 20px 22px 22px;

  }

  .project-swiper .project-overlay h3 {

    font-size: 26px;

  }

  .project-swiper .project-arrow {

    width: 36px;

    height: 36px;

    font-size: 17px;

  }

  .project-swiper .project-prev {

    left: 16px;

  }

  .project-swiper .project-next {

    right: 16px;

  }

}

@media (prefers-reduced-motion: reduce) {

  .project-swiper .project-track > .project-card[aria-hidden="false"] > img {

    animation: none;

  }

}