/*****************************
*  SWIPPER
******************************/
.f__swiper {
  margin: initial;
}

.f__swiper .swiper-wrapper {
  margin: initial;
}

.f__swiper .swiper-slide {
  height: initial !important;
}

.f__swiper .swiper-pagination {
  width: 40px;
  position: relative !important;
  bottom: 0;
}

.f__swiper .swiper-pagination-bullet-active {
  background: var(--f-color-secondary);
  width: 24px;
  border-radius: var(--f-radius-sm);
}

.f__swiper-cta,
.f__section-cta {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--f-gap-md);
}

.f__swiper-cta .btn,
.f__section-cta .btn {
  margin: 0;
}

.f__swiper-navigation {
  margin-left: initial;
  display: flex;
  align-items: center;
  gap: var(--f-gap-sm);
}

.f__swiper-button-prev,
.f__swiper-button-next {
  width: 40px;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  background: transparent;
  color: var(--f-color-strong-dark-green);
  border: 1px solid var(--f-color-strong-dark-green);
  border-radius: var(--f-radius-md);
  cursor: pointer;
  outline: none;
}

.f__swiper-button-prev:not(.swiper-button-disabled):hover,
.f__swiper-button-next:not(.swiper-button-disabled):hover,
.f__swiper-button-prev:not(.swiper-button-disabled):focus,
.f__swiper-button-next:not(.swiper-button-disabled):focus {
  background-color: var(--f-color-spring-green);
  outline: none;
}

.f__swiper-button-next.swiper-button-disabled,
.f__swiper-button-prev.swiper-button-disabled {
  opacity: .4;
  pointer-events: none;
}

.f__swiper-button-prev svg,
.f__swiper-button-next svg {
  width: 18px;
}

/*****************************
  *  MEDIA QUERIES
  ******************************/
@media (min-width: 768px) {

  .f__swiper-cta,
  .f__section-cta {
    flex-direction: row;
    align-items: stretch;
    gap: var(--f-gap-lg);
  }

  .f__swiper-navigation {
    margin-left: auto;
  }
}