.swiper-main {
  width: 100vw;
  height: 100vh;
}
.swiper-slide {
  position: relative;
}

/*  заливка оверлей  */
.swiper-main .swiper-slide::before {
  content: '';
  pointer-events: none;

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.00) 0%,
  rgba(0, 0, 0, 0.20) 100%),
  linear-gradient(181deg, rgb(0 0 0 / 38%) 0.91%,
  rgb(0 0 0 / 20%) 116.71%, rgb(255 255 255 / 0%) 116.72%);
}


/*  скрываем родные кнопки */
.swiper-button-next, .swiper-button-prev {
  display: none;
}
.swiper-scrollbar {
  background: rgb(191 191 191 / 44%);
}

.swiper-scrollbar-drag {
  background: rgb(255 255 255 / 60%);
}

/* ************** project-swiper ********** */
.project-swiper{
  width: 100%;
}

.project-swiper .swiper-slide{
  height: 80%;
  transition: all 0.15s ease-in;
}
.project-swiper .swiper-slide.swiper-slide-active {
  position: relative;
  transform: scale(1.3);
  height: 100%;
  /* width: 250px !important; */
  /* margin-top: 0; */
  z-index: 5;
  transition: all 0.25s ease-in;
}
.project-swiper .swiper-slide.swiper-slide-active img{
  /* height: 100%; */
  object-fit: cover;
  box-shadow: 1px 5px 12px rgb(36, 99, 73);
}

.project-scroll-wrapper{
  display: flex;
  align-items: baseline;
}
.span-scroll.--project {
  width: 120px;
  margin-right: 25px;
  margin-left: 15px;
}

.swiper-scrollbar-2{
  height: 5px;
  margin-top: 55px;
  width: 85%;
}
.swiper-scrollbar-2 .swiper-scrollbar-drag{
  width: 50%;
}

.step-col{
  position: relative;
  height: 320px;
}
.step-swiper{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.step-swiper .swiper-slide {
  background-position: center;
  background-size: cover;
  height: 100%;
  width: 100%;
}
.step-swiper .swiper-slide img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.step-pagination {
  text-align: center;
  margin: 16px 20px;
  width: fit-content !important;
}
.swiper-pagination-bullet-active {
  background: var(--btn-dark);
}

.step-img,
.step-img img {
  height: 100%;
  /* width: 80%; */
}
.step-img img {
  object-fit: cover;
}
/*  свайпер проджект оверлей */
.project-swiper .swiper-slide{
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.slide-owerlay{
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  bottom: 0;
  left: 0%;
  width: 100%;
  height: 100%;
  transform: translateX(100%);
  opacity: 0;
  transition: all .2s ease-in;
}
.over-progect{
  position: absolute;
  text-align: left;
  left: 39%;
  transform: translateX(-50%);
  bottom: 0;
  padding: 15px;
  background: rgba(255, 255, 255, 0.842);
}
.project-swiper .swiper-slide-active:hover>.slide-owerlay{
  transform: translateX(0%);
  opacity: 1;
}
.over-progect p{
  font-size: 12px;
}