@font-face {
  font-family: 'Aeonik';
  src: url('/fonts/Aeonik-Regular.ttf') format('truetype');
  src: url('/fonts/Aeonik-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal; 
  font-display: swap;
} 
h1,h2,h3,h4,h5 {
    font-weight: 100;
}
.standard{
  color: rgb(218, 218, 218);
  font-size: 16px;
  font-weight: 100;
  line-height: 120%;;
}
.grey-big {
    color: rgb(84 84 84);
    font-size: clamp(2rem, 7vw, 4rem);
    margin: 0;
    line-height: 97%;
    margin-bottom: 15px;
}
.white-big {
    color: white;
    font-size: clamp(2rem, 7vw, 4rem);
    margin: 0;
    line-height: 97%;
    margin-bottom: 15px;
}
body {
  font-family: 'Aeonik', sans-serif; 
}
    html,
    body {
      background: rgb(32, 32, 32);
      font-size: 14px;
      color: black;
      margin: 0;
      padding: 0;
      position: relative;
      height: 100%;
    }
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url(img/grid-aspect.png) center center / cover no-repeat;
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
    filter: contrast(0.7);
}

/*Hotspot*/
.image-container {
position: relative;
display: inline-block;
}


.hotspot {
position: absolute;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
cursor: pointer;
transform: translate(-50%, -50%);
}


.popup {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.5);
display: none;
align-items: flex-end;
justify-content: center;
}


.popup-content {
background: #fff;
padding: 20px;
border-radius: 16px 16px 0 0;
max-width: 100%;
width: 100%;
text-align: center;
box-shadow: 0 -5px 20px rgba(0,0,0,0.2);
transform: translateY(100%);
transition: transform 0.35s ease;
}


.close-btn {
margin-top: 15px;
padding: 8px 16px;
background: black;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
}

    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: transparent;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .swiper {
      width: 100%;
      height: 300px;
      margin-left: auto;
      margin-right: auto;
    }

    .swiper-slide {
      background-size: cover;
      background-position: center;
    }

    .mySwiper2 {
    height: 90%;
    width: 100%;
    margin-bottom: 15px;
}

    .mySwiper {
      height: fit-content;
      box-sizing: border-box;
      padding: 10px 0;
    }

    

    .mySwiper .swiper-slide {
      width: 25%;
      height: 100%;
      opacity: 0.4;
    }

.mySwiper .swiper-slide-thumb-active {
    opacity: 1;
    background: white !important;
    color: black;
    border-radius: 100px;
    padding: 3px;
}

.mySwiper .swiper-slide {
    background: rgb(198, 198, 198);
    color: rgb(45, 45, 45);
    border-radius: 100px;
    padding: 5px 15px;
    max-width: max-content;
}

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  
.mySwiper .swiper-slide {
    cursor: pointer;
}
.mySwiper .swiper-slide p{
  margin: 0;
}
.intersection {  
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 100%;
    align-items: flex-start; 
    width: 100%;
}
.navigation {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 100;
}
.navigation h1 {
    /* background-image: linear-gradient(to right, rgb(51, 122, 229) 0px, rgb(64, 143, 229) 34%, rgb(212, 115, 74) 71%, rgb(234, 107, 46) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent; */
    font-size: 16px;
    font-weight: 100;
    color: #acafff;
}
.navigation h1, .navigation .menu-icon {
    min-width: 150px !important;
    padding: 20px;
    padding-top: 15px;
}
.navigation button{
  -webkit-transition: all 200ms linear;
	transition: all 200ms linear;
    text-align: right;
    background: #dbacff;
    border-radius: 100px;
    padding: 5px 10px;
    font-family: monospace;
    text-transform: uppercase;
    text-decoration: none;
    color: black;
    margin: 5px;
    float: right;
    width: fit-content;
    border: none;
    cursor: pointer;
    font-size: 17px;
}
.navigation img{
  filter: invert();
}
.intersection{
  padding: 20px;
  text-align: left;
}
.intersection .info {
    width: 100%;
    height: 100%;
    /* margin: auto; */
    padding-top: 80px;
    max-width: 100%;
    /* box-shadow: #e2e2e2 0px 0px 57px; */
    /* border-radius: 10px; */
    position: relative;
    /* background: #acafff; */
}
.intersection .info h4 {
    font-weight: 100;
    top: -44px;
    font-size: clamp(2rem, 7vw, 4rem);
    margin: 0;
    color: white;
    margin-bottom: 10px;
}
.intersection .info p {
    margin: 0;
}
.swiper-free-mode>.swiper-wrapper{
  background-color: #e1e1e14a;
  border-radius: 100px;
}
.swiper-thumbs {
    max-width: fit-content;
    padding-left: 10px;
}
.navigation img {
    filter: invert(1);
}
.changer .container {
  height: 100px;
  width: 100%;
  justify-content: left;
  align-items: center;
  display: flex;
}
.changer .text {
  font-weight: 100;
  font-size: 28px;
  color: #fafafa;
}
.changer .dud {
  color: #757575;
}


/*Vertical Inifinate List*/
.vertical-container {
  display: flex;
  gap: 40px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0));
}

.column {
  width: 100%;
  height: 500px;
  max-width:fit-content;
  overflow: hidden;
  position: relative;
}

.scroll {
  display: flex;
  flex-direction: column;
  animation: scroll-down 30s linear infinite;
}

.column.reverse .scroll {
  animation: scroll-up 30s linear infinite;
}

.item {
    height: 80px;
    background: rgb(50, 50, 50);
    border-radius: 100px;
    color: #a7aaf7;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    font-weight: 100 !important;
    max-width: max-content;
    margin: 30px auto;
    padding: 0px 35px;
    position: relative;
}

.item i{
  margin-right: 10px;
  font-size: 30px !important;
  color: greenyellow;
  position: absolute;
  top: -3px;
  right: -3px;
  opacity: 0.8;
}

/* scroll animations */
@keyframes scroll-down {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

@keyframes scroll-up {
  0%   { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}

.number-circle {
  display: inline-flex;           /* center content */
  justify-content: center;
  align-items: center;
  width: 30px;                    /* circle size */
  height: 30px;                   /* circle size */
  border-radius: 50%;             /* makes it a circle */
  background-color: greenyellow;      /* circle color */
  color: black;                   /* text color */
  font-weight: 100;
  font-size: 1.2rem;
  margin: 5px;                    /* spacing between circles */
  box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* optional shadow */
  margin-right: 10px;
  font-size: 20px !important;
  position: absolute;
  top: -13px;
  right: -3px;
  opacity: 0.8;
  display: none;
}
/*Process*/
.faq {
  max-width: 100%;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid #ddd;
}

.navigation button:hover {
    background: #acafff;
}

.nav-overlay {
  position: fixed;
  inset: 0;
  background: #202020;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 999;
}

.nav-overlay__content {
  max-width: 720px;
  margin: 120px auto 0;
  transform: translateY(12px);
  transition: transform 0.35s ease;
}

.nav-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.nav-overlay.is-active .nav-overlay__content {
  transform: translateY(0);
}

.nav-overlay__back {
    position: absolute;
    top: 32px;
    left: 32px;
    background: none;
    border: 0;
    color: #acafff;
    font-size: 17px;
    cursor: pointer;
    z-index: 99999;
    font-family: monospace;
    text-transform: uppercase;
}


.faq-question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 15px;
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 28px;
  color:  rgb(166 169 245);
  font-weight: 100;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 15px;
  color:white;
  font-size: 18px;
}

.faq-item.active .faq-answer {
  max-height: 200px; /* adjust if needed */
  padding: 15px;
}

.chevron {
  transition: transform 0.3s ease;
}

.faq-item.active .chevron {
  transform: rotate(90deg);
}

.card-info {
    padding: 20px;
    background: #323232;
    border-radius: 20px;
    min-height: fit-content;
    color: white;
    max-width: 600px;
    text-align: left;
    position: relative;
    margin: 50px;
    width: 100%;
    margin: 0 25px !important;
}

.swiper-slide-shadow-left,
.swiper-slide-shadow-right {
  display: none !important;
}

.approach .card-info{
    margin: 0px;
}
.card-info h1{
  max-width: 85%;
  color: #dbacff;
}
.card-info p{
  max-width: 85%;
  font-weight: 100;
}
.swiperFlip{
  height: 100%;
  margin-top: -20px;
  max-width: 500px;
}
.card-info i{
  position: absolute;
  top: 5px;
  right: 5px;
  color: white;
  opacity: 0.2;
  font-size: 24px;
}
.card-info .navibox {
    display: flex;
    flex-direction: row;
    position: absolute;
    bottom: 25px;
    right: 0;
    width: 100%;
}
.swiper-button-next, .swiper-button-prev {
    width: fit-content;
    padding: 5px;
    border-radius: 100px;
    font-size: 16px;
    min-width: 20px;
    height: 20px;
    background: #ddd;
    color: black;
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after, .card-info .swiper-button-next:after, .swiper-button-next:after, .swiper-rtl .swiper-button-next:after{
  display: none;
}
.card-info.pink {
    background: #acafff;
}
.card-info.pink h1{
  color: rgb(77, 77, 77);
}
.card-info.pink p{
  color: black;
}
/*Circle thoughts*/
 #pre-load{
     background:transparent;
     position:fixed;
     inset:0;
     display:flex;
     align-items:center;
     justify-content:center;
     z-index:0; 
}
 #pre-load .loader-inner{
     --loader-background:linear-gradient(0deg,rgba(50,50,50,.2) 0%,rgba(100,100,100,.2) 100%);
     position:relative;
     height:250px;
     aspect-ratio:1;
     display:flex;
     align-items:center;
     justify-content:center 
}
 #pre-load .loader-inner .loader-logo{
     position:absolute;
     top:50%;
     left:50%;
     transform:translate(-50%,-50%);
     width:60px;
     height:60px;
     display:flex;
     align-items:center;
     justify-content:center;
     animation:color-change 2s infinite ease-in-out;
     z-index:999 
}
 #pre-load .loader-inner .loader-logo svg{
    width:100%;
    height:100%
}
 #pre-load .loader-inner .box{
     position:absolute;
     background:var(--loader-background);
     border-radius:50%;
     border-top:1px solid rgb(100,100,100);
     box-shadow:rgba(0,0,0,.3) 0 10px 10px 0;
     backdrop-filter:blur(5px);
     animation:ripple 2s infinite ease-in-out 
}
 #pre-load .loader-inner .box:nth-child(1){
    width:25%;
    aspect-ratio:1/1;
    z-index:99
}
 #pre-load .loader-inner .box:nth-child(2){
    inset:30%;
    z-index:98;
    border-color:rgba(100,100,100,.8);
    animation-delay:.2s
}
 #pre-load .loader-inner .box:nth-child(3){
    inset:20%;
    z-index:97;
    border-color:rgba(100,100,100,.6);
    animation-delay:.4s
}
 #pre-load .loader-inner .box:nth-child(4){
    inset:10%;
    z-index:96;
    border-color:rgba(100,100,100,.4);
    animation-delay:.6s
}
 #pre-load .loader-inner .box:nth-child(5){
    inset:0;
    z-index:95;
    border-color:rgba(100,100,100,.2);
    animation-delay:.8s
}
 @keyframes ripple{
     0%{
        transform:scale(1);
        box-shadow:rgba(0,0,0,.3) 0 10px 10px 0
    }
     50%{
        transform:scale(1.3);
        box-shadow:rgba(0,0,0,.3) 0 30px 20px 0
    }
     100%{
        transform:scale(1);
        box-shadow:rgba(0,0,0,.3) 0 10px 10px 0
    }
}
 @keyframes color-change{
     0%{
        opacity:.7
    }
     50%{
        opacity:1
    }
     100%{
        opacity:.7
    }
}
 
/*Pop over menu*/
.menu-icon__line {
	height: 2px;
	width: 30px;
	display: block;
	background-color: #fff;
	margin-bottom: 7px;
	cursor: pointer;
	-webkit-transition: background-color .5s ease, -webkit-transform .2s ease;
	transition: background-color .5s ease, -webkit-transform .2s ease;
	transition: transform .2s ease, background-color .5s ease;
	transition: transform .2s ease, background-color .5s ease, -webkit-transform .2s ease;
}
.menu-icon__line-left {
	width: 16.5px;
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
}
.menu-icon__line-right {
	width: 16.5px;
	float: right;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	transition: all 200ms linear;
}
.menu-icon:hover .menu-icon__line-left,
.menu-icon:hover .menu-icon__line-right {
	width: 30px;
}
.nav {
	position: fixed;
	z-index: 98;
}
.nav:before, .nav:after {
	content: "";
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: rgba(20, 21, 26,0.6);
	border-bottom-left-radius: 200%;
	z-index: -1;
	-webkit-transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
	transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
	transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
	transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
	-webkit-transform: translateX(100%) translateY(-100%);
          transform: translateX(100%) translateY(-100%);
}
.nav:after {
	background: #202020;
	-webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.nav:before {
	-webkit-transition-delay: .2s;
          transition-delay: .2s;
}
.nav__content {
	position: fixed;
	visibility: hidden;
	top: 50%;
	margin-top: 0px;
	-webkit-transform: translate(0%, -50%);
          transform: translate(0%, -50%);
	width: 100%;
	text-align: center;
}
.nav__list .company{
      font-family: monospace;
    text-transform: uppercase;
}
.nav__list {
	position: relative;
	padding: 0;
	margin: 0;
	z-index: 2;
  max-width: 500px;
  margin: auto;
}
li.nav__list-item.active-nav span {
    font-size: 14px;
    letter-spacing: 0;
    font-weight: 100;
    max-width: 100%;
    display: inline-block;
}
li.nav__list-item.active-nav p {
    margin: 0;
    font-weight: 100;
    font-size: 18px;
    transition: all 3s ease; /* all properties, 3 seconds, smooth easing */
    -webkit-transition: all 3s ease; /* legacy WebKit */
}

.nav__list-item {
	position: relative;
	display: block;
	-webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
	opacity: 0;
	text-align: center;
	color: #fff;
	overflow: hidden; 
	font-size: 4vh;
	font-weight: 100;
	line-height: 1.15;
	-webkit-transform: translate(100px, 0%);
          transform: translate(100px, 0%);
	-webkit-transition: opacity .2s ease, -webkit-transform .3s ease;
	transition: opacity .2s ease, -webkit-transform .3s ease;
	transition: opacity .2s ease, transform .3s ease;
	transition: opacity .2s ease, transform .3s ease, -webkit-transform .3s ease;
	margin-top: 0;
	margin-bottom: 0;
}
.nav__list-item a{ 
	position: relative;
	text-decoration: none;
	color: rgba(255,255,255,0.6);
	overflow: hidden; 
	cursor: pointer;
	padding-left: 20px;
	padding-right: 5px;
	font-weight: 900;
	z-index: 2;
	display: inline-block;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear; 
    text-align: left;
  padding-bottom: 15px;
  padding-top: 15px;
  border-bottom: 1px rgb(82, 82, 82) solid;
  width: 100%;
}
.nav__list-item a:hover:after{ 
	height: 4px;
	opacity: 1;
	left: 0;
	width: 100%;
}
li.nav__list-item.active-nav i {
    position: absolute;
    right: 55px;
    font-size: 30px;
    top: 25%;
    background: #232323;
    border-radius: 100px;
    transition: all 3s ease; /* all properties, 3 seconds, smooth easing */
  -webkit-transition: all 3s ease; /* legacy WebKit */
}


ul.nav__list li:hover i {
    right: 36px;
    color:greenyellow;
}
li.nav__list-item.active-nav a:hover p {
    color: greenyellow !important;
}
.nav__list-item a:hover{
	color: rgba(255,255,255,1);
}
.nav__list-item.active-nav a{
	color: rgba(255,255,255,1);
}
.nav__list-item.active-nav a:after{ 
	height: 4px;
	opacity: 1;
	left: 0;
	width: 100%;
}
body.nav-active .nav__content {
	visibility: visible;
}
body.nav-active .menu-icon__line {
	background-color: #fff;
	-webkit-transform: translate(0px, 0px) rotate(-45deg);
          transform: translate(0px, 0px) rotate(-45deg);
}
body.nav-active .menu-icon__line-left {
	width: 15px;
	-webkit-transform: translate(2px, 4px) rotate(45deg);
          transform: translate(2px, 4px) rotate(45deg);
}
body.nav-active .menu-icon__line-right {
	width: 15px;
	float: right;
	-webkit-transform: translate(-3px, -3.5px) rotate(45deg);
          transform: translate(-3px, -3.5px) rotate(45deg);
}
body.nav-active .menu-icon:hover .menu-icon__line-left,
body.nav-active .menu-icon:hover .menu-icon__line-right {
	width: 15px;
}
body.nav-active .nav {
	visibility: visible;
}
body.nav-active .nav:before, body.nav-active .nav:after {
	-webkit-transform: translateX(0%) translateY(0%);
          transform: translateX(0%) translateY(0%);
	border-radius: 0;
}
body.nav-active .nav:after {
	-webkit-transition-delay: .1s;
          transition-delay: .1s;
}
body.nav-active .nav:before {
	-webkit-transition-delay: 0s;
          transition-delay: 0s;
}
body.nav-active .nav__list-item {
	opacity: 1;
	-webkit-transform: translateX(0%);
          transform: translateX(0%);
	-webkit-transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
	transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
	transition: opacity .3s ease, transform .3s ease, color .3s ease;
	transition: opacity .3s ease, transform .3s ease, color .3s ease, -webkit-transform .3s ease;
}
body.nav-active .nav__list-item:nth-child(0) {
	-webkit-transition-delay: 0.7s;
          transition-delay: 0.7s;
}
body.nav-active .nav__list-item:nth-child(1) {
	-webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
body.nav-active .nav__list-item:nth-child(2) {
	-webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
}
body.nav-active .nav__list-item:nth-child(3) {
	-webkit-transition-delay: 1s;
          transition-delay: 1s;
}
body.nav-active .nav__list-item:nth-child(4) {
	-webkit-transition-delay: 1.1s;
          transition-delay: 1.1s;
}
body.nav-active .nav__list-item:nth-child(5) {
	-webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}
body.nav-active .nav__list-item:nth-child(6) {
	-webkit-transition-delay: 1.3s;
          transition-delay: 1.3s;
}
body.nav-active .nav__list-item:nth-child(7) {
	-webkit-transition-delay: 1.4s;
          transition-delay: 1.4s;
}
body.nav-active .nav__list-item:nth-child(8) {
	-webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}
body.nav-active .nav__list-item:nth-child(9) {
	-webkit-transition-delay: 1.6s;
          transition-delay: 1.6s;
}
body.nav-active .nav__list-item:nth-child(10) {
	-webkit-transition-delay: 1.7s;
          transition-delay: 1.7s;
}



.biography {
    text-align: left;
    width: 330px;
    height: fit-content;
    border: solid white 8px;
    border-radius: 23px;
    background: white;
}
.profile-frame img{
    z-index: -1;
    width: 100%;
    border-radius: 13px;
    height: 340px;
}
.profile-frame .details {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    height: 66%;
    align-content: space-between;
    flex-direction: column;
    justify-content: space-between;
    width: 90%;
}
.profile-frame button {
    background: rgb(100 100 100 / 36%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    border-radius: 10px;
    width: 48%;
    color: white;
    padding: 10px 15px;
    font-size: 16px;
}
.details p {
    margin: 0;
    margin-bottom: 5px;
}
.biography .icons{
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 2;
}
.biography .icons img{
  width: 30px;
  object-fit: contain;
  height: fit-content;
  margin-bottom: 10px;
}
.biography .about{
  /* background: rgb(224, 223, 235); */
  border-radius: 20px;
  padding: 15px;
  padding-top: 0; 
}
.about h2 {
  margin: 5px 0;  
  padding-top: 8px;
  font-size: 18px;
}
.about p{
  margin: 0;
  font-size: 16px;
}

.glowdot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 10px;
    height: 10px;
    background-color: #008d02;
    border-radius: 50%;
    position: relative;
    z-index: 9999999;
    float: left;
    margin-top: 6px;
}
.glowdot:before {
  content: "";
  width: inherit;
  height: inherit;
  border: 5px solid #008d02;
  border-radius: inherit;
  position: absolute;
  z-index: -10;
  opacity: 0;
  animation: 2s expand cubic-bezier(0.29, 0, 0, 1) infinite;
  animation-delay: 1s;
}

@keyframes expand {
  /* Starting at 1 to prevent IOS flicker */
  1% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    width: 750%;
    height: 750%;
    opacity: 0;
    border-color: #fff;
    background-color: none;
    border-width: 2px;
  }
}

.approach .intersection {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    height: 100%;
    align-items: flex-start;
    width: 100%;
}
.intersection .card-info img {
    height: auto;
    margin: 20px 0;
    margin-bottom: 35px;
    max-width: 300px;
}
.swiper-slide .intro {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    margin-top: 45px;
    color: white;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 12px;
}
.approach .info {
    padding: 0 !important;
}
.swiperFreemode {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
}
.swiper-free-mode>.swiper-wrapper{
  background: transparent;
}

.swiper.swiperFreemode .card-info {
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
/* .swiper.swiperFreemode .card-info h1{
  font-size: 22px;
} */
.swiper.swiperFreemode i.bi.bi-arrow-right {
    color: #00ff00;
    opacity: 1;
    position: absolute;
    top: 50%;
    right: -100px;
}


.swiper-scrollbar-drag {
    top: -5px;
    background: white;
    height: 10px;
}
.navibox {
    position: absolute;
    bottom: -35px;
    width: 95px;
    height: 355px;
    text-align: center;
    display: flex;
    justify-content: space-evenly;
    left: 41%;
}

.solution .card-info p, .approach .card-info p{
    max-width: 100%;
}
.approach .card-info{
  min-height: max-content;
}
.solution .card-info {
    flex-direction: column;
    justify-content: center !important;
    background: #262626 !important;
    border-radius: 30px;
    padding: 20px;
}

.swiper.swiperFreemode .card-info i {
    position: relative;
    color: white;
    opacity: 1;
}

.pdetail div{
  display: flex;
  gap: 20px;
}
.pdetail span {
    font-family: monospace;
    text-transform: uppercase;
    color: #939393;
    font-size: 14px;
}
.pdetail img{
  width: 50px; padding-left: 0; margin: 0 !important; margin-top: 8px !important; display: inline;
}

img.runway-img {
    padding: 35px;
    max-width: 85%;
}
.intersection .jumbotron{
  position: relative;
  overflow: hidden;
}
.gradient {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 200px;
    background: #202020;
background: linear-gradient(0deg, rgba(32, 32, 32, 1) 48%, rgba(32, 32, 32, 0) 72%);
    pointer-events: none;
    z-index: 2;
}
.swiper-slide .intro {
    margin-left: 17px;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    margin-top: 45px;
    color: white;
    position: absolute;
    left: 0;
    top: 20px;
    font-size: 10px;
    background: #8080801f;
    border-radius: 100px;
    height: 28px;
    padding: 5px 12px;
}


div#overlayContent {
    color: white;
}
div#navOverlay .nav__content {
    height: 100%;
}
div#navOverlay p.subtitle {
    padding: 0 20px;
}
ul.nav__list h1 {
    font-size: 18px;
    margin-bottom: 0;
    color: #acafff;
}
ul.nav__list p {
    margin-top: 10px;
    margin-bottom: 25px;
}
.card-info .pinkarrow{
  position: absolute;
    right: -60px;
    top: -42px;
    max-width: 75px !important;
    rotate: 20deg;

}