/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 13 2026 | 14:16:26 */
/*
 * biggym-slider.css
 * Bleed slider for Elementor Pro containers.
 *
 * Structure (CSS classes set in Elementor > Advanced > CSS Classes):
 *   Container .biggym-slider            (Full Width, padding left/right 0)
 *     Container .biggym-slider__track   (Full Width, Direction: row)
 *       Container .biggym-slider__card  (one per slide: Image, Heading, Button)
 *
 * The progress bar, arrows and edge fades are added by biggym-slider.js.
 */

.biggym-slider {
  /* ---- Tweakable settings -------------------------------------------- */
  --bs-content-width: 1600px;      /* match your site's boxed content width */
  --bs-min-gutter: 20px;           /* smallest side space on narrow screens */
  --bs-gap: 24px;                  /* space between cards */
  --bs-per-view: 4;                /* cards that fit inside the content width */
  --bs-image-ratio: 15 / 16;
  --bs-radius: 24px;
  --bs-card-border: 2px solid rgba(255, 255, 255, 0.2);
  --bs-fade-color: #000;           /* match the section background */
  --bs-fade-strength: 0.85;        /* 0 = no darkening, 1 = solid at the edge */
  --bs-fade-overlap: 6cqi;         /* how far the fade reaches into the content area */
  --bs-controls-gap: 48px;         /* space between cards and progress bar */
  --bs-progress-width: 46%;
  --bs-progress-height: 4px;
  --bs-progress-track: rgba(255, 255, 255, 0.25);
  --bs-progress-fill: #fff;
  --bs-arrow-color: #fff;

  /* ---- Derived values (resolved against this element via cqi) -------- */
  --bs-gutter: max(var(--bs-min-gutter), (100cqi - var(--bs-content-width)) / 2);
  --bs-inner: min(var(--bs-content-width), 100cqi - 2 * var(--bs-min-gutter));
  --bs-card-width: calc((var(--bs-inner) - (var(--bs-per-view) - 1) * var(--bs-gap)) / var(--bs-per-view));

  container-type: inline-size;
  position: relative;
}

.biggym-slider.e-con {
  gap: 0;
  padding-left: 0;
  padding-right: 0;
}

.biggym-slider__stage {
  position: relative;
}

/* ---- Track ------------------------------------------------------------ */

.biggym-slider .e-con.biggym-slider__track,
.biggym-slider .biggym-slider__track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--bs-gap);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--bs-gutter);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.biggym-slider .biggym-slider__track::-webkit-scrollbar {
  display: none;
}

/*
 * Gutter spacers as real flex items, so the first card lines up with the
 * content edge and the last card can scroll fully into view in every browser.
 * "all: unset" clears Elementor's background-overlay pseudo-element styles.
 */
.biggym-slider .e-con.biggym-slider__track::before,
.biggym-slider .e-con.biggym-slider__track::after,
.biggym-slider .biggym-slider__track::before,
.biggym-slider .biggym-slider__track::after {
  all: unset;
  content: "";
  display: block;
  flex: 0 0 var(--bs-gutter);
}

.biggym-slider .e-con.biggym-slider__track::before,
.biggym-slider .biggym-slider__track::before {
  margin-inline-end: calc(var(--bs-gap) * -1);
}

.biggym-slider .e-con.biggym-slider__track::after,
.biggym-slider .biggym-slider__track::after {
  margin-inline-start: calc(var(--bs-gap) * -1);
}

/* ---- Cards ------------------------------------------------------------ */

.biggym-slider .e-con.biggym-slider__card,
.biggym-slider .biggym-slider__card {
  box-sizing: border-box;
  flex: 0 0 var(--bs-card-width);
  width: var(--bs-card-width);
  min-width: 0;
  max-width: none;
  margin: 0;
  scroll-snap-align: start;
}

/*
 * The last card snaps by its end edge, which (with scroll-padding = gutter)
 * is exactly the content edge at full scroll. Without this, browsers that
 * don't clamp the unreachable "start" snap point of the last card snap back
 * to the previous card and leave the last card bleeding out on the right.
 */
.biggym-slider .e-con.biggym-slider__card:last-child,
.biggym-slider .biggym-slider__card:last-child {
  scroll-snap-align: end;
}

.biggym-slider .biggym-slider__card .elementor-widget-image img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: var(--bs-image-ratio);
  object-fit: cover;
  border: var(--bs-card-border);
  border-radius: var(--bs-radius);
  -webkit-user-drag: none;
}

/* ---- Edge fades (left and right bleed) ------------------------------- */

.biggym-slider__fade {
  position: absolute;
  z-index: 2;
  top: 0;
  height: 0;
  width: calc(var(--bs-gutter) + var(--bs-fade-overlap));
  opacity: 0;
  pointer-events: none;
}

.biggym-slider__fade::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--bs-fade-strength);
}

.biggym-slider__fade--start {
  left: 0;
}

.biggym-slider__fade--start::before {
  background: linear-gradient(to left, transparent, var(--bs-fade-color));
}

.biggym-slider__fade--end {
  right: 0;
}

.biggym-slider__fade--end::before {
  background: linear-gradient(to right, transparent, var(--bs-fade-color));
}

/* ---- Controls --------------------------------------------------------- */

.biggym-slider__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: var(--bs-controls-gap);
  margin-inline: var(--bs-gutter);
}

.biggym-slider.is-static .biggym-slider__controls {
  display: none;
}

.biggym-slider__progress {
  position: relative;
  flex: 0 1 var(--bs-progress-width);
  height: var(--bs-progress-height);
  overflow: hidden;
  border-radius: calc(var(--bs-progress-height) / 2);
  background: var(--bs-progress-track);
}

.biggym-slider__progress-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-radius: inherit;
  background: var(--bs-progress-fill);
}

.biggym-slider__nav {
  display: flex;
  gap: 24px;
}

/* Element + classes so theme button styles (e.g. Hello Elementor) don't win. */
.biggym-slider button.biggym-slider__arrow,
.biggym-slider button.biggym-slider__arrow:hover,
.biggym-slider button.biggym-slider__arrow:focus,
.biggym-slider button.biggym-slider__arrow:active {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  box-shadow: none;
  color: var(--bs-arrow-color);
  cursor: pointer;
}

.biggym-slider button.biggym-slider__arrow:focus-visible {
  outline: 2px solid var(--bs-arrow-color);
  outline-offset: 2px;
}

.biggym-slider button.biggym-slider__arrow[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}

.biggym-slider__arrow svg {
  width: 20px;
  height: 20px;
}

/* ---- Breakpoints (Elementor defaults: tablet 1024px, mobile 767px) --- */

@media (max-width: 1024px) {
  .biggym-slider {
    --bs-per-view: 2.3;
    --bs-controls-gap: 32px;
  }
}

@media (max-width: 767px) {
  .biggym-slider {
    --bs-per-view: 1.2;
    --bs-gap: 16px;
    --bs-progress-width: 60%;
  }
}