.hero-front_image {
  z-index: 2;
  /* CSS MASKING MAGIC:
       We use a radial gradient. 
       'transparent' is the hole. 
       'black' is the visible part.
       var(--x) and var(--y) are set by JS.
    */
  -webkit-mask-image: radial-gradient(
    circle 230px at var(--x, 50%) var(--y, 50%),
    transparent 25%,
    rgba(0, 0, 0, 0.2) 40%,
    /* This creates the blur edge */ black 80%
  );
  mask-image: radial-gradient(
    circle 230px at var(--x, 50%) var(--y, 50%),
    transparent 25%,
    rgba(0, 0, 0, 0.2) 40%,
    black 80%
  );

  /* Smooth ease for the movement if you want lag, remove transition for instant tracking */
  /* transition: -webkit-mask-image 0.05s linear, mask-image 0.05s linear; */
}
@media (max-width: 768px) {
  .hero-front_image {
    -webkit-mask-image: radial-gradient(
      circle 120px at var(--x, 50%) var(--y, 50%),
      transparent 20%,
      rgba(0, 0, 0, 0.2) 35%,
      black 70%
    );
    mask-image: radial-gradient(
      circle 120px at var(--x, 50%) var(--y, 50%),
      transparent 20%,
      rgba(0, 0, 0, 0.2) 35%,
      black 70%
    );
  }
}
.featured-swiper .swiper-slide {
  width: 50% !important; /* Fully visible center */
  margin-right: 30px; /* Half-visible side slides */
}
.featured-swiper .swiper-slide {
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.featured-swiper .swiper-slide.scale-down {
  transform: scale(0.98);
}

.featured-swiper .swiper-slide-active.scale-down {
  transform: scale(0.98);
}
/* Hide the link that matches current page (JS adds inline style) */

/* ACTIVE NAV initial */
/* Wrapper always visible */

.nav-menu_custom {
  display: flex;
  align-items: center !important;
  justify-content: center;
}

/* Active Nav */
#active-nav {
  transition: opacity 0.25s ease;
}

/* Hamburger (+ icon) */
/* Disable click on plus icon */
.hamburger-plus {
  pointer-events: none;
  transition: transform 0.3s ease;
}

/* Rotate when hamburger icon opens */
.hamburger-icon.is-open .hamburger-plus {
  transform: rotate(45deg);
}

/* Reset when closed */
.hamburger-icon:not(.is-open) .hamburger-plus {
  transform: rotate(0deg);
}

/* Sub Navbar (hidden inline at first) */
/* Replace the current .sub-navbar styles with this: */
.sub-navbar {
  display: flex;
  align-items: center !important;
  justify-content: center;
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity 0.5s ease, width 0.5s ease;
  white-space: nowrap; /* Prevent text wrapping */
}

/* When open */
.sub-navbar.is-open {
  opacity: 1;
  width: 450px; /* Use auto instead of 100% */
}

/* Hide dynamically */
.sub-link[style*="display: none"] {
  display: none !important;
}
.testimonial-item {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

.testimonial-item.active {
  opacity: 1;
  position: relative;
  pointer-events: auto;
}
#proximity-grid {
  width: 100%;
  height: 90%;
  display: block;
  opacity: 8%;
}