:root {
  --green: #64b829;
  --green-dark: #4a8c1c;
  --navy: #08223b;
  --navy-mid: #0d2f52;
  --heading-dark: #152515;
  --body-text: #52667f;
  --bg-grey: #f2f4f5;
  --card: #ffffff;
  --border: #dde8d3;
  --radius: 16px;
  --shadow: 0 12px 32px rgba(8, 34, 59, 0.12);
}

body {
  font-family: 'Inter', 'Poppins', system-ui, -apple-system, sans-serif;
  color: var(--body-text);
  background: var(--bg-grey);
}

.wrapper.preloader {
  background: var(--bg-grey);
}

.site-holder .site-header {
  background: linear-gradient(160deg, var(--navy-mid) 0%, var(--navy) 58%, #113e2f 100%);
}

.sticky-header {
  background: rgba(8, 34, 59, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.sticky-header .site-nav .nav-off-canvas li a {
  color: #f4f8ff;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.sticky-header .site-nav .nav-off-canvas li a:hover {
  color: #8ce15e;
}

.static-banner {
  min-height: 24px;
}

#left-content-section {
  padding-top: 2.5rem;
  padding-bottom: 3.5rem;
}

#left-content-section .half-colom-left-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.1rem, 2.2vw, 2rem);
}

#left-content-section h1 {
  color: var(--heading-dark);
  line-height: 1.15;
  margin-bottom: 1rem;
  font-size: clamp(1.7rem, 3.5vw, 2.55rem);
}

#left-content-section h2,
#left-content-section h3,
#left-content-section h4 {
  color: #193019;
  margin-top: 1.35rem;
  margin-bottom: 0.45rem;
}

#left-content-section p,
#left-content-section li {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--body-text);
}

#left-content-section ul,
#left-content-section ol {
  margin-left: 1.1rem;
}

#left-content-section ul li {
  list-style: disc;
  margin-bottom: 0.3rem;
}

#left-content-section ol li {
  list-style: decimal;
  margin-bottom: 0.3rem;
}

#left-content-section a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#left-content-section a:hover {
  color: var(--green-dark);
}

#left-content-section .half-colom-right-section {
  position: sticky;
  top: 92px;
}

#left-content-section .half-colom-right-section img {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(8, 34, 59, 0.15);
}

#site-download.section-blue,
.site-footer.section-blue {
  background: linear-gradient(160deg, #0f355b 0%, #08223b 62%, #164d3d 100%);
}

#site-download h1,
#site-download h5,
.site-footer .slide-button,
.site-footer .site-copyright p {
  color: #fff;
}

.site-download .app-download-icons {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
}

.site-footer .slide-button {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.11);
  padding: 0.75rem 1rem;
}

.site-footer .slide-button:hover {
  background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 992px) {
  #left-content-section .half-colom-right-section {
    margin-top: 1.1rem;
    position: static;
  }
}

@media (max-width: 768px) {
  #left-content-section {
    padding-top: 1.25rem;
    padding-bottom: 2rem;
  }

  .sticky-header .site-logo img {
    max-height: 44px;
    width: auto;
  }
}