/*
 * Micron Wind Solutions - Main Stylesheet
 * Following Cursor Rules: Mobile-first, relative units, semantic structure
 */
 
 
 @font-face {
  font-family: 'AllRoundGothic-Demi';
  src: url('../fonts/AllRoundGothic-Demi.woff2') format('woff2'),
      url('../fonts/AllRoundGothic-Demi.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}




/* CSS Custom Properties - Exact Figma Values */
:root {
/* Colors - Exact from Figma */
--color-primary: #24516D;
--color-secondary: #204C72;
--color-tertiary: #F3F3F3;
--white: #ffffff;
--overlay-color: rgba(32, 76, 114, 0.17);

/* Typography - Following rules: All Round Gothic for titles, Inter for body */
--font-title: 'AllRoundGothic-Demi', -apple-system, BlinkMacSystemFont, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

/* Spacing - Using rem units as per rules */
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2rem;
--space-xl: 3rem;
--space-xxl: 4rem;

/* Layout - Responsive values */
--header-height: 4rem;
--container-max: 90rem;
/* 1440px */
--container-padding: 1rem;

/* Breakpoints referenced in media queries */
--bp-sm: 768px;
--bp-md: 992px;
--bp-lg: 1200px;
}

/* Reset and Base Styles */
* {
box-sizing: border-box;
}

html {
font-size: 16px;
/* Base font size - 1rem = 16px */
}

@media (min-width: 1800px){
  html {
    font-size: 17px;
  }
}

body {
margin: 0;
padding: 0;
font-family: var(--font-body);
font-weight: 400;
line-height: 1.6;
color: var(--color-primary);
background-color: var(--white);
-webkit-font-smoothing: antialiased;
}

/* Remove default margins from headings and paragraphs */
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0;
}

/* Lists */
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}

/* Links */
a {
text-decoration: none;
color: inherit;
}

/* Images - Following rules: responsive by default */
img {
max-width: 100%;
height: auto;
display: block;
}

/* Buttons - Following rules: accessible and semantic */
button {
border: none;
background: none;
font-family: inherit;
cursor: pointer;
}

/* Container utility - Following Bootstrap grid approach */
.container {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
}

/*
* UNIFIED SECTION STRUCTURE
* Pattern: section.section > .container > .row > .col-*
* Following Bootstrap Grid conventions with custom styling
*/

/* Base section styles */
.section {
position: relative;
width: 100%;
}

/* Section padding variants */
.section--py {
padding-top: var(--space-xxl);
padding-bottom: var(--space-xxl);
}

.section--py-lg {
padding-top: 6.25rem;
/* 100px */
padding-bottom: 6.25rem;
}

/* Section background variants */
.section--bg-white {
background-color: var(--white);
}
.section--bg-white.section--py + .section--bg-white.section--py {
padding-top: 0;
}

.section--bg-light {
background-color: #D9E1E7;
}

.section--bg-cream {
background-color: #f3f1e9;
}

.section--bg-primary {
background-color: var(--color-primary);
}

.section--bg-orange {
background-color: #ef983f;
}

/* Section container - unified max-width and padding */
.container {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
position: relative;
z-index: 2;
}

/* Section row - flex container for columns */
.section__row {
display: flex;
flex-wrap: wrap;
margin-left: calc(var(--space-md) * -0.5);
margin-right: calc(var(--space-md) * -0.5);
}

/* Section columns */
.section__col {
flex: 1;
padding-left: calc(var(--space-md) * 0.5);
padding-right: calc(var(--space-md) * 0.5);
}

.section__col--full {
flex: 0 0 100%;
max-width: 100%;
}

.section__col--half {
flex: 0 0 100%;
max-width: 100%;
}

.section__col--third {
flex: 0 0 100%;
max-width: 100%;
}

/*
* UNIFIED SECTION TITLES
* Consistent typography for all section headings
*/
.section-title {
font-family: var(--font-title);
font-weight: 300;
font-size: 3rem;
/* Mobile: 48px */
line-height: 1.1;
letter-spacing: -0.125rem;
/* -2px */
color: var(--color-primary);
margin-bottom: var(--space-xl);
-webkit-font-smoothing: antialiased;
}

.section-title--white {
color: var(--white);
}

.section-title--light {
color: var(--color-tertiary);
}

.section-title--center {
text-align: center;
}

.section-title--left {
text-align: left;
}

/* Tablet responsive - section structure */
@media (min-width: 768px) {
.section--py {
 padding-top: 6rem;
 padding-bottom: 6rem;
}

.section--py-lg {
 padding-top: 8rem;
 padding-bottom: 8rem;
}

.container {}

.section__col--half {
 flex: 0 0 50%;
 max-width: 50%;
}

.section__col--third {
 flex: 0 0 33.333%;
 max-width: 33.333%;
}

.section-title {
 font-size: 4.5rem;
 /* 72px */
 letter-spacing: -0.1875rem;
 /* -3px */
}
}

/* Desktop responsive - section structure */
@media (min-width: 992px) {
.container {
 /* 100px */
}

.section-title {
 font-size: 5rem;
 /* 90px from Figma */
 line-height: 1.07;
 
 /* -4.5px */
 margin-bottom: 3rem;
}
}

/*
* HEADER STYLES
* Following rules: Clean structure, no fixed heights
*/
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background-color: transparent;
transition: all .3s;
}
@media (min-width: 992px){
 
.header {
 left: 50%;
 transform: translateX(-50%);
 max-width: calc(100% - 70px);
 border-radius: 0 0 0.5rem 0.5rem;
}
}

/* Header when scrolled */
.header--scrolled {
background-color: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(0.9375rem);
/* 15px */
box-shadow: 0 0.125rem 1.25rem rgba(36, 81, 109, 0.1);
}

.header-container {
display: flex;
align-items: center;
justify-content: space-between;
min-height: var(--header-height);
}

/* Logo */
.header-logo {
flex-shrink: 0;
}

.logo-image {width: 6.35rem;
/* 140px from Figma */height: auto;transition: filter 0.3s ease;}

/* Logo color change to primary when header is scrolled */
.header:not(.header--scrolled) .logo-image {
filter: brightness(0) saturate(100%) invert(28%) sepia(38%) saturate(1276%) hue-rotate(162deg) brightness(92%) contrast(90%);
}

/* Desktop Navigation */
.header-nav {
display: none;
/* Hidden on mobile - mobile-first approach */
}

.nav-list {
display: flex;
gap: var(--space-md);
list-style: none;
margin: 0;
padding: 0;
}

.nav-item {
position: relative;
}

.nav-item.nav-item--has-children a.nav-link {
padding-right: 1.2rem;
}

.nav-link {
font-family: var(--font-body);
font-weight: 700;
font-size: .9rem;
/* 14px from Figma */
line-height: 0.875rem;
/* 14px from Figma */
letter-spacing: -0.0088rem;
/* -0.14px from Figma */
color: var(--color-primary);
padding: var(--space-sm) 0;
display: flex;
align-items: center;
gap: 0.25rem;
transition: color 0.2s ease;
}

.nav-link:hover {
color: var(--color-secondary);
}

.nav-link--active {
position: relative;
}

.nav-link--active::after {
content: '';
position: absolute;
bottom: 10px;
left: 0;
width: 100%;
height: 1px;
/* 2px */
background-color: var(--color-primary);
}

/* Dropdown indicator */
.nav-dropdown-icon {
width: 12px;
background: url(../img/svg/caret_down.svg) no-repeat center center;
align-content: center;
display: block;
background-size: 87%;
aspect-ratio: 1;
position: absolute;
right: 0;
top: 50%;
transform: translate(0,-50%);
}

.nav-item--has-children:hover .nav-dropdown-icon {
transform: translate(0,-50%) rotate(180deg);
}

/* Desktop submenu */
.nav-submenu {
position: absolute;
top: 100%;
left: 0;
min-width: 22.5rem;
background-color: var(--white);
box-shadow: 0 0.25rem 1rem rgba(36, 81, 109, 0.15);
border-radius: 0.5rem;
padding: 0;
margin-top: 0.5rem;
list-style: none;
opacity: 0;
visibility: hidden;
transform: translateY(-0.5rem);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
z-index: 1000;
}

.nav-item--has-children:hover > .nav-submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.nav-submenu .nav-item a {
border-bottom: 1px solid;
}

.nav-submenu .nav-item:last-child a {
border: none;
}

.nav-submenu .nav-link {
padding: 0.95rem 1.25rem;
display: block;
font-weight: 600;
opacity: .5
}
.nav-submenu .nav-link:hover {
opacity: .5
}
.nav-submenu .nav-link:hover {
background-color: rgba(36, 81, 109, 0.05);
}

.nav-submenu .nav-link--active::after {
display: none;
}

/* Header Actions */
.header-actions {
display: none;
/* Hidden on mobile */
align-items: center;
gap: var(--space-sm);
}

/* Language Selector - WPML Integration */
.language-selector {
  position: relative;
  display: inline-block;
}

.lang-current {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.75rem;
  /* 12px from Figma */
  color: var(--color-primary);
  cursor: pointer;
  user-select: none;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.lang-current::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 0.25rem solid transparent;
  border-right: 0.25rem solid transparent;
  border-top: 0.25rem solid var(--color-primary);
  margin-left: 0.125rem;
  transition: transform 0.2s ease;
}

.language-selector:hover .lang-current::after {
  transform: rotate(180deg);
}

.lang-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--white);
  border: 1px solid rgba(36, 81, 109, 0.1);
  border-radius: 0.25rem;
  margin-top: 0.25rem;
  padding: 0.5rem 0;
  min-width: 3.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  list-style: none;
  margin: 0.25rem 0 0 0;
}

.language-selector:hover .lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-dropdown li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lang-dropdown a {
  display: block;
  padding: 0.5rem 1rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--color-primary);
  transition: background-color 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
}

.lang-dropdown a:hover {
  background-color: rgba(36, 81, 109, 0.05);
}

/* Contact Button - Following exact Figma measurements */
.contact-button {
position: relative;
display: flex;
align-items: center;
width: 6.772rem;
/* 108.35px from Figma */
height: 2.125rem;
/* 34px from Figma */
}

.contact-text {
position: absolute;
left: 3.375rem;
/* 54px from Figma */
top: 50%;
transform: translateY(-50%);
font-family: var(--font-body);
font-weight: 700;
font-size: 0.875rem;
/* 14px from Figma */
color: var(--color-primary);
white-space: nowrap;
}

.contact-icon {
position: absolute;
left: 0;
top: 0;
width: 2.125rem;
/* 34px from Figma */
height: 2.125rem;
/* 34px from Figma */
background-color: var(--color-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}

.contact-icon img {
width: 0.879rem;
/* 14.06px from Figma */
height: 0.644rem;
/* 10.31px from Figma */
}


/* Mobile Header Actions */
.mobile-header-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.mobile-cta-products {
  background-color: var(--color-primary);
  color: var(--white);
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.575rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
}

.mobile-cta-products:hover {
  background-color: var(--color-secondary);
  transform: translateY(-1px);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {display: flex;flex-direction: column;gap: 0.25rem;padding: var(--space-xs);background: none;border: none;cursor: pointer;position: relative;width: 2.5rem;height: 2.3rem;justify-content: center;align-items: center;}

.hamburger-line {
width: 1.5rem;
height: 0.125rem;
/* 2px */
background-color: var(--color-primary);
display: block;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center;
position: absolute;
}

.hamburger-line:nth-child(1) {
top: 0.5rem;
}

.hamburger-line:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}

.hamburger-line:nth-child(3) {
bottom: 0.5rem;
}

/* Active state - transform to X */
.mobile-menu-toggle.is-active .hamburger-line:nth-child(1) {
top: 50%;
transform: translateY(-50%) rotate(45deg);
}

.mobile-menu-toggle.is-active .hamburger-line:nth-child(2) {
opacity: 0;
transform: translateY(-50%) scaleX(0);
}

.mobile-menu-toggle.is-active .hamburger-line:nth-child(3) {
bottom: 50%;
transform: translateY(50%) rotate(-45deg);
}

/* Mobile Menu */
.mobile-menu {position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background-color: var(--white);transform: translateY(-100%);opacity: 0;visibility: hidden;z-index: 999;overflow-y: auto;padding-top: 4rem;padding-bottom: 4rem;}

.mobile-menu[aria-hidden="false"] {
transform: translateY(0);
opacity: 1;
visibility: visible;
}

.mobile-menu-content {
padding: var(--space-lg) var(--container-padding);
min-height: 100%;
}

.mobile-nav-list {
list-style: none;
margin: 0;
padding: 0;
}

.mobile-nav-item {
position: relative;
border-bottom: 1px solid rgba(36, 81, 109, 0.1);
}

.mobile-nav-item--has-children {
display: flex;
flex-direction: column;
}

.mobile-nav-item--has-children > a {
flex: 1;
}

.mobile-nav-link {display: block;padding: 1rem 0;font-family: var(--font-body);font-weight: 600;font-size: 1.125rem;color: var(--color-primary);transition: color 0.2s ease;}

.mobile-nav-link--active {
color: var(--color-secondary);
font-weight: 700;
}

/* Mobile submenu toggle button */
.mobile-submenu-toggle {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
padding: 0;
}

.mobile-submenu-icon {
height: 0;
border-left: 0.375rem solid transparent;
border-right: 0.375rem solid transparent;
border-top: 0.375rem solid var(--color-primary);
transition: transform 0.3s ease;
}

.mobile-submenu-toggle[aria-expanded="true"] .mobile-submenu-icon {
transform: rotate(180deg);
}

/* Mobile submenu */
.mobile-nav-submenu {
list-style: none;
margin: 0;
padding: 0;
max-height: 0;
overflow: hidden;
background-color: rgba(36, 81, 109, 0.03);
transition: max-height 0.3s ease;
}

.mobile-nav-submenu.is-open {
max-height: 100rem;
padding-bottom: var(--space-sm);
}

.mobile-nav-submenu .mobile-nav-item {
border-bottom: none;
padding-left: var(--space-md);
}

.mobile-nav-submenu .mobile-nav-link {
padding: var(--space-sm) 0;
font-size: 1rem;
font-weight: 500;
}

/* Mobile Language Selector */
.mobile-language-selector {
  padding: var(--space-lg) 0;
  border-top: 1px solid rgba(36, 81, 109, 0.1);
}

.mobile-lang-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mobile-lang-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mobile-lang-item {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-lang-item a {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 1rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--color-primary);
  border: 1px solid rgba(36, 81, 109, 0.1);
  border-radius: 0.25rem;
  transition: all 0.2s ease;
  text-decoration: none;
  height: 100%;
}

.mobile-lang-item a:hover {
  background-color: rgba(36, 81, 109, 0.1);
  border-color: rgba(36, 81, 109, 0.2);
}

.mobile-lang-item--active a {
  background-color: var(--color-primary);
  color: var(--white);
  border-color: var(--color-primary);
}

.mobile-lang-check {
  font-size: 1rem;
  font-weight: 700;
}

/* Mobile Menu Footer Actions */
.mobile-menu-actions {
  padding: 0.6rem 0;
  margin-top: 0;
}

.mobile-contact-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 1.25rem 1.5rem;
  border-radius: 0.5rem;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 700;
  transition: all 0.3s ease;
  gap: 1rem;
  padding-inline: 0;
}

.mobile-contact-button .contact-text {
  position: static;
  transform: none;
  color: inherit;
  font-size: 1.125rem;
}

.mobile-contact-button .contact-icon {
  position: static;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #25516e;
  border-radius: 50%;
  padding: 0.25rem;
}

.mobile-contact-button .contact-icon img {
  width: 1rem;
  filter: brightness(0) invert(1);
  object-fit: contain;
}

/*
* HERO SECTION
* Following rules: No fixed heights, background image as img element
*/
.hero {
position: relative;
min-height: 35rem;
/* Mobile: 560px */
display: flex;
overflow: hidden;
}

.hero .col-12{
position: static;
}

/* Background Image - Following rules: img element instead of background-image */
.hero-bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;object-position: right bottom;z-index: 1;}

/* Hero overlay - Following Figma exact values: rgba(32,76,114,0.17) */
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background: rgba(32, 76, 114, 0.17); */
z-index: 2;
}

/* Hero gradient overlay - Additional gradient with blend mode from Figma */
.hero::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background: linear-gradient(180deg, rgba(255, 255, 255, 0.87) 54.376%, rgba(0, 28, 50, 0.694) 86.91%); */
/* mix-blend-mode: overlay; */
/* z-index: 2; */
/* pointer-events: none; */
}

/* Hero Content */
.hero-content {
position: relative;
z-index: 10;
/* Above both overlays and gradient */
width: 100%;
/* padding: var(--space-xxl) 0; */
padding-top: calc(var(--header-height) + var(--space-xxl));
}

.hero-text {
max-width: 62.5rem;
/* 1000px from Figma */
}

.hero-title {
font-family: var(--font-title);
font-weight: 300;
/* Demi/Semi weight from Figma */
font-size: 3rem;
/* Mobile size: 48px */
line-height: 1.1;
/* 1.1 from Figma */
letter-spacing: -0.09375rem;
/* -1.5px for mobile */
color: var(--color-primary);
margin-bottom: var(--space-xl);
text-transform: capitalize;
/* Capitalize as per Figma */
}

.hero-title-line {
display: block;
}

/* Hero Subtitle - Positioned as per Figma */
.hero-subtitle-wrapper {
max-width: 70rem;
/* 1120px from Figma */
z-index: 10;
/* Above overlays */
}

.hero-subtitle {
font-family: var(--font-title);
/* All Round Gothic Demi from Figma */
font-weight: 300;
/* Demi weight from Figma */
font-size: 1.25rem;
/* Mobile size: 20px */
line-height: 1.2;
/* 1.2 from Figma */
color: var(--color-primary);
/* #24516D from Figma, not white */
text-align: left;
letter-spacing: -0.03125rem;
/* -0.5px for mobile */
}

/* Scroll Indicator - Positioned bottom right, aligned with header and hero-subtitle */
.scroll-indicator {
position: absolute;
bottom: 0;
right: var(--container-padding);
z-index: 10;
/* Above overlays */
cursor: pointer;
margin: 1rem 0;
}

.scroll-icon {
width: 4.1rem;
height: 4.1rem;
/* No rotation - natural arrow direction */
filter: brightness(0) invert(1);
/* Make white */
transition: transform 0.3s ease;
}

.scroll-indicator:hover .scroll-icon {
transform: translateY(0.5rem);
}

/*
* COMPANY SECTION
* Following rules: Mobile-first, relative units, semantic structure
*/
.company-section {
position: relative;
background-color: var(--white);
overflow: hidden;
}

/* Company Info Section with Background Image */
.company-info-section {
position: relative;
width: 100%;
min-height: 26.875rem;
/* 430px from Figma */
overflow: hidden;
}

/* Background Image - Following rules: img element instead of background-image */
.company-bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 1;
}

/* Content Overlay */
.company-info-content {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(243, 243, 243, 0.95);
/* Light overlay from Figma */
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-xl) var(--container-padding);
}

.company-info-text {
width: 100%;
max-width: var(--container-max);
display: flex;
flex-direction: column;
gap: var(--space-lg);
}

.company-info-left {
flex: 1;
}

.company-info-main {
font-family: var(--font-body);
font-weight: 400;
font-size: 1.375rem;
/* Mobile: 22px */
line-height: 1.3;
color: var(--color-primary);
margin: 0;
}

.company-info-main strong {
font-weight: 600;
/* Semi-bold */
}

.company-info-right {
flex: 1;
}

.company-info-secondary {
font-family: var(--font-body);
font-weight: 400;
font-size: 1.125rem;
/* Mobile: 18px */
line-height: 1.4;
color: var(--color-primary);
margin: 0;
}

/* Services Section */
.company-services-section {
position: relative;
padding: var(--space-xxl) 0;
background-color: #f5f5f5;
/* Light gray background from Figma */
}

.company-container {
position: relative;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-padding);
}

/* Company Title - now uses .section-title class */

/* Services Grid */
.services-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0;
max-width: 77.5rem;
/* 1240px from Figma */
margin: 0 auto;
}

.service-item {
position: relative;
border-top: 0.03125rem solid rgba(36, 81, 109, 0.3);
/* 0.5px from Figma */
padding: 1.25rem 0 5rem;
/* 20px top, 80px bottom from Figma */
}

.service-item:last-child {
border-bottom: none;
/* Remove bottom border for last item */
}

.service-content {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-sm);
}

.service-title {
font-family: var(--font-body);
font-weight: 700;
font-size: 0.9375rem;
/* 15px from Figma */
line-height: 1.22;
/* 18.3px from Figma */
letter-spacing: -0.0422rem;
/* -0.675px from Figma */
color: var(--color-primary);
margin: 0;
flex: 1;
}

.service-title-line {
display: block;
}

.service-toggle {

/* 27px from Figma */
height: auto;
border-radius: 0.844rem;
/* 13.5px from Figma */
background: transparent;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
}

.service-arrow {
width: 1rem;
/* 10.594px from Figma */
height: auto;
/* 5.781px from Figma */
transition: transform 0.3s ease;
max-width: 100%;
}

/* Service Details - Expandible Content */
.service-details {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: all 0.4s ease;
margin-top: 0;
}

.service-details[aria-hidden="false"] {
max-height: 12.5rem;
/* 200px - sufficient for lorem text */
opacity: 1;
margin-top: var(--space-md);
}

.service-description {
font-family: var(--font-body);
font-weight: 400;
font-size: 0.875rem;
/* 14px */
line-height: 1.5;
/* 21px */
color: rgba(36, 81, 109, 0.8);
/* Slightly lighter than main color */
margin: 0;
padding: 0rem 0;
}

/* Active state - Arrow rotation */
.service-toggle[aria-expanded="true"] .service-arrow {
transform: rotate(180deg);
/* -90deg from initial 90deg = 270deg total */
}

/* SVG Background Container */
.services-bg-container {
position: absolute;
right: -5%;
top: 50%;
transform: translateY(-50%) rotate(270deg);
width: 3.75rem;
/* 60px */
height: 9.916rem;
/* 158.666px */
opacity: 0.8;
z-index: 1;
}

.services-bg-svg {
width: 100%;
height: 100%;
}

/* SVG Stroke Animation Classes */
.svg-path-main,
.svg-path-diamond,
.svg-path-accent {
stroke-dasharray: inherit;
stroke-dashoffset: inherit;
}

.services-bg-container.animate .svg-path-main {
animation: strokeDraw 2s ease-in-out forwards;
}

.services-bg-container.animate .svg-path-diamond {
animation: strokeDraw 1.5s ease-in-out 0.3s forwards;
}

.services-bg-container.animate .svg-path-accent {
animation: strokeDraw 1.2s ease-in-out 0.6s forwards;
}

/* Stroke drawing animation keyframes */
@keyframes strokeDraw {
to {
 stroke-dashoffset: 0;
}
}

/*
* SERVICES SECTION
* Following rules: Mobile-first, relative units, semantic structure
*/
.services-section {
background-color: #D9E1E7;
overflow: hidden;
}

/* SVG Background Container - Updated with correct SVG dimensions */
.services-svg-container {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 140%;
max-width: 90rem;
/* 1440px from correct SVG */
/* height: 17.8125rem; */
/* 285px from correct SVG */
z-index: 1;
opacity: 0.6;
}

.services-svg-bg {
width: 100%;
height: 100%;
pointer-events: none;
}

/* SVG Stroke Animation */
.svg-stroke-path {
stroke-dasharray: inherit;
stroke-dashoffset: inherit;
}

.services-svg-container.animate .svg-stroke-path:nth-child(1) {
animation: strokeDrawServices 2.5s ease-in-out forwards;
}

.services-svg-container.animate .svg-stroke-path:nth-child(2) {
animation: strokeDrawServices 2.5s ease-in-out 0.15s forwards;
}

.services-svg-container.animate .svg-stroke-path:nth-child(3) {
animation: strokeDrawServices 2.5s ease-in-out 0.3s forwards;
}

.services-svg-container.animate .svg-stroke-path:nth-child(4) {
animation: strokeDrawServices 2.5s ease-in-out 0.45s forwards;
}

.services-svg-container.animate .svg-stroke-path:nth-child(5) {
animation: strokeDrawServices 3s ease-in-out 0.6s forwards;
}

.services-svg-container.animate .svg-stroke-path:nth-child(6) {
animation: strokeDrawServices 2.5s ease-in-out 0.75s forwards;
}

.services-svg-container.animate .svg-stroke-path:nth-child(7) {
animation: strokeDrawServices 2.5s ease-in-out 0.9s forwards;
}

.services-svg-container.animate .svg-stroke-path:nth-child(8) {
animation: strokeDrawServices 2.5s ease-in-out 1.05s forwards;
}

.services-svg-container.animate .svg-stroke-path:nth-child(9) {
animation: strokeDrawServices 2.5s ease-in-out 1.2s forwards;
}

.services-svg-container.animate .svg-stroke-path:nth-child(10) {
animation: strokeDrawServices 2.5s ease-in-out 1.35s forwards;
}

/* Services stroke animation keyframes */
@keyframes strokeDrawServices {
to {
 stroke-dashoffset: 0;
}
}

/* Services Items Grid */
.services-items-grid {
position: relative;
z-index: 2;
margin-top: 3rem;
/* Space for SVG background */
}

.services-row {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
margin-bottom: var(--space-lg);
}

.service-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.875rem;
/* 30px from Figma */
padding: 1rem 0;
border-top: 0.03125rem solid rgba(18, 18, 18, 0.5);
/* 0.5px from Figma */
}

.service-card:last-child {
border-bottom: 0.03125rem solid rgba(18, 18, 18, 0.5);
}

.service-icon {
width: 2.6875rem;
/* 43px from Figma */
height: 2.6875rem;
flex-shrink: 0;
}

.service-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}

.service-name {
font-family: var(--font-body);
font-weight: 700;
font-size: 0.9375rem;
/* 15px from Figma */
line-height: 1.22;
/* 18.3px from Figma */
letter-spacing: -0.0422rem;
/* -0.675px from Figma */
color: var(--color-primary);
margin: 0;
}

/*
* RESPONSIVE DESIGN - Mobile First Approach
*/

/* Tablet Styles */
@media (min-width: 768px) {
:root {
 --container-padding: 2rem;
 --header-height: 5rem;
}

.header-container {
}

.logo-image {
 width: 10rem;
}

.hero-title {
 font-size: 4.5rem;
 /* 72px for tablet */
 letter-spacing: -0.15625rem;
 /* -2.5px */
}

.hero-subtitle {
 font-size: 1.625rem;
 /* Tablet: 26px */
 letter-spacing: -0.05rem;
 /* -0.8px */
}

.scroll-indicator {
 right: var(--container-padding);
 bottom: var(--space-xl);
}

.scroll-icon {
 width: 3rem;
 height: 3rem;
}

/* Company Section - Tablet */
.company-info-section {
 min-height: 30rem;
 /* Increased height for tablet */
}

.company-info-text {
 flex-direction: row;
 gap: 2.875rem;
 /* 46px from Figma */
 max-width: var(--container-max);
}

.company-info-main {
 font-size: 1.75rem;
 /* 28px */
}

.company-info-secondary {
 font-size: 1.375rem;
 /* 22px */
}

.services-grid {
 grid-template-columns: 1fr 1fr;
 gap: 2.8125rem;
 /* 45px from Figma */
}

/* Services Section - Tablet */
.services-svg-container {
 top: -2rem;
 height: 20rem;
 
 /* 1440px from correct SVG */
}

.services-row {
 grid-template-columns: 1fr 1fr 1fr;
 gap: 2.375rem;
 /* 38px from Figma */
}

.service-card {
 padding: 1.75rem 0;
 border: none;
}

.service-icon {
 width: 3rem;
 height: 3rem;
}

/* Cases Slider - Tablet */
.slider-nav-container {
 gap: 1.5rem;
}

.nav-tab {
 width: auto;
 min-width: auto;
}

.nav-tab-text {
 font-size: 1rem;
 white-space: nowrap;
}
}

/* Desktop Styles */
@media (min-width: 992px) {
:root {
 --container-padding: 3rem;
}

.header-container {
 
 /* Exact from Figma */
}

.header-nav {
 display: flex;
 /* position: absolute; */
 left: 50%;
 /* transform: translateX(-50%); */
 gap: 3rem;
}

.nav-list {
 gap: 2.5rem;
 /* 23px from Figma */
}

.header-actions {
 display: flex;
}

.mobile-menu-toggle {
 display: none;
}

.hero {
 height: 100vh;
 /* 901px from Figma */
 min-height: 600px;
 max-height: 780px;
}

.hero-content {
 padding: 8rem 0;
 /* Adjusted top padding */
 
 /* 99px from Figma */
 min-height: auto;
}

.hero-title {
 font-size: 6.25rem;
 /* 100px from Figma */
 line-height: 1;
 /* 1.1 from Figma = 110px */
 letter-spacing: -0.28125rem;
 /* -4.5px from Figma */
 margin-bottom: 2rem;
}

.hero-subtitle-wrapper {
 
 /* Reset bottom positioning */
 
 /* 415.5px from Figma with adjustments */
 
 /* 99px from Figma */
 
 /* 835px from Figma */
 max-width: 52.1875rem;
}

.hero-subtitle {
 font-size: 2rem;
 /* 35px from Figma */
 line-height: 1.2;
 /* 1.2 from Figma */
 letter-spacing: -0.0625rem;
 /* -1px from Figma */
 text-align: left;
 max-width: 90%;
}

.scroll-indicator {
 right: 2rem;
 /* Aligned with header padding */
 bottom: 02rem;
 /* Aligned with hero-subtitle level */
}

.scroll-icon {
 width: 3.5rem;
 height: 3.5rem;
}

/* Company Section - Desktop */
.company-info-section {
 min-height: 26.875rem;
 /* 430px exact from Figma */
}

.company-info-content {
 padding:  6.25rem;
 /* 100px padding from Figma */
}

.company-info-text {
 flex-direction: row;
 gap: 2.875rem;
 /* 46px from Figma */
}

.company-info-main {
 font-size: 2.1875rem;
 /* 35px from Figma */
 line-height: 2.845rem;
 /* 45.5px from Figma */
 letter-spacing: -0.0391rem;
 /* -0.625px from Figma */
}

.company-info-secondary {
 font-size: 1.5625rem;
 /* 25px from Figma */
 line-height: 2.095rem;
 /* 33.52px from Figma */
}

.company-container {
 padding: 0 6.25rem;
 /* 100px exact Figma padding */
}

.services-grid {
 grid-template-columns: 1fr 1fr;
 gap: 2.8125rem;
 /* 45px from Figma */
 justify-content: center;
}

.service-item {
 padding: 1.25rem 0 5rem;
 /* Exact from Figma */
 width: 34.5rem;
 /* 552px from Figma */
}

.services-bg-container {
 right: -3.5%;
 width: 3.75rem;
 /* 60px from Figma */
 height: 9.916rem;
 /* 158.666px from Figma */
}

.services-section {
 padding-top: 8rem;
}

/* Services Section - Desktop */
.services-svg-container {
 top: -3rem;
 height: 17.8125rem;
 /* 285px exact from correct SVG */
 
 /* 1440px from correct SVG */
}

.services-items-grid {
 margin-top: 8rem;
 max-width: var(--container-max);
 /* 1225px from Figma */
 margin-left: auto;
 margin-right: auto;
}

.services-row {
 grid-template-columns: repeat(2, 1fr);
 gap: 0.375rem;
 /* 38px from Figma */
 margin: 0;
 max-width: 960px;
 margin-inline: auto;
 gap: 1rem 5rem;
}

.service-card {
 padding: 1.75rem 0 2rem;
 /* Exact Figma spacing */
 max-width: 95%;
 /* 383px from Figma */
 border-bottom: none !important;
}

.service-icon {
 width: 2.6875rem;
 /* 43px from Figma */
 height: 2.6875rem;
}

.service-name {
 
 /* 220px from Figma for long titles */
 font-size: 1.2rem;
}

/* Cases Slider - Desktop */
.cases-slider-nav {
 padding: 0 4.375rem;
 /* Exact Figma padding */
 padding-bottom: 3rem;
}

.slider-nav-container {
 flex-direction: row;
 gap: 1.25rem;
 /* 20px from Figma */
 align-items: flex-end;
 max-width: 74.375rem;
 /* 1190px from Figma */
}

.nav-tab {
 width: auto;
 min-width: auto;
}

.nav-tab-text {
 font-size: 1rem;
 /* 16px from Figma */
 white-space: nowrap;
 padding-bottom: 0.5rem;
}

.nav-tab-indicator {
 width: 100%;
}

.nav-tab.active .nav-tab-indicator {
 width: 100%;
}

.slider-nav-arrow {
 right: 4.375rem;
 /* Aligned with container padding */
 bottom: 3rem;
 width: 3.75rem;
 /* 60px from Figma */
 height: 9.916rem;
 /* 158.666px from Figma */
}
}

/*
* CASES STUDY SLIDER SECTION
* Following rules: Mobile-first, relative units, semantic structure
*/
/*
* VIDEO HOME SECTION
* Replaces Cases Study Slider
*/
.video-home-section {
position: relative;
width: 100%;
min-height: 28.5rem;
/* 600px */
max-height: 67.5rem;
/* 1080px */
overflow: hidden;
display: flex;
align-items: flex-end;
padding: 4rem 0rem;
}

@media (min-width: 992px){
 
.video-home-section {
min-height: 35rem;
}
}

@media (min-width: 1440px){
.hero-bg{
 object-position: center;
}
}

.video-home-container {
position: relative;
width: 100%;
height: 100%;
}

.video-home-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
}

.video-home-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
pointer-events: none;
}

.video-home-content {
top: 0;
left: 0;
width: 100%;
z-index: 2;
}

.video-home-text-group {

/* Figma: top 498px, left 84px. Using percentages for responsiveness */
position: relative;
display: flex;
flex-direction: column;
}

.video-home-text {
font-family: var(--font-title);
font-weight: 500;
font-size: 4.6875rem;
/* 75px */
line-height: 1.1;
color: var(--color-tertiary);
margin: 0;
white-space: nowrap;
}

@media (max-width: 992px) {
.video-home-text {
 font-size: 3rem;
}
}

@media (max-width: 768px) {
.video-home-text {
 font-size: 2rem;
 white-space: normal;
}

.video-home-text-group {
 left: var(--container-padding);
 right: var(--container-padding);
}
}

/*
* PRODUCTS SECTION
* Following rules: Mobile-first, relative units, semantic structure
*/
.products-section {
background-color: #ef983f;
overflow: hidden;
padding-top: var(--space-xxl);
padding-bottom: var(--space-xxl);
}

/* Background Image - Following rules: img element instead of background-image */
.products-bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center right;
opacity: 0.3;
z-index: 1;
pointer-events: none;
}

/* Main Grid Layout - Using CSS Grid instead of absolute positioning */
.products-main-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-rows: 1fr auto;
grid-template-columns: 1fr;
min-height: 43.25rem;
/* 900px from Figma */
padding: var(--space-xl) var(--container-padding);
}

/* Content Area */
.products-content-area {
display: flex;
align-items: flex-start;
justify-content: flex-start;
padding-top: var(--space-xl);
}

.products-content {
width: 100%;
max-width: 70rem;
/* 1120px max width for readability */
}

/* Products Title - now uses .section-title.section-title--white */

/* Products Description */
.products-description {
display: flex;
flex-direction: column;
gap: 4rem;
/* 46px from Figma */
}

.products-main-text {
font-family: var(--font-title);
font-weight: 100;
font-size: 1.75rem;
/* Mobile: 28px */
line-height: 1.2;
color: #ffffff;
margin: 0;
/* -3.15px from Figma */
}

.products-cta-text {
font-family: var(--font-body);
font-weight: 700;
/* Bold for main text */
font-size: 1.075rem;
/* Mobile: 22px */
line-height: 1.3;
color: #faf7f2;
/* White color from Figma */
margin: 0;
letter-spacing: -0.0390625rem;
/* -0.625px from Figma */
}

.products-cta-content {
display: flex;
align-items: center;
gap: 0.5rem;
/* 8px spacing between elements */
flex-wrap: wrap;
justify-content: space-between;
position: relative;
padding-left: 1.8rem;
}
@media (min-width: 992px){
 
.products-cta-content {
 padding-left: 3.8rem;
}
}

.products-cta-content > *,
.products-cta-content > * > * {
align-items: center;
}

.products-search-icon {
width: 1.25rem;
/* 20px */
height: 1.25rem;
color: #faf7f2;
flex-shrink: 0;
position: absolute;
left: 0;
top: 0;
}

.products-cta-secondary {
font-weight: 400;
/* Normal weight for secondary text */
}

.products-cta-arrow {
width: 1.5rem;
/* 24px */
height: 1.5rem;
margin-left: 0.25rem;
flex-shrink: 0;
opacity: 1;
transition: transform 0.3s ease;
}

.products-cta-content:hover .products-cta-arrow {
transform: translateX(0.5rem);
}



/* Partners Area - Positioned with Grid */
.products-partners-area {
display: flex;
justify-content: center;
align-items: flex-end;
padding-bottom: var(--space-xl);
overflow: hidden;
}

.products-partners {
width: 100%;

/* Full width for marquee */
position: relative;
left: -15px;
width: calc(100% + 30px);
padding-block: 5rem 0;
}

/* Marquee Container and Animation */
.marquee-container {
width: 100%;
overflow: hidden;
position: relative;
}

.marquee-track {
display: flex;
gap: 2.875rem;
/* 46px from Figma */
animation: marquee 30s linear infinite;
width: fit-content;
}

/* Pause animation on hover */
.marquee-track:hover {
animation-play-state: paused;
}

@keyframes marquee {
0% {
 transform: translateX(0);
}

100% {
 transform: translateX(-50%);
}
}

.partner-name {
display: flex;
flex-direction: column;
justify-content: center;
flex: 0 0 auto;
position: relative;
}

.partner-name p {
font-family: var(--font-body);
/* Inter */
font-weight: 700;
/* Bold */
font-size: 1.25rem;
/* 20px */
line-height: 1.2;
color: #faf7f2;
margin: 0;
letter-spacing: -0.0421875rem;
/* -0.675px */
white-space: nowrap;
}

/* Tablet Styles - Products */
@media (min-width: 768px) {
.products-main-grid {
 padding: var(--space-xxl) var(--container-padding);
 grid-template-rows: 1fr auto;
}

.products-main-text {
 font-size: 2.5rem;
 /* 40px */
}

.products-cta-text {
 font-size: 1.5rem;
 /* 24px */
}

.products-search-icon {
 width: 1.375rem;
 /* 22px */
 height: 1.375rem;
}

.products-cta-arrow {
 width: 1.75rem;
 /* 28px */
 height: 1.75rem;
}

.marquee-track {
 gap: var(--space-lg);
}

.partner-name {
 min-width: auto;
}
}

/* Desktop Styles - Products */
@media (min-width: 992px) {
.products-container {
 min-height: 0;
 /* 900px exact from Figma */
}

/* Background image exact positioning for desktop */
.products-bg-image {
 object-position: 35% center;
 /* Adjusted positioning to match Figma */
}

.products-main-grid {
 padding: 6.375rem 6.25rem var(--space-xxl);
 /* 102px top, 100px sides from Figma */
 grid-template-columns: 1fr;
 grid-template-rows: 1fr auto;
 grid-template-areas:
   "content"
   "partners";
}

.products-content-area {
 grid-area: content;
 padding-top: 0;
 align-items: flex-start;
}

.products-content {
 max-width: 70.5625rem;
 /* 1129px from Figma */
}

.products-main-text {
 font-size: 2.2rem;
 /* 63px from Figma */
 line-height: 1.2;
 /* 67.41px from Figma */
 letter-spacing: 0;
 /* -3.15px from Figma */
 max-width: 70%;
}

.products-cta-text {
 font-size: 1.4rem;
 /* 35px from Figma */
 line-height: 0.958;
 /* 33.52px from Figma */
 letter-spacing: -0.0390625rem;
 /* -0.625px from Figma */
}

.products-search-icon {
 width: 2.75rem;
 /* 28px */
 height: 2.75rem;
}

.products-cta-arrow {
 width: 4rem;
 /* 32px */
 height: auto;
 align-self: flex-end;
}

/* Partners positioned at bottom */
.products-partners-area {
 grid-area: partners;
 padding-block: 5rem;
 /* 55px exact from Figma */
}

.products-partners {
 max-width: 100%;
 /* Full width for marquee */
 padding-top: 8rem;
}

.marquee-track {
 gap: 3.5rem;
 /* 56px increased gap for desktop */
}

.partner-name {
 min-width: auto;
 max-width: none;
}
}

/*
* INFO SECTION (Generic styles for Partnerships, About Us, etc.)
* Uses unified .section classes: .section--py, .section--bg-white
* Titles use .section-title class
*/

.info-content {
display: flex;
flex-direction: column;
gap: var(--space-md);
width: 100%;
}

.info-subtitle {
font-family: var(--font-body);
font-size: 1.25rem;
/* 20px */
line-height: 1.3;
font-weight: 700;
/* Bold */
margin: 0 0 1rem;
color: #24516d;
}

.info-description {
font-family: var(--font-body);
font-size: 1.15rem;
/* 20px */
line-height: 1.3;
font-weight: 400;
/* Regular */
margin: 0;
color: #24516d;
}

.info-arrow {
display: flex;
justify-content: flex-end;
margin-top: var(--space-lg);
}

.info-arrow-icon {
width: 4.75rem;
/* 60px */
height: auto;

/* Pointing down/right? Figma showed 270deg rotation of group, need to check visual */
margin-block: 0;
transition: transform 0.3s ease;
}

.info-arrow-link {
display: inline-block;
text-decoration: none;
transition: transform 0.3s ease;
}

.info-arrow-link:hover .info-arrow-icon {
transform: translateX(0.5rem);
}

/* Desktop Styles - Info Section */
@media (min-width: 992px) {
.info-content {
 flex-direction: row;
 align-items: flex-start;
 justify-content: space-between;
}

.info-subtitle {
 flex: 0 0 46%;
 /* ~576px / 1240px */
 max-width: 36rem;
}

.info-description {
 flex: 0 0 50%;
 /* ~618px / 1240px */
 max-width: 38.625rem;
}

.info-arrow {
 position: relative;
 right: 0;
 bottom: -3rem;
 /* Positioned partially outside or at bottom edge */
}
}

/*
* VIDEO SECTION
* Following rules: Mobile-first, relative units, semantic structure
*/
.video-section {
position: relative;
width: 100%;

/* 900px from Figma */
overflow: hidden;
}

.video-container {
position: relative;
width: 100%;
height: 100%;
padding-block: 4rem;
}

/* Video Background */
.video-background {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 1;
object-fit: cover;
}

/* Video Fallback Image */
.video-fallback {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}

/* Video Overlay */
.video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #24516d;
/* Primary color from Figma */
opacity: 1;
/* Darker overlay for better text readability */
z-index: 2;
}

/* Background Pattern */
.video-pattern {
position: absolute;
top: -8.25rem;
/* -132px from Figma */
left: 3.75rem;
/* 60px from Figma */
width: 140.25rem;
/* 2244px from Figma */
height: 68.5rem;
/* 1096px from Figma */
z-index: 3;
opacity: 0.3;
}

.pattern-image {
width: 100%;
height: 100%;
object-fit: contain;
}

/* Content Container */
.video-content {
position: relative;
width: 100%;

/* 813px from Figma */
padding: 0 var(--container-padding);
z-index: 4;
text-align: center;
}

/* Video Title */
.video-title {
font-family: var(--font-title);

/* Demi weight from Figma */
font-weight: 500;
font-size: 2rem;
/* Mobile: 40px */
line-height: 1.2;
color: #f3f3f3;
/* Color from Figma */
margin-bottom: var(--space-xl);
letter-spacing: -0.05rem;
}

/* CTA Button */
.video-cta {
display: flex;
justify-content: center;
}
@media (min-width: 992px){
.video-cta {
 justify-content: flex-start;
}
}

.cta-button {
display: flex;
align-items: center;
gap: var(--space-sm);
text-decoration: none;
cursor: pointer;
}

.cta-text {
font-family: var(--font-body);
font-weight: 700;
/* Bold from Figma */
font-size: 1.125rem;
/* Mobile: 18px */
line-height: 1.22;
/* 26.84px from Figma */
color: #74ecff;
/* Cyan color from Figma */
letter-spacing: -0.03rem;
/* -0.55px from Figma */
}

.cta-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
/* 26px from Figma */
height: 2rem;
background-color: #74ecff;
/* Cyan background from Figma */
border-radius: 1.625rem;
/* 26px from Figma */
flex-shrink: 0;
}

.arrow-icon {
width: 0.90625rem;
/* 14.5px from Figma */
height: 0.623rem;
/* 9.97px from Figma */

/* Make arrow black on cyan background */
}

/* Video Controls */
.video-controls {
position: absolute;
bottom: var(--space-lg);
right: var(--container-padding);
z-index: 5;
}

.video-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
background-color: rgba(255, 255, 255, 0.2);
border: none;
border-radius: 50%;
color: #ffffff;
cursor: pointer;
backdrop-filter: blur(0.625rem);
padding: 0;
}

.video-toggle:hover {
background-color: rgba(255, 255, 255, 0.3);
}

.video-toggle svg {
width: 3.5rem;
height: 1.5rem;
}

/* Video controls fade animation */
.video-controls {
transition: opacity 0.3s ease;
}

/* CTA button hover effect */
.cta-button:hover .cta-text {
color: #f9b235;
/* Slightly darker cyan on hover */
}

.cta-button:hover .cta-arrow {
background-color: #f9b235;
transform: translateX(0.125rem);
/* Slight move on hover */
}

.cta-arrow {
transition: all 0.3s ease;
}

/* Tablet Styles - Video */
@media (min-width: 768px) {
.video-title {
 font-size: 3.5rem;
 /* 56px */
}

.cta-text {
 font-size: 1.25rem;
 /* 20px */
}

.video-content {
 text-align: left;
 
 /* 434px from Figma */
 
 /* 813px from Figma */
}
}

/* Desktop Styles - Video */
@media (min-width: 992px) {
.video-title {
 font-size: 2.6rem;
 /* 63px from Figma */
 
 /* 67.41px from Figma */
 
 /* -3.15px from Figma */
 
 /* 50px from Figma */
}

.cta-text {
 font-size: 2rem;
 /* 22px from Figma */
 line-height: 1.22;
 /* 26.84px from Figma */
 letter-spacing: -0.034375rem;
 /* -0.55px from Figma */
}

/* Content positioning exact from Figma */
.video-content {
 
 /* 249px from Figma */
 
 /* 434px from Figma */
 transform: none;
 max-width: 50.8125rem;
 /* 813px from Figma */
 justify-content: flex-start;
 left: 24%;
 padding-block: 4rem;
}

/* Pattern exact positioning */
.video-pattern {
 top: -8.25rem;
 /* -132px exact */
 left: 3.75rem;
 /* 60px exact */
 width: 140.25rem;
 /* 2244px exact */
 height: 68.5rem;
 /* 1096px exact */
}
}

/*
* FOOTER
* Following rules: Mobile-first, relative units, semantic structure
*/
.footer {
position: relative;
width: 100%;
/* 806px from Figma */
overflow: hidden;
}

.footer-container {
position: relative;
width: 100%;
height: 100%;
}

/* Footer Background */
.footer-bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
z-index: 1;
}

/* Footer Content */
.footer-content {
position: relative;
width: 100%;
height: 100%;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: var(--space-xl) var(--container-padding);
}

/* Footer Top */
.footer-top {
display: flex;
flex-direction: column;
gap: var(--space-lg);
align-items: center;
padding-bottom: var(--space-lg);
border-bottom: 0.03125rem solid rgba(255, 255, 255, 0.52);
/* 0.5px from Figma */
}

/* Footer Logo */
.footer-logo {
display: flex;
align-items: center;
justify-content: center;
}

.footer-logo-image {
width: 8.75rem;
/* 140px from Figma */
height: 2.5625rem;
/* 41px from Figma */
object-fit: contain;
}

/* Footer Main Navigation */
.footer-main-nav {
width: 100%;
}
.footer-main-nav a {
color: #ffffff;
font-weight: bold;
font-size: 1.2rem;
}

.footer-nav-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-lg);
}

.footer-nav-link {
font-family: var(--font-body);
font-weight: 700;
/* Bold from Figma */
font-size: 1rem;
/* 16px from Figma */
line-height: 1;
/* 16px from Figma */
color: #f3f3f3;
/* Color from Figma */
text-decoration: none;
}

.footer-nav-link:hover {
color: #74ecff;
/* Cyan hover color */
}

/* Footer Main */
.footer-main {
display: flex;
flex-direction: column;
gap: var(--space-xl);
flex: 1;
padding: var(--space-xl) 0;
}

/* Footer Left - Company Info */
.footer-left {
display: flex;
flex-direction: column;
gap: 1.875rem;
/* 30px from Figma */
}

.footer-copyright,
.footer-contact-info,
.footer-legal {
display: flex;
flex-direction: column;
gap: 0.35rem;
}

.footer-legal-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-legal-list a,
.footer-copyright p,
.footer-phone,
.footer-email,
.footer-privacy,
.footer-cookies,
.footer-ethics {
font-family: var(--font-body);
font-weight: 400;
font-size: .9rem;
/* 14px from Figma */
line-height: 1.45;
/* 20.3px from Figma */
color: rgba(242, 242, 242, 0.73);
/* Color from Figma */
margin: 0;
letter-spacing: -0.00875rem;
/* -0.14px from Figma */
color: #ffffff;
}

.footer-legal-list a:hover {
  color: #74ecff;
}

/* Footer Right - Navigation Links */
.footer-right {
display: flex;
grid-template-columns: 1fr;
gap: var(--space-lg);
flex-direction: column;
justify-content: flex-end;
}

@media (min-width: 992px){
  .footer-right {
    flex-direction: row;
  }
}

.footer-column {
display: flex;
flex-direction: column;
width: 155px;
}

.footer-links-list {
display: flex;
flex-direction: column;
/* 14.898px from Figma */
justify-content: flex-start;
}

.footer-links-list li {
 margin-bottom: 1rem;
}
.footer-links-list li a{
color: rgba(242, 242, 242, 0.73);
/* color: #ffffff; */
font-size: 0.9rem;
border-bottom: 1px solid transparent;
line-height: 1.2;
display: inline-block;
font-weight: bold;
}
.footer-links-list li.current-menu-item a{
}

.footer-link {
font-family: var(--font-body);
font-weight: 400;
font-size: 0.875rem;
/* 14px from Figma */
line-height: 1.357;
/* 19px from Figma */
color: rgba(255, 255, 255, 0.73);
/* Color from Figma */
text-decoration: none;
}

.footer-link:hover {
color: #74ecff;
}

/* Footer Bottom - Contact CTA */
.footer-bottom {
position: relative;
margin-top: auto;
}

.footer-contact-cta {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-lg) 0;
}

.footer-contact-link {
display: flex;
align-items: center;
gap: var(--space-sm);
text-decoration: none;
position: relative;
}

.footer-contact-text {
font-family: var(--font-title);
font-weight: 300;
/* Demi from Figma */
font-size: 2.7rem;
/* Mobile: 56px */
line-height: 1.07;
/* 96.3px from Figma */
color: #74ecff;
/* Cyan color from Figma */
letter-spacing: -0.1rem;
/* -4.5px from Figma */
-webkit-font-smoothing: antialiased;
}

.footer-contact-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 6.125rem;
/* 162px from SVG */
height: 3.75rem;
/* 60px from SVG */
}

.footer-arrow-icon {
width: 100%;
height: 100%;
object-fit: contain;
filter: none;
/* Remove any brightness filters */
}

.footer-contact-underline {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.5rem;
/* 3px from Figma */
background-color: #74ecff;
transition: transform 0.3s ease;
transform-origin: left;
}

/* Footer hover effects */
.footer-nav-link,
.footer-link {
transition: color 0.3s ease;
}

.footer-contact-text {
transition: color 0.3s ease;
}

.footer-contact-link:hover .footer-contact-text {
color: #5dd4e8;
/* Slightly darker cyan on hover */
}

/* Tablet Styles - Footer */
@media (min-width: 768px) {
.footer-top {
 flex-direction: row;
 justify-content: space-between;
 align-items: center;
}

.footer-nav-list {
 justify-content: flex-end;
 gap: 2rem;
}

.footer-main {
 flex-direction: row;
 gap: 8.125rem;
 /* 130px from Figma */
 align-items: flex-start;
 justify-content: space-between;
}

.footer-left {
 flex: 0 0 26.25rem;
 /* 420px from Figma */
}

.footer-right {
 flex: 1;
 grid-template-columns: repeat(2, 1fr);
 gap: 1.125rem;
 /* 18px from Figma */
}

.footer-contact-text {
 font-size: 4.5rem;
 /* 72px */
}
}

/* Desktop Styles - Footer */
@media (min-width: 992px) {
.footer-content {
 padding: 3.25rem 5rem 3.5625rem;
 /* Exact Figma padding */
}

.footer-top {
 padding: 0;
 /* 20px padding */
 /* 36.5px from Figma */
}

.footer-logo {
 position: static;
 left: 0;
 padding-block: 1rem;
}

.footer-nav-list {
 gap: 2rem;
 /* Spacing between nav items */
}
.footer-nav-list li {
 width: 155px;
}

.footer-main {
 padding: 2rem 0;
 margin: 0;
 /* 210px left margin from Figma */
 gap: 0.125rem;
 /* 130px from Figma */
}

.footer-left {
 flex: 0 0 26.25rem;
 /* 420px from Figma */
 max-width: 35%;
}

.footer-right {
 flex: 1;
 grid-template-columns: repeat(4, 6.875rem);
 /* 110px each column from Figma */
 gap: 2rem;
 /* 18px from Figma */
 max-width: 65%;
 /* 660px from Figma */
 flex-direction: row;
}

.footer-contact-text {
 font-size: 4.625rem;
 /* 90px from Figma */
 line-height: 1.07;
 /* 96.3px from Figma */
 letter-spacing: -0.28125rem;
 /* -4.5px from Figma */
}

.footer-contact-cta {
 bottom: 3.5625rem;
 /* 57px from Figma */
 left: 4.375rem;
 /* 70px from Figma */
 right: 4.375rem;
 /* 70px from Figma */
 justify-content: flex-start;
 position: static;
}

.footer-contact-link {
 display: flex;
 align-items: center;
 justify-content: space-between;
 width: 100%;
 position: relative;
}

.footer-contact-arrow {
 position: absolute;
 right: 0;
 top: 50%;
 transform: translateY(-50%);
 width: 10rem;
}
}

/*
* COMPANY PAGE SPECIFIC STYLES
* Following rules: Mobile-first, relative units, semantic structure
*/

/* Company Hero Modifications */
.company-hero .hero-title {
max-width: 62.5rem;
/* 1000px from Figma */
}

.company-hero-title {
font-family: var(--font-title);
font-weight: 600;
font-size: 3.5rem;
/* Mobile: 56px */
line-height: 1.1;
letter-spacing: -0.05em;
color: #faf7f2;
/* White color from Figma */
}

/* Company Introduction Section */
.company-intro-section {
position: relative;
padding: var(--space-xxl) 0;
background-color: var(--white);
}

.company-intro-container {
position: relative;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-padding);
}

.company-intro-content {
display: flex;
justify-content: center;
align-items: center;
}

.company-intro-text {
width: 100%;
max-width: 76.25rem;
/* 1220px from Figma */
display: flex;
flex-direction: column;
gap: 2.5rem;
/* 40px from Figma */
}

.company-intro-main {
font-family: var(--font-body);
font-weight: 400;
font-size: 1.5rem;
/* Mobile: 24px */
line-height: 1.3;
color: var(--color-primary);
margin: 0;
letter-spacing: -0.0391rem;
/* -0.625px from Figma */
}

.company-intro-main strong {
font-weight: 700;
}

.company-intro-secondary {
font-family: var(--font-body);
font-weight: 400;
font-size: 1.125rem;
/* Mobile: 18px */
line-height: 1.4;
color: var(--color-primary);
margin: 0;
}

/* Company Images Section */
.company-images-section {
position: relative;
background-color: var(--white);
}

.company-image-container {
position: relative;
width: 100%;
height: 23.8125rem;
/* 381px from Figma for second image */
}

.company-image-container:first-child {
height: 55.0625rem;
/* 881px from Figma for first image */
}

.company-section-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}

/* Mission & Values Section */
.mission-values-section {
position: relative;
background-color: var(--white);
padding: var(--space-xxl) 0;
}

.mission-values-container {
position: relative;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-padding);
}

.mission-values-content {
display: flex;
flex-direction: column;
gap: 6.25rem;
/* 100px from Figma */
max-width: none;
/* Full width to accommodate desktop layout */
}

.mission-item,
.values-item {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}

.mission-title,
.values-title {
font-family: var(--font-body);
font-weight: 700;
font-size: 0.9375rem;
/* 15px from Figma */
line-height: 1.22;
/* 18.3px from Figma */
letter-spacing: -0.0422rem;
/* -0.675px from Figma */
color: var(--color-primary);
margin: 0;
}

.mission-description,
.values-description {
font-family: var(--font-body);
font-weight: 700;
font-size: 1.125rem;
/* Mobile: 18px */
line-height: 1.4;
color: var(--color-primary);
margin: 0;
letter-spacing: -0.0391rem;
/* -0.625px from Figma */
}

/* Client Appreciation Section */
.client-appreciation-section {
position: relative;
padding: var(--space-xxl) 0;
background-color: var(--white);
}

.client-appreciation-container {
position: relative;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-padding);
}

.client-appreciation-header {
margin-bottom: 6.25rem;
/* 100px from Figma */
text-align: center;
}

.client-appreciation-title {
font-family: var(--font-title);
font-weight: 600;
font-size: 3.5rem;
/* Mobile size */
line-height: 1.1;
letter-spacing: -0.05em;
color: var(--color-primary);
margin: 0;
}

.client-services-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0;
max-width: 77.5rem;
/* 1240px from Figma */
margin: 0 auto;
}

.client-services-grid .service-item {
position: relative;
border-top: 0.03125rem solid rgba(36, 81, 109, 0.3);
padding: 1.25rem 0 5rem;
}

.client-services-grid .service-item:last-child {
border-bottom: none;
}

/* Company CTA Section Modifications */
.company-cta-section {
background-color: var(--color-primary);
/* Blue background instead of video */
}

.company-cta-overlay {
background-color: transparent;
/* Remove overlay for blue background */
}

.company-cta-content {
position: absolute;
z-index: 4;
width: 100%;
max-width: 50.8125rem;
/* 813px from Figma */
padding: 0 var(--container-padding);
text-align: center;
/* Center aligned for mobile */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.company-cta-title {
font-family: var(--font-title);
font-weight: 600;
font-size: 2.5rem;
/* Mobile: 40px */
line-height: 1.07;
color: #f3f3f3;
margin-bottom: 3.125rem;
/* 50px from Figma */
letter-spacing: -0.196875rem;
/* -3.15px from Figma */
}

/* Tablet Styles - Company */
@media (min-width: 768px) {
.company-hero-title {
 font-size: 5rem;
 /* 80px */
}

.company-intro-main {
 font-size: 1.875rem;
 /* 30px */
}

.company-intro-secondary {
 font-size: 1.375rem;
 /* 22px */
}

.mission-values-content {
 flex-direction: column;
 gap: 6.25rem;
 /* 100px from Figma */
 max-width: 40rem;
 /* 640px from Figma for tablet */
}

.mission-description,
.values-description {
 font-size: 1.25rem;
 /* 20px */
}

.client-appreciation-title {
 font-size: 4.5rem;
}

.client-services-grid {
 grid-template-columns: 1fr 1fr 1fr;
 gap: 2.8125rem;
 /* 45px from Figma */
}

.company-cta-title {
 font-size: 3.5rem;
 /* 56px */
}
}

/* Desktop Styles - Company */
@media (min-width: 992px) {
.company-hero-title {
 font-size: 6.125rem;
 /* 98px from Figma */
 line-height: 6.019rem;
 /* 96.3px from Figma */
 letter-spacing: -0.28125rem;
 /* -4.5px from Figma */
}

.company-intro-main {
 font-size: 2.1875rem;
 /* 35px from Figma */
 line-height: 2.845rem;
 /* 45.5px from Figma */
}

.company-intro-secondary {
 font-size: 1.5625rem;
 /* 25px from Figma */
 line-height: 2.095rem;
 /* 33.52px from Figma */
}

.mission-values-container {
 padding: 0 6.25rem;
 /* 100px from Figma */
}

.mission-values-content {
 flex-direction: column;
 gap: 6.25rem;
 /* 100px from Figma */
 max-width: 40rem;
 /* 640px from Figma */
}

.mission-item,
.values-item {
 flex-direction: row;
 gap: 6.875rem;
 /* 110px from Figma - gap between label and text */
 align-items: flex-start;
}

.mission-title,
.values-title {
 flex-shrink: 0;
 width: 6.875rem;
 /* 110px from Figma - fixed width for labels */
}

.mission-description,
.values-description {
 flex: 1;
 font-size: 1.5625rem;
 /* 25px from Figma */
 line-height: 2.095rem;
 /* 33.52px from Figma */
}

.client-appreciation-container {
 padding: 0 6.25rem;
 /* 100px from Figma */
}

.client-appreciation-title {
 font-size: 6.25rem;
 /* 100px from Figma */
 line-height: 6.019rem;
 /* 96.3px from Figma */
 letter-spacing: -0.28125rem;
 /* -4.5px from Figma */
}

.client-services-grid {
 grid-template-columns: 1fr 1fr;
 gap: 2.8125rem;
}

.client-services-grid .service-item {
 width: 24rem;
 /* 385px from Figma */
}

.company-cta-content {
 text-align: left;
 /* Left aligned as per Figma */
 top: 15.5625rem;
 /* 249px from Figma */
 left: 27.125rem;
 /* 434px from Figma */
 transform: none;
}

.company-cta-title {
 font-size: 3.9375rem;
 /* 63px from Figma */
 line-height: 4.213rem;
 /* 67.41px from Figma */
 letter-spacing: -0.196875rem;
 /* -3.15px from Figma */
}
}

/*
* CONTACT PAGE SPECIFIC STYLES
* Following rules: Mobile-first, relative units, semantic structure
*/

/* Contact Hero Section - Where to find us */
.contact-hero-section {
position: relative;
min-height: 100vh;
background-color: var(--white);
overflow: hidden;
}

.contact-hero-container {
position: relative;
width: 100%;
height: 100%;
min-height: 100vh;
}

.hero-bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 1;
}

.contact-hero-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 100%;
max-width: var(--container-max);
padding: 0 var(--container-padding);
text-align: center;
}

.contact-hero-text {
display: flex;
flex-direction: column;
gap: var(--space-lg);
align-items: center;
}

.contact-hero-title {
font-family: var(--font-title);
font-weight: 600;
font-size: 3.5rem;
/* Mobile: 56px */
line-height: 1.1;
color: var(--color-primary);
margin: 0;
letter-spacing: -0.25rem;
/* -4px from Figma */
text-align: left;
}

.contact-hero-description {
font-family: var(--font-body);
font-weight: 400;
font-size: 1.125rem;
/* Mobile: 18px */
line-height: 1.4;
color: var(--color-primary);
margin: 0;
letter-spacing: -0.0391rem;
/* -0.625px from Figma */
text-align: left;
max-width: 28.5625rem;
/* 457px from Figma */
}

/* Contact Map Section */
.contact-map-section {
position: relative;
width: 100%;
height: 41.25rem;
/* 660px from Figma */
overflow: hidden;
background-color: var(--white);
}

.contact-map-container {
position: relative;
width: 100%;
height: 100%;
}

/* Google Maps Embed Styles */
.google-map-embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
outline: none;
background-color: var(--color-light-gray);
}

/* Desktop responsivity for map */
@media (min-width: 768px) {
.contact-map-section {
 height: 31.25rem;
 /* 500px for tablet+ */
}
}

@media (min-width: 1200px) {
.contact-map-section {
 height: 41.25rem;
 /* 660px for desktop as per Figma */
}
}

/* Contact Section */
.contact-section {
position: relative;
background-color: #f3f1e9;
/* Light background from Figma */
min-height: 100vh;
padding: var(--space-xl) 0;
}

.contact-container {
position: relative;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-padding);
}

.contact-content {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-xxl);
border-top: 0.0625rem solid rgba(36, 81, 109, 0.5);
/* Top border from Figma */
padding-top: 3.25rem;
/* 52px from Figma */
}

/* Contact Header (Left Side) */
.contact-header {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-xl);
}

.contact-title-wrapper {
margin-bottom: var(--space-lg);
}

.contact-title {
font-family: var(--font-title);
font-weight: 600;
font-size: 3.5rem;
/* Mobile: 56px */
line-height: 1.1;
color: var(--color-primary);
margin: 0;
letter-spacing: -0.28125rem;
/* -4.5px from Figma */
}

.contact-title-line {
display: block;
}

.contact-description {
margin-bottom: var(--space-xl);
}

.contact-description-text {
font-family: var(--font-body);
font-weight: 400;
font-size: 1.125rem;
/* Mobile: 18px */
line-height: 1.4;
color: var(--color-primary);
margin: 0;
letter-spacing: -0.0391rem;
/* -0.625px from Figma */
}

/* Contact Information */
.contact-info {
display: flex;
flex-direction: column;
gap: var(--space-md);
}

.contact-info-item {
margin: 0;
}

.contact-address,
.contact-email,
.contact-phone {
font-family: var(--font-body);
font-weight: 400;
font-size: 0.9375rem;
/* 15px from Figma */
line-height: 1.3;
color: var(--color-primary);
margin: 0;
letter-spacing: -0.0391rem;
/* -0.625px from Figma */
}

.contact-address strong,
.contact-email strong,
.contact-phone strong {
font-weight: 700;
}

.contact-email-link {
color: var(--color-primary);
text-decoration: underline;
text-decoration-skip-ink: none;
text-underline-position: from-font;
}

.contact-email-link:hover {
text-decoration: none;
}

/* Contact Form (Right Side) */
.contact-form-wrapper {
position: relative;
width: 100%;
}

.contact-form {
display: flex;
flex-direction: column;
gap: 3.0625rem;
/* 49px from Figma */
padding: 0.625rem 0;
/* 10px from Figma */
}

/* Form Fields */
.form-field {
position: relative;
display: flex;
flex-direction: column;
gap: 0.96rem;
/* 15.359px from Figma */
border-bottom: 0.0625rem solid rgba(36, 81, 109, 0.5);
padding-bottom: var(--space-md);
}

.form-field--textarea {
padding-bottom: var(--space-lg);
}

.form-label {
font-family: var(--font-body);
font-weight: 700;
font-size: 0.9375rem;
/* 15px from Figma */
line-height: 1.22;
/* 18.3px from Figma */
color: var(--color-primary);
margin: 0;
letter-spacing: -0.0422rem;
/* -0.675px from Figma */
}

.required {
color: var(--color-primary);
}

.form-input {
font-family: var(--font-body);
font-weight: 400;
font-size: 1.125rem;
/* Mobile: 18px */
line-height: 1.4;
color: var(--color-primary);
background: transparent;
border: none;
outline: none;
padding: 0;
letter-spacing: -0.0391rem;
/* -0.625px from Figma */
}

.form-input::placeholder {
color: var(--color-primary);
opacity: 0.7;
}

.form-input:focus {
outline: none;
}

.form-textarea {
resize: vertical;
min-height: 9.375rem;
/* 150px from Figma */
font-family: var(--font-body);
}

.form-error {
font-family: var(--font-body);
font-size: 0.875rem;
color: #d32f2f;
margin-top: 0.5rem;
display: none;
}

.form-error.active {
display: block;
}

/* Submit Button */
.form-submit {
display: flex;
justify-content: flex-start;
margin-top: var(--space-lg);
}

.submit-button {
display: flex;
align-items: center;
gap: var(--space-sm);
background: transparent;
border: none;
padding: var(--space-sm) 0;
cursor: pointer;
font-family: var(--font-body);
font-weight: 700;
font-size: 1.125rem;
color: var(--color-primary);
transition: opacity 0.3s ease;
}

.submit-button:hover {
opacity: 0.8;
}

.submit-text {
color: #ffffff;
}

.submit-icon {
display: flex;
align-items: center;
justify-content: center;
width: 1.875rem;
/* 30px */
height: 1.875rem;
/* 30px */
background-color: var(--color-primary);
border-radius: 50%;
}

.submit-icon img {
width: 0.875rem;
/* 14px */
height: auto;
filter: brightness(0) invert(1);
/* Make icon white */
}

/* Contact Button Active State */
.contact-button--active .contact-text {
color: var(--color-primary);
}

/* Tablet Styles - Contact */
@media (min-width: 768px) {
.contact-hero-title {
 font-size: 5rem;
 /* 80px */
}

.contact-hero-description {
 font-size: 1.25rem;
 /* 20px */
}

.contact-hero-content {
 text-align: left;
 left: auto;
 right: 3rem;
 transform: translateY(-50%);
}

.contact-hero-text {
 align-items: flex-start;
}

.contact-content {
 flex-direction: row;
 gap: 6.875rem;
 /* 110px from Figma */
 align-items: flex-start;
}

.contact-header {
 width: 34.375rem;
 /* 550px from Figma */
 flex-shrink: 0;
}

.contact-title {
 font-size: 5rem;
 /* 80px */
}

.contact-description-text {
 font-size: 1.25rem;
 /* 20px */
}

.contact-address,
.contact-email,
.contact-phone {
 font-size: 1.125rem;
 /* 18px */
}

.contact-form-wrapper {
 width: 40rem;
 /* 640px from Figma */
 flex-shrink: 0;
}

.form-input {
 font-size: 1.25rem;
 /* 20px */
}
}

/* Desktop Styles - Contact */
@media (min-width: 992px) {
.contact-hero-title {
 font-size: 6.125rem;
 /* 98px from Figma */
 line-height: 6rem;
 /* 96px from Figma */
 letter-spacing: -0.25rem;
 /* -4px from Figma */
}

.contact-hero-description {
 font-size: 1.5625rem;
 /* 25px from Figma */
 line-height: 2.095rem;
 /* 33.52px from Figma */
}

.contact-hero-content {
 right: 0;
 top: 50%;
 left: auto;

 /* 457px from Figma */
 width: 50%;
}

.hero-bg-image {
 width: 50%;
 /* 816px from Figma */
 height: 100%;
 /* 1192px from Figma */
 left: 0;
 /* -143px from Figma */
 top: 0;
 /* -172px from Figma */
}

.contact-map-section {
 height: 41.25rem;
 /* 660px from Figma */
}

.map-bg-image {
 width: 107.625rem;
 /* 1722px from Figma */
 height: 41.25rem;
 /* 660px from Figma */
 left: -7.1875rem;
 /* -115px from Figma */
 object-position: center;
}

.contact-section {
 padding: 5.125rem 0;
 /* 82px from Figma */
}

.contact-container {
 padding: 0 4.375rem;
 /* 70px from Figma */
}

.contact-title {
 font-size: 6.25rem;
 /* 100px from Figma */
 line-height: 6.019rem;
 /* 96.3px from Figma */
 letter-spacing: -0.28125rem;
 /* -4.5px from Figma */
}

.contact-description-text {
 font-size: 1.5625rem;
 /* 25px from Figma */
 line-height: 2.095rem;
 /* 33.52px from Figma */
}

.contact-address,
.contact-email,
.contact-phone {
 font-size: 1.5625rem;
 /* 25px from Figma */
 line-height: 1.2;
}

.form-input {
 font-size: 1.5625rem;
 /* 25px from Figma */
 line-height: 2.095rem;
 /* 33.52px from Figma */
}

.submit-button {
 font-size: 1.25rem;
}
}