/* Hero */
/* ================================
   Base Styles for Image Carousel
================================= */
.hero-slider .elementor-image-carousel-wrapper {
  padding-bottom: 0;
  border-radius: 32px; /* Default large screens */
  overflow: hidden;    /* مهم: برای اعمال شدن border-radius */
}

.hero-slider .elementor-widget-image-carousel {
  line-height: 0 !important; /* Remove extra spacing */
}

.hero-slider .elementor-image-carousel-wrapper .swiper-pagination {
  position: absolute !important;
  bottom: 10px !important; /* Default distance from bottom */
  left: 0;
  right: 0;
  margin: 0 auto !important; /* Center pagination */
}

/* ================================
   Arrows (Desktop Default)
================================= */
.hero-slider .elementor-swiper-button.elementor-swiper-button-prev {
  top: 50% !important;
  left: 0 !important;
  background-color: #fbfcff;
  padding: 20px 12px;
  border-radius: 0 20px 20px 0;
}

.hero-slider .elementor-swiper-button.elementor-swiper-button-next {
  top: 50% !important;
  right: 0 !important;
  background-color: #fbfcff;
  padding: 20px 12px;
  border-radius: 20px 0 0 20px;
}

/* ================================
   Pagination Bullets
================================= */
.hero-slider .swiper-pagination-bullet {
  border-radius: 20px;
  width: 20px;
  height: 8px;
  background-color: rgba(44, 198, 128, 0.24);
  transition: all 0.3s ease; /* Smooth transition */
  margin: 0 4px; /* Default spacing between bullets */
}

.hero-slider .swiper-pagination-bullet-active {
  width: 35px !important;
  background-color: #2cc680 !important; /* Active bullet color */
}

/* ================================
   SVG Arrows Color
================================= */
.hero-slider .elementor-swiper-button svg path {
  fill: #1e305a !important; /* Dark blue arrow color */
}

/* ================================
   Tablet (≤ 1024px)
================================= */
@media (max-width: 1024px) {
  /* Carousel border radius */
  .hero-slider .elementor-image-carousel-wrapper {
    border-radius: 18px;
  }

  /* Prev Arrow */
  .hero-slider .elementor-swiper-button.elementor-swiper-button-prev {
    top: 50% !important;
    left: 0 !important;
    background-color: #fbfcff;
    padding: 12px 8px !important;
    border-radius: 0 16px 16px 0 !important;
  }

  /* Next Arrow */
  .hero-slider .elementor-swiper-button.elementor-swiper-button-next {
    top: 50% !important;
    right: 0 !important;
    background-color: #fbfcff;
    padding: 12px 8px !important;
    border-radius: 16px 0 0 16px !important;
  }
}

/* ================================
   Mobile (≤ 767px)
================================= */
@media (max-width: 767px) {
  /* Carousel border radius فقط روی پرنت */
  .hero-slider .elementor-image-carousel-wrapper {
    border-radius: 12px !important;
    overflow: hidden; /* برای اعمال صحیح گوشه‌ها */
  }

  /* Hide arrows */
  .hero-slider .elementor-swiper-button.elementor-swiper-button-prev,
  .hero-slider .elementor-swiper-button.elementor-swiper-button-next {
    display: none !important;
  }

  /* Pagination bullets کوچکتر */
  .hero-slider .swiper-pagination-bullet {
    height: 4px;
    margin: 0 2px;
  }

  /* Pagination بالاتر بیاد (۸px) */
  .hero-slider .elementor-image-carousel-wrapper .swiper-pagination {
    bottom: 18px !important;   /* 10 + 8 */
    transform: translateY(-8px);
  }
}

/* Remove extra spacing inside the carousel wrapper */
.hero-slider .elementor-image-carousel-wrapper,
.hero-slider .elementor-widget-image-carousel,
.hero-slider .swiper-wrapper,
.hero-slider .swiper-slide {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

/* Ensure images take full slide height without extra bottom space */
.hero-slider .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
}