/* =========================
   HYBRID FIXES
   ========================= */

/* 1) Topbar badge: make it look like DEFAULT (no filled background) */
*{
  /* For all modern browsers */
  user-select: none;

  /* For older versions of specific browsers */
  -webkit-user-select: none; /* Safari, Chrome, iOS Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* Internet Explorer/Edge */
  -khtml-user-select: none;  /* Konqueror HTML */
}

body{
  background: #e3edf7 !important;
}
.topbar .badge.text-bg-light-subtle{
  background: transparent !important;
  border-color: rgba(255,255,255,.25) !important;
  color: rgba(255,255,255,.92) !important;
}

  .fi-nav .navbar-nav .nav-link{
    padding: .55rem .9rem;
    border-radius: 999px;
  }

  .fi-nav .navbar-nav .nav-link:hover{
    background: rgba(255,255,255,.10);
  }

  .fi-nav .navbar-nav .nav-link.active{
    background: rgba(255,255,255,.14);
    text-decoration: none;
  }

/* 3) HYBRID: use the SAME page background images as ALT */
.page-hero--services,
.fi-page-hero--services{
  background-image: url("../img/page-services.jpg") !important;
  background-position: center center !important;
  background-size: cover !important;
}

.page-hero--security,
.fi-page-hero--security{
  background-image: url("../img/page-security.jpg") !important;
  background-position: center center !important;
  background-size: cover !important;
}

.page-hero--support,
.fi-page-hero--support{
  background-image: url("../img/page-contact.jpg") !important;
  background-position: center center !important;
  background-size: cover !important;
}

.page-hero--contact,
.fi-page-hero--contact{
  background-image: url("../img/page-support.jpg") !important;
  background-position: center center !important;
  background-size: cover !important;
}

/* Bonus: if Security banner still looks off, try a slightly higher focal point */
.page-hero--security,
.fi-page-hero--security{
  background-position: center 40% !important;
}
/* =========================
   HYBRID — NAV: match ALT
   ========================= */

/* Force the navbar background to the ALT gradient (no translucency) */
.fi-nav{
  background: linear-gradient(90deg, #07152b 0%, #0b1f3a 40%, #1D5FA7 75%, #28b7d6 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: none !important;
}

/* Remove the pale/grey "pill" container behind the nav links */
.fi-nav .nav-link{
  background: transparent !important;
  border-radius: 0 !important;
}

/* Keep links readable and add subtle hover/active */
.fi-nav .nav-link{
  color: rgba(255,255,255,.92) !important;
  font-weight: 700;
  border-radius: 999px;
  padding: .55rem .9rem;
}
.fi-nav .nav-link:hover{
  color: #fff !important;
  background: rgba(255,255,255,.10);
}
.fi-nav .nav-link.active{
  color: #fff !important;
  background: rgba(255,255,255,.14);
  text-decoration: none !important;
}
/* =========================
   HYBRID — Page hero images: match ALT (overlay + same images)
   ========================= */

.fi-page-hero,
.page-hero,
.hero-banner{
  position: relative;
  overflow: hidden;
}

/* Make sure content sits above overlay */
.fi-page-hero > .container,
.page-hero > .container,
.hero-banner > .container{
  position: relative;
  z-index: 2;
}

/* The blue/dark overlay layer like ALT */
.fi-page-hero::before,
.page-hero::before,
.hero-banner::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background: linear-gradient(90deg,
    rgba(7,21,43,.88) 0%,
    rgba(7,21,43,.70) 45%,
    rgba(29,95,167,.35) 100%
  );
  pointer-events:none;
}

/* Force same background behavior */
.fi-page-hero,
.page-hero,
.hero-banner{
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

/* If you have per-page hero classes, force the same ALT images */
.fi-page-hero--services{ background-image: url("../img/page-services.jpg") !important; }
.fi-page-hero--security{ background-image: url("../img/page-security.jpg") !important; }
.fi-page-hero--support{  background-image: url("../img/page-contact.jpg") !important; }
.fi-page-hero--contact{  background-image: url("../img/page-support.jpg") !important; }
/* Security page hero: image only (no card look) */
.fi-page-hero--security.fi-hero-simple .card-soft,
.fi-page-hero--security.fi-hero-simple .hero-card,
.fi-page-hero--security.fi-hero-simple .bg-white,
.fi-page-hero--security.fi-hero-simple .rounded-4,
.fi-page-hero--security.fi-hero-simple .shadow,
.fi-page-hero--security.fi-hero-simple .shadow-lg{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.fi-page-hero--security.fi-hero-simple .p-4,
.fi-page-hero--security.fi-hero-simple .p-5{
  padding: 0 !important;
}
.page-hero--phone{ background:
    linear-gradient(90deg, rgba(7,21,43,.92) 0%, rgba(7,21,43,.78) 55%, rgba(7,21,43,.45) 100%),
    url('../img/page-phone.jpg') center/cover no-repeat; }
    /* Homepage hero: remove “empty” height now that the image strip is removed */
    .hero.hero--photo{
      padding-top: 1.25rem !important;   /* reduce top whitespace */
      padding-bottom: 4.0rem !important; /* add breathing room at bottom */
    }
    .hero.hero--photo .row.align-items-center{
  align-items: flex-start !important;
}

@media (min-width: 992px){
  .hero.hero--photo{
    padding-bottom: 3.25rem !important;
  }
}
.page-hero--phone, .fi-page-hero--phone{
  background-image: url("../img/page-phone.jpg") !important;
}
/* Home: remove the “white gap” between hero and the Services section */
.hero.hero--photo{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Home services section: blue background starts immediately */
.section.home-services{
  margin-top: -1px;            /* kills any 1px seam */
  padding-top: 2.25rem !important; /* spacing for the heading */
  background: #e3edf7 !important;  /* same light-blue as the cards area */
}
/* Homepage: keep the light-blue page background all the way to the footer */
body.home{
  background: #e3edf7 !important;
}

/* Keep the footer using its own styling (don’t inherit the blue) */
body.home footer,
body.home .footer{
  background: inherit; /* footer css will override anyway, but this keeps it clean */
}
/* Normalize inner-page hero height (all pages except index) */
.page-hero{
  display: flex;
  align-items: flex-end;      /* keeps content sitting at the bottom like Services */
  min-height: 420px;          /* adjust if you want taller/shorter */
  padding: 4.5rem 0;          /* consistent vertical padding */
}

/* If you want a bit more height on desktop */
@media (min-width: 992px){
  .page-hero{
    min-height: 275px;
    padding: 5.25rem 0;
  }
}

/* Security page had inline min-height:320 and padding:0 — override it */
.page-hero--security{
  min-height: 275px !important;
  padding: 5.25rem 0;
}
@media (min-width: 992px){
  .page-hero--security{
    min-height: 275px !important;
  }
}
/* Prevent fixed/sticky navbar from covering content */
.nav-offset { height: 76px; }  /* adjust if your navbar is taller */
@media (max-width: 991.98px){
  .nav-offset { height: 86px; }
}
.footer .container:last-child { padding-bottom: 0 !important; }
.footer .container:last-child > *:last-child { margin-bottom: 0 !important; }
.footer { padding-top: 0 !important; } /* or try 8px if you want a little breathing room */
.footer .container:first-child { padding-top: 0 !important; }
.footer .container:first-child > *:first-child { margin-top: 0 !important; }
.footer hr { margin-top: .5rem !important; margin-bottom: .5rem !important; }
/* Active nav underline (reliable across hosts) */
.navbar .nav-link[aria-current="page"],
.navbar .nav-link.active {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
  text-decoration: underline !important;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}