/* ===== Hero Slider (pure CSS + small JS, no Revolution Slider) | Theme: #FFBE00 + #010021 ===== */
.hv-slider{
  --hv-yellow:#FFBE00;--hv-navy:#010021;--hv-navy-2:#14124a;
  --hv-font:inherit;   /* uses your website's own font. To force a font, e.g. --hv-font:'Roboto',sans-serif; */
  position:relative;width:100%;height:clamp(500px,min(50vw,86vh),880px);min-height:500px;overflow:hidden;
  background:var(--hv-navy);font-family:var(--hv-font);color:#fff;
}
.hv-slider *{box-sizing:border-box}
.hv-slider h2.hv-title,.hv-slider .hv-btn,.hv-slider .hv-count,.hv-slider .hv-count b{font-family:var(--hv-font)}
.hv-track{position:absolute;inset:0}
.hv-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s}
.hv-slide.is-active{opacity:1;visibility:visible;z-index:2}
.hv-slide > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1.1);transition:transform 7s ease-out}
.hv-slide.is-active > img{transform:scale(1)}
.hv-slide:before{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse at center,rgba(1,0,33,.55) 0%,rgba(1,0,33,.80) 100%)}

.hv-content{position:absolute;z-index:3;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  max-width:1200px;margin:0 auto;padding:0 90px 24px;text-align:center}
.hv-bar{display:block;width:70px;height:5px;background:var(--hv-yellow);border-radius:5px;margin:0 auto 20px;
  transform:scaleX(0);transform-origin:center;transition:transform .8s .3s}
.hv-slider h2.hv-title{
  color:#fff;font-size:clamp(26px,4vw,50px);font-weight:800;line-height:1.12;
  margin:0 auto 30px;padding:0;text-align:center;max-width:900px;text-shadow:0 4px 18px rgba(1,0,33,.5);
  opacity:0;transform:translateY(30px);transition:opacity .8s .35s,transform .8s .35s}
.hv-btn{display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  background:var(--hv-yellow);color:var(--hv-navy)!important;font-size:16px;font-weight:800;line-height:1;
  padding:17px 34px;border-radius:60px;border:2px solid var(--hv-yellow);
  box-shadow:0 12px 28px rgba(255,190,0,.35);
  opacity:0;transform:translateY(30px);transition:opacity .8s .55s,transform .8s .55s,background .2s,color .2s,border-color .2s}
.hv-btn i{font-size:15px}
.hv-btn:hover,.hv-btn:focus{background:var(--hv-navy);color:var(--hv-yellow)!important;border-color:var(--hv-yellow)}
.hv-slide.is-active .hv-bar{transform:scaleX(1)}
.hv-slide.is-active .hv-title,.hv-slide.is-active .hv-btn{opacity:1;transform:none}

/* Arrows: true circles */
.hv-arrow{position:absolute;z-index:6;top:50%;margin-top:-26px;width:52px;height:52px;padding:0;border-radius:50%;
  background:rgba(1,0,33,.7);border:2px solid var(--hv-yellow);color:var(--hv-yellow);
  display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;cursor:pointer;
  transition:background .2s,color .2s}
.hv-arrow:hover,.hv-arrow:focus{background:var(--hv-yellow);color:var(--hv-navy)}
.hv-prev{left:22px}.hv-next{right:22px}

/* Dots + counter + progress */
.hv-nav{position:absolute;z-index:6;left:0;right:0;bottom:30px;display:flex;justify-content:center;gap:10px;padding:0 20px}
.hv-dot{width:12px;height:12px;padding:0;border-radius:12px;border:0;background:rgba(255,255,255,.55);cursor:pointer;
  transition:width .3s,background .3s}
.hv-dot.is-active{width:38px;background:var(--hv-yellow)}
.hv-count{position:absolute;z-index:6;right:30px;bottom:24px;font-size:15px;font-weight:700;color:#fff;letter-spacing:1px}
.hv-count b{color:var(--hv-yellow);font-size:20px}
.hv-progress{position:absolute;z-index:6;left:0;bottom:0;height:5px;width:0;background:var(--hv-yellow)}
.hv-arrow:focus-visible,.hv-dot:focus-visible,.hv-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}

@media(max-width:991px){
  .hv-slider{height:clamp(480px,min(80vw,84vh),640px);min-height:480px}
  .hv-content{padding:0 70px}
}
@media(max-width:767px){
  .hv-slider{height:clamp(380px,96vw,460px);min-height:380px}
  .hv-slide:before{background:radial-gradient(ellipse at center,rgba(1,0,33,.62) 0%,rgba(1,0,33,.85) 100%)}
  .hv-content{padding:0 22px 40px}
  .hv-bar{width:44px;height:3px;margin-bottom:10px}
  .hv-slider h2.hv-title{font-size:clamp(18px,5vw,22px);line-height:1.22;margin-bottom:16px;max-width:92%}
  .hv-btn{padding:10px 20px;font-size:13px;gap:8px;border-width:1.5px;box-shadow:0 8px 18px rgba(255,190,0,.3)}
  .hv-btn i{font-size:12px}
  .hv-arrow{top:auto;bottom:20px;margin-top:0;width:34px;height:34px;font-size:13px;border-width:1.5px}
  .hv-dot{width:8px;height:8px}
  .hv-dot.is-active{width:24px}
  .hv-prev{left:14px}.hv-next{right:14px}
  .hv-nav{bottom:36px}
  .hv-count{display:none}
}
@media(max-width:380px){
  .hv-slider h2.hv-title{font-size:17px}
  .hv-btn{padding:9px 17px;font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){
  .hv-slide,.hv-slide > img,.hv-bar,.hv-title,.hv-btn{transition:none}
  .hv-slide > img{transform:none}
}