/* ============================================
   Fullscreen Hero Carousel (hero-slider.css)
   Simplified & bug‑fixed – 2025‑04‑17
   ============================================ */

/* Container */
.hero-carousel{
  position:relative;width:100%;height:65vh;overflow:hidden;
}

/* Slide */
.hero-slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  display:flex;justify-content:center;align-items:center;
  opacity:0;transition:opacity 1s ease;
}
.hero-slide.active{opacity:1;}

/* Text box */
.hero-text.left-lower{
  position:absolute;left:5%;bottom:8%;
  background:rgba(0,0,0,.4);padding:1.2rem 1.5rem;border-radius:8px;
}
.hero-text h2{font-size:2rem;margin-bottom:1rem;}
.hero-text p {font-size:1.2rem;margin-bottom:1.5rem;}
.hero-button{
  display:inline-block;background:#31eeda;color:#000;
  padding:.8rem 1.5rem;border-radius:4px;font-weight:bold;text-decoration:none;
  transition:background .3s ease;
}
.hero-button:hover{background:#1ca8a0;color:#fff;}

/* Nav buttons */
.hero-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(128,128,128,.4);color:#000;
  font-size:2rem;padding:.5rem 1rem;border-radius:50%;
  cursor:pointer;z-index:2;transition:background .3s;
}
.hero-nav:hover{background:rgba(128,128,128,.6);}
.hero-nav.left{left:30px;}
.hero-nav.right{right:30px;}

/* Indicator bar container */
.bar-container{
  position:absolute;bottom:40px;left:50%;transform:translateX(-50%);
  display:flex;gap:12px;z-index:2;
}

/* Bar */
.bar{position:relative;width:70px;height:4px;background:transparent;cursor:pointer;}
.bar::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.35);border-radius:2px;}
.bar-hitbox{position:absolute;left:-10px;top:-6px;width:calc(100% + 20px);height:calc(100% + 12px);}

.bar-fill
  {position:absolute;inset:0;height:100%;width:0%;
  background:#31eeda;}

@keyframes fill{from{width:0%}to{width:100%}}
.bar.active .bar-fill{
  animation:fill 5s forwards;
}

/* Auto toggle button */
.auto-toggle{
  position:absolute;right:30px;bottom:60px;
  width:40px;height:40px;border-radius:50%;border:none;
  background:rgba(128,128,128,.4);color:#000;font-size:1.2rem;
  cursor:pointer;transition:background .3s;
}
.auto-toggle:hover{background:rgba(128,128,128,.6);}


/* Responsive: smaller hero on mobile */
@media (max-width: 768px){
  .hero-carousel{height:50vh;}
}