.eoy-economic {
  width: 100%;
  display: flex;
  justify-content: center;
}

.eoy-economic .econ-container {
  width: 100%;
  margin: 0;
  padding: 0;
}

p {
  margin-top: 0px;
  margin-bottom: 0px;
}

.child h3 {
  margin-top: 0px;
  margin-bottom: 0px;
}

/* .eoy-economic {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
} */
.eoy-economic .main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
}

.eoy-economic h2 {
  color: #fff;

  /* Desktop/Heading 2 */
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.792px;
}

.eoy-economic .main-text {
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  padding-bottom: 2.5rem;
}

.main-text li {
  color: #fff;

  /* Desktop/Body 1 */
  font-family: Nunito;
  font-size: 1.3125rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.main-text p {
  color: #fff;
  width: 50%;

  /* Desktop/Body 1 */
  font-family: Nunito;
  font-size: 1.3125rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.eoy-economic .subtext {
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  padding-top: 1rem;
}

.subtext p {
  color: #fff;

  /* Desktop/Caption */
  font-family: Nunito;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.352px;
}

.eoy-economic .animation {
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 28.521px;
}

.person {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition:
    color 0.6s ease,
    transform 0.6s ease;
  width: 30px;
  height: 70px;
}

.peopleContainer {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  opacity: 0;
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
  row-gap: 20px;
}

.peopleContainer.show {
  opacity: 1;
}

.special {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  align-self: end;
}

.special>.person:last-child {
  grid-row: 3;
  align-self: end;
}

.animationPeople {
  display: flex;
  padding-left: 10px;
  align-items: center;
  width: 100%;
}

.animationPeople>.peopleContainer {
  flex: 1;
  width: 100%;
}

.stats {
  display: flex;
  justify-content: space-between;
  justify-content: center;
  gap: 20px;
}

.percent-holder.p {
  justify-content: center;
}

.child {
  opacity: 0;
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.child.show {
  opacity: 1;
}

.child p {
  width: 75%;
}

.percent-holder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  width: 25%;
}

.percent-holder h3 {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 75px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.fortyOne h3 {
  color: #ffc907;
}

.fortyOne p {
  color: #fff;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.thirtyThree h3 {
  color: #ed1c65;
}

.thirtyThree p {
  color: #fff;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.eleven h3 {
  color: #4298d3;
}

.eleven p {
  color: #fff;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.five h3 {
  color: #65469c;
}

.five p {
  color: #fff;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.percent-holder p {
  font-size: 2rem;
}

@media screen and (min-width: 676px) and (max-width: 1024px) {

  /* tablet styles here */
  .percent-holder p {
    font-size: 1.3rem;
  }
}

@media screen and (min-width: 676px) {
  .main-text {
    display: flex;
  }

  .animation {
    display: flex;
  }

  .subtext {
    display: flex;
  }

  .eoy-economic .star {
    width: 118px;
    height: 118px;
  }

  .eoy-economic .header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }

  .eoy-economic .container1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    width: 100%;
  }

  .carousel {
    display: none;
  }
}

@media screen and (max-width: 675px) {
  .header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
  }

  .container1 {
    align-items: center;
  }

  .star {
    width: 90px;
    height: 90px;
  }

  .main-text {
    display: none;
  }

  .animation {
    display: none;
  }

  .subtext {
    display: none;
  }

  .eoy-economic {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
  }
}

.carousel {
  width: 100%;
}

/* The first carousel card uses a unique background */
.first-card1 {
  background:
    linear-gradient(135deg, #5ebf8d, #d5b43a) padding-box,
    linear-gradient(to right, #5ebf8d, #d5b43a) border-box;
}

.first-card1 p {
  color: #fff;

  /* Mobile/Body 1 */
  font-family: Nunito;
  font-size: 1.3125rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

@media screen and (max-width: 675px) {
  .economic-carousel-track .carousel-slide {
    background:
      linear-gradient(135deg, #35373c, #35373c),
      linear-gradient(to right, #5ebf8d, #d5b43a);
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    background-repeat: no-repeat;
  }

  .economic-carousel-track>.slide-1 {
    justify-content: center;
    border-radius: 20px;
    background:
      linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%),
      linear-gradient(142deg, #5ebf8d 0%, #d5b43a 100%);
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    background-repeat: no-repeat;
  }
}

.carousel-dots {
  display: flex;
}

.carousel-people {
  width: 100%;
  min-height: 200px;
}

.carousel-people .peopleContainer {
  row-gap: 10px;
  opacity: 1;
  place-items: center;
}

.carousel-people1 .person {
  width: 16.904px;
  height: 39.442px;
  color: #ffc907;
}

.carousel-people2 .person {
  width: 19.533px;
  height: 45.578px;
  color: #ed1c65;
}

.carousel-people3 .person {
  width: 31.25px;
  height: 72.917px;
  color: #4298d3;
}

.carousel-people4 .person {
  width: 57.078px;
  height: 133.182px;
  color: #65469c;
}

ul {
  margin-top: 0;
}

.carousel-people4 .person svg {
  width: 100%;
  height: auto;
}

.carousel-people4 .person svg[viewBox*="0 0 18"],
.carousel-people4 .person svg[viewBox*="0 0 15"] {
  transform: scale(0.6);
  transform-origin: center;
}

.statistic {
  color: #fff;

  /* Mobile/CardStatisticText */
  font-family: "Nunito Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.44px;
}

.first-card1 p {
  color: #fff;

  /* Mobile/Body 1 */
  font-family: Nunito;
  font-size: 1.3125rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.title1 {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 3rem !important;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 0;
}

.carousel-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 17px;
  align-self: stretch;
}

.carousel-people1 .peopleContainer {
  grid-template-columns: repeat(8, 1fr);
}

.carousel-people2 .peopleContainer {
  grid-template-columns: repeat(7, 1fr);
}

.carousel-people3 .peopleContainer {
  grid-template-columns: repeat(4, 1fr);
}

.carousel-people4 .peopleContainer {
  grid-template-columns: repeat(3, 1fr);
}

.carousel-scroller::-webkit-scrollbar {
  display: none;
}