.menu > .link-on-light {
	color: var(--text-color-light);
}

.menu {
	padding-top: 1.5vw;
	margin-top: 0;
}

.section-4 {
  background-image: linear-gradient(#181d24, #181d2480), url("../images/bgteams_cropped2.png");
  background-position: 0 0, 0 0;
  background-size: auto, cover;
}


.section-header.section-header {
	background-image:
		linear-gradient(to bottom,
			#181d24 0%,
			/* dark at the top */
			rgba(255, 255, 255, 0.5) 70%,
			/* half-transparent white */
			#f2f2f2 100%
			/* solid white at the bottom */
		),
		url("../images/bgteams_cropped2.png") !important;
	/* Gradient at top-left, image centered horizontally & anchored to bottom */
	background-position:
		0 0,
		/* gradient */
		50% 100%;
	/* image: center bottom */
	background-size:
		auto,
		/* gradient naturally fills */
		cover;
	/* image covers container */
	background-repeat: no-repeat;
}

.w-lightbox-frame,
.w-lightbox-embed {
	width: 100vw;
	height: 100vh;
}

.w-lightbox-content {
	height: 100vh;
	margin: 0px;
}

.simple-slider {
	position: relative;
	width: 100%;
	height: 40vw;
	/*max-width: 800px; */
	/* optional: limit max width */
	aspect-ratio: 16 / 9;
	/* controls shape; adjust if you like */
	overflow: hidden;
}

/* All slides stacked on top of each other */
.simple-slider img {
	position: absolute;
	inset: 0;
	/* top:0; right:0; bottom:0; left:0 */
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* crop to fill the area */
	opacity: 0;
	transition: opacity 0.7s ease-in-out;
}

/* Visible slide */
.simple-slider img.active {
	opacity: 1;
}

h4 {
	font-family: Gilroy, Arial, sans-serif;
}

body {
	font-family: Gilroy, Arial, sans-serif;
}

.button-cta,
.button,
.banner,
.wrap-photo-project,
.wrap-box-the-value,
.slide-testimonial {
	border-radius: 25px;
}
.slide-testimonial {
  min-height: 465px;
}

@media screen and (min-width: 480px) {
  .slide-testimonial {
    min-height: 455px;
  }
}

@media screen and (min-width: 768px) {
  .slide-testimonial {
    min-height: 430px;
  }
}

@media screen and (min-width: 992px) {
  .slide-testimonial {
    min-height: 575px;
  }
}

@media screen and (min-width: 1440px) {
  .slide-testimonial {
    min-height: 560px;
  }
}

.section-header {
	z-index: 0;
}

.banner {
	z-index: 1;
}

.stagger-heading .letter {
	display: inline-block;
	transform: rotateX(90deg);
	transform-origin: bottom;
	opacity: 0;
}

.stagger-heading.in-view .letter {
	animation: letterFlipIn 0.5s forwards;
}

@keyframes letterFlipIn {
	0% {
		transform: rotateX(90deg);
		opacity: 0;
	}

	100% {
		/* Your target state */
		transform: translate(0px, 0px) rotateX(0deg);
		opacity: 1;
	}
}

.div-block-4 .our-numbers-item:not(:first-child) {
	border-left: 1px solid #e5e5e5;
}

.w-webflow-badge {
	display: none !important;
}

.primary-button-arrow {
	height: 20px;
}

.testimonial-stars {
  justify-content: flex-start;
}

@media screen and (min-width: 480px) {
  .testimonial-stars {
    justify-content: center;
  }
}

.testimonial-stars .star {
	opacity: .25;
}

.testimonial-stars .star.is-filled {
	opacity: 1;
}

.testimonial-stars svg {
	fill: var(--line-color-03);
}

.info-text-footer {
  opacity: 1;
}

.text-size-tiny {
	font-size: 1rem;
	color: #fff !important;
}

.logo-webflow-light {
  width: auto;
}

.margin-right-30px {
  background-color: rgba(255, 255, 255, 0.90);
}


.margin-right-10px {
	margin-right: 10px;
}

.footer-pipe{
	background-color: #fff;
	width: 2px;
	height: 100%;
}

@media screen and (min-width: 1440px) {
  .margin-right-10px {
    margin-right: 10px;
  }
}

/* Link overlay on depot */
#section-depot { position: relative; } 

.section-depot-overlay-link{
  position:absolute;
  inset:0;
  z-index:9999;
  display:block;
  cursor:pointer;
  background:transparent;
}



/* Optional: enable smooth scroll site-wide */
html {
  scroll-behavior: auto; /*smooth;*/
}

#backToTop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;

  padding: 10px 14px;
  border: 0;
  border-radius: 999px;

  cursor: pointer;

  /* basic styling (adjust to match your site) */
  background: #111;
  color: #fff;
  font-size: 14px;
  line-height: 1;

  /* hidden by default */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

#backToTop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#backToTop:focus-visible {
  outline: 3px solid rgba(0, 120, 255, 0.6);
  outline-offset: 3px;
}

/* Optional: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #backToTop { transition: none; }
}


    /* =========================
       KeyBenefits (namespaced)
       ========================= */
  :root{
    --KeyBenefits-blue:#060C43;
    --KeyBenefits-shadow:none; /* you can set a real shadow later if you want */
  }

  .KeyBenefitsSection{
    display:grid;
    place-items:center;
    padding:clamp(20px, 3vw, 40px) 16px;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  }

  .KeyBenefitsHero{
    width:min(980px, 100%);
    position:relative;
    border-radius:clamp(14px, 2vw, 20px);
    overflow:hidden;
    background:#fff;
    box-shadow:var(--KeyBenefits-shadow);
  }

  /* Prefer aspect-ratio when supported */
  .KeyBenefitsHero{
    aspect-ratio:16/9;
  }
  /* Fallback height if aspect-ratio isn't supported */
  @supports not (aspect-ratio: 16/9){
    .KeyBenefitsHero{
      height:clamp(320px, 52vw, 560px);
    }
  }

  .KeyBenefitsHeroImg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    will-change:transform;
    transform:translate3d(0,0,0) scale(1);
  }

  .KeyBenefitsHero::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(0,0,0,0.10));
    pointer-events:none;
    transition:opacity 300ms ease;
    opacity:1;
  }
  .KeyBenefitsHero--hasActive::after{ opacity:0.92; }

  /* Layer that holds the cards (useful for responsive stacking) */
  .KeyBenefitsCardsLayer{
    position:absolute;
    inset:0;
    z-index:2;
  }

  .KeyBenefitsCard{
    position:absolute;
    z-index:2;

    width:clamp(180px, 24vw, 260px);
    padding:clamp(10px, 1.2vw, 14px);
    border-radius:clamp(12px, 1.6vw, 16px);

    color:#fff;
    background:rgba(175,175,175,0.52);
    border:1px solid rgba(255,255,255,0.25);

    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);

    cursor:pointer;
    user-select:none;
    outline:none;
	text-align: center;
	
    transform:scale(1);
    transition:
      transform 220ms ease,
      background-color 220ms ease,
      border-color 220ms ease,
      box-shadow 220ms ease;
	  
	
  }

  .KeyBenefitsCardTitle{
    margin:0 0 6px 0;
    font-weight:700;
    font-size:clamp(13px, 1.3vw, 15px);
  }

  .KeyBenefitsCardText{
    margin:0;
    opacity:0.9;
    font-size:clamp(12px, 1.2vw, 13.5px);
    line-height:1.35;
  }

  .KeyBenefitsCard:hover,
  .KeyBenefitsCard:focus-visible,
  .KeyBenefitsCard--isActive{
    transform:scale(1.1);
    background:var(--KeyBenefits-blue);
    border-color:rgba(255,255,255,0.35);
    box-shadow:0 18px 40px rgba(0,0,0,0.28);
    z-index:3;
  }

  /* Desktop-ish placement (your requested “random” layout) */
  .KeyBenefitsPos--TopRight{
    top:clamp(12px, 2vw, 18px);
    right:clamp(12px, 2vw, 18px);
    transform-origin:right top;
  }

  .KeyBenefitsPos--BottomLeftHigh{
    left:clamp(12px, 2vw, 18px);
    bottom:clamp(96px, 10vw, 140px);
    transform-origin:left bottom;
  }

  .KeyBenefitsPos--BottomLeftLow{
    left:clamp(12px, 2vw, 18px);
    bottom:clamp(12px, 2vw, 18px);
    transform-origin:left bottom;
	margin-left: 1.5rem;
	margin-bottom: 1.5rem;	
  }

  .KeyBenefitsPos--BottomRight{
    right:clamp(12px, 2vw, 18px);
    bottom:clamp(12px, 2vw, 18px);
    transform-origin:right bottom;
  }

  /* Responsive: on small screens, stack cards in a single column at the bottom (still overlaying) */
  @media (max-width: 640px){
    .KeyBenefitsCardsLayer{
      display:grid;
      grid-template-columns:1fr;
      gap:10px;
      align-content:end;
      padding:12px;
    }
  .KeyBenefitsPos--BottomLeftLow{
		margin-left: 0rem;
		margin-bottom: 0rem;	
	}
    .KeyBenefitsCard{
      position:relative;
      width:100%;
      left:auto; right:auto; top:auto; bottom:auto;
      transform-origin:center center;
    }

    .KeyBenefitsCard:hover,
    .KeyBenefitsCard:focus-visible,
    .KeyBenefitsCard--isActive{
      transform:scale(1.03);
    }
  }

  /* Optional: respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    .KeyBenefitsCard,
    .KeyBenefitsHero::after{
      transition:none !important;
    }
  }
  
  
  .downloadapp-storelink {
	  display:inline;
  }
  
  .mfo-topstrip {
  /* background: #0b1a4a;  deep navy */
  color: #fff;
  font-family: inherit;
}

.mfo-topstrip__inner {
  /*max-width: 1200px;*/
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  width: 100%;
	align-items: flex-start;
}

/* Brand */
.mfo-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.mfo-brand__icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(255,255,255,0.10);
}
.mfo-brand__text {
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Contact list */
.mfo-contact {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.mfo-contact__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  opacity: 0.95;
}
.mfo-contact__item:hover { opacity: 1; text-decoration: underline; }
.mfo-contact__badge {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--line-color-03);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.mfo-contact__text {
  font-size: 14px;
  line-height: 1.2;
}

/* Right side */
.mfo-right {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 0 auto;
}
.mfo-social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.mfo-social__btn {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  display: grid;
  place-items: center;
  color: inherit;
  text-decoration: none;
}
.mfo-social__btn:hover { background: rgba(255,255,255,0.18); }

.mfo-address {
  margin: 0;
  font-style: normal;
  font-size: 13px;
  line-height: 1.25;
  opacity: 0.95;
  text-align: left;
  max-width: 320px;
}

/* Icons */
.mfo-ico {
  width: 16px;
  height: 16px;
  display: block;
}

/* Responsive */
@media (max-width: 980px) {
  .mfo-topstrip__inner {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .mfo-right {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 560px) {
  .mfo-contact { gap: 14px; }
  .mfo-address { max-width: none; }
}

.banner-video {
	border-radius: 25px;
}

.dark-overlay-of-banner-image-2 {
	border-radius: 25px;
}

.pt-3 {
	padding-top: 1rem !important;
}

#contact-status, .status-success, .status-error. {
	font-weight:700;
}

.margin-right-project-paragraph {
	margin-right: 1rem;
}
.offer-cta {
	font-size:1rem;
	/*color:var(--line-color-03);*/
	color:#181d24;	
}

.underline-on-hover {
  border-bottom: 2px solid var(--line-color-02);
}

.btn-prime-blue {
	background-color: var(--line-color-03);
}

.btn-larger {
	font-size: 0.75rem;
}

.mfo-features-bgvid {
  height: 500px;
  position: relative;
  overflow: hidden;
}

.mfo-features-bgvid > video {
  position: absolute;
  inset: 0;           /* <-- key change */
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

.our-numbers-item {
	width:auto;
}

.stickyh2 {
	margin-bottom: 0 !important;
}

.stickyh301 {
	max-width: 15ch;
}
.stickyh302 {
	max-width: 20ch;
}

.stickyh301-p {
	max-width: 30ch;
}
.stickyh302-p {
	max-width: 30ch;
	 padding-bottom: 7rem;
}
.stickydiv-302 {
	margin-top: 3rem !important;
}

.stickybtn {
	margin-top: 55px;
}


@media (max-width: 767px){
  .mfo-stack-1col{
    flex-direction: column !important;
  }
  .mfo-stack-1col > *{
    width: 100% !important;
    flex: 0 0 100% !important;
  }
}

@media screen and (max-width: 479px) {
	
	.image {
		width: 90%;
		padding-top: 5px;
	}
	
	.text-align-center.maxw-introduction-title.heading-xlarge {
	font-size: 30px;
	}
	
	.text-size-caps-tiny.text-align-center.maxw-introduction-subtitle {
	  font-size: 14px;
	}	
	
  .section-awards {
    padding-top: 60px;
    padding-bottom: 10px;
  }
  
  .height-lever {
	  margin-top: 25px;
  }
  .stickyh2 {
		margin-bottom: 15px !important;
	}
  .stickyh301 {
		max-width: 100%;
	}
	.stickyh302 {
		max-width: 100%;
	}

	.stickyh301-p {
		max-width: 100%;
	}
	.stickyh302-p {
		max-width: 100%;
		 padding-bottom: 1rem;
	}
	
	.stickydiv-302 {
		margin-top: 0rem !important;
	}
	.stickybtn {
		margin-top: 25px;
		margin-bottom: 50px;
	}
	
	.flex-social-links {
		display:none;
	}
	
	.mfo-footer {
		padding-bottom: 0px !important;
	}
}

@media screen and (max-width: 991px) {
	html {
		/*margin-top: -10px;*/
		scroll-behavior: auto; 
	}
  
	body {
		margin-top: 0;
		padding-top: 0;
	}
	
	.our-numbers-item {
		width:100%;
		padding-left: 5px;
		border-left: 1px solid #e5e5e5;
	}
	
	.our-numbers-item-heading.stagger-heading {
	  font-size: 20px;
	}
	
}

/* --- Mobile menu  --- */
.mfo-mnav-toggle,
.mfo-mnav-drawer,
.mfo-mnav-backdrop { display: none; }

.form {
	width:auto;
}

@media (max-width: 991px) {

  .mfo-mnav-toggle{
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: transparent;
    border: 0;
    cursor: pointer;


    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10001;
  }
  .mfo-mnav-toggle span{
    display:block;
    height: 2px;
    width: 24px;
    background: #fff;
  }


  .mfo-mnav-backdrop{
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    opacity: 0;
    pointer-events: none;
    z-index: 10000;
    transition: opacity 200ms ease;
  }


  .mfo-mnav-drawer{
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: min(86vw, 360px);
    height: 100vh;
    background: #fff;
    transform: translateX(100%);
    transition: transform 220ms ease;
    z-index: 10002;
    padding: 16px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mfo-mnav-links a{
    display: block;
    padding: 12px 8px;
    text-decoration: none;
  }


  html.mfo-mnav-open .mfo-mnav-backdrop{
    opacity: 1;
    pointer-events: auto;
  }
  html.mfo-mnav-open .mfo-mnav-drawer{
    transform: translateX(0);
  }


  .logo-menu > .menu,
  .logo-menu > menu {
    display: none !important;
  }


  .logo-menu { position: relative; }
  
  .form {
		width:100%;
	}

  
}

.section-header {
    z-index: 0;
    display: flow-root !important;
}