/* =========================================================
   SWIPER BASE
========================================================= */

.main-swiper {
  width: 100%;
  max-width: 1200px;
  height: calc(100vh - 140px);

  margin: 0 auto 40px;
  padding-top: 100px;

  display: flex;
  align-items: flex-start;
  overflow: hidden;
}

.main-swiper .swiper-wrapper {
  height: auto;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.main-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  will-change: transform;
}


/* =========================================================
   MOBILE SWIPER
========================================================= */

@media (max-width: 768px) {
  .main-swiper {
    height: auto;
    min-height: unset;
    padding-bottom: 120px;
    overflow: visible;
  }

  .main-swiper .swiper-slide {
    height: auto;
    align-items: flex-start;
    padding-bottom: 40px;
  }
}


/* =========================================================
   SWIPER PAGINATION (DESKTOP ONLY)
========================================================= */

.swiper-pagination {
  bottom: 20px !important;

  display: flex;
  justify-content: center;
  align-items: center;

  gap: 6px;
  padding: 12px 0;
  width: 30%;

  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);

  border-radius: 999px;

  background: linear-gradient(
    to right,
    rgba(30, 79, 163, 0.9),
    rgba(22, 61, 122, 0.9)
  );

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  box-shadow:
    0 6px 20px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.15);
}

.swiper-pagination-bullet {
  width: 14px;
  height: 14px;

  background: rgba(255,255,255,0.4);
  opacity: 1;

  transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
  background: var(--green-accent);
  transform: scale(1.3);

  box-shadow:
    0 0 8px rgba(76,175,80,0.6),
    0 0 16px rgba(76,175,80,0.3);
}


/* =========================================================
   MOBILE PAGINATION
========================================================= */

@media (max-width: 768px) {
  .swiper-pagination {
    display: none !important;
  }
}