/* =========================
   CAROUSEL BASE
   ========================= */
.loop-carousel {
  width: 100%;
  position: relative;
  padding-top: 40px; /* arrows ke liye space */
}

/* =========================
   SWIPER WRAPPER
   ❌ overflow-x removed (swiper control only)
   ========================= */
.loop-carousel .swiper-wrapper {
  display: flex;
  overflow: visible;
}

/* =========================
   SLIDES
   ========================= */
.loop-carousel .swiper-slide {
  flex-shrink: 0;
}

/* Images */
.loop-carousel img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================
   NAVIGATION (TOP RIGHT – TEXT ARROWS)
   ========================= */
.loop-carousel .swiper-button-next, .loop-carousel .swiper-button-prev {
    position: absolute;
    top: -28px;
    width: auto;
    height: auto;
    background: none;
    margin: 0;
    font-size: 40px;
    font-weight: 500;
    color: #000;
    cursor: pointer;
    z-index: 9999;
    pointer-events: auto;
    margin-right: 20px;
}

/* Right alignment */
.loop-carousel .swiper-button-next {
  right: 0;
}

.loop-carousel .swiper-button-prev {
  right: 48px;
  left: auto;
}

/* Remove default Swiper icons */
.loop-carousel .swiper-button-next::after,
.loop-carousel .swiper-button-prev::after {
  display: none;
}

/* Text arrows */
.loop-carousel .swiper-button-prev::before {
  content: "←";
}

.loop-carousel .swiper-button-next::before {
  content: "→";
}

/* Hover effect */
.loop-carousel .swiper-button-next:hover,
.loop-carousel .swiper-button-prev:hover {
  color: #555;
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 768px) {
  .loop-carousel .swiper-button-next,
  .loop-carousel .swiper-button-prev {
    display: none;
  }
}