/*
================================================================================
SITCIN LANDING PAGE STYLESHEET - BOOTSTRAP 5 COMPATIBLE
================================================================================
Framework: Bootstrap 5.3.2 | jQuery 4.0 | Version: 3.1 | Author: UNECE Transport Division

TABLE OF CONTENTS:
1. CSS Custom Properties (Design System)
2. Base Styles & Typography
3. Utility Classes
4. Header & Top Navigation
5. Main Navigation (Navbar) - Bootstrap 5 Compatible
6. Hero Section (Carousel) - Bootstrap 5 Compatible
7. Count Area Section
8. Section Separators
9. Services Section
10. Pricing Section
11. Timeline Section
12. Comments Section
13. Cover Section
14. Footer
15. Responsive Styles - Bootstrap 5 Breakpoints
16. Bootstrap 5 Migration Compatibility
================================================================================

/* ===============================================
   01: RESETS & VARIABLES
   ===============================================
   Scope: CSS custom properties, global resets, design system tokens
   Dependent HTML: All pages - universal foundation
   Interaction States: N/A - foundational variables
   Specificity Cautions: Root-level variables have global impact
   Editing Tips: Changes here affect entire system - test thoroughly
   =============================================== */

/* ===============================================
   02: BASE ELEMENTS
   ===============================================
   Scope: html, body, headings (h1-h6), paragraphs, links, address
   Dependent HTML: All pages - core HTML elements
   Interaction States: :hover on links, :focus states
   Specificity Cautions: Element selectors have low specificity but global reach
   Editing Tips: Changes affect all instances unless overridden by classes
   =============================================== */

/* ===============================================
   03: LAYOUT
   ===============================================
   Scope: Containers, grid systems, header, footer, main layout structures
   Dependent HTML: All pages - structural containers and layout wrappers
   Interaction States: Responsive breakpoint changes
   Specificity Cautions: Layout changes can cascade to child components
   Editing Tips: Test across all breakpoints when modifying layout rules
   =============================================== */

/* ===============================================
   04: COMPONENTS
   ===============================================
   Scope: Reusable UI components - cards, modals, badges, tables, forms, buttons
   Dependent HTML: Multiple pages - component-specific classes and structures
   Interaction States: :hover, :focus, :active, :disabled states per component
   Specificity Cautions: Component classes may conflict with utilities
   Editing Tips: Maintain component isolation - avoid global dependencies
   =============================================== */

/* ===============================================
   05: PAGES/VIEWS
   ===============================================
   Scope: Page-specific styles mapped to actual HTML files
   Dependent HTML: index.html, comprehensive_ind.html, climate_ind.html, pandemic_ind.html
   Interaction States: Page-specific interactive elements and states
   Specificity Cautions: Page styles should not leak to other pages
   Editing Tips: Keep page styles scoped to avoid cross-page conflicts
   =============================================== */

/* ===============================================
   06: UTILITIES
   ===============================================
   Scope: Spacing, display, visibility, text utilities, helper classes
   Dependent HTML: All pages - utility classes used throughout
   Interaction States: Responsive utility variations
   Specificity Cautions: Utilities should have higher specificity than components
   Editing Tips: Use !important sparingly - prefer specificity ordering
   =============================================== */

/* ===============================================
   07: OVERRIDES
   ===============================================
   Scope: Intentional last-mile tweaks and framework overrides
   Dependent HTML: All pages - specific override scenarios
   Interaction States: Contextual overrides for specific states
   Specificity Cautions: Highest specificity - use with extreme caution
   Editing Tips: Document reason for each override - avoid if possible
   =============================================== */

/* ===============================================
   08: UNUSED/LEGACY
   ===============================================
   Scope: Deprecated selectors and unused rules identified in audit
   Dependent HTML: None - candidates for removal
   Interaction States: N/A - legacy code
   Specificity Cautions: May have unintended side effects if removed
   Editing Tips: Mark for removal after thorough testing
   =============================================== */

/* 1. CSS Custom Properties - DESIGN SYSTEM
#77391f;
================================================== */
:root {
  /* Brand Colors */
  --primary-blue: #089dd9;
  --primary-orange: #d94f08;
  --un-blue: #009edb;
  /* EC CLUSTER*/
  --light-orange: #fef1e7;
  /* RAIL CARD BG*/
  --accent-clay: #8e3815;
  --accent-brown: #42210b;
  --accent-sand: #f1dfb6;
  /* ROAD CARD BG */
  --accent-coral: #058198;
  --accent-logo: #748c99;
  /* SO CLUSTER*/
  --accent-blue: #64afe2;
  --accent-iww: #dbe4e8;
  /* IWW CARD BAG */

  /* Bootstrap Colors */
  --bs-success: #198754;
  /* EV CLUSTER*/
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #e7eaec;
  --bs-dark: #2e2e2e;

  /* Text Colors */
  --text-dark: #2e2e2e;
  --text-medium: #5c5c5c;
  --text-light: #e7eaec;
  --white: #f8f9fa;

  /* Gray Scale */
  --gray-light: #f8f9fa;
  --gray-medium: #e7eaec;
  --gray-dark: #2e2e2e;




  /* Typography - System Fonts with system-ui as primary */
  --font-primary: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-secondary: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-small: 0.9rem;
  --font-size-base: 1rem;
  --font-size-medium: 1.4em;
  --font-size-lg: 1.7rem;
  --font-size-xl: 2rem;
  --font-size-xxl: 2.3rem;
  --font-weight-light: 200;
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* Spacing Scale - Bootstrap 5 Compatible */
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 3rem;
  --spacing-xxl: 4.5rem;

  /* Effects */
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-pill: 50rem;
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.3s ease;
  --bs-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);

  /* Additional Effects from Assessment Components */
  --shadow-light: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
  --shadow-medium: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  --shadow-heavy: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* 2. BASE STYLES & TYPOGRAPHY

================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background: var(--gray-medium);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
  padding-top: 120px;
  /* Space for fixed header (40px) + navbar (80px) */
  transition: padding-top var(--transition-normal);
}

body.header-hidden {
  padding-top: 80px;
  /* Only navbar height when header is hidden */
}

h1 {
  font-family: var(--font-secondary);
  margin-top: var(--spacing-xl);
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-light);
}

h1 span.navy {
  font-family: var(--font-secondary) !important;
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-xxl) !important;
  text-transform: uppercase !important;
  font-weight: var(--font-weight-light) !important;
  color: var(--primary-blue) !important;
  display: inline-block;
}

h2 {
  font-family: var(--font-secondary);
  text-align: center;
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-xl);
  line-height: var(--spacing-lg);
}

h3 {
  font-family: var(--font-primary);
  text-align: center;
  font-weight: var(--font-weight-light);
  color: var(--accent-clay);
  font-size: var(--font-size-lg);
  line-height: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

h4 {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  color: var(--primary-blue);
  font-size: var(--font-size-medium);
  line-height: var(--spacing-lg);
}

h5 {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  line-height: var(--spacing-lg);
}

h6 {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-small);
  line-height: var(--spacing-md);
  text-transform: uppercase;
}

p,
section p {
  color: var(--text-dark);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
}

address {
  font-size: 0.875rem;
}

/* 3. UTILITY CLASSES
================================================== */

/* White text utility classes */
.white {
  color: var(--white) !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

.text-white {
  color: var(--white) !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

.navy-line {
  width: var(--spacing-xxl);
  height: 50px;
  margin: var(--spacing-md) auto var(--spacing-lg);
  border-bottom: 2px solid var(--primary-blue);
}

.navy-line-bottom {
  width: var(--spacing-xxl);
  height: 1px;
  margin: var(--spacing-lg) auto;
  margin-bottom: var(--spacing-lg);
  border-bottom: 2px solid var(--primary-blue);
}

.navy-bg {
  background-color: var(--primary-blue);
  color: var(--white);
  border-radius: var(--bs-border-radius);
  padding: 0.25rem 0.5rem;
  display: inline-block;
  backdrop-filter: blur(5px);
  box-shadow: 0 0.3125rem 0.5rem rgba(8, 157, 217, 0.3);
}

/* Gradient Divider Variants */
.gradient-divider {
  width: 100%;
  height: 0.25rem;
  background: linear-gradient(90deg,
      transparent 0%,
      var(--primary-blue) 25%,
      var(--primary-orange) 50%,
      var(--primary-blue) 75%,
      transparent 100%);
  margin: 2.5rem 0;
  border: none;
  border-radius: var(--bs-border-radius-sm);
  box-shadow: var(--bs-box-shadow-sm);
}

.gradient-divider-thin {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,
      transparent 0%,
      var(--primary-blue) 30%,
      var(--primary-orange) 50%,
      var(--primary-blue) 70%,
      transparent 100%);
  margin: 30px 0;
  border: none;
  border-radius: var(--bs-border-radius-sm);
}

.gradient-divider-thick {
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg,
      transparent 0%,
      var(--primary-blue) 20%,
      var(--primary-orange) 50%,
      var(--primary-blue) 80%,
      transparent 100%);
  margin: 50px 0;
  border: none;
  border-radius: var(--bs-border-radius);
  box-shadow: var(--bs-box-shadow);
}

.gradient-divider-centered {
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg,
      transparent 0%,
      var(--primary-blue) 30%,
      var(--primary-orange) 50%,
      var(--primary-blue) 70%,
      transparent 100%);
  margin: 20px auto;
  border: none;
  border-radius: var(--bs-border-radius-sm);
  box-shadow: var(--bs-box-shadow-sm);
}

/* Large Arrow Down SVG Icon */
.arrow-down-icon {
  display: block;
  margin: 40px auto;
  width: 60px;
  height: 40px;
  text-align: center;
}

.arrow-down-icon svg,
.arrow-down-icon i {
  width: 60px;
  height: 40px;
  fill: var(--primary-blue);
  color: var(--primary-blue);
  transition: all var(--transition-normal);
  font-size: 2.5rem;
}

.arrow-down-icon:hover svg,
.arrow-down-icon:hover i {
  fill: var(--primary-orange);
  color: var(--primary-orange);
  transform: translateY(5px);
}

/* 8. SECTION SEPARATORS
================================================== */
.section-separator-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-sizing: border-box;
}

.section-separator-1 img {

  display: block;
}

.section-separator {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  pointer-events: none;
  background-image: url("../img/blure.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  max-width: 75rem;
  height: 3.125rem;
  opacity: 0.4;
}

.section-separator img {
  width: 100%;
  max-width: 75rem;
  height: auto;
  display: block;
  opacity: 0.4;
}

/* Section Separator Narrow - Complete Styling */
.section-separator-narrow {
  width: 100%;
  max-width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  position: relative;
  z-index: 10;
  pointer-events: none;
  overflow: hidden;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.section-separator-narrow img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: none;
  object-position: top right;
  transition: all 0.3s ease;
}

/* SVG Filter Definitions */
.svg-filter {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Apply sepia filter to specific images */
.sepia-filter {
  filter: url(#sepia);
}

/* Hover effect for filtered images
.sepia-filter:hover {
  filter: none;
  transition: filter 0.3s ease;
}*/

/* Section Separator Narrow - Responsive Design - moved to consolidated media queries section */

.svg-separator {
  width: 100%;
  max-width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  position: relative;
  z-index: 10;
  pointer-events: none;
  overflow: hidden;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  /* Changed from 100% auto to cover for better fit */
  height: 60vh;
  min-height: 600px;
  background-color: var(--bs-light);
}

.foto-separator {
  width: 100%;
  max-width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  position: relative;
  z-index: 10;
  pointer-events: none;
  overflow: hidden;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: 100% auto;
  height: 60vh;
  min-height: 400px;
}

.foto-separator img {
  width: 100%;
  max-width: 100%;
  height: 120%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 0.1s ease-out;
  will-change: transform;
  position: relative;
}

/* Copyright watermark for foto-separator images */
.foto-separator::after {
  content: none; /* Disabled - using author attribution in bottom right instead */
}

/* Copyright watermark for active carousel items */
.carousel-item.active::after {
  content: "/ © STOCK.ADOBE.COM";
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: transparent;
  color: var(--white);
  font-size: 10px;
  padding: 4px 8px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
  border: none;
  backdrop-filter: none;
}

/* Author name before watermark for carousel items */
.carousel-item.active[data-author]::after {
  content: attr(data-author) " / © STOCK.ADOBE.COM";
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: transparent;
  color: var(--white);
  font-size: 10px;
  padding: 4px 8px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
  border: none;
  backdrop-filter: none;
}

.carousel-item.active:hover::after,
.carousel-item.active[data-author]:hover::after {
  opacity: 1;
}

.foto-separator:hover::after {
  opacity: 1;
}

/* Fallback watermark when data-filename is not available and no author */
.foto-separator:not([data-filename]):not([data-author])::after {
  content: "/ © STOCK.ADOBE.COM";
  background: transparent;
  color: var(--white);
  font-size: 10px;
  padding: 4px 8px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
  border: none;
  backdrop-filter: none;
}

/* Author name before watermark */
.foto-separator[data-author]::before {
  content: attr(data-author) " / © STOCK.ADOBE.COM";
  background: transparent;
  color: var(--white);
  font-size: 10px;
  padding: 4px 8px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
  border: none;
  backdrop-filter: none;
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 5;
  pointer-events: none;
}

/* Enhanced watermark styling for better visibility */

/* Accessibility: Keyboard Focus Styles */
*:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* Skip to main content link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
  z-index: 1000;
}

.skip-link:focus {
  top: 6px;
}

/* Enhanced focus for buttons */
.btn:focus,
button:focus {
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.5);
  outline: none;
}

/* Enhanced focus for form controls */
input:focus,
select:focus,
textarea:focus {
  border-color: #0066cc;
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);
  outline: none;
}

/* Enhanced focus for radio buttons */
input[type="radio"]:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* Enhanced focus for navigation links */
.nav-link:focus,
.navbar-nav .nav-link:focus {
  background-color: rgba(0, 102, 204, 0.1);
  outline: 2px solid #0066cc;
}

/* Enhanced focus for dropdown toggles */
.dropdown-toggle:focus {
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.5);
}

/* Screen reader only class */
.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.foto-separator::after {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Section Separator Narrow - Layout Integration */
.gray-section+.features,
.features+.section-separator-narrow,
.section-separator-narrow+.gray-section {
  margin-top: 0 !important;
}

/* Image responsive */
.img-responsive {
  max-width: 100%;
  height: auto;
  border-radius: var(--bs-border-radius-xl);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 4. HEADER & TOP NAVIGATION - COMPLETE SECTION
================================================== */

/* Header Connect - Top Utility Bar */
.header-connect {
  margin-bottom: 0;
  background-color: var(--primary-blue);
  white-space: nowrap;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  height: 40px;
  transition: transform var(--transition-normal);
}

.header-connect.hidden {
  transform: translateY(-100%);
}

.header-connect a {
  color: var(--white);
  text-decoration: none;
  padding: 0.1875rem 0;
  border-radius: var(--bs-border-radius-sm);
  display: inline-block;
}

/* Header Social Links */
.header-social ul {
  white-space: nowrap;
}

.header-social ul li a {
  color: var(--white) !important;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
}

.header-social ul li a:hover {
  color: #3a0404 !important;
  text-decoration: none;
}

.header-social span.orange-bg {
  background-color: var(--primary-orange);
  color: var(--white);
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
  padding: 0 0.625rem 0.625rem 0.625rem;
  margin-bottom: -0.9375rem;
  margin-top: 0.625rem;
  display: inline-block;
}

/* Header Social Language Dropdown Styles - Bootstrap 5 Compatible */
.header-social .dropdown-toggle {
  color: var(--white) !important;
  text-decoration: none;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--bs-border-radius-sm);
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 100;
  text-transform: uppercase;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

.header-social .dropdown-toggle:hover {
  background-color: var(--accent-clay);
  color: var(--white) !important;
  text-decoration: none;
  opacity: 0.8;
}

.header-social .dropdown-menu {
  background-color: var(--primary-blue);
  border: 1px solid #e7e7e7;
  border-radius: var(--bs-border-radius);
  box-shadow: var(--bs-box-shadow-lg);
  min-width: 7.5rem;
  margin-top: 0.3125rem;
}

.header-social .dropdown-menu .dropdown-item {
  color: #333;
  padding: 0.5rem 0.9375rem;
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: none;
  text-shadow: none;
}

.header-social .dropdown-menu .dropdown-item:hover {
  background-color: #f5f5f5;
  color: var(--primary-blue);
  text-decoration: none;
  opacity: 1;
}

/* 5. MAINNAVIGATION (NAVBAR) - Bootstrap 5 Compatible
================================================== */

/*Navbar Wrapper Container */
.navbar-wrapper {
  position: fixed;
  top: 40px;
  right: 0;
  left: 0;
  z-index: 9999;
  margin-top: 0;
  transition: top var(--transition-normal);
}

.navbar-wrapper.header-hidden {
  top: 0;
}

.navbar-wrapper.navbar-hidden {
  transform: translateY(-100%);
  transition: transform var(--transition-normal);
}

.navbar-wrapper:not(.navbar-hidden) {
  transform: translateY(0);
  transition: transform var(--transition-normal);
}

/* Responsive Logo Styles */
.navbar-logo,
.unece-logo {
  height: 25px;
  display: inline-block;
  margin-top: 8px;
  transition: height var(--transition-normal);
}

.navbar-logo {
  height: 30px;
  display: inline-block;
  margin-right: 2px;
  transition: height var(--transition-normal);
}

/*Navbar Container Styles */
.navbar-wrapper>.container,
.navbar-wrapper>.container-fluid {
  padding-right: 0;
  padding-left: 0;
}

.navbar-wrapper .navbar {
  padding-right: 15px;
  padding-left: 15px;
}

/*Navbar Default Styles - Bootstrap 5 Compatible */
.navbar-wrapper .navbar-expand-lg {
  background-color: var(--primary-orange);
  border-color: transparent;
  transition: all var(--transition-normal);
  min-height: 80px;
}

.navbar-wrapper .navbar-expand-lg.navbar-scroll {
  background-color: var(--primary-orange);
  border-color: var(--primary-orange);
  padding: 15px 0;
  min-height: 60px;
}

.navbar-wrapper .navbar.navbar-scroll {
  padding-top: 0;
  padding-bottom: 5px;

  border-radius: 0;
}

/*Navbar Brand Styles */
.navbar-wrapper .navbar-brand {
  color: var(--white);
  height: auto;
  display: block;
  font-size: 14px;
  background: var(--primary-orange);
  padding: 0px 0px;
  border-radius: 0 0 var(--bs-border-radius-sm) var(--bs-border-radius-sm);
  font-weight: 700;
  transition: all var(--transition-normal);
}

.navbar-wrapper .navbar-brand:hover,
.navbar-wrapper .navbar-brand:focus {
  color: var(--white);
  background-color: transparent;
}

.navbar-wrapper .navbar.navbar-scroll .navbar-brand {
  margin-top: 15px;
  border-radius: var(--bs-border-radius-sm);
  font-size: 12px;
  padding: 10px;
  height: auto;
}

/* Navigation Links - Bootstrap 5 Compatible */
.navbar-wrapper .navbar-nav .nav-link {
  color: var(--white);
  font-family: var(--font-primary);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0 10px 0 10px;
  border-top: 6px solid transparent;
}

.navbar-wrapper .navbar-scroll .navbar-nav .nav-link {
  padding: 20px 10px;
}

.navbar-wrapper .navbar-nav .nav-link:hover {
  color: var(--primary-blue);
}

/* Active Navigation States border-top: 6px solid var(--primary-blue); var(--primary-blue) */
.navbar-wrapper .navbar-nav .nav-item.active .nav-link,
.navbar-wrapper .navbar-nav .nav-link.active {
  color: var(--text-dark);
  background-color: #e7eaec;
  border-radius: var(--bs-border-radius);

  display: inline-block;
}

.navbar-wrapper .navbar-nav .nav-link:focus {
  color: var(--white);
  background-color: var(--primary-blue);
}

.navbar-wrapper .navbar-scroll .navbar-nav .nav-link:focus {
  color: var(--white);
  background-color: var(--primary-blue);
}

.navbar-wrapper .navbar-scroll .navbar-nav .nav-link {
  color: var(--white);
}

.navbar-wrapper .navbar-scroll .navbar-nav .nav-link:hover {
  color: var(--white);
  background-color: var(--primary-blue);
}

.navbar-wrapper .navbar-scroll .navbar-nav .nav-item.active .nav-link,
.navbar-wrapper .navbar-scroll .navbar-nav .nav-link.active {
  color: var(--text-dark);
  background-color: rgba(231, 234, 236, 0.9);
  border-radius: var(--bs-border-radius-sm);

  backdrop-filter: blur(5px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Dropdown Menu Styles - Bootstrap 5 Compatible */
.navbar-wrapper .dropdown-menu {
  background-color: var(--primary-orange);
  border: 1px solid #e7e7e7;
  border-radius: var(--bs-border-radius);
  box-shadow: var(--bs-box-shadow-lg);
  min-width: 120px;
}

.navbar-wrapper .dropdown-menu .dropdown-item {
  color: var(--white);
  padding: 8px 15px;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
}

.navbar-wrapper .dropdown-menu .dropdown-item:hover {
  background-color: var(--primary-blue);
  color: var(--white);
}

.navbar-wrapper .navbar-scroll .dropdown-menu {
  background-color: var(--primary-orange);
}

.navbar-wrapper .navbar-scroll .dropdown-menu .dropdown-item {
  color: var(--white);
}

.navbar-wrapper .navbar-scroll .dropdown-menu .dropdown-item:hover {
  background-color: var(--primary-orange);
  color: var(--white);
}

/* 6. HERO SECTION (CAROUSEL) - Bootstrap 5 Compatible
filter: grayscale(90%) blur(var(--blur)) sepia(35%) contrast(80%) brightness(90%) hue-rotate(240deg); invert(50%);
================================================== */
.header-back {
  height: 42.5rem;
  width: 100%;
}

.header-back.one {
  background: url("../img/AdobeStock_76809417 (artegorov3@gmail).jpeg") -30% 80% no-repeat;
  transform: scaleX(-1);
  object-fit: cover;
  background-size: cover;
}

.header-back.two {
  background: url("../img/banner2.jpg") 50% 0 no-repeat;
  background-size: cover;
}

/* Carousel Styles - Bootstrap 5 Compatible */
.carousel {
  height: 42.5rem;
}

.carousel-caption {
  z-index: 10;
  position: absolute;
  top: 6.25rem;
  left: 0;
  bottom: auto;
  right: auto;
  text-align: left;
}

.carousel .carousel-item {
  height: 42.5rem;
}

/* .carousel-inner .carousel-item img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 42.5rem;
  object-fit: cover;
} */

/* Bootstrap 5 Carousel Controls */
.carousel-control-prev,
.carousel-control-next {
  width: 6%;
  top: 40%;
  bottom: auto;
  height: 20%;
  background: none;
  opacity: 1;
  z-index: 10;
}

/* Carousel Control Icons - Bootstrap 5 Style with Light Grey Semi-Transparent Background */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
}

/* Bootstrap 5 uses ::before pseudo-element for the arrow icon */
.carousel-control-prev-icon::before {
  content: '';
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") no-repeat center center;
  background-size: contain;
  width: 1rem;
  height: 1rem;
  display: block;
}

.carousel-control-next-icon::before {
  content: '';
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") no-repeat center center;
  background-size: contain;
  width: 1rem;
  height: 1rem;
  display: block;
}

/* Hover effects for better visibility */
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
  background-color: rgba(255, 255, 255, 0.8);
}

.carousel-control-prev:focus,
.carousel-control-next:focus {
  opacity: 1;
}

.carousel-inner .container {
  position: relative;
}

.carousel-inner {
  overflow: visible;
}

.carousel-caption.blank {
  top: 8.75rem;
}

.carousel-image {
  position: absolute;
  right: 0.625rem;
  top: 9.375rem;
  z-index: 15;
}

.carousel-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--accent-clay);
}

.carousel-video video,
.carousel-video iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  border: none;
}

.carousel-indicators {
  padding-right: 3.75rem;
  list-style-type: none;
}

.carousel-caption h1 {
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: var(--font-size-xl);
  text-transform: uppercase;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: -0.09375rem;
  color: var(--white);
}

.carousel-caption p {
  font-weight: 700;
  font-size: var(--font-size-base);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  color: var(--white);
}

.caption-link {
  color: var(--white);
  margin-left: 0.625rem;
  text-transform: capitalize;
  font-weight: 400;
}

.caption-link:hover {
  text-decoration: none;
  color: inherit;
}

/* 3. COUNT AREA SECTION
================================================== */
.count-area {
  position: relative;
  background-color: var(--accent-clay);
  background-image: linear-gradient(rgba(58, 4, 4, 0.5), rgb(96, 6, 6, 0.3)),
    url("../img/bg1.svg");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.99;
  filter: sepia(0.4) contrast(100%) brightness(100%);
}

.count-area .count-item {
  text-align: center;
  color: var(--white);
}

.count-area .count-item-circle {
  height: 15rem;
  width: 15rem;
  border: 3px solid var(--white);
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
  background-color: rgba(255, 255, 255, 0.15);
  box-shadow: var(--bs-box-shadow-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.count-area h1 {
  text-align: center;
  color: var(--white);
  font-size: var(--font-size-xxl);
}

.count-area h3 {
  font: var(--font-primary);
  text-align: center;
  font-weight: var(--font-weight-light);
  color: var(--white);
  font-size: var(--font-size-lg);
  line-height: var(--spacing-lg);
}

.count-item-circle span {
  font-size: 2.5rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.count-item-circle img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
  border-radius: 0;
}

.count-area .chart {
  position: relative;
}

.percent-blocks {
  padding-top: 2.8125rem;
  padding-bottom: 4.375rem;
}

.count-item h2 {
  font: 700 1.875rem var(--font-secondary);
  text-align: center;
  margin: 1.875rem 0 0.3125rem;
}

.chart canvas {
  position: absolute;
}

/*.count-item h5 {
  font: 500 0.9375rem var(--font-primary);
  padding: 0.125rem 0.9375rem;
  text-transform: uppercase;
  margin: 0;
  border-left: 0.125rem solid var(--primary-blue);
  display: inline-block;
}

.count-item h6 {
  color: var(--white);
  font-family: var(--font-primary);
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-light);
  text-align: justify;
  margin: var(--spacing-xs);
  padding: var(--spacing-xs);
}*/

/* 9. SERVICES SECTION
================================================== */
.services {
  padding-top: 3.75rem;
}

.services h2 {
  font-size: var(--font-size-xl);
  letter-spacing: -0.0625rem;
  font-weight: 600;
  text-transform: uppercase;
}

.services h4 {
  font-size: var(--font-size-medium);
  letter-spacing: -1px;
  font-weight: 200;
  text-transform: NONE;
  margin-top: var(--spacing-md);
  line-height: 1.4;
}

.features-block {
  margin: 0 !important;
  padding: 1rem 0;
}

.features-text {
  margin: 0 !important;
  padding: 1rem 0;
}

.features small {
  color: var(--primary-blue);
}

.features h2 {
  font-size: var(--font-size-medium);
  margin-top: 0.3125rem;
}

.features-text-alone {
  margin: 0 !important;
  padding: 1rem 0;
}

.features-icon {
  color: var(--primary-blue);
  font-size: 2.5rem;
}

.navy-section {
  margin-top: 3.75rem;
  background: var(--primary-blue);
  color: var(--white);
  padding: 1.25rem 0;
}

.gray-section {
  margin-top: 0;
  margin-bottom: 0px;
  position: relative;
}

/* Text Colors
.gray-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.25rem;
  background: linear-gradient(90deg, var(--primary-blue), var(--primary-orange), var(--primary-blue));
}*/

.team-member {
  text-align: center;
}

.team-member img {
  margin: auto;
}

.social-icon a {
  background: var(--primary-blue);
  color: var(--white);
  padding: 0.25rem 0.5rem;
  height: 1.75rem;
  width: 1.75rem;
  display: block;
  border-radius: var(--bs-border-radius-pill);
}

.social-icon a:hover {
  background: var(--accent-clay);
}

.img-small {
  height: 5.5rem;
  width: 5.5rem;
}

/* 10. PRICING SECTION
================================================== */
.pricing-plan {
  margin: var(--spacing-lg) var(--spacing-xl) 0;
  border-radius: var(--bs-border-radius);
  background: var(--accent-logo);
  box-shadow: var(--bs-box-shadow);
  transition: all var(--transition-normal);
  overflow: hidden;
}

.pricing-plan.selected {
  transform: scale(1.05);
  background: var(--primary-orange);
  box-shadow: var(--bs-box-shadow-lg);
}

.pricing-plan li {
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  color: var(--white);
  font-size: var(--font-size-base);
  line-height: 1.5;
  transition: background-color var(--transition-normal);
}

.pricing-plan li:first-child {
  border-top: none;
}

.pricing-plan li:hover:not(.pricing-title):not(.plan-action) {
  background: rgba(255, 255, 255, 0.05);
}

.pricing-plan .pricing-price span {
  font-weight: var(--font-weight-bold);
  color: var(--primary-blue);
  font-size: var(--font-size-base);
}

.pricing-desc {
  border-top: none !important;
  padding: var(--spacing-lg) var(--spacing-md) !important;
  font-style: italic;
  background: rgba(0, 0, 0, 0.1);
}

.pricing-title {
  background: var(--primary-blue) !important;
  color: var(--white) !important;
  padding: var(--spacing-md) !important;
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0 !important;
  font-size: var(--font-size-base) !important;
  font-weight: var(--font-weight-bold) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.plan-action {
  background: rgba(0, 0, 0, 0.1);
  padding: var(--spacing-lg) var(--spacing-md) !important;
}

.testimonials {
  background-image: url("../img/Cover_1.svg");
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.big-icon {
  font-size: 3.5rem;
}

.features .big-icon {
  color: var(--primary-blue);
}

.contact {
  background-image: linear-gradient(rgba(58, 4, 4, 0.3), rgba(58, 4, 4, 0.1)),
    url("../img/word_map.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  margin-top: 3.75rem;
  filter: sepia(0.25);
}

/* Buttons - Bootstrap 5 Compatible */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--primary-blue);
  --bs-btn-border-color: var(--primary-blue);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0680a8;
  --bs-btn-hover-border-color: #0680a8;
  --bs-btn-focus-shadow-rgb: 8, 157, 217;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0680a8;
  --bs-btn-active-border-color: #0680a8;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--primary-blue);
  --bs-btn-disabled-border-color: var(--primary-blue);
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
  font-weight: 600;
}

/* 11. TIMELINE SECTION
================================================== */
section.timeline {
  padding: 3.75rem 0;
  margin: 0;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  /*background-image:
    linear-gradient(rgba(255, 255, 255, 0.85), rgba(244, 244, 244, 0.9)),
    url('../img/Cover_1.svg');*/
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

section.timeline .container {
  position: relative;
  z-index: 2;
}

/* 12. COMMENTS SECTION - Three Assessment Pillars
================================================== */
section.comments {
  padding-bottom: 0rem;
}

.comments-ec,
.comments-so,
.comments-ev {
  margin-top: 1.5625rem;
  margin-left: 1.375rem;
}

.comments-ec,
.comments-so,
.comments-ev,
.commens-name {
  font-weight: 600;
  font-size: var(--font-size-base);
  padding: 0.5rem;
  margin-top: 0.5rem;
}

/* Pillar-specific Avatar Images */
.comments-ec img,
.comments-so img,
.comments-ev img {
  object-fit: contain;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  margin-right: 0.625rem;
  box-shadow: var(--bs-box-shadow);
  border: 3px solid var(--white);
  padding: 0.5rem;
}

.comments-ec img {
  background-color: var(--primary-orange);
}

.comments-so img {
  background-color: var(--accent-logo);
}

.comments-ev img {
  background-color: var(--bs-success);
}

.pull-left {
  float: left !important;
}

/* Speech Bubble Styles */
.bubble {
  position: relative;
  height: auto;
  padding: 2.25rem;
  background: #f8f9fa;
  border-radius: var(--bs-border-radius-lg);
  font-style: italic;
  font-size: var(--font-size-base);
  margin-bottom: 1.5625rem;
}

.bubble:after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 0.9375rem 0.875rem 0;
  border-color: #f8f9fa transparent;
  display: block;
  width: 0;
  z-index: 1;
  bottom: -0.9375rem;
  left: 1.875rem;
}

/* 11. VERTICAL TIMELINE SECTION - Optimized & Consolidated
================================================== */

/* Timeline Container */
.vertical-container {
  width: 90%;
  max-width: 73.125rem;
  margin: 0 auto;
}

.vertical-container::after {
  content: "";
  display: table;
  clear: both;
}

/* Timeline Base Styles */
#vertical-timeline {
  position: relative;
  padding: 0;
  margin: 2rem 0;
}

#vertical-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.125rem;
  height: 100%;
  width: 0.15rem;
  background: var(--primary-orange);
}

#vertical-timeline.light-timeline::before {
  background: var(--primary-orange);
}

/* Timeline Blocks */
.vertical-timeline-block {
  position: relative;
  margin: 2rem 0;
}

.vertical-timeline-block::after {
  content: "";
  display: table;
  clear: both;
}

.vertical-timeline-block:first-child {
  margin-top: 0;
}

.vertical-timeline-block:last-child {
  margin-bottom: 0;
}

/* Timeline Icons */
.vertical-timeline-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  font-size: 1rem;
  border: 0.1875rem solid var(--primary-orange);
  text-align: center;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vertical-timeline-icon i {
  font-size: 1rem;
  color: var(--primary-orange);
}

/* Timeline Content */
.vertical-timeline-content {
  position: relative;
  margin-left: 3.75rem;
  background: var(--white);
  border-radius: var(--bs-border-radius);
  padding: 1rem;
  box-shadow: var(--bs-box-shadow-sm);
}

.vertical-timeline-content::after {
  content: "";
  display: table;
  clear: both;
}

.vertical-timeline-content h2 {
  font-weight: 500;
  margin-top: 0.25rem;
  font-size: var(--font-size-medium);
  color: var(--text-dark);
}

.vertical-timeline-content p,
.vertical-timeline-content ul {
  margin: 1rem 0;
  color: var(--text-medium);
  font-size: var(--font-size-small);
}

.vertical-timeline-content .btn {
  float: right;
}

/* Timeline Date */
.vertical-timeline-content .vertical-date {
  float: left;

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

.vertical-date small {
  color: var(--primary-orange);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-lg);
}

/* Dark Timeline Variant */
.dark-timeline .vertical-timeline-content {
  background: var(--accent-clay);
  color: var(--white);
}

.dark-timeline .vertical-timeline-content::before {
  border-right-color: var(--accent-clay);
}

.dark-timeline .vertical-timeline-content h2,
.dark-timeline .vertical-timeline-content p {
  color: var(--white);
}

/* 13. COVER SECTION
================================================== */
.cover-section {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.cover-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
  margin: 0;
  padding: 0;
  min-width: 100vw;
  min-height: 100vh;
}

/* 14. FOOTER - OPTIMIZED & SIMPLIFIED
================================================== */

/* Main Footer Container */
.footer {
  background: var(--un-blue);
  color: var(--white);
  padding: 3.75rem 0 0;
  position: relative;
  overflow: hidden;
}

/* Footer Top Border */
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.25rem;
  background: linear-gradient(90deg, var(--primary-blue), var(--primary-orange), var(--primary-blue));
  z-index: 1;
}

/* Footer Inner Container */
.footer-inner {
  position: relative;
  z-index: 2;
  background: inherit;
}

/* Footer Center Content */
.footer-center {
  padding-bottom: 2.5rem;
  background: inherit;
}

/* Footer Columns */
.footer .column {
  margin-bottom: 2.5rem;
}

/* Footer Titles */
.footer h2.block-title {
  color: var(--white);
  font-size: var(--font-size-medium);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.625rem;
  border-bottom: 0.125rem solid var(--white);
  display: inline-block;
}

/* Organizations Section */
.organizations-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.organization-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.25rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--bs-border-radius);
}

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

.org-logo {
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.org-logo img {
  height: auto;
  display: block;
}

.org-description {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--white);
  text-align: justify;
  margin-top: 2rem;
}

.org-actions {
  margin-top: 1.25rem;
  text-align: center;
  padding-top: 1.25rem;
  border-top: 1px solid var(--white);
}

.footer-first .btn-theme {
  background: var(--white);
  color: var(--white);
  padding: 0.5rem 1.25rem;
  border-radius: var(--bs-border-radius-pill);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  display: inline-block;
  border: 0.125rem solid var(--white);
}

/* Sitemap Links */
.footer-second ul,
#block-sitemaplinks ul {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 1;
}

.footer-second li,
#block-sitemaplinks li {
  margin-bottom: 0.5rem;
}

.footer-second a,
#block-sitemaplinks a {
  color: var(--white);
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 0.375rem 0 0.375rem 0.625rem;
  border-left: 0.1875rem solid transparent;
  font-size: 0.875rem;
}

#block-sitemaplinks .block-content {
  padding: 0;
}

#block-sitemaplinks a i {
  margin-right: 0.5rem;
  width: 1rem;
  color: var(--white);
}

/* Contact Form */
.footer-third .form-control {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--white);
  border-radius: var(--bs-border-radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.footer-third .form-control:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--primary-blue);
  color: var(--white);
  box-shadow: 0 0 0 0.125rem rgba(8, 157, 217, 0.3);
}

.footer-third .form-control::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.footer-third .btn-theme-submit {
  background: var(--primary-blue);
  color: var(--white);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: var(--bs-border-radius-pill);
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
}

/* Copyright Section */
.copyright {
  background: var(--gray-dark);
  padding: 1.25rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.copyright a {
  color: var(--primary-blue);
  text-decoration: none;
  transition: color var(--transition-normal);
}

.copyright a:hover {
  color: var(--primary-orange);
  text-decoration: none;
}

.copyright-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  color: var(--white);
  font-size: 0.875rem;
  line-height: 1.5;
}

.copyright-left {
  flex: 1;
  text-align: left;
}

.copyright-right {
  flex-shrink: 0;
  text-align: right;
}

/* 15. RESPONSIVE STYLES - BOOTSTRAP 5 BREAKPOINTS - CONSOLIDATED
================================================== */

/* Header and Navbar Responsive Styles (Consolidated) */
@media (max-width: 768px) {
  .header-connect {
    height: 50px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    z-index: 10000;
    position: fixed;
    width: 100%;
  }

  .header-connect .container {
    padding: 0 10px;
  }

  .header-connect .row {
    align-items: center;
    margin: 0;
  }

  .header-social ul li a {
    padding: 6px 8px !important;
    font-size: 12px !important;
    border-radius: 3px;
    margin: 0 3px;
  }

  .header-social ul li a span:not(.orange-bg) {
    display: none;
  }

  .header-social ul li a i {
    margin-right: 0 !important;
    font-size: 10px !important;
  }

  .header-social span.orange-bg a {
    padding: 3px 5px !important;
    font-size: 9px !important;
    text-transform: uppercase;
  }

  .header-social .dropdown-toggle {
    padding: 2px 3px !important;
    font-size: 10px !important;
  }

  .unece-logo {
    height: 15px !important;
  }

  .header-social ul li:contains("|") {
    display: none;
  }

  .navbar-wrapper {
    top: 50px;
    z-index: 9999;
    margin-top: 0;
    position: fixed !important;
    width: 100%;
    left: 0;
    right: 0;
    transition: top var(--transition-normal), transform var(--transition-normal);
    background-color: var(--primary-orange);
  }

  .navbar-wrapper.header-hidden {
    top: 0 !important;
  }

  .navbar-wrapper.navbar-hidden {
    transform: translateY(-100%) !important;
  }

  .navbar-wrapper:not(.navbar-hidden) {
    transform: translateY(0) !important;
  }

  .navbar-wrapper .navbar-expand-lg {
    padding: 8px 0;
    margin-top: 0;
    background-color: var(--primary-orange);
    min-height: 60px;
    transition: all var(--transition-normal);
  }

  .navbar-wrapper .navbar-expand-lg.navbar-scroll {
    padding: 6px 0;
    min-height: 50px;
  }

  .navbar-wrapper .navbar-nav .nav-link {
    padding: 12px 8px;
  }

  body {
    padding-top: 110px;
  }

  body.header-hidden {
    padding-top: 60px;
  }

  .navbar-toggler {
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 4px 6px;
    font-size: 12px;
    width: 36px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.1);
  }

  .navbar-toggler:focus {
    box-shadow: 0 0 0 0.125rem rgba(255, 255, 255, 0.5);
    outline: none;
  }

  .navbar-toggler-icon {
    background-color: white;
  }

  .navbar-collapse {
    background-color: var(--primary-orange);
    margin-top: 8px;
    border-radius: var(--bs-border-radius);
    padding: 15px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .navbar-nav {
    text-align: center;
  }

  .navbar-nav .nav-item {
    margin: 5px 0;
  }

  .navbar-nav .nav-link {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin: 0;
    border-radius: var(--bs-border-radius-sm);
    padding: 12px 20px;
    color: white !important;
    font-weight: 600;
  }

  .navbar-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: white !important;
  }

  .navbar-collapse.collapsing {
    transition: height 0.35s ease;
  }

  .navbar-collapse.show {
    display: block !important;
  }

  .navbar-collapse:not(.show) {
    display: none;
  }
}

/* Small devices (tablets, 576px and up) */
@media (min-width: 576px) {
  .navbar-logo {
    height: 32px;
    margin-right: 3px;
  }

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

/* Small mobile devices (576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  .carousel {
    height: clamp(350px, 65vh, 450px);
  }

  .carousel .carousel-item {
    height: clamp(350px, 65vh, 450px);
    background-position: left center;
  }

  .header-back {
    height: clamp(350px, 65vh, 450px);
  }

  .carousel-caption {
    left: 4%;
    top: 3rem;
    right: 4%;
  }

  .carousel-caption h1 {
    font-size: clamp(20px, 4.5vw, 28px);
    margin-bottom: 0.75rem;
  }

  .carousel-caption p {
    font-size: clamp(13px, 3vw, 15px);
    line-height: 1.4;
  }

  /* Show smaller phone image on larger mobile screens */
  .carousel-image {
    display: block;
    right: 2%;
    top: 10rem;
    width: 35%;
  }

  .carousel-image img {
    width: 100%;
    height: auto;
    max-height: 300px;
  }
}

/* Extra small devices only (max-width: 575px) */
@media (max-width: 575px) {

  /* Section Separators */
  .section-separator-narrow img {
    min-height: 200px;
    object-fit: cover;
    filter: blur(0.5rem);
  }

  /* Carousel */
  .carousel-caption,
  .carousel-caption.blank {
    left: 5%;
    top: 5rem;
  }

  .carousel-caption h1 {
    font-size: var(--font-size-lg);
  }

  .carousel-image {
    position: absolute;
    right: 0.3125rem;
    top: 12.5rem;
    width: 18.75rem;
    z-index: 15;
  }

  .carousel-control-prev,
  .carousel-control-next {
    display: none;
  }

  /* Comments Section */
  .comments .col-lg-4 {
    margin-bottom: 3.75rem;
    padding-bottom: 1.25rem;
  }

  .comments .col-lg-4:last-child {
    margin-bottom: 0;
  }

  /* Timeline */
  .timeline {
    padding: 1.25rem 0;
    background-position: right center;
    background-size: 170% auto;
  }

  /* Pricing */
  .pricing-plan {
    margin: 0.9375rem 0.3125rem 3.75rem 0.3125rem;
  }

  .pricing-plan.selected {
    margin-bottom: 4.375rem;
    transform: scale(1);
  }

  /* Footer */
  .footer {
    padding: 1.25rem 0 0;
    margin-top: 2.5rem;
  }

  /* Assessment Components Mobile Optimizations */
  .category-navigation {
    margin: 20px 0;
    padding: 15px 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .step-progress-container {
    justify-content: flex-start;
    gap: 15px;
    padding: 10px 0;
    min-width: max-content;
  }

  .step-progress-line {
    display: none;
  }

  .step-item {
    flex: 0 0 auto;
    min-width: 90px;
    max-width: 100px;
  }

  .step-circle {
    width: 45px;
    height: 45px;
    margin-bottom: 8px;
    flex-shrink: 0;
  }

  .step-details {
    text-align: center;
    margin-top: 0;
  }

  .step-details h6 {
    font-size: 11px;
    line-height: 1.2;
    margin-bottom: 4px;
  }

  .step-stats {
    font-size: 10px;
    margin-bottom: 4px;
  }

  .step-status {
    font-size: 8px;
    padding: 2px 6px;
  }

  .pagination-header {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 10px;
  }

  .pagination-nav {
    flex-direction: column;
    gap: 15px;
  }

  .pagination-nav .btn {
    width: 100%;
    padding: 12px;
  }

  .page-dots {
    justify-content: center;
    gap: 6px;
  }

  .form-navigation .btn {
    margin: 5px;
    padding: 10px 20px;
    display: inline-block;
  }

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

  .dashboard-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .footer h2.block-title {
    font-size: var(--font-size-base);
    margin-bottom: 1.25rem;
  }

  .footer-second ul {
    columns: 1;
  }

  .footer-center {
    padding-bottom: 1.25rem;
  }

  .copyright .field__item {
    font-size: 0.75rem;
  }

  .copyright-text {
    flex-direction: column;
    text-align: center;
  }

  .copyright-left,
  .copyright-right {
    text-align: center;
    margin: 0.3125rem 0;
  }

  .organization-item {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
  }
}

/* Portrait orientation adjustments for mobile devices */
@media (max-width: 480px) and (orientation: portrait) {
  .cover-section {
    height: 35vh;
  }

  .cover-section img {
    object-position: right center;
    min-width: 170vw;
    height: 35vh;
  }

  .timeline {
    padding: 1.25rem 0;
    background-position: right center;
    background-size: 170% auto;
  }

  /* Comments */
  .comments .col-lg-4 {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  /* Section Separators */
  .section-separator-narrow img {
    min-height: 300px;
    object-fit: cover;
  }

  /* Carousel */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.4;
  }


}

/* Small devices (tablets, 576px and up) */
@media (min-width: 576px) {
  .navbar-logo {
    height: 32px;
    margin-right: 3px;
  }

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

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .dashboard-stats {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .step-progress-container {
    flex-wrap: nowrap;
  }

  .step-item {
    min-width: 140px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

  /* Section Separators */
  .section-separator-narrow img {
    min-height: 350px;
    object-fit: cover;
  }

  /* Footer */
  .footer-second ul {
    columns: 2;
    column-gap: 1.875rem;
  }

  .dashboard-stats {
    grid-template-columns: repeat(4, 1fr);
  }

  .indicators-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Vertical Timeline - Desktop Layout */
  .vertical-timeline-icon {
    width: 3.125rem;
    height: 3.125rem;
    left: 50%;
    margin-left: -1.5625rem;
    font-size: 1.1875rem;
  }

  .vertical-timeline-content {
    margin-left: 0;
    padding: 1.6rem;
    width: 45%;
  }

  .vertical-timeline-content::before {
    top: 1.5rem;
    left: 100%;
    border-color: transparent;
    border-left-color: var(--white);
  }

  .vertical-timeline-content .btn {
    float: left;
  }

  .vertical-timeline-content .vertical-date {
    position: absolute;
    width: 100%;
    left: 122%;
    top: 0.125rem;
    font-size: 0.875rem;
  }

  /* Alternating Layout for Even Items */
  .vertical-timeline-block:nth-child(even) .vertical-timeline-content {
    float: right;
  }

  .vertical-timeline-block:nth-child(even) .vertical-timeline-content::before {
    top: 1.5rem;
    left: auto;
    right: 100%;
    border-color: transparent;
    border-right-color: var(--white);
  }

  .vertical-timeline-block:nth-child(even) .vertical-timeline-content .btn {
    float: right;
  }

  .vertical-timeline-block:nth-child(even) .vertical-timeline-content .vertical-date {
    left: auto;
    right: 122%;
    text-align: right;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

  /* Navbar */
  .navbar-logo {
    height: 45px;
    margin-right: 5px;
  }

  /* Section Separators */
  .section-separator-narrow img {
    min-height: 400px;
    max-height: 500px;
    object-fit: cover;
  }

  /* Timeline Center Orientation */
  #vertical-timeline.center-orientation {
    margin: 3rem 0;
  }

  #vertical-timeline.center-orientation::before {
    left: 50%;
    margin-left: -0.125rem;
  }

  .center-orientation .vertical-timeline-block {
    margin: 4rem 0;
  }

  .center-orientation .vertical-timeline-block:first-child {
    margin-top: 0;
  }

  .center-orientation .vertical-timeline-block:last-child {
    margin-bottom: 0;
  }

  .center-orientation .vertical-timeline-icon {
    left: 50%;
    margin-left: -1.5625rem;
  }
}

/* Regular nav-tabs styling for map section */
.nav-tabs .nav-link {
  border: 1px solid transparent;
  border-top-left-radius: var(--bs-border-radius);
  border-top-right-radius: var(--bs-border-radius);
  background: none;
  color: var(--text-medium);
  font-weight: 600;
  padding: 0.75rem 1rem;
}

.nav-tabs .nav-link:hover {
  border-color: var(--bs-border-color-translucent) var(--bs-border-color-translucent) var(--bs-border-color);
  isolation: isolate;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--bs-nav-tabs-link-active-color);
  background-color: var(--bs-nav-tabs-link-active-bg);
  border-color: var(--bs-nav-tabs-link-active-border-color);
  border-bottom-color: var(--white);
}

/*TABPANEL STYLES - Bootstrap 5 Compatible
================================================== */
/* Fix tab content spacing */
.tab-content {
  margin-bottom: 2rem;
  margin-top: 0;
}

.tab-content .tab-pane {
  background-color: var(--white);
  text-align: left;
  padding: 1.25rem;
  border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
  margin-bottom: 1.25rem;
  box-shadow: var(--bs-box-shadow-sm);
}

.tab-content .tab-pane h3 {
  color: var(--text-dark);
  font-weight: 600;
  margin-bottom: 0.9375rem;
  text-align: left;
}

.tab-content .tab-pane h4 {
  font-weight: 600;
  margin-bottom: 0.9375rem;
  text-align: left;
}

.tab-content .tab-pane p {
  color: var(--text-dark);
  font-family: var(--font-primary);
  font-size: var(--font-size-small);
  line-height: 1.6;
  text-align: left;
  margin-bottom: 0.9375rem;
}

#mapTabs {
  margin-bottom: 0;
}

/* Demo Section Tab Styles */
.demo-section {
  padding: 3rem 0;
}

.nav-tabs-custom {
  border-bottom: 3px solid var(--primary-blue);
  margin-bottom: 0;
}

.nav-tabs-custom .nav-link {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-medium);
  font-weight: 600;
  padding: 1rem 1.5rem;
  transition: all var(--transition-normal);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.nav-tabs-custom .nav-link:hover {
  background: var(--gray-light);
  border-color: transparent;
  color: var(--text-dark);
}

.nav-tabs-custom .nav-link.active,
.nav-tabs-custom .nav-link.active:hover,
.nav-tabs-custom .nav-link.active:focus {
  background: var(--white);
  color: var(--primary-blue);
  border-color: var(--primary-blue);
  border-bottom: 4px solid var(--white);
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
  margin-bottom: -3px;
  position: relative;
  z-index: 1;
}

/* Regular nav-tabs styling for map section */
.nav-tabs .nav-link {
  border: 1px solid transparent;
  border-top-left-radius: var(--bs-border-radius);
  border-top-right-radius: var(--bs-border-radius);
  background: none;
  color: var(--text-medium);
  font-weight: 600;
  padding: 0.75rem 1rem;
}

.nav-tabs .nav-link:hover {
  border-color: var(--bs-border-color-translucent) var(--bs-border-color-translucent) var(--bs-border-color);
  isolation: isolate;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--bs-nav-tabs-link-active-color);
  background-color: var(--bs-nav-tabs-link-active-bg);
  border-color: var(--bs-nav-tabs-link-active-border-color);
}

.nav-tabs-custom .nav-link:hover {
  color: var(--primary-blue);
  border-bottom-color: var(--primary-orange);
}

.nav-tabs-custom .nav-link.active {
  color: var(--primary-blue);
  border-bottom-color: var(--white);
  background: var(--white);
}

/* Reduce gap between tabs and content */
.nav-tabs-custom {
  margin-bottom: 0;
}

.nav-tabs-custom+.tab-content {
  margin-top: 0;
  padding-top: 0;
}

.text-columns-2 {
  column-count: 2;
  column-gap: 2rem;
  text-align: justify;
}

.quote-card {
  background: var(--accent-sand);
  padding: 1.5rem;
  border-left: 4px solid var(--primary-orange);
  font-style: italic;
  margin: 1.5rem 0;
  border-radius: var(--bs-border-radius);
}

.stat-card {
  background: var(--gray-medium);
  padding: 1.5rem;
  border-radius: var(--bs-border-radius);
  text-align: center;
  box-shadow: var(--bs-box-shadow);
  margin-bottom: 1rem;
  transition: all var(--transition-normal);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--bs-box-shadow-lg);
}

.stat-card .stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 0.5rem;
}

.stat-card .stat-label {
  font-size: 0.875rem;
  color: var(--text-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

/* Stat Card Color Variations */
.stat-card-blue {
  background: #f8fdff;
  border-left: 4px solid var(--primary-blue);
  padding: 1.5rem;
}

.stat-card-blue .stat-number {
  color: var(--primary-blue);
  padding: 1.5rem;
}

.stat-card-orange {
  background: #fff8f0;
  border-left: 4px solid var(--primary-orange);
  padding: 1.5rem;
}

.stat-card-orange .stat-number {
  color: var(--primary-orange);
  padding: 1.5rem;
}

.stat-card-clay {
  background: #faf7f5;
  border-left: 4px solid var(--accent-clay);
  padding: 1.5rem;
}

.stat-card-clay .stat-number {
  color: var(--accent-clay);
  padding: 1.5rem;
}

.stat-card-brown {
  background: #f9f6f6;
  border-left: 4px solid var(--accent-brown);
  padding: 1.5rem;
}

.stat-card-brown .stat-number {
  color: var(--accent-brown);
  padding: 1.5rem;
}

.stat-card-green {
  background: #f6fff8;
  border-left: 4px solid #28a745;
  padding: 1.5rem;
}

.stat-card-green .stat-number {
  color: #28a745;
  padding: 1.5rem;
}

.stat-card-purple {
  background: #faf8ff;
  border-left: 4px solid #6f42c1;
  padding: 1.5rem;
}

.stat-card-purple .stat-number {
  color: #6f42c1;
  padding: 1.5rem;
}

.text-card {
  background: var(--white);
  padding: 0.5rem;
  margin: 0.5rem;
  border-radius: var(--bs-border-radius);
  box-shadow: var(--bs-box-shadow);
  height: 100%;
  transition: all var(--transition-normal);
}

.text-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--bs-box-shadow-lg);
}

.text-card.featured {
  border-left: 4px solid var(--primary-orange);
}

.text-card h4 {
  margin-bottom: 1rem;
}

.text-card .stat-label {
  font-size: 0.875rem;
  text-transform: none;
  text-align: left;
  color: var(--text-medium);
}

/* Custom Scrollbar Styling for Assessment Components */
.category-navigation::-webkit-scrollbar {
  height: 6px;
}

.category-navigation::-webkit-scrollbar-track {
  background: var(--gray-light);
  border-radius: 3px;
}

.category-navigation::-webkit-scrollbar-thumb {
  background: var(--primary-blue);
  border-radius: 3px;
}

.category-navigation::-webkit-scrollbar-thumb:hover {
  background: var(--primary-orange);
}

/* Firefox scrollbar styling */
.category-navigation {
  scrollbar-width: thin;
  scrollbar-color: var(--primary-blue) var(--gray-light);
}

/* Transport Modes Summary */
.transport-modes-summary {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 15px;
}

.transport-mode-card {
  display: flex;
  align-items: center;
  padding: 15px;
  background: var(--white);
  border: 1px solid var(--gray-medium);
  border-radius: var(--bs-border-radius);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.transport-mode-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--bs-box-shadow);
}

.transport-mode-card .mode-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-blue);
  color: var(--white);
  border-radius: 50%;
  margin-right: 15px;
  flex-shrink: 0;
}

.transport-mode-card .mode-icon i {
  font-size: 20px;
}

.transport-mode-card .mode-info {
  flex: 1;
}

.transport-mode-card .mode-info h6 {
  margin: 0 0 5px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
}

.transport-mode-card .mode-stats {
  font-size: 12px;
  color: var(--text-medium);
}

.transport-mode-card .mode-score {
  font-size: 11px;
  color: var(--primary-orange);
  font-weight: 600;
  margin-top: 3px;
}

.transport-mode-card .mode-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gray-light);
}

.transport-mode-card .mode-progress-bar {
  height: 100%;
  background: var(--primary-blue);
  transition: width 0.6s ease;
}

/* Pillar Navigation Styles */
.pillar-navigation {
  background: var(--white);
  border: 1px solid var(--gray-medium);
  border-radius: var(--bs-border-radius);
  padding: 20px;
  margin: 20px 0;
  box-shadow: var(--bs-box-shadow-sm);
}

.pillar-nav-items {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.pillar-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 25px;
  background: var(--gray-light);
  border: 2px solid var(--gray-medium);
  border-radius: var(--bs-border-radius);
  cursor: pointer;
  transition: all var(--transition-normal);
  min-width: 140px;
  text-align: center;
  position: relative;
}

.pillar-nav-item:hover {
  background: var(--white);
  border-color: var(--primary-blue);
  transform: translateY(-2px);
  box-shadow: var(--bs-box-shadow);
}

.pillar-nav-item.active {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  color: var(--white);
  box-shadow: var(--bs-box-shadow);
}

.pillar-nav-item i {
  font-size: 24px;
  margin-bottom: 10px;
  color: var(--primary-blue);
  transition: color var(--transition-normal);
}

.pillar-nav-item.active i {
  color: var(--white);
}

.pillar-nav-item span {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 8px;
  transition: color var(--transition-normal);
  display: block;
}

.pillar-nav-item.active span {
  color: var(--white);
}

.nav-badge {
  background: var(--white);
  color: var(--primary-blue);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--primary-blue);
  margin-top: auto;
}

.pillar-nav-item.active .nav-badge {
  background: var(--primary-orange);
  color: var(--white);
  border-color: var(--primary-orange);
}

/* Responsive adjustments for pillar navigation */
@media (max-width: 768px) {
  .pillar-nav-items {
    flex-direction: column;
    gap: 10px;
  }

  .pillar-nav-item {
    width: 100%;
    min-width: unset;
    padding: 15px 20px;
    flex-direction: row;
    justify-content: space-between;
  }

  .pillar-nav-item i {
    font-size: 20px;
    margin-bottom: 0;
    margin-right: 15px;
  }

  .pillar-nav-item span {
    font-size: 13px;
    margin-bottom: 0;
    flex: 1;
    text-align: left;
  }

  .nav-badge {
    margin-top: 0;
  }
}

/* Hide cluster labels on all indicator cards */
.cluster-label {
  display: none !important;
}

.pillar-section.hidden-pillar {
  display: none;
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus States for Better Accessibility */
.btn:focus,
.form-control:focus,
.radio-option:focus-within {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .indicator-card {
    border: 2px solid var(--text-dark);
  }
}

/* Alternative watermark styles for foto-separator */
.foto-separator.watermark-light::after {
  background: rgba(255, 255, 255, 0.8);
  color: var(--text-dark);
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

.foto-separator.watermark-minimal::after {
  background: transparent;
  color: var(--white);
  font-size: 10px;
  padding: 4px 8px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
  border: none;
  backdrop-filter: none;
}

.foto-separator.watermark-large::after {
  font-size: 14px;
  padding: 10px 16px;
  bottom: 20px;
  left: 20px;
}

/* Responsive watermark adjustments */
@media (max-width: 768px) {
  .foto-separator::after {
    font-size: 10px;
    padding: 6px 10px;
    bottom: 10px;
    left: 10px;
  }
}

@media (max-width: 480px) {
  .foto-separator::after {
    font-size: 9px;
    padding: 4px 8px;
    bottom: 8px;
    left: 8px;
  }
}

/* View Controls Styles */
.view-controls {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 20px;
  padding: 1.25rem;
  background: var(--white);
  border: 1px solid var(--gray-medium);
  border-radius: var(--bs-border-radius-sm);
  box-shadow: var(--shadow-light);
  flex-wrap: wrap;
}

.view-toggle {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.view-toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--gray-medium);
  background: var(--white);
  color: var(--text-medium);
  border-radius: var(--bs-border-radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}

.view-toggle-btn:hover {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
  background: #f8fdff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-light);
}

.view-toggle-btn.active {
  background: var(--primary-blue);
  color: var(--white);
  border-color: var(--primary-blue);
  box-shadow: var(--shadow-medium);
}

.view-toggle-btn.active:hover {
  background: #0680a8;
  border-color: #0680a8;
  color: var(--white);
}

.view-toggle-btn i {
  font-size: 0.875rem;
}

.bulk-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  flex: 1;
}

/* Responsive adjustments for view controls */
@media (max-width: 768px) {
  .view-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .view-toggle {
    justify-content: center;
    width: 100%;
  }

  .view-toggle-btn {
    flex: 1;
    justify-content: center;
  }

  .bulk-actions {
    justify-content: center;
    width: 100%;
  }
}

/* ===============================================
   ASSESSMENT FORMS & COMPONENTS (from style-ind.css)
   =============================================== */

/* SITCIN215 Enhanced Dashboard Styles */
.master-dashboard-panel {
  background: var(--white);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--bs-box-shadow-lg);
  margin: 30px 0;
  overflow: hidden;
  border: 1px solid var(--gray-medium);
}

.dashboard-tabs {
  background: var(--gray-light);
  border-bottom: 3px solid var(--primary-blue);
  margin-bottom: 0;
  padding: 0 20px;
}

.dashboard-tabs .nav-link {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-medium);
  font-weight: 600;
  padding: 20px 25px;
  transition: all var(--transition-normal);
  text-transform: none;
  font-size: 14px;
}

.dashboard-tabs .nav-link:hover {
  background: var(--white);
  border-color: transparent;
  color: var(--primary-blue);
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
}

.dashboard-tabs .nav-link.active {
  background: var(--white);
  color: var(--primary-blue);
  border-bottom: 3px solid var(--white);
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
  margin-bottom: -3px;
  position: relative;
  z-index: 1;
}

.dashboard-tabs .nav-link i {
  margin-right: 8px;
}

.dashboard-tab-content {
  padding: 0;
}

/* Enhanced Dashboard Header */
.dashboard-header {
  padding: 30px;
  background: linear-gradient(135deg, #f8fdff 0%, #ffffff 100%);
  border-bottom: 1px solid var(--gray-medium);
}

.dashboard-header .header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.dashboard-header .header-left h2 {
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 300;
  color: var(--text-dark);
  text-align: left;
}

.dashboard-header .dashboard-subtitle {
  margin: 0;
  color: var(--text-medium);
  font-size: 16px;
  text-align: left;
}

.dashboard-header .header-right {
  text-align: right;
}

.overall-completion {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.completion-label {
  font-size: 14px;
  color: var(--text-medium);
  font-weight: 500;
}

.completion-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--primary-blue);
  line-height: 1;
}

.completion-bar {
  width: 200px;
  height: 8px;
  background: var(--gray-light);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.completion-fill {
  height: 100%;
  background: linear-gradient(90deg,
      var(--primary-blue),
      var(--primary-orange));
  border-radius: 10px;
  transition: width 0.8s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Dashboard Stats Cards */
.dashboard-stats-container {
  padding: 30px;
  background: var(--white);
}

.stats-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: var(--bs-border-radius-lg);
  padding: 25px 20px;
  display: flex;
  align-items: center;
  box-shadow: var(--bs-box-shadow);
  transition: all var(--transition-normal);
  border: 1px solid var(--gray-medium);
  position: relative;
  overflow: hidden;
}

.stats-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  transition: all var(--transition-normal);
}

.stats-card.blue-gradient::before {
  background: var(--primary-blue);
}

.stats-card.orange-gradient::before {
  background: var(--primary-orange);
}

.stats-card.green-gradient::before {
  background: #28a745;
}

.stats-card.purple-gradient::before {
  background: #6f42c1;
}

.stats-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--bs-box-shadow-lg);
}

.stats-card:hover::before {
  width: 100%;
  opacity: 0.05;
}

.stats-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  font-size: 24px;
  color: var(--white);
  flex-shrink: 0;
}

.blue-gradient .stats-icon {
  background: linear-gradient(135deg, var(--primary-blue), #0680a8);
}

.orange-gradient .stats-icon {
  background: linear-gradient(135deg, var(--primary-orange), #c23e06);
}

.green-gradient .stats-icon {
  background: linear-gradient(135deg, #28a745, #1e7e34);
}

.purple-gradient .stats-icon {
  background: linear-gradient(135deg, #6f42c1, #5a32a3);
}

.stats-content {
  flex: 1;
}

.stats-number {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 5px 0;
  color: var(--text-dark);
  line-height: 1;
}

.stats-label {
  font-size: 14px;
  color: var(--text-medium);
  margin: 0;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Enhanced Transport Modes Grid */
.dashboard-content {
  padding: 0;
}

.transport-modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
  padding: 30px;
  background: #f8f9fa;
}

.transport-mode-section {
  background: var(--white);
  border-radius: var(--bs-border-radius-lg);
  padding: 25px;
  box-shadow: var(--bs-box-shadow);
  transition: all var(--transition-normal);
  border: 1px solid var(--gray-medium);
  position: relative;
  overflow: hidden;
}

.transport-mode-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  transition: all var(--transition-normal);
}

.road-section::before {
  background: var(--accent-brown);
}

.rail-section::before {
  background: var(--accent-clay);
}

.iww-section::before {
  background: var(--accent-coral);
}

.transport-mode-section:hover {
  transform: translateY(-3px);
  box-shadow: var(--bs-box-shadow-lg);
}

.transport-mode-section:hover::before {
  width: 100%;
  opacity: 0.05;
}

.mode-header {
  display: flex;
  align-items: start;
  justify-content: center;
  margin: 20px 0 20px 0;
  gap: 15px;
}

.mode-icon-container {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.road-section .mode-icon-container {
  background: linear-gradient(135deg, var(--primary-blue), #0680a8);
}

.rail-section .mode-icon-container {
  background: linear-gradient(135deg, var(--primary-orange), #c23e06);
}

.iww-section .mode-icon-container {
  background: linear-gradient(135deg, #28a745, #1e7e34);
}

.mode-icon {
  font-size: 4cap;
  color: var(--primary-blue);
}

.mode-info {
  flex: 1;
}

.mode-title {
  margin: 0 0 5px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-dark);
}

.mode-badge {
  background: var(--gray-light);
  color: var(--text-dark);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--gray-medium);
  border-radius: var(--bs-border-radius-pill);
}

.pillars-progress {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.pillar-item {
  background: #f8f9fa;
  border-radius: var(--bs-border-radius);
  padding: 15px;
  transition: all var(--transition-normal);
  box-shadow: var(--bs-box-shadow);
}

.pillar-item:hover {
  background: #f0f0f0;
}

.pillar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.pillar-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
}

.pillar-score {
  font-size: 12px;
  color: var(--text-medium);
  font-weight: 500;
}

.pillar-progress-bar {
  height: 8px;
  background: var(--gray-medium);
  border-radius: 10px;
  overflow: hidden;
}

.pillar-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.6s ease;
}

/* Economic Pillar Progress Bars - Orange Theme */
.road-economic-fill,
.rail-economic-fill,
.iww-economic-fill {
  background: linear-gradient(90deg,
      var(--primary-orange),
      var(--accent-clay)) !important;
  box-shadow: 0 2px 4px rgba(217, 79, 8, 0.2);
}

/* Social Pillar Progress Bars - Logo Color Theme */
.road-social-fill,
.rail-social-fill,
.iww-social-fill {
  background: linear-gradient(90deg, var(--accent-logo), #8da3b1) !important;
  box-shadow: 0 2px 4px rgba(116, 140, 153, 0.2);
}

/* Environmental Pillar Progress Bars - Green Theme */
.road-environmental-fill,
.rail-environmental-fill,
.iww-environmental-fill {
  background: linear-gradient(90deg, var(--bs-success), #2d8653) !important;
  box-shadow: 0 2px 4px rgba(25, 135, 84, 0.2);
}

.assessment-container {
  margin-top: 20px;
  padding-bottom: 50px;
  font-family: var(--font-primary);
}

/* Mini Dashboard */
.mini-dashboard {
  margin: 25px 0;
  padding: clamp(15px, 3vw, 20px);
  background: var(--white);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--bs-box-shadow);
  border: 1px solid var(--gray-medium);
}

.mini-dashboard h4 {
  margin: 0 0 15px 0;
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 600;
  color: var(--text-medium);
  text-align: center;
}

/* Dashboard Statistics Grid */
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.dashboard-stats .stat-card {
  background: var(--gray-light);
  padding: clamp(12px, 2vw, 15px);
  border-radius: var(--bs-border-radius-sm);
  text-align: center;
  transition: all var(--transition-normal);
  border: 1px solid var(--gray-medium);
}

.dashboard-stats .stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--bs-box-shadow);
  background: var(--white);
}

.stat-number {
  font-size: clamp(16px, 3vw, 20px);
  font-weight: 700;
  margin-bottom: 5px;
  line-height: 1;
}

.stat-number.completed {
  color: #28a745;
}

.stat-number.total {
  color: var(--primary-blue);
}

.stat-number.pending {
  color: var(--primary-orange);
}

.stat-number.score {
  color: var(--accent-clay);
}

.stat-number.efficiency {
  color: #6f42c1;
}

.stat-number.categories {
  color: #fd7e14;
}

.stat-label {
  font-size: 11px;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

/* Compact Progress Section */
.compact-progress-section {
  margin-top: 20px;
  padding: 15px;
  border-radius: var(--bs-border-radius-sm);
  color: var(--primary-blue);
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
}

.progress-title {
  font-weight: 500;
}

.score-badge {
  background: rgba(255, 255, 255, 0.15);
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(10px);
}

.progress-compact {
  height: 8px;
  background: var(--gray-medium);
  border-radius: 10px;
  overflow: hidden;
}

.progress-compact .progress-bar {
  background: var(--primary-orange);
  height: 100%;
  border-radius: 10px;
  transition: width 0.6s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Category Navigation - Step Progress */
.category-navigation {
  margin: 40px 0;
  background: var(--white);
  border-radius: var(--bs-border-radius-lg);
  padding: clamp(15px, 4vw, 30px);
  box-shadow: var(--bs-box-shadow);
  border: 1px solid var(--gray-medium);
  overflow-x: auto;
  overflow-y: visible;
}

.step-progress-container {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: clamp(10px, 2vw, 20px);
  min-width: fit-content;
  padding: 10px 5px;
}

.step-progress-line {
  position: absolute;
  top: 35px;
  left: 35px;
  right: 35px;
  height: 3px;
  background: var(--gray-medium);
  z-index: 1;
  border-radius: 2px;
  min-width: calc(100% - 70px);
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  min-width: clamp(100px, 15vw, 140px);
  max-width: 160px;
  position: relative;
  z-index: 2;
}

.step-circle {
  width: clamp(50px, 10vw, 70px);
  height: clamp(50px, 10vw, 70px);
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--gray-medium);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  margin-bottom: 15px;
}

.step-circle:hover {
  border-color: var(--primary-blue);
  box-shadow: var(--bs-box-shadow);
  transform: translateY(-3px);
}

.step-circle.active {
  border-color: var(--primary-blue);
  background: #f8fdff;
  box-shadow: var(--bs-box-shadow-lg);
}

.step-circle.completed {
  border-color: var(--primary-orange);
  background: var(--primary-orange);
  color: var(--white);
}

.step-circle.completed .step-number,
.step-circle.completed .step-icon {
  color: var(--white);
}

.step-number {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-medium);
  line-height: 1;
  margin-bottom: 2px;
}

.step-icon {
  font-size: 18px;
  color: var(--primary-blue);
  transition: color var(--transition-normal);
}

.step-progress-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0%;
  background: var(--primary-orange);
  transition: height 0.6s ease;
  border-radius: 0 0 50px 50px;
  opacity: 0.8;
}

.step-details {
  text-align: center;
  margin-top: 5px;
}

.step-details h6 {
  margin: 0 0 8px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.3;
}

.step-stats {
  font-size: 11px;
  color: var(--text-light);
  margin-bottom: 6px;
  font-weight: 500;
}

.step-status {
  font-size: 9px;
  padding: 3px 8px;
  border-radius: var(--bs-border-radius-sm);
  background: var(--primary-orange);
  color: var(--white);
  display: inline-block;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: all var(--transition-normal);
}

.step-status.completed {
  background: var(--primary-blue);
}

.step-status.progress {
  background: #ffc107;
  color: var(--text-dark);
}

/* Indicators grid layout */
.indicators-grid {
  display: grid;
  gap: 20px;
  margin-top: 20px;
  grid-template-columns: 1fr;
}

/* Individual Indicator Cards */
.indicator-card {
  background: var(--white);
  border: 1px solid var(--gray-medium);
  border-radius: var(--bs-border-radius-lg);
  padding: clamp(15px, 3vw, 20px);
  box-shadow: var(--bs-box-shadow);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.indicator-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--gray-medium);
  transition: all var(--transition-normal);
}

.indicator-card:hover {
  box-shadow: var(--bs-box-shadow-lg);
  transform: translateY(-2px);
}

.indicator-card:hover::before {
  background: var(--primary-blue);
}

.indicator-card.completed {
  border-color: var(--primary-orange);
  background: #fff8f0;
}

.indicator-card.completed::before {
  background: var(--primary-orange);
}

/* Indicator Header */
.indicator-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  flex-wrap: wrap;
  gap: 10px;
}

.indicator-code {
  background: var(--primary-blue);
  color: var(--white);
  padding: 5px 10px;
  border-radius: var(--bs-border-radius-sm);
  font-size: clamp(10px, 1.5vw, 11px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.indicator-header h4 {
  margin: 0;
  font-size: clamp(14px, 2vw, 16px);
  color: var(--text-dark);
  font-weight: 600;
  flex: 1;
}

/* Indicator Definition */
.indicator-definition {
  margin-bottom: 15px;
}

.indicator-description {
  color: #555;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 8px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 4px;
  border-left: 3px solid var(--primary-blue);
}

.indicator-meta {
  color: #666;
  font-size: 12px;
  font-weight: 500;
  margin: 0;
}

/* Radio Button Options */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.radio-option {
  display: flex;
  align-items: center;
  padding: clamp(10px, 2vw, 12px);
  border: 1px solid var(--gray-medium);
  border-radius: var(--bs-border-radius-sm);
  cursor: pointer;
  transition: all var(--transition-normal);
  margin: 0;
  background: var(--white);
}

.radio-option:hover {
  background: #f8fdff;
  border-color: var(--primary-blue);
  transform: translateX(3px);
}

.radio-option input[type="radio"] {
  display: none;
}

.radio-custom {
  width: 18px;
  height: 18px;
  border: 2px solid var(--gray-medium);
  border-radius: 50%;
  margin-right: 12px;
  position: relative;
  flex-shrink: 0;
  transition: all var(--transition-normal);
}

.radio-option input[type="radio"]:checked+.radio-custom {
  border-color: var(--primary-blue);
  background: var(--primary-blue);
}

.radio-option input[type="radio"]:checked+.radio-custom::after {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--white);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.option-text {
  flex: 1;
  font-size: clamp(12px, 1.5vw, 13px);
  color: var(--text-dark);
  font-weight: 500;
}

.points-badge {
  background: var(--gray-light);
  color: var(--primary-blue);
  padding: 4px 10px;
  border-radius: 15px;
  font-size: clamp(10px, 1.2vw, 11px);
  font-weight: 600;
  min-width: 45px;
  text-align: center;
}

.radio-option input[type="radio"]:checked~.points-badge {
  background: var(--primary-orange);
  color: var(--white);
}

/* Pagination Controls */
.pagination-section {
  margin: 30px 0;
  background: var(--white);
  border-radius: var(--bs-border-radius-lg);
  padding: clamp(15px, 3vw, 20px);
  box-shadow: var(--bs-box-shadow);
  border: 1px solid var(--gray-medium);
}

.pagination-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

.pagination-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  font-size: 13px;
  color: var(--text-medium);
}

.pagination-info strong {
  color: var(--primary-blue);
}

.page-indicators {
  font-size: 11px;
  color: var(--text-light);
}

.pagination-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.pagination-nav .btn {
  font-size: 12px;
  padding: 8px 16px;
  border-radius: var(--bs-border-radius-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all var(--transition-normal);
}

.pagination-nav .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.page-dot {
  width: clamp(30px, 5vw, 35px);
  height: clamp(30px, 5vw, 35px);
  border-radius: 50%;
  border: 2px solid var(--gray-medium);
  background: var(--white);
  color: var(--text-medium);
  font-size: clamp(10px, 1.5vw, 12px);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-dot:hover {
  border-color: var(--primary-blue);
  background: #f8fdff;
  transform: translateY(-2px);
}

.page-dot.active {
  border-color: var(--primary-orange);
  background: var(--primary-orange);
  color: var(--white);
  box-shadow: var(--bs-box-shadow);
}

/* Form Navigation */
.form-navigation {
  text-align: center;
  margin: 10px 0;
  padding: clamp(10px, 4vw, 15px);
  background: var(--gray-light);
  border-radius: var(--bs-border-radius-lg);
  border: 1px solid var(--gray-medium);
}

.form-navigation .btn {
  margin: 0 clamp(5px, 1vw, 10px);
  padding: clamp(6px, 1.5vw, 8px) clamp(12px, 2vw, 16px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 4px;
  transition: all var(--transition-normal);
  font-size: clamp(10px, 1.5vw, 12px);
}

/* Assessment-specific styles */
.verification-note {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 10px;
  margin-top: 10px;
  font-size: 12px;
  color: #6c757d;
}

.verification-note i {
  color: #17a2b8;
  margin-right: 5px;
}

.input-field-container {
  margin-top: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: var(--bs-border-radius);
  border-left: 4px solid var(--primary-blue);
}

.input-label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #495057;
}

.input-help {
  display: block;
  margin-top: 5px;
  color: #6c757d;
  font-size: 11px;
}

.radio-option.not-applicable {
  border-top: 1px solid #dee2e6;
  margin-top: 10px;
  padding-top: 10px;
}

.radio-option.not-applicable .option-text {
  font-style: italic;
  color: #6c757d;
}

.priority-badge {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  margin-left: 8px;
}

.priority-most-important {
  background: #dc3545;
  color: white;
}

.priority-important {
  background: #fd7e14;
  color: white;
}

.priority-least-important {
  background: #6c757d;
  color: white;
}

.high-priority {
  border-left: 4px solid #dc3545;
}

.medium-priority {
  border-left: 4px solid #fd7e14;
}

.low-priority {
  border-left: 4px solid #6c757d;
}

.social-env-priority {
  border-left: 4px solid #198754;
}

/* Page Header Styles */
.page-header {
  margin-bottom: 20px;
  padding: 15px;
  background: var(--gray-light);
  border-radius: var(--bs-border-radius);
  border-left: 4px solid var(--primary-blue);
}

.page-header h5 {
  margin: 0 0 8px 0;
  color: var(--primary-blue);
  font-weight: 600;
}

.page-header .text-muted {
  margin: 0;
  font-size: 13px;
  color: var(--text-medium);
}

/* ===============================================
   ASSESSMENT comprehensive_ind.html COMPONENTS - SAFE TRANSFER
   =============================================== */

/* Assessment Container System */
.assessment-container {
  margin-top: 20px;
  padding-bottom: 50px;
}

.assessment-container h1 {
  margin-top: 80px;
  font-size: clamp(1.5rem, 4vw, 2.375rem);
  font-weight: 300;
  color: var(--text-dark);
}

.assessment-container .lead {
  color: var(--text-medium);
  font-size: var(--font-size-base);
  margin-bottom: 40px;
}

.assessment-container-inner {
  padding: 10px;
}

.assessment-tabs {

  border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0;
  margin-bottom: 0;
}

.assessment-tab-content {
  background: transparent;
  border-radius: 0 0 var(--bs-border-radius-lg) var(--bs-border-radius-lg);
  box-shadow: var(--bs-box-shadow-lg);
}

/* View Toggle Controls */
.view-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 20px;
  padding: 1.25rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--bs-border-radius-sm);
  box-shadow: var(--shadow-light);
}

.view-controls .bulk-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
}

/* Enhanced Filters */

.completion-filter {
  display: flex;
  align-items: center;
}

.filter-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-medium);
  font-family: var(--font-primary);
}

.filter-checkbox input[type="checkbox"] {
  display: none;
}

.checkmark {
  width: 16px;
  height: 16px;
  border: 2px solid var(--gray-medium);
  border-radius: var(--bs-border-radius-sm);
  margin-right: 8px;
  position: relative;
  transition: all 0.3s ease;
}

.filter-checkbox input[type="checkbox"]:checked+.checkmark {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
}

.filter-checkbox input[type="checkbox"]:checked+.checkmark::after {
  content: "✓";
  position: absolute;
  top: -2px;
  left: 2px;
  color: var(--white);
  font-size: 12px;
  font-weight: bold;
}

.search-cluster {
  position: relative;
}

.search-cluster input {
  padding: 6px 30px 6px 12px;
  border: 1px solid var(--gray-medium);
  border-radius: var(--bs-border-radius-sm);
  font-size: 12px;
  width: 160px;
  font-family: var(--font-primary);
}

.search-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-light);
  font-size: 12px;
}

.list-col-name {
  font-weight: var(--font-weight-bold);
  color: var(--text-dark);
  font-size: 1rem;
}

.list-col-priority,
.list-col-weight,
.list-col-progress,
.list-col-actions {
  font-size: 0.875rem;
  color: var(--text-medium);
}

.list-priority-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--bs-border-radius-sm);
  font-size: 0.875rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.list-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--gray-light);
  border-radius: var(--bs-border-radius-sm);
  overflow: hidden;
}

.list-progress-fill {
  height: 100%;
  background: var(--primary-blue);
  transition: width 0.6s ease;
}

.compact-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.compact-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-dark);
  flex: 1;
  margin-right: 10px;
}

.compact-badge {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: var(--bs-border-radius-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.compact-progress {
  font-size: 10px;
  color: var(--text-light);
}

.stat-item {
  text-align: center;
}

/* Definition Toggle */
.definition-toggle {
  color: var(--primary-blue);
  font-size: 0.875rem;
  cursor: pointer;
  margin-bottom: 8px;
  display: inline-block;
  transition: color 0.2s ease;
  font-weight: 500;
}

.definition-toggle:hover {
  color: var(--primary-orange);
  text-decoration: underline;
}

.definition-toggle i {
  margin-right: 4px;
  transition: transform 0.2s ease;
}

/* Definition States */
.indicator-definition {
  color: #555;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 8px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 4px;
  border-left: 3px solid var(--primary-blue);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
  opacity: 0;
}

.indicator-definition.expanded {
  max-height: 200px;
  margin-bottom: 12px;
  opacity: 1;
}

/* Compact view definition adjustments */
.indicator-card.compact .indicator-definition {
  font-size: 12px;
  padding: 8px;
}

.indicator-card.compact .indicator-definition.expanded {
  max-height: 150px;
  margin-bottom: 10px;
}

.indicator-card.compact .definition-toggle {
  font-size: 11px;
  margin-bottom: 6px;
}

/* View Controls */
.view-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 20px;
  padding: 1.25rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--bs-border-radius-sm);
  box-shadow: var(--shadow-light);
}

.view-controls .bulk-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
}

/* Compact Indicator Cards */
.indicators-grid.compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 8px;
}

/* Dynamic backgrounds for assessment tab content based on transport mode - COMPREHENSIVE ASSESSMENT ONLY */
body:has(.assessment-container) #road-content.tab-pane.active,
body:has(.assessment-container) #road-content.tab-pane.show {
  background: var(--accent-sand) !important;
}

body:has(.assessment-container) #rail-content.tab-pane.active,
body:has(.assessment-container) #rail-content.tab-pane.show {
  background: var(--light-orange) !important;
}

body:has(.assessment-container) #iww-content.tab-pane.active,
body:has(.assessment-container) #iww-content.tab-pane.show {
  background: var(--accent-iww) !important;
}

/* Ensure index.html tab content remains white */
body:not(:has(.assessment-container)) .tab-content .tab-pane {
  background: white !important;
}

.indicator-card.compact {
  padding: 12px 16px;
  margin-bottom: 8px;
  border-left-width: 3px;
  box-shadow: var(--shadow-light);
  transition: all 0.2s ease;
  background: white;
  border-radius: var(--bs-border-radius-sm);
  position: relative;
}

.indicator-card.compact:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
  border-left-width: 4px;
}

.indicator-card.compact .indicator-top-row {
  margin-bottom: 6px;
}

.indicator-card.compact .indicator-header {
  margin-bottom: 8px;
}

.indicator-card.compact .indicator-code {
  font-size: 11px;
  padding: 4px 8px;
  min-width: auto;
  flex-shrink: 0;
}

.indicator-card.compact .indicator-header h4 {
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.3;
  color: var(--text-dark);
  font-weight: 700;
}

.indicator-card.compact .indicator-definition {
  font-size: 0.875rem;
  line-height: 1.4;
  margin-bottom: 8px;
  color: var(--text-dark);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.indicator-card.compact .definition-toggle {
  color: var(--primary-blue);
  font-size: 11px;
  cursor: pointer;
  text-decoration: underline;
  margin-bottom: 8px;
  display: inline-block;
}

.indicator-card.compact .definition-toggle:hover {
  color: var(--primary-orange);
}

.indicator-card.compact .radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.indicator-card.compact .radio-option {
  padding: 8px 10px;
  font-size: 0.875rem;
}

.indicator-card.compact .option-text {
  font-size: 0.875rem;
  color: var(--text-dark);
  font-weight: normal !important;
}

.indicator-card.compact .points-badge {
  font-size: 0.75rem;
}

.indicator-card.compact .priority-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 0.75rem;
  padding: 2px 6px;
}

.indicator-card.compact .input-field-container {
  margin-top: 8px;
}

.indicator-card.compact .input-field-container input {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: var(--bs-border-radius-sm);
}

.indicator-card.compact .input-label {
  font-size: 11px;
  margin-bottom: 4px;
}

.indicator-card.compact .input-help {
  font-size: 10px;
  margin-top: 4px;
}

.indicator-card.compact.completed {
  opacity: 0.7;
  background: var(--gray-light);
}

.indicator-card.compact.completed .indicator-code {
  background: var(--bs-success) !important;
}

/* Filter and Search Enhancements */
.indicators-filter {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  flex: 1;
  justify-content: flex-end;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-item label {
  font-size: 0.8rem;
  color: var(--text-medium);
  margin: 0;
  font-weight: 500;
  white-space: nowrap;
}

.filter-select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gray-medium);
  border-radius: var(--bs-border-radius-sm);
  font-size: 0.8rem;
  background: white;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.filter-select:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px rgba(8, 157, 217, 0.1);
}

.search-input {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gray-medium);
  border-radius: var(--bs-border-radius-sm);
  font-size: 0.8rem;
  background: white;
  min-width: 200px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px rgba(8, 157, 217, 0.1);
}

.clear-filters-btn {
  padding: 0.5rem 0.75rem;
  background: var(--gray-medium);
  border: 1px solid var(--gray-medium);
  border-radius: var(--bs-border-radius-sm);
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--text-medium);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.clear-filters-btn:hover {
  background: var(--gray-dark);
  color: var(--text-dark);
}

/* Sustainability Pillar Color Coding - Economic */
.pillar-nav-item[data-pillar="economic"].active {
  background: var(--primary-orange) !important;
  color: white !important;
  border-color: var(--primary-orange) !important;
  box-shadow: 0 4px 8px rgba(217, 79, 8, 0.3);
  transform: translateY(-2px);
}

.pillar-nav-item[data-pillar="economic"].active i {
  color: white !important;
}

.pillar-nav-item[data-pillar="economic"]:hover {
  background: var(--primary-orange) !important;
  color: white !important;
  transform: translateY(-2px);
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(217, 79, 8, 0.25);
}

#road-economic-indicators .indicator-card,
#rail-economic-indicators .indicator-card,
#iww-economic-indicators .indicator-card {
  background: var(--light-orange) !important;
  border-left: 4px solid var(--primary-orange) !important;
  transition: all 0.3s ease;
}

#road-economic-indicators .indicator-card:hover,
#rail-economic-indicators .indicator-card:hover,
#iww-economic-indicators .indicator-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(217, 79, 8, 0.15);
  border-left-width: 0px;
}

#road-economic-indicators .indicator-card .indicator-code,
#rail-economic-indicators .indicator-card .indicator-code,
#iww-economic-indicators .indicator-card .indicator-code {
  background: var(--primary-orange) !important;
  color: white !important;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(217, 79, 8, 0.2);
}

#road-economic-indicators .indicator-card .indicator-header h4,
#rail-economic-indicators .indicator-card .indicator-header h4,
#iww-economic-indicators .indicator-card .indicator-header h4 {
  color: var(--primary-orange) !important;
  font-weight: 700;
}

#road-economic-badge,
#rail-economic-badge,
#iww-economic-badge {
  background: var(--primary-orange) !important;
  color: white !important;
  font-weight: bold;
  border-radius: var(--bs-border-radius-sm);
}

.road-economic-fill,
.rail-economic-fill,
.iww-economic-fill {
  background: linear-gradient(90deg,
      var(--primary-orange),
      var(--accent-clay)) !important;
  box-shadow: 0 2px 4px rgba(217, 79, 8, 0.2);
}

#road-content .radio-option input[type="radio"]:checked+.radio-custom {
  background: var(--accent-brown);
  border-color: var(--accent-brown);
  box-shadow: 0 0 0 3px rgba(139, 101, 68, 0.2);
}

#road-economic-indicators .points-badge,
#rail-economic-indicators .points-badge,
#iww-economic-indicators .points-badge {
  background: var(--primary-orange);
  color: white;
  border-radius: var(--bs-border-radius-sm);
  font-weight: bold;
}

/* Sustainability Pillar Color Coding - Social */
.pillar-nav-item[data-pillar="social"].active {
  background: var(--accent-logo) !important;
  color: white !important;
  border-color: var(--accent-logo) !important;
  box-shadow: 0 4px 8px rgba(116, 140, 153, 0.3);
  transform: translateY(-2px);
}

.pillar-nav-item[data-pillar="social"].active i {
  color: white !important;
}

.pillar-nav-item[data-pillar="social"]:hover {
  background: var(--accent-logo) !important;
  color: white !important;
  transform: translateY(-2px);
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(116, 140, 153, 0.25);
}

#road-social-indicators .indicator-card,
#rail-social-indicators .indicator-card,
#iww-social-indicators .indicator-card {
  background: #f0f3f5 !important;
  border-left: 4px solid var(--accent-logo) !important;
  transition: all 0.3s ease;
}

#road-social-indicators .indicator-card:hover,
#rail-social-indicators .indicator-card:hover,
#iww-social-indicators .indicator-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(116, 140, 153, 0.15);
  border-left-width: 6px;
}

#road-social-indicators .indicator-card .indicator-code,
#rail-social-indicators .indicator-card .indicator-code,
#iww-social-indicators .indicator-card .indicator-code {
  background: var(--accent-logo) !important;
  color: white !important;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(116, 140, 153, 0.2);
}

#road-social-indicators .indicator-card .indicator-header h4,
#rail-social-indicators .indicator-card .indicator-header h4,
#iww-social-indicators .indicator-card .indicator-header h4 {
  color: var(--accent-logo) !important;
  font-weight: 700;
}

#road-social-badge,
#rail-social-badge,
#iww-social-badge {
  background: var(--accent-logo) !important;
  color: white !important;
  font-weight: bold;
  border-radius: var(--bs-border-radius-sm);
}

.road-social-fill,
.rail-social-fill,
.iww-social-fill {
  background: linear-gradient(90deg, var(--accent-logo), #8da3b1) !important;
  box-shadow: 0 2px 4px rgba(116, 140, 153, 0.2);
}

#rail-content .radio-option input[type="radio"]:checked+.radio-custom {
  background: var(--accent-clay);
  border-color: var(--accent-clay);
  box-shadow: 0 0 0 3px rgba(165, 123, 91, 0.2);
}

/* Sustainability Pillar Color Coding - Environmental */
.pillar-nav-item[data-pillar="environmental"].active {
  background: var(--bs-success) !important;
  color: white !important;
  border-color: var(--bs-success) !important;
  box-shadow: 0 4px 8px rgba(25, 135, 84, 0.3);
  transform: translateY(-2px);
}

.pillar-nav-item[data-pillar="environmental"].active i {
  color: white !important;
}

.pillar-nav-item[data-pillar="environmental"]:hover {
  background: var(--bs-success) !important;
  color: white !important;
  transform: translateY(-2px);
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(25, 135, 84, 0.25);
}

#road-environmental-indicators .indicator-card,
#rail-environmental-indicators .indicator-card,
#iww-environmental-indicators .indicator-card {
  background: #dbe4e8 !important;
  border-left: 4px solid var(--bs-success) !important;
  transition: all 0.3s ease;
}

#road-environmental-indicators .indicator-card:hover,
#rail-environmental-indicators .indicator-card:hover,
#iww-environmental-indicators .indicator-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(25, 135, 84, 0.15);
  border-left-width: 6px;
}

#road-environmental-indicators .indicator-card .indicator-code,
#rail-environmental-indicators .indicator-card .indicator-code,
#iww-environmental-indicators .indicator-card .indicator-code {
  background: var(--bs-success) !important;
  color: white !important;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(25, 135, 84, 0.2);
}

#road-environmental-indicators .indicator-card .indicator-header h4,
#rail-environmental-indicators .indicator-card .indicator-header h4,
#iww-environmental-indicators .indicator-card .indicator-header h4 {
  color: var(--bs-success) !important;
  font-weight: 700;
}

#road-environmental-badge,
#rail-environmental-badge,
#iww-environmental-badge {
  background: var(--bs-success) !important;
  color: white !important;
  font-weight: bold;
  border-radius: var(--bs-border-radius-sm);
}

.road-environmental-fill,
.rail-environmental-fill,
.iww-environmental-fill {
  background: linear-gradient(90deg, var(--bs-success), #2d8653) !important;
  box-shadow: 0 2px 4px rgba(25, 135, 84, 0.2);
}

#iww-content .radio-option input[type="radio"]:checked+.radio-custom {
  background: var(--accent-coral);
  border-color: var(--accent-coral);
  box-shadow: 0 0 0 3px rgba(255, 127, 80, 0.2);
}

/* Transport Mode Color Coding */
.transport-mode-section.road-section {
  background: var(--accent-sand);

  border-radius: var(--bs-border-radius-sm);
  color: white;
}

.transport-mode-section.rail-section {
  background: var(--light-orange);

  border-radius: var(--bs-border-radius-sm);
  color: white;
}

.transport-mode-section.iww-section {
  background: var(--bs-light);
  color: #090101;
}

#road-content .assessment-container-inner {
  background: var(--accent-sand);
}

#rail-content .assessment-container-inner {
  background: var(--light-orange);
}

#iww-content .assessment-container-inner {
  background: #dbe4e8 !important;
}

#road-tab.nav-link.active,
#road-tab.nav-link:hover {
  background-color: var(--accent-sand) !important;
  border-color: var(--accent-sand) !important;
  color: var(--text-dark) !important;
}

#rail-tab.nav-link.active,
#rail-tab.nav-link:hover {
  background-color: var(--light-orange) !important;
  border-color: var(--light-orange) !important;
  color: var(--text-dark) !important;
}

#iww-tab.nav-link.active,
#iww-tab.nav-link:hover {
  background-color: #dbe4e8 !important;
  border-color: #dbe4e8 !important;
  color: var(--text-dark) !important;
}

/* Transport Mode Badge Colors */
#road-tab-badge {
  background: var(--accent-brown) !important;
  color: white !important;
}

#rail-tab-badge {
  background: var(--accent-clay) !important;
  color: white !important;
}

#iww-tab-badge {
  background: var(--accent-coral) !important;
  color: white !important;
}

/* Enhanced Interactive Effects */
.indicator-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: transparent;
  transition: all 0.3s ease;
}

.indicator-card:hover::before {
  background: transparent;
}

.indicator-card.completed::after {
  content: "✓";
  position: absolute;
  top: 10px;
  right: 15px;
  background: var(--bs-success);
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

.indicator-card.completed .indicator-code {
  background: var(--bs-success) !important;
}

/* Responsive Design for Assessment Components */
@media (max-width: 768px) {
  .cluster-nav-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .cluster-filters-enhanced {
    justify-content: center;
  }

  .cluster-list-header,
  .cluster-list-item {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 10px;
  }

  .list-col-weight,
  .list-col-actions {
    display: none;
  }

  .cluster-stats-bar {
    flex-wrap: wrap;
    gap: 15px;
  }

  .cluster-progress-container {
    justify-content: center;
  }

  .cluster-step-item {
    min-width: 100px;
    max-width: 120px;
  }

  .cluster-compact-grid {
    grid-template-columns: 1fr;
  }

  .view-controls {
    padding: 1rem;
  }

  .view-controls .bulk-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .indicators-filter {
    justify-content: flex-start;
    width: 100%;
  }

  .filter-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    width: 100%;
  }

  .filter-select,
  .search-input {
    width: 100%;
    min-width: auto;
  }

  .clear-filters-btn {
    width: 100%;
    justify-content: center;
    margin-top: 0.5rem;
  }

  .indicators-grid.compact {
    grid-template-columns: 1fr;
  }

  .indicator-card.compact {
    padding: 10px 12px;
  }

  .indicator-card.compact .radio-group {
    flex-direction: column;
  }
}

@media (max-width: 480px) {

  .assessment-container h1,
  .cluster-navigation-container h1 {
    font-size: 1.5rem;
    margin-top: 15px;
    margin-bottom: 20px;
  }

  .cluster-navigation-container {
    padding: 15px;
  }
}

/* ===============================================
   SCROLL BEHAVIOR CONTROL
   ===============================================
   Toggle: Change scrollBehaviorEnabled to false in JavaScript to disable smooth scrolling
   =============================================== */

/* Default smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Instant jumping when smooth scroll is disabled - more specific override */
html.no-smooth-scroll {
  scroll-behavior: auto !important;
}

/* Also override any existing smooth scroll on body */
html.no-smooth-scroll body {
  scroll-behavior: auto !important;
}

/* Override any smooth scroll on all elements */
html.no-smooth-scroll * {
  scroll-behavior: auto !important;
}

/* ===============================================
   FOOTER BACKGROUND OVERRIDE - FINAL FIX
   ===============================================
   This ensures footer color changes work properly
   =============================================== */

/* Force footer background color */
footer,
.footer,
footer.footer,
.footer#parnership {
  background: var(--un-blue) !important;
}

/* Ensure inner elements inherit background */
.footer-inner,
.footer-center,
.footer .column {
  background: inherit !important;
}