html,
body {
  overflow-x: hidden;
}




html,
body {
  overflow-x: hidden;
}


@font-face {
  font-family: 'Font Awesome 6 Pro';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/fa-regular-400.woff2') format('woff2');
}

@font-face {
  font-family: "Font Awesome 6 Brands";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/fa-brands-400.woff2") format("woff2"),
    url("../fonts/fa-brands-400.ttf") format("truetype");
}


@font-face {
  font-family: 'Font Awesome 6 Pro';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/fa-solid-900.woff2') format('woff2'),
    url('../fonts/fa-solid-900.woff') format('woff');
}

.fas {
  font-family: "Font Awesome 6 Pro";
  /* or "Font Awesome 6 Solid" */
  font-weight: 900;
}

body {
  background-color: #121212;
  color: #ffffff;
}

.no-theme-change {
  color: white !important;
}


#theme-toggle {
  background-color: #121212 !important;
  color: #ffffff !important;
  border: none;
  padding: 6px 16px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

#theme-toggle:hover {
  background-color: #1e1e1e !important;
}


body.light-mode {
  background-color: #fff;
  color: #000;
}

/* Update sections */
body.light-mode .about-section p,
body.light-mode .stat-item p,
/* body.light-mode .quality-section p, */
body.light-mode .vision-mission-section p {
  color: #000 !important;
}

.theme-text {
  color: white;
}

/* When Light Mode is active */
body.light-mode .theme-text {
  color: black;
}

body.light-mode .about-banner::before {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Default (Night Mode) */
.theme-text {
  color: white;
}

/* Day Mode (when body has .light-mode) */
body.light-mode .theme-text {
  color: black;
}

/* Default: Night Mode */
.theme-icon i,
.theme-text {
  color: white;
}

/* Day Mode: when body has .light-mode */
body.light-mode .theme-icon i,
body.light-mode .theme-text {
  color: black;
}

body.light-mode .stay-dark {
  background-color: #000 !important;
  color: #fff !important;
}

/* Keep modal header and paragraph text white */
body.light-mode .stay-dark h4,
body.light-mode .stay-dark p,
body.light-mode .stay-dark .modal-title {
  color: #fff !important;
}

/* Keep white border and text for close button */
body.light-mode .stay-dark .btn-close {
  filter: invert(1);
  /* ensures visibility on white themes */
}

/* Prevent color changes in light mode for scroll percentage */
body.light-mode .stay-dark {
  background-color: #000 !important;
  color: #000 !important;
}


body.light-mode .stat-item h3,
body.light-mode .quality-section,
.red-line

/* body.light-mode .quality-section p, */
/* body.light-mode .quality-section h3, */
body.light-mode .vision-mission-section h4,
body.light-mode .vision-mission-section p {
  color: #000 !important;
}

/* Remove white text override in dark mode sections */
/* body.light-mode .quality-section, */
body.light-mode .vision-mission-section {
  background-color: #f5f5f5;
}

/* Stat section */
body.light-mode .stat-item p {
  color: #000;
}

/* Optional: Button styles can be added here */


.about-banner {
  background-image: url(img/trion1c.jpg);
  /* Replace with your actual image path */
  background-size: cover;
  background-position: center;
  height: 300px;
  /* Adjust as needed */
  position: relative;
}

.about-banner h1 {
  font-size: 3rem;
  z-index: 2;
}

/* Optional: add overlay if needed */
.about-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  /* Dark overlay */
  z-index: 1 !important;
}

.red-line {
  width: 40px;
  height: 6px;
  background-color: #027dc1;
  /* Bright red */
  border-radius: 10px;
}

.about-section p {
  /* font-size: 1rem; */
  line-height: 1.7;
  color: #fff;
}

.about-section .section-heading {
  font-size: 1.75rem;
}

/* Mobile font size adjustment */
@media (max-width: 576px) {
  .about-section .section-heading {
    font-size: 1.4rem;
  }

  /*.about-section p {*/
  /*  font-size: 0.95rem;*/
  /*}*/

  .red-line {
    width: 30px;
    height: 5px;
  }
}

.stat-item h3 {
  font-weight: bold;
  font-size: 2rem;
}

.stat-item p {
  color: #fff;
  margin-top: 0.5rem;
}


@media (max-width: 768px) {
  .stat-item {
    border-right: none !important;
    border-bottom: 1px solid #ccc;
  }

  .stat-item:last-child {
    border-bottom: none;
  }
}

.quality-section {
  background-color: #027dc1;
  /* Soft blue background */
  padding: 60px 0;
}

.quality-section p {
  line-height: 1.8;
  color: #fff;
}

.quality-section .red-line {
  width: 40px;
  height: 6px;
  background-color: #fff;
  border-radius: 10px;
}

@media (max-width: 768px) {
  .quality-section {
    padding: 40px 0;
  }

  .quality-section .red-line {
    width: 30px;
    height: 5px;
  }

  .quality-section img {
    margin-top: 10px;
  }
}

.icon-box i {
  transition: transform 0.3s ease;
}

.icon-box i:hover {
  transform: scale(1.1);
}

@media (max-width: 767.98px) {
  .vision-mission-section .border-end {
    border-right: none !important;
    border-bottom: 1px solid #ddd;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
  }
}

/* sustainability cards that adapt to theme */
.s-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

body.light-mode .s-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* theme tokens (hooked into your .light-mode) */
:root {
  --ms-text: #f5f5f5;
  --ms-muted: #c8c8c8;
  --ms-bg: #101010;
  --ms-card: #0c0c0c;
  --ms-border: #232323;
  --ms-accent: #027dc1;
}

body.light-mode {
  --ms-text: #0f172a;
  --ms-muted: #475569;
  --ms-bg: #ffffff;
  --ms-card: #ffffff;
  --ms-border: #e5e7eb;
  --ms-accent: #027dc1;
}

/* section chrome */
.monitoring-simple {
  color: var(--ms-text);
}

.monitoring-simple .ms-head h3 {
  font-weight: 800;
  letter-spacing: .2px;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
}

.monitoring-simple .ms-head i {
  color: var(--ms-accent);
}

/* grid layout – two columns on md+ */
.ms-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

@media (min-width: 992px) {
  .ms-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* blocks (always open, no JS) */
.ms-block {
  background: var(--ms-card);
  border: 1px solid var(--ms-border);
  border-radius: 16px;
  padding: 18px 20px;
}

.ms-block__title h4 {
  margin: 0 0 10px 0;
  font-weight: 800;
  font-size: clamp(1.05rem, 1.2vw, 1.25rem);
  /* bigger than before */
  line-height: 1.25;
}

.ms-block__body ul {
  margin: 0;
  padding-left: 1.1rem;
}

.ms-block__body li {
  margin: .35rem 0;
  color: var(--ms-muted);
}

/* optional: subtle divider under titles */
.ms-block__title {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ms-border);
  margin-bottom: 10px;
}