/* ======== FONTS ====================*/
@font-face {
font-family: 'ZT Otez';
font-style: normal;
font-weight: normal;
src: local('ZT Otez'), url('../fonts/ztotez-regular.woff') format('woff');
}
1
@font-face {
font-family: 'ZT Otez';
font-style: italic;
font-weight: normal;
src: local('ZT Otez'), url('../fonts/ZtOtezItalic-gw4RY.woff') format('woff');
}
   @font-face {
     font-family: InterVariable;
     font-style: normal;
     font-weight: 100 900;
     font-display: swap;
     src: url("../fonts/InterVariable.woff2") format("woff2");
   }
   @font-face {
     font-family: InterVariable;
     font-style: italic;
     font-weight: 100 900;
     font-display: swap;
     src: url("../fonts/InterVariable-Italic.woff2") format("woff2");
   }
/* Light */
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/SourceSans3-Light.woff2') format('woff2'),
       url('../fonts/SourceSans3-Light.woff') format('woff');
  font-weight: 150;
  font-style: normal;
  font-display: swap;
}

/* Light Italic */
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/SourceSans3-LightItalic.woff2') format('woff2'),
       url('../fonts/SourceSans3-LightItalic.woff') format('woff');
  font-weight: 150;
  font-style: italic;
  font-display: swap;
}

/* Regular */
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/SourceSans3-Regular.woff2') format('woff2'),
       url('../fonts/SourceSans3-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Italic */
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/SourceSans3-Italic.woff2') format('woff2'),
       url('../fonts/SourceSans3-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/SourceSans3-Bold.woff2') format('woff2'),
       url('../fonts/SourceSans3-Bold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Bold Italic */
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/SourceSans3-BoldItalic.woff2') format('woff2'),
       url('../fonts/SourceSans3-BoldItalic.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* ======== UNIVERSAL ELEMENTS ====================*/

div {

}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
margin: 0;
font-family: 'InterVariable', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* default font */
font-weight: 400;
line-height: 1.5;
color: #000000;
background: #122222;
}

/* hyperlinks */
a {
 text-decoration: none;
     font-weight: 600;
 color: #AAAAAA;
}
a:hover {
 text-decoration: none;
     font-weight: 600;
 color: #FFFFFF;
}

/* call-to-action buttons */
.btn1 {
background-color: #ffffff88;
color: #000;
border: none;
border-radius: 2rem;
height: 2.4rem;
padding: 0 1rem;
font-size: 1rem;
cursor: pointer;
font-weight: 600;
text-transform: lowercase;
}
.btn1:hover {
background-color: #fff;  /* subtle hover effect */
}
.btn2 {
background-color: transparent;
-webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
color: #000;
border: 1px solid white;
border-radius: 2rem;
padding: 0.6rem 1.6rem 0.8rem 1.6rem;
font-size: 1rem;
cursor: pointer;
font-weight: 600;
font-size: 1.5rem;
color: #FFF;
text-transform: lowercase;
margin-top: 2rem;
}
.btn2:hover {
background-color: #cccccc44;  /* subtle hover effect */
}

/* bottom badge */
.bottom-badge {
font-size: 0.85rem;
font-weight: 600;
line-height: 1.85rem;
}
.bottom-badge img{
width: 5.5rem;
}

/* section formatting */
.section {
  margin-top: -3rem;
  background: #d3ccb8;
  padding: 3rem 3rem 8rem 3rem;
  border-radius: 2rem 2rem 0 0;
  box-shadow: 0 0 50px 15px #00000044;
}
.sfirst {
  margin-top: 0;
padding-top: 1rem;
  box-shadow: none;
  border-radius: 0;
}
.section-pre {
  background: #d3ccb8;
  border-radius: 2rem 2rem 0 0;
  position: absolute;
  bottom: 0;
margin-top: -2rem;
margin-bottom: -0.1rem;
  left: 0;
  width: 100%;
  height:2rem;
z-index: 0;
}

/* hidden-by-default elements */
.hidden {
    display: none;
}

/* ======== HEADER ====================*/

/* header */
.nav {
   top: 0;
     left: 0;
     width: 100%;
     height: 5.2rem;
     z-index: 1000;
display: flex;
justify-content: space-between;
width: 100%;
background: transparent;
   align-items: center;
     gap: 1rem;
     padding: 3rem 3rem 0 3rem;
margin: 0;
}

/* logo */
.logo-main {
  height: 2.4rem ;
  padding: 0;
   display: block;
}

/* tagline */
.nav-lower {
   display: flex;
      align-items: center;
  left: 0;
  font-size: 1rem;
     color: #656565;
     font-weight: 600;
      gap: 1rem;
        margin: 0;
}

/* contact icon containers */
.nav-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  height: 2.4rem;
  padding: 0 0.5rem 0 0;
}



.nav-icon:hover img {
  opacity: 1;
}

/* contact icons */
.nav-icon img {
  opacity: 0.3;
  display: block;
  height: 1.3rem;
  padding: 0 1rem 0 0;
  cursor: pointer;
}

/* heading items */
 .nav-left,
 .nav-right {
   display: flex;
   align-items: center;
   gap: 0;
 }

 /* heading middle spacer */
 .nav-center {
   display:flex;
   width: 100%;
   justify-content: center;
   text-align: center;
   gap: 0;
 align-items: center;
 }

/* ======== UNIVERSAL NAVIGATION ====================*/

/* navigation item */
.nav-item {
  text-transform: lowercase;
font-weight: 600;
vertical-align: middle;
padding: 0 0 0 0.2rem;
   display: inline-block;
      line-height: 1.2;
      text-align: left;
      white-space: nowrap;
      cursor: pointer;
}

/* clean line break for nav items*/
  .nav-item-line {
  display: block;
  }

/* navigation item container */
.nav-item-container {
 display: inline-block;
 vertical-align: left;
 align-items: left;
 white-space: nowrap;
 cursor: pointer;
 margin-right: 0;
   height: 2.4rem;
   color: #888888;
  }
  .nav-item-container:hover {
   color: #FFFFFF;
    }
/* navigation item bullet */
  .nav-item-bullet {
  display: inline-block;
  border-radius: 0.5rem;
  width: 1.5rem;
  height: 0.7rem;
  margin-top: 0.1rem;
  border: 3px solid #3b7470;
  vertical-align: middle;
  }

/* ======== MOBILE NAV MENU ====================*/

/* mobile nav menu gatekeeper */
.nav-gatekeeper {
display: inline-block;
}

/* hamburger menu */
.nav-start {
    display: none;
  cursor: pointer;
margin-left: 0.6rem;
width: 2.4rem;
height: 2.4rem;
  background-image: url("../images/icons/nav.svg");
  background-size: 100% 100%;
}

/* mobile nav close button */
.nav-menu-close {
  display: inline-block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* mobile nav close button container */
.nav-close-cont {
  display: flex;
width: 100%;
font-size: 1.2rem;
  justify-content: flex-end;
  text-align: right;
  align-items: center;
  gap: 0;
padding-bottom: 0;
}

/* mobile nav header */
.nav-close-cont div {
width: 100%;
height: 2.4rem;
}

/* mobile nav close button */
.nav-close {
  display: flex;
  cursor: pointer;
margin: 0 0 0rem 0.6rem;
width: 2.4rem;
max-width: 2.4rem;
height: 2.4rem;
  background-image: url("../images/icons/nav-close.svg"); /* replace with your image */
  background-size: 100% 100%;
}

/* hide contact close on mobile */
.nav-close.nmb2 {
  display: none;
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
}

/* mobile nav menu backdrop */
.nav-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: left;
background: #00000088;
-webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
  z-index: 1;
}

/* mobile nav menu */
.nav-menu-sub {
    display: flex;
    justify-content: flex-end;
    padding: 0;
}

/* nav menu block */
.nav-menu-block {
  display: inline-flex;
flex-direction: column;
gap: 0;
  justify-content: flex-start;
  text-align: left;
  align-items: flex-start;
/* background: #202020FF; */
background: #222222FF;
height: 100%;
z-index: 1000;
}

/* ======== CONTACT MENU ====================*/

/* disable pointer for contact labels */
.nav-item-container.nmb2 {
 cursor: default;
  }
.nav-item-container.nmb2 * {
 cursor: default;
  }

/* contact flexbox */
.contact-flex {
  display: flex;
}

/* contact column */
.contact-column {
display: inline-flex;
flex-direction: column;
}

/* contact desktop column */
.contact-column.nmb2 {
  display: none;
padding: 0;
}

.contact-column.nmb2 * {
cursor: pointer;
}

/* contact desktop column item formatting */
.contact-column.nmb2 .nav-item-container.nmb2 {
  color: #FFFFFF;
  margin: 1.8rem 0 0.3rem 1.5rem;
}

/* contact action buttons */
.contact-column.nmb2.last div div{
  text-decoration: none;
  padding: 0.5rem 1.4rem;
border: 1px solid white;
}

/* contact action button hover */
.contact-column.nmb2.last div div:hover{
  text-decoration: none;
  background: #444444;
  color: #FFFFFF;
}

/* contact copy buttons */
.contact-column.nmb2 div div{
  width: 100%;
text-decoration: none;
padding: 0.5rem 1rem;
text-align: center;
}
.contact-column.nmb2 div div:hover{
text-decoration: underline;
}


/* contact verification overlay */
.contact-verification {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
  z-index: 1000;
  position: absolute;
  top: 24rem;
  left: 0.5rem;
  width: calc(100% - 1rem);
  height: 14rem;
background: #222222CC;
-webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  }

/* verification button */
.contact-verification div{
  text-decoration: none;
  padding: 0.5rem 1.4rem;
border: 1px solid white;
}
.contact-verification span{
  font-size: 0.8rem;
  color: #505050;
  margin: 0.1rem 0 2rem 0;
}

/* verification button hover */
.contact-verification div:hover{
  background: #444444;
  color: #FFFFFF;
}


/* ======== DESKTOP NAV BAR ====================*/

/* desktop nav bar flexible spacing */
  .nav-item-spacer {
  display: none;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
  align-items: center;
  max-width: 3rem;
  width: 5%;
  }

  /* navigation bar */
  .nav-menu-desk {
    display: none;
    justify-content: center;
    text-align: center;
    align-items: center;
    position: absolute;
    top: 3rem;
    bottom: 0;
    left: 0;
    padding-top: 0.6rem;
    z-index: 1;
  }

/* ======== HERO SECTION ====================*/

/* hero splash */
.hero {
  display: flex;
  flex-direction: column;
width: 100%;
  background-image: url("../images/bg1.jpg"); /* replace with your image */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;
  min-height: 75vh;

}

/* hero content overlay */
.hero-sub {
  min-height: 75vh;
margin-top: 7.5rem;
      top:0;
      left:0;
      display: flex;
        flex-direction: column;
  width: 100%;
  height: 100%;
  padding-bottom: 2rem;
    align-items: center;
justify-content: center;
max-height: none;
text-shadow: 2px 3px 14px rgba(0,0,0,1);
}

/* hero header container */
.hero-sub2 {
  position:absolute;
      top:0;
      left:0;
  width: 100%;
}

/* hero heading */
.hero-heading {
  display: inline-flex;
  color: #FFF;
  font-family:'Hilsfiger';
    font-weight: 150;
    justify-content: center;
      text-align: center;
}

.hero-heading img {
  width: 90vw;
  max-width: 35rem;
  filter: drop-shadow(2px 3px 7px rgb(0 0 0 / 0.3));
}


/* hero text carousel */
  .hero-blank {
display: flex;
box-shadow: 0 0 25px 2px #FFFFFF6A;
line-height: 1.3;
color: #FFF;
font-weight: 600;
border: 2px solid white;
justify-content: center;
    }

/* hero subheading */
.hero-subheading {
  display: inline-block;
  color: #FFF;
  padding: 0 2rem 0 2rem;
  max-width: 59rem;
  font-weight: 150;
  justify-content: center;
}

/* hero scroll hint */
.hero-hint {
  position: absolute;
  bottom: 0;
  display: flex;
width:100%;
  height: 3rem;
  background-image: url("../images/icons/scrollhint.svg");
  background-size: 4rem 2rem;
  background-attachment: fixed;
  background-position: bottom 0.6rem center;
  background-repeat: no-repeat;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.hero-hint img {
width:5rem;
height: 100%;
cursor: pointer;
}

/* ======== SECTION 1.1 ====================*/

.subfrm {
  margin-top: 3rem;
  margin-bottom: 0;
}

.subfrm a {
color: #1f514e;
text-decoration: underline;
}

.iffrm {
  max-height: 95rem;
}

.it1 {
max-width: 29rem;
}

.it2 {
  max-width: 60rem;
}

/* spectrum section */
.wvideo {
position: relative;
max-width:1080px;
width: 100%;
height: 100%;
margin-top: 2rem;
  border-radius: 2rem;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  box-shadow: 0 0 50px 15px #00000032;
  border-radius: 2rem;
background-color: #000000;
}

.wvideo iframe {
      border-radius: 2rem;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}




.wvideo img {
  width: 100%;
  border-radius: 2rem;

}



.width-third {
  background: linear-gradient(90deg,rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 10rem);
  border-radius: 2rem;

}

.wtmod {
  border-radius: 0.5rem;

}

.skad {
padding-bottom: 5rem;

}

.spark {
  background: #704d2b;
background: linear-gradient(90deg,rgba(61, 46, 27, 1) 0%, rgba(177, 118, 67, 1) 100%);
}

.spark .heading2 {
  color: #d79e67;
}

.spark .spectrum1 {
  margin-top: 0;
}

.spark .spectrum-heading {
  color: #e7a366;
  font-size: 1.5rem;

}
.spark .spectrum-subheading {
  color: #e7a366aa;
}

.spark .spectrum-content-container {
  color: #ffffff88;
  padding-bottom: 0.5rem;
}

.spark .spectrum-row {
  margin-bottom: 1rem;
}

.spark .width-third {
  padding: 0 0 0 0.5rem;
}

.content-rad {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rad-sub {
  display: flex;
  flex-direction: row;
  align-items: center;
  align: center;
  max-width: 1080px;
}

.content-rad1 {
  padding-left: 10%;
  width: 48%;
}

.content-rad2 {
  width: 48%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content-radv {
  position: relative;
  max-width: min(55vw, 280px);
  width: 100%;
  height: 100%;
    border-radius: 2rem;
    overflow: hidden;
    aspect-ratio: 9 / 16;
    box-shadow: 0 0 50px 15px #00000032;
    border-radius: 2rem;
    margin-bottom: -1rem;
    background-color: #000000;
}

  .content-radv iframe {
        border-radius: 2rem;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;


}

.spark .content-l {
  text-align: center;
    color: #ffffff88;
}


.spark .num {
  font-family:'Hilsfiger';
  font-weight:bold;
  color: #fff;
  padding-left: 0.2rem;
  padding-right: 0.4rem;
}

.spark .content-l div {
border: 1px solid #ffffff44;
display: inline-block;
border-radius: 2rem;
padding: 0.3rem 0.8rem;
margin: 0.35rem;
}
.vibe {
  background: #182330;
  background: linear-gradient(167deg,rgba(24, 35, 48, 1) 0%, rgba(41, 90, 86, 1) 100%);
}

.vibe .heading2 {
  color: #5d7775;
}


.vibe .spectrum1 {
  margin-top: 0;
}

.vibe .spectrum-heading {
  color: #ac7962;
}
.vibe .spectrum-subheading {
  color: #ac7962bb;
}

.vibe .spectrum-content-container {
  color: #ffffff88;
}

.vibe .content-l {
  text-align: center;
    color: #ffffff88;
}


.vibe .content-l div {
background-color: #FFFFFF22;
display: inline-block;
border-radius: 2rem;
padding: 0.25rem 0.7rem;
margin: 0.35rem;
}
/* ======== SECTION 1.2 ====================*/

/* industry section background */
.industry {
  background-image: url("../images/bg_industry2.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* industry section background overlay */
.industry-sub {
      display: flex;
      flex-direction: column;
      width: 100%;
background: #000000;
background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.54) 10rem);
min-height: 79vh;
justify-content: center;
align-items: center;

}

/* industry tile blur */
.industry-item {
  display: inline-flex;
    width:11%;
    max-width: 9rem;
    border: 2px solid white;
    content-align: center;
    align-items: left;
    padding: 0.4rem 0rem 0.4rem 0.4rem;
      text-align: left;
      text-transform: lowercase;
-webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  }

/* mobile invisible last tile */
.industry-item.mobile-only {
    border: 0;
  }

/* ======== SECTION 1.3 ====================*/

/* highlights box offset into prev. section */
.section.boxx {
  background: linear-gradient(to bottom, transparent 50%, black 50%);
  padding: 0 3rem 0rem 3rem;
  margin-top: -10rem;
}

/* highlights box */
.section-box{
        display: flex;
        flex-direction: column;
box-shadow: 0 0 50px 15px #FFFFFF28;

  background: #000000;
  display: flex;
flex-direction: column;
    align-items: top;
    vertical-align: top;
   justify-content: center;
}

/* highlights section image */
.stories-img {
  width: 25rem;
  padding: 0 4rem 0 0;
}

/* ======== SECTION 1.4 ====================*/

/* final cta section background */
.section.fin {
  background: #000000;
  padding: 9rem 3rem 3rem 3rem;
}

/* ======== FOOTER ====================*/

/* footer background */
.section.footer {
  background: #122222;
  padding: 1rem;

  z-index: 1;
}


/* ======== BACKGROUND EFFECT FALLBACK ====================*/

@supports not (background-attachment: fixed) {
  .hero { background-attachment: scroll; }
  .hero-hint { background-attachment: scroll; }
  .industry { background-attachment: scroll; }

}