/* (All previous styles remain the same) */
:root{--main-bg:#0A101F;--card-gradient:linear-gradient(108.41deg, #204580 -7.19%, #0E1A33 75.13%);--border-color:rgba(67, 90, 131, 0.3);--text-primary:#fff;--text-secondary:#A0A0B0;--accent-yellow:#F5A623;--accent-green:#28a745;--font-family:'Tajawal',sans-serif}body{background-color:var(--main-bg);font-family:var(--font-family);color:var(--text-primary)}.header .logo{width:auto;height:110px;max-width:240px}.card_wrapper{background-color:#141D32;border:1px solid #CDCDCD80;border-radius:12px;padding:1rem;height:100%;transition:transform .3s ease,box-shadow .3s ease;position:relative;overflow:hidden}.stat-card{background:var(--card-gradient);padding:1.25rem;display:flex;flex-direction:column;justify-content:space-between;min-height:170px;border:1px solid #CDCDCD80}.stat-card::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background-image:url(/new-design/assets/img/pattern.webp);background-repeat:no-repeat;background-position:center;background-size:cover;opacity:.04;z-index:0;border-radius:12px}.stat-card>*{position:relative;z-index:1}.stat-card-header{display:flex; align-items:center;justify-content:space-between;gap:20px;font-size:24px;font-weight:400;color:var(--text-secondary);flex-direction:row-reverse}

/* Custom color for completed projects text */
.stat-card-header .completed-projects-text {
    color: #CBCBCB !important;
}.stat-card-header .icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:10px;background-color:var(--icon-bg,rgba(255,255,255,.1));flex-shrink:0}.stat-card-header .icon svg{width:22px;height:22px;color:#fff}.card_main_text{color:var(--text-primary);font-size:2.75rem;font-weight:700;direction:ltr;text-align:right;margin-top:.5rem;}.card_footer.card-change{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;color:var(--accent-green);font-weight:700;direction:ltr}.chart-card{background:var(--card-gradient);display:flex;flex-direction:column;border:1px solid #CDCDCD80}.chart-card-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem .5rem 1rem;flex-shrink:0}.chart-title{font-size:1.25rem;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:.75rem}.chart-title .dot{width:12px;height:12px;border-radius:50%;background-color:var(--accent-green)}.chart-legend{display:flex;gap:1.5rem;    background: linear-gradient(108.41deg, #204580 -7.19%, #0E1A33 75.13%);
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #CDCDCD80;
}.legend-item{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--text-secondary)}.legend-color-dot{width:14px;height:14px;border-radius:50%;background-color:var(--color,#fff)}.chart-canvas-container{flex-grow:1;position:relative}#main-chart{position:absolute;top:0;left:0;width:100%;height:100%}.countries_lang_charts .card_body{background:0 0!important}.countries_lang_charts .fs22{font-size:1.25rem;font-weight:700}.countries_lang_charts .circle{width:12px;height:12px;border-radius:50%;background-color:var(--accent-yellow)}.chart-container{height:300px;padding:1rem}

/* MODIFICATION: Style for the D3 chart container */
.d3-chart-container {
    height: 250px; /* Adjust height as needed */
    width: 100%;
}

/* Ensures the card body can be a flex container for its children */
.card_wrapper .card_body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Makes the D3 chart container grow to fill the available space in the card body */
.d3-chart-container {
    flex-grow: 1;
    min-height: 250px; /* Ensures a minimum drawing area */
}

/* Adds the subtle background pattern to the chart cards */
.card_wrapper.countries_lang_charts {
    background: var(--card-gradient);
    display: flex;
    flex-direction: column;
    height: 320px;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    border: 1px solid #CDCDCD80;
}

.card_wrapper.countries_lang_charts::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url(/new-design/assets/img/pattern.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0.04;
    z-index: 1;
    border-radius: 15px;
}

/* Ensure the card header and body appear above the background pattern */
.card_wrapper.countries_lang_charts .card_header,
.card_wrapper.countries_lang_charts .card_body {
    position: relative;
    z-index: 2;
}

.card_wrapper.countries_lang_charts .card_body {
    flex-grow: 1; /* This makes the body fill the remaining height */
    padding: 0.5rem;
    display: flex; /* This allows the SVG to fill the body */
    padding-bottom: 1.5rem; /* Add space at the bottom of the card */
}

/* Ensure the SVG inside the container fills it completely */
.card_body > svg {
    width: 100%;
    height: 100%;
}

#top-books-d3-chart {
    background: var(--main-bg) !important;
    border-radius: 15px !important;
    padding: 1rem !important;
    margin-bottom: 1.5rem !important;
    position: relative;
    z-index: 1;
}

#top-languages-d3-chart {
    background: var(--main-bg) !important;
    border-radius: 15px !important;
    padding: 1rem !important;
    margin-bottom: 1.5rem !important;
    position: relative;
    z-index: 1;
}

nav {
    border: 1px solid #CDCDCD80;
}
/* ============================================ *
 * STATS DIGIT ANIMATION
 * ============================================ */

/* This is the main text for the animated number */
.card_main_text {
    display: inline-block;
    font-size: 2rem; /* You can adjust this */
    font-weight: 600;
    padding-bottom: .225rem;
    line-height: 1;
  }
  
  /* Container for each digit, allows for stable width */
  .digit-container {
    display: inline-block;
    vertical-align: top;
    position: relative;
    overflow: hidden;
  }
  
  /* The actual digit span that will be animated */
  .digit {
    display: inline-block;
    transition: transform 0.3s ease-in-out;
  }
  
  /* The animation class */
  .digit-change {
    animation: slideUp 0.3s ease-in-out;
  }
  
  /* The comma or other separators */
  .separator {
    display: inline-block;
    vertical-align: top;
    padding: 0 2px;
  }
  
  @keyframes slideUp {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  /* Responsive font sizes from your original CSS */
  @media screen and (min-width: 1251px) and (max-width: 1450px) {
    .card_main_text {
      font-size: 1.5rem;
    }
  }
  
  @media screen and (min-width: 991px) and (max-width: 1251px) {
    .card_main_text {
      font-size: 1.3rem;
    }
  }
  
  @media screen and (min-width: 768px) and (max-width: 920px) {
    .card_main_text {
      font-size: 1.6rem;
    }
  }
  
  @media screen and (max-width: 767px) {
      .card_main_text {
      font-size: 1.3rem;
    }
  }

/* Loader override for translation page */
.loader-wrapper {
  background: var(--card-gradient) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader-wrapper .loader {
  border-radius: 18px;
  box-shadow: 0 8px 32px 0 rgba(32, 69, 128, 0.25);
  padding: 2.5rem 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader-wrapper .loader img {
  max-width: 380px;
  max-height: 3800px;
  display: block;
  margin: 0 auto;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fade out animation for loader-wrapper */
.loader-wrapper {
  opacity: 1;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.7s;
}
.loaded .loader-wrapper {
  opacity: 0;
  pointer-events: none;
}
.loader-wrapper .loader-section {
  background: var(--card-gradient) !important;
}