/* Regular template 36: forest green with sage surfaces. Images stay original. */
:root {
  --forest-primary: #256b45;
  --forest-hover: #194f33;
  --forest-ink: #20392a;
  --forest-surface: #f2f7ef;
  --forest-border: #d6e2d3;
  --swiper-theme-color: #256b45;
}

.header .header-bottom {
  background-color: #f7faf4;
  border-bottom-color: var(--forest-border);
}

.section-introduction {
  isolation: isolate;
}

.section-introduction .section-introduction-bg {
  z-index: -2;
}

/* Tint only the decorative backdrop; content images, logos and QR codes
   keep their original colors and rendering. */
.section-introduction::after {
  background: linear-gradient(135deg, rgba(220, 239, 222, 0.87), rgba(248, 250, 241, 0.74) 48%, rgba(210, 234, 216, 0.88));
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.section-about-us {
  background-color: #e9f3e5;
  background-image: linear-gradient(110deg, rgba(229, 242, 225, 0.9), rgba(242, 248, 236, 0.82)), url('../images/contact-us/about_banner@2x.webp');
}

.section-function .function-container .function-item .item-description .description-content .content-item.active,
.section-function .mobile-function-container .function-item .item-description .description-content .content-item.active {
  border-color: #b7d5bd;
  background-color: #e2f0e2;
}

.contact-qr-page-card,
.free-trial-panel__qr,
.download-help-steps {
  border-color: var(--forest-border);
}

.swiper-pagination-bullet-active,
.swiper-pagination .custom-bullet-active {
  background-color: var(--forest-primary);
}

.footer-container .footer-menu .menu-container .menu-main .main-right .right-item .item-list .contact,
.footer-container .footer-menu .menu-container .menu-main .foot-menu-list .link-item .color-link {
  color: #acd4b8;
}

.footer-container .footer-menu .menu-container .menu-main .main-right .right-item .item-list .contact:hover,
.footer-container .footer-menu .menu-container .menu-main .foot-menu-list .link-item .color-link:hover {
  color: #d6eadc;
}

a:focus-visible,
button:focus-visible,
[role='button']:focus-visible {
  outline-color: var(--forest-primary);
}

::selection {
  background-color: #cce4ce;
  color: #173d28;
}