/* ===========================
   Hero / Sentinel Styles
   =========================== */

.hero-1 { 
  position: relative;
  width: 100%;
  min-height: 70vh;
  overflow: hidden;

  /* background:
    /* spotlight cone shining down */
   /* radial-gradient(
      ellipse 80% 40% at 50% -10%, 
      rgba(255,255,255,0.12) 0%, 
      rgba(255,255,255,0.04) 30%, 
      rgba(0,0,0,0) 70%
    ), */
    /* ambient glow behind hood */
   /* radial-gradient(
      1000px 500px at 75% 45%, 
      rgba(11,29,42,0.35) 0%, 
      rgba(11,29,42,0) 70%
    ), */
    /* smooth fade from cloak bottom upward */
    /* linear-gradient(
      to top, 
      #00010D 0%, 
      rgba(0,1,13,0.97) 25%, 
      rgba(11,29,42,0.8) 55%, 
      transparent 95%
    ), */
    /* base gradient background */
    /* linear-gradient(
      135deg, 
      #00010D 0%, 
      #0B1D2A 100%
    );*/
  background-color: #070d17 ;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Sentinel image (applies to the inline <svg> wrapper) */
.hero-sentinel {
  max-width: 440px;   /* tuned for vector sharpness */
  width: 100%;
  height: auto;
  margin-left: auto;  /* aligns to the right column */
  display: block;

  /* Depth and clarity */
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.35))
          brightness(1.08)
          contrast(1.1);

  /* No side feathering here (SVG mask handles fade) */
  pointer-events: none;
  z-index: 1; /* ensures text sits above */
}


/* Ensure hero text is always above the sentinel */
.hero-1 .container {
  position: relative;
  z-index: 5; /* higher than sentinel */
  color: #fff;
}

/* Headline clarity */
.hero-1 h1 { 
  text-shadow: 0 8px 24px rgba(0,0,0,.35); 
}

/* Overlay fade to help blend right edge of sentinel */
.carousel-item.hero-1::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(
    90deg,
    rgba(5,33,43,0) 0%,
    rgba(5,33,43,0) 55%,
    rgba(5,33,43,0.45) 100%
  );
}

/* Responsive tweaks */
@media (max-width: 1199.98px) {
  .hero-sentinel { max-width: 360px; }
}

/* Responsive tweaks */
@media (max-width: 991.98px) { /* tablet & down */
  .hero-sentinel {
    max-width: 300px;
    opacity: 0.7;        /* soften so text stands out */
  }
}

@media (max-width: 767.98px) { /* mobile */
  .hero-sentinel {
    display: none;       /* hide on small screens */
  }
}
@media (max-width: 576px) {
  .hero-sentinel {
    max-height: 50%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    opacity: 0.55;
  }
}