.splide .splide__arrow {
  background-color: var(--slider-btn-background);
  transform: scale(1.2);
  border: 2px solid var(--slider-btn-backgroun);
  opacity: 1;
  transition: all 0.3s ease;
}

.splide .splide__arrow svg {
  fill: none;
  width: 0.9rem;
  height: 0.9rem;
}

.splide .splide__arrow:hover svg {
  fill: none;
  transition: all 0.3s ease;
}

/* Optional: hover effect */
.splide__arrow:hover {
  background-color: #eff6ff; /* light blue */
}

#hero-slider .splide__pagination {
  gap: 0.9rem;
  margin-right: 1rem;
}

#hero-slider .splide__pagination__page {
  background: #fff; /* inactive color */
  width: 8px;
  height: 8px;
  opacity: 1;
}

#hero-slider .splide__pagination__page.is-active {
  outline: 1px solid #fff;
  outline-offset: 6px;
}

#services-carousel .splide__pagination {
  position: absolute;
  bottom: -70px;
  gap: 0.9rem;
  margin-right: 1rem;
}

#services-carousel .splide__pagination__page {
  background: #c9c9c9; /* inactive color */
  width: 8px;
  height: 8px;
  opacity: 1;
}

#services-carousel .splide__pagination__page.is-active {
  outline: 1px solid #cfcfcf;
  outline-offset: 6px;
}

.splide {
  position: relative;
}

.splide__arrows {
  position: absolute;
  right: max(1rem, calc((100vw - 1280px) / 2 + 2rem));
  bottom: -70px; /* pushes it below the slider */
  display: flex;
  gap: 10px;
}

.services-carousel .splide__arrow,
.testimonial-carousel .splide__arrow,
.expert-carousel .splide__arrow {
  position: static; /* remove absolute positioning */
  transform: none;
}

.splide__arrow {
  width: 60px;
  height: 60px;
}

/* =========================
   ACTIVE SLIDE = HOVER (Mobile)
   ========================= */

@media (max-width: 768px) {
  #hero-slider .splide__pagination {
    margin-bottom: 1rem;
  }

  .splide__slide.is-active .blur-overlay {
    opacity: 1;
  }

  .splide__slide.is-active .card-description {
    max-height: 200px;
    grid-template-rows: 1fr;
  }

  .splide__slide.is-active .card-text {
    transform: translateY(-8px);
    opacity: 1;
  }

  /* Optional: make active card pop more */
  .splide__slide.is-active {
    z-index: 10;
  }
}

/* =========================
   DESKTOP HOVER ONLY
   ========================= */

@media (hover: hover) {
  .group:hover .blur-overlay {
    opacity: 1;
  }

  .group:hover .card-description {
    max-height: 200px;
  }

  .group:hover .card-text {
    transform: translateY(-8px);
  }
}