/******* Do not edit this file *******
Code Snippets Manager
Saved: Sep 05 2026 | 15:53:53 */
@charset "UTF-8";
/* ==========================================================================
   Center Carousel
   Elementor Loop Carousel — CSS class: center-carousel

   WIDGET SETTINGS:
     Slides Per View = 1, Loop = Yes, Space Between = 0   <-- set this to 0
     Arrows: Show
     Previous / Next Arrow → Horizontal Position = 0
     Previous / Next Arrow → Vertical Orientation = center, Position = 0

   The gap between cards is done here in CSS with slide padding, not with the
   widget's Space Between (which wasn't taking effect). Padding is safe where
   margin is not: it sits INSIDE the slide box, so the slide's outer width is
   unchanged and Swiper's translate math stays correct.
   ========================================================================== */
/* ---- Tunables ---- */
.center-carousel {
  --card-width: 60vw;
  /* center card width. Smaller = more side card shown */
  --card-gap: 20px;
  /* gap between cards — applied via slide padding below */
  --side-scale: 0.85;
  /* reminder only — set SCALE_SIDE in the JS */
  --arrow-size: 50px;
  --arrow-border-width: 4px;
  --arrow-border: var(--e-global-color-ebcf7b3);
  /* ring colour */
  --arrow-bg: #F2EAE0;
  /* circle fill */
  --arrow-bg-hover: var(--e-global-color-ebcf7b3);
  --arrow-color: #2E3352;
  /* icon colour */
}
/* Full-bleed wrapper — clips the side cards at the viewport edge */
.center-carousel {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  overflow: hidden;
}
/* Swiper is card-width and centered; overflow lets the neighbours spill out.
   position: relative makes it the containing block for the arrows.
   The extra width compensates for the slide padding so the VISIBLE card
   still measures --card-width. */
.center-carousel .swiper {
  width: calc(var(--card-width) + var(--card-gap));
  margin-inline: auto;
  overflow: visible !important;
  position: relative;
}
/* Half the gap on each side of every slide = --card-gap between cards */
.center-carousel .swiper-slide {
  height: auto;
  transform-origin: center center;
  padding-inline: calc(var(--card-gap) / 2);
  box-sizing: border-box;
}
/* Side cards shrink TOWARD the center card rather than away from it.
   With the default center origin, scaling to 0.85 pulls each side card's
   inner edge outward and opens a gap that isn't in the markup. */
.center-carousel .swiper-slide-prev {
  transform-origin: right center;
}
.center-carousel .swiper-slide-next {
  transform-origin: left center;
}
.center-carousel .swiper-slide-active {
  z-index: 2;
}
/* ---- Arrows: pinned to the card's own left/right edges ----
   Offset by half the gap so they sit on the VISIBLE card edge rather than
   the slide edge, which the padding has pushed outward.
   box-sizing: content-box keeps the circle at --arrow-size and puts the
   border OUTSIDE it. */
.center-carousel .elementor-swiper-button {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: var(--arrow-size);
  height: var(--arrow-size);
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: var(--arrow-border-width) solid var(--arrow-border) !important;
  background: var(--arrow-bg);
  color: var(--arrow-color);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  z-index: 5;
  cursor: pointer;
  transition: background 0.25s ease;
}
.center-carousel .elementor-swiper-button-prev {
  left: calc(var(--card-gap) / 2) !important;
  right: auto !important;
}
/* Next arrow is anchored from the RIGHT edge, so the X translate flips sign */
.center-carousel .elementor-swiper-button-next {
  left: auto !important;
  right: calc(var(--card-gap) / 2) !important;
  transform: translate(50%, -50%) !important;
}
/* Hover: colour only, no movement.
   The transform is REPEATED in each hover rule because a hover transform
   replaces the base one rather than adding to it — omitting it would snap
   the arrow out of position. !important beats Elementor's own ID-scoped
   hover rule, which nudges the arrows outward. */
.center-carousel .elementor-swiper-button:hover {
  background: var(--arrow-bg-hover);
}
.center-carousel .elementor-swiper-button-prev:hover {
  transform: translate(-50%, -50%) !important;
}
.center-carousel .elementor-swiper-button-next:hover {
  transform: translate(50%, -50%) !important;
}
/* Stop Elementor sliding the icon itself on hover */
.center-carousel .elementor-swiper-button svg, .center-carousel .elementor-swiper-button:hover svg, .center-carousel .elementor-swiper-button i, .center-carousel .elementor-swiper-button:hover i {
  transform: none !important;
  transition: none !important;
}
/* Elementor's arrows are SVGs with their own fill, so `color` alone won't
   reach them — the fill has to be set on the svg and its children. */
.center-carousel .elementor-swiper-button svg, .center-carousel .elementor-swiper-button svg * {
  fill: var(--arrow-color) !important;
  stroke: var(--arrow-color) !important;
}
.center-carousel .elementor-swiper-button svg, .center-carousel .elementor-swiper-button i {
  width: 20px;
  height: 20px;
  font-size: 18px;
}
/* ---- Mobile: one card, no side cards ---- */
@media (max-width: 767px) {
  /* No scale effect on mobile — every card renders full size */
  .center-carousel {
    --card-gap: 60px;
    /* 20px padding each side */
    --card-width: calc(100vw - var(--card-gap));
    --arrow-size: 36px;
    --arrow-border-width: 3px;
  }
  .center-carousel .swiper-slide {
    transform: none !important;
    transform-origin: center center !important;
  }
}
/* FarHarbor home Title Carousel Styling */
.title-carousel .swiper-slide {
  width: auto !important;
  flex-shrink: 0;
}
.title-carousel .elementor-heading-title, .title-carousel .elementor-heading-title a {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  text-decoration: none;
}
.title-carousel .swiper {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 80px), transparent 100%);
}