/* 1. General Styles
------------------------------------------------------------------- */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.6;
  color: #333;
  background-color: #f8f9fa; /* Light gray background for the page */
  padding-top: 0px; /* Adjust if your navbar height is different; default for Bootstrap fixed-top */
}

main {
  padding-bottom: 2rem; /* Space before the footer */
}

a {
  color: #007bff; /* Standard link color */
}

a:hover {
  color: #0056b3;
  text-decoration: none; /* Optional: remove underline on hover if desired */
}

/* 2. Navbar (Mostly Bootstrap, minor tweaks if needed)
------------------------------------------------------------------- */
.navbar-brand {
  font-weight: 500;
  font-size: 1.35rem; /* Slightly larger brand text */
}

/* 3. Welcome Section (Home Background - Masked Image)
------------------------------------------------------------------- */
#home-background {
  background-image: url('../img/background.png'); /* !! IMPORTANT: Replace with your actual background image path !! */
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  color: #000000 /* White text for this section */
  position: relative;
  /* Bootstrap classes p-3 p-md-4 m-md-3 text-center rounded shadow-sm overflow-hidden are applied via HTML */
  /* min-height: 450px; /* Adjust as needed for desired banner height, or use padding */
}

/* This pseudo-element creates the "mask" or overlay effect */
#home-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 249, 242, 0.2); /* Semi-transparent black overlay. Adjust opacity (0.0 to 1.0) and color as needed. */
  z-index: 1; /* Ensures overlay is above the background image but below the content */
  border-radius: inherit; /* Inherits rounded corners from #home-background */
}

/* Ensure content within #home-background is above the overlay */
#home-background .col-md-5 { /* This div contains the H1 and P tags */
  position: relative; /* To stack above the ::before pseudo-element */
  z-index: 2;
  padding-top: 3rem; /* Ensure text is not too close to the top edge */
  padding-bottom: 3rem; /* Ensure text is not too close to the bottom edge */
}

#home-background .display-4 {
  font-weight: 600; /* Make title a bit bolder */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* Shadow for better readability on image */
}

#home-background p.lead {
  font-weight: 400;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Lighter shadow for subtitle */
  font-size: 1.25rem; /* Adjust as needed */
}

#home-background p.lead u { /* Style for the underlined characters if needed */
  text-decoration-thickness: 2px; /* Example: make underline bolder */
}


/* 4. Content Sections (Charts, Introduction, Statistics)
------------------------------------------------------------------- */
.col-md-12 > .row > .col-md-6 > .row.g-0 { /* Targeting the bordered boxes containing chart and stats */
  /* min-height: 50vh; /* From inline style. Might be better to let content define height or use a more flexible unit. */
  /* The height: 50vh is applied inline, which might be too rigid.
     If you want to keep it, ensure content fits or overflows gracefully. */
}

#ring_Chart {
  width: 100%;
  height: 100%; /* Fill its container. The container has height: 50vh inline */
  min-height: 350px; /* Ensure chart is not too small if 50vh is small */
}

/* Statistics section styles */
.d-md-flex.flex-md-equal .col.my-1.py-1 {
  /* Styles for individual stat items if needed beyond Bootstrap */
}

.animated-number {
  /* font-size is set inline using clamp() */
  /* color: #2681e9; /* Optionally match icon color */
  font-weight: bold; /* As per <b> tag in HTML */
}

.description h5 {
  /* font-size is set inline using clamp() */
  margin-bottom: 0.75rem;
}

.description ul {
  list-style-type: disc; /* Default bullet points */
  padding-left: 25px; /* Indentation for list items */
  margin-bottom: 0; /* Remove default bottom margin if any */
}

.description li {
  margin-bottom: 0.6em;
  /* font-size is set inline using clamp() */
}

.description li b {
  /* color is set inline to red */
  font-weight: bold; /* Ensure it's bold */
}

.description li a {
  font-weight: bold;
  /* color: #007bff; */ /* Default link color, or override if needed */
}

/* 5. Footer
------------------------------------------------------------------- */
footer {
  padding-top: 3rem;
  padding-bottom: 2rem;
  background-color: #343a40; /* Dark background, matches Bootstrap's .bg-dark */
  color: #ced4da; /* Light gray text for footer, good contrast on dark bg */
}

footer h5 {
  color: #ffffff; /* White headings in footer */
  margin-bottom: 1rem;
  font-weight: 500;
}

footer .list-unstyled a.link-secondary,
footer a.link-secondary {
  color: #adb5bd; /* Slightly lighter gray for links */
  text-decoration: none;
}

footer .list-unstyled a.link-secondary:hover,
footer a.link-secondary:hover {
  color: #ffffff;
  text-decoration: underline;
}

footer small.d-block.text-body-secondary {
  color: #adb5bd !important; /* Ensure this Bootstrap utility class also uses a light color */
  font-size: 0.875em;
}

footer .col-1.col-md img { /* Logo in footer */
  max-width: 100px; /* As per inline style */
  /* float: right; is applied inline. Consider CSS for better responsive control if needed */
}

/* 6. Utility & Specific Element Styles
------------------------------------------------------------------- */
/* If Bootstrap's shadow-sm is not enough or you want custom shadows: */
/* .shadow-sm { box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; } */

/* 7. Responsive Adjustments
------------------------------------------------------------------- */
@media (max-width: 767.98px) { /* Medium devices and down (tablets, mobiles) */
  body {
    padding-top: 56px; /* Ensure this matches your navbar height if it changes on mobile */
  }

  #home-background {
    margin-left: 0.5rem !important; /* Reduce side margins on mobile */
    margin-right: 0.5rem !important;
    padding: 1.5rem !important; /* Adjust padding */
  }

  #home-background .display-4 {
    font-size: 2.25rem; /* Smaller title on mobile */
  }

  #home-background p.lead {
    font-size: 1.1rem; /* Smaller subtitle */
  }

  .col-md-12 > .row > .col-md-6 > .row.g-0 {
    min-height: auto; /* Allow height to be determined by content */
    height: auto !important; /* Override inline 50vh */
    margin-bottom: 1.5rem; /* Space between stacked cards */
  }
  
  #ring_Chart{
    min-height: 300px; /* Ensure chart visibility if its container shrinks a lot */
  }

  .description {
     padding-left: 1rem !important; /* Adjust padding for description on mobile */
     padding-right: 1rem !important;
  }
  .description ul {
    padding-left: 20px;
  }

  footer .col-1.col-md img { /* Center logo on mobile if it's floated right */
    float: none !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem;
  }

  footer .col-6.col-md { /* Footer columns */
    text-align: center; /* Center footer content on mobile */
    margin-bottom: 1.5rem;
  }
  footer .list-unstyled {
    padding-left: 0;
  }
}

@media (max-width: 575.98px) { /* Small devices and down (phones) */
  #home-background .display-4 {
    font-size: 1.8rem;
  }
  #home-background p.lead {
    font-size: 1rem;
  }
}