body {
  font-family: 'Inter', 'Roboto', Arial, sans-serif;
  color: #000;
  padding-bottom: 100px;
  padding: 0;
  margin: 0;
}
:root {
  /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
  --primary: #ff6a3e;
  --primaryLight: #ffba43;
  --secondary: #ffba43;
  --secondaryLight: #ffba43;
  --headerColor: #000000;
  --bodyTextColor: #000000;
  --bodyTextColorWhite: #fafbfc;
  /* 13px - 16px */
  --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
  /* 31px - 49px */
  --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
  --bodyFontSize: 1rem;
  /* 60px - 100px top and bottom */
  --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}
/* Imagegrid */
.image-grid img {
  max-width: 100%;
  height: auto;
  display: block;
}
.city-grid {
  background-color: #fff;
  width: 70%;
  margin: 0 auto; /* Centers the container horizontally */
}
*,
*:before,
*:after {
  /* prevents padding from affecting height and width */
  box-sizing: border-box;
}

/* Header  */
.cs-topper {
  font-size: var(--topperFontSize);
  line-height: 1.2em;
  text-transform: uppercase;
  text-align: inherit;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.25rem;
  display: fixed;
}

.cs-title {
  font-size: var(--headerFontSize);
  font-weight: 900;
  font-family: 'Roboto', 'Arial', sans-serif;
  line-height: 1.2em;
  text-align: inherit;
  max-width: 43.75rem;
  margin: 0 0 1rem 0;
  color: var(--headerColor);
  position: relative;
}

.cs-text {
  font-size: var(--bodyFontSize);
  font-family: 'Roboto', 'Arial', sans-serif;
  line-height: 1.5em;
  text-align: inherit;
  width: 100%;
  max-width: 40.625rem;
  margin: 0;
  color: var(--bodyTextColor);
}
/*-- -------------------------- -->
<---     Mobile Navigation      -->
  <--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  body.cs-open {
    overflow: hidden;
  }
  .unstyled-link{
    text-align: center;
  }
  .grid-links{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
  }
  .footer-multi-container{
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
  }
  .justify-flex-center{
    display: flex;
    justify-content: center;
  }
  #cs-navigation {
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0.75rem 2rem; 
    background-color: #e5e5e5;
    font-family: 'Roboto', 'Arial', sans-serif;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: relative;
    z-index: 10000;
  }
  #cs-navigation:before {
    content: '';
    width: 100%;
    height: 0vh;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0.75;
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: -1100;
    transition: height 0.5s, opacity 0.5s;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  #cs-navigation.cs-active:before {
    height: 150vh;
    opacity: 1;
  }
  #cs-navigation.cs-active .cs-ul-wrapper {
    opacity: 1;
    transform: scaleY(1);
    transition-delay: 0.15s;
  }
  #cs-navigation.cs-active .cs-li {
    opacity: 1;
    transform: translateY(0);
  }
  #cs-navigation .cs-container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  #cs-navigation .cs-logo {
    width: 40%;
    max-width: 9.125rem;
    height: 100%;
    margin: 0 auto 0 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
  }
  #cs-navigation .cs-logo img {
    width: 100%;
    height: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
  }
  #cs-navigation .cs-toggle {
    /* 44px - 48px */
    width: clamp(2.75rem, 6vw, 3rem);
    height: clamp(2.75rem, 6vw, 3rem);
    margin: 0 0 0 auto;
    background-color: transparent;
    border: none;
    border-radius: 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #cs-navigation .cs-active .cs-line1 {
    top: 50%;
    transform: translate(-50%, -50%) rotate(225deg);
  }
  #cs-navigation .cs-active .cs-line2 {
    top: 50%;
    transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
    transform-origin: center;
  }
  #cs-navigation .cs-active .cs-line3 {
    opacity: 0;
    bottom: 100%;
  }
  #cs-navigation .cs-box {
    /* 24px - 28px */
    width: clamp(1.5rem, 2vw, 1.75rem);
    /* 14px - 16px */
    height: clamp(0.875rem, 1.5vw, 1rem);
    position: relative;
  }
  #cs-navigation .cs-line {
    width: 100%;
    height: 2px;
    background-color: #1a1a1a;
    border-radius: 2px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  #cs-navigation .cs-line1 {
    top: 0;
    transition: transform 0.5s, top 0.3s, left 0.3s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
    transform-origin: center;
  }
  #cs-navigation .cs-line2 {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: top 0.3s, left 0.3s, transform 0.5s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
  }
  #cs-navigation .cs-line3 {
    bottom: 0;
    transition: bottom 0.3s, opacity 0.3s;
  }
  #cs-navigation .cs-ul-wrapper {
    width: 100%;
    height: auto;
    padding-bottom: 2.4em;
    background-color: #e5e5e5;
    box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: -1;
    overflow: hidden;
    transform: scaleY(0);
    transition: transform 0.4s, opacity 0.3s;
    transform-origin: top;
  }
  #cs-navigation .cs-ul {
    width: 100%;
    height: auto;
    max-height: 65vh;
    margin: 0;
    padding: 3rem 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1.25rem;
    overflow: scroll;
  }
  #cs-navigation .cs-li {
    text-align: center;
    list-style: none;
    width: 100%;
    margin-right: 0;
    opacity: 0;
    /* transition from these values */
    transform: translateY(-4.375rem);
    transition: transform 0.6s, opacity 0.9s;
  }
  #cs-navigation .cs-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #cs-navigation .cs-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #cs-navigation .cs-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #cs-navigation .cs-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #cs-navigation .cs-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #cs-navigation .cs-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #cs-navigation .cs-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #cs-navigation .cs-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #cs-navigation .cs-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #cs-navigation .cs-li:nth-of-type(10) {
    transition-delay: 0.5s;
  }
  #cs-navigation .cs-li:nth-of-type(11) {
    transition-delay: 0.55s;
  }
  #cs-navigation .cs-li:nth-of-type(12) {
    transition-delay: 0.6s;
  }
  #cs-navigation .cs-li:nth-of-type(13) {
    transition-delay: 0.65s;
  }
  #cs-navigation .cs-li-link {
    /* 16px - 24px */
    font-family: 'Roboto', 'Arial', sans-serif;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    line-height: 1.2em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: inline-block;
    position: relative;
  }
  #cs-navigation .cs-li-link:before {
    /* active state underline */
    content: '';
    width: 100%;
    height: 1px;
    background: var(--primary);
    opacity: 1;
    display: none;
    position: absolute;
    bottom: -0.125rem;
    left: 0;
  }
  #cs-navigation .cs-li-link.cs-active:before {
    display: block;
  }
  #cs-navigation .cs-button-solid {
    display: none;
  }
  /* footer */
  #cs-footer {
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    background-color: #e5e5e5;
    font-family: 'Inter', 'Roboto', 'Arial', sans-serif;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    padding: 2em;
    bottom: 0;
    min-height: 15vh;
    display: flex;
    justify-content: center;
    flex-direction:column-reverse;
  }
  #cs-footer .cs-li-link {
    /* Your existing styles for footer links */
    width: 100%;
    box-sizing: border-box;
    font-family: 'Inter', 'Roboto', 'Arial', sans-serif;
    color: #000000;
    position: relative; /* Ensure relative positioning for the ::after pseudo-element */
    text-decoration: none; /* Remove default underline */
  }

  #cs-footer .cs-li-link::after {
    content: ''; /* Add the underline using the ::after pseudo-element */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%; /* Full width of the link */
    height: 1px; /* Height of the underline */
    /* background-color: currentColor; Use the current text color for the underline */
    transition: width 0.3s ease; /* Add a transition effect */
  }

  #cs-footer .cs-li-link:hover::after {
    width: 100%; /* Expand the underline on hover */
    background-color: var(--primary); /* Change the color of the underline on hover */
  }
}
/*-- -------------------------- -->
<---     Desktop Navigation     -->
<--- -------------------------- -*/
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  .grid-links{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .footer-multi-container{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .justify-flex-center{
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  #cs-navigation {
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0.75rem 3rem; 
    background-color: #e5e5e5;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    z-index: 10000;
  }
  #cs-navigation .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
  }
  #cs-navigation .cs-toggle {
    display: none;
  }
  #cs-navigation .cs-logo {
    width: 18.4%;
    max-width: 21.875rem;
    height: 4.0625rem;
    /* margin-right auto pushes everything away from it to the right */
    margin: 0 auto 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
  }
  #cs-navigation .cs-logo img {
    width: 100%;
    height: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
  }
  #cs-navigation .cs-ul {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* 20px - 36px */
    gap: clamp(1.25rem, 2.6vw, 2.25rem);
  }
  #cs-navigation .cs-li {
    list-style: none;
    padding: 2rem 0;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #cs-navigation .cs-li-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1vw, 1rem);
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
    position: relative;
  }
  #cs-navigation .cs-li-link:hover:before {
    width: 100%;
  }
  #cs-navigation .cs-li-link.cs-active:before {
    width: 100%;
  }
  #cs-navigation .cs-li-link:before {
    /* active state underline */
    content: '';
    width: 0%;
    height: 2px;
    background: var(--primary);
    opacity: 1;
    display: block;
    position: absolute;
    bottom: 0rem;
    left: 0;
    transition: width 0.3s;
  }
  #cs-navigation .cs-button-solid {
    font-family: 'Roboto', 'Arial', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-align: center;
    text-decoration: none;
    min-width: 9.375rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    color: #fff;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #cs-navigation .cs-button-solid:before {
    content: '';
    width: 0%;
    height: 100%;
    background: #555;
    opacity: 1;
    border-radius: 0.25rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #cs-navigation .cs-button-solid:hover:before {
    width: 100%;
  }
  /* footer */
  #cs-footer {
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    background-color: #e5e5e5;
    font-family: 'Inter', 'Roboto', 'Arial', sans-serif;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    padding: 2em;
    bottom: 0;
    min-height: 15vh;
    display: flex;
    justify-content: space-around;
  }
  #cs-footer .cs-li-link {
    /* Your existing styles for footer links */
    width: 100%;
    box-sizing: border-box;
    font-family: 'Inter', 'Roboto', 'Arial', sans-serif;
    color: #000000;
    position: relative; /* Ensure relative positioning for the ::after pseudo-element */
    text-decoration: none; /* Remove default underline */
  }

  #cs-footer .cs-li-link::after {
    content: ''; /* Add the underline using the ::after pseudo-element */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%; /* Full width of the link */
    height: 1px; /* Height of the underline */
    transition: width 0.3s ease; /* Add a transition effect */
  }

  #cs-footer .cs-li-link:hover::after {
    width: 100%; /* Expand the underline on hover */
    background-color: var(--primary); /* Change the color of the underline on hover */
  }
}


.card {
  width: 80%;
  margin: 3vw;
  border: 1px solid #ccc;
  position: relative;
  border-radius: 10px;
  box-shadow: 0 2px 4px #555;
}

/* Cards */
.card:hover {
  transform: translateY(-5px);
}

.card-img {
  width: 100%;
  height: auto;
}

.card-content {
  padding: 1vw;
  text-align: center;
}

.card-title {
  font-size: 100%;
  margin-bottom: 2vw;
  font-weight: semi-bold;
  text-align: center;
}

.card-text {
  font-size: 4vw;
  color: #555;
  font-weight: semi-bold;
  word-wrap: break-word;
  text-align: center;
  align-items: flex-end;
  padding-bottom: 2vw;
}

.card-container {
  margin-left: 4vw;
  margin-right: 4vw;
  display: flex;
  justify-content: space-between;
}

.img-fluid-rounded {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Standard Styles */

       .headers{
       margin: 4vw;
       }

       .graphs{
        margin: 4vw;
        position: relative;
        align-items: left;
        text-align: left;
        }


h1 {
  font-family: 'Inter', 'Roboto', Arial, sans-serif;
  font-size-adjust: 3rem;
  position: relative;
  display: flex;
  color: #555;
}
.legend {
  background-color: white; 
  padding: 10px;           /* Padding for inner content */
  border: 1px solid #ccc;  /* Light gray border */
  border-radius: 5px;      /* Rounded corners */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Slight shadow for depth */
}
  
.inline {
  margin-left: 0.5vw;
  font-size: 15px;
  position: relative;
  display: flex;
  color: rgba(0, 0, 0, 0.6);
}

#map {
  /* Style the map container */
  height: 70vh; 
  padding: 10vh;
  margin: 10vh 5vw;
  position: relative;
  display: flex;
  z-index: 100;
}
.leaflet-control-geocoder{
  display: none;
}
h2 {
  font-family: 'Inter', 'Roboto', Arial, sans-serif;
  position: relative;
  display: flex;
  font-size-adjust: 2rem;
  color: #555;
}
h3 {
  font-family: 'Inter', 'Roboto', Arial, sans-serif;
  position: relative;
  display: flex;
  font-size-adjust: 1.25rem;
  color: #555;
}
h4 {
  font-family: 'Inter', 'Roboto', Arial, sans-serif;
  position: relative;
  display: flex;
  font-size-adjust: 1.25rem;
  color: #555;
}


.btn {
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px #555;
}

.header-footer-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.footer-multi-logo{
  padding: 1em;
}

.unstyled-link{
  text-decoration: none;
  color: inherit;
}

.circular-image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  background-color: blue;
  /* commented for demo
  float: left;
  margin-left: 125px;
  margin-top: 20px;
  */
  
  /*for demo*/
  display:inline-block;
  vertical-align:middle;
}
.circular_image img{
  width:100%;
}

.circular-image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  background-color: blue;
  /* commented for demo
  float: left;
  margin-left: 125px;
  margin-top: 20px;
  */
  margin: 5px;

  /*for demo*/
  display:inline-block;
  vertical-align:middle;
}
.circular_image img{
  width:100%;
}
.profile-pic-div{
  display: table-caption;
  margin: 10px;
}

.profile-grid{
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.profile-text{
  text-align: center;
  color: #464444;
}

.title-page {
  margin-top: 3vw;
  margin-left: 20vw;
  margin-right: 20vw;
  margin-bottom: 2vw;
}