@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --green: #005D32;
  --green-dark: #014526;
  --green-light: #0B7D47;
  --orange: #F58220;
  --orange-dark: #D96A00;
  --red: #E53935;
  --black: #1B1B1B;
  --grey-100: #FAFAFA;
  --grey-200: #F5F6F8;
  --grey-300: #ECECEC;
  --grey-400: #D7D7D7;
  --text: #333;
  --radius: 22px;
  --shadow: 0 12px 40px rgba(0,0,0,.06);
}

body {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  color: var(--text);
  background: #f1f0ec;
  overflow-x: hidden;
}

/* =========================
   HEADER & NAVIGATION
========================= */
.header {
  height: 92px;
  background: #f1f0ec;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
  position: relative;
  z-index: 100;
}

.nav-wrapper {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.logo img {
  width: 210px; /* Aligned to accommodate full text crest brand lockup */
  height: auto;
  display: block;
}

.main-nav {
  position: relative;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  position: relative;
}

.nav-link {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #0b241a; /* Midnight Dark Teal */
  text-decoration: none;
  padding: 20px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.25s ease;
}

.nav-link:hover, .nav-link.active {
  color: #107c41; /* Brand Green */
}

.nav-chevron {
  font-size: 12px;
  transition: transform 0.25s ease;
}

.has-mega-menu:hover .nav-chevron {
  transform: rotate(180deg);
}

/* --- Mega Dropdown Container --- */
.mega-dropdown-panel {
  position: absolute;
  top: 100%;
  left: -20px;
  width: 680px; /* Adjust width based on header layout */
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(11, 36, 26, 0.12);
  border: 1px solid rgba(11, 36, 26, 0.05);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
              transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
              visibility 0.3s;
  z-index: 1000;
}

/* Hover trigger state */
.has-mega-menu:hover .mega-dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* --- Split Panel Layout --- */
.mega-dropdown-inner {
  display: flex;
  min-height: 280px;
}

/* Left Sidebar (Soft Grey Background) */
.mega-left-sidebar {
  width: 36%;
  background-color: #f7f9fa; /* Light grey backdrop */
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-right: 1px solid rgba(0, 0, 0, 0.04);
}

.sidebar-icon-box {
  width: 48px;
  height: 48px;
  background-color: rgba(16, 124, 65, 0.1); /* Light green tint */
  color: #107c41; /* Brand Green */
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 20px;
}

.sidebar-icon-box.accent-orange {
  background-color: rgba(219, 80, 18, 0.1);
  color: #db5012; /* Brand Orange */
}

.sidebar-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #0b241a;
  margin-bottom: 10px;
}

.sidebar-desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: #6a7d73;
  margin: 0;
}

/* Right Content Area */
.mega-right-content {
  width: 64%;
  padding: 24px 28px;
  background-color: #ffffff;
}

.mega-links-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Link Items with Title & Sub-description */
.mega-link-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.mega-link-item:hover {
  background-color: #f3f5f7;
  transform: translateX(4px);
}

.link-title {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #0b241a;
  margin-bottom: 3px;
  transition: color 0.2s ease;
}

.mega-link-item:hover .link-title {
  color: #107c41; /* Primary Green hover shift */
}

.link-desc {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: #778880;
  line-height: 1.4;
}

/* Results Button styled exactly to match mockups */
.results-btn {
  font-family: 'Montserrat', sans-serif;
  background: linear-gradient(135deg, #E53935 0%, #F58220 100%);
  color: #ffffff !important;
  padding: 14px 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(229, 57, 53, 0.25);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: none;
}

.results-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(245, 130, 32, 0.4);
}

.btn-plane-icon {
  transform: rotate(45deg);
  font-size: 13px;
}

/* Container for alignment on the far right */
.header-actions {
  display: flex;
  align-items: center;
  gap: 20px; /* Space between the button and the first social icon */
}

/* Social Icon Group styling */
.header-socials {
  display: flex;
  align-items: center;
  gap: 15px; /* Spacing between the social icons */
  border-left: 1px solid #eeeeee; /* Subtle separator line */
  padding-left: 20px;
}

/* Base Social Link styling */
.social-icon {
    color:#029053 ;
  font-size: 18px; /* Ideal icon layout sizing */
  line-height: 1;
  transition: color 0.25s ease, transform 0.25s ease;
  display: inline-block;
}

/* Smooth hover effects matching theme brand colors */
.social-icon:hover {
  transform: translateY(-2px);
}

.social-icon[aria-label="Facebook"]:hover {
  color: #1877F2; /* Facebook Blue */
}

.social-icon[aria-label="Instagram"]:hover {
  color: #E1306C; /* Instagram Pink */
}

.social-icon[aria-label="X"]:hover {
  color: #000000; /* Sleek Black */
}

/* =========================
   HERO CANVAS SECTION
========================= */
.hero {
  padding: 80px 0 60px;
  background: #c03838;
  background-image: url("../assets/images/pattern.png");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
  min-height: 850px;
  display: flex;
  align-items: center;
   background-color: #f1f0ec;
}

.hero-grid {
  display: grid;
  grid-template-columns: 48% 52%;
  align-items: center;
  gap: 20px;
  width: 100%;
   
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-right: 20px;

}

.hero h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 126px;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -2.5px;
  margin-bottom: 25px;
}

.green-text {
  display: block;
  color: var(--green-dark);
}

.orange-text-brand {
  display: block;
  color: #db5012;
}

/* Customized Green to Orange line separator */
.hero-line {
  width: 450px;
  height: 3px; /* Slightly thicker (from 4px to 6px) to make the gloss reflection visible */
  
  /* Multi-stop gradient mimicking a glossy light reflection */
  background: linear-gradient(
    90deg, 
    var(--green) 0%, 
    var(--green) 40%, 
    rgba(255, 255, 255, 0.8) 48%,  /* Bright white glare edge */
    rgba(255, 255, 255, 0.9) 52%,  /* Peak metallic reflection */
    var(--orange) 60%, 
    var(--orange) 100%
  );
  
  border-radius: 50px;
  margin: 3px 0;
  
  /* Subtle outer glow that enhances the "lit" shiny appearance */
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.4); /* Inner top border highlight */
}



/* Pill Button Style matching the green badge next to the white arrow box */
.hero-button {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px 6px 10px;
  padding-top: -10px;
  background: var(--green);
  border-radius: 50px;
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 10px 25px rgba(0, 93, 50, 0.15);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.hero-button:hover {
  transform: translateY(-3px);
  background: var(--green-dark);
  box-shadow: 0 15px 30px rgba(0, 93, 50, 0.25);
}

.arrow-wrap {
  width: 42px;
  height: 42px;
  background: #ffffff;
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-left: 20px;
  transition: transform 0.3s ease;
}

.hero-button:hover .arrow-wrap {
  transform: scale(1.05);
}

/* =========================
   COUNTDOWN CARD DECK
========================= */
.countdown-card {
  margin-top: 20px;
  background: #ffffff;
  border-radius: 18px;
  padding: 10px 10px;
  width: 490px;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.countdown-card-header {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 20px;
}

.counter {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.counter-segment {
  text-align: left;
}

.counter h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 40px;
  font-weight: 800;
  margin: 0;
  line-height: 1;
}

.counter span {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #888888;
  display: block;
  margin-top: 6px;
  letter-spacing: 0.5px;
}

/* Countdown color markers */
.green-text-digits { color: var(--green); }
.orange-text-digits { color: var(--orange); }
.red-text-digits { color: var(--red); }
.black-text-digits { color: var(--black); }

.dots {
  font-size: 38px;
  font-weight: 200;
  margin-top: -24px;
  color: #CCCCCC;
}

.election-date {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #666666;
}

.calendar-icon {
  color: var(--green);
  font-size: 16px;
}

.election-date strong {
  color: var(--green);
  font-weight: 700;
}

/* =========================
   HERO RIGHT IMAGE AREA
========================= */
.hero-image {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  position: relative;
}

.hero-image img {
  width: 100%;
  max-width: 680px;
  height: auto;
  display: block;
  z-index: 2;
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.08));
}

/* ==========================================================================
   SERVICES & PROGRESS STYLING
   ========================================================================== */
.services-progress-section {
  padding: 60px 0 80px;
  /* Premium overlay combining a semi-transparent light tint and your background image */
  background-color:
  #f1f0ec; 
  
  /* Background behavior optimization */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll; /* Use 'fixed' for a parallax scrolling effect */
}

/* SECTION HEADER */
.section-title-wrap {
  text-align: center;
  margin-bottom: 50px;
}

.section-main-title {
  font-family: 'Poppins', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #0f0f0f;
  margin-bottom: 12px;
}

/* Dual line separator matching the green/orange ribbon dynamic */
.title-line-separator {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--green) 50%, var(--orange) 50%);
  border-radius: 50px;
  margin: 0 auto;
}

/* SERVICE CARD BASE */
.ecz-service-card {
  display: flex;
  align-items: flex-start;
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  text-decoration: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.04);
  height: 100%;
  position: relative;
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  padding-bottom: 75px; 
}

.ecz-service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
}

/* LEFT ICON CONTAINER WITH BRAND COLOR SCHEMES */
.card-left-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  margin-right: 18px;
}

.card-content {
  flex-grow: 1;
}

.card-title {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #1c1c1c;
  margin-bottom: 6px;
  line-height: 1.3;
}

.card-desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: #777777;
  line-height: 1.5;
  margin: 0;
}

/* BOTTOM RIGHT ROUNDED ARROW BUTTONS */
.card-arrow-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 24px;
  right: 24px;
  color: #ffffff;
  font-size: 14px;
  transition: transform 0.3s ease;
}

.ecz-service-card:hover .card-arrow-btn {
  transform: scale(1.1);
}

/* CARD BRANDING SPECIFIC COLOUR THEMES */
/* 1. Green Theme */
.card-green .card-left-icon {
  background-color: rgba(0, 93, 50, 0.08);
  color: var(--green);
}
.card-green .card-arrow-btn {
  background-color: var(--green);
}

/* 2. Orange Theme */
.card-orange .card-left-icon {
  background-color: rgba(245, 130, 32, 0.1);
  color: var(--orange);
}
.card-orange .card-arrow-btn {
  background-color: var(--orange);
}

/* 3. Dark Theme */
.card-dark .card-left-icon {
  background-color: rgba(27, 27, 27, 0.08);
  color: var(--black);
}
.card-dark .card-arrow-btn {
  background-color: var(--black);
}

/* 4. Red Theme */
.card-red .card-left-icon {
  background-color: rgba(229, 57, 53, 0.08);
  color: var(--red);
}
.card-red .card-arrow-btn {
  background-color: var(--red);
}


/* ==========================================================================
   PROGRESS TIMELINE STYLING (Pixel Perfect Match)
   ========================================================================== */
.timeline-container {
  background: #ffffff;
  border-radius: 18px;
  padding: 40px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.timeline-section-header {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #222222;
  letter-spacing: 0.8px;
  margin-bottom: 45px;
}

/* Timeline Layout wrapper */
.timeline-flow-wrapper {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

/* Horizontal Connector Line running underneath step dots */
.timeline-flow-wrapper::before {
  content: "";
  position: absolute;
  top: 26px; /* Centered with vertical height of indicators */
  left: 8%;
  right: 8%;
  height: 2px;
  background-color: #e5e8eb;
  z-index: 1;
}

.timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  width: 16%;
}

/* Circle Step Indicators */
.step-indicator {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: #ffffff;
  border: 2px solid #e5e8eb;
  transition: all 0.3s ease;
  margin-bottom: 18px;
}

.step-details {
  text-align: center;
}

.step-title {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.step-status {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #777777;
}

/* TIMELINE STATE ASSIGNMENTS */

/* 1. COMPLETED STATUS (Full Green) */
.step-completed .step-indicator {
  background-color: var(--green);
  border-color: var(--green);
  color: #ffffff;
}
.step-completed .step-title {
  color: var(--green);
}

/* Dynamic sub-connector bar for completed path */
.step-completed + .step-completed::after {
  content: "";
  position: absolute;
  top: 26px;
  right: 50%;
  width: 100%;
  height: 2px;
  background-color: var(--green);
  z-index: -1;
}

/* 2. ACTIVE STATUS (Full Orange Accent) */
.step-active .step-indicator {
  background-color: var(--orange);
  border-color: var(--orange);
  color: #ffffff;
}
.step-active .step-title {
  color: var(--orange);
}
.step-active .step-status {
  color: var(--orange);
  font-weight: 700;
}
/* Link path from completed step to active step in green */
.step-completed + .step-active::after {
  content: "";
  position: absolute;
  top: 26px;
  right: 50%;
  width: 100%;
  height: 2px;
  background-color: var(--green);
  z-index: -1;
}

/* 3. UPCOMING STATUS (Soft Gray Accent) */
.step-upcoming .step-indicator {
  background-color: #f1f3f5;
  border-color: #e5e8eb;
  color: #777777;
}
.step-upcoming .step-title {
  color: #6c757d;
}


/* ==========================================================================
   RESPONSIVE LAYOUT ADJUSTMENTS
   ========================================================================== */
@media (max-width: 992px) {
  .timeline-flow-wrapper {
    flex-direction: column;
    gap: 30px;
  }
  
  .timeline-flow-wrapper::before {
    display: none; /* Hide horizontal path line on tablet/mobile */
  }

  .timeline-step {
    flex-direction: row;
    width: 100%;
    align-items: flex-start;
  }

  .timeline-step::after {
    display: none !important;
  }

  .step-indicator {
    margin-bottom: 0;
    margin-right: 18px;
  }

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

/* Full-Width Layout Window Breakout Rule */
.ecz-stats-breakout-wrapper {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 5px;
    z-index: 10;
}

/* Three-Color Glassmorphism Matrix Strip extending 100% Left to Right */
.ecz-stats-grid-card {
    background: linear-gradient(
        135deg, 
        rgba(2, 144, 83, 0.96) 0%,    /* #029053 Green - Deepened to 96% */
        rgba(219, 80, 18, 0.85) 50%,   /* #db5012 Orange - Deepened to 85% */
        rgba(237, 28, 36, 0.92) 100%   /* #ed1c24 Red - Deepened to 92% */
    );
    backdrop-filter: blur(20px) saturate(120%); /* Increased blur to enhance the darker glass look */
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    border-radius: 0px; 
    padding: 25px 60px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45),  /* Darkened the outer drop shadow */
                inset 0 1px 0px rgba(255, 255, 255, 0.15); /* Softened inner rim highlights */
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    border-left: none;
    border-right: none;
    width: 100%;
}

/* 6-Column Horizontal Grid Layer Layout */
.ecz-modern-stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 30px;
    max-width: 1320px; /* Keeps inner content lined up nicely with core content columns */
    margin: 0 auto;
}

/* Node layout adjustments */
.ecz-stat-node {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 5px 0;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    transition: transform 0.3s ease;
}

.ecz-stat-node:last-child {
    border-right: none;
}

/* Glass sphere wrapper around font-awesome elements */
.ecz-stat-node .node-icon-wrapper {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #ffffff;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Hover Dynamics updating layout interaction accents */
.ecz-stat-node:hover .node-icon-wrapper {
    background: #ffffff;
    color: #db5012;
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
}

.ecz-stat-node .node-data-stack {
    display: flex;
    flex-direction: column;
}

/* White High-Density Font Treatment */
.ecz-stat-node .log-num {
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.ecz-stat-node .log-lbl {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.8px;
    margin-top: 3px;
}

/* Responsive viewports overrides rules mapping */
@media (max-width: 1200px) {
    .ecz-stats-grid-card {
        padding: 25px 30px;
    }
    .ecz-modern-stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    .ecz-stat-node {
        border-right: none;
        background: rgba(255, 255, 255, 0.04);
        border-radius: 8px;
        padding: 12px 15px;
    }
}

@media (max-width: 768px) {
    .ecz-modern-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ecz-stat-node .log-num {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .ecz-modern-stats-grid {
        grid-template-columns: 1fr;
    }
}

.fade-transition {
    opacity: 1;
    transition: opacity 0.4s ease-in-out;
}
.fade-out {
    opacity: 0;
}

/* ==========================================================================
   STATISTICS RIBBON & FEED STYLING
   ========================================================================== */
.stats-updates-section {
  background-color: #f1f0ec;
}

/* GREEN STATISTICS BAR BANNER */
.stats-ribbon {
  background-color: var(--green-dark);
  padding: 22px 0;
  color: #ffffff;
}

.stats-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon-wrap {
  width: 52px;
  height: 52px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* Precise color variations from layout screenshot */
.stat-icon-wrap.icon-orange {
  background-color: rgba(245, 130, 32, 0.2);
  color: #fca34d;
}

.stat-icon-wrap.icon-brown {
  background-color: rgba(160, 82, 45, 0.3);
  color: #f3a673;
}

.stat-number {
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
  font-weight: 700;
  margin: 0;
  line-height: 1.1;
  letter-spacing: 0.5px;
}

.stat-label {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #cbd5e1;
  margin-top: 2px;
}

.stat-meta {
  display: block;
  font-size: 11px;
  color: #94a3b8;
}

.stat-divider {
  width: 1px;
  height: 45px;
  background-color: rgba(255, 255, 255, 0.12);
}

/* CONTENT CONTAINER BASE */
.content-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 35px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.04);
  height: 100%;
}

.card-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 18px;
  margin-bottom: 10px;
}

.feed-title {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #1e293b;
  margin: 0;
  letter-spacing: 0.5px;
}

.view-all-link {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  text-decoration: none;
  transition: color 0.2s ease;
}

.view-all-link:hover {
  color: var(--green);
}

/* LATEST NEWS ROWS */
.feed-list {
  display: flex;
  flex-direction: column;
}

.news-item {
  display: flex;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #f8fafc;
  text-decoration: none !important;
  color: inherit;
  transition: padding-left 0.3s ease;
}

.news-item:last-child, .event-item:last-child {
  border-bottom: none;
}

.news-item:hover {
  padding-left: 6px;
}

.news-img-box {
  width: 110px;
  height: 76px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  margin-right: 20px;
  background-color: #eceff1;
}

.news-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-details {
  flex-grow: 1;
  padding-right: 15px;
}

.feed-date {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  display: block;
  margin-bottom: 4px;
}

.news-headline {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 4px;
  line-height: 1.4;
}

.news-excerpt {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feed-arrow {
  color: #cbd5e1;
  font-size: 14px;
  transition: color 0.2s, transform 0.2s;
}

.news-item:hover .feed-arrow {
  color: var(--green);
  transform: translateX(3px);
}

/* UPCOMING EVENTS LAYOUT */
.event-item {
  display: flex;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid #f8fafc;
}

.event-calendar-badge {
  width: 58px;
  height: 64px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 20px;
  background-color: #ffffff;
}

.badge-month {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  line-height: 1;
  margin-bottom: 2px;
}

.badge-day {
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #1e293b;
  line-height: 1;
}

.badge-border-orange {
  border-color: rgba(245, 130, 32, 0.4);
}

.event-headline {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 2px;
}

.event-meta-sub {
  display: block;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 4px;
}

.event-time {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}

.event-time i {
  margin-right: 4px;
  color: #94a3b8;
}

/* CALENDAR ROUNDED CORNER BUTTON */
.full-calendar-btn {
  font-family: 'Montserrat', sans-serif;
  background-color: #f1f5f9;
  color: #475569 !important;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  padding: 12px 24px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s ease;
}

.full-calendar-btn:hover {
  background-color: #e2e8f0;
  color: #1e293b !important;
}

/* DOWNLOAD STRIP (BOTTOM DOCK) */
.quick-links-strip {
  background: #ffffff;
  border-radius: 14px;
  padding: 20px 30px;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.01);
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.quick-links-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
}

.quick-link-box {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none !important;
  color: inherit;
  padding: 10px;
  border-radius: 8px;
  transition: background-color 0.2s;
}

.quick-link-box:hover {
  background-color: #f8fafc;
}

.ql-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 16px;
  flex-shrink: 0;
}

/* Custom background presets for specific quick links items */
.bg-green-light  { background-color: var(--green); }
.bg-orange-accent{ background-color: var(--orange); }
.bg-dark-neutral { background-color: var(--black); }
.bg-red-accent   { background-color: var(--red); }
.bg-teal-accent  { background-color: #00796b; }

.ql-text h6 {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 2px 0;
}

.ql-text p {
  font-size: 11px;
  color: #64748b;
  margin: 0;
  line-height: 1.3;
}

/* ==========================================================================
   RESPONSIVE RENDERING INJECTIONS
   ========================================================================== */
@media (max-width: 1200px) {
  .quick-links-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (max-width: 992px) {
  .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .stat-divider {
    display: none;
  }
}

@media (max-width: 768px) {
  .quick-links-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   FOOTER STYLE SHEET
   ========================================================================== */
.main-footer {
  background-color: var(--green-dark); /* Using the deep ECZ brand green */
  background-image: url("Footer.png"); /* Subtle structural background overlay */
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: cover;
  padding: 80px 0 30px;
  color: #ffffff;
}

/* BRAND COLUMN */
.footer-brand-wrap {
  display: flex;
  flex-direction: column;
}

.footer-logo {
  width: 220px;
  height: auto;
  margin-bottom: 25px;
  filter: brightness(0) invert(1); /* Ensures the logo displays beautifully on dark backgrounds if logo.svg is dark-themed */
}

.footer-slogan {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #f1f0ec;
  line-height: 1.6;
  margin: 0;
}

/* SECTION HEADERS */
.footer-header {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--orange);
  letter-spacing: 0.8px;
  margin-bottom: 25px;
}

/* LINK LISTS */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #f1f0ec;
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
}

.footer-links a:hover {
  color: var(--orange); /* Hover accent brand shift */
  transform: translateX(4px);
}

/* SOCIAL PORTALS */
.footer-social-icons {
  display: flex;
  gap: 16px;
}

.social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff !important;
  font-size: 18px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-link:hover {
  background-color: var(--orange);
  transform: translateY(-3px);
}

/* DIRECT CHANNELS */
.footer-contacts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #cbd5e1 !important;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.contact-link i {
  font-size: 16px;
  color: var(--orange); /* Highlights communications icons in brand orange */
}

.contact-link:hover {
  color: #ffffff !important;
}

/* COPYRIGHT DECK LINE */
.footer-copyright-ribbon {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 50px;
  padding-top: 30px;
}

.footer-copyright-ribbon p {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #f1f0ec;
  margin: 0;
}

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



@media (max-width: 992px) {
  .main-footer {
    padding: 60px 0 30px;
  }
  .footer-header {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .footer-copyright-ribbon {
    margin-top: 35px;
    padding-top: 25px;
  }
}
/* Card bottom action text and arrow alignment */
.card-cta-wrapper {
  position: absolute;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cta-text {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 700;
  transition: color 0.3s ease;
}

/* Base structural adjustments for CTA elements */
.card-green .cta-text { color: var(--green); }
.card-orange .cta-text { color: var(--orange); }
.card-dark .cta-text { color: var(--black); }
.card-red .cta-text { color: var(--red); }

/* Card interactive transitions */
.ecz-service-card {
  padding-bottom: 85px; /* Added padding to prevent descriptions overlaps */
}

.card-arrow-btn {
  position: static; /* Overrides previous absolute positioning to sit naturally in flexbox */
}

.ecz-service-card:hover .cta-text {
  opacity: 0.85;
}

/* ==========================================================================
   CAMPAIGN VIDEO BANNER (COUNT ME IN)
   ========================================================================== */
.campaign-video-section {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.min-vh-60 {
  min-height: 60vh;
}

/* Background Cover Image behind glass layers */
.video-cover-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: contrast(1.1) brightness(0.9);
  z-index: 1;
}

/* Creative Glassmorphism Color Blend Overlay - Exact Horizontal Match */
.glass-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 90deg flows perfectly from Left (Green) to Middle (Orange) to Right (Red) */
  background: linear-gradient(
    90deg, 
    rgba(16, 124, 65, 0.82) 0%,      /* Vibrant Brand Green on the left */
    rgba(219, 80, 18, 0.72) 48%,     /* Smooth middle transition to Campaign Orange */
    rgba(220, 38, 38, 0.82) 100%     /* Rich, bright Electoral Red on the right */
  );
  
  /* Reduced blur keeps the video thumbnail sharp and visible */
  backdrop-filter: blur(2px);       
  -webkit-backdrop-filter: blur(2px);
  z-index: 2;
}

/* Floating Content Card with Glassmorphism */
.campaign-glass-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  padding: 45px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.campaign-tag {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #db5012; /* Branded Highlight Orange */
  letter-spacing: 2px;
  display: inline-block;
  margin-bottom: 15px;
}

.campaign-headline {
  font-family: 'Poppins', sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
  color: #ffffff;
  margin-bottom: 30px;
  letter-spacing: -0.5px;
}

/* Avatar details strip inside the glass container */
.campaign-meta-dock {
  display: flex;
  align-items: center;
  gap: 18px;
}

.avatar-stack {
  display: flex;
  align-items: center;
}

.meta-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  margin-right: -12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  object-fit: cover;
}

.meta-avatar:last-child {
  margin-right: 0;
}

.meta-text {
  font-family: 'Montserrat', sans-serif;
  display: flex;
  flex-direction: column;
}

.meta-text strong {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

.meta-text span {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 500;
}

/* Play Video Interactive Controller Component */
.play-controller-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  text-decoration: none !important;
  color: #ffffff;
  position: relative;
  cursor: pointer;
}

.play-trigger-btn {
  width: 80px;
  height: 80px;
  background-color: #ffffff;
  color: #9b0a15; /* Contrasting brand crimson playing head icon */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  z-index: 5;
  padding-left: 6px; /* Balance play triangle optical alignment */
}

/* Double-ring continuous breathing pulse halo */
.pulsing-halo {
  position: absolute;
  top: 50%;
  left: 40px; /* Aligns precisely to the button center */
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  animation: pulse-ring 2s infinite ease-out;
  z-index: 3;
}

.play-btn-label {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: color 0.3s;
}

/* Hover Effects */
.play-controller-wrap:hover .play-trigger-btn {
  transform: scale(1.1);
  background-color: #db5012; /* Shifts button to campaign orange on hover */
  color: #ffffff;
}

.play-controller-wrap:hover .play-btn-label {
  color: #db5012;
}

/* Pulsing Ring Animation Keyframes */
@keyframes pulse-ring {
  0% {
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0;
  }
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
  .campaign-glass-card {
    padding: 30px;
  }
  
  .campaign-headline {
    font-size: 26px;
  }

  .play-controller-wrap {
    margin-top: 30px;
  }
}

.video-lightbox-modal .modal-content {
  background: rgba(15, 15, 15, 0.9);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  overflow: hidden;
}

.video-lightbox-modal .btn-close {
  opacity: 0.8;
  transition: opacity 0.2s;
}

.video-lightbox-modal .btn-close:hover {
  opacity: 1;
}

.video-lightbox-modal video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  outline: none;
}

.ratio > * {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* Background video element styling */
.video-cover-autoplay-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0; /* Hidden by default; transitions to visible when playing */
  transition: opacity 1s ease-in-out;
}

/* Make the video visible when active */
.video-cover-autoplay-bg.is-playing {
  opacity: 1;
}

/* Ensure the static cover is also at z-index 1 underneath the video */
.video-cover-bg {
  z-index: 1;
}

/* Overlay needs to sit on top of the background video (z-index: 2) */
.glass-gradient-overlay {
  z-index: 2;
}

/* ==========================================================================
   OPTION 3 – SPLIT FEATURE + LIST
   ========================================================================== */

/* Typography & Core Accents */
.split-main-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 36px;
  color: #0b241a; /* Rich Brand Green */
}

.split-title-accent {
  width: 32px;
  height: 24px;
  background-color: #db5012; /* Warm Brand Orange */
  transform: skewX(-25deg);
  border-radius: 2px;
}

/* --- Left Side Feature Card --- */
.split-feature-card {
  min-height: 500px;
  border-radius: 24px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}

/* Complex multi-layer gradient: matches dark green branding wash in the image */
.card-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(11, 36, 26, 0.2) 0%,
    rgba(11, 36, 26, 0.6) 50%,
    rgba(4, 18, 12, 0.95) 100%
  );
  z-index: 1;
}

.badge-announcement {
  background-color: #db5012;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 6px 14px;
  border-radius: 6px;
  display: inline-block;
}

.feature-headline {
  font-family: 'Poppins', sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.25;
}

.fs-14 {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
}

/* Slider Dash Indicators */
.indicator-dash {
  width: 45px;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  display: inline-block;
  transition: background-color 0.3s;
}

.indicator-dash.active {
  background-color: #db5012;
}

/* --- Right Side List Card --- */
.split-list-card {
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.03);
}

.list-thumbnail {
  width: 80px;
  height: 64px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
}

.list-tag {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

.text-green { color: #107c41; }
.text-red { color: #dc2626; }
.text-orange { color: #db5012; }

.list-title {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #0b241a;
  line-height: 1.35;
  transition: color 0.2s;
}

.split-list-item:hover .list-title {
  color: #db5012;
}

.list-date {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
}

.list-arrow-link {
  color: #0b241a !important;
  font-size: 20px;
  transition: transform 0.25s ease;
}

.split-list-item:hover .list-arrow-link {
  transform: translateX(4px);
}

/* --- Footer CTA Area --- */
.view-all-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: #db5012;
  letter-spacing: 0.5px;
}

.orange-circle-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #db5012;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  text-decoration: none;
  transition: transform 0.25s, background-color 0.25s;
}

.orange-circle-arrow:hover {
  background-color: #0b241a;
  transform: scale(1.05);
}

/* --- Responsiveness --- */
@media (max-width: 991.98px) {
  .split-main-title {
    font-size: 28px;
  }
  .feature-headline {
    font-size: 26px;
  }
  .split-feature-card {
    min-height: 400px;
  }
}

/* ==========================================================================
   NEOMORPHIC FLOATING DECK STYLE RULES
   ========================================================================== */

/* --- Unified Title Styles --- */
.split-main-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 36px;
  color: #0b241a; /* Rich Brand Green */
}

.split-title-accent {
  width: 32px;
  height: 24px;
  background-color: #db5012; /* Warm Brand Orange */
  transform: skewX(-25deg);
  border-radius: 2px;
  flex-shrink: 0;
}

/* --- Core Service Card Layout --- */
.ecz-service-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 320px;
  padding: 32px 28px 24px;
  text-decoration: none !important;
  position: relative;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 15px 35px rgba(11, 36, 26, 0.03), 0 5px 15px rgba(0, 0, 0, 0.01);
  transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.35s ease;
  overflow: hidden;
}

/* --- Shifting Top Color Bar on Hover --- */
.ecz-service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: transparent;
  transition: background-color 0.3s ease;
}

.ecz-service-card.card-green::before { background-color: #107c41; }
.ecz-service-card.card-orange::before { background-color: #db5012; }
.ecz-service-card.card-red::before { background-color: #dc2626; }
.ecz-service-card.card-dark::before { background-color: #0b241a; }

/* Hover Lift and Glow */
.ecz-service-card:hover {
  transform: translateY(-8px);
}

.ecz-service-card.card-green:hover {
  box-shadow: 0 20px 40px rgba(16, 124, 65, 0.1), inset 0 0 0 1px rgba(16, 124, 65, 0.15);
}
.ecz-service-card.card-orange:hover {
  box-shadow: 0 20px 40px rgba(219, 80, 18, 0.1), inset 0 0 0 1px rgba(219, 80, 18, 0.15);
}
.ecz-service-card.card-red:hover {
  box-shadow: 0 20px 40px rgba(220, 38, 38, 0.1), inset 0 0 0 1px rgba(220, 38, 38, 0.15);
}
.ecz-service-card.card-dark:hover {
  box-shadow: 0 20px 40px rgba(11, 36, 26, 0.12), inset 0 0 0 1px rgba(11, 36, 26, 0.15);
}

/* --- Card Header & Left Icons --- */
.card-left-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 24px;
  transition: transform 0.3s ease;
}

.icon-green { background-color: rgba(16, 124, 65, 0.08); color: #107c41; }
.icon-orange { background-color: rgba(219, 80, 18, 0.08); color: #db5012; }
.icon-red { background-color: rgba(220, 38, 38, 0.08); color: #dc2626; }
.icon-dark { background-color: rgba(11, 36, 26, 0.08); color: #0b241a; }

.ecz-service-card:hover .card-left-icon {
  transform: scale(1.05) translateY(-2px);
}

/* --- Card Typography --- */
.ecz-service-card .card-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: #0b241a;
  margin-bottom: 10px;
}

.ecz-service-card .card-desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #5a6e65;
  margin-bottom: 0;
}

/* --- CTA Action Footers --- */
.card-cta-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.cta-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 14px;
}

.text-green { color: #107c41; }
.text-orange { color: #db5012; }
.text-red { color: #dc2626; }
.text-dark { color: #0b241a; }

.card-arrow-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 16px;
  transition: transform 0.25s, opacity 0.25s;
}

.card-arrow-btn.bg-green { background-color: #107c41; }
.card-arrow-btn.bg-orange { background-color: #db5012; }
.card-arrow-btn.bg-red { background-color: #dc2626; }
.card-arrow-btn.bg-dark { background-color: #0b241a; }

/* Micro-interaction on arrow rotation and zoom */
.ecz-service-card:hover .card-arrow-btn {
  transform: scale(1.08) rotate(-15deg);
}

/* --- Responsive Adjustments --- */
@media (max-width: 767.98px) {
  .split-main-title {
    font-size: 28px;
  }
  .split-title-accent {
    width: 24px;
    height: 18px;
  }
  .ecz-service-card {
    min-height: auto;
    padding: 24px;
  }
}

/* ==========================================================================
   ACTIVE STEP PULSE ANIMATION
   ========================================================================== */

/* 1. Pulse Glow on the Active Indicator Circle */
.step-active .step-indicator {
  position: relative;
  z-index: 1;
  animation: indicator-pulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
  background-color: #eb6a01  !important; /* Ensures the active circle uses the theme green */
  color: #ffffff !important;
}

/* 2. Soft Fade on the "In Progress" Status Text */
.step-active .step-status {
  display: inline-block;
  font-weight: 700;
  color: #eb6a01 !important;
  animation: text-soft-pulse 2s infinite ease-in-out;
}

/* --- Animation Keyframes --- */

/* Radial expanding pulse shadow */
@keyframes indicator-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 124, 65, 0.5);
  }
  70% {
    /* Expands out 12px and fades away */
    box-shadow: 0 0 0 12px rgba(16, 124, 65, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 124, 65, 0);
  }
}

/* Gentle text breathing effect */
@keyframes text-soft-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* ==========================================================================
   FAQ SECTION - ACCORDION WITH ICONS STYLES
   ========================================================================== */

.faq-accent-section {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #f1f0ec; /* Fallback color while the image loads */
  overflow: hidden;
}

/* --- Map Watermark background --- */
.faq-map-watermark {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-image: url('../images/texture-bg.jpg'); /* Adjust map watermark asset path */
  background-size: cover;
  background-position: center;
  opacity: 0.06;
  pointer-events: none;
  z-index: 1;
}

/* --- Left Column Elements --- */
.faq-top-badge {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #111111;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.5px;
}

.badge-number {
  background-color: #0b241a; /* Midnight Teal */
  color: #ffffff;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
}

.faq-main-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 42px;
  color: #111111;
  line-height: 1.15;
}

.text-green {
  color: #107c41 !important; /* Brand Emerald Green */
}

.faq-subtext {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #555555;
  max-width: 320px;
}

/* Overlapping ballot box image wrapper */
.ballot-box-wrapper {
  width: 100%;
  height: auto;
}

.ballot-box-img {
  width: 400px;
  height: 570px;
  border-radius: 6px;
  object-fit:cover;
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.08));
}

/* --- Right Column Card Container --- */
.faq-card-container {
  background-color: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.02);
  padding: 12px;
}

/* --- Custom Accordion Styles --- */
.custom-faq-accordion .accordion-item {
  border: none;
  background-color: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.custom-faq-accordion .accordion-item:last-child {
  border-bottom: none;
}

.custom-faq-accordion .accordion-button {
  background-color: transparent;
  padding: 24px 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #111111;
  box-shadow: none !important;
  border: none;
  transition: color 0.25s ease;
}

/* Force items leftward */
.custom-faq-accordion .accordion-button::after {
  margin-left: auto;
  background-size: 12px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23111111'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transform: rotate(0deg);
  transition: transform 0.25s ease;
}

.custom-faq-accordion .accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23107c41'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Icon Holders */
.faq-icon-holder {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Color Accent Variations for Icons */
.bg-green-accent {
  background-color: rgba(16, 124, 65, 0.1);
  color: #107c41;
}

.bg-orange-accent {
  background-color: rgba(219, 80, 18, 0.1);
  color: #db5012;
}

.bg-grey-accent {
  background-color: rgba(11, 36, 26, 0.05);
  color: #777777;
}

/* Fill the active icon cleanly matching active state */
.custom-faq-accordion .accordion-button:not(.collapsed) .faq-icon-holder {
  background-color: #107c41;
  color: #ffffff;
}

/* Accordion Text Inner */
.faq-btn-text {
  flex: 1;
}

.custom-faq-accordion .accordion-body {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #555555;
  padding: 0 20px 24px 79px; /* Offset to align exactly with button text starting edge */
}

/* --- Responsive Adaptations --- */
@media (max-width: 991.98px) {
  .faq-main-title {
    font-size: 34px;
  }
  .ballot-box-wrapper {
    margin: 0 auto;
    max-width: 280px;
  }
  .custom-faq-accordion .accordion-body {
    padding-left: 20px; /* Collapse left space on mobile devices */
  }
}
/* ==========================================================================
   ONLINE SERVICES SECTION STYLES
   ========================================================================== */

.online-services-section {
  background-color: #f1f0ec;
  overflow: hidden;
  position: relative;
}

/* --- Left Column Layout --- */
.services-left-col {
  padding: 100px 80px;
}

.services-content-wrap {
  width: 100%;
  max-width: 680px;
  margin-left: auto;
  margin-right: 40px;
}

/* Badge with Keyline */
.services-badge {
  display: flex;
  align-items: center;
  gap: 10px;
}

.badge-line {
  display: inline-block;
  width: 25px;
  height: 3px;
  background-color: #db5012; /* Brand Orange */
  border-radius: 2px;
}

.badge-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: #db5012;
}

/* Heading Styling */
.services-main-heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 50px;
  color: #0b241a;
  line-height: 1.2;
}

.text-green {
  color: #107c41 !important; /* Brand Green */
}

/* --- Grid & Dividers --- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.service-grid-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 30px 20px;
  position: relative;
}

/* Horizontal dividers for the grid rows */
.service-grid-item:nth-child(1),
.service-grid-item:nth-child(2),
.service-grid-item:nth-child(3),
.service-grid-item:nth-child(4) {
  border-bottom: 1px solid rgba(11, 36, 26, 0.08);
}

/* Vertical dividers separating the two columns */
.service-grid-item:nth-child(odd) {
  border-right: 1px solid rgba(11, 36, 26, 0.08);
  padding-left: 0;
}

.service-grid-item:nth-child(even) {
  padding-right: 0;
}

/* Base Icon Box styling */
.service-icon-box {
  width: 50px;
  height: 50px;
  min-width: 50px;
  background-color: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.service-icon-box i {
  font-size: 22px;
  transition: color 0.3s ease;
}

/* --- Dynamic Icon Color Mapping --- */

/* 1. Brand Green Accent */
.accent-green .service-icon-box i {
  color: #107c41;
}
.accent-green:hover .service-icon-box {
  background-color: #107c41;
  box-shadow: 0 8px 20px rgba(16, 124, 65, 0.2);
}

/* 2. Brand Orange Accent */
.accent-orange .service-icon-box i {
  color: #db5012;
}
.accent-orange:hover .service-icon-box {
  background-color: #db5012;
  box-shadow: 0 8px 20px rgba(219, 80, 18, 0.2);
}

/* 3. Midnight Teal Accent */
.accent-midnight .service-icon-box i {
  color: #0b241a;
}
.accent-midnight:hover .service-icon-box {
  background-color: #0b241a;
  box-shadow: 0 8px 20px rgba(11, 36, 26, 0.2);
}

/* Global hover behavior to white-out active icons */
.service-grid-item:hover .service-icon-box {
  transform: translateY(-3px);
}
.service-grid-item:hover .service-icon-box i {
  color: #ffffff !important;
}

/* Service Info Text */
.service-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #0b241a;
  margin-bottom: 6px;
}

.service-desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #6a7d73;
  margin: 0 0 10px 0;
}

/* Inline Action Links */
.service-action-link {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s ease, color 0.2s ease;
}

/* Link Hover & Accent Syncing */
.accent-green .service-action-link { color: #107c41; }
.accent-orange .service-action-link { color: #db5012; }
.accent-midnight .service-action-link { color: #0b241a; }

.service-grid-item:hover .service-action-link {
  gap: 10px;
}

/* --- Right Column Layout --- */
.services-right-col {
  background-color: #f1f0ec;
  min-height: 580px;
}

/* Curved Background Shapes */
.curve-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.curve-orange {
  width: 550px;
  height: 550px;
  background-color: #db5012; 
  top: -150px;
  right: -100px;
  z-index: 1;
}

.curve-green {
  width: 250px;
  height: 250px;
  background-color: #107c41;
  bottom: -80px;
  left: -20px;
  z-index: 1;
}

.services-cutout-container {
  width: 90%;
  height: 100%;
  max-width: 480px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 2;
  position: relative;
}

.services-cutout-img {
  width: 800px;
  height: 1000px;
  object-fit:cover;
  mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}

/* --- Responsive Layout Rules --- */
@media (max-width: 1199.98px) {
  .services-left-col {
    padding: 80px 40px;
  }
}

@media (max-width: 991.98px) {
  .services-left-col {
    padding: 80px 24px;
  }
  .services-content-wrap {
    margin: 0 auto;
    max-width: 100%;
  }
  .services-right-col {
    min-height: 480px;
  }
  .curve-orange {
    width: 400px;
    height: 400px;
    top: -100px;
    right: -80px;
  }
  .curve-green {
    width: 180px;
    height: 180px;
    bottom: -50px;
    left: -10px;
  }
}

@media (max-width: 575.98px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
  .service-grid-item {
    border-right: none !important;
    border-bottom: 1px solid rgba(11, 36, 26, 0.08) !important;
    padding-left: 0;
    padding-right: 0;
  }
  .service-grid-item:last-child {
    border-bottom: none !important;
  }
  .services-main-heading {
    font-size: 30px;
  }
}




/* ==========================================================================
   HERO KEYFRAME ANIMATIONS
   ========================================================================== */

/* 1. Set default opacity 0 to prevent flash of unstyled content (FOUC) */
.animate-fade-up {
  opacity: 0;
  animation: heroFadeInUp 0.9s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.animate-fade-right {
  opacity: 0;
  animation: heroFadeInRight 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 2. Animation Delays for organic sequencing */
.delay-1 {
  animation-delay: 0.2s;
}

.delay-2 {
  animation-delay: 0.4s;
}

/* 3. Smooth Fade Carousel Class */
#hero-carousel-img {
  transition: opacity 0.4s ease-in-out;
  opacity: 1;
}

#hero-carousel-img.fade-out {
  opacity: 0;
}

/* --- Keyframe Definitions --- */
@keyframes heroFadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroFadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ==========================================================================
   SPLIT NEWS SECTION TRANSITIONS & HOVERS
   ========================================================================== */

/* Main feature card styling & hover scaling */
.split-feature-card {
  min-height: 480px;
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
  cursor: pointer;
}

.split-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(16, 124, 65, 0.15); /* Soft Brand Green Shadow */
}

/* Dark Rich Green Gradient Overlay */
.card-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(11, 36, 26, 0.2) 0%, rgba(11, 36, 26, 0.9) 100%);
  z-index: 1;
}

/* Left-side Badge Announcement styling */
.badge-announcement {
  background-color: #db5012; /* Brand Orange */
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 20px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
}

/* Right-side Card Structure */
.split-list-card {
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03);
}

/* List Thumbnail image structure */
.list-thumbnail {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 10px;
  background-color: #eee;
  transition: transform 0.3s ease;
}

/* List Item Hover Effects */
.split-list-item {
  transition: background-color 0.3s ease;
}

.split-list-item:hover .list-thumbnail {
  transform: scale(1.05);
}

.list-title {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #111111;
  line-height: 1.4;
  transition: color 0.2s ease;
}

.split-list-item:hover .list-title {
  color: #107c41; /* Shift title to Brand Green on hover */
}

/* Arrow Interaction Style */
.list-arrow-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #f1f0ec;
  color: #777777;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.split-list-item:hover .list-arrow-link {
  background-color: #107c41; /* Brand Green fill on list item hover */
  color: #ffffff;
  transform: translateX(4px);
}

/* Tag Color Mappings */
.list-tag {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.text-green { color: #107c41 !important; }
.text-orange { color: #db5012 !important; }
.text-red { color: #e53935 !important; }

/* View All News Button Interactivity */
.view-all-container {
  cursor: pointer;
}

.view-all-label {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #111111;
  transition: color 0.3s ease;
}

.orange-circle-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #db5012; /* Brand Orange */
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
}

.view-all-container:hover .orange-circle-arrow {
  transform: translateX(6px);
  box-shadow: 0 6px 15px rgba(219, 80, 18, 0.3);
}

.view-all-container:hover .view-all-label {
  color: #db5012;
}

/* ==========================================================================
   DRAMATIC TIMELINE STYLING
   ========================================================================== */

.dramatic-timeline {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04);
  position: relative;
}

/* --- Section Header with Live Pulse --- */
.timeline-section-header {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 2px;
  color: #0b241a;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 45px;
}

.live-pulse-dot {
  width: 8px;
  height: 8px;
  background-color: #db5012; /* Active Brand Orange */
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(219, 80, 18, 0.7);
  animation: pulseDot 1.6s infinite;
}

/* --- The Connective Line Progress Bar --- */
.timeline-flow-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.timeline-progress-bar {
  position: absolute;
  top: 25px; /* Centers line horizontally with the 50px indicators */
  left: 40px;
  right: 40px;
  height: 4px;
  background-color: rgba(11, 36, 26, 0.08); /* Faint track background */
  z-index: -1;
  border-radius: 2px;
}

/* Fill effect tracking all the way to Step 3 */
.timeline-progress-fill {
  width: 40%; /* Exactly connects Step 1 to Step 3 */
  height: 100%;
  background: linear-gradient(90deg, #107c41 0%, #db5012 100%);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(16, 124, 65, 0.4);
}

/* --- Timeline Steps & Indicators --- */
.timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  position: relative;
  transition: transform 0.3s ease;
}

.timeline-step:hover {
  transform: translateY(-4px);
}

.step-indicator {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  position: relative;
  transition: all 0.4s ease;
}

/* --- Completed Step State (Elegant Emerald Green) --- */
.step-completed .step-indicator {
  background-color: #107c41;
  color: #ffffff;
  box-shadow: 0 6px 15px rgba(16, 124, 65, 0.3);
}

/* --- Upcoming Step State (Clean, Subtle Muted) --- */
.step-upcoming .step-indicator {
  background-color: #ffffff;
  border: 2px solid rgba(11, 36, 26, 0.12);
  color: #777777;
}

/* --- Active Step State (Dramatic Orange Glow & Beacon Pulse) --- */
.step-active .step-indicator {
  background-color: #db5012;
  color: #ffffff;
  box-shadow: 0 0 25px rgba(219, 80, 18, 0.6);
  border: none;
  z-index: 5;
}

/* Beacon Ring 1 */
.beacon-ring {
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 1px solid #db5012;
  border-radius: 50%;
  opacity: 0;
  animation: beaconPulse 2s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
}

/* Beacon Ring 2 (Slight Offset) */
.beacon-ring-2 {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 1px solid #db5012;
  border-radius: 50%;
  opacity: 0;
  animation: beaconPulse 2s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
  animation-delay: 0.5s;
}

/* --- Details & Status Text --- */
.step-details {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.step-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 12px;
  color: #0b241a;
  letter-spacing: 0.5px;
}

.step-status {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #777777;
}

.step-completed .step-status {
  color: #107c41;
}

/* Glowing active badge tag */
.step-status-badge {
  background-color: rgba(219, 80, 18, 0.1);
  color: #db5012;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 12px;
  display: inline-block;
  margin-top: 2px;
  box-shadow: 0 4px 10px rgba(219, 80, 18, 0.05);
}

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

@keyframes pulseDot {
  0% {
    box-shadow: 0 0 0 0 rgba(219, 80, 18, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(219, 80, 18, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(219, 80, 18, 0);
  }
}

@keyframes beaconPulse {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* --- Responsive Timeline Stacking --- */
@media (max-width: 991.98px) {
  .timeline-flow-wrapper {
    flex-direction: column;
    gap: 30px;
    align-items: flex-start;
  }
  .timeline-progress-bar {
    top: 25px;
    bottom: 25px;
    left: 25px;
    width: 4px;
    height: auto;
  }
  .timeline-progress-fill {
    width: 100%;
    height: 40%; /* Vertically tracks downward to step 3 on mobile layout */
    background: linear-gradient(180deg, #107c41 0%, #db5012 100%);
  }
  .timeline-step {
    flex-direction: row;
    gap: 20px;
    text-align: left;
    width: 100%;
  }
  .timeline-step:hover {
    transform: translateX(5px);
  }
  .step-details {
    margin-top: 0;
    justify-content: center;
  }
}



/* Sub-heading & Main Heading */
.sub-label-orange {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #db5012; /* Brand Orange */
  letter-spacing: 1px;
  display: block;
  margin-bottom: 8px;
}

.functions-main-heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 48px;
    color: rgb(11, 36, 26);
  line-height: 1.1;
  margin: 0;
}

/* Subtle circle background behind key word */
.highlight-circle {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.highlight-circle::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  background-color: rgba(219, 80, 18, 0.25); /* Translucent Orange backing */
  border-radius: 50%;
  z-index: -1;
}

.functions-header-desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #666666;
  margin: 0;
}

/* --- LIGHT FUNCTION CARDS --- */
.function-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  background-color: #f5f6f8; /* Soft light grey card backing */
  border-radius: 16px;
  padding: 24px;
  perspective: 1000px; /* Enables 3D space for dramatic animations */
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              background-color 0.3s ease, 
              box-shadow 0.3s ease;
}

.function-card:hover {
  transform: translateY(-8px) scale(1.02);
  background-color: #ffffff;
  box-shadow: 0 20px 40px rgba(16, 124, 65, 0.12);
}

/* Top area container centering */
.card-top {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 16px;
}

/* Centered Icon Circle with Accent Colors */
.card-icon-circle {
  width: 62px;
  height: 62px;
  background-color: rgba(16, 124, 65, 0.1); /* Light Green Tint */
  color: #107c41; /* Brand Green */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 6px 16px rgba(16, 124, 65, 0.15);
  margin: 0 auto;
  transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}

/* Internal Icon Element Target for Animation */
.card-icon-circle i {
  display: inline-block;
  transition: transform 0.5s ease;
}

/* Hover Effects on Icon Circle & Icon */
.function-card:hover .card-icon-circle {
  background-color: #db5012; /* Shifts to Brand Orange */
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(219, 80, 18, 0.4);
  animation: pulseGlow 1.2s infinite alternate ease-in-out;
}

.function-card:hover .card-icon-circle i {
  animation: dramaticFlip 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* Card Bottom Content (Title & Description) */
.card-bottom {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 8px;
}

.card-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #111111;
  line-height: 1.25;
  margin: 0;
  transition: color 0.3s ease;
}

.function-card:hover .card-title {
  color: #107c41; /* Title highlights to Brand Green on hover */
}

.card-desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #666666;
  margin: 0;
}

.dark-cta-card.image-cta-card {
  position: relative;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 16px;
  text-decoration: none;
  min-height: 400px;
  overflow: hidden;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

/* Gradient Overlay to ensure crisp text contrast */
.dark-cta-card.image-cta-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg, 
    rgba(11, 12, 14, 0.35) 0%, 
    rgba(11, 12, 14, 0.85) 75%, 
    rgba(11, 12, 14, 0.95) 100%
  );
  z-index: 1;
  transition: opacity 0.3s ease;
}

/* Ensure text & arrow content sit above the dark overlay */
.dark-cta-card.image-cta-card > * {
  position: relative;
  z-index: 2;
}

/* Hover States */
.dark-cta-card.image-cta-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35);
}

.dark-cta-card.image-cta-card:hover::before {
  /* Slightly deepens overlay on hover for extra focus */
  background: linear-gradient(
    180deg, 
    rgba(11, 12, 14, 0.25) 0%, 
    rgba(11, 12, 14, 0.90) 70%, 
    rgba(16, 124, 65, 0.92) 100% /* Subtle Brand Green tint at bottom on hover */
  );
}

.cta-big-arrow {
  font-size: 48px;
  color: #db5012; /* Brand Orange */
  transition: transform 0.4s ease;
}

.dark-cta-card:hover .cta-big-arrow {
  transform: translate(8px, -8px) scale(1.15);
}

.cta-subhead {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #db5012;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.cta-email {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #ffffff;
  word-break: break-word;
  margin: 0;
}
/* ==========================================================================
   KEYFRAME ANIMATIONS
   ========================================================================== */

/* 3D Spin & Bounce Flip Animation */
@keyframes dramaticFlip {
  0% {
    transform: rotateY(0deg) scale(1);
  }
  50% {
    transform: rotateY(180deg) scale(1.3);
  }
  100% {
    transform: rotateY(360deg) scale(1.1);
  }
}

/* Glowing Pulse Effect */
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(219, 80, 18, 0.4);
  }
  100% {
    box-shadow: 0 0 0 14px rgba(219, 80, 18, 0);
  }
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
  .functions-main-heading {
    font-size: 36px;
    margin-bottom: 15px;
  }
  .dark-cta-card {
    min-height: 250px;
  }
}

/* Soft Border Line */
.hr-subtle {
  border: 0;
  border-top: 1px solid rgba(11, 36, 26, 0.08);
  margin: 32px 0;
}

/* Mandate Section Styles */
.mandate-card {
  background-color: var(--color-white);
  border: 1px solid rgba(13, 13, 13, 0.08);
  border-radius: 16px;
  padding: 35px 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s var(--easing), box-shadow 0.3s ease;
}

.mandate-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(49, 8, 117, 0.08);
  border-color: var(--color-primary);
}

.mandate-card-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(13, 13, 13, 0.06);
}

.mandate-icon-box {
  width: 56px;
  height: 56px;
  background-color: var(--color-primary); /* Orange */
  color: var(--color-white);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}

.mandate-icon-box.box-statutory {
  background-color: var(--color-secondary); /* Purple */
}

.mandate-badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 5px;
}

.badge-constitutional {
  background-color: rgba(245, 130, 32, 0.12);
  color: var(--color-primary);
}

.badge-statutory {
  background-color: rgba(49, 8, 117, 0.1);
  color: var(--color-secondary);
}

.mandate-card-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0;
}

.mandate-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mandate-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-default);
  line-height: 1.5;
  margin-bottom: 14px;
}

.mandate-list li:last-child {
  margin-bottom: 0;
}

.mandate-list li i {
  color: var(--color-primary);
  font-size: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

.mandate-list li i.text-statutory {
  color: var(--color-secondary);
}

/* ==========================================
   MODERN TEAM & BIO MODAL STYLES
   ========================================== */


.team-card-modern {

  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(13, 13, 13, 0.06);
  transition: transform 0.4s var(--easing), box-shadow 0.4s ease, border-color 0.3s ease;
}

.team-card-modern:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(16, 124, 65, 0.12);
  border-color: rgba(16, 124, 65, 0.3);
}

.team-img-wrapper {
  position: relative;
  width: 100%;
  height: 320px;
  overflow: hidden;
  background-color: var(--color-secondary);
}

.team-img-wrapper .team-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--easing);
}

/* Permanent Green Gradient Overlay */
.green-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg, 
    rgba(16, 124, 65, 0.15) 0%, 
    rgba(10, 80, 42, 0.75) 100%
  );
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.team-card-modern:hover .team-img {
  transform: scale(1.08);
}

.team-card-modern:hover .green-gradient-overlay {
  opacity: 0.5;
}

.team-social-overlay {
  position: absolute;
  bottom: -50px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
  transition: bottom 0.4s var(--easing), opacity 0.4s ease;
  opacity: 0;
  z-index: 2;
}

.team-card-modern:hover .team-social-overlay {
  bottom: 0;
  opacity: 1;
}

.btn-bio-trigger {
  width: 46px;
  height: 46px;
  background-color: var(--color-white);
  color: #107c41;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.btn-bio-trigger:hover {
  background-color: #107c41;
  color: var(--color-white);
  transform: translateY(-3px);
}

.team-content {
  padding: 22px 20px;
  text-align: center;
}

.team-name {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 4px;
}

.team-role {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Modal Popup Custom Styling */
.bio-modal-modern .modal-content {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

.btn-close-custom {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(13, 13, 13, 0.6);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

.btn-close-custom:hover {
  background: var(--color-primary);
}

.modal-img-col {
  background-color: #0d1216;
}

.modal-profile-wrapper {
  position: relative;
  height: 100%;
  min-height: 400px;
}

.modal-profile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-img-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 124, 65, 0.1) 0%, rgba(10, 80, 42, 0.6) 100%);
}

.modal-info-col {
  max-height: 85vh;
  overflow-y: auto;
}

.modal-bio-content {
  padding: 40px 35px;
}

.modal-role-tag {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #107c41;
  letter-spacing: 0.5px;
}

.modal-person-name {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 800;
  color: var(--color-heading);
  margin-top: 4px;
  margin-bottom: 2px;
}

.modal-person-title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
}

.modal-sub-heading {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-heading);
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.expertise-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill-badge {
  background-color: rgba(16, 124, 65, 0.1);
  color: #107c41;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 20px;
}

.modal-edu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.modal-edu-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.modal-edu-list li i {
  font-size: 18px;
  color: #107c41;
  margin-top: 2px;
}

.modal-edu-list strong {
  display: block;
  font-size: 14px;
  color: var(--color-heading);
}

.modal-edu-list span {
  font-size: 13px;
  color: var(--color-default);
}

.modal-text-body p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-default);
  margin-bottom: 12px;
}



/* Header Tags */
.ecz-badge-tag {
  display: inline-block;
  padding: 6px 16px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ecz-brand-green);
  background-color: var(--ecz-brand-green-light);
  border-radius: 50px;
}

.ecz-section-headline {
  color: var(--ecz-slate-dark);
  font-weight: 800;
  font-size: 2.25rem;
  letter-spacing: -0.5px;
}

/* Glass/Card Container */
.ecz-glass-card {
  background: var(--ecz-card-bg);
  border: 1px solid var(--ecz-border-color);
  border-radius: var(--ecz-radius);
  box-shadow: var(--ecz-shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ecz-glass-card:hover {
  box-shadow: var(--ecz-shadow-hover);
}

.ecz-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background-color: var(--ecz-brand-green-light);
  color: var(--ecz-brand-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.ecz-body-text {
  color: var(--ecz-slate-body);
  font-size: 0.975rem;
  line-height: 1.65;
}

/* Mini Feature Items */
.ecz-mini-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background-color: #f8fafc;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid #edf2f7;
}

.ecz-mini-feature i {
  font-size: 1.25rem;
  margin-top: 2px;
}

.ecz-mini-feature h6 {
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 2px;
  color: var(--ecz-slate-dark);
}

.ecz-mini-feature p {
  font-size: 0.8rem;
  color: var(--ecz-slate-body);
  margin-bottom: 0;
  line-height: 1.4;
}

/* Callout Box */
.ecz-callout-box {
  background: #f0fdf4;
  border-left: 4px solid var(--ecz-brand-green);
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  font-size: 0.9rem;
  color: #166534;
}

/* Pills & Badges */
.ecz-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
}

.ecz-pill.primary {
  background-color: var(--ecz-brand-green-light);
  color: var(--ecz-brand-green-dark);
  border: 1px solid rgba(10, 124, 66, 0.2);
}

.ecz-pill.secondary {
  background-color: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
}

/* Department Grid Chips */
.ecz-dept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.ecz-dept-chip {
  background: #ffffff;
  border: 1px solid var(--ecz-border-color);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--ecz-slate-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.ecz-dept-chip:hover {
  border-color: var(--ecz-brand-green);
  transform: translateY(-2px);
  background-color: var(--ecz-brand-green-light);
}

/* Image Cards with Gradient Overlay */
.ecz-img-card {
  position: relative;
  border-radius: var(--ecz-radius);
  overflow: hidden;
  min-height: 380px;
  box-shadow: var(--ecz-shadow-sm);
}

.ecz-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.ecz-img-card:hover .ecz-card-img {
  transform: scale(1.04);
}

.ecz-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.2) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
}

.ecz-img-tag {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.725rem;
  font-weight: 600;
  border-radius: 50px;
  margin-bottom: 12px;
}

  :root{
      --ecz-green:#0c9154;
      --ecz-orange:#f37221;
      --ecz-red:#ed1c24;
      --ecz-dark:#111111;
      --ecz-muted:#6b7280;
      /* --ecz-border:#e9ecef; */
      
    }

    .ecz-kicker{
      display:inline-block;
      font-weight:600;
      letter-spacing:.02em;
      color: var(--ecz-green);
      background: rgba(12,145,84,.08);
      padding:.35rem .65rem;
      border-radius: 999px;
      margin-bottom:.75rem;
    }
    .ecz-title{
      color: var(--ecz-dark);
      font-weight: 800;
      letter-spacing: -0.02em;
    }
    .ecz-lead{
      color: var(--ecz-muted);
      font-size: 1.02rem;
      line-height: 1.7;
    }

    /* ------- Accordion layout (replaces cards) ------- */
    .ecz-grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: 18px;
    }
    @media (min-width: 992px){
      .ecz-grid{ grid-template-columns: 1fr 1fr; }
    }

    .ecz-acc-item{
      border: 1px solid var(--ecz-border);
      border-radius: 18px;
      background:#fff;
      box-shadow: 0 10px 30px rgba(17,17,17,.05);
      overflow: hidden;
      height: 100%;
    }

    .ecz-acc-btn{
      width: 100%;
      border: 0;
      background: transparent;
      padding: 18px 18px;
      text-align: left;
      display:flex;
      gap:14px;
      align-items:center;
      cursor: pointer;
    }

    /* clickable area feels nice */
    .ecz-acc-btn:focus{
      outline: none;
      box-shadow: 0 0 0 4px rgba(12,145,84,.15);
    }

    /* .ecz-badge{
      width: 44px;
      height: 44px;
      display:grid;
      place-items:center;
      border-radius: 14px;
      color:#fff;
      flex: 0 0 auto;
      font-size: 20px;
    } */

    /* Different ECZ colors per committee */
    .ecz-badge--green{ background: linear-gradient(135deg, var(--ecz-green), #0aa35e); }
    .ecz-badge--orange{ background: linear-gradient(135deg, var(--ecz-orange), #ff8a3d); }
    .ecz-badge--red{ background: linear-gradient(135deg, var(--ecz-red), #ff3a3a); }
    .ecz-badge--dark{ background: linear-gradient(135deg, #111111, #2b2b2b); }

    .ecz-acc-title{
      font-weight: 800;
      color: var(--ecz-dark);
      margin:0;
      line-height: 1.2;
    }
    .ecz-acc-sub{
      color: var(--ecz-muted);
      font-size: .95rem;
      margin:2px 0 0 0;
    }

    /* Right-side action area */
    .ecz-acc-actions{
      margin-left:auto;
      display:flex;
      align-items:center;
      gap: 10px;
      flex: 0 0 auto;
    }

    .ecz-readmore{
      font-weight: 700;
      font-size: .92rem;
      color: var(--ecz-green);
      background: rgba(12,145,84,.08);
      border: 1px solid rgba(12,145,84,.18);
      padding: .35rem .6rem;
      border-radius: 999px;
      line-height: 1;
      white-space: nowrap;
    }

    /* Chevron */
    .ecz-acc-chevron{
      width: 34px;
      height: 34px;
      border-radius: 999px;
      display:grid;
      place-items:center;
      border: 1px solid rgba(0,0,0,.08);
      color: var(--ecz-dark);
      transition: transform .2s ease;
    }

    /* Rotate when expanded */
    .ecz-acc-btn[aria-expanded="true"] .ecz-acc-chevron{
      transform: rotate(180deg);
    }

    /* “Read more” changes to “Read less” when open */
    .ecz-acc-btn[aria-expanded="true"] .ecz-readmore{
      color: var(--ecz-dark);
      background: rgba(17,17,17,.06);
      border-color: rgba(17,17,17,.12);
    }

    .ecz-acc-body{
      padding: 16px 18px 18px 18px;
      border-top: 1px dashed rgba(0,0,0,.08);
    }

    .ecz-text{ color:#374151; line-height:1.75; margin:0 0 12px 0; }
    .ecz-list{ margin:0; padding-left:1.15rem; display:grid; gap:10px; color:#374151; line-height:1.6; }

    .ecz-note{
      border: 1px solid rgba(0,0,0,.08);
      background: rgba(12,145,84,.05);
      border-radius: 14px;
      padding: 14px 16px;
      color:#374151;
      line-height: 1.65;
      margin-top: 12px;
    }