/* Responsive sizes you can tweak in Customizer or Additional CSS */
:root {
  --arrow-size-desktop: 140px;
  --arrow-size-tablet: 110px;
  --arrow-size-mobile: 84px;

  --arrow-stroke: #17411D;
  --arrow-ring: #60a5fa;
  --arrow-fill: #ffffff;
  --arrow-travel: 12px;
}

.elementor-swiper-button-prev,
.elementor-swiper-button-next,
.swiper-button-prev,
.swiper-button-next {
  overflow: visible; /* allow tail to bleed out */
}

/* Put the component inside nav buttons */
.elementor-swiper-button-prev arrow-icon,
.elementor-swiper-button-next arrow-icon,
.swiper-button-prev arrow-icon,
.swiper-button-next arrow-icon {
  width: var(--arrow-size-desktop);
  display: inline-block;
  vertical-align: middle;
  /* Theme via CSS variables */
  --stroke: var(--arrow-stroke);
  --ring: var(--arrow-ring);
  --circle-fill: var(--arrow-fill);
  --travel: var(--arrow-travel);
}

/* Tablet */
@media (max-width: 1024px) {
  .elementor-swiper-button-prev arrow-icon,
  .elementor-swiper-button-next arrow-icon,
  .swiper-button-prev arrow-icon,
  .swiper-button-next arrow-icon {
    width: var(--arrow-size-tablet);
  }
}

/* Mobile */
@media (max-width: 767px) {
  .elementor-swiper-button-prev arrow-icon,
  .elementor-swiper-button-next arrow-icon,
  .swiper-button-prev arrow-icon,
  .swiper-button-next arrow-icon {
    width: var(--arrow-size-mobile);
  }
}