@import url('variables.css');

html,body{
  max-width: 100vw;
  overflow-x: hidden;
}

html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body {
  margin:0;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--gradient-header);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
img { max-width:80%; height:auto; }
a { color: var(--color-primary); text-decoration:none; }
a:hover { text-decoration:underline; }
a:focus-visible, button:focus-visible, .btn:focus-visible { outline:3px solid var(--color-accent); outline-offset:2px; }
.skip-link:focus { position:static!important; width:auto; height:auto; padding:8px 16px; background:#000; color:#fff; z-index:999; }

.container { width:100%; max-width: var(--container-max); margin:0 auto; padding:0 var(--space-md); }

header.site-header { position:sticky; top:0; z-index:var(--z-header); }
.header-bar { background: rgba(255,255,255,0.1); backdrop-filter: blur(20px); border-bottom:1px solid rgba(255,255,255,0.2); box-shadow: var(--shadow-sm); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:var(--space-lg); padding: 0; min-height: var(--nav-height); }
.header-bar.condensed .header-inner { min-height: 60px; transition: var(--transition-base); }
.site-branding .logo { display:flex; align-items:center; gap: var(--space-sm); font-weight:600; font-family: var(--font-heading); font-size:1.25rem; letter-spacing:.5px; color: var(--color-text); text-decoration:none; }
.site-branding .logo:hover { text-decoration:none; color: var(--color-primary); }
.site-branding .logo img { height:48px; width:auto; }

nav.primary-menu ul { list-style:none; margin:0; padding:0; display:flex; gap: var(--space-md); align-items: stretch; }
nav.primary-menu li { display: flex; align-items: stretch; position: relative; }
nav.primary-menu a { 
  padding: 12px 20px; 
  border-radius: 8px; 
  font-weight: 500; 
  position: relative; 
  color: var(--color-text); 
  text-decoration: none; 
  transition: all 0.3s ease; 
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 44px;
  white-space: nowrap;
  flex: 1;
}
nav.primary-menu a:hover { 
  color: var(--color-primary); 
  background: rgba(10, 60, 120, 0.08); 
  border-color: rgba(10, 60, 120, 0.15);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(10, 60, 120, 0.15);
}
nav.primary-menu .current-menu-item>a { 
  color: var(--color-primary); 
  background: rgba(10, 60, 120, 0.1); 
  border-color: rgba(10, 60, 120, 0.2);
  font-weight: 600;
}

/* Dropdown Arrow for Parent Items */
nav.primary-menu .menu-item-has-children > a::after {
  content: "▼";
  margin-left: 8px;
  font-size: 0.8em;
  transition: transform 0.3s ease;
}
nav.primary-menu .menu-item-has-children:hover > a::after {
  transform: rotate(180deg);
}

/* Dropdown Submenu Styles */
nav.primary-menu ul ul {
  position: absolute;
  top: 135%;
  left: 0;
  min-width: 240px;
   background: linear-gradient(to right, #d0e9ed, #f5eafa);
  /* border: 2px solid var(--color-primary); */
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  opacity: 0.5;
  visibility: hidden;
  transform: translateY(-12px);
  transition: all 0.3s ease;
  z-index: 1000;
  flex-direction: column;
  padding: 10px 0;

}

nav.primary-menu li:hover > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

nav.primary-menu ul ul li {
  width: 100%;
  display: block;
}

nav.primary-menu ul ul a {
  width: 100%;
  padding: 12px 20px;
  text-align: left;
  border-radius: 0;
  border: none;
  min-height: auto;
  justify-content: flex-start;
  white-space: normal;
  font-weight: 500;
  color: var(--color-text);
  background: transparent;
  box-shadow: none;
  transform: none;
}

nav.primary-menu ul ul a:hover {
  background: rgba(10, 60, 120, 0.05);
  color: var(--color-primary);
  transform: none;
  box-shadow: none;
  border: none;
}

@media (min-width: 769px) {
  nav.primary-menu { margin-left: auto; }
  .nav-toggle { display: none !important; }
}

@media (max-width: 768px) {
  nav.primary-menu { display: none; }
  .nav-toggle { display: flex !important; }
}

/* Kill the global whitening on the hero video background */
.hero.has-image {
  background: transparent !important;
}

.hero.has-image::before,
.hero.has-image::after {
  background: transparent !important;
  content: none !important;
}

/* KEEP the cards and text boxes visible */
.hero .container {
  background: rgba(255,255,255,0.7);  /* adjust opacity if needed */
  border-radius: 12px;                /* keep it like your design */
  padding: 2rem;
}

.hero-video-container .video-overlay,
.hero .video-overlay,
.hero-video-overlay {
  display: none !important;
  background: transparent !important;
  pointer-events: none !important;
}

.hero.has-image .container,
.hero .container {
  background: transparent !important;
  backdrop-filter: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.hero .line {
  background: rgba(255,255,255,0.8);  /* keep card style */
  border-radius: var(--radius-lg);
}


.hero { position:relative; background: transparent; color: var(--color-text); padding: var(--space-xl) 0; overflow:hidden; }
.hero:before { content:""; position:absolute; inset:0; background:transparent; pointer-events:none; mix-blend-mode:overlay; }
.hero.has-image { background: transparent; }
.hero .content { max-width:820px; position:relative; z-index:2; }
.hero h1 { font-family: var(--font-heading); font-size: var(--font-size-xxl); line-height: var(--line-height-heading); margin:0 0 var(--space-md); font-weight:600; }
.hero p.lead { font-size:1.22rem; opacity:0.9; margin:0 0 var(--space-lg); max-width:640px; }

/* Hero Background Image Enhancements */
.hero[style*="background-image"] {
  background-attachment: fixed;
  min-height: 60vh;
}

/* Hero Video Background Enhancements */
.hero-video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.hero-video-background video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s ease;
}

/* Mobile optimization for hero backgrounds */
@media (max-width: 768px) {
  .hero[style*="background-image"] {
    background-attachment: scroll !important;
    min-height: 50vh;
  }
  
  .hero-video-background {
    min-height: 50vh;
  }
  
  /* Hide video on very small screens to save bandwidth */
  @media (max-width: 480px) {
    /* .hero-video-background video {
      display: none;
    } */
  }
}

/* Ensure text readability over background images and videos */
.hero[style*="background-image"] .content,
.hero .hero-video-background + .container .content {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  background: rgba(255, 255, 255, 0.1);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  backdrop-filter: blur(2px);
}

.hero[style*="background-image"] h1,
.hero .hero-video-background + .container h1 {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.hero[style*="background-image"] p.lead,
.hero .hero-video-background + .container p.lead {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* High contrast mode for better accessibility */
@media (prefers-contrast: high) {
  .hero[style*="background-image"] .content,
  .hero .hero-video-background + .container .content {
    background: rgba(255, 255, 255, 0.95);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    color: var(--color-text);
  }
  
  .hero[style*="background-image"] h1,
  .hero[style*="background-image"] p.lead,
  .hero .hero-video-background + .container h1,
  .hero .hero-video-background + .container p.lead {
    text-shadow: none;
  }
}

.btn { display:inline-block; font-weight:600; border-radius: var(--radius-md); padding: var(--space-md) var(--space-xl); cursor:pointer; transition: var(--transition-base); position:relative; text-decoration:none; border: none; font-size: var(--font-size-md); line-height: 1.2; white-space: nowrap; }
.btn-primary { background: var(--color-primary); color:#fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--color-primary-alt); box-shadow: var(--shadow-md); text-decoration: none; }
.btn-outline { background: transparent; border:2px solid var(--color-primary); color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary); color: #fff !important; text-decoration: none;  }

.section { padding: var(--space-xl) 0; background: transparent; }
.section.alt { background: transparent; }
.section.dark { background: #061A33; color:#fff; }
.section h2 { font-family: var(--font-heading); font-size: clamp(1.9rem,3.2vw,2.6rem); margin:0 0 var(--space-lg); position:relative; font-weight:600; }
.section h2 span.label { display:block; font-size: var(--font-size-sm); letter-spacing: var(--letter-spacing-label); text-transform:uppercase; font-weight:600; color: var(--color-accent); margin-bottom: var(--space-xs); }
/*.section h2:after { content:''; display:block; width:72px; height:3px; background: var(--gradient-accent); margin-top: var(--space-sm); border-radius:3px; }*/
.cards { display:grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); }
/* display: flex; */
.card { background: var(--gradient-card-hover); border:1px solid rgba(255,255,255,0.3); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-sm); flex-direction:column; gap: var(--space-sm); position:relative; overflow:hidden; transition: var(--transition-base); isolation:isolate; }
.card:before { content:""; position:absolute; inset:0; background: rgba(255,255,255,0.1); opacity:0; transition: var(--transition-base); z-index:0; }
.card > * { position:relative; z-index:1; }
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.card:hover:before { opacity:1; }
.card h3 { margin:0; font-family: var(--font-heading); font-size:1.1rem; }
.card p { margin:0 0 var(--space-sm); flex-grow:1; }
.card a.more { font-weight:600; font-size: var(--font-size-sm); }

.line:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }

.process-step-icon {
  font-size: 2rem;
  margin-bottom: var(--space-sm, 10px);
}

.feature-grid { display:grid; gap: var(--space-xl); grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); align-items:stretch; }
.feature { display:flex; gap: var(--space-md); height: 100%; }
.feature .icon { width:80px; height:80px; flex:0 0 80px; display:grid; place-items:center; color: var(--color-primary); font-size:3rem; }

/* Video styling for consistent aspect ratio */
.video-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hero video specific styling */
.hero-video-container {
  position: relative;
  width: 100%;
  max-width: 100%;     /* remove the 500px cap */
  aspect-ratio: 16/9;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.hero-video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Standardized large icon styling - ALL icons now 3rem to match "85% Faster Processing" cards */
.large-icon {
  font-size: 3rem;
  color: var(--color-primary);
  margin: 0 auto var(--space-md);
  display: block;
  text-align: center;
  width: auto;
  height: auto;
}

/* Process step icons - now same size as large icons */
.process-step-icon {
  font-size: 3rem;
  color: var(--color-primary);
  margin: 0 auto var(--space-sm);
  display: block;
  text-align: center;
  width: auto;
  height: auto;
}

/* Pipeline step icons - now same size as large icons */
.pipeline-icon {
  font-size: 3rem;
  color: var(--color-primary);
  margin: 0 auto var(--space-sm);
  display: block;
  text-align: center;
  width: auto;
  height: auto;
}

/* List item icons - optimized size for better spacing */
.list-icon {
  font-size: 1.2rem;
  margin-right: var(--space-sm);
  display: inline-block;
  width: auto;
  height: auto;
  line-height: 1;
}

/* Equal height feature cards in payables section */
.payables-features .feature { 
  padding: var(--space-lg); 
  border: 1px solid rgba(255,255,255,0.3); 
  border-radius: var(--radius-lg); 
  background: transparent;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.payables-features .feature:before { 
  content:""; 
  position:absolute; 
  inset:0; 
  background: var(--gradient-card-hover); 
  opacity:0; 
  transition: var(--transition-base); 
  z-index:0; 
}

.payables-features .feature > * { 
  position:relative; 
  z-index:1; 
}

.payables-features .feature:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.payables-features .feature:hover:before { 
  opacity:1; 
}

.payables-features .feature .icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
  color: var(--color-primary);
}

.payables-features .feature h3 {
  margin: 0 0 var(--space-md);
  font-family: var(--font-heading);
  font-size: 1.1rem;
}

.payables-features .feature p {
  margin: 0 0 var(--space-md);
  flex-grow: 1;
}

.payables-features .feature .highlight {
  background: rgba(37, 211, 102, 0.1);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  margin-top: auto;
}

.payables-features .feature .highlight strong {
  font-weight: 600;
}

.pricing { display:grid; gap: var(--space-lg); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.pricing .plan { border:1px solid rgba(255,255,255,0.3); border-radius:var(--radius-lg); padding: var(--space-xl) var(--space-lg); background: transparent; position:relative; box-shadow: var(--shadow-sm); display:flex; flex-direction:column; gap:var(--space-sm); }
.pricing .plan.popular { border-color: var(--color-secondary); box-shadow: var(--shadow-md); }
.pricing .plan.popular:after { content:'Most Popular'; position:absolute; top:12px; right:-36px; background: var(--gradient-accent); color:#fff; padding:4px 48px; font-size:11px; font-weight:600; transform:rotate(45deg); box-shadow: var(--shadow-sm); }
.pricing .plan h3 { margin-top:0; font-family: var(--font-heading); }
.pricing .price { font-size:2rem; font-weight:600; margin: var(--space-sm) 0 var(--space-md); }

.footer { background:#061A33; color:#fff !important; padding: var(--space-xl) 0; position:relative; margin-top: var(--space-xxl); }
.footer:before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 25% 15%, rgba(25,181,254,0.15), transparent 60%); opacity:.6; pointer-events:none; }
.footer a { color:#fff !important; opacity:0.85; }
.footer a:hover { opacity:1; }
.footer .cols { display:grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); }
.footer .credits { text-align:center; margin-top: var(--space-lg); font-size: var(--font-size-sm); opacity:0.7; color: #fff !important; }
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 { color: #fff !important; }
.footer p, .footer li, .footer span, .footer div { color: #fff !important; }
.footer ul, .footer ol { color: #fff !important; }
.footer * { color: #fff !important; }
.footer-nav {
  list-style: disc inside;
  margin: 0;
  padding-left: 0;
  text-align: left;
}
.footer-nav li {
  margin-bottom: 0.4em;
  padding-left: 0;
  text-align: left;
}


/* Utilities */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.text-center { text-align:center; }
.mt-0 { margin-top:0; }
.mb-0 { margin-bottom:0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.flex { display:flex; }
.flex-center { justify-content:center; align-items:center; }

/* Icon / Illustration Mask System */
.icon-shape { --icon-size:64px; width:var(--icon-size); height:var(--icon-size); display:inline-block; background: var(--gradient-primary); -webkit-mask: no-repeat center/contain; mask: no-repeat center/contain; border-radius: 20px; box-shadow: var(--shadow-sm); position:relative; }
.icon-shape.alt { background: var(--gradient-accent); }
.icon-xs { --icon-size:28px; }
.icon-sm { --icon-size:42px; }
.icon-md { --icon-size:64px; }
.icon-lg { --icon-size:80px; }
.icon-xl { --icon-size:96px; }
.icon-gradient-secondary { background: var(--gradient-accent); }
.icon-outline { background: linear-gradient(#fff,#fff); border:1px solid var(--color-border); }
.icon-ring { box-shadow:0 0 0 4px rgba(255,255,255,0.12), var(--shadow-sm); }

/* Individual icon masks (placeholders) */
.icon-automation { -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M5.63 7.2L4.22 5.8 5.8 4.22l1.4 1.41A7.96 7.96 0 0112 4c.73 0 1.44.1 2.12.29l1.41-1.41L17.1 4.5l-1.41 1.41c.54.66.97 1.4 1.27 2.21h2v2h-2.05a7.96 7.96 0 01-.3 2.12l1.41 1.41-1.42 1.42-1.41-1.41a7.96 7.96 0 01-2.21 1.27V19h-2v-2.05a7.96 7.96 0 01-2.12-.3L7.2 18.37 5.8 16.95l1.41-1.41A7.96 7.96 0 016 12c0-.73.1-1.44.29-2.12L4.88 8.47 6.3 7.05l1.41 1.41A7.96 7.96 0 019.98 6.3 6 6 0 0012 6c.73 0 1.44.1 2.12.29'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M5.63 7.2L4.22 5.8 5.8 4.22l1.4 1.41A7.96 7.96 0 0112 4c.73 0 1.44.1 2.12.29l1.41-1.41L17.1 4.5l-1.41 1.41c.54.66.97 1.4 1.27 2.21h2v2h-2.05a7.96 7.96 0 01-.3 2.12l1.41 1.41-1.42 1.42-1.41-1.41a7.96 7.96 0 01-2.21 1.27V19h-2v-2.05a7.96 7.96 0 01-2.12-.3L7.2 18.37 5.8 16.95l1.41-1.41A7.96 7.96 0 016 12c0-.73.1-1.44.29-2.12L4.88 8.47 6.3 7.05l1.41 1.41A7.96 7.96 0 019.98 6.3 6 6 0 0012 6c.73 0 1.44.1 2.12.29'/%3E%3C/svg%3E"); }
.icon-ai { -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Cpath d='M17.5 14v7M14 17.5h7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Cpath d='M17.5 14v7M14 17.5h7'/%3E%3C/svg%3E"); }
.icon-analytics { -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19V5M9 19V8M14 19v-6M19 19V4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19V5M9 19V8M14 19v-6M19 19V4'/%3E%3C/svg%3E"); }
.icon-security { -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3l8 4v5c0 5-3.5 9-8 9s-8-4-8-9V7l8-4z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3l8 4v5c0 5-3.5 9-8 9s-8-4-8-9V7l8-4z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.icon-globe { -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='1.8' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15 15 0 010 20M12 2a15 15 0 000 20'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='1.8' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15 15 0 010 20M12 2a15 15 0 000 20'/%3E%3C/svg%3E"); }
.icon-cloud { -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 18a5 5 0 010-10 6 6 0 0111.31 2.9A4.5 4.5 0 1117 18H7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 18a5 5 0 010-10 6 6 0 0111.31 2.9A4.5 4.5 0 1117 18H7z'/%3E%3C/svg%3E"); }
.icon-workflow { -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3Cpath d='M7 10v4a2 2 0 002 2h5M17.5 10.5v3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3Cpath d='M7 10v4a2 2 0 002 2h5M17.5 10.5v3'/%3E%3C/svg%3E"); }
.icon-currency { -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v10M9 9h6M9 15h6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v10M9 9h6M9 15h6'/%3E%3C/svg%3E"); }
.icon-clock { -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E"); }
.icon-discount { -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3Ccircle cx='16.5' cy='16.5' r='1.5'/%3E%3Cpath d='M4 20L20 4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3Ccircle cx='16.5' cy='16.5' r='1.5'/%3E%3Cpath d='M4 20L20 4'/%3E%3C/svg%3E"); }
.icon-target { -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"); }
.icon-api { -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 8l8-4 8 4-8 4-8-4v8l8 4 8-4V8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 8l8-4 8 4-8 4-8-4v8l8 4 8-4V8'/%3E%3C/svg%3E"); }
.icon-users { -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 21v-2a4 4 0 00-4-4H7a4 4 0 00-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 21v-2a4 4 0 00-4-4H7a4 4 0 00-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75'/%3E%3C/svg%3E"); }
.icon-perf { -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 11l6 6L21 5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 11l6 6L21 5'/%3E%3C/svg%3E"); }
.icon-shield { -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); }
.icon-gear { -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 15a3 3 0 100-6 3 3 0 000 6z'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009.4 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09c.7 0 1.31-.4 1.51-1a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06c.46.46 1.12.61 1.82.33H10a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09c0 .7.4 1.31 1 1.51.7.28 1.36.13 1.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06c-.46.46-.61 1.12-.33 1.82V10c.9.04 1.61.75 1.61 1.65S20.3 14.96 19.4 15z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 15a3 3 0 100-6 3 3 0 000 6z'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009.4 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09c.7 0 1.31-.4 1.51-1a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06c.46.46 1.12.61 1.82.33H10a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09c0 .7.4 1.31 1 1.51.7.28 1.36.13 1.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06c-.46.46-.61 1.12-.33 1.82V10c.9.04 1.61.75 1.61 1.65S20.3 14.96 19.4 15z'/%3E%3C/svg%3E"); }
.icon-check { -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 12l5 5 11-11'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 12l5 5 11-11'/%3E%3C/svg%3E"); }
.icon-light { -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.42 1.42M17.65 17.65l1.42 1.42M2 12h2M20 12h2M6.35 17.65l1.42-1.42M16.65 7.35l1.42-1.42'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.42 1.42M17.65 17.65l1.42 1.42M2 12h2M20 12h2M6.35 17.65l1.42-1.42M16.65 7.35l1.42-1.42'/%3E%3C/svg%3E"); }
.icon-speed { -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3Cpath d='M12 12l4-2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3Cpath d='M12 12l4-2'/%3E%3C/svg%3E"); }
.icon-scale { -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3v18M6 8l6 6 6-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3v18M6 8l6 6 6-6'/%3E%3C/svg%3E"); }


/* Responsive adjustments */
@media (max-width: 768px) {
  /* Prevent body scroll when mobile menu is open */
  body.mobile-menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }
  
  /* Mobile menu overlay */
  body.mobile-menu-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: rgba(0, 0, 0, 0.5); */
    z-index: 900;
    animation: fadeIn 0.3s ease;
    pointer-events: none;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  nav.primary-menu { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0;
    width: 85vw;
    max-width: 350px;
    height: 100vh;
    background: linear-gradient(to bottom, #A7F5F2, #ECD9F5); 
    border-left: 3px solid var(--color-primary); 
    transform: translateX(100%); 
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
    padding: 80px 0 var(--space-lg) 0; 
    box-shadow: -8px 0 32px rgba(0,0,0,0.15); 
    z-index: 999; 
    opacity: 1;
    visibility: visible;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar for all browsers */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
  }
  
  /* Hide scrollbar for WebKit browsers (Chrome, Safari) */
  nav.primary-menu::-webkit-scrollbar {
    display: none;
  }
  nav.primary-menu.open { 
    display: block;
    transform: translateX(0); 
  }
  nav.primary-menu ul { 
    flex-direction: column; 
    align-items: stretch; 
    gap: 0; 
    padding: 0 var(--space-md); 
    margin: 0;
  }
  nav.primary-menu li {
    border-bottom: 1px solid rgba(10, 60, 120, 0.15);
    display: block;
    position: relative;
    margin: 0;
  }
  nav.primary-menu li:last-child {
    border-bottom: none;
  }
  nav.primary-menu a { 
    width: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: var(--space-md) var(--space-lg); 
    color: var(--color-primary); 
    text-decoration: none; 
    font-weight: 600; 
    font-size: 1.1rem;
    transition: all 0.3s ease; 
    border-radius: 8px;
    margin: 4px 0;
  }
  nav.primary-menu a:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-primary);
    transform: translateX(8px);
  }
  
  /* Mobile dropdown menu styles */
  nav.primary-menu .menu-item-has-children > a::after {
    content: "▼";
    margin-left: auto;
    transition: transform 0.3s ease;
  }
  nav.primary-menu .menu-item-has-children.open > a::after {
    transform: rotate(180deg);
  }
  
  nav.primary-menu ul ul {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: linear-gradient(to right, rgba(167, 245, 242, 0.4), rgba(236, 217, 245, 0.4));
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    box-shadow: none;
    padding: 0;
    margin: 8px var(--space-md);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  
  nav.primary-menu .menu-item-has-children.open ul {
    max-height: 500px;
    padding: 8px 0;
  }
  
  nav.primary-menu ul ul li {
    border-bottom: 1px solid rgba(10, 60, 120, 0.1);
    border-left: 4px solid var(--color-primary);
    margin: 0;
    background: rgba(255, 255, 255, 0.1);
  }
  
  nav.primary-menu ul ul li a {
    padding: 12px 20px;
    font-size: 0.95rem;
    color: var(--color-primary);
    font-weight: 500;
    margin: 0;
    transform: none;
  }
  
  nav.primary-menu ul ul li:hover {
    background: rgba(255, 255, 255, 0.2);
  }
  
  nav.primary-menu ul ul li a:hover {
    transform: translateX(4px);
    background: transparent;
  }
  
  nav.primary-menu ul ul li:last-child {
    border-bottom: none;
  }
  nav.primary-menu a { 
    width: 100%; 
    padding: 20px var(--space-xl); 
    margin: 0; 
    border-radius: 0; 
    display: block;
    color: var(--color-primary);
    font-weight: 500;
    font-size: 1.1rem;
    border: none;
    background: transparent;
    transform: none;
    box-shadow: none;
    transition: all 0.3s ease;
    text-align: left;
    min-height: auto;
    white-space: normal;
    flex: none;
    justify-content: flex-start;
    align-items: flex-start;
  }
  nav.primary-menu a:hover { 
    background: rgba(255, 255, 255, 0.3); 
    color: var(--color-primary);
    padding-left: calc(var(--space-xl) + 8px);
    transform: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
  }
  nav.primary-menu .current-menu-item>a {
    background: rgba(255, 255, 255, 0.4);
    color: var(--color-primary);
    font-weight: 600;
    border-left: 4px solid var(--color-primary);
    padding-left: calc(var(--space-xl) + 4px);
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }
  .hero { padding: var(--space-lg) 0 var(--space-xl); }
  .nav-toggle { display: flex !important; }
  
  /* Hero with video responsive layout */
  .hero .container > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: var(--space-lg) !important;
  }
  
  .hero .hero-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-sm) !important;
  }
  
  .hero .hero-stats strong {
    font-size: 1.4rem !important;
  }
  
  .hero .hero-stats span {
    font-size: 0.8rem !important;
  }
  
  .hero-video-container {
    max-width: 100% !important;
    margin: 0 auto;
  }
}

/* Mobile Nav Toggle */
/* Mobile Navigation Toggle */
.nav-toggle { 
  display: none; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center;
  gap: 5px; 
  width: 52px; 
  height: 52px; 
  background: transparent; 
  border: 2px solid var(--color-transparent); 
  /*border-radius: 12px; */
  cursor: pointer; 
  padding: 12px; 
  /* transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);  */
  /* box-shadow: 0 4px 12px rgba(10, 60, 120, 0.15), 0 2px 4px rgba(10, 60, 120, 0.1); */
  position: relative;
  z-index: 1000;
}
.nav-toggle .bar { 
  height: 3px; 
  width: 26px; 
  background: linear-gradient(90deg, var(--color-primary), #0056b3); 
  border-radius: 3px; 
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
  cursor: pointer;
  /* box-shadow: 0 1px 2px rgba(10, 60, 120, 0.2); */
}
.nav-toggle:hover { 
  background: linear-gradient(145deg, var(--color-primary), #0056b3); 
  border-color: var(--color-primary); 
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(10, 60, 120, 0.3), 0 3px 8px rgba(10, 60, 120, 0.15);
}
.nav-toggle:hover .bar { 
  background: white; 
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.nav-toggle[aria-expanded="true"] { 
  background: linear-gradient(145deg, var(--color-primary), #0056b3); 
  border-color: var(--color-primary); 
  box-shadow: 0 6px 20px rgba(10, 60, 120, 0.3), 0 3px 8px rgba(10, 60, 120, 0.15);
}
.nav-toggle[aria-expanded="true"] .bar { 
  background: white; 
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) { 
  transform: translateY(7px) rotate(45deg); 
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { 
  opacity: 0; 
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { 
  transform: translateY(-7px) rotate(-45deg); 
}

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Force primary color for all text elements to override any default browser/theme styles */
p, h1, h2, h3, h4, h5, h6, li, div, span {
  color: var(--color-primary) !important;
}

/* Exceptions for specific elements that should maintain their own colors */
.section.dark p, .section.dark h1, .section.dark h2, .section.dark h3, .section.dark h4, .section.dark h5, .section.dark h6, .section.dark li, .section.dark div, .section.dark span {
  color: #fff !important;
}

.btn-primary, .btn-primary * {
  color: #fff !important;
}

/* Button styling for dark sections */
.section.dark .btn-outline {
  background: transparent !important;
  border: 2px solid #fff !important;
  color: #fff !important;
}

.section.dark .btn-outline:hover {
  background: #fff !important;
  color: var(--color-primary) !important;
}

.video-overlay p, .video-overlay span {
  color: white !important;
}

.list-icon {
  color: #e74c3c !important;
}

a {
  color: var(--color-primary) !important;
}

/* ===================================
   CONTACT FORM STYLES
=================================== */

/* Contact form styling */
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e1e5e9;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-family: var(--font-body);
  transition: all 0.3s ease;
  background: #fff;
  color: var(--color-text) !important;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(31, 79, 123, 0.1);
}

.contact-form label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-xs);
  color: var(--color-primary) !important;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form button {
  font-family: var(--font-body);
}

/* Contact info cards */
.contact-info-card {
  background: var(--color-surface-alt);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-xl);
  border: 1px solid rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.contact-info-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.contact-info-card h3 {
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  color: var(--color-primary) !important;
}

.contact-info-card p {
  margin-bottom: var(--space-sm);
  color: var(--color-text) !important;
}

.contact-info-card a {
  color: var(--color-primary) !important;
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-info-card a:hover {
  color: var(--color-accent) !important;
  text-decoration: underline;
}

/* Social media links */
.contact-info-card .social-links {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.contact-info-card .social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--color-primary);
  color: white !important;
  border-radius: 50%;
  text-decoration: none;
  transition: all 0.3s ease;
}

.contact-info-card .social-links a:hover {
  background: var(--color-accent);
  transform: scale(1.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  .contact-info-card {
    padding: var(--space-lg);
  }
  
  .contact-info-card h3 {
    flex-direction: column;
    text-align: center;
    gap: var(--space-sm);
  }
}


/* Force logo image bigger */
header.site-header .site-branding .logo img {
  height: 120px !important;      /* try larger so it's noticeable */
  max-height: 120px !important;
  width: auto !important;
}


/* Navigation menu bold */
nav.primary-menu a {
  font-weight: 700;          /* make nav options bold */
}

/* Remove text shadow on hero */
.hero[style*="background-image"] .content,
.hero .hero-video-background + .container .content,
.hero[style*="background-image"] h1,
.hero .hero-video-background + .container h1,
.hero[style*="background-image"] p.lead,
.hero .hero-video-background + .container p.lead {
  text-shadow: none !important;  /* remove all hero text shadows */
  background: transparent;           /* no faded background */
  backdrop-filter: blur(6px);        /* stronger blur effect */
  -webkit-backdrop-filter: blur(6px);
}

/* Make navbar fixed at the top */
header.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-header, 1000);
}

/* Adjust page content so it doesn't hide behind the fixed navbar */
body {
  padding-top: var(--nav-height, 80px);
}

/* Navbar background styled like the cards */
.header-bar {
  background: var(--gradient-card-hover);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px);
}

.header-bar.condensed .header-inner {
  min-height: var(--nav-height) !important;
  transition: none !important;
}

.contact-section {
  background: linear-gradient(
    90deg,
    #a4f6f6 0%,
    #c6e6f6 50%,
    #e3dbf5 100%
  );
  padding: 80px 0;
}



.contact-section .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 992px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-body {
  padding: 30px;
  flex: 1;
}

.card-title {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.card-text {
  color: #666;
  margin-bottom: 24px;
}

.contact-form .form-group {
  margin-bottom: 20px;
}

.contact-form label {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: #444;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--color-primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
  outline: none;
}

.btn-primary {
  background: var(--color-primary, #2563eb);
  color: #fff;
  border: none;
  padding: 14px 28px;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
.btn-primary:hover {
  background: var(--color-primary-dark, #1e40af);
}

/* Company Info */
/* Contact Section Background */
.contact-section {
  background: linear-gradient(
    90deg,
    #a6f3f3 0%,
    #cae7f6 50%,
    #e6ddfa 100%
  );
  padding: 80px 0;
}

/* Layout grid for form + location */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 992px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Shared Card Style */
.contact-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Titles */
.card-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 1.5rem;
}

.card-text {
  font-size: 1rem;
  color: #555;
  margin-bottom: 1.25rem;
}

/* Form Styling */
.contact-form .form-group {
  margin-bottom: 1.25rem;
}

.contact-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
  font-size: 0.95rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-primary, #0077cc);
  box-shadow: 0 0 0 2px rgba(0,119,204,0.15);
}

.contact-form textarea {
  resize: vertical;
}

.btn-primary {
  background: var(--color-primary, #0077cc);
  color: #fff;
  border: none;
  padding: 14px 22px;
  font-size: 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-primary:hover {
  background: var(--color-primary-dark, #005fa3);
}

/* Company Info */
.info-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111;
  margin-bottom: 0.25rem;
}

.info-subtitle {
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--color-primary, #0077cc);
  margin-bottom: 1rem;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
  color: #555;
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.95rem;
}

.info-item a {
  color: #444;
  text-decoration: none;
}

.info-item a:hover {
  color: var(--color-primary, #0077cc);
}

.info-icon {
  font-size: 1.2rem;
}

/* Map */
.map-card {
  position: relative;
  border: 4px solid var(--color-primary, #0077cc);
  border-radius: 10px;
  overflow: hidden;
  flex: 1;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  min-height: 240px;
}

.map-label {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--color-primary, #0077cc);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  z-index: 1;
}

/* Layout grid for form + location */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: stretch; /* makes all children equal height */
}

@media (min-width: 992px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Shared Card Style */
.contact-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;         /* full height in grid cell */
}

.card-body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  flex: 1;              /* makes content stretch */
}