/* =========================================================
   VOLT JOBS LLC - COMPACT MODERN HERO SLIDER
   Loaded after style.css
========================================================= */
.hero-carousel {
  position: relative;
  overflow: hidden;
  background: #061d42;
}

.hero-slide {
  position: relative;
  height: 350px;
  min-height: 350px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.hero-slide::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: linear-gradient(
    90deg,
    rgba(3, 22, 53, .97) 0%,
    rgba(4, 31, 70, .89) 31%,
    rgba(4, 31, 70, .61) 49%,
    rgba(4, 31, 70, .20) 68%,
    rgba(4, 31, 70, .03) 100%
  );
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.01), rgba(0,0,0,.11));
}

.hero-content {
  position: relative;
  z-index: 5;
  height: 350px;
  min-height: 350px;
  display: flex;
  align-items: center;
  color: #fff;
  padding-top: 26px;
  padding-bottom: 42px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: #a9dd48;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  backdrop-filter: blur(5px);
}

.hero-badge-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #85c336;
  box-shadow: 0 0 0 4px rgba(133,195,54,.16);
}

.hero-title,
.hero-content h1,
.hero-content h2 {
  width: 100%;
  max-width: 760px;
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(2rem, 3.6vw, 3.15rem);
  font-weight: 750;
  line-height: 1.06;
  letter-spacing: -.025em;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.hero-title span { display: inline; }

.hero-copy {
  width: 100%;
  max-width: 590px;
  margin: 0 0 14px;
  color: rgba(255,255,255,.88);
  font-size: 13px;
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.btn-hero-primary,
.btn-hero-outline {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 17px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

.btn-hero-primary {
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(2,32,77,.92);
  color: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.13);
}
.btn-hero-primary:hover {
  border-color: #8dbf35;
  background: #8dbf35;
  color: #fff;
  transform: translateY(-2px);
}
.btn-hero-outline {
  border: 1px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.04);
  color: #fff;
}
.btn-hero-outline:hover {
  border-color: #fff;
  background: #fff;
  color: #0b3474;
}
.hero-btn-arrow { margin-left: 9px; }

.hero-control {
  top: 50%;
  bottom: auto;
  width: 38px;
  height: 38px;
  margin-top: -19px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(3,26,61,.42);
  opacity: 1;
  z-index: 10;
  backdrop-filter: blur(4px);
  transition: background .2s ease, border-color .2s ease;
}
.hero-control:hover { background: rgba(3,26,61,.72); border-color: rgba(255,255,255,.62); }
.carousel-control-prev.hero-control { left: 14px; }
.carousel-control-next.hero-control { right: 14px; }
.hero-control-icon {
  color: #fff;
  font-size: 31px;
  line-height: .8;
  transform: translateY(-1px);
}

.hero-indicators { bottom: 13px; margin-bottom: 0; }
.hero-indicators [data-bs-target] {
  width: 24px;
  height: 3px;
  margin: 0 3px;
  border: 0;
  border-radius: 99px;
  background: rgba(255,255,255,.48);
  opacity: 1;
  transition: width .3s ease, background .3s ease;
}
.hero-indicators .active { width: 42px; background: #8ac63f; }
.hero-bottom-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  height: 2px;
  background: linear-gradient(90deg, #0b3474 0 40%, #8ac63f 40% 60%, #0b3474 60% 100%);
}

/* Subtle content entrance */
.hero-carousel .carousel-item .hero-badge,
.hero-carousel .carousel-item .hero-title,
.hero-carousel .carousel-item .hero-copy,
.hero-carousel .carousel-item .hero-actions {
  opacity: 0;
  transform: translateY(14px);
}
.hero-carousel .carousel-item.active .hero-badge { animation: heroFadeUp .45s ease forwards .08s; }
.hero-carousel .carousel-item.active .hero-title { animation: heroFadeUp .5s ease forwards .16s; }
.hero-carousel .carousel-item.active .hero-copy { animation: heroFadeUp .5s ease forwards .24s; }
.hero-carousel .carousel-item.active .hero-actions { animation: heroFadeUp .5s ease forwards .32s; }
@keyframes heroFadeUp { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1199.98px) {
  .hero-slide,
  .hero-content { height: 345px; min-height: 345px; }
  .hero-title,
  .hero-content h1,
  .hero-content h2 { max-width: 660px; font-size: 2.65rem; }
}

@media (max-width: 991.98px) {
  .hero-slide,
  .hero-content { height: 380px; min-height: 380px; }
  .hero-slide { background-position: 65% center; }
  .hero-slide::before {
    background: linear-gradient(90deg, rgba(3,22,53,.97) 0%, rgba(3,22,53,.9) 52%, rgba(3,22,53,.5) 100%);
  }
  .hero-content { padding-left: 40px; padding-right: 40px; }
  .hero-title,
  .hero-content h1,
  .hero-content h2 { max-width: 560px; font-size: 2.35rem; }
}

@media (max-width: 767.98px) {
  .hero-slide,
  .hero-content { height: 410px; min-height: 410px; }
  .hero-slide { background-position: 68% center; }
  .hero-slide::before {
    background: linear-gradient(90deg, rgba(3,22,53,.96) 0%, rgba(3,22,53,.9) 72%, rgba(3,22,53,.68) 100%);
  }
  .hero-content { padding: 34px 22px 52px; }
  .hero-title,
  .hero-content h1,
  .hero-content h2 { max-width: 100%; font-size: 2rem; line-height: 1.08; }
  .hero-copy { max-width: 94%; font-size: 12.5px; }
  .btn-hero-primary,
  .btn-hero-outline { min-height: 39px; padding: 8px 14px; font-size: 11.5px; }
  .hero-control { display: none; }
}

@media (max-width: 480px) {
  .hero-slide,
  .hero-content { height: 430px; min-height: 430px; }
  .hero-content { padding: 32px 18px 52px; }
  .hero-title,
  .hero-content h1,
  .hero-content h2 { font-size: 1.82rem; }
  .hero-copy br { display: none; }
}