/* NOOA */

/* COLORS */

/* TYPOGRAPHY */

@font-face {
  font-family: "Lato";
  src: url("../fonts/lato/Lato-Light.eot");
  src: url("../fonts/lato/Lato-Light.eot?#iefix") format("embedded-opentype"),
    url("../fonts/lato/Lato-Light.woff2") format("woff2"),
    url("../fonts/lato/Lato-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LatoBlack";
  src: url("../fonts/lato/Lato-Black.eot");
  src: url("../fonts/lato/Lato-Black.eot?#iefix") format("embedded-opentype"),
    url("../fonts/lato/Lato-Black.woff2") format("woff2"),
    url("../fonts/lato/Lato-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NooaSiteMedium";
  src: url("../sbtb5fit/apex-new-medium.otf") format("opentype");
  src: url("../../media/sbtb5fit/apex-new-medium.otf") format("opentype");
}

@font-face {
  font-family: "NooaSiteLight";
  src: url("../2jcdq3hs/apex-new-light.otf") format("opentype");
  src: url("../../media/2jcdq3hs/apex-new-light.otf") format("opentype");
}


h1 {
  /* font-family: "LatoBlack"; */
  font-family: "NooaSiteMedium";
  text-transform: uppercase;
}

body {
  /* font-family: "Lato"; */
  font-family: "NooaSiteLight";
}

.boxed {
  /* font-family: "Lato"; */
  font-family: "NooaSiteLight";
}

a {
  text-decoration: none;
  color: #666;
}

a:visited {
  text-decoration: none;
  color: #666;
}

/* NAVIGATION */
.navbar {
  /*  border-bottom: solid 8px #000; */
  background-color: #000 !important;
}

.navbar-brand img {
  height: 72px;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.scroll .navbar-brand img {
  height: 42px;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0.7;
}

.navbar-brand {
  margin-left: -12px;
}

.navbar-dark .navbar-nav .nav-link {
  /* font-family: "Lato"; */
  font-family: "NooaSiteLight";
  font-size: 18px;
  text-transform: uppercase;
  margin-right: 2px;
  letter-spacing: 0.04em;
}

.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .show > .nav-link {
  color: #fff;
  /* border-bottom: solid 2px #fff; */
  border-bottom: none;
  position: relative;
}

/* Silver/chrome underline (same “family” as btn-primary) */
.navbar-dark .navbar-nav .nav-link.active::after,
.navbar-dark .navbar-nav .show > .nav-link::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;

  background: linear-gradient(
    90deg,
    #7e8794 0%,
    #e7ebf2 18%,
    #aab3c0 40%,
    #f4f6fa 55%,
    #8c95a3 78%,
    #d7dce6 100%
  );

  box-shadow: 0 0 4px rgba(255,255,255,0.14);
}


.dropdown-item.active,
.dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #000;
}

/* Body */

.cms-body {
  padding-top: 98px;
}

/* BUTTONS */

/* NOOA primary button: black/white/grey only */
.btn.btn-primary{
  color: #fff !important;
  background-color: #000 !important;
  border: 1px solid #000 !important;
  border-radius: 0;

  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 12px 24px rgba(0,0,0,0.22);

  transition: background-color 160ms ease, border-color 160ms ease,
              box-shadow 160ms ease, transform 160ms ease, outline-color 160ms ease;
}

/* Hover: subtle lift + slightly lighter black */
.btn.btn-primary:hover{
  background-color: #111 !important;
  border-color: #111 !important;
  transform: translateY(-1px);

  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 16px 32px rgba(0,0,0,0.26);
}

/* Pressed */
.btn.btn-primary:active,
.btn.btn-primary.active,
.btn-check:active + .btn.btn-primary,
.btn-check:checked + .btn.btn-primary,
.show > .btn.btn-primary.dropdown-toggle{
  background-color: #000 !important;
  border-color: #000 !important;
  transform: translateY(0);

  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 8px 16px rgba(0,0,0,0.24) !important;
}

/* Focus: elegant grey ring (keyboard only) */
.btn.btn-primary:focus{
  box-shadow: none !important;  /* kill Bootstrap blue glow */
}

.btn.btn-primary:focus-visible{
  outline: 2px solid rgba(255,255,255,0.65) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

.btn-secondary {
  border-radius: 0px;
  color: #fff !important;
  background-color: #000 !important;
}

.btn span {
  display: none;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.btn:hover span {
  display: block;
  float: right;
  margin-left: 12px;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

/* MODULES */

.b-example-divider {
  height: 3rem;
  background-color: rgba(0, 0, 0, 0.1);
  border: solid rgba(0, 0, 0, 0.15);
  border-width: 1px 0;
  box-shadow: inset 0 0.5em 1.5em rgba(0, 0, 0, 0.1),
    inset 0 0.125em 0.5em rgba(0, 0, 0, 0.15);
}

.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.05rem;
  text-transform: uppercase;
}

.text-muted{
  font-family: "NooaSiteMedium" !important;
  /* font-weight: 900; */

  /* gradient text */
  background-image: linear-gradient(
    90deg,
    #7e8794 0%,
    #e7ebf2 18%,
    #aab3c0 40%,
    #f4f6fa 55%,
    #8c95a3 78%,
    #d7dce6 100%
  );
  background-size: 100% 100%;
  background-repeat: no-repeat;

  -webkit-background-clip: text;
  background-clip: text;

  /* this is the missing piece on many browsers (esp. Safari) */
  -webkit-text-fill-color: transparent;
  color: transparent !important;

  /* optional: remove if you don’t want any edge treatment */
  text-shadow: 0 0 0 rgba(0,0,0,0.25);
}

@supports not (-webkit-background-clip: text) {
  .text-muted{ color: #d7dce6 !important; }
}

video.jumbotron__video {
  width: 100%;
}

.footerme {
  padding-top: 80px;
  padding-bottom: 20px;
}

img.productlogo {
  height: 22px;
}

.topPadLarge {
  padding-top: 80px;
}

.featurette:hover img {
  -moz-transform: scale(0.96);
  -webkit-transform: scale(0.96);
  transform: scale(0.96);
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.carousel-indicators [data-bs-target] {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  padding: 0;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #fff;
  background-clip: padding-box;
  border: 0;
  border-top: 10px solid transparent;
  border-bottom: 4px solid #000;
  opacity: 0.5;
  transition: opacity 0.6s ease;
}

		
.bg-light {
  background-position: center;
}
.bg-dark {
  background-position: center;
}
.bg-light.text-center {
  height: 30em !important;
}
.bg-dark.text-center {
  height: 30em !important;
}

.featurette img {
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.fdark {
  background-color: #000;
}

.fdark h2 {
  color: #fff;
}

.fdark p {
  color: #ccc;
}

.full {
  padding-top: 40px;
  padding-bottom: 40px;
  width: 100%;
}

.sideimage img {
  max-width: 100%;
}

.row img {
  max-width: 100%;
}

.mybottom {
  margin-bottom: 0px;
  bottom: 18px;
}

.article-item a {
  text-decoration: none;
  color: #000;
}

.article-content h3 {
  font-size: 24px;
  text-transform: uppercase;
}

.article-item:hover .postarrow {
  margin-left: 12px;
  transition: all 0.3s;
  color: #1c7879;
}

.postarrow {
  transition: all 0.3s;
}

/* Make Youtube videos full width */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.productcard {
  background-color: #fff;
  padding: 20px;
  border-radius: 0px;
  height: 280px;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  margin-bottom: 20px;
  border-top: solid 6px #fff;
}

.productcard:hover {
  -moz-transform: scale(1.06);
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  box-shadow: 0px 0px 28px 3px rgba(0, 0, 0, 0.19);
  -webkit-box-shadow: 0px 0px 28px 3px rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0px 0px 28px 3px rgba(0, 0, 0, 0.19);
}

.productcard h4 {
  height: 50px;
  text-transform: uppercase;
  text-align: center;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.productcard:hover h4 {
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.productcard2 {
  background-color: #fff;
  padding: 20px;
  border-radius: 0px;
  height: 446px;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  margin-bottom: 20px;
  border-top: solid 6px #fff;
}

.productcard2:hover {
  -moz-transform: scale(1.06);
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  box-shadow: 0px 0px 28px 3px rgba(0, 0, 0, 0.19);
  -webkit-box-shadow: 0px 0px 28px 3px rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0px 0px 28px 3px rgba(0, 0, 0, 0.19);
}

.productcard2 h4 {
  height: 50px;
  text-transform: uppercase;
  font-size: 18px;
}

.productcard2 h4 {
  color: #666;
  text-decoration: none;
}

.productarea2 {
  height: 312px;
}

.productarea {
  height: 170px;
}

.tab-pane {
  padding: 20px;
}

.article-main strong {
  /* font-family: "LatoBlack"; */
  font-family: "NooaSiteMedium";
  font-weight: 900;
}

.gray {
  background-color: #e7e8ea;
}

.article-image {
  /*margin-top: 80px;*/
  margin-bottom: 60px;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: #000;
  /* font-family: "Lato"; */
  font-family: "NooaSiteLight";
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nav-tabs .nav-link {
  margin-bottom: -1px;
  background: 0 0;
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  /* font-family: "Lato"; */
  font-family: "NooaSiteLight";
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.listtitle {
  margin-bottom: 20px;
  margin-top: 40px;
}

#masthead.scroll {
  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 40%), inset 0 0px 0 rgb(0 0 0 / 40%);
  transition: all 0.5s;
}

.footerlogo {
  margin-bottom: 20px;
}

.mapboxgl-marker {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

.marker {
  border: none;
  cursor: pointer;
  height: 30px;
  width: 46px;
  background-image: url(/frontend/images/map/pin.png);
  background-color: transparent;
}

.mapheight {
  height: 800px;
}

.iconarea {
  padding: 6px;
  background-color: #fff;
  display: inline-block;
  border-radius: 6px;
}

.iconarea img {
  width: 60px;
}

.topPadLarg {
  padding: 120px;
}

.product-device {
  position: absolute;
  right: 10%;
  bottom: -30%;
  width: 300px;
  height: 540px;
  background-color: #333;
  border-radius: 21px;
  transform: rotate(30deg);
}

.product-device::before {
  position: absolute;
  top: 10%;
  right: 10px;
  bottom: 10%;
  left: 10px;
  content: "";
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
}

.product-device-2 {
  top: -25%;
  right: auto;
  bottom: 0;
  left: 5%;
  background-color: #e5e5e5;
}

.flex-equal > * {
  flex: 1;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

img.footerlogo {
  height: 56px;
}

.article-content {
  padding: 20px;
}

.category-icon {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.category-text {
  font-size: 1.25rem;
  font-weight: 300;
}

/* CAROUSEL */

.carousel {
  margin-bottom: 0px;
}

.carousel-caption {
  bottom: 6rem;
  z-index: 10;
}

.carousel-caption {
  max-width: 1300px;
  margin: 0 auto;
  left: 0%;
  right: 0%;
}


.carousel-caption h1 {
  max-width: 800px;
  font-size: 60px;
  line-height: 1.05;
  text-wrap: balance;
  color: #111;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.85),
    0 0 14px rgba(255,255,255,0.65);
  /* text-shadow: 0px 3px 4px rgba(0, 0, 0, 0.24); */
}

.carousel-caption p {
  max-width: 600px;
  font-size: 22px;
  /* text-shadow: 0px 3px 4px rgba(0, 0, 0, 0.24); */
  text-shadow: none;
  color: rgba(17, 17, 17, 0.78);
}

.carousel-indicators {
  margin: 0 auto;
  padding-bottom: 20px;
}

.carousel-item {
  /* height: 700px; */
  height: 50em;
  background-position: center center;
  position: relative;
  /* height: auto; */
}

.carousel-item::before{
  content:"";
  position:absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: min(520px, 78vw);
  pointer-events:none;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.92) 0%,
    rgba(255,255,255,0.72) 55%,
    rgba(255,255,255,0.00) 100%
  );
}

.carousel-item > img {
  /* position: absolute; */
  top: 0;
  center: 0;
  min-width: 100%;
  height: auto;
}

.carousel-indicators {
  width: 150px;
}

/* VIEWPORTS */
@media (max-width: 1350px) {
  .carousel-caption {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (min-width: 992px) {
  .rounded-lg-3 {
    border-radius: 0.3rem;
  }
}

@media (max-width: 991px) {
  .productcard {
    height: auto;
  }

  .carousel-caption h1 {
    max-width: 800px;
    font-size: 36px;
  }
}

@media (min-width: 768px) {
  .flex-md-equal > * {
    flex: 1;
  }
}

@media (max-width: 768px) {
  .oneproduct {
    padding: 20px;
  }

  .productarea {
    height: auto;
  }
}
/* MOBILE HERO FIX */
@media (max-width: 768px) {

  /* Make hero height behave on phones */
  .carousel-item {
    height: auto;
    min-height: 72vh; /* keeps a hero feel without forcing 50em */
  }

  /* Switch scrim to a bottom fade so it protects text anywhere on the image */
    .carousel-item::before{
    left: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 62%;          /* only scrim the lower part (tweak 55–70%) */

    /* soften the fade */
    background: linear-gradient(
      180deg,
      rgba(255,255,255,0.00) 0%,
      rgba(255,255,255,0.70) 40%,
      rgba(255,255,255,0.88) 100%
    );
  }

  /* Keep caption readable and away from the subject */
  .carousel-caption {
    left: 16px;
    right: 16px;
    bottom: 1.25rem;      /* closer to bottom = less face overlap */
    text-align: left;
  }

  /* Don’t let the headline run across the face */
  .carousel-caption h1 {
    font-size: 32px;      /* or clamp(28px, 7vw, 36px) */
    line-height: 1.08;
    max-width: 18ch;      /* keeps it in a compact block */
  }

  /* Make body copy smaller + tighter measure on small screens */
  .carousel-caption p {
    font-size: 16px;
    line-height: 1.55;
    max-width: 34ch;
    color: rgba(17,17,17,0.85); /* same look, better contrast */
  }

  /* Improve CTA tap target + spacing */
  .carousel-caption .btn {
    margin-top: 8px;
    min-height: 44px;
    padding: 10px 16px;
  }
}

.cky-btn-revisit-wrapper{
  background-color: #000 !important;
}

#INDmenu-btn {
  --indmaincolor: #000 !important;
}

/* Text selection (global) */
::selection{
  background: rgba(0,0,0,0.18); /* elegant grey */
  color: #000;
}

::-moz-selection{
  background: rgba(0,0,0,0.18);
  color: #000;
}

/* ------------------------------------------------------------------
   PRODUCT DESCRIPTIONS (#description) — added 2026-09
   Descriptions come from POWER PIM as raw HTML and may carry their own
   @font-face rules for "ApexNewLight"/"ApexNewMedium"/"ApexNewBook"
   with power.xx-only URLs (404 here). The site fonts are therefore
   registered under their own names (NooaSite*) above, so a description
   can never break the site's headings. Do NOT rename them back.
   The rules below force description text onto the site fonts.
   Bold text in older descriptions keeps its current look (Light, bold).
   ------------------------------------------------------------------ */
#description,
#description * {
  font-family: "NooaSiteLight", "Helvetica Neue", Arial, sans-serif !important;
}
#description h1, #description h2, #description h3,
#description h4, #description h5, #description h6,
#description .nooa-layout strong, #description .nooa-layout b {
  font-family: "NooaSiteMedium", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 500;
}
/* New NOOA description template: align with the tab and site text colour */
#description .nooa-layout {
  padding: 0;
  color: inherit;
}