/* Font Face */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/BricolageGrotesque-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/BricolageGrotesque-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Variables */
:root {
  /* Colors */
  --color-primary: #33FF66;
  --color-primary2: #00a228;
  --color-secondary: #014913;
  --color-accent: #33FFC2;
  --color-background: #F1F7F6;
  --color-surface: #FFFFFF;
  --color-text: #0D2F2B;
  --color-border: #E0EDEA;
  --color-muted: #A0B2AC;
  /* Gradients */
  --gradient-primary-linear: linear-gradient(135deg, #33FF66, #33FFC2);
  --gradient-primary-radial: radial-gradient(circle, #33FF66 0%, #33FFC2 100%);
  --gradient-soft-background: linear-gradient(to bottom, #F1F7F6, #FFFFFF);
  --gradient-hero-overlay: linear-gradient(to right, rgba(13, 47, 43, 0.85), rgba(51, 255, 194, 0.3));
  /* Typography */
  --font-family-base: 'Bricolage Grotesque', sans-serif;
  /* Spacing */
  --section-padding: 100px;
  --spacing-menu: 1.5rem;
  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(13, 47, 43, 0.05);
  --shadow-sm: 0 2px 4px rgba(13, 47, 43, 0.08);
  --shadow-md: 0 4px 8px rgba(13, 47, 43, 0.12);
  --shadow-lg: 0 8px 16px rgba(13, 47, 43, 0.15);
  --shadow-xl: 0 16px 32px rgba(13, 47, 43, 0.18);
  /* Border Radius */
  --radius-12: 12px;
  --radius-24: 24px;
  /* Transitions */
  --transition-1: 0.25s ease-in-out;
  --transition-2: 0.5s ease-in-out;
  --transition-3: 1s ease-in-out;
}

/* Global Styles */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--font-family-base);
}

li { list-style: none; }
a { text-decoration: none; color: inherit; }
a, img, svg, span, button, ion-icon, .fontawesome { display: block; }
img { height: auto; }
button { background: none; border: none; font: inherit; cursor: pointer; }
ion-icon, .fontawesome { pointer-events: none; }
address { font-style: normal; }
table { border-collapse: collapse; }
html { font-size: 10px; scroll-behavior: smooth; }
body { font-size: 1.6rem; line-height: 1.5; color: var(--color-text); background-color: var(--color-background); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background-color: var(--color-muted); border-radius: 4px; }
::-webkit-scrollbar-track { background-color: var(--color-surface); }
::-webkit-scrollbar-thumb:hover { background-color: var(--color-text); }

/* Focus Visibility */
:focus-visible { outline-offset: 2px; }

/* Navbar Styles */
.header {
  background-color: var(--color-background);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 20px var(--spacing-menu);
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90px;
  gap: var(--spacing-menu);
}

/* desktop navbar list */
.navbar-list { display: flex; align-items: center; gap: 50px; margin: 0 var(--spacing-menu); }
.navbar-item { font-size: 1.6rem; font-weight: 400; color: var(--color-text); }
.navbar-link { text-decoration: none; color: var(--color-text); transition: var(--transition-1); }
.navbar-link:hover, .navbar-link:focus { transform: scale(1.05); transition: var(--transition-1); }

.nav-toggle-btn { display: none; background: none; border: none; cursor: pointer; padding: var(--spacing-menu); margin-left: auto;}
.nav-toggle-btn .line { display: block; width: 25px; height: 2px; background-color: var(--color-text); margin: 5px 0; transition: var(--transition-1); }

/* New Rule for Mobile Navbar */
.mobile-navbar {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--color-background);
  border-top: 1px solid var(--color-border);
  padding: 20px;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  animation: slideDown 0.3s ease;
}

.mobile-navbar.active {
  display: block;
}

.mobile-navbar .navbar-list {
   display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0;
  margin: 0;
  list-style: none;
  align-items: flex-end;
  text-align: right;
}

.mobile-navbar .navbar-link {
  width: 100%;
  max-width: 220px;
  padding: 15px 20px;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  border-radius: 12px;
  transition: background-color 0.3s, transform 0.3s;
}

/* Hover & Focus Effects */
.mobile-navbar .navbar-link:hover,
.mobile-navbar .navbar-link:focus {
  background-color: var(--color-border);
  transform: translateX(5px);
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}


.btn-outline {
  background-color: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-secondary);
  padding: 8px 16px;
  border-radius: var(--radius-12);
  font-size: 1.6rem;
  font-weight: 400;
  text-decoration: none;
  transition: var(--transition-1);
}

.btn-outline:hover, .btn-outline:focus {
  background-color: var(--color-text);
  color: var(--color-surface);
}

/* Toggle Animation */
.nav-toggle-btn.active .line-1 { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle-btn.active .line-2 { opacity: 0; }
.nav-toggle-btn.active .line-3 { transform: rotate(-45deg) translate(5px, -5px); }

/* Hero Styles */
.hero {
  padding: var(--section-padding) 0;
  background: var(--gradient-soft-background);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 90vh;
  position: relative;
  overflow: hidden;
}

.hero-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.hero-content { max-width: 60%; padding-bottom: 2rem; }
.hero-content h1 { font-size: 5rem; font-weight: 700; color: var(--color-text); margin-bottom: 1.5rem; line-height: 1.2; }
.hero-content p { font-size: 1.8rem; color: var(--color-muted); margin-bottom: 2rem; }

.stroke-underline { position: relative; display: inline-block; }
.stroke-underline::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 0;
  width: 110%;
  height: 25px;
  background: url('../images/18.png') no-repeat center;
  background-size: contain;
  z-index: 1;
}

.hero-buttons { display: flex; gap: 1.5rem; margin-bottom: 2rem; justify-content: center; }

.btn {
  background-color: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-text);
  padding: 10px 20px;
  border-radius: var(--radius-12);
  font-size: 1.6rem;
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition-1);
}

.btn:hover, .btn:focus {
  background-color: var(--color-text);
  color: var(--color-background);
}

.btn-secondary {
  background-color: var(--color-text);
  color: var(--color-background);
  border: 1px solid var(--color-text);
  padding: 10px 20px;
  border-radius: var(--radius-12);
  font-size: 1.6rem;
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition-1);
}

.btn-secondary:hover, .btn-secondary:focus {
  background-color: transparent;
  color: var(--color-text);
}

.hero-image.full-width-image {
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-image.full-width-image .solutions-image{ width: 100%; height: auto; background-color: #e6ebe9; border-radius: var(--radius-24);}
.hero-image.full-width-image .legal-image,
.hero-image.full-width-image .contact-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-24);
}

.hero-image.full-width-image .phone-image {
  width: 150%;
  height: auto;
}

/* Features Section Styles */
.features { padding: var(--section-padding) 0; background-color: var(--color-surface); display: flex; justify-content: center; }
.feature-container { max-width: 1300px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; width: 100%; }
.feature-content { max-width: 50%; }
.feature-header { font-size: 1.6rem; font-weight: 300; color: var(--color-primary2); margin-bottom: 1rem; text-transform: uppercase; }
.feature-title { font-size: 3rem; font-weight: 700; color: var(--color-text); margin-bottom: 1.5rem; }
.feature-description { font-size: 1.8rem; color: var(--color-muted); margin-bottom: 2rem; line-height: 1.5; }
.btn-learn-more { display: inline-flex; align-items: center; background-color: var(--color-text); color: var(--color-background); border: 1px solid var(--color-secondary); padding: 8px 16px; border-radius: var(--radius-12); font-size: 1.6rem; font-weight: 400; text-decoration: none; transition: var(--transition-1); }
.btn-learn-more:hover, .btn-learn-more:focus { background-color: transparent; color: var(--color-text); border: 1px solid var(--color-secondary); }
.arrow { margin-left: 8px; font-size: 1.4rem; }
.feature-image { max-width: 50%; padding: 20px; }
.feature-image img { width: 100%; height: auto; border-radius: var(--radius-12); }

/* Why Us Section */
.why-us { padding: var(--section-padding) 0; background-color: var(--color-text); display: flex; justify-content: center; }
.why-us-container { max-width: 1300px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; width: 100%; }
.why-us-content { max-width: 50%; }
.why-us-image { max-width: 50%; }
.why-us-header { font-size: 1.6rem; font-weight: 300; color: var(--color-primary); margin-bottom: 1rem; text-transform: uppercase; }
.why-us-title { font-size: 3rem; font-weight: 700; color: var(--color-surface); margin-bottom: 1.5rem; }
.why-us-description { font-size: 1.8rem; color: var(--color-muted); margin-bottom: 2rem; line-height: 1.5; }

/* Reliable Section */
.reliable { padding: var(--section-padding) 0; background-color: #1a2b28; color: #fff; }
.reliable-container { max-width: 1300px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: flex-start; width: 100%; }
.reliable-content { max-width: 50%; }
.reliable-label { font-size: 1.6rem; font-weight: 300; color: var(--color-accent); margin-bottom: 1rem; text-transform: uppercase; }
.reliable-title { font-size: 3rem; font-weight: 700; color: #fff; margin-bottom: 2rem; line-height: 1.2; }
.reliable-list { max-width: 50%; }
.reliable-item { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(224, 237, 234, 0.2); }
.reliable-item:last-child { margin-bottom: 0; border-bottom: none; }
.reliable-number { font-size: 1.8rem; font-weight: 400; color: var(--color-accent); margin-right: 1rem; display: inline-block; }
.reliable-item-title { font-size: 2rem; font-weight: 700; color: #fff; margin-bottom: 0.5rem; display: inline-block; }
.reliable-item-description { font-size: 1.6rem; color: #d3d8d6; line-height: 1.5; }

/* Pricing Section */
.pricing { padding: var(--section-padding) 0; background-color: var(--color-background); }
.pricing-container { max-width: 1300px; margin: 0 auto; padding: 0 20px; text-align: center; }
.pricing-header { font-size: 3rem; font-weight: 700; margin-bottom: 2.5rem; line-height: 1.2; color: var(--color-text); }
.pricing-cards { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; }
.pricing-card { background-color: var(--color-surface); border-radius: var(--radius-12); padding: 2rem; width: 300px; text-align: left; box-shadow: var(--shadow-lg); position: relative; }
.pricing-subtitle { font-size: 1.4rem; color: var(--color-muted); margin-bottom: 1rem; }
.pricing-plan { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; }
.pricing-price { font-size: 2rem; font-weight: 700; margin-bottom: 1.5rem; }
.pricing-features, .pricing-inclusions { list-style: none; margin-bottom: 1.5rem; }
.pricing-features li { font-size: 1.4rem; color: var(--color-muted); margin-bottom: 0.5rem; }
.pricing-inclusions li { font-size: 1.4rem; color: var(--color-muted); margin-bottom: 0.5rem; }
.pricing-inclusions li::before { content: '✓'; color: var(--color-primary2); margin-right: 0.5rem; display: inline-block; }
.pricing-button { background-color: var(--color-text); color: var(--color-background); padding: 0.8rem 1.5rem; border-radius: var(--radius-12); font-size: 1.4rem; text-align: center; margin-bottom: 1rem; transition: var(--transition-1); }
.pricing-button:hover, .pricing-button:focus { background-color: transparent; color: var(--color-text); border: 1px solid var(--color-secondary); }
.pricing-disclaimer { font-size: 1.2rem; color: var(--color-muted); margin-top: 2rem; }

/* For Who Section */
.for-who { padding: var(--section-padding) 0; background-color: var(--color-background); }
.for-who-container { max-width: 1300px; margin: 0 auto; padding: 0 20px; text-align: left; }
.for-who-content { margin-bottom: 3rem; }
.for-who-label { font-size: 1.6rem; font-weight: 300; color: var(--color-primary2); margin-bottom: 1rem; text-transform: uppercase; }
.for-who-title { font-size: 3rem; font-weight: 700; margin-bottom: 0; line-height: 1.2; }
.for-who-cards { display: flex; justify-content: flex-start; gap: 3rem; flex-wrap: wrap; }
.for-who-card { background-color: var(--color-surface); border-radius: var(--radius-12); padding: 2rem; width: 400px; text-align: left; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; justify-content: center; align-items: left; }
.for-who-icon { font-size: 3rem; color: var(--color-secondary); margin-bottom: 1rem; }
.for-who-card-title { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; }
.for-who-card-description { font-size: 1.5rem; color: var(--color-muted); margin-bottom: 1.5rem; line-height: 1.5; }

/* Stock Section */
.stock-section { padding: var(--section-padding) 0; background-color: var(--color-background); width: 100%; overflow: hidden; }
.stock-container { max-width: 1300px; margin: 0 auto; padding: 0 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 2rem; }
.stock-content { flex: 1; min-width: 0; padding: 2rem; }
.stock-header { font-size: 3rem; font-weight: 700; color: var(--color-text); margin-bottom: 1rem; }
.stock-subtext { font-size: 1.8rem; color: var(--color-muted); margin-bottom: 2rem; }
.stock-stats { list-style: none; padding: 0; }
.stock-stats li { font-size: 1.6rem; color: var(--color-text); margin-bottom: 1rem; display: flex; align-items: center; }
.stock-stats span { font-weight: 700; color: var(--color-primary2); margin-left: 0.5rem; }
.stock-chart { flex: 1; min-width: 0; padding: 2rem; overflow: hidden; }
.tradingview-widget-container { width: 100%; height: 400px; min-height: 400px; }
.tradingview-widget-container iframe { width: 100% !important; height: 100% !important; border: none; border-radius: var(--radius-12); }

/* CTA Section */
.cta-section { padding: var(--section-padding) 0; background-color: var(--color-text); width: 100%; overflow: hidden; }
.cta-container { max-width: 1250px; margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 40vh; text-align: center; }
.cta-header { font-size: 3.5rem; font-weight: 700; color: var(--color-surface); margin-bottom: 1.5rem; }
.cta-subtext { font-size: 2rem; color: var(--color-surface); margin-bottom: 2.5rem; max-width: 600px; }
.cta-button { background-color: var(--color-background); color: var(--color-text); border: none; padding: 12px 24px; font-size: 1.8rem; font-weight: 600; border-radius: var(--radius-12); cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; transition: var(--transition-1); }
.cta-button:hover, .cta-button:focus { background-color: transparent; color: var(--color-background); border: 1px solid var(--color-background); box-shadow: var(--shadow-sm); }
.cta-button:active { background-color: #e0e0e0; }

/* Review Styles */
.review { padding: var(--section-padding) 0; background-color: var(--color-background); }
.review-container { max-width: 1300px; margin: 0 auto; padding: 0 20px; text-align: left; }
.review-content { margin-bottom: 3rem; }
.review-label { font-size: 1.6rem; font-weight: 300; color: var(--color-primary2); margin-bottom: 1rem; text-transform: uppercase; }
.review-title { font-size: 3rem; font-weight: 700; margin-bottom: 0; line-height: 1.2; }
.review-cards { display: flex; justify-content: flex-start; gap: 3rem; flex-wrap: wrap; }
.review-card { background-color: var(--color-surface); border-radius: var(--radius-12); padding: 2rem; width: 400px; text-align: left; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; justify-content: center; align-items: left; }
.review-icon { font-size: 3rem; color: var(--color-secondary); margin-bottom: 1rem; }
.review-card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 1rem; }
.review-card-description { font-size: 1.5rem; color: var(--color-muted); margin-bottom: 1.5rem; line-height: 1.5; }

/* Footer Styles */
.footer { padding: 40px 0; background-color: #1a2b28; color: #fff; }
.footer-container { max-width: 1250px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 4rem; align-items: start; }
.footer-content { max-width: 100%; }
.footer-label { font-size: 1.8rem; font-weight: 300; color: var(--color-accent); margin-bottom: 1rem; text-transform: uppercase; }
.footer-title { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; line-height: 1.3; }
.footer-slogan { font-size: 1.4rem; color: #d3d8d6; margin-bottom: 2rem; }
.footer-newsletter { display: flex; gap: 1rem; margin-bottom: 2rem; }
.footer-input { padding: 0.8rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-12); font-size: 1.4rem; color: var(--color-text); background-color: #fff; width: 200px; }
.footer-button { background-color: var(--color-primary); color: #fff; padding: 0.8rem 1.5rem; border: none; border-radius: var(--radius-12); font-size: 1.4rem; font-weight: 700; cursor: pointer; transition: var(--transition-1); }
.footer-button:hover, .footer-button:focus { background-color: #28cc54; }
.footer-social { display: flex; gap: 1rem; }
.social-icon { font-size: 2rem; color: var(--color-accent); transition: var(--transition-1); }
.social-icon:hover, .social-icon:focus { color: var(--color-primary); }
.footer-list { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }
.footer-item { margin-bottom: 2rem; }
.footer-item-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 1rem; }
.footer-item-description { font-size: 1.4rem; color: #d3d8d6; margin-bottom: 0.5rem; }
.footer-item-description a:hover, .footer-item-description a:focus { color: var(--color-primary); }
.footer-bottom { max-width: 1250px; margin: 0 auto; padding: 1rem 20px; text-align: center; font-size: 1.5rem; color: #a0b2ac; }
.footer-copyright, .footer-timestamp { margin: 0.5rem 0; }

/* Disclosure Section */
.disclosure { padding: 10px 0; background-color: #1a2b28; color: #fff; }
.disclosure-container { max-width: 1250px; margin: 0 auto; padding: 0 20px; text-align: left; }
.disclosure-text { font-size: 1.4rem; color: #d3d8d6; margin-bottom: 1.5rem; line-height: 1.6; }
.disclosure-text a { color: var(--color-accent); text-decoration: underline; transition: var(--transition-1); display: inline-block; }
.disclosure-text a:hover, .disclosure-text a:focus { color: var(--color-primary); }

/* Animation */
[data-appear] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

[data-appear].appear {
  opacity: 1;
  transform: translateY(0);
}

/* Solutions Page */
.use-cases { padding: 100px 0; background-color: var(--color-surface); }
.use-cases-container { max-width: 1300px; margin: 0 auto; padding: 0 20px; text-align: left; }
.use-cases-content { margin-bottom: 3rem; }
.use-cases-label { font-size: 1.6rem; font-weight: 300; color: var(--color-primary2); margin-bottom: 1rem; text-transform: uppercase; }
.use-cases-title { font-size: 3rem; font-weight: 700; margin-bottom: 0; line-height: 1.2; }
.use-cases-cards { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2rem; }
.use-cases-card { border-radius: var(--radius-12); padding: 2rem; width: calc(33.333% - 2rem); text-align: left; }
.use-cases-image { width: 90%; height: auto; margin-bottom: 1rem; background-color: #e6ebe9; }
.use-cases-image img { width: 90%; height: auto; border-radius: var(--radius-12); }
.use-cases-card-title { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; }
.use-cases-card-description { font-size: 1.5rem; color: var(--color-muted); line-height: 1.5; }

/* Implement Styles */
.implement { padding: var(--section-padding) 0; background: var(--color-text); display: flex; justify-content: center; align-items: center; min-height: 90vh; position: relative; overflow: hidden; }
.implement-title { font-size: 3rem; font-weight: 700; margin-bottom: 2rem; line-height: 1.2; color: var(--color-background); }
.implement-label { font-size: 1.6rem; font-weight: 300; color: var(--color-accent); margin-bottom: 1rem; text-transform: uppercase; }
.implement-container { max-width: 1300px; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
.implement-content { max-width: 60%; padding-bottom: 2rem; }
.implement-image.full-width-image { width: 100%; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; }
.implement-image.full-width-image .solutions-image { width: 80%; height: auto; background-color: #e6ebe9; border-radius: var(--radius-24); }
.implement-image.full-width-image .certificate-image { width: 50%; height: auto; background-color: #e6ebe9; border-radius: var(--radius-24); }

/* Company Page */
.legal-doc { padding: var(--section-padding) 0; background-color: var(--color-surface); display: flex; justify-content: center; }
.legal-doc-container { max-width: 1300px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; width: 100%; }
.legal-doc-content { max-width: 100%; }
.legal-doc-header { font-size: 1.6rem; font-weight: 300; color: var(--color-primary2); margin-bottom: 1rem; text-transform: uppercase; }
.legal-doc-title { font-size: 4rem; font-weight: 700; color: var(--color-text); margin-bottom: 1.5rem; }
.legal-doc-description { font-size: 1.8rem; color: var(--color-muted); margin-bottom: 2rem; line-height: 1.5; }
.legal-doc-subtitle { font-size: 2rem; font-weight: 700; color: var(--color-text); margin: 1.5rem 0 1rem; }
.legal-doc-list { list-style-type: disc; padding-left: 2rem; margin-bottom: 1.5rem; }
.legal-doc-list li { font-size: 1.5rem; color: var(--color-muted); margin-bottom: 0.5rem; }

/* Contact Section */
.support-form-section { padding: var(--section-padding) 0; background-color: var(--color-surface); display: flex; justify-content: center; }
.support-form-container { max-width: 600px; width: 100%; padding: 0 20px; text-align: center; }
.support-form-container .section-title { font-size: 2.4rem; font-weight: 600; margin-bottom: 1rem; color: var(--color-heading); }
.support-form-container .section-subtitle { font-size: 1.5rem; color: var(--color-muted); margin-bottom: 2rem; }
.support-form { display: flex; flex-direction: column; gap: 2rem; text-align: left; }
.support-form .form-group { display: flex; flex-direction: column; }
.support-form .form-group label { font-size: 1.4rem; font-weight: 500; margin-bottom: 0.5rem; color: var(--color-text); }
.support-form input, .support-form select, .support-form textarea { padding: 1rem; font-size: 1.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-12); background-color: #fff; color: var(--color-text); }
.support-form input:focus, .support-form select:focus, .support-form textarea:focus { outline: 0.5px solid var(--color-text); }
.btn.full-width { width: 100%; text-align: center; }

.reach-out { padding: var(--section-padding) 0; background: var(--color-surface); display: flex; justify-content: center; align-items: center; min-height: 50vh; position: relative; overflow: hidden; }
.reach-out-container { max-width: 1300px; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
.reach-out-content { max-width: 60%; padding-bottom: 2rem; }
.reach-out-content h1 { font-size: 5rem; font-weight: 700; color: var(--color-text); margin-bottom: 1.5rem; line-height: 1.2; }
.reach-out-content p { font-size: 1.8rem; color: var(--color-muted); margin-bottom: 2rem; }
.contact-link { display: inline-block; text-decoration: underline; }

.clients { padding: 80px 0; background-color: var(--color-surface); text-align: center; }
.clients-container { max-width: 1300px; margin: 0 auto; padding: 0 20px; }
.clients-title { font-size: 2.8rem; font-weight: 700; color: var(--color-text); margin-bottom: 50px; line-height: 1.3; }
.clients-logos { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 40px; }
.clients-logo { opacity: 0.7; transition: var(--transition-1); filter: grayscale(100%); }
.clients-logo:hover { opacity: 1; filter: grayscale(0); }

.main-content { padding-top: 60px; padding-bottom: 40px; display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 100px); background-color: var(--color-background); }

.auth-container { padding: 2rem; border-radius: var(--radius-12); box-shadow: var(--shadow-md); text-align: center; min-width: 300px; position: relative; min-height: 400px;}
.auth-container h4 { color: var(--color-text); font-size: 1.4rem; margin-bottom: 1.5rem; }
.auth-container a { color: var(--color-background); text-decoration: none; transition: var(--transition-1); }
.auth-container a:hover, .auth-container a:focus { color: var(--color-primary); }
.auth-container p { color: var(--color-muted); margin-top: 1rem; }
.form-box { max-width: 300px; margin: auto; opacity: 1; transition: opacity 0.3s ease-in-out; }
.form-box.hidden{ opacity: 0;  pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; }
.form-logo { width: 100px; margin-bottom: 1.5rem; }
.img { display: flex; align-items: center; justify-content: center; }
.img img { width: 50px; height: 50px; margin-bottom: 1rem; }
.input-container { position: relative; width: 100%; }
.input-container input { width: 100%; padding: 10px 40px 10px 10px; margin: 10px 0; border: 1px solid var(--color-border); border-radius: var(--radius-12); background-color: var(--color-surface); color: var(--color-text); transition: var(--transition-1); }
.input-container input:focus { border-color: var(--color-text); border-width: 2px; outline: none; }
.input-container .material-symbols-outlined { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--color-text); font-size: 2rem; }
.form-button { background-color: var(--color-text); color: var(--color-background); border: 1px solid var(--color-text); padding: 10px 20px; border-radius: var(--radius-12); font-size: 1.6rem; font-weight: 700; width: 100%; margin: 1rem 0; transition: var(--transition-1); }
.form-button:hover { background-color: transparent; color: var(--color-text); }
.hidden { display: none; }
.description { font-size: 1.5rem; color: var(--color-muted); }
.description a { display: inline-block; text-decoration: underline; color: var(--color-muted);}
.forgot-password { display: inline-block; text-decoration: underline; color: var(--color-muted);}
.forgot-password:hover {color: var(--color-text); transition: var(--transition-1);}
.description a:hover { color: var(--color-text);}
.input-container .uil {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text);
    font-size: 2rem;
}
.input-container .showHidePw {
    cursor: pointer;
}


/* Floating Translation Widget Styled Like Chat Button */
.translate-floating {
  position: fixed;
  bottom: 20px;
  left: 20px; /* or right: 20px if you prefer it on the right */
  z-index: 1000;
  background-color: #0d2f2b; /* Deep green */
  color: #fff;
  border-radius: 999px; /* Full pill shape */
  display: flex;
  align-items: center;
  padding: 6px 16px 6px 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  font-family: var(--font-family-base);
  font-size: 1.4rem;
  cursor: pointer;
}

/* Icon style (chat bubble or globe) */
.translate-floating::before {
  content: '';
  display: inline-block;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M12 3C7.03 3 3 6.92 3 12c0 1.85.63 3.54 1.69 4.94L3 21l4.18-1.45C8.4 20.15 10.14 21 12 21c4.97 0 9-3.92 9-9s-4.03-9-9-9z"/></svg>') no-repeat center center;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  background-size: contain;
}

/* Translate dropdown */
.google-translate-element .goog-te-combo {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--color-text);
  font-size: 1.4rem;
  padding: 0;
  margin: 0;
  background-image: none;
  font-family: inherit;
  cursor: pointer;
}

/* Hide extra Google Translate branding */
.goog-logo-link,
.goog-te-gadget span {
  display: none !important;
}

.goog-te-gadget {
  color: inherit !important;
  font-size: 0 !important;
}

.error {
  color: red;
  margin-top: 1rem;
}
.success {
  color: green;
  margin-top: 1rem;
}
   .loading-overlay {
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      width: 100%;
      background: rgba(255,255,255,0.9);
      z-index: 9999;
      display: none;
      align-items: center;
      justify-content: center;
    }
    .loading-spinner {
      border: 6px solid #f3f3f3;
      border-top: 6px solid #0D2F2B;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      animation: spin 1s linear infinite;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }