/* *********************************************************************************************************** */



/* Fade-in and fade-out transitions */
.fade-in {
    opacity: 1;
    transition: opacity 4s ease-in;
  }
  
  .fade-out {
    opacity: 0;
    transition: opacity 3s ease-out;
  }
  
  
  
  /* ******************************************************************************************************************** */
  
  
  
  
  
  /* Initial hidden state for content sections */
  .toggle-section .content-section {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s ease-in-out, visibility 0.7s ease-in-out;
  }
  
  /* Visible content with opacity transition */
  .toggle-section .visible-content {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.7s ease-in-out, visibility 0.7s ease-in-out;
  }
  
  /* Button base styles */
  .toggle-section .heading-btn {
    position: relative;
    color: #d97706; /* Default orange color */
    font-weight: normal;
    padding: 0.5rem 1rem; /* Consistent padding */
    font-size: 1.5rem; /* Keep font size consistent */
    transition: color 0.3s ease-in-out, transform 0.3s ease-in-out; /* Added transition for smooth scaling */
    border: none; /* No border to avoid shifts */
    background: none;
    display: inline-block;
  }
  
  .toggle-section .heading-btn::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 0;
    height: 2px;
    background: #d97706;
    transition: width 0.4s ease-in-out;
  }
  
  /* Active button styling */
  .toggle-section .heading-btn.active {
    color: #b45309; /* Darker orange for active button */
    transform: scale(1.1); /* Zoom effect without affecting width */
  }
  
  /* Underline animation on active button */
  .toggle-section .heading-btn.active::after {
    width: 100%; /* Full width underline */
  }
  
  
  
  
  
  
  /* ************************************************************************************** */
  
  
  
  
  
  
  
  /* Increased image size */
  .fact-image {
    width: 70px; /* Larger image size */
    height: 70px;
    object-fit: contain;
  }
  
  /* Container for the counter number and text */
  .counter-container {
    display: flex;
    flex-direction: column; /* Stack the number and text vertically */
    align-items: center; /* Center the number and text horizontally */
    text-align: center; /* Center the text */
  }
  
  /* Styling for the counter (numbers) */
  .counter {
    font-size: 3rem; /* Large font size for numbers */
    font-weight: bold;
    margin-bottom: 0.5rem; /* Space between number and label text */
    position: relative; /* To position the '+' sign relative to the number */
    display: inline-block;
  }
  
  /* Add + symbol next to the number */
  .counter-plus::after {
    content: "+";
    font-size: 2.5rem; /* Slightly smaller than the number */
    position: absolute;
    top: -5px; /* Align the '+' slightly above the top right corner */
    left: 100%; /* Position it to the right of the number */
    margin-left: 5px; /* Small space between the number and the '+' sign */
    color: black; /* Black color for the '+' sign */
  }
  
  /* Styling for the label text (Countries, Volunteers, etc.) */
  
  
  /* Adjusting fact item boxes for equal size and padding */
  .fact-item {
    padding: 3rem; /* Slightly increased padding for more balance */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: auto;
    height: 180px; /* Set fixed height for consistent box size */
  }
  
  /* Prevent counter text from overflowing */
  .counter {
    word-wrap: break-word; /* Allow long numbers to break lines if needed */
    overflow-wrap: break-word; /* Ensure long numbers break properly */
    white-space: nowrap; /* Prevent the counter from wrapping onto multiple lines */
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    .counter {
        font-size: 3.5rem; /* Make the number smaller on mobile screens */
    }
    .fact-item {
        padding: 2rem; /* Reduce padding on mobile for better fit */
        height: auto; /* Let height adjust to content on mobile */
    }
    .fact-item .counter-container {
        font-size: 2.5rem; /* Slightly reduce font size for mobile */
    }
  }