/* =========================
   Nuria Global — Hero
========================= */

.ng-hero{
  position:relative;
  min-height:85vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--ng-navy);
  isolation:isolate;
}

/* =========================
   Hero Media
========================= */

.ng-hero-media{
  position:absolute;
  inset:0;
  z-index:-3;
}

.ng-hero-image{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* =========================
   Hero Overlay
========================= */

.ng-hero-overlay{
  position:absolute;
  inset:0;
  z-index:-2;

  background:
    linear-gradient(
      90deg,
      rgba(8,17,36,.92) 0%,
      rgba(10,24,51,.80) 38%,
      rgba(10,27,59,.52) 68%,
      rgba(10,27,59,.30) 100%
    );
}

/* Subtle depth layer */

.ng-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      rgba(6,14,31,.10) 0%,
      rgba(6,14,31,.05) 60%,
      rgba(6,14,31,.45) 100%
    );
}

/* =========================
   Hero Content
========================= */

.ng-hero-container{
  position:relative;
  z-index:2;
  padding-top:7rem;
  padding-bottom:7rem;
}

.ng-kicker{
  text-transform:uppercase;
  letter-spacing:2.4px;
  font-size:.76rem;
  font-weight:500;
  color:rgba(255,255,255,.78);
}

.ng-h1{
  max-width:850px;
  margin:0 0 1.5rem;

  font-size:clamp(2.7rem, 5vw, 5rem);
  line-height:1.06;
  font-weight:300;
  letter-spacing:-.02em;

  color:#fff;
}

.ng-sub{
  max-width:720px;
  margin-bottom:1.8rem;

  color:rgba(255,255,255,.84);
  font-size:1.08rem;
  line-height:1.65;
}

.ng-hero-actions{
  margin-top:.5rem;
}

.ng-micro{
  margin-top:1.6rem;
  color:rgba(255,255,255,.65);
  font-size:.92rem;
  letter-spacing:.2px;
}

/* =========================
   Responsive
========================= */

@media (max-width:991.98px){

  .ng-hero{
    min-height:78vh;
  }

  .ng-hero-container{
    padding-top:6rem;
    padding-bottom:6rem;
  }

  .ng-hero-overlay{
    background:
      linear-gradient(
        90deg,
        rgba(8,17,36,.92) 0%,
        rgba(10,24,51,.78) 58%,
        rgba(10,27,59,.46) 100%
      );
  }

  .ng-h1{
    max-width:700px;
  }

}

@media (max-width:767.98px){

  .ng-hero{
    min-height:auto;
  }

  .ng-hero-container{
    padding-top:5.5rem;
    padding-bottom:5.5rem;
  }

  .ng-hero-image{
    object-position:60% center;
  }

  .ng-hero-overlay{
    background:
      linear-gradient(
        180deg,
        rgba(8,17,36,.88) 0%,
        rgba(8,17,36,.78) 55%,
        rgba(8,17,36,.90) 100%
      );
  }

  .ng-h1{
    font-size:clamp(2.35rem, 10vw, 3.4rem);
    line-height:1.08;
  }

  .ng-sub{
    font-size:1rem;
    line-height:1.6;
  }

}

@media (max-width:575.98px){

  .ng-hero-container{
    padding-top:4.75rem;
    padding-bottom:4.75rem;
  }

  .ng-kicker{
    font-size:.68rem;
    letter-spacing:1.8px;
  }

  .ng-hero-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .ng-hero-actions .btn{
    width:100%;
    text-align:center;
  }

  .ng-micro{
    margin-top:1.4rem;
  }

}