/* ==========================================================================
   Finnet theme — sliders.css
   Carousels: .blog_slider, .clients_slider, .testimonials_slider, plus the
   shared pagination dots and prev/next arrows.
   (The hero Slider Revolution rebuild is in rev.css, not here.)

   ---- CONTRACT WITH main.js -------------------------------------------------
   The captured markup is a plain <ul> of <li> slides. The JS must:

   1. Add .fn-slider to the carousel root (.blog_slider / .clients_slider /
      .testimonials_slider) once it has been initialised. Until then the <ul>
      keeps the reference's opacity:0 so nothing jumps.
   2. Add .fn-track to the <ul> (.blog_slider_ul / .clients_slider_ul /
      .testimonials_slider_ul). The track is a flex row; JS moves it with
      style="transform: translateX(-N%)" (N = index * 100 / slidesPerView).
   3. Set --fn-cols on the track = slides visible at once. Source values:
        blog_slider      → data-count (home: 1, News page: 5)  → 1/2/3/4 clamp
        clients_slider   → data-client-per-slide (home: 6)
        testimonials     → 1
      Responsive clamps are done in CSS below (tablet/mobile), so JS can keep
      the desktop value in --fn-cols.
   4. Mark the slide(s) in view with .is-active on the <li> (used for
      accessibility + the testimonial fade).
   5. Dots: build <li><a></a></li> inside .slider_pager.slider_pagination,
      and put .selected on the current <a>.
   6. Arrows: inside .blog_slider_header .slider_navigation insert
        <a class="button button_js slider_prev" href="#"><i class="icon-left-open-big"></i></a>
        <a class="button button_js slider_next" href="#"><i class="icon-right-open-big"></i></a>
      For testimonials the same two <a>s go directly inside .testimonials_slider
      (they are absolutely positioned left/right of the quote).
   7. .is-disabled on an arrow when it cannot move further (non-loop mode).
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Generic track
   -------------------------------------------------------------------------- */
.fn-slider {
  position: relative;
}

.fn-slider .fn-track {
  --fn-cols: 1;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  margin: 0 !important;
  padding: 0;
  list-style: none;
  opacity: 1 !important;
  max-height: none !important;
  will-change: transform;
  transition: transform 0.5s ease-in-out;
}

.fn-slider .fn-track > li {
  flex: 0 0 calc(100% / var(--fn-cols));
  max-width: calc(100% / var(--fn-cols));
  float: none !important;
  width: auto !important;
  box-sizing: border-box;
}

.fn-slider .fn-viewport,
.fn-slider .fn-track {
  overflow: visible;
}

/* the clipping window: the <ul> itself is the track, so clip at the root */
.blog_slider.fn-slider .blog_slider_ul,
.clients_slider.fn-slider .clients_slider_ul,
.testimonials_slider.fn-slider .testimonials_slider_ul {
  overflow: hidden;
}

.blog_slider.fn-slider .blog_slider_ul.fn-track,
.clients_slider.fn-slider .clients_slider_ul.fn-track,
.testimonials_slider.fn-slider .testimonials_slider_ul.fn-track {
  overflow: visible;
}

.blog_slider.fn-slider,
.clients_slider.fn-slider,
.testimonials_slider.fn-slider {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Pagination dots — .slider_pager.slider_pagination (active <a>: .selected)
   -------------------------------------------------------------------------- */
.slider_pagination {
  margin: 0;
  padding: 0;
  text-align: center;
  line-height: 0;
  list-style: none;
}

.slider_pagination li {
  display: inline-block;
  list-style: none;
}

.slider_pagination a {
  display: inline-block;
  position: relative;
  width: 12px;
  height: 12px;
  margin: 4px 8px;
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
  border-radius: 100%;
  background: rgba(0, 0, 0, 0.15);
  transition: background 0.2s ease-in-out;
}

.slider_pagination a:hover {
  background: rgba(0, 0, 0, 0.25);
}

.slider_pagination a.selected,
.slider_pagination .slick-active a {
  background-color: #283c92;
}

.slider_pagination a.selected:after,
.slider_pagination .slick-active a:after {
  background-color: #283c92;
}

/* --------------------------------------------------------------------------
   Prev / next arrows (JS-inserted .button.button_js.slider_prev/.slider_next)
   Header arrows (blog & clients) are square "soft" buttons; the testimonial
   arrows are round and sit beside the quote.
   -------------------------------------------------------------------------- */
.slider_navigation .slider_prev,
.slider_navigation .slider_next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 52px;
  margin-left: 0;
  padding: 16px 40px;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  border-radius: 8px;
  background-color: #ededff;
  color: #2a27e9;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.slider_navigation .slider_next { margin-left: 5px; }
/* the client-logo strip uses the compact 40px arrows */
.clients_slider .slider_navigation .slider_prev,
.clients_slider .slider_navigation .slider_next { width: 40px; height: 40px; padding: 5px; }

.slider_navigation .slider_prev:hover,
.slider_navigation .slider_next:hover {
  background-color: #dbdbff;
  color: #2a27e9;
  text-decoration: none;
}

.slider_navigation .slider_prev i:before,
.slider_navigation .slider_next i:before {
  margin: 0;
}

.slider_prev.is-disabled,
.slider_next.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   column_blog_slider — .blog_slider
   Static card look is in blog.css; here only the carousel-specific bits.
   -------------------------------------------------------------------------- */
.blog_slider .blog_slider_ul {
  opacity: 0;
  max-height: 219px;
  transition: opacity 0.3s ease-in-out;
}

.blog_slider .slider_pager {
  margin-top: 15px;
}

.blog_slider .slider_pager li {
  display: inline-block;
}

/* --------------------------------------------------------------------------
   column_clients_slider — .clients_slider (logo strip, 6 per view)
   -------------------------------------------------------------------------- */
.clients_slider {
  position: relative;
}

.clients_slider .blog_slider_header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 15px;
}

.clients_slider ul {
  opacity: 0;
  max-height: 115px;
  transition: opacity 0.3s ease-in-out;
}

.clients_slider .clients_slider_ul {
  margin: 0 !important;
  list-style: none;
}

.clients_slider .clients_slider_ul li {
  float: left;
  width: 16.666%;
  margin: 0 !important;
}

.clients_slider.fn-slider .clients_slider_ul.fn-track {
  align-items: center;
}

[data-navigation-position="content"] .clients_slider_ul {
  display: flex;
  align-items: center;
}

.clients_slider .client_wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 95px;
  margin: 10px;
  padding: 10px 15px;
  line-height: 0;
  text-align: center;
  background: rgba(0, 0, 0, 0.01);
  transition: all 0.4s ease-in-out;
}

.clients_slider .client_wrapper:hover {
  background: rgba(0, 0, 0, 0.05);
}

.clients_slider .client_wrapper a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.clients_slider .client_wrapper img {
  width: 100%;
  height: auto;
  transition: all 0.4s ease-in-out;
}

/* --------------------------------------------------------------------------
   column_testimonials — .testimonials_slider.single-photo.hide-photos
   One quote at a time, centred, round arrows on both sides.
   -------------------------------------------------------------------------- */
.testimonials_slider {
  position: relative;
}

.testimonials_slider .testimonials_slider_ul {
  margin: 0 !important;
  opacity: 0;
  max-height: 250px;
  list-style: none;
  transition: opacity 0.3s ease-in-out;
}

.testimonials_slider .testimonials_slider_ul li {
  float: left;
  width: 100%;
  padding: 0 80px;
  box-sizing: border-box;
  list-style: none;
}

.testimonials_slider .testimonials_slider_ul li .bq_wrapper {
  margin-bottom: 20px;
  padding: 0 40px 1px;
  background: rgba(0, 0, 0, 0.02);
}
.testimonials_slider .bq_wrapper blockquote {
  font-style: italic;
  font-size: 17px;
  line-height: 25px;
}

.testimonials_slider .testimonials_slider_ul li .hr_dots {
  margin-bottom: 15px;
}

.testimonials_slider .testimonials_slider_ul li .author {
  text-align: center;
}

.testimonials_slider .testimonials_slider_ul li .author h5 {
  margin-bottom: 2px;
}

.testimonials_slider .testimonials_slider_ul li .author span,
.testimonials_slider .testimonials_slider_ul li .author span a {
  color: #282828;
}

.testimonials_slider .testimonials_slider_ul li .single-photo-img {
  display: none;
}

.column:not(.one) .testimonials_slider:not(.single-photo) a.slider_prev,
.column:not(.one) .testimonials_slider:not(.single-photo) a.slider_next,
.testimonials_slider.hide-photos .testimonials_slider_ul li .single-photo-img {
  display: none !important;
}

.column:not(.one) .testimonials_slider:not(.single-photo) .testimonials_slider_ul li {
  padding: 0 20px;
}

/* single-photo layout (the one this site uses) */
.testimonials_slider.single-photo .testimonials_slider_ul li {
  padding: 0;
  text-align: center;
}

.testimonials_slider.single-photo .testimonials_slider_ul li .bq_wrapper {
  margin: 0 6% 20px;
}

.testimonials_slider.single-photo .testimonials_slider_ul li .single-photo-img {
  display: block;
  width: 85px;
  height: 85px;
  margin: 0 auto 20px;
  overflow: hidden;
  line-height: 0;
  border-radius: 50%;
}

.testimonials_slider.single-photo .slider_pager {
  margin-top: 30px;
}

.testimonials_slider.single-photo .slider_pager li {
  display: inline-block;
}

.testimonials_slider.single-photo .slider_pager li a {
  top: 0;
}

.testimonials_slider.single-photo .slider_pager li a img {
  display: none;
}

/* the quote in the testimonial: no left offset, centred text */
.testimonials_slider .bq_wrapper blockquote {
  margin: 0 0 25px;
  top: 0;
  text-align: center;
}

.testimonials_slider .bq_wrapper .mfn-blockquote-icon {
  display: none; /* the previous build did not show the quote glyph here */
}

/* arrows beside the quote (inserted directly into .testimonials_slider) */
.testimonials_slider { position: relative; }
.testimonials_slider > .slider_prev,
.testimonials_slider > .slider_next {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 30px;
  z-index: 5;
  width: 96px;
  height: 52px;
  padding: 16px 40px;
  font-size: 16px;
  line-height: 20px;
  text-decoration: none;
  border-radius: 8px;
  background-color: #ededff;
  color: #2a27e9;
  transition: background-color 0.2s ease-in-out;
}
.testimonials_slider > .slider_prev:hover,
.testimonials_slider > .slider_next:hover { background-color: #dbdbff; }
.testimonials_slider > .slider_prev { left: 0; }
.testimonials_slider > .slider_next { right: 0; }
@media only screen and (max-width: 767px) {
  .testimonials_slider > .slider_prev, .testimonials_slider > .slider_next { display: none; }
}

.testimonials_slider > .slider_prev {
  left: 0;
}

.testimonials_slider > .slider_next {
  right: 0;
}

.testimonials_slider > .slider_prev:hover,
.testimonials_slider > .slider_next:hover {
  background: #283c92;
  color: #fff;
  text-decoration: none;
}

.testimonials_slider > .slider_prev i:before,
.testimonials_slider > .slider_next i:before {
  margin: 0;
}

/* fade between quotes instead of sliding when the JS prefers it */
.testimonials_slider.fn-fade .testimonials_slider_ul.fn-track {
  display: block;
  transform: none !important;
  transition: none;
}

.testimonials_slider.fn-fade .testimonials_slider_ul.fn-track > li {
  display: none;
  max-width: none;
  animation: fnSlideFade 0.4s ease-in-out;
}

.testimonials_slider.fn-fade .testimonials_slider_ul.fn-track > li.is-active {
  display: block;
}

@keyframes fnSlideFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Responsive — slides per view clamps (JS keeps the desktop --fn-cols)
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 960px) and (max-width: 1239px) {
  .blog_slider.fn-slider .fn-track > li {
    flex-basis: calc(100% / min(var(--fn-cols), 3));
    max-width: calc(100% / min(var(--fn-cols), 3));
  }

  .clients_slider.fn-slider .fn-track > li {
    flex-basis: calc(100% / min(var(--fn-cols), 5));
    max-width: calc(100% / min(var(--fn-cols), 5));
  }
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
  .blog_slider.fn-slider .fn-track > li {
    flex-basis: calc(100% / min(var(--fn-cols), 2));
    max-width: calc(100% / min(var(--fn-cols), 2));
  }

  .clients_slider.fn-slider .fn-track > li {
    flex-basis: calc(100% / min(var(--fn-cols), 4));
    max-width: calc(100% / min(var(--fn-cols), 4));
  }
}

@media only screen and (max-width: 767px) {
  .blog_slider.fn-slider .fn-track > li {
    flex-basis: 100%;
    max-width: 100%;
  }

  .clients_slider.fn-slider .fn-track > li {
    flex-basis: calc(100% / min(var(--fn-cols), 2));
    max-width: calc(100% / min(var(--fn-cols), 2));
  }

  .clients_slider .clients_slider_ul li {
    width: 50%;
  }

  .testimonials_slider .testimonials_slider_ul li {
    padding: 0 40px;
  }

  .testimonials_slider.single-photo .testimonials_slider_ul li .bq_wrapper {
    margin: 0 0 20px;
    padding: 30px 20px 10px;
  }

}

@media only screen and (max-width: 479px) {
  .testimonials_slider .testimonials_slider_ul li {
    padding: 0;
  }

  .testimonials_slider > .slider_prev,
  .testimonials_slider > .slider_next {
    width: 32px;
    height: 32px;
    margin-top: -16px;
  }
}

/* Client logos fill their cell, as before */
.clients_slider_ul li .client_wrapper a { display: flex; }
.clients_slider_ul li .client_wrapper img { width: 100%; height: auto; }

/* Testimonial slides keep their own height; the track follows the active one (JS) */
.testimonials_slider .fn-track { align-items: flex-start; overflow: hidden; transition: height 0.3s ease-out, transform 0.5s ease-in-out; }