/* Header blur */
    #mainHeader {
      background-color: rgba(255,255,255,0.85);
      backdrop-filter: blur(10px);
    }

/* Subcategory section */
.subcategory-section {
  position: relative;
  overflow: hidden;
  min-height: 450px;   /* 500 desktop baseline */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  padding: 0 0;     /* extra breathing space  4rem 0 */
  height: auto;        /* allow content to grow */
  background: #eaf6ef;
  border-bottom: solid 1px #e9e9e9;
}

/* Parallax background */
.parallax-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: -20%;        /* extend above so translate won't reveal gap */
  bottom: -20%;     /* extend below so translate won't reveal gap */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
  will-change: transform;
  transform: translateY(0);
  /*background-image: url('gfx/your-architecture-image1.jpg');*/
}
    /* Gradient overlay */
    .overlay-gradient {
      position: absolute;
      inset: 0;
      background: #a7a7a725;
      z-index: 1;
    }

    /* Floating bubbles */
    .bubble {
      position: absolute;
      border-radius: 50%;
      opacity: 0.15;
      animation: float 25s infinite linear;
      z-index: 2;
    }
    @keyframes float {
      0% { transform: translateY(0) translateX(0); }
      50% { transform: translateY(-50px) translateX(30px); }
      100% { transform: translateY(0) translateX(0); }
    }

    /* Content above background */
    .section-content {
      position: relative;
      z-index: 3;
      max-width: 72rem;
      width: 100%;
      padding: 0;
    }

    /* Swiper slides */
    .swiper-slide {
      flex-shrink: 0;
      background: white;
      /* border-radius: 1rem; */
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

/*    .swiper-slide:hover {
      box-shadow: 0 10px 20px rgba(0,0,0,0.3);
      z-index: 10;
    }
*/
    /* Alternate section tint */
    .subcategory-section.alt .overlay-gradient {
      background: #f2f9f5;
      border-bottom: solid 1px #e9e9e9;
    }
    .parallax-bg.alt {
    /*background-image: url('gfx/your-architecture-image2.jpg');*/
    }



    .text-shadow {
    text-shadow: 2px 3px 3px rgba(0,0,0,0.3);
}
.swiper-slide {
  flex-shrink: 0;
  background: white;
  /* border-radius: 1rem; */
  overflow: visible; /* <-- was hidden, change to visible */
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 1; /* ensure slides start behind hover */
  overflow: hidden !important;
  box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}

.swiper-slide:hover {
/*  transform: translateY(-10px) scale(1.05); /* slight zoom */
/*  box-shadow: 0 20px 30px rgba(0,0,0,0.3);*/
      transform: translateY(-5px);
  z-index: 50; /* bring hovered slide above others */
}
.swiper-wrapper {
  overflow: visible !important; /* allows slides to pop out */
  padding: 20px 0;
}
.bubble {
  pointer-events: none;
}

/* Mobile adjustments */
/*
    @media (max-width: 768px) {
      .subcategory-section { height: 400px; }
    }
*/
@media (max-width: 768px) {
  .subcategory-section {
    min-height: auto;   /* no hard min height */
    padding: 2rem 1rem; /* tighter padding */
  }
  .parallax-bg {
    top: -10%;
    bottom: -10%;  }
}

@media (max-width: 768px) {
  .mySwiper .carousel-prev,
  .mySwiper .carousel-next {
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    opacity: 0.9;
  }
}