:root {
--row-width: 1800px;
--row-width-small: 1200px;
--row-width-xs: 1000px;
--row-width-xxs: 850px;
--row-width-catalog: 2800px;
--row-padding-vertical: 80px;
--row-padding-vertical-small: 40px;
--row-padding-horizontal: 20px;
--first-row-padding-top: 80px;
--padding-under-scrolling-text: 70px;
--stylized-font: 'Fugaz One','Roboto',sans-serif;
--simple-font: 'Outfit','Roboto',sans-serif;
--simple-font-letter-spacing: 0em;
--large-heading: 48px;
--animated-heading: 48px;
--static-heading: 36px;
--medium-heading: 36px;
--small-heading: 24px;
--value-cards-heading: 36px;
--cards-row-heading: 48px;
--card-subheading: 26px;
--card-description-margin: 10px 0px 30px;
--description: 18px;
--caption: 16px;
--text-shadow: 2px 2px 2px #000;
--static-text-height: 1.5em;
--animated-text-height: 1.5em;
--static-text-width: 58%;
--stacked-text-logo-height: calc((var(--medium-heading) * 1.5) + var(--scrolling-image-container-height));
--stacked-text-spacing: 10px;
--animated-text-width: 42%;
--full-width: calc(100% - (var(--row-padding-horizontal) * 2));
--scrolling-image-container-height: calc(var(--scrolling-image-height) * 1.4);
--scrolling-image-height: 70px;
--indented-padding: 150px;
--video-bg-height: calc(100vw * 0.5625);
--video-bg-padding: 56.25% 0 0 0;
--iframe-top-position: 0;
--video-scale: 1;
--content-over-video-position: calc((var(--video-bg-height) / 2) - var(--animated-text-height));
--dark-blue: #062331;
--bright-blue: #1199d3;
--green: #70c16e;
--lightest-blue: #dde8ea;
--light-blue: #c9d3d5;
--dark-gray: #3a484b;
--collections-gap: 20px;
--collection-bottom-padding: 15px;
--collection-image-bottom-margin: 15px;
--collections-row-top-margin: 20px;
--heading-and-button-bottom-margin: 10px;
--text-gap: 10px;
--patch-width: 75px;
--scroll-arrow-size: 40px;
--scrollable-collections-count: 6; /* Number of scrollable collections to show (rounded up to whole number) */
--scrollable-collection-width: calc((var(--row-width) - (var(--collections-gap) * (var(--scrollable-collections-count) - 1))) / (var(--scrollable-collections-count) - 0.5)); /* Width of each scrollable collection based on showing 5.5 collections */
--scroll-length: calc((var(--collections-gap) * 2) + (var(--scrollable-collection-width) * 2)); /* Scroll by length (scrolls 2 collections) */
--text-box-padding: 30px;
--image-border-radius: 20px;
--image-border: 15px solid var(--bright-blue);
--buttons-row-under-animation-top-padding: 20px;
--tab-button-color: #fff;
--tab-button-active-color: var(--dark-blue);
--tab-button-border: #adadad;
--tab-link-color: var(--bright-blue);
--tab-link-font-size: 16px;
--tab-link-padding: 20px 20px;
--primary-button-color: var(--dark-blue);
--primary-button-hover-color: var(--dark-gray);
--secondary-button-color: #fff;
--secondary-button-hover-color: var(--dark-blue);
--secondary-button-border: var(--dark-blue);
--header-button-color: var(--dark-blue);
--header-button-hover-color: var(--dark-gray);
--header-button-border: var(--dark-blue);
--header-button-text-color: #fff;
--header-button-hover-text-color: #fff;
--header-bottom-border-color: #c5c5c5;
--menu-link-color: var(--dark-blue);
--hamburger-icon-color: #000;
--button-border-radius: 0px;
--button-padding: 15px 30px;
--tab-button-padding: 15px 30px;
--button-width: 250px;
--collage-center-padding: 20px;
--heading-under-patch-size: 3vw;
--collage-description-size: 1.5vw;
--top-footer-heading: 24px;
--footer-heading: 18px;
--icon-width: 125px;
--hero-image-row-gap: 80px;
--hero-image-width: 60%;
--card-padding: 15px 15px 30px;
--team-cards-gap: 20px;
--headshot-width: 250px;
--values-gap: 25px;
--value-card-padding: 40px 40px 50px;
--location-row-gap: 80px;
--location-row-padding: 60px;
--counter-font-size: 60px;
--counter-title-padding: 12px 20px 20px;
--counter-title-font-size: 18px;
--hero-heading-bottom-padding: 10px;
--values-row-heading-bottom-margin: 50px;
--icons-gap: 50px;
}


@media (min-width: 2220px) {
:root {
--video-bg-height: 1000px;
--heading-under-patch-size: 66px;
--collage-description-size: 36px;
}
}

@media (min-width: 1800px) {
:root {
--iframe-top-position: -20%; /* Move the iframe up so the video content is more vertically centered */
--full-width: 1800px;
--static-text-width: 53%;
--animated-text-width: 47%;
--simple-font-letter-spacing: 0.02em;
--card-subheading: 36px;
}
}

@media (max-width: 1839px) {
:root {
--scrollable-collection-width: calc((100vw - (var(--row-padding-horizontal) * 2) - (var(--collections-gap) * (var(--scrollable-collections-count) - 1))) / (var(--scrollable-collections-count) - 0.5));
}
}

/* On large screens, apply a fixed height for the video background */
@media (min-width: 1500px) and (max-width: 2219px) {
:root {
--video-bg-height: 800px;
}
}

@media (max-width: 1499px) {
:root {
--video-bg-padding: 0 0 0 0; /* Remove padding when video background width to height ratio = 16:9 */
--scrollable-collections-count: 5;
--hero-image-row-gap: 40px;
--value-cards-heading: 30px;
--value-card-padding: 30px 30px 40px;
--values-gap: 20px;
}
}

@media (max-width: 1200px) {
:root {
--large-heading: 40px;
--medium-heading: 32px;
--static-heading: 32px;
--cards-row-heading: 40px;
--scrollable-collections-count: 4;
--patch-width: 50px;
--padding-under-scrolling-text: 60px;
--card-padding: 0px 0px 30px;
--image-border: 10px solid var(--bright-blue);
--counter-font-size: 48px;
--icons-gap: 20px;
}
}

/* Tablet */
@media (max-width: 992px) {
:root {
--large-heading: 36px;
--animated-heading: 34px;
--medium-heading: 28px;
--static-heading: 28px;
--cards-row-heading: 36px;
--indented-padding: 15%;
--scrollable-collection-width: calc((100vw - var(--row-padding-horizontal) - (var(--collections-gap) * (var(--scrollable-collections-count) - 1))) / (var(--scrollable-collections-count) - 0.5));
--location-row-padding: 30px;
--location-row-gap: 30px;
}
}

/* Mobile */
@media (max-width: 768px) {
:root {
--row-padding-horizontal: 15px;
--first-row-padding-top: 40px;
--large-heading: clamp(30px, 6vw, 36px);
--animated-heading: clamp(14px, 6vw, 30px);
--medium-heading: clamp(24px, 4vw, 24px);
--static-heading: clamp(16px, 5vw, 24px);
--cards-row-heading: clamp(24px, 6vw, 30px);
--small-heading: clamp(18px, 3vw, 24px);
--description: clamp(14px, 15px, 16px);
--caption: 13px;
--static-text-width: calc(100% - (var(--row-padding-horizontal) * 2));
--animated-text-width: calc(100% - (var(--row-padding-horizontal) * 2));
--video-bg-height: calc(100vw);
--video-scale: 1.78; /* Apply a scale of 16/9 to make the iframe fill the video background height */
--content-over-video-position: calc((var(--video-bg-height) / 2) - (var(--animated-text-height) * 2));
--collections-gap: 10px;
--scrollable-collections-count: 2;
--scroll-length: calc(var(--scrollable-collection-width) + var(--collections-gap));  /* Scrolls 1 collection */
--collection-bottom-padding: 5px;
--indented-padding: 0px;
--scrolling-image-height: 50px;
--row-padding-vertical-small: 20px;
--button-padding: 15px 20px;
--tab-button-padding: 10px 20px;
--tab-link-font-size: clamp(11px, 12px, 16px);
--tab-link-padding: 20px 0px;
--top-footer-heading: 18px;
--padding-under-scrolling-text: 40px;
--icon-width: 100px;
--card-padding: 0px 15px 0px;
--card-description-margin: 10px 0px 15px;
--heading-and-button-bottom-margin: 0px;
--buttons-row-under-animation-top-padding: 10px;
--image-border-radius: 10px;
--value-card-padding: 30px 30px 40px;
--counter-font-size: 40px;
--counter-title-padding: 12px 30px 20px;
--counter-title-font-size: 16px;
--hero-heading-bottom-padding: 0px;
--values-row-heading-bottom-margin: 25px;
--value-cards-heading: clamp(24px, 4vw, 24px);
}
}

@media (max-width: 350px) {
:root {
--tab-link-font-size: 10px;
--tab-link-padding: 10px 0px;
}
}

/* Background styling for main header */
.fl-node-wpvuyqbn6i5h > .fl-row-content-wrap {
background-color: #fff;
box-shadow: 0px 0px 0px 0px #333;
border-bottom: 1px solid var(--header-bottom-border-color);
}

/* Adjust styling of sticky header */
.fl-theme-builder-header-shrink-row-top.fl-row-content-wrap {
padding-top: 10px !important;
padding-bottom: 10px !important;
box-shadow: 0px 0px 20px 0px #000;
}

/* Make the top header bar hidden on sticky header */
.fl-theme-builder-header-sticky > div:nth-child(1) .fl-theme-builder-header-shrink-row-top {
display: none !important;
}

/* Links in top header bar */
.top-header-link {
text-align: right;
font-size: 15px;
color: #fff;
font-weight: 500;
text-decoration: none;
}

.top-header-link:hover {
color: #fff;
text-decoration: underline;
}

/* Set spacing of menu links in header */
.menu > li {
position: relative;
text-decoration: none;
margin-left: 20px;
margin-right: 20px;
}

/* Set color of menu links in header */
.menu > li > a {
color: var(--menu-link-color);
}

/* Hover underline animation for menu links in header */
.menu a::after {
content: '';
position: absolute;
width: 100%;
height: 3px;
bottom: -5px;
left: 0;
background-color: var(--green);
transform-origin: bottom left;
transition: transform 0.3s ease-out;
transform: scaleX(0);
}

/* Hover underline animation for menu links in header */
@media (min-width: 993px) {
.menu > li:hover a::after {
transform: scaleX(1);
}
}

/* Color and thickness of hamburger menu icon on mobile */
.fl-menu .fl-menu-mobile-toggle rect,
.fl-menu .fl-menu-mobile-toggle.hamburger .hamburger-menu rect {
fill: var(--hamburger-icon-color) !important;
height: 40px !important;
}

/* Main header button */
.header-button > a,
.header-button > a:visited {
background: var(--header-button-color) !important;
border: 1px solid var(--header-button-border) !important;
border-radius: var(--button-border-radius) !important;
}

.header-button > a > span {
color: var(--header-button-text-color) !important;
}

/* Main header button - hover styling */
.header-button > a:hover {
background: var(--header-button-hover-color) !important;
}

.header-button > a:hover > span {
color: var(--header-button-hover-text-color) !important;
}

/* Static buttons */
.static-button, .static-button:visited {
border-radius: var(--button-border-radius);
font-size: 13px !important;
font-weight: 400;
text-align: center;
text-transform: uppercase;
text-decoration: none;
display: block;
padding: 15px 15px;
max-width: var(--button-width);
width: 100%;
margin: 0px auto;
}

.static-button:hover {
background: var(--primary-button-hover-color);
border: 1px solid var(--primary-button-hover-color);
color: #fff;
}

/* Primary buttons */
.primary-button, primary-button:visited {
background: var(--primary-button-color);
border: 1px solid var(--primary-button-color);
color: #fff;
}

.primary-button:hover {
background: var(--primary-button-hover-color);
border: 1px solid var(--primary-button-hover-color);
color: #fff;
}

/* Secondary buttons */
.secondary-button, secondary-button:visited {
background: var(--secondary-button-color);
border: 1px solid var(--secondary-button-border);
color: #000;
}

.secondary-button:hover {
background: var(--secondary-button-hover-color);
border: 1px solid var(--secondary-button-hover-color);
color: #fff;
}
 
.buttons-row {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: var(--collections-gap);
}

.below-animation {
padding-top: var(--buttons-row-under-animation-top-padding);
}

.buttons-row .static-button {
display: inline-block;
margin: 0px 0px;
}

.left-justified {
justify-content: flex-start;
}

.left-justified .static-button {
margin: 0px 0px;
}

.hero-image-row .static-button,
.location-row .static-button {
margin: 0px 0px;
}

.heading-and-button .static-button {
float: right;
}

/* Tab buttons */
.tab-button,
.tab-button:visited {
background: var(--tab-button-color);
border: 1px solid var(--tab-button-border);
color: #000;
border-radius: var(--button-border-radius);
font-size: 13px !important;
font-weight: 400;
text-align: center;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
padding: var(--tab-button-padding);
width: auto;
box-shadow: none !important;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}

/* Do not shrink tab buttons on smaller screens */
@media (max-width: 1350px) {
.tab-button {
flex-shrink: 0;
}
}

.tab-button:hover {
background: #fff;
border: 1px solid var(--tab-button-active-color) !important;
color: #000;
}

.tab-button:focus,
.tab-button:active {
background: var(--tab-button-active-color);
border: 1px solid var(--tab-button-active-color);
color: #fff;
}

/* Styling for tab button when clicked */
.clicked-state {
background: var(--tab-button-active-color);
border: 1px solid var(--tab-button-active-color);
color: #fff;
}

.clicked-state:hover {
background: var(--tab-button-active-color);
border: 1px solid var(--tab-button-active-color);
color: #fff;
}

@media (max-width: 992px) {
.columns-on-mobile {
flex-direction: column;
}
}

@media (max-width: 768px) {
.full-width-on-mobile {
width: calc(100vw - 80px) !important;
padding: 17px 15px !important;
}
}

/* Enable horizontal scrolling of buttons */
.horizontal-scrolling-buttons {
overflow-x: auto;
padding-right: var(--row-padding-horizontal);
margin-right: calc(0px - var(--row-padding-horizontal));
}

/* Remove left margin from buttons row on smaller screens so buttons go all the way to the left of the screen when scrolling right */
@media (max-width: 992px) {
.horizontal-scrolling-buttons {
margin-left: calc(0px - var(--row-padding-horizontal));
}
}

/* Add left margin to first button on smaller screens */
@media (max-width: 992px) {
.horizontal-scrolling-buttons > button:nth-child(1) {
margin-left: var(--row-padding-horizontal);
}
}

/* Do not shrink buttons on mobile */
@media (max-width: 768px) {
.no-mobile-shrinking {
flex-shrink: 0;
width: auto;
padding: var(--button-padding);
}
}

/* Enable horizontal scrolling of buttons on smaller screens
@media (max-width: 1350px) {
.horizontal-scrolling {
overflow-x: auto;
gap: 10px;
margin-bottom: 20px;
justify-content: flex-start !important;
}
}
*/

/* Override WP Forms styling */
.wpforms-submit {
background: var(--primary-button-color) !important;
border: 1px solid var(--primary-button-color) !important;
border-radius: var(--button-border-radius) !important;
color: #fff !important;
font-size: 13px !important;
font-weight: 400 !important;
text-align: center !important;
text-transform: uppercase !important;
text-decoration: none !important;
display: block !important;
padding: 15px 15px !important;
max-width: var(--button-width) !important;
width: 100% !important;
}

.wpforms-submit:hover {
background: var(--primary-button-hover-color) !important;
border: 1px solid var(--primary-button-hover-color) !important;
color: #fff !important;
}

.wpforms-submit-container {
padding-top: 30px !important;
}

.wpforms-field-label {
  hyphens: none !important;
}

@media (max-width: 768px) {
  .wpforms-one-half {
    width: 100% !important;
	padding: 0px 0px 20px !important;
	margin-left: 0px !important;
  }
}

.form-container {
  flex: 1 1 60%;
  background-color: #fff;
  padding: 40px 40px 45px;
  border: 1px solid #fff;
  border-radius: 25px;
  box-shadow: 10px 10px 20px #000;
}

@media (max-width: 768px) {
  .form-container {
    padding: 30px 30px 35px;
  }
}

.form-with-text-row {
  gap: 100px;
}

@media (max-width: 768px) {
  .form-with-text-row {
    gap: 100px;
  }
}

/* Start styling of video background rows */
.video-bg-container-height {
overflow: hidden;
height: var(--video-bg-height);
/* Set a fallback background image for when video can't load */
background-image: url(https://luckystitch.com/wp-content/uploads/2025/09/Video_Background.jpg);
background-size: cover;
background-position: center;
}

.video-bg-container {
padding: var(--video-bg-padding);
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: var(--video-bg-height);
}

.video-bg-container iframe {
position: absolute;
top: var(--iframe-top-position);
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transform: scale(var(--video-scale));
}

/* Add dark overlay to video background */
.dark-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}

#content-over-video {
position: absolute;
top: var(--content-over-video-position);
z-index: 10;
font-size: var(--large-heading);
}

/* Start styling for animated text */
.animation-block {
  margin: 0px;
  text-align: center;
  padding: 20px 0px;
  overflow: hidden;
}

.full-screen-width {
width: 100vw;
}

.stylized-font {
font-family: var(--stylized-font);
font-weight: 400 !important;
}

.simple-font {
font-family: var(--simple-font);
letter-spacing: var(--simple-font-letter-spacing);
}

.large-heading {
font-size: var(--large-heading);
font-weight: 600;
}

.animated-heading {
font-size: var(--animated-heading);
font-weight: 600;
}

.static-heading {
font-size: var(--static-heading);
font-weight: 600;
}

.medium-heading {
font-size: var(--medium-heading);
font-weight: 600;
}

.small-heading {
font-size: var(--small-heading);
font-weight: 400;
}

.bold {
font-weight: 600;
}

.tight-line-height {
line-height: 1em;
}

.dark-font {
color: var(--dark-blue);
}

.light-font {
color: #fff;
}

.green-font {
color: var(--green) !important;
}

.blue-font {
color: var(--bright-blue);
}

.tab-description {
font-size: var(--description);
font-weight: 400;
text-align: center;
margin: 10px 0px 30px;
}

.hero-row-paragraph {
font-size: var(--description);
font-weight: 400;
text-align: center;
margin: 10px 0px 30px;
}

.hero-row-paragraph-last {
font-size: var(--description);
font-weight: 400;
text-align: center;
margin: 10px 0px 0px;
}

.caption {
font-size: var(--caption);
font-weight: 400;
font-style: italic;
text-align: center;
margin: 10px 20px 0px;
color: #757575;
font-family: 'Roboto', sans-serif;
}

.card-description {
font-size: var(--description);
font-weight: 400;
text-align: center;
margin: var(--card-description-margin);
}

/* Animated underline effect for text */
.animated-underline-text .underline-animation {
position: relative;
}

/* Animated underline effect for text */
.animated-underline-text .underline-animation::after {
content: '';
position: absolute;
width: 100%;
height: 3px;
bottom: -6px;
left: 0;
background-color: var(--bright-blue);
transform-origin: bottom left;
}

/* Animated underline hover effect for links */
.animated-underline-text .hover-underline-animation {
position: relative;
}

/* Animated underline hover effect for links */
@media only screen and (min-width: 993px) {
.animated-underline-text .hover-underline-animation::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
bottom: -5px;
left: 0;
background-color: #fff;
transform-origin: bottom left;
transition: transform 0.3s ease-out;
transform: scaleX(0);
}
}

/* Animated underline hover effect for links */
@media only screen and (min-width: 993px) {
.animated-underline-text:hover .hover-underline-animation::after {
transform: scaleX(1);
}
}

.half-width {
width: 50%;
}

@media (min-width: 769px) {
.three-quarters-width {
width: 75%;
margin: 0px auto;
}
}

/* Block for side-by-side static text and animated text */
.text-blocks {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0px;
  width: 100%;
}

@media only screen and (max-width: 768px) {
.text-blocks {
flex-direction: column;
}
}

@media only screen and (max-width: 768px) {
.static-text {
height: auto !important;
margin-bottom: 10px;
line-height: 1.25em;
}
}

.text-shadow {
text-shadow: var(--text-shadow);
}

.image-drop-shadow {
filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 1));
}

.with-animation {
height: var(--animated-text-height);
}

.stacked {
flex-direction: column;
align-items: flex-start;
}

.stacked .static-text {
width: 100%;
height: auto;
margin-bottom: var(--stacked-text-spacing);
}

.stacked .animated-text {
--animated-text-width: calc(100% - (var(--row-padding-horizontal) * 2));
max-width: var(--row-width);
top: 100%;
}

.animated-with-logo {
height: var(--stacked-text-logo-height);
}

.static-text {
  height: var(--static-text-height);
  vertical-align: 0px;
  width: var(--static-text-width);
}

/* Scrolling or bungee animated text */
.animated-text {
  width: var(--animated-text-width);
  text-align: left;
  height: var(--animated-text-height);
  vertical-align: 0px;
  position: absolute;
  overflow: hidden;
}

@media only screen and (max-width: 768px) {
.animated-text {
top: 100%;
}
}

.scrolling-image-container {
width: 1000px;
text-align: left;
height: var(--scrolling-image-container-height);
vertical-align: 0px;
position: absolute;
overflow: hidden;
}

.scrolling-image {
height: var(--scrolling-image-height);
width: auto;
margin-top: 10px;
}

.scrolling-image-container > div {
font-size: var(--animated-font-size); 
opacity: 0;
margin-left: 0px;
position: absolute;
}

.scrolling-image-container > div:nth-child(1) {
  animation: scroll 12s linear infinite 0s;
}
.scrolling-image-container > div:nth-child(2) {
  animation: scroll 12s linear infinite 3s;
}
.scrolling-image-container > div:nth-child(3) {
  animation: scroll 12s linear infinite 6s;
}
.scrolling-image-container > div:nth-child(4) {
  animation: scroll 12s linear infinite 9s;
}

@media only screen and (max-width: 768px) {
.scrolling-image-container > div:nth-child(1) {
  animation: scroll-stacked 12s linear infinite 0s;
}
}
@media only screen and (max-width: 768px) {
.scrolling-image-container > div:nth-child(2) {
  animation: scroll-stacked 12s linear infinite 3s;
}
}
@media only screen and (max-width: 768px) {
.scrolling-image-container > div:nth-child(3) {
  animation: scroll-stacked 12s linear infinite 6s;
}
}
@media only screen and (max-width: 768px) {
.scrolling-image-container > div:nth-child(4) {
  animation: scroll-stacked 12s linear infinite 9s;
}
}

.animated-text > div {
  font-size: var(--animated-font-size); 
  opacity: 0;
  margin-left: 0px;
  position: absolute;
  font-weight: 400;   
  white-space: nowrap;
}

.text-blocks .animated-text > div {
  padding-left: 10px;
}

.bungee > div:nth-child(1) {
  animation: bungee 8s linear infinite 0s;
}
.bungee > div:nth-child(2) {
  animation: bungee 8s linear infinite 2s;
}
.bungee > div:nth-child(3) {
  animation: bungee 8s linear infinite 4s;
}
.bungee > div:nth-child(4) {
  animation: bungee 8s linear infinite 6s;
}


@media only screen and (max-width: 768px) {
.bungee > div:nth-child(1) {
  animation: bungee-stacked 8s linear infinite 0s;
}
}
@media only screen and (max-width: 768px) {
.bungee > div:nth-child(2) {
  animation: bungee-stacked 8s linear infinite 2s;
}
}
@media only screen and (max-width: 768px) {
.bungee > div:nth-child(3) {
  animation: bungee-stacked 8s linear infinite 4s;
}
}
@media only screen and (max-width: 768px) {
.bungee > div:nth-child(4) {
  animation: bungee-stacked 8s linear infinite 6s;
}
}

/* Scroll text with bungee effect */
@keyframes bungee {
  0% {
    font-size: var(--animated-font-size);
    opacity:1;
    transform: translateY(120%);
  }
  10%, 18% {
    font-size: var(--animated-font-size);
    opacity:1;
    transform: translateY(0%);
  }
  18% {
    font-size: var(--animated-font-size);
    opacity:1;
  }
  20%, 23% {
    font-size: var(--animated-font-size);
    opacity:1;
    transform: translateY(10%);
  }
  27% {
    font-size: var(--animated-font-size);
    opacity:1;
    transform: translateY(-120%);
  }
  100% {
    font-size: var(--animated-font-size);
    opacity:1;
    transform: translateY(-120%);
  }
}

/* Scroll text with bungee effect - stacked text */
@keyframes bungee-stacked {
  0% {
    font-size: var(--animated-font-size);
    opacity:1;
    transform: translate(-50%, 120%);
	left: 50%;
  }
  10%, 18% {
    font-size: var(--animated-font-size);
    opacity:1;
    transform: translate(-50%, 0%);
	left: 50%;
  }
  18% {
    font-size: var(--animated-font-size);
    opacity:1;
    transform: translate(-50%, 0%);
	left: 50%;
  }
  20%, 23% {
    font-size: var(--animated-font-size);
    opacity:1;
    transform: translate(-50%, 10%);
	left: 50%;
  }
  27% {
    font-size: var(--animated-font-size);
    opacity:1;
    transform: translate(-50%, -120%);
	left: 50%;
  }
  100% {
    font-size: var(--animated-font-size);
    opacity:1;
    transform: translate(-50%, -120%);
	left: 50%;
  }
}

/* Change styling of navigation arrows on GS sliders */
.row-dark .gs_logo_area .swiper-button-next, .row-dark .gs_logo_area .swiper-button-prev,
.row-gray .gs_logo_area .swiper-button-next, .row-gray .gs_logo_area .swiper-button-prev,
.row-green .gs_logo_area .swiper-button-next, .row-green .gs_logo_area .swiper-button-prev,
.row-blue .gs_logo_area .swiper-button-next, .row-blue .gs_logo_area .swiper-button-prev {
background-color: #fff;
opacity: 1;
}

.row-dark .gs_logo_area .swiper-button-next:hover, .row-dark .gs_logo_area .swiper-button-prev:hover,
.row-gray .gs_logo_area .swiper-button-next:hover, .row-gray .gs_logo_area .swiper-button-prev:hover,
.row-green .gs_logo_area .swiper-button-next:hover, .row-green .gs_logo_area .swiper-button-prev:hover,
.row-blue .gs_logo_area .swiper-button-next:hover, .row-blue .gs_logo_area .swiper-button-prev:hover {
background-color: #cdcdcd;
}

.row-light .gs_logo_area .swiper-button-next, .row-light .gs_logo_area .swiper-button-prev {
background-color: #dedede;
opacity: 1;
}

.row-light .gs_logo_area .swiper-button-next:hover, .row-light .gs_logo_area .swiper-button-prev:hover {
background-color: #cdcdcd;
opacity: 1;
}

/* Row styling */
.row-light,
.row-green,
.row-blue,
.row-dark,
.row-gray {
margin: 0px;
}

.row-dark {
background-color: var(--dark-blue);
}

.row-green {
background-color: var(--green);
}

.row-blue {
background-color: var(--bright-blue);
}

.row-gray {
background-color: var(--dark-gray);
}

.standard-padding {
padding: var(--row-padding-vertical) var(--row-padding-horizontal);
}

.first {
padding-top: var(--first-row-padding-top);
}

.padding-under-scrolling-text {
padding: var(--padding-under-scrolling-text) var(--row-padding-horizontal) var(--row-padding-vertical);
}

.no-vertical-padding {
padding-top: 0px;
padding-bottom: 0px;
}

.no-top-padding {
padding-top: 0px;
}

.half-top-padding {
padding-top: var(--row-padding-vertical-small);
}

.no-bottom-padding {
padding-bottom: 0px;
}

@media (min-width: 1801px) {
.no-right-padding {
padding: 0px var(--row-padding-horizontal) !important;
}
}

@media (max-width: 1800px) {
.no-right-padding {
padding: 0px 0px 0px var(--row-padding-horizontal) !important;
}
}

@media (max-width: 992px) {
.no-mobile-padding {
padding: 0px !important;
}
}

@media (max-width: 992px) {
.no-mobile-side-padding {
padding-right: 0px !important;
padding-left: 0px !important;
}
}

@media (max-width: 992px) {
.no-mobile-bottom-padding {
padding: var(--row-padding-vertical) var(--row-padding-horizontal) 0px;
}
}

.inner-row {
max-width: var(--row-width);
padding: 0px;
margin: 0px auto;
}

.inner-row-catalog {
max-width: var(--row-width-catalog);
padding: 0px;
margin: 0px auto;
}

.white {
background: #fff;
}

.extra-padding {
padding: 60px 20px;
}

.more-padding {
padding: 60px 60px 30px !important;
}

@media (max-width: 992px) {
.more-padding {
padding: 60px 20px 30px !important;
}
}

@media (min-width: 1500px) {
.more-padding-desktop {
padding: 60px 60px 30px;
}
}

.location-row {
  gap: var(--location-row-gap) !important;
  padding: var(--location-row-padding);
  display: flex;
}

@media (max-width: 768px) {
.location-row {
flex-direction: column;
}
}

.inner-row-small {
max-width: var(--row-width-small);
padding: 0px;
margin: 0px auto;
}

.inner-row-xs {
max-width: var(--row-width-xs);
padding: 0px;
margin: 0px auto;
}

.inner-row-xxs {
max-width: var(--row-width-xxs);
padding: 0px;
margin: 0px auto;
}

.inner-row-intro {
max-width: 750px;
padding: 0px;
margin: 0px auto;
}

@media (max-width: 768px) {
.hide-on-mobile {
display: none !important;
}
}

@media (min-width: 769px) and (max-width: 992px) {
.hide-on-tablet {
display: none !important;
}
}

@media (min-width: 993px) and (max-width: 1350px) {
.hide-on-laptop {
display: none !important;
}
}

@media (min-width: 1351px) {
.hide-on-desktop {
display: none !important;
}
}

@media (min-width: 769px) {
.hide-on-large-screens {
display: none !important;
}
}

@media (max-width: 768px) {
.center-on-mobile {
text-align: center !important;
}
}

.centered {
text-align: center;
}

.shop-all-link,
.shop-all-link > a {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
font-size: 15px;
text-decoration: underline;

}

.row-dark .shop-all-link,
.row-dark .shop-all-link > a {
color: #fff;
font-weight: 500;
}

.row-light .shop-all-link,
.row-light .shop-all-link > a,
.inner-row-container .shop-all-link,
.inner-row-container .shop-all-link > a {
color: var(--dark-blue);
font-weight: 600;
}

.shop-all-link:hover,
.shop-all-link > a:hover {
text-decoration: none;
}

@media only screen and (min-width: 769px) and (max-width: 1180px) {
.tab-collections-row {
flex-wrap: nowrap;
}
}

@media only screen and (max-width: 768px) {
.tab-collections-row {
flex-wrap: wrap;
}
}

.collections-row {
display: flex;
flex-direction: row;
justify-content: left;
align-items: flex-start;
gap: var(--collections-gap);
margin-top: var(--collections-row-top-margin);
}

.collection {
padding-bottom: var(--collection-bottom-padding);
}

.no-scroll {
flex-wrap: wrap;
}

/* Reduce the bottom spacing of the first 2 collections on mobile */
@media only screen and (max-width: 768px) {
.no-scroll .collection:nth-child(1),
.no-scroll .collection:nth-child(2) {
  padding-bottom: 0px;
  margin-bottom: calc(0px - var(--collection-image-bottom-margin)); /* Offset the bottom margin of the collection image */
}
}

.border {
--image-border-radius: 20px 20px 0px 0px;
}

@media (max-width: 768px) {
  .border {
    --image-border-radius: 10px 10px 0px 0px;
  }
}

.scrollable-content .collections-row {
flex-wrap: nowrap;
}

/* Add right padding when scrolling to the end */
@media (max-width: 992px) {
.scrollable-content .collections-row {
overflow-x: auto;
padding-right: var(--row-padding-horizontal);
}
}

.scrollable-content .collection {
flex: 0 0 var(--scrollable-collection-width);
}

.no-scroll .collection {
flex: 1 1 0px;
}

@media (min-width: 768px) and (max-width: 1180px) {
.no-scroll .collection {
flex: 0 0 calc(25% - 15px);
}
}

@media (max-width: 768px) {
.no-scroll .collection {
flex: 0 0 calc(50% - 5px);
}
}

.collection img {
display: block;
width: 100%;
height: auto;
margin-bottom: var(--collection-image-bottom-margin);
user-select: none;
pointer-events: none;
}

.rounded-with-border {
border-bottom: var(--image-border);
border-radius: var(--image-border-radius);
margin-bottom: 15px;
}

.rounded {
border-bottom: 0;
border-radius: var(--image-border-radius);
background-color: var(--lightest-blue);
}

@media only screen and (max-width: 768px) {
.scrollable-on-mobile collection {
flex: 0 0 calc(40% - 5px);
}
}

.collection .hover-underline-animation {
position: relative;
display: inline-block;
padding-bottom: 10px;
font-size: 16px;
font-weight: 600;
color: var(--dark-blue);
text-decoration: none;
}

/* Animated underline hover effect for collection name */
@media only screen and (min-width: 1025px) {
.collection .hover-underline-animation::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-color: var(--bright-blue);
transform-origin: bottom left;
transition: transform 0.3s ease-out;
transform: scaleX(0);
}
}

@media only screen and (min-width: 1025px) {
.collection:hover .hover-underline-animation::after {
transform: scaleX(1);
}
}

.img-container {
position: relative;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: var(--image-border-radius);
}

@media only screen and (min-width: 993px) {
.img-container:hover .overlay {
opacity: 1;
}
}

/* Start collage row styling */
@media (max-width: 992px) {
.collage {
display: none;
}
}

@media (min-width: 993px) {
.collage-mobile {
display: none;
}
}

.collage-center {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: left;
padding: var(--collage-center-padding);
}

@media (max-width: 993px) {
.collage-center {
position: static;
-webkit-transform: translate(0%, 0%);
-ms-transform: translate(0%, 0%);
transform: translate(0%, 0%);
padding: 40px 20px 0px;
}
}

.heading-with-patch {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}

.patch {
position: relative;
width: var(--patch-width);
height: auto;
padding: 2px;
z-index: 2;
margin-top: calc(0px - var(--patch-width));
}

.heading-under-patch {
position: relative;
font-size: var(--heading-under-patch-size);
margin-left: -10px;
z-index: 1;
}

@media (max-width: 992px) {
.heading-under-patch {
font-size: 8vw;
}
}

.collage-description {
padding: 10px 0px 30px;
font-size: var(--collage-description-size);
}

@media (max-width: 992px) {
.collage-description {
font-size: 4vw;
}
}
/* End collage row styling */

/* Text for image overlay */
.text {
  color: white;
  font-size: 18px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.section-heading h2,
.section-heading-simple h2 {
font-family: 'Fugaz One','Roboto',sans-serif;
}

.section-heading-simple h2 {
font-size: 30px;
}

@media (max-width: 575px) {
.section-heading h2,
.section-heading-simple h2 {
font-size: 24px;
line-height: 36px;
}
}

.tabs {
  height: auto;
  overflow: hidden;
}

@media (max-width: 768px) {
.mobile-margin {
margin-left: 20px !important;
margin-right: 20px !important;
}
}

/* Tabbed content - tab links */
.tab-links-row {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-end;
gap: 0px;
margin: 10px 0px 30px;
}
 
.tab-link,
.tab-link:visited {
background: #fff;
border: 0px;
border-bottom: 6px solid var(--light-blue);
border-radius: 0px;
color: var(--light-blue);
font-size: var(--tab-link-font-size) !important;
font-weight: 600;
letter-spacing: 0.05em;
text-align: center;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
padding: var(--tab-link-padding);
width: 25%;
box-shadow: none !important;
}

.tab-link:not(.active-tab-link):hover {
background: #fff;
border: 0px;
border-bottom: 6px solid var(--dark-gray);
color: var(--dark-gray);
}

.animated-tab-links .tab-link:not(.active-tab-link):hover {
background: #fff;
border: 0px;
border-bottom: 6px solid var(--dark-gray) !important;
color: var(--dark-gray) !important;
}

.tab-link:focus,
.tab-link:active {
background: #fff;
border: 0px;
border-bottom: 6px solid var(--tab-link-color);
color: var(--tab-link-color);
}

.active-tab-link {
background: #fff;
border: 0px;
border-bottom: 6px solid var(--tab-link-color);
color: var(--tab-link-color);
}

.active-tab-link:hover,
.active-tab-link:focus {
background: #fff;
border: 0px;
border-bottom: 6px solid var(--tab-link-color) !important;
color: var(--tab-link-color) !important;
}

/* Animate the tab links */
@media only screen and (min-width: 993px) {
.fill-in-link-4 .tab-link:nth-child(1) {
  animation-play-state: paused;
}
}

@media only screen and (min-width: 993px) {
.animation-container.is-visible .fill-in-link-4 .tab-link:nth-child(1) {
  animation: fill-in-link-4 24s linear infinite 0s;
  animation-play-state: running;
}
}

@media only screen and (min-width: 993px) {
.animation-container.is-visible .fill-in-link-4 .tab-link:nth-child(2) {
  animation: fill-in-link-4 24s linear infinite 6s;
}
}

@media only screen and (min-width: 993px) {
.animation-container.is-visible .fill-in-link-4 .tab-link:nth-child(3) {
  animation: fill-in-link-4 24s linear infinite 12s;
}
}

@media only screen and (min-width: 993px) {
.animation-container.is-visible .fill-in-link-4 .tab-link:nth-child(4) {
  animation: fill-in-link-4 24s linear infinite 18s;
}
}

/* Fill in first tab link on tablet and mobile devices */
@media only screen and (max-width: 992px) {
.fill-in-link-4 .tab-link:nth-child(1) {
  animation-play-state: paused;
}
}

.bright-blue {
background: var(--bright-blue);
border: 1px solid var(--dark-blue);
color: #fff;
}

.bright-blue:hover {
background: var(--dark-blue);
border: 1px solid var(--dark-blue);
color: #fff;
}

.no-scroll-bar {
-webkit-overflow-scrolling: touch; 
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}

.no-scroll-bar::-webkit-scrollbar {
display: none; /* Chrome/Safari/Opera */
}

@media (max-width: 992px) {
.no-scroll-bar-on-mobile {
-webkit-overflow-scrolling: touch; 
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}
}

@media (max-width: 992px) {
.no-scroll-bar-on-mobile::-webkit-scrollbar {
display: none; /* Chrome/Safari/Opera */
}
}

.scrollable-content {
overflow-x: auto;
flex-wrap: nowrap;
}

@media (max-width: 992px) {
.scrollable-content {
margin-right: calc(0px - var(--row-padding-horizontal));
margin-left: calc(0px - var(--row-padding-horizontal));
}
}

@media (max-width: 992px) {
.scrollable-content .collections-row > div:nth-child(1) {
margin-left: var(--row-padding-horizontal);
}
}

@media (max-width: 768px) {
.scrollable-on-mobile {
margin-right: calc(0px - var(--row-padding-horizontal));
margin-left: calc(0px - var(--row-padding-horizontal));
}
}

@media (max-width: 768px) {
.scrollable-on-mobile .collections-row {
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 10px;
}
}

@media (max-width: 768px) {
.scrollable-on-mobile .collections-row > div:nth-child(1) {
margin-left: var(--row-padding-horizontal);
}
}

.scrollable-on-mobile .buttons-row {
margin-left: var(--row-padding-horizontal);
}

.smaller-content {
max-width: var(--row-width-small);
}

/* Do not display any collection after the 4th one on smaller screens */
@media only screen and (max-width: 1200px) {
.stop-at-4 > div:nth-child(n+5) {
  display: none;
}
}

.heading-row {
display: flex;
flex-direction: row;
justify-content: right;
align-items: flex-end;
gap: 0px;
}

@media (max-width: 768px) {
.heading-row {
flex-direction: column;
justify-content: center;
align-items: center;
gap: 15px;
}
}

.heading-row p {
margin-bottom: 0px;
}

/* Tabbed content - display content row with no animation */
@keyframes static {
  0% {
    opacity: 1;
  }
  10%, 20% {
    opacity: 1;
  }
  20% {
    opacity: 1;  
  }
  32% {
    opacity: 1;
  }
  33% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* Smooth scrolling text animation */
@keyframes scroll {
  0% {
    font-size: var(--animated-font-size);
    opacity:1;
    transform: translateY(120%);
  }
  10%, 20% {
    font-size: var(--animated-font-size);
    opacity:1;
    transform: translateY(0%);
  }
  20% {
    font-size: var(--animated-font-size);
    opacity:1;
  }
  25% {
    font-size: var(--animated-font-size);
    opacity:1;   
  }
  27% {
    font-size: var(--animated-font-size);
    opacity:0.5;
    transform: translateY(-130%);
  }
  100% {
    font-size: var(--animated-font-size);
    opacity:0;
    transform: translateY(-130%);
  }
}

/* Smooth scrolling text animation */
@keyframes scroll-stacked-centered {
  0% {
    font-size: var(--animated-font-size);
    opacity:1;
	transform: translate(-50%, 120%);
	left: 50%;
  }
  10%, 20% {
    font-size: var(--animated-font-size);
    opacity:1;
	transform: translate(-50%, 0%);
	left: 50%;
  }
  20% {
    font-size: var(--animated-font-size);
    opacity:1;
	transform: translateX(-50%);
	left: 50%;
  }
  25% {
  font-size: var(--animated-font-size);
  opacity:1;
	transform: translateX(-50%);
	left: 50%;
  }
  30% {
    font-size: var(--animated-font-size);
    opacity:0.5;
	transform: translate(-50%, -130%);
	left: 50%;
  }
  100% {
    font-size: var(--animated-font-size);
    opacity:0;
	transform: translate(-50%, -130%);
	left: 50%;
  }
}

/* Smooth scrolling text animation */
@keyframes scroll-stacked {
  0% {
    font-size: var(--animated-font-size);
    opacity:1;
	transform: translateY(120%);
  }
  10%, 20% {
    font-size: var(--animated-font-size);
    opacity:1;
	transform: translateY(0%);
  }
  20% {
    font-size: var(--animated-font-size);
    opacity:1;
  }
  25% {
  font-size: var(--animated-font-size);
  opacity:1;
  }
  30% {
    font-size: var(--animated-font-size);
    opacity:0.5;
	transform: translateY(-130%);
  }
  100% {
    font-size: var(--animated-font-size);
    opacity:0;
	transform: translateY(-130%);
  }
}

.indented {
padding-left: var(--indented-padding) !important;
line-height: 1.1em;
}

.right-aligned {
text-align: right;
}

.left-aligned {
text-align: left !important;
}

@media only screen and (min-width: 769px) {
.shift-animated-text {
transform: translateX(calc(100vw - 100%));
}
}

.scroll > div:nth-child(1) {
  animation-play-state: paused;
}

.scroll.is-visible > div:nth-child(1) {
  animation: scroll 12s linear infinite 0s;
  animation-play-state: running;
}
.scroll.is-visible > div:nth-child(2) {
  animation: scroll 12s linear infinite 3s;
}
.scroll.is-visible > div:nth-child(3) {
  animation: scroll 12s linear infinite 6s;
}
.scroll.is-visible > div:nth-child(4) {
  animation: scroll 12s linear infinite 9s;
}

@media only screen and (max-width: 768px) {
.scroll.is-visible > div:nth-child(1) {
  animation: scroll-stacked 12s linear infinite 0s;
  animation-play-state: running;
}
}
@media only screen and (max-width: 768px) {
.scroll.is-visible > div:nth-child(2) {
  animation: scroll-stacked 12s linear infinite 3s;
}
}
@media only screen and (max-width: 768px) {
.scroll.is-visible > div:nth-child(3) {
  animation: scroll-stacked 12s linear infinite 6s;
}
}
@media only screen and (max-width: 768px) {
.scroll.is-visible > div:nth-child(4) {
  animation: scroll-stacked 12s linear infinite 9s;
}
}

.sticky-bar {
position: fixed;
bottom: 0px;
width: 100%;
height: 100px;
z-index: 1000;
background-color: #fff;
box-shadow: 0px 0px 10px #888;
}

@media (min-width: 769px) {
.sticky-bar {
display: none;
}
}

.sticky-button,
.sticky-button:visited {
background-color: var(--primary-button-color);
border: 1px solid var(--primary-button-color);
color: #fff;
border-radius: var(--button-border-radius);
font-size: 13px !important;
font-weight: 400;
text-align: center;
text-transform: uppercase;
text-decoration: none;
position: fixed;
bottom: 25px;
left: 50%;
padding: var(--button-padding);
width: auto;
transform: translateX(-50%);
}

.sticky-button:hover {
background: var(--primary-button-hover-color);
border: 1px solid var(--primary-button-hover-color);
}

.footer-on-top {
z-index: 5000;
}

.center-button {
transform: translateX(calc(50% - calc(var(--button-width) / 2)));
}

.heading-and-button {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
margin-bottom: var(--heading-and-button-bottom-margin);
}

.heading-and-button .tab-button {
float: right;
}

.heading-and-button > div:nth-child(1) {
flex: 1 1 75%;
}

.heading-and-button > div:nth-child(2) {
flex: 1 1 25%;
}

.content-flex-row {
display: flex;
flex-direction: row;
justify-content: left;
align-items: flex-start;
gap: var(--collections-gap);
}

.content-flex-row > div {
flex: 1 1 0px;
}

.content-flex-row .text-box {
padding: var(--text-box-padding);
text-align: center;
}

.arrow {
  position: absolute;
  top: calc(50% + (var(--scroll-arrow-size) / 2));
  transform: translateY(-40%);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  z-index: 10;
  background-color: var(--dark-blue);
  border-radius: 50%;
  width: var(--scroll-arrow-size);
  height: var(--scroll-arrow-size);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 20px;
  font-family: var(--simple-font);
  color: #fff;
}

.arrow:hover {
background-color: var(--dark-gray);
}

@media (max-width: 992px) {
.arrow {
display: none;
}
}

.hidden {
visibility: hidden;
}

@media (min-width: 1880px) {
.left-arrow {
left: calc((100vw - var(--row-width)) / 2 - (var(--scroll-arrow-size) / 2));
}
}

@media (min-width: 1801px) and (max-width: 1879px) {
.left-arrow {
left: calc((100vw - var(--row-width)) / 2 + (var(--scroll-arrow-size) / 2));
}
}

@media (min-width: 993px) and (max-width: 1800px) {
.left-arrow {
  left: calc(var(--row-padding-horizontal) * 2);
}
}

@media (max-width: 992px) {
.left-arrow {
  left: var(--row-padding-horizontal);
}
}

@media (min-width: 1880px) {
.right-arrow {
right: calc((100vw - var(--row-width)) / 2 - (var(--scroll-arrow-size) / 2));
}
}

@media (min-width: 1801px) and (max-width: 1879px) {
.right-arrow {
right: calc((100vw - var(--row-width)) / 2 + (var(--scroll-arrow-size) / 2));
}
}

@media (min-width: 993px) and (max-width: 1800px) {
.right-arrow {
  right: calc(var(--row-padding-horizontal) * 2);
}
}

@media (max-width: 992px) {
.right-arrow {
  right: var(--row-padding-horizontal);
}
}

.rainbow-text {
  color: transparent;
  margin: 0 auto;
}

.twinkle {
background: linear-gradient(to right, red, orange, #ffde00, green, blue, indigo, violet);
background-size: 400%;
webkit-background-clip: text;
background-clip: text;
animation: twinkle 6s linear infinite;
}

.smooth-rainbow {
background: linear-gradient(to right, red, orange, #ffde00, green, blue, indigo, violet, red, orange, #ffde00, green, blue, indigo, violet, red, orange, #ffde00, green, blue, indigo, violet, red, orange, #ffde00, green, blue, indigo, violet, red);
background-size: 400%;
webkit-background-clip: text;
background-clip: text;
animation: smooth-rainbow 20s linear infinite;
}

@keyframes twinkle {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes smooth-rainbow {
  0% {
    background-position: 0%;
  }
  50% {
    background-position: -50%;
  }
  100% {
    background-position: -134%;
  }
}

/* Tabbed content - fill in tab link color - 4 tabs */
@keyframes fill-in-link-4 {
  0% {
    background: #fff;
    border: 0px;
    border-bottom: 6px solid var(--tab-link-color);
    color: var(--tab-link-color);
  }
  
  24% {
    background: #fff;
    border: 0px;
    border-bottom: 6px solid var(--tab-link-color);
    color: var(--tab-link-color);
  }
  
  25% {
    background: #fff;
    border: 0px;
    border-bottom: 6px solid var(--light-blue);
    color: var(--light-blue);
  }
  
  100% {
    background: #fff;
    border: 0px;
    border-bottom: 6px solid var(--light-blue);
    color: var(--light-blue);
  }
}

/* Tabbed content - display content row with animation - 4 tabs */
@keyframes scroll-content-4 {
  0% {
    opacity: 1;
	visibility: visible;
  }
  10%, 20% {
    opacity: 1;
	visibility: visible;
  }
  20% {
    opacity: 1;
	visibility: visible;
  }
  24% {
    opacity: 0;
    visibility: hidden;
  }
  25% {
    opacity: 0;
    visibility: hidden;
   }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* Tabbed content - display content row with animation - 4 tabs */
@keyframes slide-content-4 {
  0% {
    opacity: 1;
	visibility: visible;
	transform: translateX(100%);
  }
  1% {
    opacity: 1;
	visibility: visible;
	transform: translateX(0%);
  }
  10%, 20% {
    opacity: 1;
	visibility: visible;
	transform: translateX(0%);
  }
  20% {
    opacity: 1;
	visibility: visible;
	transform: translateX(0%);
  }
  24% {
    opacity: 1;
    visibility: visible;
	transform: translateX(0%);
  }
  25% {
    opacity: 1;
    visibility: visible;
	transform: translateX(-100%);
   }
  100% {
    opacity: 1;
    visibility: visible;
	transform: translateX(-100%);
  }
}

/* Tabbed content - display content row with animation - 4 tabs */
@keyframes slide-content-4-static {
  0% {
    opacity: 1;
	visibility: visible;
	transform: translateX(0%);
  }
  1% {
    opacity: 1;
	visibility: visible;
	transform: translateX(0%);
  }
  10%, 20% {
    opacity: 1;
	visibility: visible;
	transform: translateX(0%);
  }
  20% {
    opacity: 1;
	visibility: visible;
	transform: translateX(0%);
  }
  24% {
    opacity: 1;
    visibility: visible;
	transform: translateX(0%);
  }
  25% {
    opacity: 1;
    visibility: visible;
	transform: translateX(-100%);
   }
  100% {
    opacity: 1;
    visibility: visible;
	transform: translateX(-100%);
  }
}

/* Tabbed content - display content row with animation - 3 tabs */
@keyframes slide-content-3 {
  0% {
    opacity: 1;
	visibility: visible;
	transform: translateX(100%);
  }
  1% {
    opacity: 1;
	visibility: visible;
	transform: translateX(0%);
  }
  10%, 20% {
    opacity: 1;
	visibility: visible;
	transform: translateX(0%);
  }
  20% {
    opacity: 1;
	visibility: visible;
	transform: translateX(0%);
  }
  32% {
    opacity: 1;
    visibility: visible;
	transform: translateX(0%);
  }
  33% {
    opacity: 1;
    visibility: visible;
	transform: translateX(-100%);
   }
  100% {
    opacity: 1;
    visibility: visible;
	transform: translateX(-100%);
  }
}

/* Animation for sliding content (4 elements) */
@media only screen and (min-width: 993px) {
.slide-content-4 > div:nth-child(1) {
  visibility: visible;
  opacity: 1;
  animation-play-state: paused;
}
}
@media only screen and (min-width: 993px) {
.animation-container.is-visible .slide-content-4 > div:nth-child(1) {
  animation: slide-content-4-static 24s linear 1 0s, slide-content-4 24s linear infinite 24s;
  animation-play-state: running;
}
}
@media only screen and (min-width: 993px) {
.animation-container.is-visible .slide-content-4 > div:nth-child(2) {
  animation: slide-content-4 24s linear infinite 6s;
}
}
@media only screen and (min-width: 993px) {
.animation-container.is-visible .slide-content-4 > div:nth-child(3) {
  animation: slide-content-4 24s linear infinite 12s;
}
}
@media only screen and (min-width: 993px) {
.animation-container.is-visible .slide-content-4 > div:nth-child(4) {
  animation: slide-content-4 24s linear infinite 18s;
}
}

/* Animation for sliding content (3 elements) */
.slide-content-3 > div:nth-child(1) {
  animation: slide-content-3 30s linear infinite 0s;
}
.slide-content-3 > div:nth-child(2) {
  animation: slide-content-3 30s linear infinite 10s;
}
.slide-content-3 > div:nth-child(3) {
  animation: slide-content-3 30s linear infinite 20s;
}

/* Do not animate tabbed content on tablet and mobile devices */
@media only screen and (max-width: 992px) {
.no-mobile-animation > div:nth-child(1) {
  visibility: visible;
  opacity: 1;
}
}

/* Animation for scrolling content (4 elements) */
@media only screen and (min-width: 993px) {
.scroll-content-4 > div:nth-child(1) {
  animation: scroll-content-4 24s linear infinite 0s;
}
}
@media only screen and (min-width: 993px) {
.scroll-content-4 > div:nth-child(2) {
  animation: scroll-content-4 24s linear infinite 6s;
}
}
@media only screen and (min-width: 993px) {
.scroll-content-4 > div:nth-child(3) {
  animation: scroll-content-4 24s linear infinite 12s;
}
}
@media only screen and (min-width: 993px) {
.scroll-content-4 > div:nth-child(4) {
  animation: scroll-content-4 24s linear infinite 18s;
}
}

.tab-content-static > div:nth-child(1) {
  visibility: visible;
  opacity: 1;
}

.top-footer-heading {
font-size: var(--top-footer-heading);
}

.footer-heading {
font-size: var(--footer-heading);
text-transform: uppercase;
margin-bottom: 15px;
}

.icons-row {
  gap: var(--icons-gap);
}

.icon-card {
  height: 100%;
  padding: 15px 15px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (min-width: 769px) and (max-width: 1000px) {
  .icons-row .static-button {
    width: 200px;
  }
}

.icon {
  width: var(--icon-width);
  margin: 0px auto 20px;
  display: block;
}

/* Row with carousel on mobile devices only */
@media (max-width: 768px) {
  .carousel-scroll-container-mobile {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }
}

.carousel-scroll-track-mobile {
  display: flex;
}

@media (min-width: 769px) {
  .carousel-scroll-track-mobile {
    flex-direction: row;
    justify-content: center;
  }
}

@media (min-width: 769px) {
  .carousel-item-mobile {
    flex: 1 1 0px;
  }
}

@media (max-width: 768px) {
  .carousel-item-mobile {
    flex: 0 0 100%;
    scroll-snap-align: start;
	margin-bottom: 20px;
  }
}


/* Values row styling */
.values-row {
  gap: var(--values-gap);
}

/* Set values row to two columns on tablet/small laptop devices */
@media (min-width: 769px) and (max-width: 1199px) {
  .values-row {
    flex-wrap: wrap;
  }
  
  .values-row .carousel-item-mobile {
    flex: 0 0 calc(50% - (var(--values-gap) / 2));
  }
}

/* When value cards are in two columns, move the third card to the last position */
@media (min-width: 769px) and (max-width: 1199px) {
  .values-row .carousel-item-mobile:nth-child(3) {
    order: 4;
  }
}

.values-row-heading {
  font-size: var(--cards-row-heading);
  font-weight: 600;
  margin-bottom: var(--values-row-heading-bottom-margin);
}

.value-card {
  height: 100%;
  padding: var(--value-card-padding);
  border-radius: 25px;
  position: relative;
}

.blue-bg {
  background-color: #026590;
}

.green-bg {
  background-color: #b6deb5;
}

.value-card-patch {
  margin: 0px auto 0px 0px;
  position: absolute;
  right: 15px;
  top: 15px;
  width: 20%;
  max-width: 70px !important;
}

@media (max-width: 768px) {
  .value-card-patch {
    max-width: 60px !important;
  }
}

.value-card-heading {
  margin: 4% 0px 0px;
  font-size: var(--value-cards-heading);
}

@media (max-width: 768px) {
  .value-card-heading {
    margin: 6% 0px 0px;
  }
}

.value-card-subheading {
  font-size: 18px;
  margin: 0px 10% 15px 0px;
  font-style: italic;
  font-weight: 600;
}

.value-card-divider {
  height: 1px;
  width: 100%;
  margin: 10px 0px 20px;
}

.blue-bg .value-card-divider {
  border-top: 1px solid #fff;
}

.green-bg .value-card-divider {
  border-top: 1px solid #000;
}

.value-card-description {
  font-size: 16px;
}

.cards-row {
display: flex;
flex-direction: row;
justify-content: center;
gap: var(--collections-gap);
}

@media (max-width: 768px) {
.cards-row {
flex-direction: column;
padding: 0px 20px;
}
}

.card {
padding: var(--card-padding);
}

/* Force card content to vertically align with other cards */
.card-content {
display: flex;
justify-content: space-between;
flex-direction: column;
height: 100%;
}

.cards-row-heading {
font-size: var(--cards-row-heading);
font-weight: 600;
}

.card-subheading {
font-size: var(--card-subheading);
margin-bottom: 15px;
}

@media (min-width: 769px) and (max-width: 1000px) {
.cards-row .static-button {
width: 200px;
}
}

.hero-image-row {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
gap: var(--hero-image-row-gap);
}

@media (max-width: 992px) {
.hero-image-row {
flex-direction: column;
}
}

@media (max-width: 992px) {
  .reverse-on-mobile {
    flex-direction: column-reverse !important;
  }
}

.hero-image {
flex: 1 1 var(--hero-image-width);
}

.hero-image img {
  display: block;
  margin: 0px auto;
}

.hero-text {
flex: 1 1 calc(100% - var(--hero-image-width));
}

.add-top-padding {
padding-top: 20px;
}

.add-bottom-padding {
padding-bottom: 20px;
}

/* Override Beaver Builder settings */
.fl-module-content, .fl-module:where(.fl-module:not(:has(> .fl-module-content))) {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

h1, .h1, h2, .h2, h3, .h3 {
margin-top: 0px;
margin-bottom: 0px;
}

/* === Dynamic height for tabs based on max .tab-row height (CSS-only) === */

/* Stack all slides in one grid cell so their heights contribute to sizing */
.tab-content {
  position: relative;
  height: auto;
  display: grid; /* stacked grid sizing gives us max height */
  overflow: hidden;  /* keep clipping horizontally while sliding */
  width: 100%;
  max-width: var(--row-width);
}

/* Each slide overlaps the same grid area, but stays in normal flow */
.tab-content > .tab-row {
  grid-area: 1 / 1;      /* overlap in the same cell */
  position: static;      /* replaces: position: absolute; */
}

/* Ensure tab content is vertically aligned (text aligned at top, image aligned at bottom) */
.tab-row {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.tab-content > div {
  font-size: 0px;
  margin-left: 0px;
  position: absolute;
  opacity: 0;
  visibility: hidden;
}

.advantage-row {
  padding: 60px 20px;
}

@media (max-width: 768px) {
  .advantage-row {
    padding: 60px 0px;
  }
}

.bar-graph-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 60px;
  max-width: 1200px;
  margin: 0px auto;
}

@media (max-width: 768px) {
  .bar-graph-container {
    flex-direction: column;
	gap: 30px;
  }
}

.bar-graph-container > div {
  flex: 1 1 0px;
}

.bar-graph-container-heading {
  margin: 0px auto 20px;
  width: 75%; 
}

@media (max-width: 1200px) {
  .bar-graph-container-heading {
    width: 100%;
  }
}

.bar-graph {
  display: flex;
  gap: 30px;
}

@media (max-width: 768px) {
  .bar-graph {
    gap: 20px;
  }
}

.bar-graph-column {
  display: flex;
  flex-direction: column;
}

.key {
  justify-content: space-between;
  height: 400px;
  max-width: 175px;
}

@media (max-width: 500px) {
  .key {
    width: 30%;
  }
}

@media (max-width: 500px) {
  .bar-container {
    width: 20%;
  }
}

@media (max-width: 400px) {
  .bar-container {
    width: 25%;
  }
}

@media (min-width: 501px) {
  .bar-container {
    width: 100px;
  }
}

.bar {
  width: 100px;
  height: 400px;
  background: #f2f2f2;
  border: 1px solid var(--dark-gray);
  margin-bottom: 10px;
}

@media (max-width: 500px) {
  .bar {
    width: 100%;
  }
}

.text-over-bar {
  position: absolute;
  z-index: 10;
  color: #f2f2f2;
  width: calc(100% - 2px);
}

.others-text {
  top: 0%;
}

.us-text {
  top: 30%;
}

.bar-fill {
  position: absolute;
  width: calc(100% - 2px);
  background: var(--dark-gray);
  bottom: 1px;
}

.bar-fill-half {
  position: absolute;
  width: calc(100% - 2px);
  background: var(--bright-blue);
  bottom: 1px;
}

.bar-label {
  font-size: 20px;
  line-height: 1.2em;
  font-weight: 500;
}

@media (max-width: 500px) {
  .bar-label {
    font-size: 18px;
  }
}

@media (max-width: 400px) {
  .bar-label {
    font-size: 16px;
  }
}

.quality-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 60px;
  max-width: 1400px;
  margin: 0px auto;
}

@media (max-width: 992px) {
  .quality-row {
    flex-direction: column;
	gap: 30px;
  }
}

.quality-row > div:nth-child(1) {
  flex: 1 1 60%;
}

.quality-row > div:nth-child(2) {
  flex: 1 1 40%;
}

.bar-graph-container.is-visible .bar-graph-grow {
animation: bar-graph-grow 4s linear infinite;
}

.bar-graph-container.is-visible .animated-underline-text .underline-animation::after {
animation: underline 4s linear 1;
}

@keyframes bar-graph-grow {
  0% {
  height: 1px;
  }
  50% {
  height: 398px;
  }
  100% {
  height: 398px;
  }
}

.bar-graph-container.is-visible .bar-graph-grow-half {
animation: bar-graph-grow-half 4s linear infinite;
}

@keyframes bar-graph-grow-half {
  0% {
  height: 1px;
  }
  50% {
  height: 280px;
  }
  100% {
  height: 280px;
  }
}

.fade-in {
animation: fade-in 4s linear infinite;
}

@keyframes fade-in {
  0% {
  opacity: 0;
  }
  50% {
  opacity: 1;
  }
  100% {
  opacity: 1;
  }
}

@keyframes underline {
  0% {
  transform: scaleX(0);
  }
  35% {
  transform: scaleX(1);
  }
  100% {
  transform: scaleX(1);
  }
}

.parent-grid {
display: grid;
grid-template-columns: 1fr 3fr;
align-items: stretch;
background-color: black;
grid-gap: 1px;
max-width: 1500px;
margin: 30px auto 10px;
border: 1px solid black;
text-align: center;
color: var(--dark-blue);
font-size: 18px;
overflow-x: auto;
}

.grid-header {
grid-column: 1 / -1;
background-color: var(--dark-blue);
padding: 20px;
color: #fff;
}

.grid-subheader {
background-color: var(--bright-blue);
padding: 20px;
color: #fff;
}

.grid-item {
background-color: white;
padding: 20px;
}

.nested-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  background-color: black;
  grid-gap: 1px;
}

.nested-grid-header {
  background-color: white;
  padding: 20px;
  font-weight: 600;
}

#wpforms-2322 {
margin: 0px auto !important;
}

.carousel-dots {
  width: 100%;
  text-align: center;
}

.dot {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  display: inline-block;
  height: 12px;
  width: 12px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.dot.active {
  background-color: var(--bright-blue);
}

.carousel-nav-buttons {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}

.carousel-button {
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
background-color: var(--dark-gray);
border-radius: 50%;
width: var(--scroll-arrow-size);
height: var(--scroll-arrow-size);
display: flex;
justify-content: center;
align-items: center;
font-weight: 600;
font-size: 20px;
font-family: var(--simple-font);
color: #fff;
position: absolute;
top: calc(50% - (var(--scroll-arrow-size) / 2));
}

.prev {
left: 0%;
}

.next {
right: 0%;
}

.carousel-button:hover {
background-color: var(--dark-blue);
}

/* Invisible metronome for driving autoplay */
@keyframes autoplay-tick {
  0% { opacity: 0.9999; }  /* (non-zero change helps ensure iterations fire reliably) */
  100% { opacity: 1; }
}

@media (min-width: 769px) {
.autoplay-ticker {
  position: absolute;      /* keep it off-layout */
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  animation-name: autoplay-tick;
  animation-duration: 5000ms;    /* <-- autoplay interval (5s per slide) */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running; /* can be 'paused' to stop */
}
}

.carousel-scroll-container {
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}

.carousel-scroll-track {
display: flex;
flex-wrap: nowrap;
}

.carousel-item {
flex: 0 0 100%;
scroll-snap-align: start;
}

.dashed-line {
  height: 2px;
  border-bottom: 1px dashed var(--dark-gray);
  width: 100%;
  margin: 0px auto 0px;
}

.in-house-advantage {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  gap: 30px;
}

@media (max-width: 992px) {
.in-house-advantage {
gap: 0px;
}
}

.hero-heading {
  padding-bottom: var(--hero-heading-bottom-padding);
  line-height: 1.25em;
}

.hero-subheading {
  padding-top: 10px;
}

.team-cards-parent-container {
  position: relative;
  max-width: 520px;
}

.team-cards-container {
  display: flex;
  gap: var(--team-cards-gap);
}

@media (max-width: 379px) {
  .team-cards-container {
    margin-bottom: calc(var(--scroll-arrow-size) + 10px);
  }
}

.team-cards-container > div {
    width: 50%;
}

.headshot {
  width: 250px;
}

.team-cards-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-bottom: var(--scroll-arrow-size);
}

@media (max-width: 379px) {
  .team-cards-text {
    margin-bottom: 0px;
	margin-top: 30px;
  }
}

@media (max-width: 340px) {
  .team-cards-text {
	margin-top: 0px;
  }
}

.employee-info {
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: 20px;
}

@media (max-width: 379px) {
  .employee-info {
    height: 100%;
    margin-bottom: 0px;
  }
}

.meet-our-team {
  position: absolute;
  left: calc(50% + (var(--team-cards-gap) / 2));
  bottom: calc(50% + var(--scroll-arrow-size));
  margin-bottom: 10px;
}

@media (max-width: 379px) {
.meet-our-team {
display: none;
}
}

.meet-our-team-small-mobile {
margin-bottom: 15px;
}

@media (min-width: 380px) {
.meet-our-team-small-mobile {
display: none;
}
}

.team-arrows-container {
  display: flex;
  gap: 10px;
  position: absolute;
  left: calc(50% + (var(--team-cards-gap) / 2));
  bottom: 0;
}

@media (max-width: 379px) {
  .team-arrows-container {
    left: calc(50% - var(--scroll-arrow-size) - 5px);
  }
}

.team-arrow {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  background-color: var(--dark-gray);
  border-radius: 50%;
  width: 40px;
  height: var(--scroll-arrow-size);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 20px;
  font-family: var(--simple-font);
  color: #fff;
}

.counter {
  font-family: var(--stylized-font);
  font-size: var(--counter-font-size);
  color: #fff;
  padding: 0px 20px;
}

.counter-title {
  font-family: var(--simple-font);
  color: var(--bright-blue);
  font-size: var(--counter-title-font-size);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
  padding: var(--counter-title-padding);
}

@media (max-width: 768px) {
  .counter-first-row {
    padding-bottom: 40px;
  }
}

@media (max-width: 768px) {
  .counter-second-row {
    padding-bottom: 0px;
  }
}

@media (max-width: 768px) {
  .logo-container {
    padding: 0px 30%;
  }
  
  .logo-row {
    margin-top: -25px;
  }
}

@media (max-width: 450px) {
  .logo-container {
    padding: 0px 15%;
  }
}