/* Chart container */
    .chart{
        margin-top:20px;
        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;
        color: #000000;
    }
    
    /* Bar section */
    .bar-section{
        flex:1;
    }
    
    /* Bar + value */
    .bar-area{
        display:flex;
        align-items:center;
    }
    
    .bar{
        height:36px;
        background:#B6C4DF;
        transition:0.3s ease;
        border-right:3px solid #8391AC;
    }
    
    /* White stripes on hover */
    .row:hover .bar{
        background:
            repeating-linear-gradient(
                45deg,
                rgba(255,255,255,0.7),
                rgba(255,255,255,0.7) 8px,
                transparent 8px,
                transparent 16px
            ),
            #B6C4DF;
    }
    
    .value{
        margin-left:12px;
        font-size:25px;
        color:#b9c6cf;
        transition:0.3s ease;
    }
    
    .row:hover .value{
        color:#2b7db5;
    }
    
    .value.highlight{
        font-size:25px;
    }
    
    /* Bottom line aligned with vertical line */
    .chart::after{
        content:"";
        display:block;
        margin-left:30%;
        border-bottom:2px solid #000000;
        margin-top:30px;
    }

    #migrationchart10 .bar, #migrationchart11 .bar, #migrationchart12 .bar, #migrationchart13 .bar{
        background: #B94422;
        transition: 0.3s ease;
        border-right: 3px solid #B94422;
    }
    #migrationchart10 .bar:hover, #migrationchart11 .bar:hover, #migrationchart12 .bar:hover, #migrationchart13 .bar:hover{
        background:
            repeating-linear-gradient(
                45deg,
                rgba(255,255,255,0.7),
                rgba(255,255,255,0.7) 8px,
                transparent 8px,
                transparent 16px
            ),
            #B94422;
    }
    #migrationchart10 .value, #migrationchart11 .value, #migrationchart12 .value, #migrationchart13 .value{
        color:#ab4c2d94;
    }
    #migrationchart10::before, #migrationchart11::before, #migrationchart12::before, #migrationchart13::before{
        background: #B94422;
    }
    #migrationchart10::after, #migrationchart11::after, #migrationchart12::after, #migrationchart13::after{
        border-bottom:2px solid #B94422;
    }
    #migrationchart10 .row:hover .value, #migrationchart11 .row:hover .value, #migrationchart12 .row:hover .value, #migrationchart13 .row:hover .value{
        color:#B94422;
    }

    /* male female ration css start */

      /* 1. Set elements to start hidden. Increased loop to 10s for a relaxed pace */
    #male-icon, #male-name, #male-per-bx,
    #female-icon, #female-name, #female-per-bx {
        opacity: 0;
        animation: continuousReveal 10s infinite cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* 2. Define the life-cycle with a slower reveal phase */
    @keyframes continuousReveal {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        12% {
            opacity: 1;
            transform: translateY(0); /* Takes 1.2s to fully reveal (slower speed) */
        }
        80% {
            opacity: 1;
            transform: translateY(0); /* Hold on screen so all elements are visible together */
        }
        90% {
            opacity: 0;
            transform: translateY(-15px); /* Smooth fade out */
        }
        100% {
            opacity: 0;
            transform: translateY(-15px);
        }
    }

    /* 3. Sequence 1 (Male) - 0.8s gap between elements */
    #male-icon { animation-delay: 0s; }
    #male-name { animation-delay: 0.8s; }
    #male-per-bx { animation-delay: 1.6s; }

    /* 4. Sequence 2 (Female) - Waits for Male to finish, then uses 0.8s gaps */
    #female-icon { animation-delay: 3.2s; } 
    #female-name { animation-delay: 4.0s; }
    #female-per-bx { animation-delay: 4.8s; }


    /* male female ration css end */

/* data collection btn hide show css start */
.data-container-btn1, 
.data-container-btn2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border: 1px solid #ffffff6e;
  padding: 18px;
  gap: 20px;
}

.tpbtn{
   border: 1px solid #1b193d;
}

.tpbtn img{
    margin-top: 0;
}

.tpbtn2{
    margin-top: -125px;
    background-color: #1b193d;
}

.data-container-btn1 h2, 
.data-container-btn2 h2 {
  margin: 0;
  font-size: 35px;
  font-weight: 300;
}

  /* 2. Image Rotation Effect */
  .arrow-icon img {
    width: 55px; 
    height: auto;
    transition: transform 0.3s ease; 
    display: block;
  }

  /* When the button is active, rotate the image */
  .data-container-btn1.active .arrow-icon img,
  .data-container-btn2.active .arrow-icon img {
    transform: rotate(180deg);
  }

/* Hidden Content Styling */
.data-container-contain1, 
.data-container-contain2 {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease;
  padding: 0 15px; /* Updated to prevent padding jump when hidden */
}

.data-container-contain1 p, 
.data-container-contain2 p {
    margin-bottom: 15px;
    margin-top: 15px;
    font-size: 20px;
}

/* Class to show content */

/* data collection btn hide show css start */
.data-container-contain1.show, 
.data-container-contain2.show {
  max-height: 2000px; /* Use a large px value instead of 100% for CSS transition to work */
  padding: 15px;
}

@media (max-width: 1024px) and (min-width: 768px){
  .data-container-btn1, 
  .data-container-btn2 {
      gap: 10px;
  }
  .arrow-icon img {
      width: 40px;
  }
  .data-container-btn1 h2, 
.data-container-btn2 h2 {
  font-size: 25px;
  font-weight: 300;
}
}

@media (max-width: 767px){
  .data-container-btn1, 
  .data-container-btn2 {
      gap: 10px;
  }
  .arrow-icon img {
      width: 40px;
  }
  .data-container-contain1 p, 
  .data-container-contain2 p {
      font-size: 18px;
  }
  
.tpbtn2{
    margin-top: 20px;
    background-color: #1b193d;
}
.methodologysec{
    padding-bottom: 20px;
}
  .data-container-btn1 h2, 
.data-container-btn2 h2 {
  font-size: 20px;
  font-weight: 300;
}

}
/* data collection btn hide show css end */

/* data collection butn hide show css end */


/* 3 card animation css start */
/* --- Card Section Layout --- */
    .hw-heat-impact-section {
      padding: 0;
      display: flex;
      justify-content: center;
      overflow: hidden;
      background: #eaeaf0;
      border-bottom: 2px solid #000000;
    }

    .hw-impact-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      max-width: 100%;
      width: 100%;
    }

    /* --- Individual Card Styling --- */
    .hw-impact-card {
      background-color: #ffffff; 
      border-radius: 30px 30px 0 0; 
      padding: 60px 40px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      
      /* Typography */
      color: #1a1a1a; 
      font-size: 16px;
      line-height: 1.6;
      font-weight: 500;

      /* Animation Initial State */
      opacity: 0;
      transform: translateY(80px);
      
      /* CHANGED: Slower animation speed (2.0s duration) */
      transition: opacity 2s ease-out, transform 2s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    /* CHANGED: Even slower delay between cards opening (0.8s gap between each) */
    .hw-impact-card:nth-child(1) { transition-delay: 0.2s; }
    .hw-impact-card:nth-child(2) { transition-delay: 1.0s; }
    .hw-impact-card:nth-child(3) { transition-delay: 1.8s; }

    /* The active class added by JavaScript */
    .hw-impact-card.hw-impact-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* --- Responsive Design --- */
    
    /* Tablet */
    @media (max-width: 992px) {
      .hw-impact-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .hw-impact-card:nth-child(1) { transition-delay: 0.2s; }
      .hw-impact-card:nth-child(2) { transition-delay: 1.0s; }
      .hw-impact-card:nth-child(3) { transition-delay: 0.2s; } 
    }

    /* Mobile */
    @media (max-width: 768px) {
      .hw-impact-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }
      .hw-impact-card {
        padding: 40px 20px;
        border-radius: 20px;
      }
      /* Slower cascade for mobile as well */
      .hw-impact-card:nth-child(1) { transition-delay: 0.2s; }
      .hw-impact-card:nth-child(2) { transition-delay: 0.7s; }
      .hw-impact-card:nth-child(3) { transition-delay: 1.2s; }
    }
/* 3 card animation css end */