html {
    overflow-x: hidden;
}

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

body {
    font-family: 'Roboto', sans-serif;
}

/* ================= HEADER ================= */

.top-header {
  display: flex;
  justify-content: space-between;
    padding: 20px 60px;
    position: sticky;
    top: 0;
    z-index: 9999;
    background-color: #fff;
    width: 100%;

}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo img {
    height: 55px;
    object-fit: contain;
}

.download {
    display: flex;
    align-items: center;
    gap: 20px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    background-color: #000;
    border-radius: 46px;
    padding: 10px;
    text-transform: uppercase;
}


.circle-icon {
    width: 30px;
    height: 30px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ================= HERO ================= */
span.hero-text {
    font-size: 48px;
}

.hero {
    width: 100%;
    height: auto;
    background: url('images/cover.webp') no-repeat center center/cover;
    display: flex;
    align-items: center;
    padding: 20% 8% 5%;
    position: relative;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
}

.hero-content {
    position: relative;
    z-index: 2;
    color: #ffffff;
    max-width: 700px;
}

.hero-content h1 {
    font-size: 50px;
    font-weight: 300;
    line-height: 1.1;
    margin-bottom: 30px;
}

.hero-content p {
    font-size: 24px;
    font-weight: 400;
}

.mobile-country-section {
    display: none;
}

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

@media (max-width: 768px) {
  .map-scroll-wrapper {
    display: none;
}
    .top-header {
        padding: 15px 20px;
    }

    .hero {
        padding-left: 5%;
        height: 70vh;
        align-items: end;
    }

    .hero-content h1 {
        font-size: 38px;
        margin-bottom: 16px;
    }

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

    .map-wrapper {
        display: none;
    }

    .mobile-country-section {
        display: block;
        padding: 60px 20px 40px;
        background-image: url('images/worldmap.svg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .mobile-country-container {
        max-width: 520px;
        margin: 0 auto;
    }

    .mobile-country-title {
        font-size: 26px;
        font-weight: 500;
        line-height: 1.15;
        margin-bottom: 14px;
    }

    .mobile-country-subtitle {
    font-size: 18px;
    line-height: 1.4;
    margin-bottom: 15px;
    max-width: 360px;
    color: #2A275E;
    font-weight: 400;
    text-align: center;
}

.mobile-country-title {
    font-size: 24px;
    line-height: 1.5;
    color: #2A275E;
    font-weight: 600;
    padding-bottom: 8px;
    margin: 0;
    text-align: center;

}

.mobile-country-section .map-mini {
    font-size: 20px;
    line-height: 1.5;
    color: #2A275E;
    font-weight: 500;
    padding-bottom: 8px;
    margin: 0;
}

.mobile-country-section .map-mini-color {
    color: #2A275E;
}

.mobile-country-section .highlight-number {
    color: #3C6731;
    font-size: 24px;
    font-weight: 600;
    /*background-color: #F6E19E;  Exact yellow/beige from image */
    border-radius: 8px;
    text-align: center;
}

.mobile-country-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

    .mobile-country-item {
        border: 0;
    }

    .mobile-country-summary {
        list-style: none;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        background: #fff;
        border-radius: 999px;
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
        cursor: pointer;
        user-select: none;
    }

    .mobile-country-summary::-webkit-details-marker {
        display: none;
    }
    
    .mobile-country-summary::marker {
        content: "";
    }

    .mobile-country-name {
        font-size: 16px;
        font-weight: 500;
        color: #333;
    }

    .mobile-country-arrow {
        margin-left: auto;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: #77ADD1;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }

    .mobile-country-item[open] .mobile-country-arrow {
        transform: rotate(45deg);
    }

    .mobile-country-links {
        height: 0;
        opacity: 0;
        transform: translateY(-6px);
        margin-top: 0;
        background: #fff;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
        transition: height 650ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 450ms ease, transform 650ms cubic-bezier(0.22, 0.61, 0.36, 1), margin-top 650ms cubic-bezier(0.22, 0.61, 0.36, 1);
        will-change: height, transform;
    }

    details.mobile-country-item[open] > .mobile-country-links {
        height: auto;
        opacity: 1;
        margin-top: 12px;
        transform: translateY(0);
    }

    .mobile-country-links-inner {
        overflow: hidden;
    }

    .mobile-country-link {
        text-decoration: none;
        color: #222;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 14px 16px;
        border-bottom: 1px solid #f0f0f0;
    }

    .mobile-country-link:last-child {
        border-bottom: 0;
    }

    .mobile-country-link-text {
        font-size: 15px;
        line-height: 1.35;
        font-weight: 500;
    }

    .mobile-country-link-icon {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        flex-shrink: 0;
    }

    .mobile-link-exposure .mobile-country-link-icon {
        background: #315A33;
    }

    .mobile-link-access .mobile-country-link-icon {
        background: #A7C4E6;
        color: #fff;
    }

    .mobile-link-working .mobile-country-link-icon {
        background: #1D8ED1;
    }

    .mobile-link-relations .mobile-country-link-icon {
        background: #9B5B3E;
    }

    .mobile-country-link:active {
        opacity: 0.8;
    }
    
}
.map-scroll-wrapper {
    position: relative;
    min-height: 250vh;
}

.map-wrapper {
    position: sticky;
    top: 70px;
    width: 100%;
    min-height: calc(100vh - 70px);
    margin: auto;
    margin-top: 0;
}

svg.map-width {
    height: 90vh;
}

svg {
    width: 100%;
    height: auto;
}

.country {
    fill: #c4c4c4;
    stroke: #ffffff;
    stroke-width: 1;
    transition: fill 0.3s ease;
    cursor: pointer;
}

.country:hover {
    fill: #1e88e5;
}

/* Tooltip */
#map-tooltip {
  position: absolute;
  background: #fff;
  color: #333;
  padding: 15px 20px;
  border-radius: 25px;
  width: 480px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
  font-family: 'Roboto', sans-serif;
  opacity: 0;
  pointer-events: auto;
  /* Smoothly transition position and opacity */
  transition: opacity 0.3s ease, 
              visibility 0.3s ease, 
              left 0.1s ease-out, 
              top 0.1s ease-out;
  z-index: 999;
  visibility: hidden;
  /* Invisible "bridge" helps cursor enter tooltip */
  border: 12px solid transparent;
  margin: -12px;
}

#map-tooltip.visible {
  opacity: 1;
  visibility: visible;
}

.tooltip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  border-bottom: 2px solid #f5f5f5;
  padding-bottom: 8px;
}

.tooltip-title-main {
  font-size: 20px;
  font-weight: 700;
  color: #333;
}

.tooltip-title-sub {
  font-size: 12px;
  font-weight: 400;
  color: #777;
  margin-left: 4px;
}

.tooltip-total-count {
  font-size: 20px;
  font-weight: 700;
  color: #333;
}

.tooltip-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #f8f8f8;
  text-decoration: none;
  transition: all 0.2s ease;
}

.tooltip-row:hover {
  background-color: #fcfcfc;
  padding-left: 5px;
}

.tooltip-row:last-child {
  border-bottom: none;
}

.tooltip-row-text {
  font-size: 14px;
  color: #444;
  font-weight: 500;
}

.tooltip-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.tooltip-icon svg {
  width: 18px;
  height: 18px;
}

/* Category Colors */
.icon-exposure { background-color: #305227; }
.icon-access { background-color: #F4BD3E; }
.icon-working { background-color: #2790CE; }
.icon-relations { background-color: #B94422; }

.city {
    cursor: pointer;
}
/* Right Text */
.map-content {
  width: 30%;
  max-width: 400px;
  position: absolute;
  right: 100px;
  top: 0px;
}

.map-anim-container {
  transform: translateY(0);
  will-change: transform;
}

.map-roll-item {
    opacity: 1;
    transform: none;
}

.map-anim-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.map-anim-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.map-description {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    line-height: 1.4;
    color: #000;
    font-weight: 500;
    margin-bottom: 15px;
    text-align: center;
}

.map-highlight {
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    line-height: 1.5;
    color: #2A275E;
    font-weight: 500;
    padding-bottom: 8px;
    margin: 0;
    text-align: center;
}

p.map-mini {
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    line-height: 1.5;
    color: #242256;
    font-weight: 400;
    padding-top: 8px;
    padding-bottom: 8px;
    margin: 0;
    text-align: center;
}

p.map-mini.map-roll-item.map-mini-color {
  color: #2A275E;
  font-size: 22px;
  font-weight: 400;
}
.highlight-number {
    color: #3C6731;
    font-size: 24px;
    font-weight: 600;
    /*background-color: #F6E19E;  Exact yellow/beige from image */
    
}

.map-mini-dark {
    color: #242256;
}

.dashboard-section {
  padding: 100px 60px;
  width: 100%;
  height: 100vh; 
  background-image: url('images/dashboard.webp');
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top center;
}

.dashboard-container {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.dashboard-heading {
  font-family: 'Roboto', sans-serif;
  font-size: 35px;
  font-weight: 700;
  margin-top: -36px;
  color: #111;
}

@media (max-width: 992px) {

  .dashboard-heading {
    font-size: 30px;
  }

  
  .dashboard-section {
    width: 100%;
    height: 38vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
}

}


.dashboard-video-wrapper {
  width: 100%;
  overflow: hidden;    
  line-height: 0;
  margin: 0;
  padding: 0;
}

.dashboard-video {
  width: 100%;
  height: auto;
  display: block;

}

.dashboard-image {
  width: 100%;
  height: 85vh; 
  background-image: url('images/frame.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
@media (max-width: 992px) {
  .dashboard-image {
    height: 25vh;
    background-size: cover;
  }
}

.quick-links-section {
    width: 90%;
    margin: 60px auto;
    padding: 0 20px;
    display: flex;
    gap: 20px;
}

.quick-link-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: #2D2A6C;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    font-family: 'Roboto', sans-serif;
    gap: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quick-link-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
}

.quick-link-text {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    line-height: 1.4;
}

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

.quick-link-icon svg {
    width: 40px;
    height: 40px;
}

.quick-link-icon-red {
    background-color: #B94422;
}

.quick-link-icon-blue {
    background-color: #A9D3EB;
}

.quick-link-icon-gray {
    background-color: #F4BD3E;
}

.quick-link-icon-green {
    background-color: #B1C2AD;
}

@media (max-width: 768px) {
    .quick-links-section {
        margin: 30px auto 80px;
        width: 95%;
        display: grid;
        grid-template-columns: 1fr;
    }
    
    .quick-link-item {
        padding: 18px 20px;
    }
    
    .quick-link-text {
        font-size: 17px;
    }
    
    .quick-link-icon {
        width: 50px;
        height: 50px;
    }
    
    .quick-link-icon svg {
        width: 40px;
        height: 40px;
    }
}

.theme-wrapper{
  display: flex;
  gap: 30px;
  justify-content: start;
  flex-wrap: wrap;
  width: 90%;
  margin: auto;
  padding-top: 55px;
}

.wrapper-main {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 50px;
}

/* ---------------- CARD 1 ---------------- */

.card-one {
  position: relative;
  width: 320px;
  background: #fff;
  border-radius: 25px;
  padding: 30px 25px;
  text-decoration: none;
  color: #111;
  box-shadow: 0px 0px 13px 0px #f2efef;
  transition: 0.3s ease;
}

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

.arrow-one {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: #9c5b42;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
}

.image-one {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.image-one img {
  max-width: 100%;
  max-height: 100%;
}

.title-one {
  font-size: 22px;
  line-height: 1.4;
}

/* ---------------- CARD 2 ---------------- */

.card-two {
  position: relative;
  width: 320px;
  background: #fff;
  border-radius: 25px;
  padding: 30px 25px;
  text-decoration: none;
  color: #111;
  box-shadow: 0px 0px 13px 0px #f2efef;
  transition: 0.3s ease;
}

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

.arrow-two {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: #2790CE;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
}

.image-two {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.image-two img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 50%;
}

.title-two {
  font-size: 22px;
  line-height: 1.4;
}

/* ---------------- CARD 3 ---------------- */

.card-three {
  position: relative;
  width: 320px;
  background: #fff;
  border-radius: 25px;
  padding: 30px 25px;
  text-decoration: none;
  color: #111;
  box-shadow: 0px 0px 13px 0px #f2efef;
  transition: 0.3s ease;
}

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

.arrow-three {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: #B6C4DF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
}

.image-three {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.image-three img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 40% 40% 50% 50%;
}

.title-three {
  font-size: 22px;
  line-height: 1.4;
}

/* ---------------- CARD 4 ---------------- */

.card-four {
  position: relative;
  width: 320px;
  background: #fff;
  border-radius: 25px;
  padding: 30px 25px;
  text-decoration: none;
  color: #111;
  box-shadow: 0px 0px 13px 0px #f2efef;
  transition: 0.3s ease;
}

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

.arrow-four {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: #305227;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
}

.image-four {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.image-four img {
  max-width: 100%;
  max-height: 100%;
}

.title-four {
  font-size: 22px;
  line-height: 1.4;
}

.site-footer {
  width: 100%;
  background-color: #231f61;
  color: #ffffff;
  text-align: center;
  padding: 12px 0;
  font-size: 14px;
}

.exposure-dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #000000;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
}
.dropdown-arrow {
  transition: transform 0.2s ease;
  display: inline-block;
}
.dropdown-toggle[aria-expanded="true"] .dropdown-arrow {
  transform: rotate(180deg);
}
.dropdown-icon {
  width: 30px;
  height: 30px;
  background: #ffffff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dropdown-icon svg {
  transition: transform 0.2s ease;
}
.dropdown-toggle[aria-expanded="true"] .dropdown-icon svg {
  transform: rotate(180deg);
}
.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 8px;
  min-width: 220px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  list-style: none;
  padding: 8px;
  margin: 0;
  display: none;
  z-index: 1000;
}
.dropdown-toggle[aria-expanded="true"] ~ .dropdown-menu {
  display: block;
}
.dropdown-menu li a {
  display: block;
  padding: 10px 12px;
  color: #111;
  text-decoration: none;
  font-size: 16px;
  border-bottom: 1px solid #e4e4e4;
}
.dropdown-menu li a:hover {
  background: #f2f2f8;
}
.dropdown-menu li:last-child a {
  border-bottom: none;
}


.exposure-section {
  display: flex;
  height: 75vh;
  width: 100%;
  background: url("images/green-grid.webp") center center / cover no-repeat;
}

.exposure-content {
  display: flex;
  width: 100%;
}

/* LEFT SIDE WITH YOUR TEXTURE */
.exposure-left {
  width: 70%;
  padding: 80px 80px;
  color: #ffffff;
  position: relative;
  
}

/* Small Heading Row */
.exposure-small-title {
  display: flex;
  align-items: center;
  margin-bottom: 35px;
}

.exposure-line {
  width: 4px;
  height: 55px;
  background: #ffffff;
  margin-right: 10px;
}

.exposure-small-title p {
  font-size: 40px;
  font-weight: 300;
  opacity: 0.95;
}

/* Main Big Title */
.exposure-main-title {
  font-size: 50px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: 1.5px;
  color: #ffffff;
}


/* RIGHT IMAGE SIDE */
.exposure-right {
  width: 56%;
  position: relative;
  overflow: hidden;
}

.exposure-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dropdown Button */
.exposure-dropdown {
  position: absolute;
  top: 40px;
  right: 40px;
  background: #fff;
  padding: 14px 18px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.dropdown-arrow {
  font-size: 18px;
}
ul.exposure-main-list{
    padding-top: 10px;
    margin-left: 15px;
}
ul.exposure-main-list li{
    padding: 6px 0;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.3em;
}
.reveal-item {
        opacity: 0;
        transform: translateY(24px);
        animation: reveal-up 0.7s ease-out forwards;
      }

      .exposure-left h1.reveal-item { animation-delay: 0.2s; }
      .exposure-left p.reveal-item { animation-delay: 0.5s; }
      .exposure-left li.reveal-item:nth-child(1) { animation-delay: 0.8s; }
      .exposure-left li.reveal-item:nth-child(2) { animation-delay: 1.1s; }
      .exposure-left li.reveal-item:nth-child(3) { animation-delay: 1.4s; }
      .exposure-left li.reveal-item:nth-child(4) { animation-delay: 1.7s; }

      @keyframes reveal-up {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @media (max-width: 768px) {
      .hero-svg {
        width: 100%;
        height: 75%;
        display: block;
        margin-top: 102px;
      }
    }
.weather-impact-section {
  position: relative;
  padding: 100px 80px;
  color: #ffffff;
}

.sector-filter {
  position: absolute;
  top: 153px;
    right: 93px;
}

.sector-select-native{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.sector-filter .sector-dropdown{
  position:relative;
}

.sector-filter .ewc-dropdown-menu{
  top: calc(100% + 8px);
  right: 0;
}


.sector-filter select {
  padding: 12px 40px 12px 24px; /* Increased right padding to make room for the arrow */
  border-radius: 40px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  
  /* Hide the default browser arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Add custom arrow */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  
  /* Adjust the '20px' value below to move the arrow further left or right */
  background-position: right 20px center; 
  background-size: 16px;
  background-color: white; /* Ensure there is a background color */
}

/* For IE (just in case) */
.sector-filter select::-ms-expand {
  display: none;
}

.weather-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 120px;
  align-content: center;
}

.weather-text {
  width: 50%;
  padding-bottom: 285px;
}

.weather-text h2 {
  font-size: 38px;
  font-weight: 500;
  margin-bottom: 30px;
  text-transform: lowercase;
}

.weather-text::first-letter, .weather-text h2::first-letter {
  text-transform: capitalize;
}

.weather-text p {
  font-size: 18px;
  line-height: 1.6;
  width: 70%;
}

.weather-chart-wrapper {
  position: relative;
  width: 362px;
    height: 357px;
}

/* Stat Cards */
.stat-card {
  position: absolute;
  background: #f1f1f1;
  color: #305227;
  padding: 25px 35px;
  border-radius: 20px;
  width: 100%;
}

.stat-card h2 {
  margin: 0;
  font-size: 40px;
  font-weight: 500;
}

.stat-card p {
  margin: 5px 0 0;
  font-size: 16px;
  color: #333;
}

.impacted {
  bottom: 30px;
    right: 260px;
}

.not-impacted {
  top: 103px;
    left: 225px;
}


.wrapper{
    width:90%;
    margin:60px auto;
}

/* Chart container */
.chart{
    margin-top:60px;
    position:relative;
}

/* ✅ ONE continuous vertical line */
.chart::before{
    content:"";
    position:absolute;
    left:30%; /* same as label width */
    top:0;
    bottom:0;
    width:1px;
    background:#000000;
}

/* Each row */
.row{
    display:flex;
    align-items:center;
    margin-bottom:10px;
}

/* Label outside */
.label{
    width:30%;
    font-size:16px;
    text-transform: lowercase;
}
.label::first-letter{
  text-transform: capitalize;
}

/* Bar section */
.bar-section{
    flex:1;
}

/* Bar + value */
.bar-area{
    display:flex;
    align-items:center;
}

.bar{
    height:36px;
    background:#B1C2AD;
    transition:0.3s ease;
}

/* White stripes on hover */
.row:hover .bar{
    background:
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,0.7),
            rgba(255,255,255,0.7) 1px,
            transparent 2px,
            transparent 10px
        ),
        #305227;
}

.value{
    margin-left:0px;
    font-size:32px;
    color:#e8ecef;
    transition:0.3s ease;
}

.row:hover .value{
    color:#305227;
}

/*.value.highlight{
    color:#305227;
    font-size:38px;
}*/

/* ✅ Bottom line aligned with vertical line */
.chart::after{
    content:"";
    display:block;
    margin-left:30%;
    border-bottom:2px solid #000000;
    margin-top:30px;
}

/* ===== Wrapper Header (matches shared image) ===== */
.top-section{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}


.top-section > div:first-child{
    width:85%;
}
.top-section h1{
    font-size:38px;
    font-weight:500;
    color:#111;
    line-height:1.25;
    margin-bottom:16px;
    text-transform: lowercase;
}
.top-section h1::first-letter{
  text-transform: capitalize;
}
.description{
    font-size:18px;
    line-height:1.7;
}
.dropdown{
    background:#f2f2f2;
    color:#111;
    padding:12px 20px;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:10px;
    white-space:nowrap;
}

/* ===== Interactive dropdown for events filter ===== */
.events-dropdown{
  position:relative;
}
.events-toggle{
  background:#F5F7F4;
  color:#111;
  border:none;
  border-radius:9999px;
  padding:12px 24px;
  font-size:14px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}
.events-toggle .chev{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s ease;
}
.events-toggle[aria-expanded="true"] .chev{
  transform:rotate(180deg);
}
.events-menu{
  position:absolute;
  left:8px;
  top:calc(100% + 8px);
  min-width:160px;
  background:#fff;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,0.15);
  padding:8px;
  margin:0;
  list-style:none;
  display:none;
  z-index:1000;
}
.events-toggle[aria-expanded="true"] ~ .events-menu{
  display:block;
}
.events-menu li button{
  display:block;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  padding:10px 12px;
  font-size:13px;
  cursor:pointer;
  color:#111;
}
.events-menu li button:hover{
  background:#f2f2f8;
}


.ewc-container{
  background:#305227;
  padding:60px 5%;
  color:#eaf4f9;
  border-top: 1px solid;
}

/* Themed override for the last (External Support) section */
.ewc-container.ewc-support{
  background:#305227;
}
.ewc-container.ewc-support .ewc-title{
  color:#fff;
  text-transform: lowercase;
}
.ewc-container.ewc-support .ewc-title::first-letter{
  text-transform: capitalize;
}
.ewc-container.ewc-support .ewc-intro{
  color:#fff;
}

.ewc-container.ewc-support-final{
  background:#fff;
}
.ewc-container.ewc-support-final .ewc-title{
  color:#000000;
}
.ewc-container.ewc-support-final .ewc-intro{
  color:#000000;
}

/* Last section (external support final): black axes and value color */
.ewc-container.ewc-support-final .ewc-chart-wrapper{
  border-left:1px solid #000 !important;
}
.ewc-container.ewc-support-final .ewc-chart{
  border-bottom:1px solid #000 !important;
}

#esc2-chart .ewc-value{
  color: rgb(0 0 0 / 5%);
  top: -55px;
}
#esc2-chart .ewc-bar-item:hover .ewc-value{
  color:#305227;
}
#esc2-labels .ewc-label{
  color:#000000;
  font-weight: 500;
}
#esc3-chart .ewc-value{
  color: rgb(0 0 0 / 5%);
  top: -55px;
}
#esc3-chart .ewc-bar-item:hover .ewc-value{
  color:#305227;
}
#esc3-labels .ewc-label{
  color:#000000;
  font-weight: 500;
}

.ewc-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

.ewc-title{
  font-size:36px;
  font-weight:500;
  max-width:80%;
  margin:0;
  text-transform: lowercase;
}
.ewc-title::first-letter{
  text-transform: capitalize;
}



.ewc-dropdown{
  position:relative;
}

.ewc-dropdown-btn{
  background:#fff;
  border:none;
  padding:12px 18px 12px 20px;
  border-radius:30px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.ewc-chevron svg{ transition:transform .2s ease; }
.ewc-dropdown-btn[aria-expanded="true"] .ewc-chevron svg{ transform:rotate(180deg); }

.ewc-dropdown-menu{
  position:absolute;
  right:0;
  top:50px;
  background:white;
  color:#333;
  border-radius:8px;
  min-width:150px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  display:none;
  overflow:hidden;
  z-index:99;
}

.ewc-dropdown-menu div{
  padding:10px 14px;
  cursor:pointer;
  font-size: 13px;
  font-weight: 500;
}

.ewc-dropdown-menu div:hover{
  background:#f2f2f2;
}

/* Chart */
.ewc-chart-wrapper{
  margin-top:70px;
}

.ewc-chart{
  display:flex;
  align-items:flex-end;
  gap:18px;
  height:300px;
  border-bottom:1px solid rgb(255, 255, 255);
  border-left:1px solid rgb(255, 255, 255);
}

.ewc-bar-item{
  flex:1;
  position:relative;
}

.ewc-value{
  position:absolute;
  top:-45px;
  left:50%;
  transform:translateX(-50%);
  font-size:40px;
  transition:0.3s;
  color:rgba(255,255,255,0.05);
}

.ewc-bar{
  width:100%;
  background:#B1C2AD;
  position:relative;
  cursor:pointer;
}

.ewc-bar::after{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    45deg,
    #305227 0px,
    #305227 2px,
    transparent 2px,
    transparent 8px
  ) #ffffff;
  opacity:0;
  transition:0.3s;
}
#esc2-chart .ewc-bar::after{
        background: repeating-linear-gradient(
          45deg,
          #fff 0px,
          #fff 1px,
          transparent 2px,
          transparent 8px
        ) #305227;
      }
      #esc3-chart .ewc-bar::after{
        background: repeating-linear-gradient(
          45deg,
          #fff 0px,
          #fff 1px,
          transparent 2px,
          transparent 8px
        ) #305227;
      }
.ewc-bar-item:hover .ewc-bar::after{
  opacity:1;
}

.ewc-bar-item:hover .ewc-value{
  color:#ffffff;
}

.ewc-labels{
  display:flex;
  gap:18px;
  margin-top:15px;
}

.ewc-label{
  flex:1;
  font-size:13px;
  text-align:center;
  line-height:1.4;
}

.ewc-intro{
  margin:20px 0 6px 0;
  color:#ffffff;
  line-height:1.4;
  font-size:18px;
}
#hhc-chart .row:hover .bar{
            background:
        repeating-linear-gradient(
            45deg,
            #305227,
            #305227 1px,
            transparent 2px,
            transparent 10px
        ),
        #ffffff;
}
/* Household chart first value color behavior */
#hhc-chart .value{
  color:rgb(255 255 255 / 5%);
}
#hhc-chart .row:hover .value{
  color:#ffffff;
}
/* Make hhc-chart axis lines white only */
#hhc-chart.chart::before{
  background:#ffffff !important;
}
#hhc-chart.chart::after{
  border-bottom:2px solid #ffffff !important;
}

/* ===== External Support chart visual styling (match reference) ===== */
#esc-chart .ewc-bar{
  background:#9cc6e3;
  position:relative;
}
#esc-chart .ewc-bar::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.9) 0px,
      rgba(255,255,255,0.9) 2px,
      transparent 2px,
      transparent 8px
    );
  opacity:0;
  pointer-events:none;
}
#esc-chart .ewc-bar-item:first-child .ewc-bar::after{
  opacity:1;
}
#esc-chart .ewc-value{
  color:rgba(43,125,181,0.35);
}
#esc-chart .ewc-bar-item:first-child .ewc-value{
  color:#2b7db5;
  font-size:48px;
}
#esc-chart + #esc-labels .ewc-label{
  color:#cfe2ee;
}
/* Dropdown pill (within its container) */
.ewc-container .ewc-dropdown-btn{
  background:#F5F7F4;
  font-weight:700;
}

.coping-section{
  height: 60vh;
  background: url(images/coping-green-bg.webp) center center / cover no-repeat;
}
h2.exposure-main-title.coping-section {
    font-size: 70px;
}
.exposure-description{
  font-size: 22px;
  line-height: 1.3;
  color: #305227;   
}
h2.exposure-main-title.coping-section-text {
    font-size: 45px;
    color: #305227;
    padding-bottom: 10px;
}

p.exposure-main-description {
  font-size: 20px;
  padding-top: 20px;
  line-height: 1.5em;
}

@media screen and (max-width: 480px) {

  .top-header {
    padding: 15px 14px;
}
.download {
  gap: 8px;
  padding: 6px;
  font-size: 11px;
}
.circle-icon {
  width: 25px;
  height: 25px;
}
.exposure-left {
  width: 100%;
  padding: 38px 32px;
}
.exposure-line {
    width: 2px;
    height: 40px;
 }
 .exposure-main-title {
  font-size: 35px;
 }
 .exposure-right {
  width: 100%;
 }
.exposure-small-title p {
  font-size: 28px;
}
.weather-text {
  width: 100%;
  padding-bottom: 0;
}
.weather-impact-section {
  position: relative;
  padding: 30px 28px;
}
.weather-text p {
  width: 100%;
}
  .exposure-section {
    height: 65vh;
    flex-direction: column;
  }
  section.exposure-section.bg2 {
    height: 100vh;
    flex-direction: column;
  }
  .weather-text h2 {
    font-size: 32px;
  }
  .weather-content{
    gap: 85px;
  }
  .sector-filter {
    position: absolute;
    bottom: 46%;
    right: 35px;
    top: 32%;
}
.not-impacted {
  top: -13px;
  left: 22px;
}
.impacted {
  bottom: -10px;
  right: 5px;
}
.stat-card {
  position: absolute;
  background: #f1f1f1;
  color: #305227;
  padding: 12px 21px;
  border-radius: 20px;
  width: 100%;
}
.top-section {
  flex-direction: column;
}
.top-section h1 {
  font-size: 30px;
}
.label {
  width: 30%;
  font-size: 12px;
}
.chart::before {
  left: 30%;
}

.ewc-label {
  font-size: 9px;
}
.ewc-labels {
  gap: 2px;
  margin-top: 8px;
}
.ewc-intro {
  line-height: 1.6;
    font-size: 14px;
}
h2.exposure-main-title.coping-section-text {
  font-size: 50px;
}
.exposure-description {
  font-size: 25px;
}
.events-dropdown {
  padding-top: 256px;
  margin-left: 208px;
  margin-bottom: -296px;
}
.events-menu {
  min-width: 175px;
  left: 0px;
}
.ewc-title {
  font-size: 30px;
  max-width: 100%;
}
.ewc-header{
  flex-direction: column;
}
.ewc-dropdown {
  padding-top: 140px;
  margin-bottom: -183px;
  margin-left: 218px;
}
.ewc-dropdown-menu {
  right: 7px;
  top: 192px;
}

.ewc-value {
  top: -30px !important;
  left: 70%;
  font-size: 24px !important;
}
.ewc-dropdown.\32 {
  padding-top: 180px;
  margin-bottom: -222px;
}
.ewc-dropdown.\33 {
  padding-top: 226px;
  margin-bottom: -272px;
}
}


/* ===== TABS ===== */
.age-chart-tabs-nav{background:#f4f7f9;}
.age-chart-tabs-container{display:flex;}
.age-chart-tab-item{flex:1;padding:20px;text-align:center;cursor:pointer;}
.age-chart-tab-item.age-chart-active{
  background:#2D2A6C;color:#fff;border-radius:28px 28px 0 0;position:relative;
}
.age-chart-tab-item.age-chart-active::before{
  content:"";position:absolute;left:-20px;bottom:0;width:20px;height:20px;
  border-bottom-right-radius:20px;box-shadow:6px 6px 0 6px #2D2A6C;
}
.age-chart-tab-item.age-chart-active::after{
  content:"";position:absolute;right:-20px;bottom:0;width:20px;height:20px;
  border-bottom-left-radius:20px;box-shadow:-6px 6px 0 6px #2D2A6C;
}

/* ===== CONTENT ===== */
.age-chart-content{background:#2D2A6C;color:#fff;padding:40px 80px;overflow: visible; /* Allow arrows to go outside */}
.age-chart-header{display:flex;justify-content:space-between;margin-bottom:10px;align-items: center;}
.age-chart-main-title{font-size: 24px; font-weight: 600; color: white; margin:0;}
.age-chart-dropdown-container{display:flex; gap:20px; align-items:center;}

.age-chart-content select{
  padding:10px 15px;
  border-radius:20px;
  border:none;
  margin-left:10px;
}

/* ===== LAYOUT ===== */
.age-chart-main{
  display:flex;
  flex-direction: column;
  gap:40px;
  align-items: center;
}
.age-chart-left{width:100%;}
.age-chart-right{width:100%;color:#ffffff;padding:20px 20px 20px 20px;border-radius:10px;overflow: visible; /* Allow arrows to go outside */}

/* ===== LEGEND ===== */
.age-chart-legend{
  display:flex;
  gap:15px;
  margin-bottom:70px;
  font-size:12px;
  align-items:center;
    justify-content: flex-start;
    margin-left: 130px;
}
.age-chart-legend.age-chart-legend-4x2-tight{
  display:grid;
  grid-template-columns: repeat(4, max-content);
  column-gap: 16px;
  row-gap: 10px;
  width: fit-content;
  max-width: 100%;
  justify-content: start;
  margin-left: 130px;
}
.age-chart-legend.age-chart-legend-4x2-tight div{
  min-width: 0;
}
.age-chart-legend.age-chart-legend-4x2-tight span{
  flex: 0 0 auto;
}
.age-chart-legend.age-chart-legend-education{
  display:flex;
  flex-direction: column;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  justify-content: flex-start;
  align-items: flex-start;
      margin-left: 130px;
}
.age-chart-legend.age-chart-legend-education .age-chart-legend-row{
  display:flex;
  gap: 18px;
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.age-chart-legend.age-chart-legend-education .age-chart-legend-row div{
  min-width: 0;
}
.age-chart-legend.age-chart-legend-education span{
  flex: 0 0 auto;
}
.age-chart-legend.age-chart-legend-migration{
  margin-left: 130px;
}
.age-chart-legend div{
  display:flex;
  align-items:center;
  gap:5px;
}
.age-chart-legend span{
  width:35px;
  height:15px;
  display:inline-block;
}

/* ===== GRAPH ===== */
.age-chart-axis-wrap{display:flex;width:100%;overflow: visible;box-sizing: border-box;}
.age-chart-axis-labels{font-size:12px;}
.tab-education .age-chart-axis-labels{width:235px;}

/*  ROW SYSTEM (FIX) */
.age-chart-row{
  height:32px;
  display:flex;
  align-items:center;
  margin-bottom:12px;
  width: 100%;
}

/* LABELS */
.age-chart-axis-labels div{
  height:32px;
  display:flex;
  align-items:center;
    justify-content: flex-end;
    padding-right: 10px;
    text-align: end;
}

/* CHART AREA */
.age-chart-axis-chart{
  flex:1;
  position:relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: visible; /* Allow arrows to go outside */
}

/* GRID LINES */
.age-chart-grid-line {
  position: absolute;
  top: -30px;
  bottom: 8px;
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

/* AXIS */
.age-chart-axis-y{
  position:absolute;
  left:0;
  top: -30px;
  bottom: 9px;
  width:2px;
  background:#999;
  z-index: 10;
}
.age-chart-axis-y::before{
  content:"";
  position:absolute;
  top:-5px;
  left:-4px;
  width:10px;
  height:10px;
  background:#ffffff;
  border-radius:50%;
}

.age-chart-axis-x{
  position:absolute;
  left:0;
  bottom: 8px;
  width: 100%;
  height:2px;
  background:#999;
  z-index: 10;
}
.age-chart-axis-x::after{
  content:"";
  position:absolute;
  right:-5px;
  bottom:-4px;
  width:10px;
  height:10px;
  background:#ffffff;
  border-radius:50%;
}

/* BARS */
.age-chart-bar{
  height:32px;
  display:flex;
  position: relative;
  width: 100%;
  align-items: stretch;
  overflow: visible; /* Don't clip the arrows */
}

.age-chart-bar div{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: var(--age-chart-seg-font, 30px);
  color: #FFFFFF;
  height: 100%;
}

/* COLORS */
.age-chart-c1{background:#C9462E; color:#FFFFFF;}
.age-chart-c2{background:#E0754A; color:#FFFFFF;}
.age-chart-c3{background:#ED9B76; color:#FFFFFF;}
.age-chart-c4{background:#F8D78B; color:#333333;}
.age-chart-c5{background:#FDEDD1; color:#333333;}

/* Mode B Specific (Single Country View) */
.age-chart-single-mode .age-chart-bar div {
  justify-content: flex-start;
  overflow: visible;
  white-space: nowrap;
}

.age-chart-single-mode .age-chart-percent-text {
  margin-left: 10px;
  color: #FFFFFF;
  font-size: 30px;
  font-weight: 400;
  align-self: center;
  white-space: nowrap;
}

.age-chart-bar div {
  font-size: var(--age-chart-seg-font, 30px);
  color: #FFFFFF;
  font-weight: 400;
  position: relative; /* For positioning potential callouts */
}

.age-chart-tab-item:first-child.age-chart-active{
border-radius:0px 28px 0 0
}
.age-chart-tab-item:last-child.age-chart-active{
border-radius:28px 0 0 0
}
.age-chart-tab-item:first-child.age-chart-active::before {
            display: none;
        }

        .age-chart-tab-item:last-child.age-chart-active::after {
            display: none;
        }

/* ===== DROPDOWNS (EWC Style) ===== */
.age-chart-dropdown-container {
  display: flex;
  gap: 15px;
}

.age-chart-ewc-dropdown {
  position: relative;
}

.age-chart-ewc-dropdown-btn {
  background: #F5F7F4;
  border: none;
  padding: 12px 18px 12px 20px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #111;
  text-transform: uppercase;
}

.age-chart-ewc-chevron svg { 
  transition: transform .2s ease; 
}

.age-chart-ewc-dropdown-btn[aria-expanded="true"] .age-chart-ewc-chevron svg { 
  transform: rotate(180deg); 
}

.age-chart-ewc-dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: white;
  color: #333;
  border-radius: 12px;
  min-width: max-content;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  display: none;
  overflow: hidden;
  z-index: 1000;
  padding: 8px;
}

.age-chart-ewc-dropdown-menu div {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  text-transform: uppercase;
}

.age-chart-ewc-dropdown-menu div:hover {
  background: #f2f2f2;
}

/* Hide original selects but keep them for logic if needed */
.age-chart-native-select {
  display: none;
}

/* ================= DEMOGRAPHICS INTRO ================= */
.age-chart-demographics-intro {
  padding: 60px 80px 60px;
  margin: 0 auto;
}

.age-chart-demographics-title {
  font-size: 40px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #111;
}

.age-chart-demographics-text {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
  color: #111;
}
p#age-chart-descriptionText {
    padding-top: 15px;
    line-height: 1.5em;
}

div#age-chart-breadcrumb {
    font-size: 18px;
}

  .bar-area {
    width: 100%;
  }

  
  .card-four, .card-two, .card-three, .card-one {
    width: 100%;
  }
  .wrapper-main {
    padding: 36px;
  }
  .age-chart-main {
    flex-direction: column;
  }
  .age-chart-left {
    width: 100%;
}
.age-chart-tabs-container {
    overflow: hidden;
}
.age-chart-ewc-dropdown-btn {
  font-size: 12px;
}
.age-chart-header {
      gap: 20px;
}


  .age-chart-right {
    width: 100%;
    padding: 0;
}
.age-chart-axis-wrap{
  padding: 0;
}
/* .age-chart-axis-labels {
    width: 45px;
} */
.age-chart-row{
    height: 45px;
}
.age-chart-axis-labels div{
    height: 45px;
}
.age-chart-bar{
    height: 45px;
}
.age-chart-legend {
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-left: 0px;
}
.age-chart-tab-item:first-child.age-chart-active {
    border-radius: 28px 28px 0 0;
}.age-chart-tab-item:last-child.age-chart-active {
    border-radius: 28px 28px 0 0;
}
.age-chart-tab-item.age-chart-active::after {
  display: none;
}
.age-chart-tab-item.age-chart-active::before {
  display: none;
}
.age-chart-dropdown-container {
  gap: 35px;
}

@media screen and (max-width: 480px) {
  .age-chart-demographics-intro {
    padding: 60px 30px 60px;
  }
  .age-chart-content {
    padding: 40px 50px;
  }
  .age-chart-header {
    align-items: flex-start;
    flex-direction: column;
  }

}


.onboarding-title, .oversight-title {
  text-transform: lowercase;
}
.onboarding-title::first-letter, .oversight-title::first-letter {
  text-transform: capitalize;
}


.violence-discrimination-section {
    padding: 0px 5% 60px;
    background-color: #fff;
    font-family: 'Roboto', sans-serif;
}

.violence-discrimination-description {
    font-size: 16px;
    line-height: 1.6;
    color: #000000;
    margin-bottom: 40px;
}

.violence-quotes-container {
    display: flex;
    gap: 30px;
}

.violence-quote-card {
    flex: 1;
    background-color: #EDF4F9;
    padding: 40px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.violence-quote-icon {
    font-size: 160px;
    color: #A3C9E2;
    line-height: 1;
    margin-top: -74px;
    margin-left: -10px;
    font-family: "Roboto Serif", serif;
    margin-bottom: -70px;
}

.violence-quote-text {
  font-family: "Roboto Serif", serif;
  font-style: italic;
    font-size: 20px;
    line-height: 1.4em;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.violence-quote-author {
    font-size: 14px;
    margin-top: auto;
}

.violence-quote-location {
    font-size: 14px;
    padding-top: 5px;
}

@media (max-width: 768px) {
    .violence-quotes-container {
        flex-direction: column;
    }
}
.oa-challenges-section{
  background:#626D81;
  padding:60px 60px;
      border-top: 1px solid #fff;
}
.oa-challenges-inner{
  max-width: 97%;
  margin: 0 auto;
  color:#fff;
}
.oa-challenges-title{
  font-size: 34px;
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
  text-transform: lowercase;
}
.oa-challenges-title::first-letter {
  text-transform: capitalize;
}

.oa-challenges-intro{
  margin: 14px 0 0;
  font-size: 18px;
  line-height: 1.4;
  color: rgba(255,255,255,0.9);
}
.oa-challenges-grid{
  margin-top: 48px;
  display:flex;
  gap:15px;
  align-items: stretch; 
  margin-bottom: -90px;
}
.oa-quote-card{
  flex: 0.7;
  background:#fff;
  color:#111;
  padding:18px;
  position: relative;
  margin-bottom: 128px;
}
.oa-quote-mark{
  position:absolute;
  top: -35px;
  left: 16px;
  font-size: 160px;
  line-height: 1;
  color: #B6C4DF;
  font-weight: 400;
  font-family: "Roboto Serif", serif;
}
.oa-quote-text{
  margin: 22px 0 0;
  font-size: 20px;
  line-height: 1.4em;
  font-family: "Roboto Serif", serif;
  font-style: italic;
}
.oa-quote-attrib{
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.4;
}
.oa-quote-image{
  flex: 1 1 0;
  min-height: 280px;
  position: relative;
  overflow:hidden;
}
.oa-quote-image img{
  width: 100%;
  height: 70%;
  object-fit: cover;
  object-position: top;
  display:block;
  opacity: 0;
  transition: opacity 180ms ease;
}
.oa-quote-image.is-loaded{
  background: none;
  border-color: transparent;
}
.oa-quote-image.is-loaded img{
  opacity: 1;
}
@media (max-width:900px){
  .oa-challenges-section{
    padding:40px 24px;
  }
  .oa-challenges-grid{
    flex-direction: column;
  }
  .oa-quote-image{
    min-height: 220px;
  }
}

.risks-label{
  text-transform: lowercase;
}
.risks-label::first-letter {
  text-transform: capitalize;
}
.action-label{
  text-transform: lowercase;
}
.action-label::first-letter {
  text-transform: capitalize;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:20px;
}
.report-nav-dropdown{
  position: relative;
}
@media (max-width:768px){
  .report-nav-dropdown{
    display: none;
  }
}

.report-nav-dropdown + .download {
  margin-left: 16px;
}
.report-nav-btn{
  border: 0;
  cursor: pointer;
}
.report-nav-btn .circle-icon svg{
  transition: transform .2s ease;
}
.report-nav-btn[aria-expanded="true"] .circle-icon svg{
  transform: rotate(180deg);
}
.report-nav-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 14px);
  width: max-content;
  max-width: 86vw;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  z-index: 50;
  display: none;
}
.report-nav-menu.is-open{
  display: block;
}
.report-nav-item{
  display: grid;
  grid-template-columns: 1fr 28px;
  align-items: center;
  column-gap: 18px;
  padding: 10px 20px;
  text-decoration: none;
  color: #111;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 500;
  width: 100%;
  text-transform: uppercase;
}
.report-nav-item > span:first-child{
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.report-nav-item + .report-nav-item{
  border-top: 1px solid #f1f1f1;
}
.report-nav-item-disabled{
  color: #777;
  cursor: default;
}
.report-nav-pill{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.report-nav-pill svg{
  width: 20px;
  height: 20px;
}
.report-nav-pill svg path{
  stroke: #fff !important;
}
.report-nav-item:hover .report-nav-pill svg path{
  stroke: #111 !important;
}
.report-nav-pill-home{background:#111;}
.report-nav-item-home:hover .report-nav-pill svg path{
  stroke: #fff !important;
}
.report-nav-pill-1{background:#B94422;}
.report-nav-pill-2{background:#A8D7F1;}
.report-nav-pill-3{background:#A5D7A5;}
.report-nav-pill-4{background:#F4BD3E;}

.wages-supplemented-section .label{
  text-transform: lowercase;
}
.wages-supplemented-section .label::first-letter {
  text-transform: capitalize;
}
.payment-issues-chart-section .label{
  text-transform: lowercase;
}
.payment-issues-chart-section .label::first-letter {
  text-transform: capitalize;
}
.payment-challenges-title{
  text-transform: lowercase;
}
.payment-challenges-title::first-letter {
  text-transform: capitalize;
}
.risks-subjected-title{
  text-transform: lowercase;
}
.risks-subjected-title::first-letter {
  text-transform: capitalize;
}
.control-title{
  text-transform: lowercase;
}
.control-title::first-letter {
  text-transform: capitalize;
}
.occupations-title{
  text-transform: lowercase;
}
.occupations-title::first-letter {
  text-transform: capitalize;
}
.work-duration-title{
  text-transform: lowercase;
}
.work-duration-title::first-letter {
  text-transform: capitalize;
}
.contract-agreements-title{
  text-transform: lowercase;
}
.contract-agreements-title::first-letter {
  text-transform: capitalize;
}
.ratings-title{
  text-transform: lowercase;
}
.ratings-title::first-letter {
  text-transform: capitalize;
}
.onboarding-tag{
  text-transform: lowercase;
}
.onboarding-tag::first-letter {
  text-transform: capitalize;
}
.oversight-tag{
  text-transform: lowercase;
}
.oversight-tag::first-letter {
  text-transform: capitalize;
}
        

.relative { position: relative; }
.absolute { position: absolute; }
.z-10 { z-index: 10; }
.w-full { width: 100%; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
        .gap-8 { gap: 32px; }
        .gap-18 { gap: 18px; }

    .not-received-bar-label{
      text-transform: none;
    }
    .not-received-bar-label::first-letter{
      text-transform: uppercase;
    }
    .contract-stat-card p{
      text-transform: lowercase;
    }
    .contract-stat-card p::first-letter{
      text-transform: uppercase;
    }
    .violations-bar-label{
      text-transform: lowercase;
    }
    .violations-bar-label::first-letter{
      text-transform: uppercase;
    }
    .bar-label{
      text-transform: lowercase;
    }
    .bar-label::first-letter{
      text-transform: uppercase;
    }
    .duration-bar-label{
      text-transform: lowercase;
    }
    .duration-bar-label::first-letter{
      text-transform: uppercase;
    }

    /* my css start 19-6-26 */
    
    .age-chart-bar .age-chart-c1, .age-chart-bar .age-chart-c2, .age-chart-bar .age-chart-c3, .age-chart-bar .age-chart-c4, .age-chart-bar .age-chart-c5, .age-chart-bar .age-chart-c6, .age-chart-bar .age-chart-c7, .age-chart-bar .age-chart-c8{
      font-size: 18px;
    }
    .age-chart-single-mode .age-chart-percent-text {
      font-size: 18px;
    }
    .age-chart-single-mode .age-chart-bar .age-chart-c1, .age-chart-single-mode .age-chart-bar .age-chart-c2, .age-chart-single-mode .age-chart-bar .age-chart-c3, .age-chart-single-mode .age-chart-bar .age-chart-c4, .age-chart-single-mode .age-chart-bar .age-chart-c5{
      background: #F6CA65 !important;
    }
    .age-chart-small-labels{
      font-size: 15px !important;
    }
    

    .sec1 {
      height: 107.6vh !important;
    }
    .sec1 .not-impacted{
      top:-25px !important;
    }
    .sec1 .impacted{
      right: -100px !important;
    }

    .oa-quote-card1{
      background-color: #fff;
      color: #111;
      padding: 25px;
      margin-top: 30px;
    }
    .oa-quote-mark1{
      font-size: 160px;
      line-height: 1;
      color: #B6C4DF;
      font-weight: 400;
      font-family: "Roboto Serif", serif;
      margin-top: -55px;
    }
    .oa-quote-text1{
      margin: 22px 0 0;
      font-size: 20px;
      line-height: 1.4em;
      font-family: "Roboto Serif", serif;
      font-style: italic;
      margin-top: -90px;
      width: 100% !important;
    }
    .oa-quote-attrib1{
      margin: 18px 0 0;
      font-size: 15px !important;
      line-height: 1.4;
    }
    .exposure-description{
      font-size: 18px;
    }

    .mphv:hover{
      cursor: pointer;
    }

.mphv {
    overflow: hidden;
}

.mp-percent,
.mp-label {
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.mp-sub-label {
    max-height: 0;
    opacity: 0;
    font-size: 14px;
    overflow: hidden;
    margin-top: 0;
    transform: translate3d(0, 15px, 0);
    transition:
        max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.4s ease,
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        margin-top 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Smooth upward movement */
.mphv:hover .mp-percent,
.mphv:hover .mp-label {
    transform: translate3d(0, -12px, 0);
}

/* Smooth reveal */
.mphv:hover .mp-sub-label {
    max-height: 50px;
    opacity: 1;
    margin-top: 0px;
    transform: translate3d(0, 0, 0);
}

.mp-bg4 .mp-sub-label, .mp-bg5 .mp-sub-label{
  font-size: 11px;
}

.mp-bg8 .mp-sub-label{
  font-size:9px;
}

.mp-bg9 .mp-sub-label, .mp-bg10 .mp-sub-label{
  font-size:6px;
}

.mp-bg9:hover .mp-sub-label, .mp-bg10:hover .mp-sub-label{
  margin-top: 0;
}

.mp-bg11 .mp-small {
  font-size: 7px !important;
}
.mp-bg11 .mp-sub-label, .mp-bg11 .mp-tiny{
  font-size:3px !important;
}

.mp-bg11:hover .mp-sub-label{
  margin-top: 0;
}

.mphv .ptxt{
  font-size: 18px;
  margin-bottom: 8px;
}

.mpchart-h3-x91 .ptxt{
  font-size: 13px;
}

.mpchart-h3-x91 .mp-sub-label{
  font-size: 10px;
}

.mpchart-small-x91 .ptxt{
  font-size: 8px;
}

.mpchart-small-x91 .mp-sub-label{
  font-size: 6px;
}

.last11{
  flex: 0.4 !important;
}

.last11 h2{
  font-size: 18px !important;
}

.last11 p{
  font-size: 11px !important;
}

.blcl{
  color: #404652 !important;
}


.india-benefits-mid p{
  font-size: 18px !important;
  margin-bottom: 5px;
}
.india-benefits-mid .mp-sub-label{
  font-size: 14px !important;
}

.fs-lighter-a1 p{
  margin-bottom: 8px;
}

.fs-h1-a1 .mp-sub-label, .fs-h2-a1 .mp-sub-label{
  font-size: 14px;
  margin-top: 3px !important;
}

.fs-lighter-a1 .mp-sub-label{
  font-size: 13px;
}

.fs-small-a1 span{
  font-size: 11px;
}

.fs-small-a1 .mp-sub-label{
  margin-top: 3px !important;
  font-size: 11px;
}
.fs-box-a1.fs-lighter-a1.fs-small-a1.ind1{
  flex: 1.5;
}

.fs-lighter-a1 p {

  font-size: 15px !important;
}
.fs-box-a1.fs-lighter-a1.ne.food{
  flex: 1.2;
}
.fs-box-a1.fs-lighter-a1.ne.food .mp-sub-label{
  font-size: 13px !important;
}

.fs-small-a1.mphv strong{
  font-size: 18px !important;
}

.fs-small-a1.mphv span{
  font-size: 11px;
}

.fs-small-a1.mphv .mp-sub-label{
  font-size: 8px !important;
}

.nepal-tree p{
  margin-bottom: 14px;
}

.nepal-tree .mp-sub-label{
  font-size: 11px;
  margin-bottom: 0px;
  padding-top: 10px;
}

.npl1 span{
  font-size: 17px !important;
}
.npl1 p{
  font-size: 11px !important;
}

.npl2 span{
  font-size: 18px !important;
}
.npl2 p{
  font-size: 9px !important;
}
.npl2 .mp-sub-label{
  font-size: 7px !important;
}
.sm1 span{
  font-size: 12px !important;
}
.sm1 p{
  font-size: 9px !important;
}
.f88, .f66{
  min-height: 140px;
}
.f11, .f99{
  min-height: 208px;
}
.f86{
  flex:1.5 !important;
}
.f88{
  flex: 8 !important;
}
.f66{
  flex: 6 !important;
}
.nepal-tree1 p{
  font-weight: 400;
  font-size: 18px;
  margin-bottom: 8px;
}
.nepal-tree1 .mp-sub-label{
  font-size: 13px;
  margin-bottom: 0;
}
.f88 span, .f66 span, .f86 span, .f66 span, .f11 span, .f99 span{
  font-size: 25px !important;
}

.f88 p, .f66 p, .f86 p, .f66 p, .f11 p, .f99 p{
  font-size: 14px !important;
}

.f88 .mp-sub-label, .f66 .mp-sub-label, .f86 .mp-sub-label, .f66 .mp-sub-label, .f11 .mp-sub-label, .f99 .mp-sub-label{
  font-size: 11px !important;
}

.nepal-tree-food1 p{
  font-weight: 400;
  font-size: 18px;
}
.npfood-txt1 p{
  font-size: 15px;
  color: #404652 !important;
}
.npfood-txt1 span{  
  color: #404652 !important;
}
.npfood-txt2{
  min-height: 100px;
}
.npfood-txt2 span{
  font-size: 25px;
}
.npfood-txt2 p{
  font-size: 13px;
}
/* my css end 19-6-26 */
/* my css start 23-6-26 */

.npfood-txt2.h8{
  flex: 4 !important;
}
.npfood-txt2.h23{
  flex: 3 !important;
}
.nepal-tree-rideshare1 p{
  font-weight: 400;
  font-size: 18px;
}
.np-rideshare1 {
  min-height: 100px;
}
.np-rideshare1 span{
  font-size: 25px;
}
.np-rideshare1 p{
  font-size: 13px;
}
.np-rideshare1.box-2-a{
  min-height: 120px;
}
.np-rideshare-txt1 span{
  font-size: 33px;
}
.np-rideshare-txt1 p{
  font-size: 15px;
}
.nepal-homeserv1 p{
  font-weight: 400;
  font-size: 18px;
}
.nepal-homeserv1 {
  min-height: 100px;
}
.nphome-serv2 span{
  font-size: 33px;
}
.nphome-serv2 p{
  font-size: 15px;
}
.nphome-serv1 span{
  font-size: 25px;
}
.nphome-serv1 p{
  font-size: 13px;
}
.nphome-serv1, .nphome-serv2{
  min-height: 120px;
}

.ph-treemap1 p{
  font-weight: 400;
  font-size: 18px;
  margin-bottom: 5px;
}
.ph-treemap1 .mp-sub-label{
  font-size: 15px;
  margin-bottom: 0;
}
.lstfx5{
  flex: 0.4 !important;
  background-color: #EDF0F7;
}
.ph-midtxt1 h2{
  font-size: 40px;
}
.ph-midtxt1 p{
  font-size: 16px;
  margin-bottom: 5px;
}
.ph-midtxt1 .mp-sub-label{
  font-size: 13px !important;
  margin-bottom: 0px;
  padding-top: 3px;
}

.ph-treefool1 p{
  font-weight: 400;
  font-size: 18px;
}
.ph-treefool1 {
  min-height: 100px;
}
.ph-treefool1 .lstfx5 strong{
  font-size: 30px !important;
}

.ph-rideshare1 p{
  font-weight: 400;
  font-size: 18px;
}
.ph-rideshare1 {
  min-height: 100px;
}
.ph-rideshare1 .lstfx5 strong{
  font-size: 30px !important;
}
.ph-homeserv1 p{
  font-weight: 400;
  font-size: 18px;
}
.ph-homeserv1 {
  min-height: 100px;
}
.ph-homeserv1 .lstfx5 strong{
  font-size: 30px !important;
}
.ph-homeserv1 .lstfx5 span{
  font-size: 7px !important;
}

.ph-all-2 p{
  font-weight: 400;
  font-size: 18px;
  margin-bottom: 5px;
}
.ph-all-2 .mp-sub-label{
  font-size: 15px;
  margin-bottom: 0;
}
.lstall33{
   background-color: #EDF0F7;
}
.lstall3 strong{
  font-size: 20px !important;
}
.lstall3 span{
  font-size: 11px !important; 
}
.lstall3 .mp-sub-label{
  font-size: 8px !important; 
}
.ph-all-2 .midtxt1 h2{
  font-size: 35px !important;
}
.ph-all-2 .midtxt1 .mp-sub-label{
  font-size: 12px !important; 
}

.ph-riseserv2 .ride1 strong{
  font-size: 20px !important;
}
.ph-homeserv2 .txtxl strong{
  font-size: 20px !important;
}
.ph-homeserv2 .txtxl span{
  font-size: 12px !important;
}


/* my css end 23-6-26 */

/* ================= WAFFLE CHART (AGE TAB) ================= */
.age-waffle-container {
  display: flex;
  gap: 0;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  overflow: visible;
}
.age-waffle-grid-wrap {
  flex: 1;
  text-align: center;
  padding: 0 20px;
  position: relative;
  overflow: visible;
}
.age-waffle-grid-wrap:not(:last-child) {
  border-right: 2px solid rgba(255,255,255,0.2);
}
.age-waffle-label {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 30px;
}
.age-waffle-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: 3px;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.age-waffle-cell {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  overflow: visible;
  opacity: 0.5;
  filter: saturate(0.6);
}
.age-waffle-cell svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 5px;
}

/* Scale up person icons in the education, age, and migration tabs */
.tab-education .age-waffle-cell svg,
.tab-age .age-waffle-cell svg,
.tab-migration .age-waffle-cell svg {
  transform: scale(1.8);
}

/* Increase vertical gap while keeping horizontal gap perfect */
.tab-education .age-waffle-grid,
.tab-age .age-waffle-grid,
.tab-migration .age-waffle-grid {
  row-gap: 8px;
  column-gap: 8px;
}
@media (max-width: 768px) {
  .tab-education .age-waffle-cell svg,
  .tab-age .age-waffle-cell svg,
  .tab-migration .age-waffle-cell svg {
  transform: scale(5.8);
}
.tab-education .age-waffle-grid,
.tab-age .age-waffle-grid,
.tab-migration .age-waffle-grid {
    row-gap: 11px;
    column-gap: 11px;
}
.age-waffle-label {
  margin-bottom: 54px;
}
}

.age-waffle-cell svg rect {
  width: 100%;
  height: 100%;
}

/* Remove any stroke from food delivery icon only */
.food-delivery-svg,
.food-delivery-svg path {
  stroke-width: 0;
  stroke: none;
  padding: 0;
  margin: 0;
}

/* Ridesharing icon styles */
.ride-sharing-svg,
.ride-sharing-svg path {
  stroke-width: 0;
  stroke: none;
  padding: 0;
  margin: 0;
}

/* Home services icon styles */
.home-services-svg,
.home-services-svg path {
  stroke-width: 0;
  stroke: none;
  padding: 0;
  margin: 0;
}
.age-waffle-cell.age-waffle-dim {
  opacity: 0.25;
  filter: saturate(0.3);
}
.age-waffle-cell.age-waffle-active {
  opacity: 1;
  filter: saturate(1);
}
.age-waffle-cell:hover {
  transform: scale(1.2);
  z-index: 10;
}
.age-waffle-tooltip {
  position: absolute;
  background: #fff;
  color: #2D2A6C;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.15s ease;
  top: -76px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.age-waffle-tooltip-pct {
  position: absolute;
  background: #fff;
  color: #2D2A6C;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.15s ease;
  top: -45px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.age-waffle-tooltip-pct::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}
.age-waffle-cell:hover .age-waffle-tooltip,
.age-waffle-cell:hover .age-waffle-tooltip-pct {
  opacity: 1;
}

.age-waffle-colors-others .age-waffle-tooltip {
  top: -35px;
}

@media (max-width: 768px) {
  .age-waffle-tooltip,
  .age-waffle-tooltip-pct {
    white-space: normal;
    max-width: min(200px, 90vw);
    text-align: center;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

.age-waffle-colors-0 { fill: #D9DFF1; stroke: #D9DFF1; }
.age-waffle-colors-1 { fill: #F09C84; stroke: #F09C84; }
.age-waffle-colors-2 { fill: #82BBE6; stroke: #82BBE6; }
.age-waffle-colors-3 { fill: #F6DE9B; stroke: #F6DE9B; }
.age-waffle-colors-4 { fill: #93BFA2; stroke: #93BFA2; }
.age-waffle-colors-5 { fill: #E8A87C; stroke: #E8A87C; }
.age-waffle-colors-6 { fill: #5A86C5; stroke: #5A86C5; }
.age-waffle-colors-7 { fill: #2E4A7A; stroke: #2E4A7A; }
.age-waffle-colors-others { fill: #787878; stroke: #787878; }

/* Occupation (migration) tab overrides */
.tab-migration .age-waffle-colors-0 { fill: #C8D3E7; stroke: #C8D3E7; }
.tab-migration .age-waffle-colors-1 { fill: #8AA483; stroke: #8AA483; }
.tab-migration .age-waffle-colors-2 { fill: #F8D78B; stroke: #F8D78B; }
.tab-migration .age-waffle-colors-3 { fill: #F8D78B; stroke: #F8D78B; }
.tab-migration .age-waffle-colors-4 { fill: #7DBCE2; stroke: #7DBCE2; }
.tab-migration .age-waffle-colors-5 { fill: #E8A87C; stroke: #E8A87C; }

/* Occupation tab Others color */
.tab-migration .age-waffle-colors-others {
  fill: #817FA7 !important;
  stroke: #817FA7 !important;
  color: #817FA7 !important;
}
.tab-migration .age-waffle-colors-others svg,
.tab-migration .age-waffle-colors-others svg rect,
.tab-migration .age-waffle-colors-others svg path {
  fill: #817FA7 !important;
  stroke: #817FA7 !important;
  color: #817FA7 !important;
}

.tab-migration .age-waffle-colors-0.age-waffle-active,
.tab-migration .age-waffle-colors-0:hover { fill: #C8D3E7; stroke: #C8D3E7; }
.tab-migration .age-waffle-colors-1.age-waffle-active,
.tab-migration .age-waffle-colors-1:hover { fill: #9AB493; stroke: #9AB493; }
.tab-migration .age-waffle-colors-2.age-waffle-active,
.tab-migration .age-waffle-colors-2:hover { fill: #F8D78B; stroke: #F8D78B; }
.tab-migration .age-waffle-colors-3.age-waffle-active,
.tab-migration .age-waffle-colors-3:hover { fill: #FFE79B; stroke: #FFE79B; }
.tab-migration .age-waffle-colors-4.age-waffle-active,
.tab-migration .age-waffle-colors-4:hover { fill: #7DBCE2; stroke: #7DBCE2; }
.tab-migration .age-waffle-colors-5.age-waffle-active,
.tab-migration .age-waffle-colors-5:hover { fill: #F4BFA3; stroke: #F4BFA3; }

.age-waffle-colors-others.age-waffle-active,
.age-waffle-colors-others:hover { fill: #888888; stroke: #888888; }

/* Occupation tab Others hover override */
.tab-migration .age-waffle-colors-others.age-waffle-active,
.tab-migration .age-waffle-colors-others:hover { fill: #817FA7; stroke: #817FA7; }

.age-waffle-colors-0.age-waffle-active,
.age-waffle-colors-0:hover { fill: #E8EDFA; stroke: #E8EDFA; }
.age-waffle-colors-1.age-waffle-active,
.age-waffle-colors-1:hover { fill: #FFB8A0; stroke: #FFB8A0; }
.age-waffle-colors-2.age-waffle-active,
.age-waffle-colors-2:hover { fill: #A0D2FF; stroke: #A0D2FF; }
.age-waffle-colors-3.age-waffle-active,
.age-waffle-colors-3:hover { fill: #FFF0B0; stroke: #FFF0B0; }
.age-waffle-colors-4.age-waffle-active,
.age-waffle-colors-4:hover { fill: #A8D4B8; stroke: #A8D4B8; }
.age-waffle-colors-5.age-waffle-active,
.age-waffle-colors-5:hover { fill: #F4BFA3; stroke: #F4BFA3; }
.age-waffle-colors-6.age-waffle-active,
.age-waffle-colors-6:hover { fill: #6A96D5; stroke: #6A96D5; }
.age-waffle-colors-7.age-waffle-active,
.age-waffle-colors-7:hover { fill: #3E5A8A; stroke: #3E5A8A; }

.age-waffle-legend {
  display:none;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
  padding: 0 20px;
}
.age-waffle-legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 14px;
}
.age-waffle-legend-swatch {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  flex-shrink: 0;
}

.age-waffle-disclaimer {
  margin-top: 60px;
  padding: 0 20px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

.age-waffle-image-disclaimer {
  margin-top: 60px;
  padding: 0 20px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

.tab-migration .age-waffle-image-disclaimer {
  margin-top: 15px;
}

@media (max-width: 768px) {
  .age-waffle-container {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
  }
  .age-waffle-grid-wrap {
    flex: 1 1 40%;
    padding: 0 10px;
  }
  .age-waffle-grid-wrap:not(:last-child) {
    border-right: none;
  }
}

.gender-chart-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  width: 100%;
}
.gender-chart-col {
  flex: 1;
  text-align: center;
  padding: 0 60px;
}
.gender-chart-col:not(:last-child) {
  border-right: 2px solid rgba(255,255,255,0.2);
}
@media (max-width: 768px) {
  .gender-chart-wrapper {
    flex-direction: row;
  }
  .gender-chart-col {
    flex: 1 1 40%;
    padding: 0 20px;
  }
  .gender-chart-col:not(:last-child) {
    border-right: none;
  }
}