/* Контейнер другого свайпера */
.swiper.gal {
  position: relative;
}

/* База для стрілок 2-го свайпера (десктоп) */
.swiper-button-next-gal,
.swiper-button-prev-gal {
  position: absolute;
  top: 46%;
  transform: translateY(-50%);
  z-index: 10;
  width: 2em;
  height: 2em;
}

/* Прибираємо стандартні іконки Swiper */
.swiper-button-prev-gal::after,
.swiper-button-next-gal::after {
  display: none;
}

/* ===== ДЕСКТОПИ ===== */

/* 1920+ — як на твоєму максі */
@media (min-width: 1920px) {
  .swiper-button-prev-gal {
    left: 32vw;
  }
  .swiper-button-next-gal {
    right: 32vw;
  }
}

/* 1440–1919 — трохи ближче до центру, щоб не залазити на фото */
@media (min-width: 1440px) and (max-width: 1919px) {
  .swiper-button-prev-gal {
    left: 28vw;
  }
  .swiper-button-next-gal {
    right: 28vw;
  }
}

/* 1024–1439 — ще ближче */
@media (min-width: 1024px) and (max-width: 1439px) {
  .swiper-button-prev-gal {
    left: 32vw;
  }
  .swiper-button-next-gal {
    right: 32vw;
  }
}

/* ===== МОБІЛКА / ПЛАНШЕТ (1024 і нижче) ===== */
@media (max-width: 1024px) {
  /* даємо місце під стрілки */
  .swiper.gal {
    padding-bottom: 60px;
  }

  .swiper-button-prev-gal,
  .swiper-button-next-gal {
    top: 95%; /* стрілки внизу під слайдом */
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
  }

  .swiper-button-prev-gal {
    left: 35%;
    right: auto;
  }

  .swiper-button-next-gal {
    right: 35%;
    left: auto;
  }
}

/* Анімація тільки для слайдів другого свайпера */
#mySwiper .swiper-slide {
  transition: opacity 0.3s ease-in-out;
  opacity: 0.4;
}
#mySwiper .swiper-slide-active {
  opacity: 1;
}

/* Пагінація другого */
.swiper-pagination-gal {
  position: relative;
  top: 80px;
  z-index: 10;
}

.delivery-wrap {
  position: relative;
  top: 0;
  transition: top 0.3s ease, box-shadow 0.3s ease;
}

.delivery-wrap:hover {
  top: -10px;
  box-shadow: 0 20px 40px #d7c25533; /* напівпрозора золота */
}

@media (max-width: 767px) {
  .delivery-wrap:hover {
    top: 0;
    box-shadow: none;
  }
}

/* базовий стан іконки */
.btn-icn {
  transition: transform 0.3s ease;
  transform-origin: center;
}

/* ховер по блокy */
.delivery-wrap:hover .btn-icn {
  transform: rotate(130deg);
}

/* ==== STEP CARDS ==== */
.steps-item {
  position: relative;
  top: 0;
  transition: top 0.3s ease, box-shadow 0.3s ease;
}

.steps-item:hover {
  top: -8px;
  box-shadow: 0 14px 30px #d7c25533; /* м’яка золота тінь */
}

/* mobile fix */
@media (max-width: 767px) {
  .steps-item:hover {
    top: 0;
    box-shadow: none;
  }
}
