@import url('https://fonts.cdnfonts.com/css/helvetica-neue-55');

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeueCE-Bold.woff2') format('woff2'),
        url('../fonts/HelveticaNeueCE-Bold.woff') format('woff'),
        url('../fonts/HelveticaNeueCE-Bold.ttf') format('truetype'),
        url('../fonts/HelveticaNeueCE-Bold.svg#HelveticaNeueCE-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeue.woff2') format('woff2'),
        url('../fonts/HelveticaNeue.woff') format('woff'),
        url('../fonts/HelveticaNeue.ttf') format('truetype'),
        url('../fonts/HelveticaNeue.svg#HelveticaNeue') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeueCE-Heavy.woff2') format('woff2'),
        url('../fonts/HelveticaNeueCE-Heavy.woff') format('woff'),
        url('../fonts/HelveticaNeueCE-Heavy.ttf') format('truetype'),
        url('../fonts/HelveticaNeueCE-Heavy.svg#HelveticaNeueCE-Heavy') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue LT Std';
    src: url('../fonts/HelveticaNeueLTStd-MdCnO.woff2') format('woff2'),
        url('../fonts/HelveticaNeueLTStd-MdCnO.woff') format('woff'),
        url('../fonts/HelveticaNeueLTStd-MdCnO.ttf') format('truetype'),
        url('../fonts/HelveticaNeueLTStd-MdCnO.svg#HelveticaNeueLTStd-MdCnO') format('svg');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue LT Std';
    src: url('../fonts/HelveticaNeueLTStd-MdCn.woff2') format('woff2'),
        url('../fonts/HelveticaNeueLTStd-MdCn.woff') format('woff'),
        url('../fonts/HelveticaNeueLTStd-MdCn.ttf') format('truetype'),
        url('../fonts/HelveticaNeueLTStd-MdCn.svg#HelveticaNeueLTStd-MdCn') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}



 :root{
    --primary-color: #f5b417;
    --primary: 10 100% 58%;
    --foreground: 0 0% 100%;
    --card: 0 0% 8%;
    
    --secondary-color: #000000;
    --white-color: #ffffff;
    --light-black-color: #080c16;
    --white-smoke-color: #b1c3dc;
    --dark-gray-color: #18191b;
    --footer-bg-color: #0b111e;
    --gold: 39 78% 60%;

    --muted-foreground: 0 0% 65%;
}
*, :before, :after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 500px; /* Fixed header offset */
}

body {
    color: var(--white-color);
    background: var(--secondary-color);
    font-weight: normal;
    line-height: 30px;
    font-size: 16px;
    font-family: 'Helvetica Neue', 'Open Sans', 'Roboto', sans-serif;    
}
ul, li{list-style-type: none; margin: 0; padding: 0;}
a{text-decoration: none; color: inherit; transition: all 0.3s ease;}

h1, h2, h3, h4, h5, h6{letter-spacing: normal;}
h2{    color: var(--white-color);
    font-size: 3em;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 0.2em;
    font-family: "Helvetica Neue LT Std", sans-serif, 'Roboto';}

h3{ font-family: "Helvetica Neue LT Std", sans-serif, 'Roboto'; font-weight: 500; line-height: 1;}
.color-primary{color: hsl(var(--primary));}

.bg-primary-scroll {background-color: #f5b417}

.bg-card\/30 {
    background-color: hsl(var(--card) / .3);
}
/* 
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-thumb {
    background: hsl(var(--primary-color));
    border-radius: 4px;
}
::-webkit-scrollbar-track {
    background: hsl(var(--light-black-color));
} */

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1400px;
    }
}

h1{font-size: 5rem; line-height: 1; margin-bottom: 2rem;}
.max-w-6xl {max-width: 72rem;}

.menu li{display: inline-block; list-style-type: none; padding: 0 15px; position: relative;}
.main-navigation ul li.current-menu-item a, .main-navigation ul li.current-page-item a {color: hsl(var(--primary));}
.main-navigation a {font-family: 'Helvetica Neue', 'Open Sans', 'Roboto', sans-serif; color: #FFFFFF; font-size: 17px;}
.main-navigation a:hover { color: hsl(var(--primary));}

section.pre-footer h3 span{color: hsl(var(--gold));} 

/* #header{background: transparent !important;} */

.small-title{color: var(--primary-color); font-size: 1em; font-weight: bold; text-transform: uppercase; margin-bottom: 0.5em;}
.title{color: var(--white-color); font-size: 2.5em; font-weight: 700; line-height: 1; margin-bottom: 0.2em; font-family: "Figtree", sans-serif;}

.ecosystem{background-color: var(--dark-gray-color);}
.ecosystem ul li svg{width: 1.25rem; height: 1.25rem;}

.philosophy{background-color: var(--dark-gray-color);}
.philosophy p{font-size: 1.125em; line-height: 1.5;}

.fun-fact .counter{color: var(--white-color); font-size: 3em; font-weight: 500; line-height: 1; margin-bottom: 0.2em; font-family: "Helvetica Neue LT Std", sans-serif, 'Roboto';}

.min-h-screen-small{min-height: calc(100vh - 96px);}

.bg-dark{background-color: var(--secondary-color) !important; opacity: 1; background-image: none !important;  border-bottom: 1px solid var(--dark-gray-color);}


/* Default header (top of page) */
header, .site-header, nav.navbar {
    background: transparent !important;
    transition: all 0.3s ease;    
}

/* Scrolled header (after 100px) */
header.static-header, header.static-header nav.navbar{
    background: rgba(0,0,0,0.95) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.1);    
}
header.static-header nav.navbar .navbar-brand img{height: 45px;}


.navbar{padding: 0.8em 0;}
.navbar-brand img{height: 60px;  transition: all 0.3s ease; }
.navbar-nav .nav-link{color: var(--white-color); font-size: 17px;}
.navbar-nav .nav-link:hover{color: var(--primary-color);}
.navbar-nav .nav-link:focus{outline: none; box-shadow: none;}


.btn-primary {color: var(--white-color); background-color: var(--primary-color); border: 0; font-size: 16px; padding: 10px 25px; border-radius: 4px; font-weight: bold; transition: all 0.3s ease;}
.btn-primary:hover { color: var(--white-color); background-color: var(--secondary-color);}
.navbar-expand-md .navbar-nav .nav-link{padding: 0 15px;}

.our-clients{padding: 5em 0; background-color: var(--dark-gray-color);}

.what-we-do{padding: 5em 0; border-top: 1px solid var(--dark-gray-color);}

.card-box{margin: 0;}
.card-box h3{font-size: 1.50em; color: hsl(var(--primary)); font-weight: 500;  font-family: 'Helvetica Neue LT Std'; text-transform: uppercase;}
.card-box h4{color: hsl(var(--primary)); font-size: 1em; font-weight: bold; text-transform: uppercase; margin-bottom: 0em;}
.card-box p{font-size: 1.0625em;}


.testimonials{padding: 5em 0;}
.testimonials p.content{font-size: 1.75em; margin: 1.5em 0; line-height: 1.3; font-style: italic;}


.about-stage{background: var(--dark-gray-color); padding: 5em 0;}
.about-stage p{font-size: 1.125em;}

.number-stats{padding: 5em 0;}

.cta-bar{ padding: 5em 0; border-top: 1px solid var(--dark-gray-color);}
.cta-content{padding: 5em; background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); border-color: hsl(var(--primary-color) / .2); border-width: 1px; border-style: solid; border-radius: 8px; overflow: hidden; position: relative;}
.cta-bar p{font-size: 18px;}

.main-footer {border-top: 1px solid var(--dark-gray-color);	background-color: var(--footer-bg-color) !important;	padding: 0;}
.pre-footer {padding: 5em 0;}
.main-footer a {color: var(--white-smoke-color); font-size: 15px;}
.main-footer a:hover {color: var(--primary-color); text-decoration: none;}
.main-footer p{margin: 0; padding: 0;}
.main-footer h4{font-weight: bold; font-size: 1em;}
.main-footer .nav-link{margin: 0; padding: 0 15px;}
.main-footer .nav-link:last-child{padding-right: 0;}

p.footer-logo-txt{color: var(--white-smoke-color); font-size: 15px; margin-top: 1.2em; line-height: 22px; margin-right: 10px;}
.footer-bottom {border-top: #242d42 1px solid; background-color: var(--footer-bg-color) !important; font-size: 15px; color: var(--white-smoke-color); padding: 2em 0;}

.footer-bottom .f-logo img{height: 48px; width: auto;}


/* .client-style-one-item .fun-fact {
    display: flex;
    align-items: center;
    flex-direction: column;
} */



.client-style-one-items {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-left: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    position: relative;
}
.bg-darks .client-style-one-item {
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, .1);
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 30px 30px;
    position: relative;
    z-index: 1;
    min-height: 150px;
}
.bg-darks .client-style-one-item img, .bg-darks .client-style-one-item .viewall {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    max-height: 100px;
} 
.client-style-one-item:first-child:before {
    position: absolute;
    top: -1px;
    left: -1px;
    height: 100%;
    width: 2px;
    content: "";
}
.client-style-one-item:first-child:after {
    position: absolute;
    top: -1px;
    left: 0;
    height: 1px;
    width: 100%;    
    content: "";
}
.client-style-one-item:last-child:before {
    position: absolute;
    bottom: -1px;
    right: -1px;
    height: 100%;
    width: 1px;
    content: "";
}
.client-style-one-item:last-child:after {
    position: absolute;
    bottom: -1px;
    right: 0;
    height: 1px;
    width: 100%;
    background: var(--white);
    content: "";
}

.bg-darks .client-style-one-item {
    border-right: 1px solid rgba(255, 255, 255, .1);
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.bg-darks .client-style-one-item:first-child:before {   
    border-left: 1px solid #18191b;
}
.bg-darks .client-style-one-item:first-child:after {    
    border-top: 1px solid #18191b;
}
.bg-darks .client-style-one-item:last-child:before {
    background: #18191b;
}
.bg-darks .client-style-one-item:last-child:after {
    background: #18191b;
}

.brand-info {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
    padding-right: 60px;
}
.brand-info h3{padding: 0.5em 1.2em; border: 2px solid #242d42; border-radius: 50px; display: inline-block; margin-bottom: 0.8em;}

.brand-info:after {
    position: absolute;
    right: 0;
    top: 0;
    content: "";
    height: 100%;
    width: 1px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0), var(--primary-color), rgba(255, 255, 255, 0));
}
.bg-darks .brand-info:after {
    background: linear-gradient(to top, rgba(255, 255, 255, 0), var(--primary-color), rgba(255, 255, 255, 0));
}

.brand-info p {
    font-size: 1.125em;
    line-height: 1.6;
    margin-top: 1em;
}

.counter h2{ font-size: 4em;}

.video-wrapper{display: flex; align-items: center; justify-content: center; }
.video-wrapper .text-container{display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; width: 30%;}
.video-wrapper .text-container .text{margin: 0 -300px 0 0; z-index: 1; text-align: left; z-index: 3;}
.video-wrapper .text-container .text h5{line-height: 1.4; padding: 0.5em 0; color: #b3b3b3;}
.video-wrapper .text-container .text p{font-size: 1.125em; line-height: 1.3;  color: #b3b3b3e0;}
.video-wrapper.right-part .text-container .text{margin: 0 0 0 -200px; z-index: 3;}

.video-wrapper .video-container{width: 800px; height: 500px; overflow: hidden; position: relative;}

.video-wrapper .video-container img.video-poster{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; transition: opacity 0.5s ease-out;}

.video-wrapper .video-container img{width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s ease-out; top: 0; bottom: 0; left: 0; right: 0;}
.video-wrapper .video-container::before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; background-image: linear-gradient(90deg, var(--secondary-color) 0%, rgba(0, 0, 0, 0.1) 42%); z-index: 2;}


.video-wrapper.right-part .video-container::before{content: ""; position: absolute; top: 0; right: 0;  width: 100%; height: 100%; background-color: transparent; background-image: linear-gradient(-90deg, var(--secondary-color) 0%, rgba(0, 0, 0, 0.2) 80%); z-index: 2; }

.video-container{display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; width: 70%;}


.hero-content h1{
    font-size: 2.5em;
    font-weight: 700;
    margin-bottom: 0.5em;
    line-height: 1;
    font-family: "Figtree", sans-serif;
    color: var(--primary-color);
}

.hero-content h2{
    font-size: 1.8em;
    font-weight: 600;
    margin-bottom: 0.5em;
    line-height: 1;
    font-family: "Figtree", sans-serif;
}

.hero-content p{
    font-size: 1.225em;
    line-height: 1.4;
    color: #b3b3b3;
}


.about-us{padding: 5em 0;}
.about-us h2{margin-bottom: 0.5em;}
.about-us p{font-size: 1.125em; line-height: 1.5;}

.contact-information h2{font-size: 1.1em; color: var(--primary-color);}
.contact-information hr{border-color: #5f5d5d;}

.contact-form{margin-top: 0em;}
.contact-form label{font-size: 1.1em; text-align: right;}
.contact-form .form-control{background: #ededed;}

.hero-banner {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover; /* Key: fills screen without distortion */
  z-index: 1;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4); /* Dark overlay for text readability */
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  color: white;
  text-align: center;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 800px;
}





.container-wrap{
    background-color: #000;
    position: relative;
    z-index: 10;
    margin-top: 0;
    padding: 0;
    height: calc(100vh - 80px);
    /* min-height: 770px; */
}
.hero-bg{
    position: relative;    
    overflow: hidden;
    min-height: 600px;
}
.main-video-container{
    inset: 0;
    overflow: hidden;
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
}
.overlay-zoom{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 94%;
    height: 100%;    
    overflow: hidden;
    z-index: 5;
    transition: background-color 0.3s ease;
    margin: 0 auto;
    padding: 0;
    background-image: url('../img/stage-3-01.svg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.overlay-zoom-s3{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 84%;
    height: 100%;    
    overflow: hidden;
    z-index: 5;
    transition: background-color 0.3s ease;
    margin: 0 auto;
    padding: 0;
    background-image: url('../img/stage-3-02-01.svg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.container-wrap iframe{
    width: 70%;
    height: 100%;
    margin: 0 auto;
    border: none; position: absolute; left: 0; top: 0; z-index: 1;
    right: 0; bottom: 0;
    background: #000000;
}
.container-wrap video{
    width: 70%;
    height: 100%;
    margin: 0 auto;
    border: none; position: absolute; left: 0; top: 0; z-index: 1;
    right: 0; bottom: 0;
    background: #000000;
}
.container-wrap video.main-video-s3{
    width: 80%;
}
.stage-3-media-logo img{height: 56px; width: auto;}
.directories-logo img{height: 56px; width: auto;}
.stage-3-labs-logo img{height: 56px; width: auto;}

button{font-weight: 500; font-family: 'roboto'; font-size: 1em;}

.f-logo img {
    height: 39px;
    width: auto;
}

    .lg\:col-span-3 {
        grid-column: span 3 / span 3;
    }


.custom-logo-link img{width: 100%;}


a.btn-cyn button{transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s; scale: 1; 
    background-color: #0bb5e6;
    color: #ffffff;}

a.btn-cyn:hover button {
    scale: 1.05;
}
.active{background-color: hsl(var(--primary) / .5); border-color: hsl(var(--primary) / .5);}

.mobile-nav{}
.mobile-nav .menu li{display: block;}
.mobile-nav .menu li a {
    display: block;
    list-style-type: none;
    padding: 8px;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-nav .menu li:last-child a{border-bottom: 0;}
.pb-6{padding-bottom: 15px;}


.md\:hidden svg {
  transition: all 0.3s ease;
}

.md\:hidden line {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: 15px 9px;
}

/* X Formation */
.md\:hidden .lucide-x line:nth-child(1) {
  transform: rotate(45deg);
  stroke-width: 2.5;
}

.md\:hidden .lucide-x line:nth-child(2) {
  transform: rotate(-45deg);
  stroke-width: 2.5;
}

.md\:hidden .lucide-x line:nth-child(3) {
  opacity: 0;
  transform: scale(0, 0);
}

.mobile-nav ul li.current-menu-item a, .mobile-nav ul li.current-page-item a {color: hsl(var(--primary));}
.mobile-nav a {font-family: 'Helvetica Neue', 'Open Sans', 'Roboto', sans-serif; color: #FFFFFF; font-size: 17px;}
.mobile-nav a:hover { color: hsl(var(--primary));}

.ml-90{margin-left: 90px;}
.ft-text-right{text-align: right;}

@media screen and (max-width:1024px){
    h1{font-size: 3rem;}
    h2{font-size: 2.5em;}
    .leading-relaxed{line-height: 1.5;}
}


@media screen and (max-width:927px){
    .custom-logo-link img{height: 50px !important;}
    .main-navigation ul li{padding: 0 7px;}
    .top-navigation .container{padding-left: 15px; padding-right: 15px;}
    footer .container {padding-left: 15px; padding-right: 15px;}
    .container{padding-left: 0; padding-right: 0;}
    section.py-20{padding-top: 3rem; padding-bottom: 3rem;}
    h1{font-size: 2.5rem;}
    h2{font-size: 2em;}
    .leading-relaxed{line-height: 1.5;}
    .ml-90{margin-left: 0px;}
    .ft-text-right{text-align: center;}
   .h-\[500px\]{height: auto;}

   #custom_html-2 img{height: 55px;}
   h2.md\:text-5xl{font-size: 2.25rem;}
}

@media screen and (max-width:768px){
    .custom-logo-link img{height: 50px !important;}
    .main-navigation ul li{padding: 0 7px;}
    .top-navigation .container{padding-left: 15px; padding-right: 15px;}
    footer .container {padding-left: 15px; padding-right: 15px;}
    .container{padding-left: 0; padding-right: 0;}
    section.py-20{padding-top: 3rem; padding-bottom: 3rem;}
    h1{font-size: 2.5rem;}
    h2{font-size: 2em;}
    .leading-relaxed{line-height: 1.5;}
    .ml-90{margin-left: 0px;}
    .ft-text-right{text-align: center;}
   .h-\[500px\]{height: auto;}

   #custom_html-2 img{height: 55px;}
   h2.md\:text-5xl{font-size: 2.25rem;}
}

@media screen and (max-width:767px){
    .top-navigation .container{padding-left: 15px; padding-right: 15px;}
    footer .container {padding-left: 15px; padding-right: 15px;}
    .container{padding-left: 0; padding-right: 0;}
    section.py-20{padding-top: 3rem; padding-bottom: 3rem;}
    h1{font-size: 2.5rem;}
    h2{font-size: 2em;}
    .leading-relaxed{line-height: 1.5;}
    .ml-90{margin-left: 0px;}
    .ft-text-right{text-align: center;}
   .h-\[500px\]{height: auto;}
}