*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  background: #ffffff;
  color: #263326;
  overflow-x: hidden;
  line-height: 1.7;
}

body.menu-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

section {
  position: relative;
}

:root {
  --green: #3b7c14;
  --green-dark: #28570c;
  --green-deep: #183c08;
  --green-light: #4f951e;

  --yellow: #ffd400;
  --yellow-dark: #eab900;

  --blue: #6ff50d;
  --blue-light: #eaf9fe;

  --white: #ffffff;
  --black: #10180e;

  --light: #f5f9f2;
  --border: #e1e9dc;

  --text: #263326;
  --muted: #788477;

  --footer: #173608;

  --shadow: 0 18px 50px rgba(35, 78, 16, 0.10);

  --container: 1240px;
  --header-height: 92px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: 25px;
  padding-right: 25px;
}

.section-about {
  padding: 50px 0;
}

.section-dark {
  background: #064e3b;
  color: #ffffff;
}

.section-heading {
  width: 100%;
  margin-top: 10px;
  max-width: 720px;
  margin: 0 auto 55px;
  text-align: center;
}

.section-heading .section-label {
  margin-top: 90px;
}

.section-heading h2 {
  color: var(--green-dark);
  font-size: 38px;
  line-height: 1.2;
  margin-bottom: 15px;
}

.section-heading h2 span {
  color: var(--blue);
}

.section-heading p {
  color: var(--muted);
  font-size: 20px;
  line-height: 1.9;
}

.section-heading.light h2 {
  color: #ffffff;
}

.section-heading.light p {
  color: #b9ccb1;
}

.section-label {
  display: inline-flex;
  align-items: center;
  color: var(--green);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 2px;
}

.section-dark .section-label,
.light .section-label {
  color: var(--yellow);
}

.yellow-line {
  width: 55px;
  height: 4px;
  margin: 0 0 24px;
  border-radius: 10px;
  background: var(--yellow);
}

.btn {
  min-height: 46px;
  padding: 13px 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  border-radius: 3px;

  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3px;

  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}

.btn i {
  font-size: 13px;
}

.btn-primary {
  background: var(--yellow);
  color: var(--green-dark);
}

.btn-primary:hover {
  background: #ffffff;
  color: var(--green-dark);
  transform: translateY(-3px);
}

.btn-outline {
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.btn-outline:hover {
  background: #ffffff;
  color: var(--green-dark);
  border-color: #ffffff;
}

.btn-green,
.green-button {
  background: var(--green);
  color: #ffffff;
}

.btn-green:hover,
.green-button:hover {
  background: var(--green-dark);
  color: #ffffff;
  transform: translateY(-3px);
}

.header {
  position: sticky;
  top: 0;
  z-index: 9999;

  width: 100%;

  background: #064E3B;

  border-bottom: 3px solid var(--yellow);

  box-shadow:
    0 5px 25px rgba(15, 45, 5, 0.18);
}

.header-inner {
  min-height: var(--header-height);

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;
}

.logo {
  width: 205px;
  flex: 0 0 205px;

  display: flex;
  align-items: center;
}

.logo img {
  width: 195px;
  max-width: 100%;
  height: auto;
}

.navigation {
  flex: 1;

  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.navigation nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}

.navigation nav a {
  position: relative;

  padding: 12px 10px;

  color: #ffffff;

  border-radius: 4px;

  font-size: 12px;
  font-weight: 800;

  white-space: nowrap;

  transition:
    color 0.3s ease,
    background-color 0.3s ease;
}

.navigation nav a:hover {
  color: var(--yellow);
}

.navigation nav a.active {
  color: var(--green-dark);
  background: var(--yellow);
}

.navigation nav a.active:hover {
  color: var(--green-dark);
}

.menu-toggle {
  display: none;

  width: 44px;
  height: 42px;

  flex: 0 0 44px;

  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 5px;

  background: rgba(255, 255, 255, 0.08);

  color: #ffffff;

  font-size: 20px;

  align-items: center;
  justify-content: center;

  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

.menu-toggle:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--green-dark);
}

.footer {
  background: #064E3B;
  color: #ffffff;
  border-top: 4px solid #ffd400;
}

.footer-grid {
  padding-top: 65px;
  padding-bottom: 55px;

  display: grid;

  grid-template-columns:
    1.5fr 1fr 1fr 1.2fr;

  gap: 55px;
}

.footer-logo {
  display: inline-block;

  width: 190px;

  margin-bottom: 20px;
}

.footer-logo img {
  width: 180px;
  height: auto;
}

.footer-brand p {
  width: 100%;
  max-width: 310px;

  color: #fff;

  font-size: 15px;
  line-height: 1.9;
}

.social-icons {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;

  margin-top: 20px;
}

.social-icons a {
  width: 34px;
  height: 34px;

  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;

  color: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 11px;

  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.social-icons a:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--green-dark);

  transform: translateY(-3px);
}

.footer-column h3 {
  position: relative;

  color: #ffffff;

  font-size: 20px;

  margin-bottom: 25px;
  padding-bottom: 11px;
}

.footer-column h3::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 28px;
  height: 3px;

  border-radius: 10px;

  background: var(--yellow);
}

.footer-column > a {
  display: block;

  width: fit-content;

  color: #cbd8c6;

  font-size: 16px;

  margin-bottom: 13px;

  transition:
    color 0.25s ease,
    padding-left 0.25s ease;
}

.footer-column > a:hover {
  color: var(--yellow);
  padding-left: 4px;
}

.contact-item {
  display: flex;
  align-items: flex-start;

  gap: 11px;

  margin-bottom: 17px;
}

.contact-item i {
  width: 18px;

  flex: 0 0 18px;

  color: var(--yellow);

  font-size: 13px;

  margin-top: 2px;
}

.contact-item p {
  color: #cbd8c6;

  font-size: 16px;
  line-height: 1.7;

  overflow-wrap: anywhere;
}

.footer-bottom {
  background: #124E3C;

  border-top:
    1px solid rgba(255, 255, 255, 0.08);
}

.footer-bottom-inner {
  min-height: 65px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;
}

.footer-bottom p {
  color: #b9c8b5;

  font-size: 16px;
}

.footer-bottom strong {
  color: #ffffff;
}

@media (max-width: 1150px) {

  :root {
    --header-height: 82px;
  }

  .container {
    padding-left: 22px;
    padding-right: 22px;
  }

  .header-inner {
    gap: 15px;
  }

  .logo {
    width: 175px;
    flex-basis: 175px;
  }

  .logo img {
    width: 170px;
  }

  .navigation nav {
    gap: 0;
  }

  .navigation nav a {
    padding: 10px 7px;
    font-size: 9px;
  }

  .footer-grid {
    gap: 35px;
  }
}


@media (max-width: 991px) {

  :root {
    --header-height: 76px;
  }

  .section {
    padding: 80px 0;
  }


  /* Header */

  .header-inner {
    min-height: var(--header-height);
  }

  .logo {
    width: 180px;
    flex-basis: 180px;
  }

  .logo img {
    width: 170px;
  }

  .menu-toggle {
    display: flex;
  }

  .navigation {
    display: none;

    position: absolute;

    top: 100%;
    left: 0;

    width: 100%;

    padding: 12px 20px 20px;

    background: var(--green-dark);

    border-top:
      1px solid rgba(255, 255, 255, 0.12);

    box-shadow:
      0 15px 25px rgba(0, 0, 0, 0.18);
  }

  .navigation.show {
    display: block;
  }

  .navigation nav {
    width: 100%;

    flex-direction: column;
    align-items: stretch;

    gap: 4px;
  }

  .navigation nav a {
    width: 100%;

    padding: 13px 15px;

    text-align: center;

    font-size: 11px;
  }


  /* Footer */

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 40px 30px;

    padding-top: 55px;
    padding-bottom: 45px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-brand p {
    max-width: 550px;
  }

  .footer-bottom-inner {
    min-height: 60px;
  }


  /* Common existing grids */

  .about-intro-grid,
  .quality-grid,
  .product-highlight-grid,
  .research-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .vision-grid {
    grid-template-columns: 1fr;
  }

  .vision-container {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .about-page-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .infra-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .why-us {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-visual,
  .about-image,
  .research-visual,
  .vision-image {
    max-width: 700px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .highlight-visual,
  .quality-visual {
    height: 360px;
  }

  .vision-content h1 {
    font-size: 40px;
  }

  .hero {
    height: 590px;
  }

  .hero-container {
    padding-top: 45px;
    padding-bottom: 130px;
  }

  .hero-content {
    max-width: 590px;
  }

  .hero-content h1 {
    font-size: 52px;
  }

  .hero-info-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    padding-top: 8px;
    padding-bottom: 8px;
  }

  .hero-info-item:nth-child(2) {
    border-right: 0;
  }
}

@media (max-width: 767px) {

  .container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .section {
    padding: 65px 0;
  }


  /* Header */

  :root {
    --header-height: 70px;
  }

  .header-inner {
    min-height: var(--header-height);

    gap: 15px;
  }

  .logo {
    width: 155px;
    flex-basis: 155px;
  }

  .logo img {
    width: 150px;
  }

  .menu-toggle {
    width: 42px;
    height: 40px;
    flex-basis: 42px;

    font-size: 18px;
  }

  .navigation {
    padding: 10px 15px 15px;
  }

  .navigation nav a {
    padding: 12px;

    font-size: 10px;
  }


  /* Section Heading */

  .section-heading {
    margin-bottom: 38px;
  }

  .section-heading h2 {
    font-size: 30px;
  }

  .section-heading p {
    font-size: 20px;
  }


  /* Footer */

  .footer-grid {
    grid-template-columns: 1fr;

    gap: 35px;

    padding-top: 50px;
    padding-bottom: 40px;
  }

  .footer-brand {
    grid-column: auto;
  }

  .footer-logo {
    width: 175px;
    margin-bottom: 16px;
  }

  .footer-logo img {
    width: 165px;
  }

  .footer-brand p {
    max-width: 100%;
    font-size: 10px;
  }

  .footer-column h3 {
    font-size: 13px;
    margin-bottom: 20px;
  }

  .footer-column > a {
    font-size: 16px;
    margin-bottom: 11px;
  }

  .contact-item {
    margin-bottom: 15px;
  }

  .contact-item p {
    font-size: 16px;
  }

  .footer-bottom-inner {
    min-height: auto;

    padding-top: 17px;
    padding-bottom: 17px;

    flex-direction: column;

    justify-content: center;
    text-align: center;

    gap: 7px;
  }

  .footer-bottom p {
    font-size: 16px;
  }


  /* Existing grids */

  .product-grid,
  .infra-grid,
  .why-us {
    grid-template-columns: 1fr;
  }

  .highlight-visual,
  .quality-visual {
    height: 300px;
  }

  .vision-content h1 {
    font-size: 34px;
  }

  .hero {
    height: auto;
    min-height: 570px;
  }

  .hero-content h1 {
    font-size: 42px;
  }

  .hero-info-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {

  .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .section {
    padding: 55px 0;
  }


  /* Header */

  .header-inner {
    min-height: 66px;
  }

  .logo {
    width: 135px;
    flex-basis: 135px;
  }

  .logo img {
    width: 132px;
  }

  .menu-toggle {
    width: 40px;
    height: 38px;
    flex-basis: 40px;
  }

  .navigation {
    padding-left: 10px;
    padding-right: 10px;
  }

  .navigation nav a {
    padding: 11px;

    font-size: 10px;
  }


  /* Heading */

  .section-heading h2 {
    font-size: 26px;
  }

  .section-heading p {
    font-size: 20px;
  }

  .section-label {
    font-size: 20px;
    letter-spacing: 1.5px;
  }


  /* Footer */

  .footer-grid {
    gap: 30px;

    padding-top: 42px;
    padding-bottom: 35px;
  }

  .footer-logo img {
    width: 150px;
  }

  .footer-brand p {
    font-size: 9px;
    line-height: 1.8;
  }

  .footer-column h3 {
    font-size: 20px;
  }

  .footer-column > a,
  .contact-item p {
    font-size: 16px;
  }

  .contact-item {
    gap: 9px;
  }

  .contact-item i {
    font-size: 12px;
  }

  .social-icons {
    margin-top: 17px;
  }

  .social-icons a {
    width: 32px;
    height: 32px;
    font-size: 10px;
  }


  /* Buttons */

  .btn {
    width: 100%;
    max-width: 100%;

    min-height: 44px;

    padding: 11px 18px;

    font-size: 13px;
  }


  /* Hero */

  .hero-content h1 {
    font-size: 34px;
    line-height: 1.15;
  }

  .hero {
    min-height: 520px;
  }

  .highlight-visual,
  .quality-visual {
    height: 250px;
  }

  .vision-content h1 {
    font-size: 30px;
  }
}

@media (max-width: 360px) {

  .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .logo {
    width: 120px;
    flex-basis: 120px;
  }

  .logo img {
    width: 118px;
  }

  .menu-toggle {
    width: 38px;
    height: 36px;
    flex-basis: 38px;

    font-size: 16px;
  }

  .section-heading h2 {
    font-size: 24px;
  }

  .hero-content h1 {
    font-size: 30px;
  }
}


.navigation nav a:focus-visible,
.menu-toggle:focus-visible,
.footer a:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}


@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Hero page */
/* ================= MAIN SECTION CSS ================= */

/* === ROOT VARIABLES (Harmonized with navbar/footer dark green theme) === */
:root {
  --green: #3b7c14;
  --green-dark: #28570c;
  --green-deep: #183c08;
  --green-light: #4f951e;
  --green-bright: #5aa82a;

  --yellow: #ffd400;
  --yellow-dark: #eab900;

  /* Removed clashing lime — replaced with warm gold for accents */
  --accent: #ffd400;
  --accent-soft: #fff4b8;

  --white: #ffffff;
  --black: #10180e;

  --light: #f5f9f2;
  --light-alt: #eef4e9;
  --border: #e1e9dc;

  --text: #263326;
  --muted: #788477;

  --shadow: 0 18px 50px rgba(35, 78, 16, 0.10);
  --shadow-hover: 0 25px 60px rgba(35, 78, 16, 0.16);
}

/* === CONTAINER & SECTION === */
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding-left: 25px;
  padding-right: 25px;
}

.section {
  padding: 30px 0;
}

.section-dark {
  position: relative;
  color: #ffffff;
  background: #30402c;
}

/* === SECTION HEADINGS === */
.section-heading {
  width: 100%;
  max-width: 720px;
  margin: 0 auto 55px;
  text-align: center;
}

.section-heading .section-label {
  margin-top: 90px;
}

.section-heading h2 {
  margin-bottom: 15px;
  color: var(--green-dark);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.2;
}

/* Heading accent now uses warm yellow (not lime) */
.section-heading h2 span,
.about-content h2 span,
.quality-content h2 span,
.highlight-content h2 span,
.research-content h2 span,
.cta h2 span {
  color: var(--yellow-dark);
}

.section-heading p {
  color: var(--muted);
  font-size: 20px;
  line-height: 1.9;
}

.section-heading.light h2 {
  color: #ffffff;
}

.section-heading.light p {
  color: #b9ccb1;
}

.section-label {
  display: inline-flex;
  align-items: center;
  color: var(--green);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 2px;
  line-height: 1.4;
}

.section-dark .section-label,
.light .section-label {
  color: var(--yellow);
}

.yellow-line {
  width: 55px;
  height: 4px;
  margin: 0 0 24px;
  border-radius: 20px;
  background: var(--yellow);
}

/* === BUTTONS === */
.btn {
  min-height: 46px;
  padding: 13px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.4px;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.btn i {
  font-size: 11px;
}

.btn-primary {
  color: var(--green-dark);
  background: var(--yellow);
}

.btn-primary:hover {
  color: var(--green-dark);
  background: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.btn-outline {
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: transparent;
}

.btn-outline:hover {
  color: var(--green-dark);
  background: #ffffff;
  border-color: #ffffff;
  transform: translateY(-3px);
}

.btn-green,
.green-button {
  color: #ffffff;
  background: var(--green);
}

.btn-green:hover,
.green-button:hover {
  color: #ffffff;
  background: var(--green-dark);
  transform: translateY(-3px);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--green);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.text-link i {
  transition: transform 0.3s ease;
}

.text-link:hover {
  color: var(--green-dark);
}

.text-link:hover i {
  transform: translateX(5px);
}

/* === HERO === */
.hero {
  position: relative;
  width: 100%;
  height: 650px;
  overflow: hidden;
  background: #102d05;
}

.hero-slides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
  transition: opacity 0.8s ease, visibility 0.8s ease, transform 5s ease;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(15, 48, 4, 0.92) 0%, rgba(25, 62, 7, 0.75) 38%, rgba(25, 62, 7, 0.35) 72%, rgba(0, 0, 0, 0.10) 100%);
}

.hero-container {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  min-height: 100%;
  padding-top: 30px;
  padding-bottom: 110px;
}

.hero-content {
  width: 100%;
  max-width: 680px;
  color: #ffffff;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--yellow);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
}

.hero-kicker i {
  display: block;
  width: 32px;
  height: 3px;
  border-radius: 10px;
  background: var(--yellow);
}

.hero-content h1 {
  margin-bottom: 20px;
  color: #ffffff;
  font-size: 60px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -1px;
}

/* Hero heading accent — warm yellow, matches kicker */
.hero-content h1 span {
  display: block;
  color: var(--yellow);
}

.hero-content p {
  max-width: 610px;
  margin-bottom: 30px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  line-height: 1.9;
}

.hero-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-arrow {
  position: absolute;
  z-index: 5;
  top: 50%;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.20);
  transform: translateY(-50%);
  transition: all 0.3s ease;
}

.hero-arrow:hover {
  color: var(--green-dark);
  background: var(--yellow);
  border-color: var(--yellow);
  transform: translateY(-50%) scale(1.08);
}

.hero-prev {
  left: 25px;
}

.hero-next {
  right: 25px;
}

.hero-dots {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 112px;
  display: flex;
  align-items: center;
  gap: 7px;
  transform: translateX(-50%);
}

.hero-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transition: all 0.3s ease;
}

.hero-dot.active {
  width: 28px;
  border-radius: 10px;
  background: var(--yellow);
}

.hero-info {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(19, 53, 5, 0.94);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.hero-info-inner {
  min-height: 82px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.hero-info-item {
  min-height: 55px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
}

.hero-info-item:last-child {
  border-right: 0;
}

.hero-info-item strong {
  color: var(--yellow);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}

.hero-info-item span {
  margin-top: 3px;
  color: #c7d5c1;
  font-size: 9px;
  line-height: 1.4;
}

/* =========================================
   ABOUT INTRO
========================================= */

.about-intro {
    position: relative;
    overflow: hidden;
    background: #ffffff;
}


/* =========================================
   GRID
========================================= */

.about-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    align-items: center;

    gap: 85px;
}


/* =========================================
   VISUAL AREA
========================================= */

.about-visual {
    position: relative;

    width: 100%;
    max-width: 560px;

    min-height: 500px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 25px 25px 65px 0;
}


/* =========================================
   IMAGE FRAME
========================================= */

.about-image-frame {
    position: relative;
    z-index: 2;

    width: 100%;

    padding: 10px;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            var(--green),
            #8dbb55,
            var(--yellow)
        );

    box-shadow:
        0 25px 55px rgba(35, 78, 16, 0.18);

    transform: rotate(-1deg);

    transition:
        transform .5s ease,
        box-shadow .5s ease;
}

.about-image-frame:hover {
    transform: rotate(0deg) translateY(-5px);

    box-shadow:
        0 30px 65px rgba(35, 78, 16, 0.24);
}


/* =========================================
   IMAGE
========================================= */

.about-image-card {
    position: relative;

    width: 100%;
    height: 430px;

    overflow: hidden;

    border-radius: 17px;

    background: #dfe8dc;
}


.about-image-card img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 1s cubic-bezier(.2,.7,.2,1);
}

.about-image-frame:hover img {
    transform: scale(1.08);
}


/* =========================================
   IMAGE OVERLAY
========================================= */

.about-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(5, 50, 29, 0.02) 20%,
            rgba(5, 50, 29, 0.72) 100%
        );

    pointer-events: none;
}


/* =========================================
   IMAGE TEXT
========================================= */

.about-image-text {
    position: absolute;

    left: 28px;
    bottom: 27px;

    display: flex;
    flex-direction: column;

    z-index: 3;
}

.about-image-text span {
    color: var(--yellow);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 5px;
}

.about-image-text strong {
    margin-top: 3px;

    color: #ffffff;

    font-size: 36px;
    font-weight: 800;

    line-height: 1;
}


/* =========================================
   DECORATIVE SHAPES
========================================= */

.about-decor {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


/* yellow circle */

.about-decor-one {
    width: 85px;
    height: 85px;

    top: 5px;
    left: -25px;

    border: 12px solid rgba(255, 212, 0, .22);

    animation: aboutFloat 5s ease-in-out infinite;
}


/* green dots */

.about-decor-two {
    width: 120px;
    height: 120px;

    right: -35px;
    bottom: 55px;

    border: 18px solid rgba(62, 139, 42, .10);

    animation: aboutFloatReverse 6s ease-in-out infinite;
}


/* =========================================
   EXPERIENCE CARD
========================================= */

.experience-card {
    position: absolute;

    z-index: 6;

    right: -22px;
    bottom: 22px;

    min-width: 205px;

    padding: 15px 18px;

    display: flex;
    align-items: center;

    gap: 12px;

    border-radius: 14px;

    background: #ffffff;

    border: 1px solid #e4eee0;

    box-shadow:
        0 18px 40px rgba(35, 78, 16, .17);

    animation:
        experienceFloat 4s ease-in-out infinite;
}


/* icon */

.experience-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    color: var(--green-dark);

    background: #eef7e9;

    font-size: 19px;
}


/* experience text */

.experience-info {
    display: flex;
    flex-direction: column;
}

.experience-card strong {
    color: var(--green-dark);

    font-size: 28px;
    font-weight: 800;

    line-height: 1;
}

.experience-card span {
    margin-top: 5px;

    color: var(--muted);

    font-size: 10px;
    font-weight: 700;
}


/* =========================================
   FLOATING QUALITY CARD
========================================= */

.about-floating-card {
    position: absolute;

    z-index: 7;

    left: -28px;
    top: 105px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 11px 15px;

    border-radius: 12px;

    background: rgba(255,255,255,.96);

    border: 1px solid #e6efe3;

    box-shadow:
        0 14px 30px rgba(35,78,16,.13);

    animation:
        qualityFloat 5s ease-in-out infinite;
}


/* check circle */

.floating-check {
    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    background: var(--green);

    font-size: 12px;
}


/* floating text */

.about-floating-card strong {
    display: block;

    color: var(--green-dark);

    font-size: 12px;
}

.about-floating-card small {
    display: block;

    margin-top: 2px;

    color: var(--muted);

    font-size: 9px;
}


/* =========================================
   CONTENT
========================================= */

.about-content {
    width: 100%;
    max-width: 630px;
}


.about-content .section-label {
    display: inline-flex;

    align-items: center;

    color: var(--green);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2.5px;
}


.about-content h2 {
    margin: 12px 0 16px;

    color: var(--green-dark);

    font-size: 40px;
    font-weight: 800;

    line-height: 1.18;
}

.about-content h2 span {
    display: block;

    color: var(--green);
}


/* =========================================
   TITLE LINE
========================================= */

.about-title-line {
    position: relative;

    width: 70px;
    height: 4px;

    margin-bottom: 23px;

    border-radius: 20px;

    background: var(--yellow);
}

.about-title-line::after {
    content: "";

    position: absolute;

    left: 78px;
    top: 1px;

    width: 28px;
    height: 2px;

    background: var(--green);
}


/* =========================================
   PARAGRAPHS
========================================= */

.about-content p {
    margin-bottom: 16px;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.9;
}

.about-content .lead {
    color: var(--text);

    font-size: 17px;
    font-weight: 600;

    line-height: 1.8;
}


/* =========================================
   HIGHLIGHTS
========================================= */

.about-highlights {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin: 24px 0 27px;
}


.about-highlight {
    display: flex;
    align-items: center;

    gap: 11px;

    padding: 13px;

    border: 1px solid #e5eee1;

    border-radius: 12px;

    background: #f8fbf6;

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease;
}


.about-highlight:hover {
    transform: translateY(-4px);

    background: #ffffff;

    border-color: #cfe2c8;

    box-shadow:
        0 10px 25px rgba(35,78,16,.08);
}


/* highlight icon */

.about-highlight > span {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    color: var(--green-dark);

    background: #eaf5e6;
}

.about-highlight > span i {
    font-size: 16px;
}


/* highlight text */

.about-highlight strong {
    display: block;

    color: var(--green-dark);

    font-size: 12px;
}

.about-highlight small {
    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 9px;
}


/* =========================================
   KNOW MORE LINK
========================================= */

.about-link {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: var(--green-dark);

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 1px;

    text-decoration: none;

    transition: gap .3s ease;
}

.about-link i {
    color: var(--green);

    transition:
        transform .3s ease;
}

.about-link:hover {
    gap: 15px;
}

.about-link:hover i {
    transform: translateX(4px);
}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes experienceFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}


@keyframes qualityFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-7px) rotate(1deg);
    }
}


@keyframes aboutFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-12px) rotate(8deg);
    }
}


@keyframes aboutFloatReverse {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(10px) rotate(-8deg);
    }
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .about-intro-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .about-visual {
        max-width: 600px;

        margin: 0 auto;
    }

    .about-content {
        max-width: 100%;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 575px) {

    .about-intro {
        padding-top: 45px;
        padding-bottom: 45px;
    }

    .about-visual {
        min-height: 400px;

        padding: 15px 10px 55px 0;
    }

    .about-image-card {
        height: 330px;
    }

    .about-image-text {
        left: 20px;
        bottom: 20px;
    }

    .about-image-text strong {
        font-size: 28px;
    }

    .experience-card {
        right: -5px;
        bottom: 12px;

        min-width: 165px;

        padding: 11px 13px;
    }

    .experience-icon {
        width: 40px;
        height: 40px;

        flex-basis: 40px;

        font-size: 16px;
    }

    .experience-card strong {
        font-size: 23px;
    }

    .experience-card span {
        font-size: 8px;
    }

    .about-floating-card {
        left: -5px;
        top: 65px;

        padding: 8px 10px;
    }

    .floating-check {
        width: 30px;
        height: 30px;
    }

    .about-content h2 {
        font-size: 32px;
    }

    .about-content .lead {
        font-size: 16px;
    }

    .about-highlights {
        grid-template-columns: 1fr;
    }

    .about-decor-one {
        left: -10px;
    }

    .about-decor-two {
        right: -20px;
    }

}

/* =========================================
   VISION / MISSION / VALUES
========================================= */

.vision {
    position: relative;
    overflow: hidden;
    padding: 30px 0 70px;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(87, 170, 54, 0.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(255, 212, 0, 0.06),
            transparent 28%
        ),
        #073d27;
}


/* decorative background */

.vision::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -250px;
    right: -180px;

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 50%;
}

.vision::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    bottom: -220px;
    left: -150px;

    border: 1px solid rgba(255,255,255,.06);

    border-radius: 50%;
}


/* =========================================
   HEADING
========================================= */

.vision .section-heading {
    position: relative;
    z-index: 2;

    max-width: 720px;

    margin-bottom: 42px;
}

.vision .section-heading h2 {
    margin: 12px 0 15px;

    color: #ffffff;

    font-size: 40px;
    line-height: 1.18;
}

.vision .section-heading h2 span {
    color: var(--yellow);
}

.vision .section-heading p {
    max-width: 650px;

    color: rgba(255,255,255,.72);

    font-size: 15px;
    line-height: 1.9;
}


/* =========================================
   CARDS GRID
========================================= */

.vision-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;

    margin-bottom: 30px;
}


/* =========================================
   CARD
========================================= */

.vision-card {
    position: relative;

    min-height: 320px;

    padding: 34px 30px 32px;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.13);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.105),
            rgba(255,255,255,.045)
        );

    box-shadow:
        0 15px 35px rgba(0,0,0,.12);

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}


/* top yellow/green accent */

.vision-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--yellow),
            var(--green)
        );
}


/* subtle bottom decoration */

.vision-card::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -70px;
    bottom: -80px;

    border-radius: 50%;

    background: rgba(90,170,50,.08);
}


/* =========================================
   HOVER
========================================= */

.vision-card:hover {
    transform: translateY(-8px);

    border-color: rgba(255,212,0,.45);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.14),
            rgba(255,255,255,.065)
        );

    box-shadow:
        0 22px 45px rgba(0,0,0,.20);
}


/* =========================================
   NUMBER
========================================= */

.card-number {
    position: absolute;

    top: 20px;
    right: 24px;

    color: rgba(255,255,255,.14);

    font-size: 52px;
    font-weight: 800;

    line-height: 1;
}


/* =========================================
   ICON
========================================= */

.card-icon {
    position: relative;
    z-index: 2;

    width: 58px;
    height: 58px;

    margin-bottom: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    color: var(--green-dark);

    background: var(--yellow);

    font-size: 20px;

    box-shadow:
        0 8px 20px rgba(255,212,0,.16);

    transition:
        transform .35s ease,
        border-radius .35s ease;
}

.vision-card:hover .card-icon {
    transform: rotate(-5deg) scale(1.06);

    border-radius: 50%;
}


/* =========================================
   CARD TITLE
========================================= */

.vision-card h3 {
    position: relative;
    z-index: 2;

    margin-bottom: 13px;

    color: #ffffff;

    font-size: 21px;
    font-weight: 700;
}


/* =========================================
   CARD TEXT
========================================= */

.vision-card p {
    position: relative;
    z-index: 2;

    max-width: 390px;

    margin: 0;

    color: rgba(255,255,255,.70);

    font-size: 14px;

    line-height: 1.9;
}


/* =========================================
   FEATURED MISSION CARD
========================================= */

.vision-card.featured {
    border-color: rgba(255,212,0,.45);

    background:
        linear-gradient(
            145deg,
            #0d6540,
            #084b31
        );

    box-shadow:
        0 20px 45px rgba(0,0,0,.18);
}


/* featured accent */

.vision-card.featured::before {
    height: 5px;

    background: var(--yellow);
}


/* featured number */

.vision-card.featured .card-number {
    color: rgba(255,212,0,.14);
}


/* featured icon */

.vision-card.featured .card-icon {
    color: #ffffff;

    background: var(--green);

    border: 1px solid rgba(255,255,255,.20);

    box-shadow:
        0 8px 20px rgba(0,0,0,.15);
}


/* featured title */

.vision-card.featured h3 {
    color: #ffffff;
}


/* featured paragraph */

.vision-card.featured p {
    color: rgba(255,255,255,.78);
}


/* =========================================
   LABEL
========================================= */

.vision .section-label {
    color: var(--yellow);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {

    .vision-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .vision-card {
        min-height: auto;
        padding: 30px;
    }

    .vision .section-heading h2 {
        font-size: 36px;
    }

}


@media (max-width: 575px) {

    .vision {
        padding: 45px 0 55px;
    }

    .vision .section-heading {
        margin-bottom: 30px;
    }

    .vision .section-heading h2 {
        font-size: 31px;
    }

    .vision .section-heading p {
        font-size: 14px;
    }

    .vision-card {
        padding: 28px 24px;

        border-radius: 15px;
    }

    .card-number {
        font-size: 42px;
        top: 17px;
        right: 20px;
    }

    .card-icon {
        width: 52px;
        height: 52px;

        margin-bottom: 20px;
    }

    .vision-card h3 {
        font-size: 19px;
    }

    .vision-card p {
        font-size: 14px;
    }

}

/* === PRODUCTS === */
.products {
  background: var(--light);
}

.product-grid {
  display: grid;
  margin-bottom: 90px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.product-card,
.infra-card {
  position: relative;
  min-width: 0;
  padding: 34px 27px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #ffffff;
  box-shadow: 0 5px 20px rgba(35, 78, 16, 0.04);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.product-card::after,
.infra-card::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  right: -45px;
  bottom: -45px;
  border-radius: 50%;
  background: rgba(59, 124, 20, 0.06);
  transition: transform 0.4s ease;
}

.product-card:hover,
.infra-card:hover {
  transform: translateY(-8px);
  border-color: #c9ddc0;
  box-shadow: var(--shadow-hover);
}

.product-card:hover::after,
.infra-card:hover::after {
  transform: scale(2);
}

.product-number {
  position: absolute;
  top: 18px;
  right: 20px;
  color: #ffd400;
  font-size: 20px;
  font-weight: 800;
}

.product-icon,
.infra-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--green);
  background: #eef7e9;
  font-size: 20px;
  transition: all 0.3s ease;
}

.product-card:hover .product-icon,
.infra-card:hover .infra-icon {
  color: var(--green-dark);
  background: var(--yellow);
  transform: rotate(-5deg);
}

.product-card h3,
.infra-card h3 {
  margin-bottom: 12px;
  color: var(--green-dark);
  font-size: 18px;
  line-height: 1.35;
}

.product-card p,
.infra-card p {
  min-height: 76px;
  margin-bottom: 22px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}

.product-link {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
}

.product-link i {
  transition: transform 0.3s ease;
}

.product-card:hover .product-link i {
  transform: translateX(5px);
}

/* === PRODUCT HIGHLIGHT === */
.product-highlight {
  position: relative;
  overflow: hidden;
  padding: 100px 0;
  background: linear-gradient(135deg, #e8f0e3, #f2f8ee);
}

.product-highlight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 80px;
}

.highlight-content {
  max-width: 650px;
}

.highlight-content h2 {
  margin: 12px 0 18px;
  color: var(--green-dark);
  font-size: 40px;
  line-height: 1.18;
}

.highlight-content p {
  margin-bottom: 25px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.9;
}

.highlight-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 25px;
  margin-bottom: 30px;
}

.highlight-list div {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}

.highlight-list i {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--green-dark);
  background: var(--yellow);
  font-size: 9px;
}

.highlight-visual {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.highlight-circle {
  position: absolute;
  border-radius: 50%;
}

.highlight-circle.outer {
  width: 100%;
  height: 100%;
  border: 5px dashed rgba(59, 124, 20, 0.30);
  animation: spin 25s linear infinite;
}

.highlight-circle.middle {
  width: 72%;
  height: 72%;
  border: 5px solid rgba(255, 212, 0, 0.35);
  animation: spinReverse 18s linear infinite;
}

.highlight-center {
  position: relative;
  z-index: 2;
  width: 48%;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(135deg, var(--green), var(--green-deep));
  box-shadow: 0 20px 50px rgba(35, 78, 16, 0.20);
}

.highlight-center i {
  margin-bottom: 9px;
  color: var(--yellow);
  font-size: 28px;
}

.highlight-center strong {
  font-size: 18px;
  line-height: 1.2;
}

.highlight-center span {
  margin-top: 3px;
  color: #b9ccb1;
  font-size: 9px;
  letter-spacing: 2px;
}

/* =========================
   QUALITY SECTION
========================= */

.quality {
    padding: 30px 0;
    background: #ffffff;
}

.quality-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    align-items: center;
    gap: 80px;
}

.quality-content {
    max-width: 650px;
}

.quality-content h2 {
    margin: 12px 0 20px;
    color: var(--green-dark);
    font-size: 40px;
    line-height: 1.18;
}

.quality-content > p {
    margin-bottom: 25px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.9;
}


/* =========================
   QUALITY POINTS
========================= */

.quality-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 25px;
    margin-bottom: 30px;
}

.quality-points div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quality-points span {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--green-dark);
    background: #eef7e9;
}

.quality-points span i {
    font-size: 10px;
}

.quality-points strong {
    color: var(--text);
    font-size: 16px;
}


/* =========================
   QUALITY VISUAL
========================= */

.quality-visual {
    position: relative;
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at center,
            #f0f9e9 0%,
            #f8fcf5 40%,
            #ffffff 72%
        );
}


/* =========================
   ORBITS
========================= */

.quality-orbit {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.orbit-outer {
    width: 92%;
    height: 92%;
    border: 1px solid rgba(46, 125, 50, 0.16);
}

.orbit-outer::before,
.orbit-outer::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
}

.orbit-outer::before {
    top: 8%;
    right: 15%;
}

.orbit-outer::after {
    bottom: 12%;
    left: 10%;
}


.orbit-main {
    width: 78%;
    height: 78%;

    border: 20px solid transparent;

    border-top-color: rgba(71, 161, 44, 0.88);
    border-right-color: rgba(99, 181, 45, 0.88);
    border-bottom-color: rgba(20, 93, 47, 0.95);
    border-left-color: rgba(20, 93, 47, 0.95);

    transform: rotate(-25deg);

    filter: drop-shadow(
        0 12px 20px rgba(35, 78, 16, 0.10)
    );
}


.orbit-inner {
    width: 61%;
    height: 61%;

    border: 7px solid #ffffff;

    box-shadow:
        0 0 0 2px rgba(44, 130, 47, 0.15),
        inset 0 0 25px rgba(44, 130, 47, 0.08),
        0 15px 35px rgba(35, 78, 16, 0.12);
}


/* =========================
   YELLOW ACCENT
========================= */

.orbit-main::after {
    content: "";
    position: absolute;

    width: 34%;
    height: 9px;

    right: -6px;
    bottom: 19%;

    border-radius: 20px;

    background: var(--yellow);

    transform: rotate(12deg);
}


/* =========================
   CENTER BADGE
========================= */

.quality-center {
    position: relative;
    z-index: 5;

    width: 44%;
    aspect-ratio: 1 / 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 35% 25%,
            #23904c 0%,
            #08713b 45%,
            #045b2d 100%
        );

    border: 8px solid #ffffff;

    box-shadow:
        0 0 0 2px rgba(32, 117, 48, 0.20),
        0 20px 45px rgba(35, 78, 16, 0.22);
}


/* subtle inner border */

.quality-center::before {
    content: "";
    position: absolute;
    inset: 12px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,0.25);

    pointer-events: none;
}


/* =========================
   CENTER LEAF
========================= */

.quality-center-leaf {
    display: flex;
    gap: 2px;
    margin-bottom: 8px;

    color: #b7df38;
}

.quality-center-leaf i {
    font-size: 17px;
}

.quality-center-leaf i:first-child {
    transform: rotate(-25deg);
}

.quality-center-leaf i:last-child {
    transform: rotate(25deg);
}


/* =========================
   CENTER TEXT
========================= */

.quality-center span {
    color: var(--yellow);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 3px;
}

.quality-center strong {
    margin-top: 3px;

    color: #ffffff;

    font-size: 30px;
    font-weight: 800;

    line-height: 1;
    letter-spacing: 1px;
}

.quality-line {
    width: 70px;
    height: 1px;

    margin: 10px 0 6px;

    background: rgba(255,255,255,0.55);
}

.quality-center small {
    color: #d2e3cf;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 3px;
}


/* =========================
   FLOATING ICONS
========================= */

.quality-icon {
    position: absolute;
    z-index: 8;

    width: 68px;
    height: 68px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: var(--green-dark);

    background: #ffffff;

    border: 4px solid #e9f6e5;

    box-shadow:
        0 10px 25px rgba(35, 78, 16, 0.14),
        0 0 0 1px rgba(35, 120, 50, 0.08);

    transition: all 0.3s ease;
}

.quality-icon i {
    font-size: 24px;
}

.quality-icon:hover {
    transform: scale(1.1);
    background: #f3faef;
    box-shadow:
        0 15px 30px rgba(35, 78, 16, 0.20);
}


/* positions */

.qi-top {
    top: 7%;
    left: 50%;
    transform: translateX(-50%);
}

.qi-right {
    top: 30%;
    right: 4%;
}

.qi-bottom {
    bottom: 7%;
    left: 50%;
    transform: translateX(-50%);
}

.qi-left {
    top: 55%;
    left: 4%;
}


/* =========================
   LEAVES
========================= */

.quality-leaf {
    position: absolute;
    z-index: 3;

    color: #54a92e;

    opacity: 0.9;
}

.quality-leaf i {
    font-size: 42px;
}

.leaf-top {
    top: 5%;
    left: 13%;

    transform: rotate(-35deg);
}

.leaf-bottom {
    bottom: 6%;
    right: 8%;

    transform: rotate(35deg);
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 991px) {

    .quality-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .quality-content {
        max-width: 100%;
    }

    .quality-visual {
        max-width: 470px;
    }

}

@media (max-width: 575px) {

    .quality {
        padding: 45px 0;
    }

    .quality-content h2 {
        font-size: 32px;
    }

    .quality-points {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .quality-visual {
        max-width: 360px;
    }

    .quality-icon {
        width: 52px;
        height: 52px;
        border-width: 3px;
    }

    .quality-icon i {
        font-size: 18px;
    }

    .quality-center strong {
        font-size: 23px;
    }

    .quality-center span {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .quality-center small {
        font-size: 6px;
    }

    .quality-center-leaf i {
        font-size: 13px;
    }

    .orbit-main {
        border-width: 14px;
    }

    .leaf-top i,
    .leaf-bottom i {
        font-size: 28px;
    }

}

/* === INFRASTRUCTURE === */
.infrastructure {
  padding: 0px 0;
  overflow: hidden;
}

.infrastructure .product-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.infrastructure .infra-card,
.infrastructure .product-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.infrastructure .infra-card:hover,
.infrastructure .product-card:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 212, 0, 0.40);
}



.infrastructure .infra-icon {
  color: var(--green-dark);
  background: var(--yellow);
}

.infrastructure .infra-card h3,
.infrastructure .product-card h3 {
  color: #ffffff;
}

.infrastructure .infra-card p,
.infrastructure .product-card p {
  color: #b9ccb1;
}



.research {
    padding: 30px 0;
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #f7faf5 100%
    );
}

.research-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 90px;
}


/* =========================================
   RESEARCH VISUAL
========================================= */

.research-visual {
    position: relative;

    width: 100%;
    max-width: 520px;
    height: 470px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* soft background glow */

.research-glow {
    position: absolute;

    width: 330px;
    height: 330px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(75, 160, 55, 0.14) 0%,
        rgba(75, 160, 55, 0.05) 45%,
        transparent 72%
    );

    filter: blur(3px);
}


/* =========================================
   MAIN R&D CARD
========================================= */

.research-main-card {
    position: relative;
    z-index: 5;

    width: 245px;
    height: 245px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    background: linear-gradient(
        145deg,
        var(--green),
        var(--green-deep)
    );

    color: #ffffff;

    clip-path: polygon(
        50% 0%,
        88% 22%,
        100% 50%,
        88% 78%,
        50% 100%,
        12% 78%,
        0% 50%,
        12% 22%
    );

    filter: drop-shadow(
        0 20px 30px rgba(35, 78, 16, 0.20)
    );

    transition: transform .35s ease;
}

.research-main-card:hover {
    transform: scale(1.04);
}


/* inner hexagon */

.research-main-card::before {
    content: "";

    position: absolute;
    inset: 12px;

    clip-path: inherit;

    border: 1px solid rgba(255,255,255,.28);

    pointer-events: none;
}


/* =========================================
   MAIN ICON
========================================= */

.research-main-icon {
    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 12px;

    border-radius: 15px;

    background: rgba(255,255,255,.12);

    border: 1px solid rgba(255,255,255,.25);

    transform: rotate(0deg);
}

.research-main-icon i {
    color: var(--yellow);
    font-size: 24px;
}


/* =========================================
   MAIN TEXT
========================================= */

.research-main-card > span {
    color: var(--yellow);

    font-size: 27px;
    font-weight: 800;

    letter-spacing: 2px;
    line-height: 1;
}

.research-main-card strong {
    margin-top: 6px;

    color: #ffffff;

    font-size: 15px;
    letter-spacing: 2px;
}

.research-main-card small {
    margin-top: 9px;

    color: rgba(255,255,255,.70);

    font-size: 7px;
    letter-spacing: 1.5px;
}


/* =========================================
   CONNECTING LINES
========================================= */

.research-line {
    position: absolute;

    z-index: 1;

    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(59,124,20,.35),
        transparent
    );

    transform-origin: center;
}


/* top */

.line-1 {
    width: 125px;

    top: 125px;
    left: 50%;

    transform: translateX(-50%) rotate(-90deg);
}


/* right */

.line-2 {
    width: 125px;

    top: 50%;
    right: 65px;

    transform: translateY(-50%) rotate(0deg);
}


/* bottom */

.line-3 {
    width: 125px;

    bottom: 125px;
    left: 50%;

    transform: translateX(-50%) rotate(90deg);
}


/* left */

.line-4 {
    width: 125px;

    top: 50%;
    left: 65px;

    transform: translateY(-50%);
}


/* =========================================
   FLOATING RESEARCH NODES
========================================= */

.research-node {
    position: absolute;

    z-index: 6;

    min-width: 145px;

    padding: 12px 15px;

    display: flex;
    align-items: center;

    gap: 10px;

    background: #ffffff;

    border: 1px solid #e3eee0;

    border-radius: 14px;

    box-shadow:
        0 12px 30px rgba(35, 78, 16, 0.10);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.research-node:hover {
    box-shadow:
        0 18px 35px rgba(35, 78, 16, 0.16);

    transform: translateY(-5px);
}


/* =========================================
   NODE ICON
========================================= */

.node-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #eef7e9;

    color: var(--green-dark);
}

.node-icon i {
    font-size: 16px;
}


/* node text */

.research-node strong {
    display: block;

    color: var(--green-dark);

    font-size: 13px;
    line-height: 1.2;
}

.research-node small {
    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 10px;
}


/* =========================================
   NODE POSITIONS
========================================= */

.node-top {
    top: 18px;
    left: 50%;

    transform: translateX(-50%);
}

.node-top:hover {
    transform: translateX(-50%) translateY(-5px);
}


.node-right {
    top: 50%;
    right: 0;

    transform: translateY(-50%);
}

.node-right:hover {
    transform: translateY(-55%);
}


.node-bottom {
    bottom: 18px;
    left: 50%;

    transform: translateX(-50%);
}

.node-bottom:hover {
    transform: translateX(-50%) translateY(-5px);
}


.node-left {
    top: 50%;
    left: 0;

    transform: translateY(-50%);
}

.node-left:hover {
    transform: translateY(-55%);
}


/* =========================================
   SMALL DECORATIVE DOTS
========================================= */

.research-visual::before,
.research-visual::after {
    content: "";

    position: absolute;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: var(--yellow);

    opacity: .8;
}

.research-visual::before {
    top: 75px;
    left: 105px;
}

.research-visual::after {
    right: 75px;
    bottom: 80px;

    background: var(--green);
}


/* =========================================
   CONTENT
========================================= */

.research-content {
    max-width: 650px;
}

.research-content h2 {
    margin: 12px 0 18px;

    color: var(--green-dark);

    font-size: 40px;
    line-height: 1.18;
}

.research-content h2 span {
    color: var(--green);
}

.research-content p {
    margin-bottom: 16px;

    color: var(--muted);

    font-size: 16px;
    line-height: 1.9;
}


/* =========================================
   YELLOW LINE
========================================= */

.research-content .yellow-line {
    width: 60px;
    height: 4px;

    margin-bottom: 22px;

    border-radius: 10px;

    background: var(--yellow);
}


/* =========================================
   EXPLORE LINK
========================================= */

.research-content .text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-top: 8px;

    color: var(--green-dark);

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 1px;

    text-decoration: none;

    transition: gap .3s ease;
}

.research-content .text-link i {
    color: var(--green);
    transition: transform .3s ease;
}

.research-content .text-link:hover {
    gap: 15px;
}

.research-content .text-link:hover i {
    transform: translateX(4px);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .research-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .research-content {
        max-width: 100%;
    }

    .research-visual {
        max-width: 520px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 575px) {

    .research {
        padding: 45px 0;
    }

    .research-content h2 {
        font-size: 32px;
    }

    .research-content p {
        font-size: 15px;
    }

    .research-visual {
        height: 390px;
        max-width: 370px;
    }

    .research-main-card {
        width: 175px;
        height: 175px;
    }

    .research-main-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 8px;
    }

    .research-main-icon i {
        font-size: 18px;
    }

    .research-main-card > span {
        font-size: 21px;
    }

    .research-main-card strong {
        font-size: 11px;
    }

    .research-main-card small {
        font-size: 5px;
    }

    .research-node {
        min-width: 115px;
        padding: 8px 10px;
        gap: 7px;
    }

    .node-icon {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    .node-icon i {
        font-size: 13px;
    }

    .research-node strong {
        font-size: 10px;
    }

    .research-node small {
        font-size: 8px;
    }

    .node-left {
        left: -5px;
    }

    .node-right {
        right: -5px;
    }

    .line-2 {
        right: 45px;
    }

    .line-4 {
        left: 45px;
    }

}

/* === CTA === */

.cta {
    position: relative;
    padding: 75px 0;
    overflow: hidden;
    background: #f3f7f1;
    border-top: 1px solid #e3eadf;
    border-bottom: 1px solid #e3eadf;
}

/* Decorative circles */
.cta::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    top: -250px;
    right: -120px;
    border: 1px solid rgba(48, 64, 44, 0.08);
    border-radius: 50%;
}

.cta::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    bottom: -180px;
    left: -100px;
    border: 1px solid rgba(48, 64, 44, 0.07);
    border-radius: 50%;
}

.cta-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    padding: 45px 50px;
    background: #ebf3e7;
    border: 1px solid #e2e9df;
    border-radius: 14px;
    box-shadow: 0 12px 35px rgba(48, 64, 44, 0.07);
}

.cta-label {
    display: inline-block;
    margin-bottom: 8px;
    color: #8b6b32;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2.2px;
}

.cta h2 {
    max-width: 720px;
    margin: 5px 0 12px;
    color: #30402c;
    font-size: 36px;
    line-height: 1.25;
    font-weight: 700;
}

.cta h2 span {
    color: #7b5c28;
}

.cta p {
    max-width: 650px;
    margin: 0;
    color: #667160;
    font-size: 16px;
    line-height: 1.75;
}

.cta-button {
    flex: 0 0 auto;
    min-height: 52px;
    padding: 15px 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    color: #ffffff;
    background: #30402c;
    border: 1px solid #30402c;
    border-radius: 5px;

    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.5px;
    white-space: nowrap;

    transition: all 0.3s ease;
}

.cta-button i {
    font-size: 13px;
    transition: transform 0.3s ease;
}

.cta-button:hover {
    color: #30402c;
    background: #d4a762;
    border-color: #d4a762;
    transform: translateY(-3px);
}

.cta-button:hover i {
    transform: translateX(4px);
}


/* === CTA Responsive === */

@media (max-width: 991px) {

    .cta {
        padding: 60px 0;
    }

    .cta-inner {
        padding: 40px;
        gap: 35px;
    }

    .cta h2 {
        font-size: 31px;
    }
}

@media (max-width: 767px) {

    .cta {
        padding: 45px 0;
    }

    .cta-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 32px 25px;
        gap: 25px;
        border-radius: 10px;
    }

    .cta h2 {
        font-size: 28px;
    }

    .cta p {
        font-size: 15px;
        line-height: 1.65;
    }

    .cta-button {
        width: 100%;
    }
}



/* === KEYFRAMES === */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes spinReverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

/* === RESPONSIVE === */
@media (max-width: 1150px) {
  .container {
    padding-left: 22px;
    padding-right: 22px;
  }

  .section {
    padding: 85px 0;
  }

  .hero {
    height: 610px;
  }

  .hero-content {
    max-width: 620px;
  }

  .hero-content h1 {
    font-size: 54px;
  }

  .hero-arrow {
    width: 42px;
    height: 42px;
  }

  .hero-prev {
    left: 15px;
  }

  .hero-next {
    right: 15px;
  }

  .about-intro-grid,
  .quality-grid,
  .product-highlight-grid,
  .research-grid {
    gap: 55px;
  }

  .product-grid,
  .infrastructure .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vision-grid {
    gap: 20px;
  }

  .vision-card {
    padding: 32px 25px;
  }
}

@media (max-width: 991px) {
  .section {
    padding: 75px 0;
  }

  .section-heading {
    margin-bottom: 45px;
  }

  .section-heading h2 {
    font-size: 34px;
  }

  .hero {
    height: 590px;
  }

  .hero-overlay {
    background: linear-gradient(90deg, rgba(15, 48, 4, 0.92), rgba(25, 62, 7, 0.60));
  }

  .hero-container {
    padding-top: 30px;
    padding-bottom: 125px;
  }

  .hero-content {
    max-width: 600px;
  }

  .hero-content h1 {
    font-size: 50px;
  }

  .hero-content p {
    font-size: 12px;
  }

  .hero-dots {
    bottom: 105px;
  }

  .hero-info-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-info-item:nth-child(2) {
    border-right: 0;
  }

  .hero-info-item:nth-child(3),
  .hero-info-item:nth-child(4) {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .about-intro-grid,
  .quality-grid,
  .product-highlight-grid,
  .research-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .vision-grid {
    grid-template-columns: 1fr;
  }

  .product-grid,
  .infrastructure .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-visual,
  .research-visual {
    max-width: 700px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .highlight-visual,
  .quality-visual {
    height: 360px;
  }
}

@media (max-width: 767px) {
  .container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .section {
    padding: 65px 0;
  }

  .section-heading {
    margin-bottom: 38px;
  }

  .section-heading h2 {
    font-size: 30px;
  }

  .section-heading p {
    font-size: 20px;
  }

  .product-grid,
  .infrastructure .product-grid {
    grid-template-columns: 1fr;
  }

  .highlight-visual,
  .quality-visual {
    height: 300px;
  }

  .hero {
    height: auto;
    min-height: 570px;
  }

  .hero-content h1 {
    font-size: 42px;
  }

  .hero-info-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .section {
    padding: 55px 0;
  }

  .section-heading h2 {
    font-size: 26px;
  }

  .section-heading p {
    font-size: 20px;
  }

  .section-label {
    font-size: 20px;
    letter-spacing: 1.5px;
  }

  .btn {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    padding: 11px 18px;
    font-size: 13px;
  }

  .hero-content h1 {
    font-size: 34px;
    line-height: 1.15;
  }

  .hero {
    min-height: 520px;
  }

  .highlight-visual,
  .quality-visual {
    height: 250px;
  }
}

@media (max-width: 360px) {
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .section-heading h2 {
    font-size: 24px;
  }

  .hero-content h1 {
    font-size: 30px;
  }
}

/* === ACCESSIBILITY === */
.navigation nav a:focus-visible,
.menu-toggle:focus-visible,
.footer a:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* About Page */
/* ============================================================
   ABOUT PAGE — SCOPED STYLES
   All selectors are scoped under .about-page so they never
   override your global CSS. Reuses your :root variables,
   .container, .section, .section-label, .yellow-line, .btn
   ============================================================ */

/* ================= ABOUT HERO ================= */

.about-page .about-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(15, 48, 4, 0.92), rgba(25, 62, 7, 0.78)),
    url("assets/image/banner2.jpg") center / cover no-repeat;
}

.about-page .about-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 212, 0, 0.10), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(59, 124, 20, 0.30), transparent 55%);
  pointer-events: none;
}

.about-page .about-hero-content {
  position: relative;
  z-index: 2;
  padding-top: 70px;
  padding-bottom: 70px;
  color: #ffffff;
  max-width: 780px;
}

.about-page .about-hero .section-label {
  color: var(--yellow);
  margin-bottom: 18px;
}

.about-page .about-hero h1 {
  margin-bottom: 18px;
  color: #ffffff;
  font-size: 56px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -1px;
}

.about-page .about-hero h1 span {
  display: block;
  color: var(--yellow);
}

.about-page .about-hero p {
  max-width: 620px;
  margin-bottom: 28px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 16px;
  line-height: 1.9;
}

/* Breadcrumb */
.about-page .about-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.20);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.about-page .about-breadcrumb a {
  color: var(--yellow);
  transition: color 0.3s ease;
}

.about-page .about-breadcrumb a:hover {
  color: #ffffff;
}

.about-page .about-breadcrumb i {
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
}

.about-page .about-breadcrumb span {
  color: #ffffff;
}

/* ================= ABOUT INTRO ================= */

.about-page .about-intro-section {
  background: #ffffff;
}

.about-page .about-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 80px;
}

/* ---- Visual Side ---- */

.about-page .about-main-visual {
  position: relative;
  width: 100%;
  max-width: 560px;
  padding-bottom: 40px;
}

.about-page .about-main-image {
  position: relative;
  width: 100%;
  min-height: 440px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.about-page .about-main-image img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.about-page .about-main-image:hover img {
  transform: scale(1.05);
}

.about-page .about-image-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(24, 60, 8, 0.10), rgba(24, 60, 8, 0.65));
}

.about-page .about-image-badge {
  position: absolute;
  left: 28px;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  color: #ffffff;
}

.about-page .about-image-badge strong {
  color: var(--yellow);
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
}

.about-page .about-image-badge span {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}



.about-page .about-floating-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--green-dark);
  color: var(--yellow);
  font-size: 18px;
}

.about-page .about-floating-card strong {
  display: block;
  color: var(--green-dark);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

.about-page .about-floating-card span {
  display: block;
  margin-top: 3px;
  color: #365b20;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ---- Content Side ---- */

.about-page .about-main-content {
  width: 100%;
  max-width: 620px;
}

.about-page .about-main-content .section-label {
  margin-bottom: 15px;
}

.about-page .about-main-content h2 {
  margin-bottom: 18px;
  color: var(--green-dark);
  font-size: 40px;
  line-height: 1.18;
}

.about-page .about-main-content h2 span {
  color: var(--yellow-dark);
}

.about-page .about-main-content .about-lead {
  margin-bottom: 26px;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.9;
}

/* Feature list */
.about-page .about-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 25px;
  margin-bottom: 32px;
}

.about-page .about-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.about-page .about-feature > span {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eef7e9;
  color: var(--green);
  font-size: 12px;
  transition: all 0.3s ease;
}

.about-page .about-feature:hover > span {
  background: var(--yellow);
  color: var(--green-dark);
  transform: rotate(-5deg);
}

.about-page .about-feature strong {
  display: block;
  color: var(--green-dark);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 3px;
}

.about-page .about-feature p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.about-page .about-btn {
  margin-top: 5px;
}

/* ================= COMPANY HIGHLIGHTS ================= */

.about-page .about-highlights {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  background: #30402c;
}

.about-page .about-highlights::before {
  content: "";
  position: absolute;
  width: 450px;
  height: 450px;
  top: -220px;
  right: -160px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 50%;
}

.about-page .about-highlights::after {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  bottom: -180px;
  left: -70px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 50%;
}

.about-page .about-highlights .section-heading {
  position: relative;
  z-index: 2;
}

.about-page .about-highlight-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.about-page .about-highlight-card {
  position: relative;
  padding: 38px 30px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  transition: transform 0.35s ease, background 0.35s ease, border-color 0.35s ease;
}

.about-page .about-highlight-card:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 212, 0, 0.45);
}

.about-page .about-highlight-card.featured {
  background: var(--yellow);
  border-color: var(--yellow);
}

.about-page .about-highlight-icon {
  width: 54px;
  height: 54px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--green-dark);
  font-size: 19px;
  transition: all 0.3s ease;
}

.about-page .about-highlight-card:hover .about-highlight-icon {
  transform: rotate(-5deg);
}

.about-page .about-highlight-card.featured .about-highlight-icon {
  background: var(--green-dark);
  color: var(--yellow);
}

.about-page .about-card-number {
  position: absolute;
  top: 18px;
  right: 22px;
  color: rgba(255, 255, 255, 0.22);
  font-size: 32px;
  font-weight: 800;
}

.about-page .about-highlight-card.featured .about-card-number {
  color: rgba(40, 87, 12, 0.20);
}

.about-page .about-highlight-card h3 {
  margin-bottom: 12px;
  color: #ffffff;
  font-size: 19px;
  line-height: 1.35;
}

.about-page .about-highlight-card.featured h3 {
  color: var(--green-dark);
}

.about-page .about-highlight-card p {
  color: #b9ccb1;
  font-size: 15px;
  line-height: 1.9;
}

.about-page .about-highlight-card.featured p {
  color: #365b20;
}

/* ================= OUR APPROACH ================= */

.about-page .about-approach {
  background: #ffffff;
}

.about-page .about-approach-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 90px;
}

.about-page .about-approach-content {
  max-width: 650px;
}

.about-page .about-approach-content .section-label {
  margin-bottom: 15px;
}

.about-page .about-approach-content h2 {
  margin-bottom: 18px;
  color: var(--green-dark);
  font-size: 40px;
  line-height: 1.18;
}

.about-page .about-approach-content h2 span {
  color: var(--yellow-dark);
}

.about-page .about-approach-content p {
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.9;
}

.about-page .about-approach-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 25px;
  margin-top: 26px;
}

.about-page .about-approach-points div {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}

.about-page .about-approach-points i {
  color: var(--green);
  font-size: 16px;
  flex: 0 0 auto;
}

/* Visual — rotating rings */
.about-page .about-approach-visual {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-page .approach-ring {
  position: absolute;
  border-radius: 50%;
}

.about-page .approach-ring-one {
  width: 88%;
  height: 88%;
  border: 1px dashed rgba(59, 124, 20, 0.30);
  animation: about-spin 25s linear infinite;
}

.about-page .approach-ring-two {
  width: 65%;
  height: 65%;
  border: 1px solid rgba(255, 212, 0, 0.45);
  animation: about-spin-reverse 18s linear infinite;
}

.about-page .approach-center {
  position: relative;
  z-index: 2;
  width: 46%;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--green-deep));
  box-shadow: 0 20px 50px rgba(35, 78, 16, 0.20);
  color: #ffffff;
  text-align: center;
}

.about-page .approach-center i {
  margin-bottom: 8px;
  color: var(--yellow);
  font-size: 26px;
}

.about-page .approach-center strong {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 1px;
}

.about-page .approach-center span {
  margin-top: 3px;
  color: var(--yellow);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
}

.about-page .approach-center small {
  margin-top: 8px;
  color: #b9ccb1;
  font-size: 7px;
  letter-spacing: 2px;
}

/* ================= CTA ================= */

.about-page .about-cta {
  position: relative;
  padding: 70px 0;
  overflow: hidden;
  background: #30402c;
}

.about-page .about-cta::before {
  content: "";
  position: absolute;
  width: 450px;
  height: 450px;
  top: -300px;
  right: -100px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
}

.about-page .about-cta::after {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  bottom: -180px;
  left: -70px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 50%;
}

.about-page .about-cta-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}

.about-page .cta-label {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--yellow);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
}

.about-page .about-cta h2 {
  max-width: 700px;
  margin-bottom: 12px;
  color: #ffffff;
  font-size: 34px;
  line-height: 1.2;
}

.about-page .about-cta h2 span {
  color: var(--yellow);
}

.about-page .about-cta p {
  max-width: 650px;
  color: #c4d3bf;
  font-size: 16px;
  line-height: 1.8;
}

.about-page .cta-button {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 14px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--green-dark);
  background: var(--yellow);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.4px;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.about-page .cta-button:hover {
  color: var(--green-dark);
  background: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* ================= KEYFRAMES ================= */

@keyframes about-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes about-spin-reverse {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1150px) {

  .about-page .about-main-grid {
    gap: 55px;
  }

  .about-page .about-highlight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .about-page .about-approach-grid {
    gap: 60px;
  }

  .about-page .about-hero h1 {
    font-size: 50px;
  }
}

@media (max-width: 991px) {

  .about-page .about-hero {
    min-height: 460px;
  }

  .about-page .about-hero h1 {
    font-size: 44px;
  }

  .about-page .about-hero-content {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .about-page .about-main-grid {
    grid-template-columns: 1fr;
    gap: 70px;
  }

  .about-page .about-main-visual {
    max-width: 640px;
    margin: 0 auto;
  }

  .about-page .about-main-content {
    max-width: 100%;
  }

  .about-page .about-approach-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .about-page .about-approach-visual {
    max-width: 400px;
  }

  .about-page .about-cta-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }
}

@media (max-width: 767px) {

  .about-page .about-hero h1 {
    font-size: 36px;
  }

  .about-page .about-hero p {
    font-size: 15px;
  }

  .about-page .about-main-content h2,
  .about-page .about-approach-content h2 {
    font-size: 30px;
  }

  .about-page .about-features {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .about-page .about-approach-points {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .about-page .about-main-image,
  .about-page .about-main-image img {
    min-height: 340px;
    height: 340px;
  }

  .about-page .about-floating-card {
    right: 0;
    min-width: 180px;
    padding: 16px 20px;
  }

  .about-page .about-floating-card strong {
    font-size: 15px;
  }

  .about-page .about-cta h2 {
    font-size: 26px;
  }
}

@media (max-width: 480px) {

  .about-page .about-hero h1 {
    font-size: 30px;
  }

  .about-page .about-main-content h2,
  .about-page .about-approach-content h2 {
    font-size: 26px;
  }

  .about-page .about-highlight-card {
    padding: 30px 24px;
  }

  .about-page .about-highlight-card h3 {
    font-size: 17px;
  }

  .about-page .about-highlight-card p {
    font-size: 14px;
  }

  .about-page .about-main-image,
  .about-page .about-main-image img {
    min-height: 280px;
    height: 280px;
  }

  .about-page .about-image-badge strong {
    font-size: 30px;
  }

  .about-page .approach-center strong {
    font-size: 18px;
  }

  .about-page .approach-center span {
    font-size: 9px;
    letter-spacing: 2px;
  }

  .about-page .about-cta .cta-button {
    width: 100%;
  }
}

/* ================= ACCESSIBILITY ================= */

.about-page .about-breadcrumb a:focus-visible,
.about-page .about-btn:focus-visible,
.about-page .cta-button:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .about-page *,
  .about-page *::before,
  .about-page *::after {
    transition: none !important;
    animation: none !important;
  }
}



/* ============================================================
   CONTACT SECTION — SCOPED STYLES
   Reuses your :root variables (.container, .section-label, etc.)
   ============================================================ */

/* ================= SECTION WRAPPER ================= */

.contact-section {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f7faf5 100%);
}

.contact-section::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  top: -180px;
  right: -160px;
  border: 1px dashed rgba(59, 124, 20, 0.14);
  border-radius: 50%;
  pointer-events: none;
}

.contact-section::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  bottom: -140px;
  left: -100px;
  border: 1px dashed rgba(255, 212, 0, 0.35);
  border-radius: 50%;
  pointer-events: none;
}

.contact-section .contact-container {
  position: relative;
  z-index: 2;
}

/* ================= SECTION TITLE ================= */

.contact-section .contact-title {
  max-width: 680px;
  margin: 0 auto 55px;
  text-align: center;
}

.contact-section .contact-title .section-label {
  margin-bottom: 14px;
}

.contact-section .contact-title h2 {
  margin-bottom: 14px;
  color: var(--green-dark);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
}

.contact-section .contact-title h2 span {
  color: var(--yellow-dark);
}

.contact-section .contact-title p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.9;
}

/* ================= MAIN GRID ================= */

.contact-section .contact-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 40px;
}

/* ================= LEFT: CONTACT INFO ================= */

.contact-section .contact-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-section .contact-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px 26px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 6px 22px rgba(35, 78, 16, 0.05);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.contact-section .contact-card::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  right: -50px;
  bottom: -50px;
  border-radius: 50%;
  background: rgba(59, 124, 20, 0.06);
  transition: transform 0.4s ease;
}

.contact-section .contact-card:hover {
  transform: translateY(-6px);
  border-color: #c9ddc0;
  box-shadow: 0 18px 45px rgba(35, 78, 16, 0.14);
}

.contact-section .contact-card:hover::after {
  transform: scale(2);
}

.contact-section .contact-icon {
  position: relative;
  z-index: 2;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eef7e9;
  color: var(--green);
  font-size: 20px;
  transition: all 0.3s ease;
}

.contact-section .contact-card:hover .contact-icon {
  background: var(--yellow);
  color: var(--green-dark);
  transform: rotate(-6deg);
}

.contact-section .contact-card-content {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 0;
}

.contact-section .contact-small {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--green);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
}

.contact-section .contact-card-content h3 {
  margin-bottom: 8px;
  color: var(--green-dark);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.contact-section .contact-card-content p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}

/* Phone list */
.contact-section .phone-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.contact-section .phone-list a {
  color: var(--green-dark);
  font-weight: 600;
  font-size: 15px;
  transition: color 0.25s ease;
}

.contact-section .phone-list a:hover {
  color: var(--yellow-dark);
}

/* ================= RIGHT: CONTACT BOX ================= */

.contact-section .contact-box {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 40px 36px;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(155deg, var(--green-dark) 0%, var(--green-deep) 100%);
  color: #ffffff;
  box-shadow: 0 25px 60px rgba(35, 78, 16, 0.25);
}

/* Decorative pattern */
.contact-section .contact-box-pattern {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 212, 0, 0.18), transparent 45%),
    radial-gradient(circle at 90% 90%, rgba(255, 212, 0, 0.10), transparent 50%);
  pointer-events: none;
}

.contact-section .contact-box::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  top: -160px;
  right: -140px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 50%;
  pointer-events: none;
}

.contact-section .contact-box::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  bottom: -90px;
  left: -80px;
  border: 1px solid rgba(255, 212, 0, 0.20);
  border-radius: 50%;
  pointer-events: none;
}

/* Box header */
.contact-section .box-header {
  position: relative;
  z-index: 2;
  margin-bottom: 30px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-section .box-header > span {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--yellow);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.5px;
}

.contact-section .box-header h3 {
  margin-bottom: 10px;
  color: #ffffff;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

.contact-section .box-header h3 strong {
  color: var(--yellow);
  font-weight: 800;
}

.contact-section .box-header p {
  color: #b9ccb1;
  font-size: 14px;
  line-height: 1.8;
}

/* Director block */
.contact-section .director {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 32px;
}

.contact-section .director-title {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.contact-section .director-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--green-dark);
  font-size: 17px;
}

.contact-section .director-title span {
  display: block;
  color: var(--yellow);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 2px;
}

.contact-section .director-title h4 {
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

/* Director detail rows */
.contact-section .director-detail {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.contact-section .director-detail > i {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 212, 0, 0.14);
  color: var(--yellow);
  font-size: 13px;
  margin-top: 2px;
}

.contact-section .director-detail small {
  display: block;
  color: #94a98d;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  margin-bottom: 3px;
}

.contact-section .director-detail p {
  color: #ffffff;
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.contact-section .director-detail p a {
  color: #ffffff;
  font-weight: 600;
  transition: color 0.25s ease;
}

.contact-section .director-detail p a:hover {
  color: var(--yellow);
}

.contact-section .director-detail p span {
  color: #94a98d;
  margin: 0 4px;
}

/* Website button */
.contact-section .website-btn {
  position: relative;
  z-index: 2;
  margin-top: auto;
  min-height: 50px;
  padding: 14px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-radius: 6px;
  background: var(--yellow);
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.contact-section .website-btn i {
  transition: transform 0.3s ease;
}

.contact-section .website-btn:hover {
  background: #ffffff;
  color: var(--green-dark);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.contact-section .website-btn:hover i {
  transform: translateX(6px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1150px) {

  .contact-section .contact-wrapper {
    gap: 30px;
  }

  .contact-section .contact-box {
    padding: 34px 30px;
  }

  .contact-section .box-header h3 {
    font-size: 25px;
  }
}

@media (max-width: 991px) {

  .contact-section {
    padding: 80px 0;
  }

  .contact-section .contact-title {
    margin-bottom: 45px;
  }

  .contact-section .contact-title h2 {
    font-size: 34px;
  }

  .contact-section .contact-wrapper {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .contact-section .contact-info {
    gap: 16px;
  }
}

@media (max-width: 767px) {

  .contact-section {
    padding: 65px 0;
  }

  .contact-section .contact-title h2 {
    font-size: 30px;
  }

  .contact-section .contact-title p {
    font-size: 15px;
  }

  .contact-section .contact-card {
    padding: 22px 20px;
    gap: 16px;
  }

  .contact-section .contact-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 17px;
  }

  .contact-section .contact-card-content h3 {
    font-size: 16px;
  }

  .contact-section .contact-card-content p,
  .contact-section .phone-list a {
    font-size: 14px;
  }

  .contact-section .contact-box {
    padding: 30px 24px;
  }

  .contact-section .box-header h3 {
    font-size: 22px;
  }

  .contact-section .box-header p {
    font-size: 13px;
  }

  .contact-section .director-title {
    padding: 14px 16px;
  }

  .contact-section .director-title h4 {
    font-size: 15px;
  }

  .contact-section .director-detail p {
    font-size: 14px;
  }

  .contact-section .website-btn {
    font-size: 12px;
    padding: 13px 20px;
  }
}

@media (max-width: 480px) {

  .contact-section .contact-title h2 {
    font-size: 26px;
  }

  .contact-section .contact-card {
    padding: 20px 18px;
    gap: 14px;
  }

  .contact-section .contact-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    font-size: 16px;
  }

  .contact-section .contact-small {
    font-size: 9px;
    letter-spacing: 1.6px;
  }

  .contact-section .contact-card-content h3 {
    font-size: 15px;
  }

  .contact-section .contact-card-content p {
    font-size: 13.5px;
    line-height: 1.75;
  }

  .contact-section .phone-list {
    gap: 5px 10px;
  }

  .contact-section .phone-list a {
    font-size: 13.5px;
  }

  .contact-section .contact-box {
    padding: 26px 20px;
  }

  .contact-section .box-header h3 {
    font-size: 20px;
  }

  .contact-section .director-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    font-size: 15px;
  }

  .contact-section .director-detail > i {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    font-size: 12px;
  }

  .contact-section .director-detail p {
    font-size: 13.5px;
  }

  .contact-section .website-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ================= ACCESSIBILITY ================= */

.contact-section a:focus-visible,
.contact-section .website-btn:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .contact-section *,
  .contact-section *::before,
  .contact-section *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   ENQUIRY SECTION — SCOPED STYLES
   Reuses :root variables, .container, .section-label, .yellow-line
   ============================================================ */

/* ================= SECTION WRAPPER ================= */

.enquiry-section {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, #f7faf5 0%, #ffffff 100%);
}

.enquiry-section::before {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  top: -220px;
  left: -180px;
  border: 1px dashed rgba(59, 124, 20, 0.14);
  border-radius: 50%;
  pointer-events: none;
}

.enquiry-section::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  bottom: -160px;
  right: -140px;
  border: 1px dashed rgba(255, 212, 0, 0.40);
  border-radius: 50%;
  pointer-events: none;
}

.enquiry-section .enquiry-container {
  position: relative;
  z-index: 2;
}

/* ================= SECTION HEADING ================= */

.enquiry-section .enquiry-heading {
  max-width: 700px;
  margin: 0 auto 55px;
  text-align: center;
}

.enquiry-section .enquiry-heading .section-label {
  margin-bottom: 14px;
}

.enquiry-section .enquiry-heading h2 {
  margin-bottom: 18px;
  color: var(--green-dark);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
}

.enquiry-section .enquiry-heading h2 span {
  color: var(--yellow-dark);
}

.enquiry-section .enquiry-heading .yellow-line {
  margin: 0 auto 20px;
}

.enquiry-section .enquiry-heading p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.9;
}

/* ================= MAIN GRID ================= */

.enquiry-section .enquiry-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: stretch;
  gap: 40px;
}

/* ================= LEFT CONTENT ================= */

.enquiry-section .enquiry-content {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 45px 40px;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(155deg, var(--green-dark) 0%, var(--green-deep) 100%);
  color: #ffffff;
  box-shadow: 0 25px 60px rgba(35, 78, 16, 0.25);
}

.enquiry-section .enquiry-content::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  top: -160px;
  right: -140px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 50%;
  pointer-events: none;
}

.enquiry-section .enquiry-content::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  bottom: -110px;
  left: -90px;
  border: 1px solid rgba(255, 212, 0, 0.20);
  border-radius: 50;
  pointer-events: none;
}

.enquiry-section .enquiry-icon {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--green-dark);
  font-size: 24px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.20);
}

.enquiry-section .enquiry-kicker {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin-bottom: 10px;
  color: var(--yellow);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 3px;
}

.enquiry-section .enquiry-content h3 {
  position: relative;
  z-index: 2;
  margin-bottom: 18px;
  color: #ffffff;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
}

.enquiry-section .enquiry-content h3 span {
  display: block;
  color: var(--yellow);
}

.enquiry-section .enquiry-content > p {
  position: relative;
  z-index: 2;
  margin-bottom: 30px;
  color: #c4d3bf;
  font-size: 15px;
  line-height: 1.9;
}

/* Points */
.enquiry-section .enquiry-points {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 32px;
}

.enquiry-section .enquiry-point {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.enquiry-section .enquiry-point > span {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 212, 0, 0.16);
  color: var(--yellow);
  font-size: 12px;
  transition: all 0.3s ease;
}

.enquiry-section .enquiry-point:hover > span {
  background: var(--yellow);
  color: var(--green-dark);
  transform: rotate(-6deg);
}

.enquiry-section .enquiry-point strong {
  display: block;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 3px;
}

.enquiry-section .enquiry-point small {
  display: block;
  color: #b9ccb1;
  font-size: 13.5px;
  line-height: 1.7;
}

/* Small contact box */
.enquiry-section .enquiry-contact {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.enquiry-section .enquiry-contact:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 212, 0, 0.40);
}

.enquiry-section .enquiry-contact-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--green-dark);
  font-size: 17px;
}

.enquiry-section .enquiry-contact small {
  display: block;
  color: var(--yellow);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 3px;
}

.enquiry-section .enquiry-contact strong {
  display: block;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
}

/* ================= RIGHT FORM BOX ================= */

.enquiry-section .enquiry-form-box {
  position: relative;
  padding: 40px 36px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 18px 50px rgba(35, 78, 16, 0.10);
}

.enquiry-section .form-header {
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}

.enquiry-section .form-header > span {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.5px;
}

.enquiry-section .form-header h3 {
  margin-bottom: 8px;
  color: var(--green-dark);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

.enquiry-section .form-header p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

/* Form rows */
.enquiry-section .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.enquiry-section .form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
}

.enquiry-section .form-row .form-group {
  margin-bottom: 0;
}

.enquiry-section .form-group label {
  margin-bottom: 8px;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.enquiry-section .form-group label em {
  color: #d63a3a;
  font-style: normal;
  margin-left: 2px;
}

/* Input box */
.enquiry-section .input-box {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #f9fbf7;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.enquiry-section .input-box:focus-within {
  border-color: var(--green);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(59, 124, 20, 0.12);
}

.enquiry-section .input-box > i {
  flex: 0 0 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  font-size: 14px;
  transition: color 0.3s ease;
}

.enquiry-section .input-box:focus-within > i {
  color: var(--green-dark);
}

.enquiry-section .input-box input,
.enquiry-section .input-box select,
.enquiry-section .input-box textarea {
  width: 100%;
  padding: 13px 14px 13px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.5;
  appearance: none;
  -webkit-appearance: none;
}

.enquiry-section .input-box input::placeholder,
.enquiry-section .input-box textarea::placeholder {
  color: #9aa79a;
}

/* Select styling */
.enquiry-section .select-box {
  position: relative;
}

.enquiry-section .select-box::after {
  content: "\f107";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--green);
  font-size: 12px;
  pointer-events: none;
}

.enquiry-section .input-box select {
  cursor: pointer;
  padding-right: 40px;
}

.enquiry-section .input-box select:invalid {
  color: #9aa79a;
}

/* Textarea */
.enquiry-section .textarea-box {
  align-items: flex-start;
}

.enquiry-section .textarea-box > i {
  margin-top: 14px;
}

.enquiry-section .input-box textarea {
  resize: vertical;
  min-height: 110px;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Submit button */
.enquiry-section .enquiry-btn {
  margin-top: 8px;
  width: 100%;
  min-height: 52px;
  padding: 14px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  border-radius: 6px;
  background: var(--green);
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.enquiry-section .enquiry-btn i {
  transition: transform 0.3s ease;
}

.enquiry-section .enquiry-btn:hover {
  background: var(--green-dark);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(35, 78, 16, 0.24);
}

.enquiry-section .enquiry-btn:hover i {
  transform: translateX(6px);
}

.enquiry-section .enquiry-btn:active {
  transform: translateY(-1px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1150px) {

  .enquiry-section .enquiry-wrapper {
    gap: 30px;
  }

  .enquiry-section .enquiry-content {
    padding: 38px 32px;
  }

  .enquiry-section .enquiry-form-box {
    padding: 34px 30px;
  }
}

@media (max-width: 991px) {

  .enquiry-section {
    padding: 80px 0;
  }

  .enquiry-section .enquiry-heading {
    margin-bottom: 45px;
  }

  .enquiry-section .enquiry-heading h2 {
    font-size: 34px;
  }

  .enquiry-section .enquiry-wrapper {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .enquiry-section .enquiry-content h3 {
    font-size: 26px;
  }
}

@media (max-width: 767px) {

  .enquiry-section {
    padding: 65px 0;
  }

  .enquiry-section .enquiry-heading h2 {
    font-size: 30px;
  }

  .enquiry-section .enquiry-heading p {
    font-size: 15px;
  }

  .enquiry-section .enquiry-content {
    padding: 32px 24px;
  }

  .enquiry-section .enquiry-content h3 {
    font-size: 22px;
  }

  .enquiry-section .enquiry-content > p {
    font-size: 14px;
  }

  .enquiry-section .enquiry-form-box {
    padding: 28px 22px;
  }

  .enquiry-section .form-header h3 {
    font-size: 20px;
  }

  .enquiry-section .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .enquiry-section .form-row .form-group {
    margin-bottom: 18px;
  }

  .enquiry-section .input-box input,
  .enquiry-section .input-box select,
  .enquiry-section .input-box textarea {
    font-size: 14px;
  }
}

@media (max-width: 480px) {

  .enquiry-section .enquiry-heading h2 {
    font-size: 26px;
  }

  .enquiry-section .enquiry-icon {
    width: 54px;
    height: 54px;
    font-size: 20px;
  }

  .enquiry-section .enquiry-content h3 {
    font-size: 20px;
  }

  .enquiry-section .enquiry-point strong {
    font-size: 14px;
  }

  .enquiry-section .enquiry-point small {
    font-size: 13px;
  }

  .enquiry-section .enquiry-contact {
    padding: 14px 16px;
    gap: 12px;
  }

  .enquiry-section .enquiry-contact-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    font-size: 15px;
  }

  .enquiry-section .enquiry-contact strong {
    font-size: 15px;
  }

  .enquiry-section .enquiry-form-box {
    padding: 24px 18px;
  }

  .enquiry-section .form-header h3 {
    font-size: 18px;
  }

  .enquiry-section .form-group label {
    font-size: 12.5px;
  }

  .enquiry-section .input-box > i {
    flex-basis: 42px;
    font-size: 13px;
  }

  .enquiry-section .enquiry-btn {
    font-size: 12px;
    padding: 13px 20px;
  }
}

/* ================= ACCESSIBILITY ================= */

.enquiry-section a:focus-visible,
.enquiry-section button:focus-visible,
.enquiry-section input:focus-visible,
.enquiry-section select:focus-visible,
.enquiry-section textarea:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .enquiry-section *,
  .enquiry-section *::before,
  .enquiry-section *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* ============================================================
   R&D SECTION — SCOPED STYLES
   Reuses :root variables, .container, .section-label, .yellow-line
   ============================================================ */

/* ================= SECTION WRAPPER ================= */

.rnd-section {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f7faf5 100%);
}

.rnd-section::before {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  top: -220px;
  right: -180px;
  border: 1px dashed rgba(59, 124, 20, 0.14);
  border-radius: 50%;
  pointer-events: none;
}

.rnd-section::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  bottom: -160px;
  left: -140px;
  border: 1px dashed rgba(255, 212, 0, 0.40);
  border-radius: 50%;
  pointer-events: none;
}

.rnd-section .rnd-container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 80px;
}

/* ================= LEFT CONTENT ================= */

.rnd-section .rnd-content {
  max-width: 620px;
}

.rnd-section .rnd-content .section-label {
  margin-bottom: 14px;
}

.rnd-section .rnd-content h2 {
  margin-bottom: 18px;
  color: var(--green-dark);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.18;
}

.rnd-section .rnd-content h2 span {
  color: var(--yellow-dark);
}

.rnd-section .rnd-intro {
  margin-bottom: 30px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.9;
}

/* ================= HIGHLIGHTS ================= */

.rnd-section .rnd-highlights {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 32px;
}

.rnd-section .rnd-highlight {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(35, 78, 16, 0.04);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.rnd-section .rnd-highlight:hover {
  transform: translateY(-4px);
  border-color: #c9ddc0;
  box-shadow: 0 14px 34px rgba(35, 78, 16, 0.12);
}

.rnd-section .rnd-highlight-icon {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eef7e9;
  color: var(--green);
  font-size: 18px;
  transition: all 0.3s ease;
}

.rnd-section .rnd-highlight:hover .rnd-highlight-icon {
  background: var(--yellow);
  color: var(--green-dark);
  transform: rotate(-6deg);
}

.rnd-section .rnd-highlight strong {
  display: block;
  margin-bottom: 4px;
  color: var(--green-dark);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.rnd-section .rnd-highlight span {
  display: block;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

/* ================= PROJECT FEE CARD ================= */

.rnd-section .rnd-fee {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px;
  margin-bottom: 32px;
  border-radius: 10px;
  background: linear-gradient(155deg, var(--green-dark) 0%, var(--green-deep) 100%);
  color: #ffffff;
  box-shadow: 0 18px 40px rgba(35, 78, 16, 0.22);
}

.rnd-section .fee-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--green-dark);
  font-size: 18px;
}

.rnd-section .fee-content h4 {
  margin-bottom: 6px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.rnd-section .fee-content p {
  color: #c4d3bf;
  font-size: 14px;
  line-height: 1.75;
}

/* ================= BUTTON ================= */

.rnd-section .rnd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 50px;
  padding: 14px 26px;
  border-radius: 6px;
  background: var(--green);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.rnd-section .rnd-btn i {
  transition: transform 0.3s ease;
}

.rnd-section .rnd-btn:hover {
  background: var(--green-dark);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(35, 78, 16, 0.24);
}

.rnd-section .rnd-btn:hover i {
  transform: translateX(6px);
}

/* ================= RIGHT IMAGE ================= */

.rnd-section .rnd-image {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  padding-bottom: 40px;
}

/* Decorative shape behind the image */
.rnd-section .image-shape {
  position: absolute;
  top: -25px;
  right: -25px;
  width: 55%;
  height: 55%;
  border: 2px dashed rgba(59, 124, 20, 0.22);
  border-radius: 12px;
  pointer-events: none;
}

.rnd-section .rnd-image-frame {
  position: relative;
  width: 100%;
  min-height: 480px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 25px 60px rgba(35, 78, 16, 0.18);
}

.rnd-section .rnd-image-frame img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.rnd-section .rnd-image-frame:hover img {
  transform: scale(1.06);
}

.rnd-section .rnd-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(24, 60, 8, 0.05) 0%, rgba(24, 60, 8, 0.70) 100%);
}

/* R&D badge */
.rnd-section .rnd-badge {
  position: absolute;
  top: 26px;
  left: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 90px;
  padding: 14px 18px;
  border-radius: 10px;
  background: var(--yellow);
  color: var(--green-dark);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  text-align: center;
}

.rnd-section .rnd-badge strong {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 1px;
}

.rnd-section .rnd-badge span {
  margin-top: 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Mini floating card */
.rnd-section .rnd-mini-card {
  position: absolute;
  left: -25px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 200px;
  padding: 18px 22px;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(35, 78, 16, 0.18);
}

.rnd-section .rnd-mini-card i {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eef7e9;
  color: var(--green);
  font-size: 16px;
}

.rnd-section .rnd-mini-card strong {
  display: block;
  color: var(--green-dark);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.rnd-section .rnd-mini-card span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1150px) {

  .rnd-section .rnd-container {
    gap: 55px;
  }

  .rnd-section .rnd-content h2 {
    font-size: 36px;
  }

  .rnd-section .rnd-image-frame,
  .rnd-section .rnd-image-frame img {
    min-height: 440px;
    height: 440px;
  }
}

@media (max-width: 991px) {

  .rnd-section {
    padding: 80px 0;
  }

  .rnd-section .rnd-container {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .rnd-section .rnd-content {
    max-width: 100%;
  }

  .rnd-section .rnd-image {
    max-width: 640px;
    margin: 0 auto;
  }

  .rnd-section .rnd-image-frame,
  .rnd-section .rnd-image-frame img {
    min-height: 420px;
    height: 420px;
  }
}

@media (max-width: 767px) {

  .rnd-section {
    padding: 65px 0;
  }

  .rnd-section .rnd-content h2 {
    font-size: 30px;
  }

  .rnd-section .rnd-intro {
    font-size: 15px;
  }

  .rnd-section .rnd-highlight {
    padding: 16px 16px;
    gap: 14px;
  }

  .rnd-section .rnd-highlight-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    font-size: 16px;
  }

  .rnd-section .rnd-highlight strong {
    font-size: 15px;
  }

  .rnd-section .rnd-highlight span {
    font-size: 13.5px;
  }

  .rnd-section .rnd-fee {
    padding: 18px 20px;
  }

  .rnd-section .fee-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    font-size: 16px;
  }

  .rnd-section .fee-content h4 {
    font-size: 16px;
  }

  .rnd-section .fee-content p {
    font-size: 13.5px;
  }

  .rnd-section .rnd-image-frame,
  .rnd-section .rnd-image-frame img {
    min-height: 340px;
    height: 340px;
  }

  .rnd-section .rnd-mini-card {
    left: 0;
    min-width: 180px;
    padding: 14px 18px;
  }

  .rnd-section .rnd-mini-card i {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: 14px;
  }

  .rnd-section .rnd-mini-card strong {
    font-size: 14px;
  }

  .rnd-section .rnd-badge {
    top: 18px;
    left: 18px;
    padding: 12px 14px;
    min-width: 78px;
  }

  .rnd-section .rnd-badge strong {
    font-size: 18px;
  }
}

@media (max-width: 480px) {

  .rnd-section .rnd-content h2 {
    font-size: 26px;
  }

  .rnd-section .rnd-image-frame,
  .rnd-section .rnd-image-frame img {
    min-height: 300px;
    height: 300px;
  }

  .rnd-section .image-shape {
    top: -18px;
    right: -18px;
  }

  .rnd-section .rnd-btn {
    width: 100%;
  }

  .rnd-section .rnd-highlight {
    padding: 14px 14px;
  }

  .rnd-section .rnd-highlight-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    font-size: 15px;
  }

  .rnd-section .rnd-highlight strong {
    font-size: 14px;
  }

  .rnd-section .rnd-highlight span {
    font-size: 13px;
  }
}

/* ================= ACCESSIBILITY ================= */

.rnd-section a:focus-visible,
.rnd-section .rnd-btn:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .rnd-section *,
  .rnd-section *::before,
  .rnd-section *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   QUALITY SECTION — SCOPED STYLES
   Reuses :root variables, .container
   ============================================================ */

/* ================= SECTION WRAPPER ================= */

.quality-section {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  background: linear-gradient(180deg, #f7faf5 0%, #ffffff 100%);
}

.quality-section::before {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  top: -220px;
  left: -180px;
  border: 1px dashed rgba(59, 124, 20, 0.14);
  border-radius: 50%;
  pointer-events: none;
}

.quality-section::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  bottom: -160px;
  right: -140px;
  border: 1px dashed rgba(255, 212, 0, 0.40);
  border-radius: 50%;
  pointer-events: none;
}

.quality-section .quality-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding-left: 25px;
  padding-right: 25px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 80px;
}

/* ================= LEFT CONTENT ================= */

.quality-section .quality-content {
  max-width: 650px;
}

.quality-section .quality-tag {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2.5px;
}

.quality-section .quality-content h2 {
  margin-bottom: 18px;
  color: var(--green-dark);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.18;
}

.quality-section .quality-content h2 span {
  color: var(--yellow-dark);
}

.quality-section .quality-line {
  width: 55px;
  height: 4px;
  margin-bottom: 22px;
  border-radius: 10px;
  background: var(--yellow);
}

.quality-section .quality-intro {
  margin-bottom: 34px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.9;
}

/* ================= QUALITY CARDS ================= */

.quality-section .quality-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 26px 26px 26px 24px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 6px 22px rgba(35, 78, 16, 0.05);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.quality-section .quality-card:last-child {
  margin-bottom: 0;
}

.quality-section .quality-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 3px;
  border-radius: 0 6px 6px 0;
  background: var(--yellow);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.quality-section .quality-card:hover {
  transform: translateY(-6px);
  border-color: #c9ddc0;
  box-shadow: 0 18px 45px rgba(35, 78, 16, 0.14);
}

.quality-section .quality-card:hover::before {
  opacity: 1;
}

/* Number badge */
.quality-section .quality-number {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eef7e9;
  color: var(--green);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.quality-section .quality-card:hover .quality-number {
  background: var(--yellow);
  color: var(--green-dark);
  transform: rotate(-6deg);
}

.quality-section .quality-card-content {
  flex: 1;
  min-width: 0;
}

.quality-section .quality-card-content h3 {
  margin-bottom: 8px;
  color: var(--green-dark);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.quality-section .quality-card-content p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}

/* ================= RIGHT VISUAL ================= */

.quality-section .quality-visual {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, #f4faef 0%, #ffffff 70%);
}

/* Decorative circles */
.quality-section .quality-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.quality-section .circle-one {
  width: 92%;
  height: 92%;
  border: 2px solid rgba(59, 124, 20, 0.12);
  animation: quality-pulse 4s ease-in-out infinite;
}

.quality-section .circle-two {
  width: 68%;
  height: 68%;
  border: 1px dashed rgba(255, 212, 0, 0.55);
  animation: quality-spin 22s linear infinite;
}

/* Main box */
.quality-section .quality-main-box {
  position: relative;
  z-index: 2;
  width: 62%;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 24px;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--green) 0%, var(--green-deep) 100%);
  color: #ffffff;
  text-align: center;
  box-shadow: 0 25px 60px rgba(35, 78, 16, 0.28);
}

/* Check icon */
.quality-section .quality-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--green-dark);
  font-size: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20);
}

.quality-section .quality-main-label {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--yellow);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2.5px;
}

.quality-section .quality-main-box h3 {
  margin-bottom: 10px;
  color: #ffffff;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 2px;
}

.quality-section .quality-main-box p {
  color: #c4d3bf;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.7;
}

/* Bottom line + brand */
.quality-section .quality-bottom-line {
  width: 42px;
  height: 2px;
  margin: 16px 0 12px;
  border-radius: 10px;
  background: var(--yellow);
  opacity: 0.7;
}

.quality-section .quality-brand {
  color: var(--yellow);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 3px;
}

/* ================= ANIMATIONS ================= */

@keyframes quality-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes quality-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.03); opacity: 0.75; }
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1150px) {

  .quality-section .quality-container {
    gap: 55px;
  }

  .quality-section .quality-content h2 {
    font-size: 36px;
  }

  .quality-section .quality-visual {
    max-width: 420px;
  }

  .quality-section .quality-main-box h3 {
    font-size: 28px;
  }
}

@media (max-width: 991px) {

  .quality-section {
    padding: 80px 0;
  }

  .quality-section .quality-container {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .quality-section .quality-content {
    max-width: 100%;
  }

  .quality-section .quality-visual {
    max-width: 440px;
  }
}

@media (max-width: 767px) {

  .quality-section {
    padding: 65px 0;
  }

  .quality-section .quality-content h2 {
    font-size: 30px;
  }

  .quality-section .quality-intro {
    font-size: 15px;
    margin-bottom: 26px;
  }

  .quality-section .quality-card {
    padding: 20px 20px;
    gap: 16px;
  }

  .quality-section .quality-number {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 16px;
  }

  .quality-section .quality-card-content h3 {
    font-size: 16px;
  }

  .quality-section .quality-card-content p {
    font-size: 14px;
  }

  .quality-section .quality-visual {
    max-width: 360px;
  }

  .quality-section .quality-main-box {
    width: 66%;
    padding: 22px 18px;
  }

  .quality-section .quality-icon {
    width: 42px;
    height: 42px;
    font-size: 17px;
    margin-bottom: 10px;
  }

  .quality-section .quality-main-box h3 {
    font-size: 24px;
  }

  .quality-section .quality-main-box p {
    font-size: 11px;
  }

  .quality-section .quality-brand {
    font-size: 9px;
    letter-spacing: 2.5px;
  }
}

@media (max-width: 480px) {

  .quality-section .quality-content h2 {
    font-size: 26px;
  }

  .quality-section .quality-tag {
    font-size: 11px;
    letter-spacing: 2px;
  }

  .quality-section .quality-card {
    padding: 18px 16px;
    gap: 14px;
  }

  .quality-section .quality-number {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    font-size: 15px;
  }

  .quality-section .quality-card-content h3 {
    font-size: 15px;
  }

  .quality-section .quality-card-content p {
    font-size: 13.5px;
    line-height: 1.75;
  }

  .quality-section .quality-visual {
    max-width: 300px;
  }

  .quality-section .quality-main-box h3 {
    font-size: 20px;
    letter-spacing: 1.5px;
  }

  .quality-section .quality-main-label {
    font-size: 8px;
    letter-spacing: 2px;
  }

  .quality-section .quality-main-box p {
    font-size: 10px;
  }
}

/* ================= ACCESSIBILITY ================= */

.quality-section a:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .quality-section *,
  .quality-section *::before,
  .quality-section *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* ================= SECTION WRAPPER ================= */

.vision-section {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f7faf5 100%);
}

.vision-section::before {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  top: -220px;
  right: -180px;
  border: 1px dashed rgba(59, 124, 20, 0.14);
  border-radius: 50%;
  pointer-events: none;
}

.vision-section::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  bottom: -160px;
  left: -140px;
  border: 1px dashed rgba(255, 212, 0, 0.40);
  border-radius: 50%;
  pointer-events: none;
}

.vision-section .vision-container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 80px;
}

/* ================= LEFT CONTENT ================= */

.vision-section .vision-content {
  max-width: 640px;
}

.vision-section .vision-content .vision-label {
  margin-bottom: 14px;
}

.vision-section .vision-content h1 {
  margin-bottom: 18px;
  color: var(--green-dark);
  font-size: 42px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.vision-section .vision-content h1 span {
  color: var(--yellow-dark);
}

.vision-section .vision-content .yellow-line {
  margin: 0 0 24px;
}

/* Highlight paragraph */
.vision-section .vision-highlight {
  margin-bottom: 20px;
  padding: 20px 24px;
  border-left: 4px solid var(--yellow);
  border-radius: 0 8px 8px 0;
  background: #f7faf5;
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.9;
}

.vision-section .vision-highlight strong {
  color: var(--green-dark);
  font-weight: 800;
  letter-spacing: 0.5px;
}

.vision-section .vision-content > p {
  margin-bottom: 32px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.9;
}

/* ================= VISION POINTS ================= */

.vision-section .vision-points {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.vision-section .vision-point {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(35, 78, 16, 0.04);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.vision-section .vision-point:hover {
  transform: translateY(-4px);
  border-color: #c9ddc0;
  box-shadow: 0 14px 34px rgba(35, 78, 16, 0.12);
}

.vision-section .point-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eef7e9;
  color: var(--green);
  font-size: 17px;
  transition: all 0.3s ease;
}

.vision-section .vision-point:hover .point-icon {
  background: var(--yellow);
  color: var(--green-dark);
  transform: rotate(-6deg);
}

.vision-section .point-content {
  flex: 1;
  min-width: 0;
}

.vision-section .point-content h3 {
  margin-bottom: 5px;
  color: var(--green-dark);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.vision-section .point-content p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

/* ================= RIGHT IMAGE ================= */

.vision-section .vision-image {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin-left: auto;
  padding-bottom: 40px;
}

.vision-section .vision-image-wrap {
  position: relative;
  width: 100%;
  min-height: 520px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 25px 60px rgba(35, 78, 16, 0.18);
}

.vision-section .vision-image-wrap img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.vision-section .vision-image-wrap:hover img {
  transform: scale(1.06);
}

.vision-section .vision-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(24, 60, 8, 0.05) 0%,
    rgba(24, 60, 8, 0.70) 100%
  );
}

/* Caption inside image */
.vision-section .vision-image-caption {
  position: absolute;
  left: 30px;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  color: #ffffff;
}

.vision-section .vision-image-caption span {
  color: var(--yellow);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 4px;
  line-height: 1;
}

.vision-section .vision-image-caption strong {
  margin-top: 4px;
  color: #ffffff;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 2px;
}

/* ================= FLOATING EXPERIENCE BOX ================= */

.vision-section .experience-box {
  position: absolute;
  right: -25px;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 230px;
  padding: 18px 22px;
  border-radius: 10px;
  background: var(--yellow);
  box-shadow: 0 18px 45px rgba(35, 78, 16, 0.22);
}

.vision-section .experience-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--green-dark);
  color: var(--yellow);
  font-size: 18px;
}

.vision-section .experience-box strong {
  display: block;
  color: var(--green-dark);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 1px;
}

.vision-section .experience-box span {
  display: block;
  margin-top: 3px;
  color: #365b20;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ================= DECORATIVE CIRCLES ================= */

.vision-section .vision-decoration {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.vision-section .vision-decoration-one {
  width: 90px;
  height: 90px;
  top: -30px;
  right: -30px;
  border: 2px dashed rgba(59, 124, 20, 0.30);
  animation: vision-spin 22s linear infinite;
}

.vision-section .vision-decoration-two {
  width: 60px;
  height: 60px;
  bottom: 70px;
  left: -30px;
  border: 2px solid rgba(255, 212, 0, 0.55);
  animation: vision-pulse 4s ease-in-out infinite;
}

/* ================= ANIMATIONS ================= */

@keyframes vision-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes vision-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.15); opacity: 0.7; }
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1150px) {

  .vision-section .vision-container {
    gap: 55px;
  }

  .vision-section .vision-content h1 {
    font-size: 38px;
  }

  .vision-section .vision-image-wrap,
  .vision-section .vision-image-wrap img {
    min-height: 480px;
    height: 480px;
  }
}

@media (max-width: 991px) {

  .vision-section {
    padding: 80px 0;
  }

  .vision-section .vision-container {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .vision-section .vision-content {
    max-width: 100%;
  }

  .vision-section .vision-image {
    max-width: 620px;
    margin: 0 auto;
  }

  .vision-section .vision-image-wrap,
  .vision-section .vision-image-wrap img {
    min-height: 440px;
    height: 440px;
  }
}

@media (max-width: 767px) {

  .vision-section {
    padding: 65px 0;
  }

  .vision-section .vision-content h1 {
    font-size: 30px;
  }

  .vision-section .vision-highlight {
    padding: 16px 18px;
    font-size: 15px;
  }

  .vision-section .vision-content > p {
    font-size: 14px;
    margin-bottom: 26px;
  }

  .vision-section .vision-point {
    padding: 16px 16px;
    gap: 14px;
  }

  .vision-section .point-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    font-size: 15px;
  }

  .vision-section .point-content h3 {
    font-size: 15px;
  }

  .vision-section .point-content p {
    font-size: 13.5px;
  }

  .vision-section .vision-image-wrap,
  .vision-section .vision-image-wrap img {
    min-height: 360px;
    height: 360px;
  }

  .vision-section .experience-box {
    right: 0;
    min-width: 200px;
    padding: 15px 18px;
  }

  .vision-section .experience-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    font-size: 15px;
  }

  .vision-section .experience-box strong {
    font-size: 15px;
  }

  .vision-section .experience-box span {
    font-size: 9px;
    letter-spacing: 1.6px;
  }

  .vision-section .vision-image-caption strong {
    font-size: 28px;
  }
}

@media (max-width: 480px) {

  .vision-section .vision-content h1 {
    font-size: 26px;
  }

  .vision-section .vision-highlight {
    padding: 14px 16px;
    font-size: 14px;
  }

  .vision-section .vision-point {
    padding: 14px 14px;
    gap: 12px;
  }

  .vision-section .point-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: 14px;
  }

  .vision-section .point-content h3 {
    font-size: 14.5px;
  }

  .vision-section .point-content p {
    font-size: 13px;
  }

  .vision-section .vision-image-wrap,
  .vision-section .vision-image-wrap img {
    min-height: 300px;
    height: 300px;
  }

  .vision-section .vision-image-caption {
    left: 20px;
    bottom: 20px;
  }

  .vision-section .vision-image-caption strong {
    font-size: 24px;
  }

  .vision-section .experience-box {
    min-width: 180px;
    padding: 13px 16px;
  }

  .vision-section .experience-box strong {
    font-size: 14px;
  }

  .vision-section .experience-decoration-one,
  .vision-section .vision-decoration-one {
    width: 70px;
    height: 70px;
  }

  .vision-section .vision-decoration-two {
    width: 50px;
    height: 50px;
  }
}

/* ================= ACCESSIBILITY ================= */

.vision-section a:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .vision-section *,
  .vision-section *::before,
  .vision-section *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* ============================================================
   PRODUCTS SECTION — SCOPED STYLES
   Reuses :root variables, .container, .section-label, .yellow-line
   ============================================================ */

/* ================= SECTION WRAPPER ================= */

.products-section {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  background: linear-gradient(180deg, #f7faf5 0%, #ffffff 100%);
}

.products-section::before {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  top: -220px;
  left: -180px;
  border: 1px dashed rgba(59, 124, 20, 0.14);
  border-radius: 50%;
  pointer-events: none;
}

.products-section::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  bottom: -160px;
  right: -140px;
  border: 1px dashed rgba(255, 212, 0, 0.40);
  border-radius: 50%;
  pointer-events: none;
}

.products-section .products-container {
  position: relative;
  z-index: 2;
}

/* ================= SECTION HEADING ================= */

.products-section .products-heading {
  max-width: 720px;
  margin: 0 auto 60px;
  text-align: center;
}

.products-section .products-heading .section-label {
  margin-bottom: 14px;
}

.products-section .products-heading h2 {
  margin-bottom: 18px;
  color: var(--green-dark);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
}

.products-section .products-heading h2 span {
  color: var(--yellow-dark);
}

.products-section .products-heading .yellow-line {
  margin: 0 auto 20px;
}

.products-section .products-heading p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.9;
}

/* ================= PRODUCT CATEGORY ================= */

.products-section .product-category {
  margin-bottom: 70px;
}

.products-section .product-category:last-child {
  margin-bottom: 0;
}

/* Category title row */
.products-section .category-title {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 34px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.products-section .category-number {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--green);
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
  box-shadow: 0 12px 28px rgba(35, 78, 16, 0.20);
}

.products-section .category-heading small {
  display: block;
  margin-bottom: 6px;
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.5px;
}

.products-section .category-heading h3 {
  color: var(--green-dark);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

/* ================= PRODUCTS GRID ================= */

.products-section .simple-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

/* When a category has only 2 products, keep them from stretching too wide */
.products-section .product-category:last-child .simple-products {
  grid-template-columns: repeat(auto-fit, minmax(280px, 380px));
}

/* ================= SIMPLE PRODUCT CARD ================= */

.products-section .simple-product {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 26px 30px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 6px 22px rgba(35, 78, 16, 0.05);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.products-section .simple-product::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -55px;
  bottom: -55px;
  border-radius: 50%;
  background: rgba(59, 124, 20, 0.06);
  transition: transform 0.4s ease;
}

.products-section .simple-product:hover {
  transform: translateY(-8px);
  border-color: #c9ddc0;
  box-shadow: 0 22px 50px rgba(35, 78, 16, 0.14);
}

.products-section .simple-product:hover::after {
  transform: scale(2);
}

/* Top row: number + icon */
.products-section .product-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.products-section .product-number {
  color: #dce7d8;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
  transition: color 0.3s ease;
}

.products-section .simple-product:hover .product-number {
  color: var(--yellow-dark);
}

.products-section .product-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eef7e9;
  color: var(--green);
  font-size: 20px;
  transition: all 0.3s ease;
}

.products-section .simple-product:hover .product-icon {
  background: var(--yellow);
  color: var(--green-dark);
  transform: rotate(-6deg);
}

/* Content */
.products-section .simple-product h4 {
  position: relative;
  z-index: 2;
  margin-bottom: 12px;
  color: var(--green-dark);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

.products-section .simple-product p {
  position: relative;
  z-index: 2;
  flex: 1;
  margin-bottom: 22px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.8;
}

/* Arrow */
.products-section .product-arrow {
  position: relative;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eef7e9;
  color: var(--green);
  font-size: 13px;
  transition: all 0.3s ease;
}

.products-section .simple-product:hover .product-arrow {
  background: var(--green);
  color: #ffffff;
  transform: translateX(4px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1150px) {

  .products-section .simple-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .products-section .product-category:last-child .simple-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .products-section .products-heading h2 {
    font-size: 36px;
  }

  .products-section .category-heading h3 {
    font-size: 23px;
  }
}

@media (max-width: 991px) {

  .products-section {
    padding: 80px 0;
  }

  .products-section .products-heading {
    margin-bottom: 50px;
  }

  .products-section .product-category {
    margin-bottom: 55px;
  }

  .products-section .category-number {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
    font-size: 20px;
  }
}

@media (max-width: 767px) {

  .products-section {
    padding: 65px 0;
  }

  .products-section .products-heading h2 {
    font-size: 30px;
  }

  .products-section .products-heading p {
    font-size: 15px;
  }

  .products-section .simple-products,
  .products-section .product-category:last-child .simple-products {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .products-section .product-category {
    margin-bottom: 45px;
  }

  .products-section .category-title {
    gap: 15px;
    margin-bottom: 26px;
    padding-bottom: 16px;
  }

  .products-section .category-number {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
    font-size: 18px;
  }

  .products-section .category-heading small {
    font-size: 10px;
    letter-spacing: 2px;
  }

  .products-section .category-heading h3 {
    font-size: 20px;
  }

  .products-section .simple-product {
    padding: 24px 22px 26px;
  }

  .products-section .product-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    font-size: 18px;
  }

  .products-section .product-number {
    font-size: 20px;
  }

  .products-section .simple-product h4 {
    font-size: 17px;
  }

  .products-section .simple-product p {
    font-size: 14px;
  }
}

@media (max-width: 480px) {

  .products-section .products-heading h2 {
    font-size: 26px;
  }

  .products-section .category-title {
    gap: 12px;
  }

  .products-section .category-number {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    font-size: 16px;
  }

  .products-section .category-heading h3 {
    font-size: 18px;
  }

  .products-section .simple-product {
    padding: 22px 20px 24px;
  }

  .products-section .product-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    font-size: 16px;
  }

  .products-section .product-number {
    font-size: 18px;
  }

  .products-section .simple-product h4 {
    font-size: 16px;
  }

  .products-section .simple-product p {
    font-size: 13.5px;
    line-height: 1.75;
  }

  .products-section .product-arrow {
    width: 36px;
    height: 36px;
    font-size: 12px;
  }
}

/* ================= ACCESSIBILITY ================= */

.products-section a:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .products-section *,
  .products-section *::before,
  .products-section *::after {
    transition: none !important;
    animation: none !important;
  }
}