/* landing.css - v2 - GSAP-ready styles */

/* ===================================================
   LANDING PAGE BASE SCOPE
   =================================================== */


:root {
  --header-height: 84px; /* The height of your sticky navigation */
	
	
/* font size—clamped */
	
--portland-heading-landing-s: clamp(1.35rem, 1.75vw, 2rem);
	
--portland-heading-landing-sm: clamp(2rem, 3vw, 3.125rem);

--portland-heading-landing-m: clamp(2rem, 3.75vw, 3.5rem); 
	
--portland-heading-landing-l: clamp(2.125rem, 3.75vw, 4.75rem);
	
--portland-heading-landing-xl: clamp(2.75rem, 2rem + 4vw, 6.75rem);
	

	
/* 	em - farnham  */
	
--portland-em-landing-s: clamp(1.45rem, 1.85vw, 2.125rem);

--portland-em-landing-sm: clamp(2.15rem, 3.15vw, 3.23rem);

--portland-em-landing-m: clamp(2.1rem, 3.9vw, 3.65rem); 
	
}
.portland-heading-landing-s { font-size: var(--portland-heading-landing-s)}
	
.portland-heading-landing-sm { font-size: var(--portland-heading-landing-sm )}

.portland-heading-landing-m { font-size: var(--portland-heading-landing-m )}
	
.portland-heading-landing-l { font-size: var(--portland-heading-landing-l)}
	
/* 	em - farnham  */
	
.portland-em-landing-s { font-size: var(--portland-em-landing-s)}

.portland-em-landing-sm { font-size: var(--portland-em-landing-sm)}

.portland-em-landing-m { font-size: var(--portland-em-landing-m)}
	
.font-general-regular {	font-family: var(--font-family-generalSans-regular);}
.font-general-medium {	font-family: var(--font-family-generalSans-medium);}
.font-general-bold {	font-family: var(--font-family-generalSans-semiBold);}





body.landing-page {
  color: #fff;
  height: 100%;
/*   overflow: hidden; */
}

/* ScrollSmoother Wrapper */
#smooth-wrapper {
   position: relative;
    overflow: visible;
}

#smooth-content {
    overflow: visible;
}


/* --- UTILITY CLASS FOR GSAP ON-LOAD ANIMATIONS --- */
.gsap-hide-on-load {
  visibility: hidden; /* Use visibility instead of opacity to avoid layout shifts */
}
 
/* --- LANDING PAGE: DARK NAVIGATION OVERRIDE (HIGH-SPECIFICITY) --- */

/* 1. Main Header Container: Change background color */
.elementor-3145 .elementor-element.elementor-element-958c7a1:not(.elementor-motion-effects-element-type-background),
.elementor-3145 .elementor-element.elementor-element-958c7a1 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: var(--e-global-color-primary) !important; /* #00205B */
  position: absolute !important; /* Remove sticky */
  top: 0 !important;
}

/* 2. SVG Logo: Change fill color */
.elementor-element-49afc5d #logo svg path {
  fill: var(--e-global-color-8ddde88); /* White */
}

/* 3. Main Navigation Links: Change text color */
/* Using the exact selector you provided */
.elementor-3145 .elementor-element.elementor-element-3113cb7 .elementor-nav-menu--main .elementor-item {
  color: var(--e-global-color-352d429); /* Off-white */
  fill: var(--e-global-color-352d429);  /* For any potential icons in the menu item */
  transition: color 0.3s ease;
}

/* Hover/active states for navigation links */
.elementor-3145 .elementor-element.elementor-element-3113cb7 .elementor-nav-menu--main .elementor-item:hover,
.elementor-3145 .elementor-element.elementor-element-3113cb7 .elementor-nav-menu--main .elementor-item.elementor-item-active {
  color: var(--e-global-color-8ddde88); /* Bright white */
}

/* Underline color for hover/active states */
.elementor-3145 .elementor-element.elementor-element-3113cb7 .elementor-nav-menu--main .elementor-item::before,
.elementor-3145 .elementor-element.elementor-element-3113cb7 .elementor-nav-menu--main .elementor-item::after {
  background-color: var(--e-global-color-secondary); /* Blue */
}

/* 4. "Contact" Button */
.elementor-element-ec5b855 .elementor-button {
  color: var(--e-global-color-primary); /* Dark text */
  background-color: var(--e-global-color-8ddde88); /* White background */
  border: 1px solid transparent;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.elementor-element-ec5b855 .elementor-button:hover {
  color: var(--e-global-color-8ddde88); /* White text */
  background-color: var(--e-global-color-secondary); /* Blue background */
}

/* 5. Search Icon */
.elementor-element-0e65747 .jet-search__submit-icon svg path {
  fill: var(--e-global-color-8ddde88); /* White */
}

/* 6. Mobile Menu (Burger Icon) */
.elementor-menu-toggle {
  color: var(--e-global-color-8ddde88); /* White icon */
}
.elementor-menu-toggle:hover {
  color: var(--e-global-color-secondary); /* Blue on hover */
}

/* 7. Mobile Dropdown Menu Background */
nav.elementor-nav-menu--dropdown {
  background-color: var(--e-global-color-primary);
}


/* -----------------------------------------------
   Hero
-------------------------------------------------- */
.hero {
  padding: 6rem 1rem;
  text-align: center;	
}

.hero-content-section {
	@media (max-width: 767px) and (min-height: 600px) {
		margin-top: -10vh;
	}
}


.hero-title h1 {
  font-weight: 500;
  line-height: 100%;
  letter-spacing: -2.2px;
  font-size: var(--portland-heading-landing-xl);
}

.hero-title em {
  font-family: var(--font-family-farnham);
  font-style: italic;
  font-weight: 400;
/*   font-size: 110px; */
  font-size: 1.1em; 
}

.hero-title span.sans {
  font-family:  var(--font-family-generalSans-regular);
  font-style: normal;
/*   font-size: 100px; */
  font-size: 1em; 

}

.hero-subtitle {
  font-size: 1.25rem;
  font-size: clamp(1.125rem, .75rem + 0.25vw, 1.125rem);
  opacity: 0.8;
	
	b {
    font-family: var(--font-family-generalSans-semiBold);
	}
}

.hero-lead-copy p {
	font-size: var(--portland-heading-landing-s);
	max-width: 60ch; 
	text-wrap: balance;
	font-weight: 500;
    line-height: 1.4;
    color: var(--e-global-color-8ddde88);
}

span.elementor-button-text {
    letter-spacing: 0;
	font-family:  var(--font-family-generalSans-semiBold);
}


.elementor-button:hover .elementor-button-content-wrapper::after {
    content: url(/wp-content/themes/portland/assets/images/buttons/button-chevron-default-blue.svg);
}

.hero-cta {
  margin-top: 2rem;
  display: inline-block;
}

#hero-section,
#quote-pin-section,
.elementor-section { /* A general fallback for other sections */
  position: relative;
  z-index: 2; /* Sits on top of the mask */
  background-color: transparent; /* Make sections see-through */
}

#hero-section {
  position: relative;
/*   height: calc(100dvh - var(--header-height));  */
  min-height: 100dvh; 
  overflow-x: clip;
}

/* 2. The mask container is a child that fills the hero section. */
#hero-video-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; 
}

/* 3. The video widget inside gets the mask applied. */
#hero-video-mask .elementor-widget-video {
  width: 100%;
  height: 100%;
  mask-image: url('https://portlandcom.wpengine.com/wp-content/uploads/2025/06/hero-mask.svg');
  -webkit-mask-image: url('https://portlandcom.wpengine.com/wp-content/uploads/2025/06/hero-mask.svg');
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: 46%;	
	-webkit-mask-size: 46%;
	-webkit-mask-position: center center;
    transform: scale(2);
    right: -38%;
    bottom: -56%;
}


@media (max-width: 991px), (max-width: 1024px) and (min-height: 1000px) {

    #hero-video-mask .elementor-widget-video {
/*         mask-size: 80%;
        -webkit-mask-size: 80%;        */
        -webkit-mask-position: center center;		
	    transform: scale(3);
	}
		
	    #hero-video-mask .elementor-widget-video .elementor-wrapper {
			--video-aspect-ratio: 1;
    }
}

/* @media (max-width: 767px) {
    #hero-video-mask .elementor-widget-video {
	}
} */


/* 4. Ensure the text container is on top */
.hero-text-container { 
  position: relative;
  z-index: 2;
  min-height: 100dvh;
}


/* -----------------------------------------------
   HERO RESPONSIVE
-------------------------------------------------- */

@media (max-width: 768px) {
  .hero-title {
    /* Reduce letter-spacing on mobile for better readability */
    letter-spacing: -0.015em; 
  }

  .hero-subtitle {
    font-size: 1rem; /* 16px */
  }

  .hero-lead-copy {
    font-size: 1.125rem; /* 18px */
  }
	
	#hero-video-mask .elementor-widget-video {
/* 		    height: 30%;
			right: -50vw;
			bottom: -15%; */
		height: 35%;
        right: -50vw;
        bottom: 0%;
	}
	}
}




/* -----------------------------------------------
   QUOTE
-------------------------------------------------- */

/* --- Highlight Quote Reveal --- */

#quote-heading .elementor-heading-title {
    & .line {
        position: relative;
        display: block;
        overflow: hidden;
    }
}

#quote-heading h2 {
/* 	text-wrap: balance; */
	font-size: var(--portland-heading-landing-sm);
}

#quote-heading .elementor-heading-title {
    & .line {
        position: relative;
        display: block;
        overflow: hidden;
        /* Add a little padding to prevent clipping on italic letters */
        padding: 0.1em 0;
    }
}

#quote-animation-wrapperquote-animation-wrapper {
    padding-left: 0;
}

.line-reveal-block {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #750986;
    transform: translateX(-101%);
    will-change: transform;
    /* We will control z-index with GSAP */
}

/* ===================================================
   3D CRYSTAL ANIMATION STYLES
   =================================================== */


/* Determine which version to show */

/* Hide 3D on mobile */
@media (max-width: 991px) {
	#animation-trigger-section {
		display: none;
	}
	#who-are-mobile {
		display: flex;
	}
}
/* Landscape */
@media (max-height: 450px) {
	#animation-trigger-section {
		display: none;
	}
	#who-are-mobile {
		display: flex;
	}
}

/* Show 3D on desktop */
@media (min-width: 992px) {
	#animation-trigger-section {
		display: flex;
	}
	#who-are-mobile {
		display: none;
	}
}


/* 1. The main trigger section creates the scrollable space */
#animation-trigger-section {
    position: relative;
    /* Height is set in Elementor's settings (400vh) */
/* 	    background: linear-gradient(
        to bottom, 
        #00205A, 
        #040a1a  
    ); */
}


.particle-animation-container {
    position: relative;
    width: 100%;
    height: 100%;
	    /* This creates a gradient that is opaque in the middle and transparent at the edges */
    -webkit-mask-image: radial-gradient(circle, black 80%, transparent 100%);
            mask-image: radial-gradient(circle, black 80%, transparent 100%);
}

#animation-content-widget {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden; 
}


/* 3. The canvas is the bottom layer inside the pinned container */
#crystal-canvas-3d {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Layer 1 */
}



/* 4. The story titles are a layer on top of the canvas */
.particle-animation-container .story-title {
    position: absolute;
    top: 10vh;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 900px;
    text-align: center;
    z-index: 2; /* Layer 2 */
    opacity: 0; /* Controlled by GSAP */
	font-family: var(--font-family-generalSans-medium);
	font-size: var(--portland-heading-landing-m);
    letter-spacing: -.5px;
	text-wrap: balance;
	text-shadow: 0px 2px 15px rgba(0, 0, 0, 0.7);

		
	@media (max-width: 768px) {
		text-shadow: none;
	}
	
	@media (max-height: 800px) {
		top: 8vh;
	}
	
	em {
	  font-family: var(--font-family-farnham);
    font-style: italic;
/*     font-size: clamp(2.125rem, 3.65vw, 3.4rem); */
		font-size: var(--portland-em-landing-m);
	}
}


/* 5. The text box container is ALSO a layer on top of the canvas */
.text-box-container {
    position: absolute;
    left: 0;
    top: 10%;
    width: 100%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    z-index: 2;
    padding: 1rem;
    box-sizing: border-box;
}

/* Interactive Text Block Styles */
.particle-animation-container .text-block {
    opacity: 0; /* Let GSAP control initial fade-in */
    background: rgba(0, 32, 90, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    box-shadow: 1px 1px 30px -5px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 1px 1px 30px -5px rgba(0, 0, 0, 0.25);    
	border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 20px;
    padding: 2rem;
    box-sizing: border-box;
    max-width: 380px;
    width: 100%;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: background 0.3s ease;
	will-change: transform, opacity;

	
		
	@media (max-height: 800px) {
    min-height: 350px;
	}
}
.particle-animation-container .text-block:hover {
    background: rgba(0, 32, 90, 0.8);
}
.text-block .icon-wrapper {
    height: 40px;
    margin-bottom: 1.5rem;
    transition: opacity 0.4s ease, transform 0.4s ease, height 0.4s ease;
    opacity: 1;
    transform: translateY(0);
	
	svg {
		overflow: visible;
	}
}
.text-block .text-content h3 {
    margin: 0;
    color: #FFF; /* Ensure heading is white */
	font-family: var(--font-family-generalSans-regular);
	top: 40px;
    position: relative;
	transition: top 0.4s ease;
}

.text-block .description-text {
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 1rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
    max-height: 0;
	font-family: var(--font-family-generalSans-medium);
}
.text-block .tag,
.who-are-mobile .tag {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 99px;
    font-size: 0.9rem;
    text-align: center;
    align-self: stretch;
	text-align: left;
	font-family: var(--font-family-generalSans-semiBold);
	
	@media (max-width: 1023px) {
		margin-top: 2rem;
	}
}
.tag.private-tag { background-color: #750986; }
.tag.public-tag { background-color: #3383AF; }
.tag.third-tag { background-color: #096B60; }

.text-block:hover .icon-wrapper {
/*     opacity: 0; */
    transform: translateY(-10px);
/* 	height: 0; */
}
.text-block:hover .description-text {
    opacity: 1;
    transform: translateY(0);
    max-height: 150px; /* Increased space for text */
}

.text-block:hover h3{
  top: -20px;
}

/* --- Mobile/Responsive 3D Animation Styles --- */


/* On mobile, the main trigger section should have a natural height, not 400vh */
@media (max-width: 991px) {
    #animation-trigger-section {
        height: auto !important; /* Let the content define the height */
        padding: 5rem 1rem; /* Add some space around the content */
    }
	
	.story-text-mobile {
    text-align: left;
    z-index: 2; /* Layer 2 */
	font-family: var(--font-family-generalSans-medium);
	font-size: var(--portland-heading-landing-sm);
    letter-spacing: -.5px;
	text-wrap: balance;
	text-shadow: 0px 2px 15px rgba(0, 0, 0, 0.7);
	padding-right: 16px;
		
		em {
		font-size: var(--portland-em-landing-sm);
		font-family: var(--font-family-farnham);
		}
	}
	
	.who-are-mobile h2.elementor-heading-title {
		line-height: 1.3;
	}
}

/* By default, the mobile container is hidden */
.mobile-text-wrapper {
    display: none;
    flex-direction: column; /* Stack the cards vertically */
    gap: 1.5rem;
    position: relative; /* Let it sit naturally in the flow */
    z-index: 2; /* Keep it above the canvas */
}



/* This is the container for the text boxes on desktop */
.desktop-text-container,
.text-box-container.desktop-text-container
{
    display: flex; 
}

/* Media query to swap visibility */
@media (max-width: 991px) {
    .desktop-text-container {
        display: none; /* Hide desktop layout on mobile */
    }
    .mobile-text-wrapper {
        display: flex; /* Show mobile layout */
    }
    .progress-bar-container {
        display: none; /* Hide progress bar on mobile */
    }
}


/* --- Progress Bar Styles --- */

.progress-bar-container {
    /* Positioning at the bottom of the pinned container */
    position: absolute;
    bottom: 4%;
    margin: auto;
    width: 60%;
    height: 6px;
    border-radius: 18px;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 10;
    pointer-events: none; /* Make sure it's not clickable */
	opacity: 0; 
}

.progress-bar {
    width: 100%;
    height: 100%;
    background-color: #48B8F7;
/* 	filter: drop-shadow(0 0 8px #CAF7BA); */
	border-radius: 18px;


    
    /* GSAP will animate this from 0 to 1 */
    transform-origin: left center;
    transform: scaleX(0); 
}


/* Hide the progress bar on mobile where there is no pinning */
@media (max-width: 991px) {
    .progress-bar-container {
        display: none;
    }
}

.scroll-prompt {
    position: absolute;
    bottom: 60px; /* Position it above the progress bar */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0; /* Start hidden */
    pointer-events: none;
    font-family: var(--font-family-generalSans-medium);
}

.scroll-prompt svg {
    animation: bounce-arrow 2s infinite;
}

@keyframes bounce-arrow {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

/* Hide it on mobile */
@media (max-width: 991px) {
    .scroll-prompt {
        display: none;
    }
}


@media (max-width: 768px) {
.text-box-container {
    flex-direction: column;
}
}




/* -----------------------------------------------
-- Stat Dot Styling --- 
-------------------------------------------------- */

.landing-section-two {	
	@media (max-width: 767px) {
		.e-con-inner {
			padding: 0;
			max-width: 100%;
		}
	}
}


	.stat-section {		
		.stat-text {
			@media (max-width: 767px) {
				margin: 24px auto;
			}
		}
		
		svg {
		overflow: visible;
		}
	}

	.stat-section-2 {
		.stat-svg-wrapper svg {
			max-height: 55vh;
			min-height: 30vh;
			width: auto;
		}
	}

	.stat-dots .dot {
	  fill: #00205B;
	  stroke: #48B8F7;
	  stroke-opacity: 0.5;
	  transition: fill 0.3s ease, stroke-opacity 0.3s ease;
	}

	.stat-dots .dot.is-active {
	  fill: #CAF7BA;
	  stroke-opacity: 0;
	  filter: drop-shadow(0 0 8px #CAF7BA);

	}

.stats-grid .elementor-widget-container {
	border-top: 3px solid var(--e-global-color-secondary);
	padding-top: 20px;
	margin-top: 20px;
	
	h2 	{
		font-size:  var(--portland-heading-landing-sm);
		font-family:  var(--font-family-generalSans-semiBold);
		margin-bottom: 16px;
		font-style: normal;
	}
	
	
	p {
		text-wrap: balance;
	}
}

.stat-svg-wrapper {
  width: 100%;
  /* 
    Use the aspect-ratio property.
    The SVG's viewBox is "0 0 430 365".
    The aspect ratio is width / height = 430 / 365.
  */
  aspect-ratio: 430 / 365;
}

/* Make sure the SVG fills the wrapper */
.stat-svg-wrapper svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* -----------------------------------------------
   Stat Blocks - 
-------------------------------------------------- */


.stat-section h2 {
	font-size: var(--portland-em-landing-sm);
	text-wrap: balance;
	font-style: italic;
}


/* -----------------------------------------------
   CTA - 
-------------------------------------------------- */


.cta-container {
	max-width: 1000px;
	margin: auto;
}

.cta-heading h2 {
/* 	font-size: var(--portland-heading-landing-m); */
	font-size:  var(--portland-heading-landing-m);
	font-family:  var(--font-family-generalSans-semiBold);
	margin-bottom: 16px;
}

.cta-text p {
	font-size:  var(--portland-heading-landing-s);
	line-height: 1.4;
	font-family:  var(--font-family-generalSans-medium);
	margin-bottom: 36px;
	color: #E0E9FF;
	text-wrap: balance;
}



/* -----------------------------------------------
   Methodology 
-------------------------------------------------- */

.methodology-section {
	h3 {
		font-size: var(--portland-em-landing-s);
		font-family: var(--font-family-farnham);
		font-style: italic;
		color: var(--e-global-color-secondary);
	}
}


/* -----------------------------------------------
   Team - 
-------------------------------------------------- */

.experts-section {
	.experts-header {
	h2 {
	font-size:  clamp(2rem, 3.75vw, 4.5rem);
	font-family:  var(--font-family-generalSans-medium);
		
		em {
			    font-family: var(--font-family-farnham);
				font-style: italic;
				font-size:  clamp(2.15rem, 3.8vw, 4.65rem);
		}
	}
	
	p {
	font-size:  clamp(1.15rem, 1.35vw, 2.35rem);
	line-height: 1.4;
	font-family:  var(--font-family-generalSans-medium);
	margin-bottom: 36px;
	color: #E0E9FF;
}
}
	
	.team-scroll-container {
		h3 {
			font-size: 32px;
			font-family:  var(--font-family-generalSans-semiBold);
			margin-bottom: 8px;
		}
		h4 {
				font-family: var(--font-family-farnham);
				font-style: italic;
				font-size:  24px;
				margin-bottom: 20px;
		}
		p {
			font-size: 18px;
		}
		img {
			border-radius: 8px;
		}
	}	
}

/* --- Team Carousel - Corrected Flexbox Control --- */

/* 1. The main scroll container */
#team-scroll-container {
  display: flex;       /* Ensure it's a flex container */
  overflow-x: auto;    /* Enable horizontal scrolling */
  padding-bottom: 20px;/* Space for the scrollbar */
  
  /* Add a horizontal gap between the cards */
  gap: 24px; 
}

/* 2. The individual cards within the container */
#team-scroll-container > .e-child {
  flex-shrink: 0; /* Prevents cards from shrinking to fit */
  flex-grow: 0;   /* Prevents cards from growing to fill space */
  flex-basis: 32%; 
}

.elementor-container[tabindex="0"]:focus {
  outline: 2px solid #fff; /* A clear white outline */
  outline-offset: 4px; /* A little space from the card edge */
  border-radius: 12px; /* Match your card's border-radius */
}

.prev-next-buttons {
	.elementor-button .elementor-button-content-wrapper::after {
		content: none;
	}
		
	.elementor-button {
	padding: 20px;
	}
}

.prev-next-buttons {
	@media (max-width: 767px) {
		padding-left: 5%;
	}
}

.prev-next-buttons .elementor-button::hover .elementor-button-content-wrapper::after {
		content: none !important;
	}


/* -----------------------------------------------
   RESPONSIVE
-------------------------------------------------- */

@media (max-width: 768px) {

	
	  #team-scroll-container {
    flex-direction: row !important; 
    
    /* Ensure it doesn't wrap items onto a new line */
    flex-wrap: nowrap !important;
  }
  
  #team-scroll-container > .e-child {
    /* Set the width for mobile cards */
    /* 60% is a good value to show one card and a "peek" of the next one */
    flex-basis: 60%;
	      display: flex;
    flex-direction: column;
	justify-content: flex-start;
    align-items: flex-start;
  }	

}


/* 3. (Optional) Scrollbar Styling */
#team-scroll-container::-webkit-scrollbar {
  height: 4px;
}
#team-scroll-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}
#team-scroll-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 2px;
}

/* Modal */

/* --- Video Modal Animation (Corrected Stacking) --- */

/* 
  The animated overlay container. 
  This is the dark background. It needs to be BEHIND the popup.
  Let's use a z-index of 9998 (one less than the popup).
*/
/* #modal-revealer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998; 
}

#modal-revealer svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#modal-revealer circle {
  fill: #0d0d1a;
}

.elementor-popup-modal {
  pointer-events: none;
}

.elementor-popup-modal .dialog-widget-content {
  pointer-events: none;
} */

/* 
  The Elementor popup itself.
  Make its background transparent so our animated background shows through.
  Its default z-index is around 9999.
*/
/* .elementor-popup-modal {
  background-color: transparent !important;
} */

/* #elementor-popup-modal-18512 .dialog-close-button {
	display: none !important;
} */

/* 
  The video widget and close button.
  These are children of the popup, so they are already on top of the revealer.
  We just need to make sure they are visible and animate them in.
*/
/* .elementor-popup-modal .elementor-widget-video,
#video-modal-close {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.95);
}

#video-modal-close {
  z-index: 10000; 
  cursor: pointer;
}
 */


/* footer */

.elementor-location-footer {
/* 	background: var(--e-global-color-8ddde88); */
}


.landing-page .elementor-4118 .elementor-element.elementor-element-93e6c0b .elementor-nav-menu--main .elementor-item,
.landing-page .elementor-4118 .elementor-element.elementor-element-5b1a9c0 .elementor-heading-title,
.elementor-4118 .elementor-element.elementor-element-ee45c80 .elementor-heading-title,
.landing-page .elementor-4118 .elementor-element.elementor-element-7a72383 .elementor-nav-menu--main .elementor-item {
	color: var(--e-global-color-8ddde88);
}


.landing-page .elementor-4118 .elementor-element.elementor-element-fdb3c02 img,
.landing-page .elementor-4118 .elementor-element.elementor-element-eba3b62 img,
.elementor-4118 .elementor-element.elementor-element-ce93127 img,
.landing-page .elementor-4118 .elementor-element.elementor-element-a4c86f6 img {
	    filter: invert(100%) brightness(1.5);
}

.landing-page .elementor-4118 .elementor-element.elementor-element-112ba96::before {
	opacity: .15;
}
}