:root{
  --primary: #0a7a3f;
  --primary-dark: #076334;
  --secondary: #f1c40f;
  --muted-900: #111827;
  --muted-700: #374151;
  --muted-500: #6b7280;
  --bg: #ffffff;
  --card: #f8fafc;
  --focus: 0 0 0 4px rgba(10,122,63,0.14);
  --transition: 200ms ease;
  --content-max: 1200px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
}

/* NAVIGATION ENHANCEMENTS */

.navbar-dark .nav-link-clean {
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  padding: 0.75rem 1rem;
  transition: 0.2s ease;
}

.navbar-dark .nav-link-clean:hover,
.navbar-dark .nav-link-clean:focus {
  color: #ffffff;
  background: rgba(255,255,255,0.12);
  border-radius: 6px;
}

.navbar .btn-light {
  background: #ffffff;
  color: #0a7a3f;
  border: none;
}

.navbar .btn-light.active-lang {
  background: #f1c40f;
  color: #000;
}

.navbar .btn-warning {
  border-radius: 8px;
  color: #000;
}

/* Mobile spacing */
@media(max-width: 991px){
  .navbar-nav .nav-link-clean {
    padding: 0.75rem 0;
    border-radius: 0;
  }
}


/* HERO CLEAN STYLE */

/* Larger hero title */
.hero-title {
  font-size: 2.8rem;
  line-height: 1.2;
  color: #0a7a3f; /* brand primary */
}

/* Subtitle slightly larger and readable */
.hero-subtitle {
  font-size: 1.25rem;
  line-height: 1.6;
  max-width: 90%;
}

/* Buttons: high visibility + attractive */
.hero-btn-primary {
  background: #0a7a3f;
  border: none;
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
}

.hero-btn-primary:hover {
  background: #096a35;
  color: #fff;
}

.hero-btn-secondary {
  background: #f1c40f;
  border: none;
  color: #000;
  font-weight: 600;
  border-radius: 8px;
}

.hero-btn-secondary:hover {
  background: #d9b10e;
  color: #000;
}

/* Image box: simple + clean */
.hero-img-box {
  width: 280px;
  height: 460px; /* PERFECT for portrait product */
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;

  background: #ffffff;
  border-radius: 16px;

  /* NO shadow, NO float — simple as requested */
}

/* Image stays contained */
.hero-img {
  height: 500px;
  width: 500px;
  object-fit: contain;
}

/* Responsiveness */
@media (max-width: 991px) {
  .hero-img-box {
    width: 240px;
    height: 400px;
  }
  .hero-title {
    font-size: 2.4rem;
  }
}

@media (max-width: 576px) {
  .hero-img-box {
    width: 200px;
    height: 330px;
  }
  .hero-title {
    font-size: 2rem;
  }
  .hero-subtitle {
    font-size: 1.1rem;
  }
}


/* ABOUT section — improved layout, brand colors, accessible contrast */

#about { --bg-card: #fff; }

/* Headings */
#about h2 { color: var(--muted-900); font-size: 1.75rem; }

/* Feature pill style */
.about-pill {
  background: #fff;
  border: 1px solid rgba(55,65,81,0.06);
  padding: .6rem .9rem;
  border-radius: 10px;
  min-width: 150px;
  box-shadow: 0 6px 18px rgba(12,18,22,0.03);
  font-size: .94rem;
}

/* Make pills wrap gracefully */
@media (max-width: 575.98px) {
  .about-pill { min-width: 100%; text-align: left; }
}

/* Product image framing */
.about-figure {
  display: inline-block;
  margin: 0;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #fbfdfc);
  border: 1px solid rgba(10,122,63,0.04);
  /* subtle elevation */
  box-shadow: 0 12px 30px rgba(12,18,22,0.06);
}

/* Responsive control for image size */
.about-image {
  max-width: 520px;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* CTA button polish to match brand */
#about .btn-primary {
  background: var(--primary);
  border-color: var(--primary);
}
#about .btn-outline-secondary {
  background: transparent;
  color: var(--muted-900);
  border-color: rgba(55,65,81,0.08);
}

/* Ensure good spacing on small screens */
@media (max-width: 991.98px) {
  #about { padding-top: 2rem; padding-bottom: 2rem; }
  .about-figure { margin-top: 1rem; }
}


/* PRODUCT: two-column highlight layout (professional & responsive) */
:root {
  --primary: #0a7a3f;
  --muted-600: #4b5563;
  --card-bg: #fff;
}

/* Layout container tweak */
.product-two-col { max-width: 1100px; margin-left: auto; margin-right: auto; }

/* Product left (highlight) */
.product-card {
  width: 100%;
  display: inline-block;
  position: relative;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #fbfcfd);
  border: 1px solid rgba(10,122,63,0.04);
  box-shadow: none; /* explicitly no shadow per request */
  max-width: 420px;
  margin: 0 auto;
}

/* Decorative ring */
.product-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 420px;
  height: 420px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10,122,63,0.06), transparent 45%);
  z-index: 0;
  filter: blur(12px);
  pointer-events: none;
}

/* Product image sizes tuned for 482x780 source */
.product-image {
  position: relative;
  z-index: 2;
  width: 360px;       /* DESKTOP */
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  border-radius: 12px;
}


/* Feature list */
.features-list { display: flex; flex-direction: column; gap: 1rem; }

/* Individual feature item */
.feature-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--card-bg);
  border-radius: 12px;
  padding: 14px;
  border: 1px solid rgba(10,122,63,0.04);
  transition: transform 180ms ease, box-shadow 180ms ease;
  cursor: default;
}
.feature-item:focus,
.feature-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(12,18,22,0.08);
  outline: none;
}

/* Arrow icon on left */
.feat-arrow {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--primary);
  margin-top: 4px;
}

/* FEATURE HOVER: background turns green + text/icons turn white */
.feature-item:hover,
.feature-item:focus,
.feature-item:focus-within {
  background: var(--primary) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 36px rgba(10, 122, 63, 0.25) !important;
  transform: translateY(-6px);
}

/* Change arrow color on hover */
.feature-item:hover .feat-arrow,
.feature-item:focus .feat-arrow,
.feature-item:focus-within .feat-arrow {
  color: #ffffff !important;
}

/* Change <h5> and <p> text to white */
.feature-item:hover .feature-body h5,
.feature-item:hover .feature-body p,
.feature-item:focus .feature-body h5,
.feature-item:focus .feature-body p,
.feature-item:focus-within .feature-body h5,
.feature-item:focus-within .feature-body p {
  color: #ffffff !important;
}

/* Smooth transition for the color/background change */
.feature-item,
.feature-body h5,
.feature-body p,
.feat-arrow {
  transition: all 0.25s ease-in-out;
}

/* Feature body */
.feature-body h5 { margin: 0 0 6px 0; font-size: 1rem; color: #0f1724; }
.feature-body p { margin: 0; color: var(--muted-600); }

/* Responsive scaling */
@media (max-width: 991.98px) {
  .product-image { width: 300px; }
  .product-ring { display: none; }
  .product-left { margin-bottom: 1.25rem; }
}

/* Mobile: stack vertically, product above features */
@media (max-width: 575.98px) {
  .product-image { width: 220px; }
  .product-right { padding-top: 0; }
  .feature-item { padding: 12px; }
}

/* Accessibility visible focus for keyboard users */
.user-is-tabbing .feature-item:focus {
  box-shadow: 0 0 0 6px rgba(10,122,63,0.12);
}

/* Make sure right column is vertically centered on large screens */
@media (min-width: 992px) {
  .product-right { display: flex; align-items: center; height: 100%; }
  .features-list { width: 100%; }
}


/* connector paths (SVG) */
.connector { position: absolute; pointer-events: none; z-index: 3; opacity: 0.95; }

/* place each feature around the center */
.feature-top { left: 50%; top: 60px; transform: translateX(-50%); flex-direction: column; align-items: center; }
.feature-right { right: 60px; top: 50%; transform: translateY(-50%); flex-direction: row; justify-content: flex-end; }
.feature-bottom { left: 50%; bottom: 60px; transform: translateX(-50%); flex-direction: column; align-items: center; }
.feature-left { left: 60px; top: 50%; transform: translateY(-50%); flex-direction: row; justify-content: flex-start; }

/* connectors position adjustments */
.feature-top .connector.c-top { left: calc(50% - 100px); top: 90px; width: 200px; height: 60px; }
.feature-bottom .connector.c-bottom { left: calc(50% - 100px); bottom: 90px; width: 200px; height: 60px; }
.feature-left .connector.c-left { left: 40px; top: calc(50% - 100px); width: 60px; height: 200px; }
.feature-right .connector.c-right { right: 40px; top: calc(50% - 100px); width: 60px; height: 200px; }

/* small screens: stack vertically and hide connectors for clarity */
@media (max-width: 991.98px) {
  .product-stage { height: auto; padding: 2rem 0; }
  .product-center { position: static; transform: none; margin: 0 auto 1.25rem; }
  .product-ring { display: none; }
  .stage-feature { position: static; width: 100%; margin: 0.6rem 0; justify-content: center; }
  .feature-card { width: 100%; max-width: 720px; }
  .connector { display: none; }
  .product-image { max-width: 340px; margin: 0 auto; }
}

/* hover & focus */
.stage-feature:focus .feature-card,
.stage-feature:hover .feature-card,
.feature-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(6, 212, 51, 0.1);
  outline: none;
}

/* text styles inside features */
.feature-card h5 { margin:0; font-size:1rem; }
.feature-card p { margin:0; color: var(--muted-500); font-size:0.9rem; }

/* keyboard focus ring */
.user-is-tabbing .feature-card:focus,
.user-is-tabbing .stage-feature:focus {
  box-shadow: 0 0 0 6px rgba(10,122,63,0.12);
}

:root {
  --primary: #0a7a3f;
  --muted: #6b7280;
  --card-bg: #ffffff;
}

/* Square card container */
.why-square {
  width: 100%;
  height: 100%;
  max-width: 340px;
  min-height: 260px;
  background: var(--card-bg);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid rgba(10,122,63,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, background .2s ease;
  cursor: default;
  outline: none;
}

/* Centered icon box */
.sq-icon { width: 64px; height: 64px; display:flex; align-items:center; justify-content:center; border-radius:10px; background: rgba(10,122,63,0.06); color: var(--primary); transition: background .2s ease, color .2s ease; }

/* title + desc */
.sq-title { margin: 8px 0 6px; font-size:1rem; color:#0f1724; }
.sq-desc { margin:0; color:var(--muted); font-size:0.92rem; }

/* Hover / focus: full green */
.why-square:hover,
.why-square:focus,
.why-square:focus-within {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(10,122,63,0.16);
}

/* icon invert on highlight */
.why-square:hover .sq-icon,
.why-square:focus .sq-icon,
.why-square:focus-within .sq-icon {
  background: rgba(255,255,255,0.12);
  color: #ffffff;
}

/* invert text on highlight */
.why-square:hover .sq-title,
.why-square:focus .sq-title,
.why-square:focus-within .sq-title,
.why-square:hover .sq-desc,
.why-square:focus .sq-desc,
.why-square:focus-within .sq-desc {
  color: #ffffff;
}

/* responsive sizing */
@media (max-width: 991.98px) {
  .why-square { max-width: 320px; min-height: 240px; padding:16px; }
  .sq-icon { width:56px; height:56px; }
}
@media (max-width: 575.98px) {
  .why-square { max-width: 100%; min-height: 180px; padding:12px; }
  .sq-icon { width:48px; height:48px; }
}

/* keyboard focus visible */
.user-is-tabbing .why-square:focus {
  box-shadow: 0 0 0 6px rgba(10,122,63,0.14);
}



/* Awards — visual improvements */
.award-highlight { box-shadow: 0 16px 36px rgba(12,18,22,0.04); }

/* Carousel internal */
#awardsCarousel .carousel-inner { background: linear-gradient(180deg,#fff,#fbfcfd); }

/* Image sizing */
#awardsCarousel .carousel-item img { max-width: 220px; width: 100%; height: auto; display: block; }

/* Date badge under image */
.award-date {
  font-weight: 700;
  color: var(--primary, #0a7a3f);
  font-size: .9rem;
}

/* Thumbnail buttons */
.awards-thumbs { margin-top: .5rem; }
.thumb-btn {
  border: 1px solid rgba(10,122,63,0.06);
  padding: 4px;
  border-radius: 8px;
  background: transparent;
  transition: transform .18s ease, box-shadow .18s ease;
}
.thumb-btn img { width: 64px; height: 48px; object-fit: cover; display: block; border-radius: 6px; }
.thumb-btn.active,
.thumb-btn:hover,
.thumb-btn:focus {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(10,122,63,0.12);
  outline: none;
}

:root {
  --primary: #0a7a3f;
}

/* Section spacing */
#contact {
  background: #ffffff; /* plain white */
}

/* Cards */
#contact .card {
  border-radius: 12px;
  background: #fff;
}

/* Primary button – brand green */
.btn-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus {
  background: #075c2f !important;
  border-color: #075c2f !important;
}

/* Inputs */
#contact .form-control:focus,
#contact .form-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 0.15rem rgba(10, 122, 63, 0.25) !important;
}


/* Make controls visible & accessible */
.carousel-control-prev, .carousel-control-next {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0,0,0,0.06);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-control-prev-icon,
.carousel-control-next-icon { filter: invert(10%); }

/* Responsive tweaks */
@media (max-width: 991.98px) {
  #awardsCarousel .carousel-item img { max-width: 160px; }
  .award-highlight { margin-top: 1rem; }
}

/* Accessibility focus */
.user-is-tabbing .thumb-btn:focus { box-shadow: 0 0 0 6px rgba(10,122,63,0.12); outline: none; }

/* Contact section tuned visuals */

/* Page basics */
html,body { height:100%; background:var(--bg); color:var(--muted-900); -webkit-font-smoothing:antialiased; }
.container { max-width: var(--content-max); }

/* Skip link */
.skip-link { position: absolute; left: .75rem; top: -40px; background: #000; color: #fff; padding: .5rem .75rem; z-index: 1000; border-radius: 6px; transition: top 150ms; }
.skip-link:focus { top: .75rem; outline: none; }

/* Header */
.site-header { padding: .6rem 0; background: #fff; }
.brand-title { color: var(--primary); font-weight:700; font-size:1rem; }

/* Buttons */
.btn-primary, .btn-success { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: none; }
.btn-primary:hover, .btn-success:hover, .btn-primary:focus, .btn-success:focus { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: var(--focus); color: #fff; outline: none; transition: var(--transition); }
.btn-outline-secondary { border-color: rgba(55,65,81,0.12); }

/* Active language toggle */
.active-lang { background: var(--primary); color: #fff !important; border-color: var(--primary); }

/* Typography */
.display-5 { font-weight: 700; line-height:1.03; }
.lead { font-size:1.125rem; color:var(--muted-700); }

/* Hero image */
.hero-device { max-width: 100%; height: auto; border-radius: 18px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08); }

/* Product grid (center image with 4 cards around) */
.product-grid {
  display: grid;
  grid-template-areas:
    "top top top"
    "left center right"
    "bottom bottom bottom";
  gap: 1.25rem;
  align-items: center;
  justify-items: center;
}
.product-grid .top { grid-area: top; width: min(56ch, 100%); }
.product-grid .left { grid-area: left; width: 100%; max-width: 320px; }
.product-grid .product-center { grid-area: center; }
.product-grid .right { grid-area: right; width: 100%; max-width: 320px; }
.product-grid .bottom { grid-area: bottom; width: min(56ch, 100%); }

.feature-card { border-radius: 12px; transition: transform var(--transition), box-shadow var(--transition); }
.feature-card:focus, .feature-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(15,23,42,0.10); outline: none; }

/* Feature icons */
.feature-icon { font-size: 1.6rem; line-height:1; min-width:36px; }

/* Why bullets */
.bullet { color: var(--primary); font-weight:700; }

/* Carousel images */
.carousel .img-fluid { max-width: 220px; }

/* Contact form */
.form-control:focus { box-shadow: var(--focus); border-color: var(--primary-dark); }

/* Footer */
footer { font-size:.95rem; }

/* Small screens: stack product grid vertically */
@media (max-width: 991.98px) {
  .product-grid {
    grid-template-areas:
      "center"
      "top"
      "left"
      "right"
      "bottom";
  }
  .product-grid .top, .product-grid .left, .product-grid .right, .product-grid .bottom { max-width: 100%; }
  .brand-title { display:block; }
}

/* Keyboard focus visible only when user tabs */
.user-is-tabbing :focus {
  box-shadow: var(--focus);
  outline: none;
  border-radius: 8px;
}

/* Accessibility helpers */
.visually-hidden-focusable { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.visually-hidden-focusable:focus { position:static; left:auto; width:auto; height:auto; }

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Footer brand style */
.footer-green {
  background: #0a7a3f; /* brand primary green */
}

/* White links with subtle hover effect */
.footer-link {
  color: #ffffffcc;
  text-decoration: none;
}
.footer-link:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Social icon buttons */
.footer-social {
  color: white;
  font-size: 1.3rem;
  transition: opacity .2s ease;
}
.footer-social:hover {
  opacity: 0.7;
}

/* Divider line */
.footer-divider {
  border-color: rgba(255, 255, 255, 0.25);
}