/*
0 - 600px: Phone
600 - 900: Tablet portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our normal styles apply
1800px + : Big desktop

$breakpoint argument choices:
- phone
- tab-port
- tab-land
- big-desktop

ORDER: Base + typography > general layout + grid > page layout > components

NOTE: 1em = 16px
*/
/*
COLORS:
Primary color: rgb(69, 154, 157)
Secondary color: rgb(59, 118, 137)
Secondary color 2: rgb(168, 218, 220)
Secondary color 3: rgb(29, 53, 87)
Accent color: rgb(230, 150, 57)
*/
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
}
@media only screen and (max-width: 75em) {
  html {
    font-size: 56.25%;
  }
}
@media only screen and (max-width: 56.25em) {
  html {
    font-size: 50%;
  }
}
@media only screen and (min-width: 122.5em) {
  html {
    font-size: 75%;
  }
}

body {
  box-sizing: border-box;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body {
  font-weight: 400;
  line-height: 1.7;
  color: rgb(105, 105, 105);
}

h1 {
  font-family: "Merriweather Sans", sans-serif;
  font-weight: 500;
  font-size: 5rem;
  line-height: 1.2;
}

h2 {
  font-family: "Merriweather Sans", sans-serif;
  font-size: 3rem;
  font-weight: 400;
}

h3 {
  font-family: "Merriweather Sans", sans-serif;
  font-size: 2.2rem;
}

h4 {
  font-family: "Merriweather Sans", sans-serif;
  font-size: 1.8rem;
}

p,
span,
em,
strong,
pre {
  font-family: "Lora Sans", sans-serif;
  font-size: 1.6rem;
}

a {
  font-family: "Merriweather Sans", sans-serif;
  all: unset;
  font-size: 1.8rem;
}

.u-center-text {
  text-align: center !important;
}

.u-margin-bottom-little {
  margin-bottom: 1rem !important;
}

.u-margin-bottom-small {
  margin-bottom: 1.5rem !important;
}

.u-margin-bottom-medium {
  margin-bottom: 4rem !important;
}

.u-margin-bottom-big {
  margin-bottom: 8rem !important;
}

.u-margin-bottom-huge {
  margin-bottom: 10rem !important;
}

.u-margin-top-small {
  margin-top: 4rem !important;
}

.u-margin-top-big {
  margin-top: 8rem !important;
}

.u-margin-top-huge {
  margin-top: 10rem !important;
}

.u-margin-none {
  margin: 0;
}

.articles-list {
  margin-bottom: 8rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.article-card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
  gap: 2rem;
  width: 100%;
  max-width: 100%;
}

.article-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  background-color: rgba(8, 20, 24, 0.1);
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border: 1px solid rgb(185, 185, 185);
  overflow: hidden;
  width: 100%;
}
.article-card__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.article-card__content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;
}
.article-card__tag {
  background-color: rgb(59, 118, 137);
  color: white;
  border-radius: 1rem;
  padding: 0.5rem 2rem;
  width: fit-content;
}
.article-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}
.article-card__pfp-name {
  display: flex;
  gap: 2rem;
  align-items: center;
}
.article-card__pfp {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
}
.article-card__name {
  font-size: 2rem;
}
.article-card__date-like-share {
  display: flex;
  gap: 2rem;
}
.article-card__date {
  font-size: 1.8rem;
  line-height: 2;
}
.article-card__like, .article-card__share {
  font-size: 1.8rem;
  cursor: pointer;
}

.article-content {
  font-size: 2.2rem;
}

.article-meta span {
  font-size: 2.4rem;
}

.article-categories {
  margin-bottom: 8rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.article-categories ul {
  display: flex;
  justify-content: start;
  list-style: none;
  gap: 2rem;
}
.article-categories ul li {
  background-color: rgb(59, 118, 137);
  color: white;
  border-radius: 1rem;
}
.article-categories ul li:hover {
  cursor: pointer;
}
@media only screen and (max-width: 56.25em) {
  .article-categories ul {
    flex-direction: column;
    width: 30%;
  }
}
.article-categories__all {
  display: inline-flex;
  border-left: 5px solid blue;
  padding: 0.5rem 2rem;
  border-radius: 1rem;
}
.article-categories__technology {
  display: inline-flex;
  border-left: 5px solid cyan;
  padding: 0.5rem 2rem;
  border-radius: 1rem;
}
.article-categories__finance {
  display: inline-flex;
  border-left: 5px solid violet;
  padding: 0.5rem 2rem;
  border-radius: 1rem;
}
.article-categories__crypto {
  display: inline-flex;
  border-left: 5px solid yellowgreen;
  padding: 0.5rem 2rem;
  border-radius: 1rem;
}
.article-categories__investment {
  display: inline-flex;
  border-left: 5px solid orangered;
  padding: 0.5rem 2rem;
  border-radius: 1rem;
}
.article-categories__startups {
  display: inline-flex;
  border-left: 5px solid yellow;
  padding: 0.5rem 2rem;
  border-radius: 1rem;
}
.charts-container {
  display: flex;
  justify-content: space-between;
  margin: 100px 0;
  height: 300px;
  position: relative;
  width: 100%;
}
@media only screen and (max-width: 56.25em) {
  .charts-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 1000px;
  }
}
@media only screen and (max-width: 37.5em) {
  .charts-container {
    height: 1320px;
    margin-top: 16rem;
  }
  .charts-container h2 {
    font-size: clamp(2rem, 6vw, 3rem);
  }
}

.bar-chart {
  display: flex;
  width: 43%;
  gap: 10px;
  align-items: flex-end; /* Aligns bars to the bottom */
  position: relative;
  background: repeating-linear-gradient(to top, #7e7e7e, #e0e0e0 1px, transparent 1px, transparent 30px);
}
@media only screen and (max-width: 56.25em) {
  .bar-chart {
    width: 90%;
    height: 100%;
    margin-left: auto;
  }
}

@media only screen and (max-width: 56.25em) {
  .bar-chart--2 {
    margin-top: 50rem;
  }
}
@media (max-width: 520px) {
  .bar-chart--2 {
    margin-top: 60rem;
  }
}
@media (max-width: 450px) {
  .bar-chart--2 {
    margin-top: 70rem;
  }
}
@media (max-width: 380px) {
  .bar-chart--2 {
    margin-top: 80rem;
  }
}
@media (max-width: 330px) {
  .bar-chart--2 {
    margin-top: 90rem;
  }
}
@media (max-width: 300px) {
  .bar-chart--2 {
    margin-top: 100rem;
  }
}

.bar-chart__header {
  position: absolute;
  bottom: 100%;
  width: 100%;
  margin-bottom: 20px;
  height: 102px;
  color: rgb(59, 118, 137);
}
@media only screen and (max-width: 56.25em) {
  .bar-chart__header {
    height: auto;
  }
}

.bar-chart__side-values {
  position: absolute;
  right: 100%;
  display: flex;
  justify-content: space-between; /* Evenly space out the text cards */
  height: 300px;
  align-items: space-between;
}

.bar-chart__vert-text {
  writing-mode: vertical-lr; /* Rotate text 90 degrees clockwise */
  transform: rotate(180deg);
  text-align: center;
}

.bar-chart__num {
  margin-right: 10px;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.bar-chart__num span {
  font-size: clamp(7px, 1.1vw, 20px);
}

.bar-chart__line {
  width: 2px;
  height: 100%;
  background-color: #bebebe;
  float: right;
  margin-right: 5px;
}

.bar-chart__bottom-text-container {
  position: absolute;
  top: 100%;
  margin-top: 40px;
}
.bar-chart__bottom-text-container p {
  font-size: clamp(15px, 1.1vw, 20px);
}
.bar-chart__bottom-text-container h3 {
  color: rgb(59, 118, 137);
}

.bar-chart__bar {
  width: 20%; /* Adjust based on the number of bars */
  background-color: #333;
  transition: height 0.3s ease;
  position: relative;
  border-radius: 3px 3px 0 0;
  height: 0;
  transition: height 0.3s ease;
  --bar-height-1: 20%; /* Example variable for dynamic height */
  --bar-height-2: 28%; /* Example variable for dynamic height */
  --bar-height-3: 40%; /* Example variable for dynamic height */
  --bar-height-4: 54%; /* Example variable for dynamic height */
  --bar-height-5: 60%; /* Example variable for dynamic height */
  --bar-height-6: 68%; /* Example variable for dynamic height */
  --bar-height-7: 76%; /* Example variable for dynamic height */
  --bar-height-8: 80%; /* Example variable for dynamic height */
  --bar-height-9: 84%; /* Example variable for dynamic height */
  --bar-height-10: 14%; /* Example variable for dynamic height */
  --bar-height-11: 22%; /* Example variable for dynamic height */
  --bar-height-12: 34%; /* Example variable for dynamic height */
  --bar-height-13: 45%; /* Example variable for dynamic height */
  --bar-height-14: 55%; /* Example variable for dynamic height */
  --bar-height-15: 64%; /* Example variable for dynamic height */
  --bar-height-16: 75%; /* Example variable for dynamic height */
  --bar-height-17: 84%; /* Example variable for dynamic height */
  --bar-height-18: 95%; /* Example variable for dynamic height */
}

.bar-chart__label {
  position: absolute;
  bottom: 100%; /* Position label above the bar */
  text-align: center;
  width: 100%;
  color: #333;
  font-size: clamp(7px, 1.1vw, 20px);
  margin-bottom: 10px;
}

.bar-chart__label-bottom {
  position: absolute;
  top: 100%; /* Position label above the bar */
  text-align: center;
  width: 100%;
  color: #333;
  font-size: clamp(10px, 1.1vw, 20px);
}

.button {
  font-family: "Merriweather Sans", sans-serif;
  border: 1.5px solid #fff;
  padding: 0.7rem 3rem;
  border-radius: 1000px;
  letter-spacing: 0.1rem;
  display: inline-block;
  transition: all 0.15s ease-in-out, background-color 0.3s ease;
  cursor: pointer;
  text-align: center;
}

.button:hover {
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.button--default {
  background: none;
  color: #fff;
  text-align: center;
}

.button--default:hover {
  transform: scale(1.05);
  background-color: rgba(255, 255, 255, 0.3);
}

.button--default--dark {
  border: 2px solid rgb(105, 105, 105);
  color: rgb(73, 73, 73);
}

.button--default--dark:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

.button--default:active {
  transform: scale(1);
}

.button--action {
  background-color: rgb(230, 150, 57);
  color: #fff;
}

.button--action:hover {
  background-color: rgb(255, 196, 0);
  color: rgb(73, 73, 73);
  border: none;
  transform: scale(1.05);
}

.button--action:active {
  transform: scale(1);
}

.button--grants {
  position: fixed;
  top: 3rem;
  right: 1rem;
  z-index: 1000;
  margin: 0 3rem;
  color: #fff;
}
@media only screen and (max-width: 56.25em) {
  .button--grants, .button--grants:hover {
    right: 50%;
    transform: translateX(50%) scale(1.2);
    margin: 0;
  }
}
@media only screen and (max-width: 37.5em) {
  .button--grants {
    font-size: 1rem;
    top: 4rem;
  }
}

.button--donation {
  color: #fff;
}

.cta-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  align-items: center;
  min-width: 20rem;
  width: 35%;
  height: auto;
  padding: 2rem;
  border-radius: 1rem;
}
@media only screen and (max-width: 56.25em) {
  .cta-box {
    width: 80%;
    padding: 2rem 4rem;
    height: auto;
  }
}
@media only screen and (max-width: 37.5em) {
  .cta-box {
    width: 95%;
  }
}
.cta-box__text {
  color: #fff;
  z-index: 3;
  text-align: center;
  font-size: 1.8rem;
}
.cta-box__button {
  z-index: 3;
}

.cta-box:hover::after {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 10%, rgba(0, 0, 0, 0.4));
}

.cta-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 10%, rgba(0, 0, 0, 0.2));
  background-blend-mode: multiply;
  z-index: 2;
  border-radius: 1rem;
  transition: all 0.2s ease-in-out;
}

.cta-box--1 {
  position: relative;
  background-image: url("/img/pikaso_texttoimage_35mm-film-photography-A-Nigerian-market-owner-a-mi.jpeg");
  background-size: cover;
  background-position: center center;
  z-index: 1;
}

.cta-box--2 {
  position: relative;
  background-image: url("/img/pikaso_embed.png");
  background-size: cover;
  z-index: 1;
}

.flex-con__item-2 {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.flex-con__form-item {
  margin-bottom: 2rem;
}

.flex-con__form-item--checkbox {
  display: flex;
  justify-content: left;
  align-items: start;
  width: 100%;
  padding: 1rem;
  margin: 2rem 0;
}

.flex-con__checkbox {
  margin-right: 2rem;
}

.flex-con__checkbox-text {
  line-height: 2rem;
  margin-top: -0.2rem;
}

.flex-con__form-item-group-inline {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
}
.flex-con__form-item-group-inline input[type=radio] {
  appearance: none;
  -webkit-appearance: none;
  width: 2rem;
  height: 2rem;
  max-height: 2rem;
  max-width: 2rem;
  border: 2px solid #888;
  border-radius: 50%;
  background-color: white;
  cursor: pointer;
  outline: none;
  transition: all 0.3s ease;
}
.flex-con__form-item-group-inline input[type=radio]:hover {
  border-color: rgb(230, 150, 57);
}
.flex-con__form-item-group-inline input[type=radio]:checked {
  background-color: rgb(255, 196, 0);
  border-color: rgb(230, 150, 57);
}
.flex-con__form-item-group-inline {
  /*   & input[type="radio"]:checked::after {
        content: '';
        display: block;
        width: 10px;
        height: 10px;
        background-color: white;
        border-radius: 50%;
        margin: auto; 
        position: relative;
        top: 2px;
    } */
}
.flex-con__form-item-group-inline label {
  margin-left: 8px;
  font-size: 16px;
  cursor: pointer;
}

.flex-con__form-item:invalid {
  border-bottom: 2px solid red;
}

.flex-con__form-item:valid {
  border-bottom: 2px solid green;
}

.flex-con__form-item--inline {
  display: flex;
  align-items: start;
  height: 100%;
}
.flex-con__form-item--inline--item-1 input[type=number] {
  display: none;
  flex: 0;
  width: 6rem;
  margin: auto 0;
}
.flex-con__form-item--inline label {
  height: 100%;
}

.flex-con__form-item--radio {
  padding: 0;
  margin: 0;
}

.button--default--return {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 110%;
  width: 19rem;
}

#age {
  min-width: 3rem;
}

.file-upload {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* .flex-con__form-item-button {
    color: transparent; 
}
 */
.flex-con__form-item-button {
  background-color: rgba(255, 255, 255, 0.4);
  color: #fff;
  border: 1px solid rgb(255, 255, 255);
  width: 100%;
  border-radius: 5px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  content: "Upload file";
}

.flex-con__form-item-button:hover {
  background-color: rgb(73, 73, 73);
  color: #fff;
}

.flex-con__form-item-button:active {
  background-color: black;
  color: #fff;
}

.flex-con__form-item-button::-webkit-file-upload-button {
  padding: 1rem 1rem;
  background-color: rgba(255, 255, 255, 0.4); /* Blue background */
  color: white; /* White text */
  border: 1px solid rgb(255, 255, 255);
  width: 100%;
  border-radius: 5px; /* Rounded corners */
  font-size: 1.2rem; /* Adjust font size */
  cursor: pointer; /* Pointer cursor on hover */
  transition: background-color 0.3s ease;
  content: "Upload file";
}

.flex-con__form-item-button::-webkit-file-upload-button:hover {
  background-color: rgb(73, 73, 73);
  color: #fff;
}

.flex-con__form-item-button::-webkit-file-upload-button:active {
  background-color: black;
  color: #fff;
}

.flex-con__form-item-button::file-selector-button {
  padding: 10px 20px;
  background-color: transparent;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 2rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  content: "Upload file";
}

/* .flex-con__form-item-button::file-selector-button:hover {
    color: $color-grey-darker;
} */
/* Optional: Customize the "No file chosen" part */
/* .flex-con__form-item-button::-webkit-file-upload-button {
    padding: 10px 20px;
    margin-right: 10px; 
    background-color: #0056b3; 
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
} */
/* .flex-con__form-item-button::-webkit-file-upload-button:hover {
    background-color: #003f7f; 
} */
.donation-card {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background-color: rgba(8, 20, 24, 0.8);
  color: #fff;
  width: 70%;
  height: 70%;
  margin: auto;
  border-radius: 2rem;
  padding: 5rem;
  max-width: 60rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
@media only screen and (max-width: 37.5em) {
  .donation-card {
    text-align: center;
  }
}

.donation-card__amount {
  -webkit-appearance: none;
  -moz-appearance: textfield;
  height: 3rem;
  width: 35%;
  min-height: 40px;
  min-width: 120px;
  border: none;
  border-radius: 0.5rem;
  padding: 5px;
  font-size: 18px;
  text-align: center;
  appearance: none;
}

input[type=number]:focus,
input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus {
  border: 2px solid rgb(255, 196, 0);
  outline: none;
}

.leadership-explore {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  align-items: center;
}

.explore-container {
  width: 80vw;
  padding: 5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 40rem;
  gap: 5rem;
  border-radius: 2rem;
  background-color: rgba(8, 20, 24, 0.1);
}
@media only screen and (max-width: 75em) {
  .explore-container {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 56.25em) {
  .explore-container {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 50rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .explore-container {
    grid-template-columns: repeat(1, 1fr);
    grid-auto-rows: 60rem;
    gap: 10rem;
    width: 100vw;
    border-radius: 0;
    padding: 5rem 3rem;
  }
}

.l-e-box {
  width: 100%;
  border-radius: 1.5rem;
  overflow: hidden;
  transition: box-shadow, transform 0.15s ease-in;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

#l-e-box--active {
  width: 100%;
  border-radius: 1.5rem;
  overflow: hidden;
  transition: all 0.1s;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1;
}
@media only screen and (max-width: 56.25em) {
  #l-e-box--active {
    flex: none;
    width: 50%;
    height: 50rem;
    gap: none;
  }
}
@media only screen and (max-width: 37.5em) {
  #l-e-box--active {
    width: 100%;
  }
}
#l-e-box--active:hover {
  box-shadow: none;
  transform: none;
  cursor: auto;
}
#l-e-box--active .l-e-box__text {
  padding: 1rem;
  justify-content: start;
}

.l-e-box:hover {
  cursor: pointer;
  transform: scale(1.01);
  transform-origin: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border: 1px solid rgb(255, 196, 0);
}
.l-e-box:hover .l-e-box__image {
  filter: grayscale(80%);
}
.l-e-box:hover .l-e-box__text {
  color: #fff;
}
.l-e-box:hover .l-e-box__text strong,
.l-e-box:hover .l-e-box__text em {
  font-size: 2rem;
}
.l-e-box:hover .l-e-box__text em {
  color: rgb(255, 196, 0);
}

.l-e-box:active {
  transform: scale(0.97);
  box-shadow: none;
}

.l-e-box__image {
  filter: grayscale(100%);
  width: 100%;
  height: 65%;
  z-index: 1;
}
.l-e-box__image > img {
  object-fit: cover;
  object-position: top;
  width: 100%;
  height: 100%;
}

.l-e-box__text {
  z-index: 2;
  display: flex;
  height: 35%;
  flex-direction: column;
  justify-content: center;
  padding: 0 1rem;
  color: #fff;
  background-color: rgb(51, 59, 61);
  gap: 1rem;
  /*  em {
     opacity: 0;
   } */
}

.hide {
  display: none;
}

#search-error {
  font-size: 2rem;
  text-align: center;
  color: red;
  font-weight: 700;
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(-2rem);
}

.faq-item {
  width: 100%;
  border: 0.3rem solid rgb(185, 185, 185);
  border-radius: 6px;
  margin-bottom: 20px;
  padding: 10px 15px;
  position: relative;
  transition: all 0.3s ease;
}
.faq-item .showHide {
  /*display: none;*/ /* default display */
  opacity: 0;
  height: 0;
  overflow: hidden;
}
.faq-item .hide {
  /*display: none;*/
  opacity: 0;
  transition: opacity 0.3s ease;
}
.faq-item .show {
  display: block;
  opacity: 1;
  height: auto; /* Allow height to expand */
}
.faq-item:hover {
  cursor: pointer;
  border: 0.3rem solid #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.faq-item:active {
  box-shadow: none;
}
.faq-item i {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 1.6rem;
}
.faq-item h3 {
  font-weight: 500;
}

.grant-card {
  background-color: rgba(8, 20, 24, 0.1);
  height: auto;
  min-height: 15rem;
  width: 100%;
  overflow: hidden;
  border-radius: 1.5rem;
  display: grid;
  grid-template-columns: [pic-start] minmax(13rem, 1fr) [pic-end details-start] 5fr [details-end];
  grid-template-rows: [text-start] 1fr [text-end button-start] 1fr [button-end];
}
@media only screen and (max-width: 37.5em) {
  .grant-card {
    grid-template-rows: [pic-start] minmax(20rem, 30rem) [pic-end details-start] 1fr [details-end button-start] 0.5fr [button-end];
  }
}
.grant-card:hover > .grant-card__item-1::after {
  opacity: 0;
}
.grant-card__item-1 {
  overflow: hidden;
  position: relative;
  height: 100%;
  grid-column: pic-start/pic-end;
  grid-row: text-start/button-end;
}
.grant-card__item-1::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 10;
  transition: all 0.2s;
}
@media only screen and (max-width: 37.5em) {
  .grant-card__item-1 {
    grid-row: pic-start/pic-end;
    grid-column: 1/-1;
  }
}
.grant-card__item-2 {
  padding: 3rem;
  color: rgb(73, 73, 73);
  /* display: flex;
  align-items: center; */
}
.grant-card__item-2 span {
  font-weight: 700;
}
@media only screen and (max-width: 37.5em) {
  .grant-card__item-2 {
    grid-row: details-start/details-end;
    grid-column: 1/-1;
    text-align: center;
  }
}
.grant-card__item-3 {
  padding: 3rem;
}
@media only screen and (max-width: 37.5em) {
  .grant-card__item-3 {
    grid-row: button-start/button-end;
    grid-column: 1/-1;
    align-self: center;
    justify-self: center;
  }
}
.grant-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  object-position: top left;
}
.grant-card__image--2 {
  object-position: top center;
}
.grant-card__image--3 {
  object-position: top right;
}
.grant-card--4 .grant-card__item-1 .grant-card__image--3 {
  object-position: top left;
}

.flex-con__form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.flex-con__header {
  text-align: center;
}

.flex-con__form-item {
  border-radius: 0.5rem;
  width: 100%;
  height: 3.5rem;
  border: none;
  padding-left: 1rem; /* Adjust padding as needed */
  padding-top: 0.5rem; /* Adjust padding for vertical spacing */
  padding-bottom: 0.5rem;
  font-size: 1.6rem;
}

.file-upload {
  text-align: left;
}

.file-upload label {
  display: inline-block;
  width: 100%;
  font-size: 1.6rem;
  padding: 1rem 2rem;
  text-align: center;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.4);
  border: 1px solid #fff;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 2rem;
}

.file-upload label i {
  margin-right: 8px;
}

.file-upload label:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.button--default--centered {
  margin: auto;
  margin-top: 3rem;
  font-size: 2rem;
}

.drop-area {
  border: 1px dashed #fff;
  border-radius: 0.5rem;
  padding: 5rem;
  text-align: center;
  transition: background-color 0.3s ease;
  background-color: rgba(255, 255, 255, 0.2);
  margin-bottom: 2rem;
}

.drop-area.dragover {
  background-color: rgba(255, 255, 255, 0.4);
  border-color: #fff;
}

.drop-area p {
  color: #fff;
  margin: 0;
}

-step form styles .form-section {
  width: 100%;
}
-step form styles .form-section.hidden {
  display: none;
}
-step form styles .form-section h3 {
  color: #fff;
  font-size: 2rem;
  margin-bottom: 2rem;
  text-align: left;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 2rem;
}
.form-group label {
  display: block;
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-align: left;
}

.form-row {
  display: flex;
  gap: 1rem;
}
.form-row .form-group {
  flex: 1;
}

.phone-input {
  display: flex;
  gap: 0.5rem;
}
.phone-input .country-code {
  width: 100px;
  height: 3.5rem;
  border: none;
  border-radius: 0.5rem;
  padding: 0 1rem;
  font-size: 1.4rem;
  background-color: rgba(255, 255, 255, 0.9);
}
.phone-input .phone-number {
  flex: 1;
}

.address-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}
.address-row .address-input {
  flex: 1;
}

.form-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3rem;
}
.form-navigation .button {
  padding: 1rem 2rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 1.6rem;
  cursor: pointer;
  transition: all 0.3s ease;
}
.form-navigation .button--primary {
  background-color: rgb(69, 154, 157);
  color: #fff;
}
.form-navigation .button--primary:hover {
  background-color: rgb(59, 118, 137);
}
.form-navigation .button--secondary {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: 1px solid #fff;
}
.form-navigation .button--secondary:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
.form-navigation .button--tertiary {
  background-color: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.form-navigation .button--tertiary:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.file-upload-area {
  border: 2px dashed rgba(255, 255, 255, 0.5);
  border-radius: 0.5rem;
  padding: 3rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: rgba(255, 255, 255, 0.1);
  margin-bottom: 1rem;
}
.file-upload-area:hover, .file-upload-area.dragover {
  border-color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
}
.file-upload-area .upload-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}
.file-upload-area p {
  color: #fff;
  font-size: 1.6rem;
  margin: 0;
}

.file-info .download-link {
  color: #007bff;
  text-decoration: underline;
  font-size: 1.4rem;
  display: block;
  margin-bottom: 1rem;
}
.file-info .download-link:hover {
  color: #0056b3;
}
.file-info .file-requirements {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.file-info .file-requirements .error-icon {
  font-size: 1.6rem;
  color: #ff6b6b;
}
.file-info .file-requirements p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.2rem;
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    gap: 0;
  }
  .address-row {
    flex-direction: column;
    gap: 0;
  }
  .phone-input {
    flex-direction: column;
  }
  .phone-input .country-code {
    width: 100%;
  }
  .form-navigation {
    flex-direction: column;
    gap: 1rem;
  }
  .form-navigation .button {
    width: 100%;
  }
}
.modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
  z-index: 99999 !important;
}
.modal-overlay.hidden {
  display: none !important;
}

.modal-container {
  background: white !important;
  border-radius: 0.5rem !important;
  max-width: 60rem !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  width: 100% !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  position: relative !important;
  z-index: 100000 !important;
}

.modal-content {
  padding: 2rem;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
}
.modal-header .leader-info {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.modal-header .leader-info .leader-avatar {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgb(168, 218, 220);
}
.modal-header .leader-info .leader-details .leader-name {
  font-size: 2rem;
  font-weight: 700;
  color: rgb(29, 53, 87);
  margin-bottom: 0.5rem;
}
.modal-header .leader-info .leader-details .leader-title {
  color: rgb(105, 105, 105);
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.modal-header .leader-info .leader-details .leader-period {
  color: rgb(69, 154, 157);
  font-weight: 600;
}
.modal-header .close-button {
  background: none;
  border: none;
  font-size: 2rem;
  color: rgb(131, 131, 131);
  cursor: pointer;
  padding: 0;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}
.modal-header .close-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
  color: rgb(73, 73, 73);
}

.modal-tabs .tab-buttons {
  display: flex;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem;
}
.modal-tabs .tab-buttons .tab-button {
  background: none;
  border: none;
  padding: 1rem 1.5rem;
  cursor: pointer;
  font-weight: 500;
  color: rgb(131, 131, 131);
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}
.modal-tabs .tab-buttons .tab-button:hover {
  color: rgb(73, 73, 73);
}
.modal-tabs .tab-buttons .tab-button.active {
  color: rgb(69, 154, 157);
  border-bottom-color: rgb(69, 154, 157);
}
.modal-tabs .tab-content-wrapper {
  min-height: 20rem;
}

.tab-content-section .tab-header {
  margin-bottom: 1.5rem;
}
.tab-content-section .tab-header h3 {
  font-size: 1.8rem;
  font-weight: 600;
  color: rgb(29, 53, 87);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tab-content-section .tab-header h3 i {
  color: rgb(69, 154, 157);
}
.tab-content-section .tab-items {
  display: grid;
  gap: 1rem;
}
.tab-content-section .tab-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background-color: rgba(69, 154, 157, 0.05);
  border-radius: 0.5rem;
  border-left: 3px solid rgb(69, 154, 157);
  transition: all 0.3s ease;
}
.tab-content-section .tab-item:hover {
  background-color: rgba(69, 154, 157, 0.1);
  transform: translateX(0.25rem);
}
.tab-content-section .tab-item i {
  color: rgb(69, 154, 157);
  margin-top: 0.25rem;
  flex-shrink: 0;
}
.tab-content-section .tab-item span {
  font-weight: 500;
  line-height: 1.5;
}
.tab-content-section .tab-item.family-item {
  background-color: rgba(168, 218, 220, 0.1);
  border-left-color: rgb(168, 218, 220);
}
.tab-content-section .tab-item.family-item:hover {
  background-color: rgba(168, 218, 220, 0.2);
}
.tab-content-section .tab-item.family-item i {
  color: rgb(59, 118, 137);
}
.tab-content-section .tab-item.allegation-item {
  background-color: rgba(230, 150, 57, 0.1);
  border-left-color: rgb(230, 150, 57);
}
.tab-content-section .tab-item.allegation-item:hover {
  background-color: rgba(230, 150, 57, 0.15);
}
.tab-content-section .tab-item.allegation-item i {
  color: rgb(230, 150, 57);
}
.tab-content-section .no-data {
  text-align: center;
  padding: 3rem 1rem;
  color: rgb(131, 131, 131);
  font-style: italic;
  font-size: 1.8rem;
}

@media (max-width: 768px) {
  .modal-overlay {
    padding: 0.5rem;
  }
  .modal-content {
    padding: 1.5rem;
  }
  .modal-header {
    flex-direction: column;
    gap: 1rem;
  }
  .modal-header .leader-info {
    width: 100%;
  }
  .modal-header .close-button {
    align-self: flex-end;
  }
  .modal-tabs .tab-buttons {
    flex-wrap: wrap;
  }
  .modal-tabs .tab-buttons .tab-button {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }
}
.gender-options {
  display: flex;
  gap: 2rem;
  margin-top: 1rem;
}
.gender-options .gender-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.gender-options .gender-option input[type=radio] {
  width: auto;
  height: auto;
  margin: 0;
  cursor: pointer;
}
.gender-options .gender-option label {
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.form-row .form-group:last-child .flex-con__form-item {
  height: 3.5rem;
}

@media (max-width: 768px) {
  .gender-options {
    flex-direction: column;
    gap: 1rem;
  }
}
.account-input {
  font-family: "Courier New", monospace;
  letter-spacing: 1px;
  text-align: left;
}
.account-input::placeholder {
  text-align: left;
  font-family: inherit;
}

.flex-con__form-item:invalid,
.account-input:invalid {
  border: 2px solid #ff6b6b;
  box-shadow: 0 0 5px rgba(255, 107, 107, 0.3);
}

.flex-con__form-item:valid,
.account-input:valid {
  border: 2px solid rgba(69, 154, 157, 0.5);
  box-shadow: 0 0 5px rgba(69, 154, 157, 0.2);
}

#currency {
  width: 100% !important;
  box-sizing: border-box;
}

.format-helper {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.5rem;
  font-style: italic;
}

anced validation styling for account inputs .account-input:invalid {
  border: 2px solid #ff6b6b !important;
  box-shadow: 0 0 5px rgba(255, 107, 107, 0.5) !important;
}
anced validation styling for account inputs .account-input:valid {
  border: 2px solid rgba(69, 154, 157, 0.7) !important;
  box-shadow: 0 0 5px rgba(69, 154, 157, 0.3) !important;
}
anced validation styling for account inputs .account-input::after {
  content: attr(data-length) "/10";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
}

.form-group {
  position: relative;
}
.form-group .validation-message {
  position: absolute;
  bottom: -2rem;
  left: 0;
  font-size: 1.2rem;
  color: #ff6b6b;
  font-style: italic;
}

.job-card {
  display: flex;
  flex-direction: column;
  background-color: rgba(8, 20, 24, 0.1);
  border: 1px solid rgb(185, 185, 185);
  padding: 2rem;
  border-radius: 1rem;
}
.job-card h3 {
  color: rgb(59, 118, 137);
  margin-bottom: 1rem;
}
.job-card__details {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
.job-card__detail {
  display: flex;
  gap: 2rem;
  align-items: center;
}
.job-card__detail i {
  transform: scale(1.5);
}
.job-card__description {
  margin-bottom: 1rem;
}
.job-card__apply-button {
  border: 1px solid white;
  background-color: rgb(59, 118, 137);
  color: white;
  align-self: flex-end;
}
.job-card__apply-text {
  color: rgb(59, 118, 137);
  font-weight: 600;
}
.job-card__apply-text span {
  color: rgb(230, 150, 57);
}

.top-bar__logo {
  background-image: url("/img/LOGO.png");
  background-color: transparent;
  opacity: 0.75;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 9rem;
  width: 11rem;
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1000;
  cursor: pointer;
  transition: all 0.1s ease-in;
}
.top-bar__logo:hover {
  transform: scale(1.2);
  opacity: 1;
}
.top-bar__logo:active {
  transform: scale(1);
}
@media only screen and (max-width: 56.25em) {
  .top-bar__logo {
    height: 11rem;
    width: 13rem;
    top: 0.3rem;
    left: 0.3rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .top-bar__logo {
    height: 9rem;
    width: 10rem;
    top: 1rem;
  }
}

@media only screen and (max-width: 56.25em) {
  .top-bar__logo--hide {
    display: none;
  }
}

.nav-padder {
  padding: 5rem;
}
@media only screen and (max-width: 56.25em) {
  .nav-padder {
    padding: 0;
  }
}

.nav-bar {
  width: 100%;
  z-index: 3;
}
@media only screen and (max-width: 56.25em) {
  .nav-bar {
    visibility: hidden;
    display: none;
  }
}

.nav-bar__nav-item {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  list-style: none;
}

.nav-bar__nav-item li {
  text-align: center;
  border-radius: 0.5rem;
  cursor: pointer;
  gap: 2rem;
}

.nav-bar__nav-item li a {
  display: block; /* Make the anchor fill the li */
  font-family: "Merriweather Sans", sans-serif;
  padding: 0.4rem 3rem;
  transition: all 0.3s ease;
  border-radius: 0.5rem;
}

.nav-bar__nav-item--light li a {
  color: #fff;
}

.nav-bar__nav-item--dark li a {
  color: rgb(73, 73, 73);
}

.nav-bar__nav-item li a:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transform: scale(1.1);
}

.nav-bar__nav-item--light li a:hover {
  background-color: #fff;
  color: rgb(73, 73, 73);
}

.nav-bar__nav-item--dark li a:hover {
  background-color: rgb(73, 73, 73);
  color: #fff;
}

.nav-bar__nav-item li a:active {
  transform: scale(1);
}

.nav-bar__nav-item li a.nav-bar__current-nav-item {
  transform: scale(1.1);
}

.nav-bar__nav-item--light li a.nav-bar__current-nav-item {
  background-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.nav-bar__nav-item--dark li a.nav-bar__current-nav-item {
  background-color: rgba(0, 0, 0, 0.2);
  color: rgb(73, 73, 73);
}

.nav-bar__nav-item--light li a.nav-bar__current-nav-item:hover {
  background-color: #fff;
  color: rgb(73, 73, 73);
}

.nav-bar__nav-item--dark li a.nav-bar__current-nav-item:hover {
  background-color: rgb(73, 73, 73);
  color: #fff;
}

@media only screen and (max-width: 56.25em) {
  .b-menu-positioner {
    position: fixed;
    right: 1rem;
    top: 1.5rem;
    cursor: pointer;
    z-index: 1000;
    height: 5rem;
  }
  .b-menu-positioner .b-menu {
    position: absolute;
    background-color: #fff;
    padding: 1.5rem;
    padding-bottom: 1rem;
    border-radius: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    width: 6.5rem;
    height: 6.5rem;
    right: 20px;
    cursor: pointer;
    align-content: center;
    transition: all 0.2s;
    z-index: 8000;
  }
  .b-menu-positioner .b-menu:hover {
    transform: scale(1.1);
  }
  .b-menu-positioner .b-menu:active {
    transform: scale(0.9);
  }
  .b-menu-positioner .b-menu {
    /*      .icon {
             position: relative;
             top: -.5rem;

             &,
             &::before,
             &::after {
                 width: 100%;
                 height: .2rem;
                 background-color: #1D3557;
                 display: inline-block;
             }

             &::before,
             &::after {
                 content: "";
                 position: absolute;
                 left: 0;
                 transition: all .2s;
             }

             &::before {
                 top: -1rem;
             }

             &::after {
                 top: 1rem;
             }

             &:hover &::before {
                 top: -1rem;
             }
         } */
  }
  .b-menu-positioner .b-menu .icon {
    position: relative;
    bottom: 0.5rem;
    width: 2rem;
    height: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    display: block;
  }
  .b-menu-positioner .b-menu .icon, .b-menu-positioner .b-menu .icon::before, .b-menu-positioner .b-menu .icon::after {
    width: 100%;
    height: 0.2rem;
    background-color: #1D3557;
    display: inline-block;
  }
  .b-menu-positioner .b-menu .icon::before, .b-menu-positioner .b-menu .icon::after {
    content: "";
    position: absolute;
    left: 0;
    transition: all 0.2s;
  }
  .b-menu-positioner .b-menu .icon::before {
    top: -1rem;
  }
  .b-menu-positioner .b-menu .icon::after {
    top: 1rem;
  }
  .b-menu-positioner .b-menu .icon:hover .b-menu-positioner .b-menu .icon::before {
    top: -1rem;
  }
}
@media only screen and (max-width: 56.25em) and (max-width: 37.5em) {
  .b-menu-positioner .b-menu {
    width: 5rem;
    height: 5rem;
    padding: 1rem;
    padding-bottom: 0.5rem;
    top: 1.5rem;
    right: 1rem;
  }
}

.vert-nav-bar {
  position: fixed;
  right: 0;
  top: 10rem;
  z-index: 4000;
  padding: 1rem;
  visibility: hidden;
}
@media only screen and (max-width: 56.25em) {
  .vert-nav-bar {
    visibility: visible;
    height: 0;
    display: none;
    transition: visibility 0.3s, height 0.3s;
  }
}

.vert-nav-item {
  background-color: rgba(8, 20, 24, 0.8);
  padding: 2rem;
  list-style-type: none;
  border-radius: 1rem;
  backdrop-filter: blur(7px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.vert-nav-item li {
  margin: 1rem 0;
  border-radius: 0.5rem;
  cursor: pointer;
}
.vert-nav-item li a {
  display: block; /* Make the anchor fill the li */
  font-family: "Merriweather Sans", sans-serif;
  padding: 5px 10px;
  transition: all 0.3s ease;
  border-radius: 0.5rem;
  color: #fff;
}
.vert-nav-item li a:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transform: scale(1.1);
  background-color: #fff;
  color: rgb(73, 73, 73);
}
.vert-nav-item li a:active {
  transform: scale(1);
}

.show {
  display: block;
}

.profile-card {
  display: grid;
  background-color: rgba(8, 20, 24, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 1rem;
  width: 100%;
  min-height: 20rem;
  overflow: hidden;
  margin-bottom: 5rem;
  gap: 1rem;
  align-items: center;
  grid-template-columns: [img-start] minmax(20rem, 1fr) [img-end details-start] 5fr [details-end];
  grid-template-rows: [h-start] 3rem [h-end p-start] 1fr [p-end];
}
@media only screen and (max-width: 37.5em) {
  .profile-card {
    text-align: center;
    grid-template-columns: 1fr;
    grid-template-rows: [img-start] minmax(20rem, 30rem) [img-end h-start] 4rem [h-end p-start] 1fr [p-end];
    gap: 0;
    row-gap: 4rem;
    padding: 0;
  }
}

.profile-card__pfp {
  grid-column: img-start/img-end;
  grid-row: 1/p-end;
  object-fit: cover;
  overflow: hidden;
  padding: 2rem;
}
.profile-card__pfp img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  justify-self: center;
  align-items: center;
}
@media only screen and (max-width: 37.5em) {
  .profile-card__pfp {
    grid-row: img-start/img-end;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    margin-top: 0;
    align-self: center;
    justify-self: center;
    width: 50vw;
    height: 50vw;
    max-height: 30rem;
    max-width: 30rem;
  }
}

.profile-card__title {
  grid-column: details-start/details-end;
  grid-row: h-start/h-end;
  padding: 1rem;
  margin-top: 14vw;
  width: 100%;
}
@media only screen and (max-width: 37.5em) {
  .profile-card__title {
    grid-row: h-start/h-end;
    width: 80%;
    justify-self: center;
    margin: 0;
    padding: 0;
  }
}
.profile-card__title .profile-card__name {
  font-size: 1.8rem;
  letter-spacing: 1.5px;
  color: rgb(255, 196, 0);
}
@media only screen and (max-width: 37.5em) {
  .profile-card__title .profile-card__name {
    margin: 0;
  }
}

.profile-card__details {
  grid-column: details-start/details-end;
  grid-row: p-start/p-end;
  padding: 1rem 1rem;
  height: fit-content;
  margin-top: 6vw;
  opacity: 0.8;
}
@media only screen and (max-width: 37.5em) {
  .profile-card__details {
    margin-top: 0;
  }
}

.search-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgb(69, 154, 157);
  width: 100%;
  height: 10rem;
}
.search-bar__frame {
  position: relative;
  width: 70%;
  height: 4rem;
  border-radius: 1rem;
  overflow: hidden;
}
@media only screen and (max-width: 37.5em) {
  .search-bar__frame {
    width: 95%;
  }
}
.search-bar {
  /*  &__frame:has(&__button:hover) {
     overflow: visible;
   }
  */
}
.search-bar__input-field {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  border: none;
  outline: none;
  padding: 0 2rem;
  font-size: 1.8rem;
}
.search-bar__input-field:focus {
  border: 2px solid rgb(255, 196, 0);
}
.search-bar__button {
  position: absolute;
  right: 0;
  background-color: rgb(230, 150, 57);
  width: 7%;
  height: 100%;
  color: #fff;
  z-index: 1;
  transition: all 0.2s;
}
@media only screen and (max-width: 37.5em) {
  .search-bar__button {
    width: 15%;
  }
}
.search-bar__button:hover {
  background-color: rgb(255, 196, 0);
  cursor: pointer;
  width: 10%;
  color: rgb(73, 73, 73);
  box-shadow: 0 0 30px rgb(255, 196, 0);
}
@media only screen and (max-width: 37.5em) {
  .search-bar__button:hover {
    width: 20%;
  }
}
.search-bar__button:active {
  background-color: rgb(150, 120, 23);
  color: #fff;
  box-shadow: none;
}
.search-bar__button i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.2);
}
.search-bar__info {
  color: #fff;
}

.text-card-container {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  color: #fff;
}

.text-card {
  display: block;
  background-color: rgb(59, 118, 137);
  height: auto;
  position: relative;
  width: 40%;
  border-radius: 3rem;
  padding: 3rem;
  cursor: pointer;
  transition: all 0.1s ease-in;
}
.text-card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  background-color: rgb(255, 196, 0);
  color: rgb(73, 73, 73);
}
.text-card:hover img {
  opacity: 1;
  z-index: -1;
}
.text-card:active {
  transform: scale(1);
  box-shadow: none;
}
@media only screen and (max-width: 75em) {
  .text-card {
    margin-bottom: 10rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .text-card {
    width: 70%;
  }
}
@media only screen and (max-width: 37.5em) {
  .text-card--1 {
    margin-top: 4rem;
  }
}

.text-card__overlay-img {
  width: 22rem; /* Full width */
  position: absolute;
  left: 75%;
  top: -8rem;
  opacity: 0.5;
  transform: translateX(-50%); /* Center horizontally */
}
.text-card__overlay-img--2 {
  top: -7rem;
}
@media only screen and (max-width: 37.5em) {
  .text-card__overlay-img {
    width: 20rem;
    left: 65%;
  }
}

.tiny-backdrop {
  height: 150px;
  position: relative;
  background-image: linear-gradient(rgb(17, 72, 89), rgb(17, 72, 89)), url("/img/pikaso_texttoimage_image-of-a-Nigerian-interviewer-and-interviewee.jpeg");
  box-shadow: inset 0 10rem 10rem rgba(0, 0, 0, 0.5);
  background-blend-mode: color;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  margin: 0 0 50px 0;
  text-align: center;
  align-items: center;
  color: #fff;
  display: flex;
  justify-content: space-around;
  /*& > * {
      background-color: $color-footer;
      border-radius: .5rem;
      padding: 0 2rem;
  }*/
}
.tiny-backdrop span {
  font-size: 2.2rem;
  text-shadow: 0rem 0rem 0.5rem black;
}
@media only screen and (max-width: 37.5em) {
  .tiny-backdrop {
    flex-direction: column;
  }
}

.tiny-backdrop::before {
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 1000;
  background-blend-mode: multiply;
  background-color: rgba(133, 133, 133, 0.5);
}

.top-bar {
  position: fixed;
  display: flex;
  justify-content: end;
  top: 0;
  color: rgb(73, 73, 73);
  background-color: #fff;
  height: 11rem;
  width: 100%;
  z-index: 100;
  padding: 1rem;
}
.top-bar__nav {
  align-self: flex-end;
  z-index: 7000;
  position: absolute;
  bottom: 0;
  height: 3rem;
  margin-right: 2rem;
}
@media only screen and (max-width: 56.25em) {
  .top-bar__nav {
    display: none;
  }
}
.top-bar__nav ul {
  display: flex;
  gap: 4rem;
  list-style-type: none;
}
.top-bar__drop-down {
  position: fixed;
  right: 0;
  top: 11rem;
  list-style-type: none;
  background-color: white;
  z-index: 6000;
  border-radius: 0 0 1rem 1rem;
  opacity: 0.8;
  color: rgb(73, 73, 73);
}
@media only screen and (max-width: 56.25em) {
  .top-bar__drop-down {
    display: none;
  }
}
.top-bar__drop-down nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.top-bar__drop-down nav li {
  padding: 1rem 2rem;
  width: 100%;
  transition: all 0.3s;
  text-align: center;
}
.top-bar__drop-down nav li:hover {
  cursor: pointer;
  background-color: rgb(185, 185, 185);
  color: rgb(73, 73, 73);
}
.top-bar__drop-down nav li:active {
  background-color: rgb(73, 73, 73);
  color: white;
}
.top-bar__drop-down nav li:last-child {
  border-radius: 0 0 1rem 1rem;
}
.top-bar__nav li {
  transition: all 0.2s;
  width: 9rem;
  text-align: center;
}
.top-bar__nav li:hover {
  font-weight: 600;
  cursor: pointer;
  border-bottom: 3px solid rgb(230, 150, 57);
}
.top-bar__nav li:active {
  border-bottom: 3px solid rgb(255, 196, 0);
  color: rgb(185, 185, 185);
}

.top-bar-active {
  font-weight: 600;
  border-bottom: 3px solid rgb(255, 196, 0);
  color: rgb(185, 185, 185);
}

.top-bar__info {
  font-style: normal;
  font-weight: 400;
  font-size: 2.2rem;
  letter-spacing: -2%;
  line-height: 110%;
  position: relative;
  padding: 2rem;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-bar__info-text {
  font-size: 2rem;
  color: rgb(131, 131, 131);
  font-style: italic;
}
@media only screen and (max-width: 37.5em) {
  .top-bar__info-text {
    font-size: 1.6rem;
  }
}
.top-bar__info i {
  color: red;
  margin-right: 6px;
}
@media only screen and (max-width: 37.5em) {
  .top-bar__info {
    font-size: 1.6rem;
    margin-right: 15vw;
    width: 60vw;
  }
}

@media only screen and (max-width: 56.25em) {
  .top-bar__info--grants {
    display: none;
  }
}

.top-bar--dark-shadow {
  box-shadow: 0 5rem 7rem rgba(0, 0, 0, 0.6), 0 2rem 3rem rgba(0, 0, 0, 0.8);
}

.top-bar--dark-wide-shadow {
  box-shadow: 0 15rem 18rem rgba(0, 0, 0, 0.3), 0 2rem 8rem rgba(0, 0, 0, 0.5);
}

.top-bar--light-shadow {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.top-bar--admin {
  position: fixed;
  width: 100%;
}

.video-card {
  display: flex;
  width: 100%;
  height: auto;
  margin-bottom: 10rem;
  border-radius: 3rem;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
@media only screen and (max-width: 75em) {
  .video-card {
    flex-direction: column;
  }
}
.video-card__details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-width: 50rem;
  height: auto;
  background-color: white;
  padding: 3rem;
  gap: 3rem;
}
@media only screen and (max-width: 75em) {
  .video-card__details {
    min-width: 0;
  }
}
@media only screen and (max-width: 37.5em) {
  .video-card__details {
    height: auto;
  }
}
.video-card__details {
  /*  @include respond (phone) {
     width: 200px;
   } */
}
.video-card__pfp {
  background-image: url("/img/story-1.png");
  background-size: cover;
  background-position: center center;
  width: 10rem;
  height: 10rem;
  border-radius: 100%;
}
.video-card__video {
  object-fit: cover;
}
.video-card__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-card__write-up {
  width: auto;
}
@media only screen and (max-width: 56.25em) {
  .video-card__write-up {
    width: auto;
  }
}
@media only screen and (max-width: 37.5em) {
  .video-card__write-up {
    width: auto;
  }
}
.video-card__date {
  font-weight: 600;
  font-style: italic;
}
.video-card__name {
  font-style: oblique;
}

.articles-hero {
  background: linear-gradient(to left, rgb(59, 118, 137), rgb(29, 53, 87));
  padding: 8rem;
  width: 100%;
  display: flex;
  gap: 4rem;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  color: white;
  margin-bottom: 8rem;
}
.articles-hero__top-text p {
  font-size: 2.4rem;
}
.articles-hero__featured-article {
  display: flex;
  gap: 4rem;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to right, rgb(168, 218, 220), rgba(244, 254, 255, 0.8));
  padding: 4rem;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  border: 1px solid white;
  color: rgb(48, 48, 48);
}
.articles-hero__featured-article-bottom {
  display: flex;
  gap: 4rem;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
@media only screen and (max-width: 56.25em) {
  .articles-hero__featured-article-bottom {
    flex-direction: column;
    gap: 2rem;
  }
}
.articles-hero__profile {
  display: flex;
  gap: 2rem;
  align-items: flex-end;
}
@media only screen and (max-width: 56.25em) {
  .articles-hero__profile {
    align-items: center;
  }
}
.articles-hero__pfp-name {
  display: flex;
  gap: 2rem;
  align-items: flex-end;
}
@media only screen and (max-width: 56.25em) {
  .articles-hero__pfp-name {
    align-items: center;
  }
}
.articles-hero__name p {
  font-size: 2rem;
}
.articles-hero__date {
  font-size: 1.8rem;
  line-height: 2;
}

.dark-article-button {
  border: 1px solid black;
  color: black;
}

.flex-con {
  display: flex;
  justify-content: space-between;
  margin-top: 11rem;
  padding: 5rem;
}
@media only screen and (max-width: 37.5em) {
  .flex-con {
    flex-direction: column;
  }
}

.flex-con__item-1 {
  width: 45%;
}
@media only screen and (max-width: 37.5em) {
  .flex-con__item-1 {
    width: 100%;
    text-align: center;
  }
}

.flex-con__item-2 {
  border-radius: 1rem;
  background-color: rgba(136, 220, 248, 0.3);
  padding: 5rem 3rem;
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.5);
  position: relative;
  width: 45%;
}
@media only screen and (max-width: 37.5em) {
  .flex-con__item-2 {
    width: 100%;
    margin-top: 5rem;
  }
}

.alert {
  width: 100%;
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  font-family: "Merriweather Sans", sans-serif;
  color: rgb(230, 150, 57);
  margin-top: 3rem;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 1rem;
  border-radius: 2rem;
}
.alert-success {
  color: rgb(35, 255, 35);
}
.alert-danger {
  color: rgb(255, 0, 0);
}

.career-hero {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2)), linear-gradient(to top, rgb(69, 154, 157) -50%, transparent), url("/img/career-hero-image.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  background-blend-mode: darken;
  color: #fff;
  position: relative;
  animation: backgroundPan 35s infinite alternate ease-in-out;
  padding: 5rem 10rem;
  margin-top: 11rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.career-hero p {
  font-size: 1.8rem;
}
@media only screen and (max-width: 37.5em) {
  .career-hero h1 {
    font-size: clamp(2rem, 8vw, 7rem);
  }
}
@media only screen and (max-width: 37.5em) {
  .career-hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2)), linear-gradient(to top, rgb(69, 154, 157) -50%, transparent), url("/img/career-hero-image.png");
    padding: 4rem;
  }
}

@keyframes backgroundPan {
  0% {
    background-position: top center;
  }
  100% {
    background-position: bottom center;
  }
}
.career-hero__content {
  display: flex;
  gap: 1rem;
  flex-direction: column;
  justify-content: space-around;
  overflow: visible;
}
@media only screen and (max-width: 56.25em) {
  .career-hero__content {
    justify-content: end;
  }
}

.career-hero__content-item-1 {
  width: 75%;
}
@media only screen and (max-width: 56.25em) {
  .career-hero__content-item-1 {
    width: 85%;
  }
}

.career-hero__content-item-3 {
  display: flex;
  justify-content: start;
  align-items: center;
  overflow: visible;
  height: 7rem;
}

@media only screen and (max-width: 37.5em) {
  .career-hero__content-item-3-item-1 {
    font-size: 1.2rem;
  }
}

.career-hero__content-item-3-item-2 {
  margin-left: 2rem;
}
@media only screen and (max-width: 37.5em) {
  .career-hero__content-item-3-item-2 {
    font-size: 1.2rem;
  }
}

.footer {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: auto;
  background-color: rgba(8, 20, 24, 0.8);
  background-blend-mode: multiply;
  padding: 10rem 5rem;
  color: rgb(185, 185, 185);
  border-radius: 2rem 2rem 0 0;
  z-index: 1000;
}
.footer > * {
  text-align: center;
  justify-content: center;
}
.footer h3 {
  margin-bottom: 1rem;
}
.footer a {
  cursor: pointer;
  padding: 0.3rem 1rem;
  transition: all 0.05s ease-in;
}
.footer a:hover {
  color: rgb(255, 196, 0);
  transform: scale(1.2) translateY(-0.3rem) rotate(-5deg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  padding: 0.1rem 1rem;
  border-radius: 0.7rem;
}
.footer a:active {
  color: #fff;
  transform: scale(1) translateY(0) rotate(0);
  box-shadow: none;
  padding: 0.1rem 1rem;
}

.footer__item {
  display: flex;
  justify-content: space-between;
  width: 30%;
}
@media only screen and (max-width: 37.5em) {
  .footer__item {
    width: 20rem;
  }
  .footer__item > *:not(:first-child) {
    margin-left: 5rem;
  }
}

.footer__item-2-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* .footer__item-2-item-1 {
    // margin-left: -5rem;
} */
.footer--2 {
  background-color: rgba(17, 28, 34, 0.8);
}
.footer--2 a:hover {
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.5);
}

.grant-selection-container {
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
}

/*.row {
    max-width: $grid-width;
    margin: 0 auto;

    &:not(:last-child) {
        margin-bottom: $gutter-vertical;
    }

    @include clearfix;

    [class^="col-"] {
        float: left;

        &:not(:last-child) {
            margin-right: $gutter-horizontal;
        }
    }

    .col-1-of-2 {
        width: calc((100% - 6rem) / 2);
    }

    .col-1-of-3 {
        width: calc((100% - (6rem * 2)) / 3);
    }

    .col-2-of-3 {
        width: calc(2 * ((100% - (6rem * 2)) / 3) + 6rem);
    }

    .col-1-of-4 {
        width: calc((100% - (6rem * 3)) / 4);
    }

    .col-2-of-4 {
        width: calc(((100% - (6rem * 3)) / 2) + 6rem);
    }

    .col-3-of-4 {
        width: calc((((100% - (6rem * 3)) / 4) * 3) + (6rem * 2));
    }
}*/
.hero {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7) 20%, white 80%), linear-gradient(rgb(69, 154, 157), rgb(69, 154, 157)), linear-gradient(rgb(69, 154, 157), rgb(69, 154, 157)), url("/img/hero_image.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  background-blend-mode: darken;
  color: #fff;
  position: relative;
  animation: backgroundPan 35s infinite alternate ease-in-out;
  padding: 5rem 10rem;
  margin-top: 11rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero p {
  font-size: 1.8rem;
}
@media only screen and (max-width: 37.5em) {
  .hero h1 {
    font-size: clamp(2rem, 8vw, 7rem);
  }
}
@media only screen and (max-width: 37.5em) {
  .hero {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, white 150%), linear-gradient(rgb(69, 154, 157), rgb(69, 154, 157)), linear-gradient(rgb(69, 154, 157), rgb(69, 154, 157)), url("/img/hero_image.png");
    padding: 4rem;
  }
}

@keyframes backgroundPan {
  0% {
    background-position: top center;
  }
  100% {
    background-position: bottom center;
  }
}
.hero__content {
  display: flex;
  gap: 1rem;
  flex-direction: column;
  justify-content: space-around;
  overflow: visible;
}
@media only screen and (max-width: 56.25em) {
  .hero__content {
    justify-content: end;
  }
}

.hero__content-item-1 {
  width: 75%;
}
@media only screen and (max-width: 56.25em) {
  .hero__content-item-1 {
    width: 85%;
  }
}

.hero__content-item-3 {
  display: flex;
  justify-content: start;
  align-items: center;
  overflow: visible;
  height: 7rem;
}

@media only screen and (max-width: 37.5em) {
  .hero__content-item-3-item-1 {
    font-size: 1.2rem;
  }
}

.hero__content-item-3-item-2 {
  margin-left: 2rem;
}
@media only screen and (max-width: 37.5em) {
  .hero__content-item-3-item-2 {
    font-size: 1.2rem;
  }
}

.about-us-page {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 11rem;
  background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), url("/img/modern-business-center.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.about-us-sections {
  padding: 5rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: start;
}

.section-about {
  background-color: rgba(230, 149, 57, 0.1);
  border-radius: 1rem;
  padding: 5rem;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.2);
  min-height: 300px;
  flex: 1 1;
  align-content: center;
}
.section-about::-webkit-scrollbar {
  width: 10px;
}
.section-about::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.15); /* Background color of the scrollbar track */
}
.section-about::-webkit-scrollbar-thumb {
  background-color: rgba(230, 149, 57, 0.6); /* Color of the scrollbar thumb */
  border-radius: 10px; /* Roundness of the scrollbar thumb */
  border: 2px solid rgb(255, 136, 0); /* Border around the thumb */
}
.section-about::-webkit-scrollbar-thumb:hover {
  background-color: rgb(255, 136, 0); /* Color of the thumb when hovered */
}
.section-about span {
  text-align: center;
  text-align: center;
  display: block;
  margin-bottom: 20px;
  color: rgb(255, 167, 66);
  text-shadow: 0 0 15px rgb(0, 0, 0);
}
.section-about p {
  margin-bottom: 3rem;
}
@media only screen and (max-width: 37.5em) {
  .section-about {
    text-align: center;
  }
}

.admin-login * {
  overflow: visible;
}

.admin-login::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgb(59, 118, 137), rgb(51, 59, 61));
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
  z-index: -1;
}

.admin-login {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.admin-login__image-container {
  width: 15rem;
  height: 15rem;
}
.admin-login .admin-login-main {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.admin-login .admin-login-box,
.admin-login .admin-login-box * {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.admin-login .admin-login-box h2,
.admin-login .admin-login-box * h2 {
  text-transform: uppercase;
}
.admin-login .admin-login-box__input {
  margin-bottom: 4rem;
  width: 40vw;
  height: 5rem;
  padding: 1.5rem;
  border-radius: 1rem;
  border: none;
}
@media only screen and (max-width: 56.25em) {
  .admin-login .admin-login-box__input {
    width: 70vw;
  }
}
.admin-login .admin-login-box__button {
  text-transform: uppercase;
}
.admin-login__image {
  background-image: url("/img/LOGO.png");
  width: 100%;
  height: 100%;
  background-size: cover;
}

.admin {
  display: flex;
  flex-direction: column;
  min-height: 80vh;
  justify-content: space-between;
}

.admin-content-wrapper {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  margin-top: 65px;
}
@media only screen and (max-width: 75em) {
  .admin-content-wrapper {
    margin-top: 99px;
  }
}
@media only screen and (max-width: 56.25em) {
  .admin-content-wrapper {
    flex-direction: column;
    margin-top: 60px;
  }
}
@media only screen and (max-width: 37.5em) {
  .admin-content-wrapper {
    flex-direction: column;
    margin-top: 20px;
  }
}
.admin-content-wrapper .admin-nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 20%;
  min-width: 25rem;
  list-style-type: none;
}
@media (max-width: 1024px) {
  .admin-content-wrapper .admin-nav {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: fixed;
    top: 11rem;
    left: 50%;
    margin: auto;
    transform: translateX(-50%);
    width: 100%;
    background-color: white;
    z-index: 1000;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
}
@media (max-width: 768px) {
  .admin-content-wrapper .admin-nav {
    flex-direction: column;
    text-align: center;
  }
}
.admin-content-wrapper .admin-nav__item {
  padding: 1rem 3rem;
  transition: all 0.2s;
}
@media only screen and (max-width: 56.25em) {
  .admin-content-wrapper .admin-nav__item {
    width: 100%;
  }
}
@media only screen and (max-width: 37.5em) {
  .admin-content-wrapper .admin-nav__item {
    width: 100%;
  }
}
.admin-content-wrapper .admin-nav__item:hover {
  background-color: rgb(185, 185, 185);
  cursor: pointer;
  color: rgb(73, 73, 73);
}
.admin-content-wrapper .admin-nav__item:active {
  background-color: rgb(131, 131, 131);
  color: white;
}
.admin-content-wrapper .active-button {
  background-color: rgb(185, 185, 185);
  border-right: 3px solid rgb(59, 118, 137);
  color: white;
}
@media only screen and (max-width: 56.25em) {
  .admin-content-wrapper .active-button {
    border-bottom: 3px solid rgb(59, 118, 137);
    border-right: none;
  }
}
@media only screen and (max-width: 37.5em) {
  .admin-content-wrapper .active-button {
    border: none;
  }
}
.admin-content-wrapper .admin-sections {
  display: flex;
  flex-direction: column;
  width: 80%;
  flex-grow: 1;
}
@media only screen and (max-width: 56.25em) {
  .admin-content-wrapper .admin-sections {
    width: 100%;
  }
}
@media only screen and (max-width: 37.5em) {
  .admin-content-wrapper .admin-sections {
    margin-top: 8rem;
  }
}
.admin-content-wrapper .admin-sections .section-default,
.admin-content-wrapper .admin-sections .section-dashboard,
.admin-content-wrapper .admin-sections .section-grants,
.admin-content-wrapper .admin-sections .section-donations,
.admin-content-wrapper .admin-sections .section-a-status,
.admin-content-wrapper .admin-sections .section-job-vacancy,
.admin-content-wrapper .admin-sections .section-stories,
.admin-content-wrapper .admin-sections .section-article {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  background-color: rgba(8, 20, 24, 0.1);
  text-align: center;
  width: 100%;
  padding: 5rem;
  min-height: 80rem;
}
@media only screen and (max-width: 56.25em) {
  .admin-content-wrapper .admin-sections .section-default,
  .admin-content-wrapper .admin-sections .section-dashboard,
  .admin-content-wrapper .admin-sections .section-grants,
  .admin-content-wrapper .admin-sections .section-donations,
  .admin-content-wrapper .admin-sections .section-a-status,
  .admin-content-wrapper .admin-sections .section-job-vacancy,
  .admin-content-wrapper .admin-sections .section-stories,
  .admin-content-wrapper .admin-sections .section-article {
    margin-top: 3rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .admin-content-wrapper .admin-sections .section-default,
  .admin-content-wrapper .admin-sections .section-dashboard,
  .admin-content-wrapper .admin-sections .section-grants,
  .admin-content-wrapper .admin-sections .section-donations,
  .admin-content-wrapper .admin-sections .section-a-status,
  .admin-content-wrapper .admin-sections .section-job-vacancy,
  .admin-content-wrapper .admin-sections .section-stories,
  .admin-content-wrapper .admin-sections .section-article {
    margin-top: 0;
  }
}
.admin-content-wrapper .admin-sections .section-dashboard {
  align-items: center;
  flex-direction: row;
  gap: 5rem;
}
@media only screen and (max-width: 75em) {
  .admin-content-wrapper .admin-sections .section-dashboard {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
}
.admin-content-wrapper .admin-sections {
  /*     .section-grants {
    background-color: violet;
  } */
}
.admin-content-wrapper .admin-sections .section-donations {
  align-items: center;
}
.admin-content-wrapper .admin-sections .section-a-status {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  width: 100%;
}
.admin-content-wrapper .admin-sections .a-status-info {
  width: 100%;
}
.admin-content-wrapper .admin-sections .section-job-vacancy {
  gap: 3rem;
}
.admin-content-wrapper .admin-sections .section-article {
  align-items: center;
  gap: 3rem;
}
.admin-content-wrapper .admin-sections .section-article .article-upload-form {
  width: 100%;
  max-width: 80rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.admin-content-wrapper .admin-sections .section-article .article-upload-form .form-header {
  text-align: center;
  margin-bottom: 2rem;
}
.admin-content-wrapper .admin-sections .section-article .article-upload-form .form-header h3 {
  font-size: 2.5rem;
  color: rgb(59, 118, 137);
  margin-bottom: 1rem;
}
.admin-content-wrapper .admin-sections .section-article .article-upload-form .form-header p {
  font-size: 1.6rem;
  color: rgb(73, 73, 73);
}
.admin-content-wrapper .admin-sections .section-article .article-upload-form .form-row {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
@media only screen and (max-width: 56.25em) {
  .admin-content-wrapper .admin-sections .section-article .article-upload-form .form-row {
    flex-direction: column;
  }
}
.admin-content-wrapper .admin-sections .section-article .article-upload-form .form-row .form-group {
  flex: 1;
  min-width: 25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.admin-content-wrapper .admin-sections .section-article .article-upload-form .form-row .form-group label {
  font-size: 1.4rem;
  font-weight: 600;
  color: rgb(73, 73, 73);
  margin-bottom: 0.5rem;
}
.admin-content-wrapper .admin-sections .section-article .article-upload-form .form-row .form-group input[type=text],
.admin-content-wrapper .admin-sections .section-article .article-upload-form .form-row .form-group input[type=date],
.admin-content-wrapper .admin-sections .section-article .article-upload-form .form-row .form-group input[type=file],
.admin-content-wrapper .admin-sections .section-article .article-upload-form .form-row .form-group textarea,
.admin-content-wrapper .admin-sections .section-article .article-upload-form .form-row .form-group select {
  width: 100%;
  padding: 1rem;
  border: 1px solid rgb(131, 131, 131);
  border-radius: 0.5rem;
  font-size: 1.4rem;
  font-family: inherit;
  transition: all 0.2s;
}
.admin-content-wrapper .admin-sections .section-article .article-upload-form .form-row .form-group input[type=text]:focus,
.admin-content-wrapper .admin-sections .section-article .article-upload-form .form-row .form-group input[type=date]:focus,
.admin-content-wrapper .admin-sections .section-article .article-upload-form .form-row .form-group input[type=file]:focus,
.admin-content-wrapper .admin-sections .section-article .article-upload-form .form-row .form-group textarea:focus,
.admin-content-wrapper .admin-sections .section-article .article-upload-form .form-row .form-group select:focus {
  outline: none;
  border-color: rgb(59, 118, 137);
  box-shadow: 0 0 0 2px rgba(59, 118, 137, 0.1);
}
.admin-content-wrapper .admin-sections .section-article .article-upload-form .form-row .form-group textarea {
  min-height: 15rem;
  resize: vertical;
}
.admin-content-wrapper .admin-sections .section-article .article-upload-form .form-row .form-group .file-input-wrapper {
  position: relative;
  width: 100%;
}
.admin-content-wrapper .admin-sections .section-article .article-upload-form .form-row .form-group .file-input-wrapper .file-input-label {
  display: block;
  padding: 1rem;
  border: 2px dashed rgb(131, 131, 131);
  border-radius: 0.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background-color: rgba(8, 20, 24, 0.1);
}
.admin-content-wrapper .admin-sections .section-article .article-upload-form .form-row .form-group .file-input-wrapper .file-input-label:hover {
  border-color: rgb(59, 118, 137);
  background-color: rgba(59, 118, 137, 0.05);
}
.admin-content-wrapper .admin-sections .section-article .article-upload-form .form-row .form-group .file-input-wrapper .file-input-label .file-input-text {
  font-size: 1.4rem;
  color: rgb(73, 73, 73);
}
.admin-content-wrapper .admin-sections .section-article .article-upload-form .form-row .form-group .file-input-wrapper input[type=file] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.admin-content-wrapper .admin-sections .section-article .article-upload-form .form-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}
.admin-content-wrapper .admin-sections .section-article .article-upload-form .form-actions .btn {
  padding: 1rem 3rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 1.4rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.admin-content-wrapper .admin-sections .section-article .article-upload-form .form-actions .btn--primary {
  background-color: rgb(59, 118, 137);
  color: white;
}
.admin-content-wrapper .admin-sections .section-article .article-upload-form .form-actions .btn--primary:hover {
  background-color: rgb(43.6479591837, 87.2959183673, 101.3520408163);
}
.admin-content-wrapper .admin-sections .section-article .article-upload-form .form-actions .btn--secondary {
  background-color: rgb(131, 131, 131);
  color: rgb(73, 73, 73);
}
.admin-content-wrapper .admin-sections .section-article .article-upload-form .form-actions .btn--secondary:hover {
  background-color: rgb(185, 185, 185);
}

.dashboard-data {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-height: 35rem;
  background-color: rgb(59, 118, 137);
  padding: 5rem 3rem;
  color: white;
  border-radius: 1rem;
  width: 50vw;
}

.hidden {
  display: none !important;
}

.grants-details {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  width: 100%;
}

.grants-info,
.a-status-info {
  display: flex;
  flex-direction: column;
}
.grants-info__heading,
.a-status-info__heading {
  background-color: rgb(59, 118, 137);
  color: white;
  width: 100%;
  padding: 1rem 3rem;
}
.grants-info table,
.a-status-info table {
  width: 100%;
  background-color: white;
  text-align: center;
  overflow-y: scroll;
  max-height: 3rem;
}
.grants-info tr,
.a-status-info tr {
  height: 5rem;
}
.table-container {
  max-height: 27rem;
  overflow: scroll;
}

.grants-button,
.transaction-details-button {
  width: 3rem;
  background-color: rgb(185, 185, 185);
  color: white;
  border-radius: 1rem;
}
.grants-button:hover,
.transaction-details-button:hover {
  background-color: rgb(131, 131, 131);
  cursor: pointer;
}
.grants-button:active,
.transaction-details-button:active {
  background-color: rgb(105, 105, 105);
}

.applicant-details {
  display: flex;
  flex-direction: column;
}

.grants-top-nav {
  display: flex;
  list-style-type: none;
  background-color: rgb(59, 118, 137);
  width: fit-content;
  gap: 1rem;
  padding: 1rem 2rem;
}
.grants-top-nav li {
  color: white;
}
.grants-top-nav li:hover {
  color: rgb(185, 185, 185);
  cursor: pointer;
}

.grants-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
  margin: 3rem 0;
}

.grants-divider {
  height: 1.5rem;
  width: 2px;
  background-color: white;
  margin-top: 6px;
}

.grants-top-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

.grants-sub-menu {
  display: flex;
  list-style-type: none;
}
.grants-sub-menu li {
  padding: 1rem;
  background-color: rgb(59, 118, 137);
  color: white;
}
.grants-sub-menu li:hover {
  color: rgb(105, 105, 105);
  background-color: rgb(185, 185, 185);
  cursor: pointer;
}
.grants-sub-menu li.active {
  background-color: white;
  color: rgb(105, 105, 105);
}

.save-button {
  background-color: rgb(59, 118, 137);
  padding: 0.5rem 2rem;
  border-radius: 1rem;
  color: white;
}
.save-button:hover {
  color: rgb(105, 105, 105);
  background-color: white;
  cursor: pointer;
}

.grants-buttom-section {
  display: flex;
  flex-direction: column;
}

.image-input-container {
  display: flex;
  padding: 2rem;
  gap: 3rem;
}
@media only screen and (max-width: 56.25em) {
  .image-input-container {
    flex-direction: column;
  }
}

.applicant-image-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}
.applicant-image-container .applicant-image-box {
  height: 20rem;
  width: 20rem;
  position: relative;
}
.applicant-image-container .applicant-image-box .applicant-image {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.applicant-image-container .applicant-image-button {
  background-color: rgb(59, 118, 137);
  color: white;
  width: 100%;
  text-align: center;
}

.input-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  gap: 2rem;
  width: 100%;
}
@media only screen and (max-width: 37.5em) {
  .input-container {
    grid-template-columns: 1fr;
  }
}
.input-container .form-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  width: 100%;
}
.input-container .form-group label {
  font-size: 1.4rem;
  font-weight: 600;
  color: rgb(73, 73, 73);
  margin-bottom: 1rem;
  display: block;
}
.input-container .form-group input,
.input-container .form-group textarea {
  padding: 1rem 1.5rem;
  border: 1px solid rgb(131, 131, 131);
  border-radius: 0.5rem;
  font-size: 1.4rem;
  font-family: inherit;
  transition: all 0.2s;
  width: 100%;
}
.input-container .form-group input:focus,
.input-container .form-group textarea:focus {
  outline: none;
  border-color: rgb(59, 118, 137);
  box-shadow: 0 0 0 2px rgba(59, 118, 137, 0.1);
}
.input-container .form-group textarea {
  min-height: 8rem;
  resize: vertical;
}
.input-container .form-group--full {
  grid-column: 1/-1;
}
.input-container .form-group--full textarea {
  min-height: 10rem;
}

.applicant-buttons-container {
  display: flex;
  justify-content: center;
  gap: 3rem;
  width: 100%;
  padding: 2rem 0;
}
.applicant-buttons-container .approve-button,
.applicant-buttons-container .reject-button {
  border-radius: 1rem;
  padding: 0.5rem 2rem;
}
.applicant-buttons-container .approve-button:hover,
.applicant-buttons-container .reject-button:hover {
  cursor: pointer;
}
.applicant-buttons-container .approve-button {
  border: 2px solid green;
}
.applicant-buttons-container .approve-button:hover {
  background-color: rgba(0, 128, 0, 0.2);
}
.applicant-buttons-container .reject-button {
  border: 2px solid red;
}
.applicant-buttons-container .reject-button:hover {
  background-color: rgba(255, 0, 0, 0.2);
}

.document-checklist {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.checklist-bottom-section {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 5rem;
}
@media only screen and (max-width: 37.5em) {
  .checklist-bottom-section {
    flex-direction: column;
  }
}

.document-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  width: 100%;
}
.document-grid .document-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
  background-color: white;
  border: 1px solid rgb(131, 131, 131);
  border-radius: 1rem;
  transition: all 0.2s;
}
@media only screen and (max-width: 56.25em) {
  .document-grid .document-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
}
.document-grid .document-item:hover {
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.1);
  border-color: rgb(59, 118, 137);
}
.document-grid .document-item .document-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.document-grid .document-item .document-info .document-label {
  font-size: 1.6rem;
  font-weight: 700;
  color: rgb(73, 73, 73);
  margin: 0;
}
.document-grid .document-item .document-info .document-status {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  padding: 0.4rem 1rem;
  border-radius: 1.5rem;
  width: fit-content;
}
.document-grid .document-item .document-info .document-status.required {
  color: #dc3545;
  background-color: rgba(220, 53, 69, 0.1);
}
.document-grid .document-item .document-info .document-status.optional {
  color: #ffc107;
  background-color: rgba(255, 193, 7, 0.1);
}
.document-grid .document-item .document-actions {
  display: flex;
  gap: 1rem;
}
@media only screen and (max-width: 56.25em) {
  .document-grid .document-item .document-actions {
    width: 100%;
    justify-content: center;
  }
}
.document-grid .document-item .document-actions .btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  font-size: 1.4rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}
.document-grid .document-item .document-actions .btn--secondary {
  background-color: rgb(131, 131, 131);
  color: rgb(73, 73, 73);
}
.document-grid .document-item .document-actions .btn--secondary:hover {
  background-color: rgb(185, 185, 185);
  transform: translateY(-2px);
}
.document-grid .document-item .document-actions .btn--primary {
  background-color: rgb(59, 118, 137);
  color: white;
}
.document-grid .document-item .document-actions .btn--primary:hover {
  background-color: rgb(43.6479591837, 87.2959183673, 101.3520408163);
  transform: translateY(-2px);
}
.document-grid .document-item .document-actions .btn i {
  font-size: 1.2rem;
}

.preview-text-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.preview-text {
  display: flex;
  gap: 3rem;
  width: fit-content;
  justify-content: space-between;
}
.preview-text__button {
  color: rgb(59, 118, 137);
  transition: all 0.1s;
}
.preview-text__button:hover {
  cursor: pointer;
  transform: scale(1.1);
}
.preview-text__download-button {
  color: rgb(59, 118, 137);
  transition: all 0.1s;
}
.preview-text__download-button:hover {
  cursor: pointer;
  transform: scale(1.1);
}

.preview {
  flex: 1;
}
.preview__title {
  background-color: rgb(59, 118, 137);
  text-align: center;
  color: white;
  padding: 1rem;
}
.preview__frame {
  width: 100%;
  height: 50rem;
  border: 1px solid rgb(131, 131, 131);
  border-radius: 0 0 0.5rem 0.5rem;
}
.preview__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgb(105, 105, 105);
  font-size: 1.6rem;
}
.preview__placeholder i {
  font-size: 4rem;
  margin-top: 2rem;
  opacity: 0.5;
}
.preview__placeholder.hidden {
  display: none;
}
.preview__frame-container {
  position: relative;
  height: 50rem;
  background-color: #f8f9fa;
  border-radius: 0 0 0.5rem 0.5rem;
}
.preview__frame-container .preview__frame {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0 0 0.5rem 0.5rem;
}
.preview__frame-container .preview__placeholder {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  color: rgb(105, 105, 105);
  font-size: 1.6rem;
  border-radius: 0 0 0.5rem 0.5rem;
}
.preview__frame-container .preview__placeholder i {
  font-size: 4rem;
  margin-top: 2rem;
  opacity: 0.5;
}
.preview__frame-container .preview__placeholder.hidden {
  display: none;
}

.donation-stats {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  align-items: center;
  width: 100%;
}
@media only screen and (max-width: 56.25em) {
  .donation-stats {
    align-items: center;
  }
}
.donation-stats .items {
  display: flex;
  justify-content: left;
  gap: 10rem;
}
.donation-stats .items > * {
  background-color: rgb(59, 118, 137);
  border-radius: 1rem;
  overflow: hidden;
  padding-right: 2rem;
}
.donation-stats .items > * .value {
  display: flex;
  gap: 2rem;
  align-items: center;
}
.donation-stats .items > * .value .currency {
  background-color: rgb(185, 185, 185);
  padding: 0.5rem 1.5rem;
  border-radius: 0 1rem 1rem 0;
}
.donation-stats .items > * .value .currency p {
  color: rgb(105, 105, 105);
}
.donation-stats .items > * .value p {
  color: white;
}
.donation-stats .donors {
  align-items: center;
  text-align: center;
}
.donation-stats .donors .item {
  color: white;
  background-color: rgb(59, 118, 137);
  padding: 0.5rem 1.5rem;
  width: fit-content;
  border-radius: 1rem;
  margin: auto;
}

.a-status-modal {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  background-color: rgb(224, 224, 224);
  width: 60vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 5rem;
  z-index: 6000;
  position: fixed;
  box-shadow: 0 0 10rem rgba(0, 0, 0, 0.5);
}
.a-status-modal .modal-top {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 7rem;
}
.a-status-modal .modal-top .modal-heading {
  align-self: flex-end;
}
.a-status-modal .modal-top .modal-closer {
  align-self: flex-start;
  transform: scale(1.8);
}
.a-status-modal .modal-top .modal-closer button {
  background: none;
  border: none;
  color: rgb(105, 105, 105);
  transition: all 0.1s;
}
.a-status-modal .modal-top .modal-closer button:hover {
  cursor: pointer;
  color: red;
  transform: scale(1.2);
}
.a-status-modal .modal-top .modal-closer button:active {
  transform: scale(1);
  color: black;
}

.modal-backdrop {
  content: "";
  background-color: black;
  opacity: 0.65;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4000;
  width: 100vw;
  height: 100vh;
}

.modal-bottom {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 0 5rem;
}
.modal-bottom-field {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  height: 4rem;
}
.modal-bottom-field input {
  padding: 0 1rem;
}

.job-vacancies {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  justify-content: space-between;
}
@media only screen and (max-width: 75em) {
  .job-vacancies {
    width: 100%;
    align-items: center;
  }
}
.job-vacancies .bottom-content {
  display: flex;
  gap: 3rem;
}
@media only screen and (max-width: 75em) {
  .job-vacancies .bottom-content {
    flex-direction: column;
    align-items: center;
  }
}
.job-vacancies .create-job-vacancy {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  width: fit-content;
  background-color: rgb(185, 185, 185);
  border-radius: 1rem;
  padding: 2rem;
  height: fit-content;
}
.job-vacancies .create-job-vacancy label {
  font-size: 1.6rem;
  font-weight: 700;
}
.job-vacancies .create-job-vacancy input,
.job-vacancies .create-job-vacancy textarea {
  padding: 0.8rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgb(131, 131, 131);
}
.job-vacancies .create-job-vacancy .row-2 {
  display: flex;
  gap: 2rem;
}
.job-vacancies .create-job-vacancy .row-2__item-1, .job-vacancies .create-job-vacancy .row-2__item-2 {
  display: flex;
  flex-direction: column;
}
.job-vacancies .create-job-vacancy .row-4 {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
}
.job-vacancies .create-job-vacancy .row-4__item-1, .job-vacancies .create-job-vacancy .row-4__item-2 {
  display: flex;
  flex-direction: column;
}
.job-vacancies .create-job-vacancy .row-1,
.job-vacancies .create-job-vacancy .row-3,
.job-vacancies .create-job-vacancy .row-5,
.job-vacancies .create-job-vacancy .row-6 {
  display: flex;
  flex-direction: column;
}
.job-vacancies .create-job-vacancy .row-6 {
  width: fit-content;
}
.job-vacancies .create-job-vacancy .post-job-button {
  all: unset;
  background-color: rgb(59, 118, 137);
  padding: 0.5rem 0.5rem;
  text-align: center;
  color: white;
  font-weight: 700;
  width: fit-content;
  align-self: flex-end;
  font-size: 1.2rem;
  border-radius: 0.5rem;
}
.job-vacancies .create-job-vacancy .post-job-button:hover {
  background-color: rgb(105, 105, 105);
  cursor: pointer;
}
.job-vacancies .create-job-vacancy .post-job-button:active {
  background-color: rgb(73, 73, 73);
}
.job-vacancies .current-job-openings {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.job-vacancies .current-job-openings .job-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: rgb(185, 185, 185);
  border-radius: 1rem;
  padding: 1rem;
  width: fit-content;
}
.job-vacancies .current-job-openings .job-card__top {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-weight: 600;
}
.job-vacancies .current-job-openings .job-card__top--top {
  display: flex;
  justify-content: space-between;
}
.job-vacancies .current-job-openings .job-card__top--top .tools {
  display: flex;
  gap: 1rem;
}
.job-vacancies .current-job-openings .job-card__top--bottom {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}
.job-vacancies .current-job-openings .job-card__top--bottom > * {
  width: fit-content;
}
.job-vacancies .current-job-openings .job-card__bottom {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.job-management {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  width: 100%;
  padding: 3rem;
}
.job-management .article-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.job-management .article-list .table-headings {
  display: flex;
  justify-content: space-between;
  font-size: 2rem;
  text-align: center;
}
.job-management .article-list .table-headings > * {
  width: 20%;
}
.job-management .article-list .job-application-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  background-color: white;
  padding: 1rem 0;
  border-radius: 0.8rem;
}
.job-management .article-list .job-application-details .detail-status {
  background-color: rgb(138, 218, 250);
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgb(53, 90, 105);
}

.admin-nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  margin-left: auto;
  margin-right: 1rem;
  z-index: 1001;
}
.admin-nav-toggle span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: rgb(59, 118, 137);
  margin: 5px 0;
  transition: all 0.3s ease;
}
@media (max-width: 1024px) {
  .admin-nav-toggle {
    display: block;
  }
}
.admin-nav-toggle--active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.admin-nav-toggle--active span:nth-child(2) {
  opacity: 0;
}
.admin-nav-toggle--active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

@media (max-width: 1024px) {
  .admin-nav {
    transform: translateX(-50%) translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .admin-nav--visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}

.top-bar__about-us-button nav {
  list-style-type: none;
}
.top-bar__about-us-button nav li {
  cursor: pointer;
}
.top-bar__about-us-button nav li:hover {
  background-color: rgb(185, 185, 185);
}

.section-article .article-management {
  width: 100%;
}
.section-article .article-management .article-toggle {
  display: flex;
  gap: 1rem;
  margin-bottom: 3rem;
  justify-content: center;
}
.section-article .article-management .article-toggle .toggle-btn {
  padding: 1rem 2rem;
  border: 2px solid rgb(59, 118, 137);
  background-color: transparent;
  color: rgb(59, 118, 137);
  border-radius: 0.5rem;
  font-size: 1.4rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.section-article .article-management .article-toggle .toggle-btn:hover {
  background-color: rgb(59, 118, 137);
  color: white;
}
.section-article .article-management .article-toggle .toggle-btn.active {
  background-color: rgb(59, 118, 137);
  color: white;
}
.section-article .article-management .article-section.hidden {
  display: none;
}
.section-article .article-management .article-section .article-upload-form {
  max-width: 80rem;
  margin: 0 auto;
  width: 100%;
}
.section-article .article-management .article-section .article-delete-form .article-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
}
.section-article .article-management .article-section .article-delete-form .article-list .article-item {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  background-color: rgba(8, 20, 24, 0.1);
  border-radius: 1rem;
  border: 1px solid rgb(131, 131, 131);
}
@media only screen and (max-width: 56.25em) {
  .section-article .article-management .article-section .article-delete-form .article-list .article-item {
    flex-direction: column;
    text-align: center;
  }
}
.section-article .article-management .article-section .article-delete-form .article-list .article-item .article-image {
  flex-shrink: 0;
}
.section-article .article-management .article-section .article-delete-form .article-list .article-item .article-image .article-img {
  width: 12rem;
  height: 8rem;
  object-fit: cover;
  border-radius: 0.5rem;
}
.section-article .article-management .article-section .article-delete-form .article-list .article-item .article-info {
  flex: 1;
}
.section-article .article-management .article-section .article-delete-form .article-list .article-item .article-info .article-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: rgb(73, 73, 73);
  margin-bottom: 0.5rem;
}
.section-article .article-management .article-section .article-delete-form .article-list .article-item .article-info .article-category {
  font-size: 1.4rem;
  color: rgb(59, 118, 137);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.section-article .article-management .article-section .article-delete-form .article-list .article-item .article-info .article-date {
  font-size: 1.2rem;
  color: rgb(105, 105, 105);
  margin-bottom: 0.5rem;
}
.section-article .article-management .article-section .article-delete-form .article-list .article-item .article-info .article-excerpt {
  font-size: 1.4rem;
  color: rgb(73, 73, 73);
  line-height: 1.5;
}
.section-article .article-management .article-section .article-delete-form .article-list .article-item .article-actions {
  flex-shrink: 0;
}
.section-article .article-management .article-section .article-delete-form .article-list .article-item .article-actions .delete-article-btn {
  background-color: #dc3545;
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-size: 1.4rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.section-article .article-management .article-section .article-delete-form .article-list .article-item .article-actions .delete-article-btn:hover {
  background-color: rgb(189.2151898734, 32.7848101266, 47.7721518987);
  transform: translateY(-2px);
}
.section-article .article-management .article-section .article-delete-form .article-list .article-item .article-actions .delete-article-btn i {
  margin-right: 0.5rem;
}
.section-article .article-management .article-section .article-delete-form .delete-confirmation-modal.hidden {
  display: none;
}
.section-article .article-management .article-section .article-delete-form .delete-confirmation-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 7000;
}
.section-article .article-management .article-section .article-delete-form .delete-confirmation-modal .modal-content {
  background-color: white;
  padding: 3rem;
  border-radius: 1rem;
  max-width: 50rem;
  width: 90%;
  text-align: center;
}
.section-article .article-management .article-section .article-delete-form .delete-confirmation-modal .modal-content h3 {
  font-size: 2rem;
  color: rgb(73, 73, 73);
  margin-bottom: 1rem;
}
.section-article .article-management .article-section .article-delete-form .delete-confirmation-modal .modal-content p {
  font-size: 1.6rem;
  color: rgb(105, 105, 105);
  margin-bottom: 2rem;
}
.section-article .article-management .article-section .article-delete-form .delete-confirmation-modal .modal-content .modal-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}
.section-article .article-management .article-section .article-delete-form .delete-confirmation-modal .modal-content .modal-actions .btn {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-size: 1.4rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.section-article .article-management .article-section .article-delete-form .delete-confirmation-modal .modal-content .modal-actions .btn--secondary {
  background-color: rgb(131, 131, 131);
  color: rgb(73, 73, 73);
}
.section-article .article-management .article-section .article-delete-form .delete-confirmation-modal .modal-content .modal-actions .btn--secondary:hover {
  background-color: rgb(185, 185, 185);
}
.section-article .article-management .article-section .article-delete-form .delete-confirmation-modal .modal-content .modal-actions .btn--danger {
  background-color: #dc3545;
  color: white;
}
.section-article .article-management .article-section .article-delete-form .delete-confirmation-modal .modal-content .modal-actions .btn--danger:hover {
  background-color: rgb(189.2151898734, 32.7848101266, 47.7721518987);
}

.section-leadership .leadership-management {
  width: 100%;
  background-color: rgba(8, 20, 24, 0.1);
  padding: 6rem;
}
.section-leadership .leadership-management .leadership-toggle {
  display: flex;
  gap: 1rem;
  margin-bottom: 3rem;
  justify-content: center;
}
.section-leadership .leadership-management .leadership-toggle .toggle-btn {
  padding: 1rem 2rem;
  border: 2px solid rgb(59, 118, 137);
  background-color: transparent;
  color: rgb(59, 118, 137);
  border-radius: 0.5rem;
  font-size: 1.4rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.section-leadership .leadership-management .leadership-toggle .toggle-btn:hover {
  background-color: rgb(59, 118, 137);
  color: white;
}
.section-leadership .leadership-management .leadership-toggle .toggle-btn.active {
  background-color: rgb(59, 118, 137);
  color: white;
}
.section-leadership .leadership-management .leadership-panel.hidden {
  display: none;
}
.section-leadership .leadership-management .leadership-panel .leadership-form {
  max-width: 80rem;
  margin: 0 auto;
  width: 100%;
}
.section-leadership .leadership-management .leadership-panel .leadership-form .form-header {
  text-align: center;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  width: 100%;
}
.section-leadership .leadership-management .leadership-panel .leadership-form .form-header h3 {
  font-size: 2.5rem;
  color: rgb(59, 118, 137);
  margin-bottom: 1rem;
  width: 100%;
  text-align: center;
}
.section-leadership .leadership-management .leadership-panel .leadership-form .form-header p {
  font-size: 1.6rem;
  color: rgb(73, 73, 73);
}
.section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  background-color: rgb(185, 185, 185);
  border-radius: 1rem;
  padding: 3rem;
}
@media only screen and (max-width: 75em) {
  .section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form {
    width: 100%;
  }
}
.section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form label {
  font-size: 1.6rem;
  font-weight: 700;
  color: rgb(73, 73, 73);
  margin-bottom: 0.5rem;
}
.section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form input,
.section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form textarea {
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgb(131, 131, 131);
  font-size: 1.4rem;
  font-family: inherit;
  transition: all 0.2s;
}
.section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form input:focus,
.section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form textarea:focus {
  outline: none;
  border-color: rgb(59, 118, 137);
  box-shadow: 0 0 0 2px rgba(59, 118, 137, 0.1);
}
.section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form textarea {
  min-height: 10rem;
  resize: vertical;
}
.section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form .file-input-wrapper {
  position: relative;
  width: 100%;
}
.section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form .file-input-wrapper .file-input-label {
  display: block;
  padding: 2rem;
  border: 2px dashed rgb(131, 131, 131);
  border-radius: 0.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background-color: white;
}
.section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form .file-input-wrapper .file-input-label:hover {
  border-color: rgb(59, 118, 137);
  background-color: rgba(59, 118, 137, 0.05);
}
.section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form .file-input-wrapper .file-input-label .file-input-text {
  font-size: 1.4rem;
  color: rgb(73, 73, 73);
}
.section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form .file-input-wrapper input[type=file] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form .form-row-2,
.section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form .form-row-3 {
  display: flex;
  gap: 2rem;
}
@media only screen and (max-width: 56.25em) {
  .section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form .form-row-2,
  .section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form .form-row-3 {
    flex-direction: column;
  }
}
.section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form .form-row-2__item-1, .section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form .form-row-2__item-2,
.section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form .form-row-3__item-1,
.section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form .form-row-3__item-2 {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form .form-row-1,
.section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form .form-row-4,
.section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form .form-row-5,
.section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form .form-row-6,
.section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form .form-row-7,
.section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form .form-row-8,
.section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form .form-row-9 {
  display: flex;
  flex-direction: column;
}
.section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form .form-row-9 {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 1rem;
}
@media only screen and (max-width: 56.25em) {
  .section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form .form-row-9 {
    justify-content: center;
  }
}
.section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form .form-row-9 .btn {
  padding: 1rem 2rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 1.4rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form .form-row-9 .btn--primary {
  background-color: rgb(59, 118, 137);
  color: white;
}
.section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form .form-row-9 .btn--primary:hover {
  background-color: rgb(43.6479591837, 87.2959183673, 101.3520408163);
}
.section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form .form-row-9 .btn--secondary {
  background-color: rgb(131, 131, 131);
  color: rgb(73, 73, 73);
}
.section-leadership .leadership-management .leadership-panel .leadership-form .create-leader-form .form-row-9 .btn--secondary:hover {
  background-color: rgb(185, 185, 185);
}
.section-leadership .leadership-management .leadership-panel .leadership-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin-top: 2rem;
}
.section-leadership .leadership-management .leadership-panel .leadership-list .leadership-list-items {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.section-leadership .leadership-management .leadership-panel .leadership-list .leadership-list-items .leadership-card {
  display: flex;
  gap: 2rem;
  background-color: rgb(185, 185, 185);
  border-radius: 1rem;
  padding: 2rem;
  width: fit-content;
}
@media only screen and (max-width: 56.25em) {
  .section-leadership .leadership-management .leadership-panel .leadership-list .leadership-list-items .leadership-card {
    flex-direction: column;
    width: 100%;
    align-items: center;
    text-align: center;
  }
}
.section-leadership .leadership-management .leadership-panel .leadership-list .leadership-list-items .leadership-card__thumb {
  flex-shrink: 0;
  width: 6rem;
  height: 6rem;
  background-color: rgb(59, 118, 137);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
}
.section-leadership .leadership-management .leadership-panel .leadership-list .leadership-list-items .leadership-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.section-leadership .leadership-management .leadership-panel .leadership-list .leadership-list-items .leadership-card__body .leadership-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}
@media only screen and (max-width: 56.25em) {
  .section-leadership .leadership-management .leadership-panel .leadership-list .leadership-list-items .leadership-card__body .leadership-card__top {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
.section-leadership .leadership-management .leadership-panel .leadership-list .leadership-list-items .leadership-card__body .leadership-card__top .leadership-card__title {
  font-size: 1.8rem;
  font-weight: 700;
  color: rgb(73, 73, 73);
  margin: 0;
}
.section-leadership .leadership-management .leadership-panel .leadership-list .leadership-list-items .leadership-card__body .leadership-card__top .leadership-card__tools {
  display: flex;
  gap: 1rem;
}
.section-leadership .leadership-management .leadership-panel .leadership-list .leadership-list-items .leadership-card__body .leadership-card__top .leadership-card__tools .btn {
  padding: 0.8rem 1.5rem;
  border-radius: 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}
.section-leadership .leadership-management .leadership-panel .leadership-list .leadership-list-items .leadership-card__body .leadership-card__top .leadership-card__tools .btn--secondary {
  background-color: rgb(131, 131, 131);
  color: rgb(73, 73, 73);
}
.section-leadership .leadership-management .leadership-panel .leadership-list .leadership-list-items .leadership-card__body .leadership-card__top .leadership-card__tools .btn--secondary:hover {
  background-color: rgb(185, 185, 185);
}
.section-leadership .leadership-management .leadership-panel .leadership-list .leadership-list-items .leadership-card__body .leadership-card__top .leadership-card__tools .btn--danger {
  background-color: #dc3545;
  color: white;
}
.section-leadership .leadership-management .leadership-panel .leadership-list .leadership-list-items .leadership-card__body .leadership-card__top .leadership-card__tools .btn--danger:hover {
  background-color: rgb(189.2151898734, 32.7848101266, 47.7721518987);
  transform: translateY(-2px);
}
.section-leadership .leadership-management .leadership-panel .leadership-list .leadership-list-items .leadership-card__body .leadership-card__bottom {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.section-leadership .leadership-management .leadership-panel .leadership-list .leadership-list-items .leadership-card__body .leadership-card__bottom .leadership-card__duration {
  font-size: 1.2rem;
  color: rgb(59, 118, 137);
  font-weight: 600;
  margin: 0;
}
.section-leadership .leadership-management .leadership-panel .leadership-list .leadership-list-items .leadership-card__body .leadership-card__bottom .leadership-card__excerpt {
  font-size: 1.4rem;
  color: rgb(73, 73, 73);
  line-height: 1.5;
  margin: 0;
}
.section-leadership .leadership-management .leadership-panel .leadership-list .leadership-list-items .leadership-card__body .leadership-card__bottom .leadership-card__details {
  margin-top: 1rem;
}
.section-leadership .leadership-management .leadership-panel .leadership-list .leadership-list-items .leadership-card__body .leadership-card__bottom .leadership-card__details .leadership-card__detail {
  font-size: 1.2rem;
  color: rgb(73, 73, 73);
  margin-bottom: 0.5rem;
}
.section-leadership .leadership-management .leadership-panel .leadership-list .leadership-list-items .leadership-card__body .leadership-card__bottom .leadership-card__details .leadership-card__detail strong {
  color: rgb(59, 118, 137);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 7000;
}
.modal-overlay.hidden {
  display: none;
}
.modal-overlay .modal-container {
  background-color: white;
  border-radius: 1rem;
  max-width: 80rem;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-overlay .modal-container .modal-content {
  padding: 0;
}
.modal-overlay .modal-container .modal-content .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
  border-bottom: 1px solid rgb(131, 131, 131);
  background-color: rgb(59, 118, 137);
  color: white;
  border-radius: 1rem 1rem 0 0;
}
.modal-overlay .modal-container .modal-content .modal-header h3 {
  margin: 0;
  font-size: 2rem;
}
.modal-overlay .modal-container .modal-content .modal-header .close-button {
  background: none;
  border: none;
  color: white;
  font-size: 3rem;
  cursor: pointer;
  line-height: 1;
}
.modal-overlay .modal-container .modal-content .modal-header .close-button:hover {
  opacity: 0.8;
}
.modal-overlay .modal-container .modal-content .edit-leader-form {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.modal-overlay .modal-container .modal-content .edit-leader-form label {
  font-size: 1.4rem;
  font-weight: 600;
  color: rgb(73, 73, 73);
  margin-bottom: 0.5rem;
}
.modal-overlay .modal-container .modal-content .edit-leader-form input,
.modal-overlay .modal-container .modal-content .edit-leader-form textarea {
  padding: 1rem;
  border: 1px solid rgb(131, 131, 131);
  border-radius: 0.5rem;
  font-size: 1.4rem;
  font-family: inherit;
  transition: all 0.2s;
}
.modal-overlay .modal-container .modal-content .edit-leader-form input:focus,
.modal-overlay .modal-container .modal-content .edit-leader-form textarea:focus {
  outline: none;
  border-color: rgb(59, 118, 137);
  box-shadow: 0 0 0 2px rgba(59, 118, 137, 0.1);
}
.modal-overlay .modal-container .modal-content .edit-leader-form textarea {
  min-height: 8rem;
  resize: vertical;
}
.modal-overlay .modal-container .modal-content .edit-leader-form .file-input-wrapper {
  position: relative;
}
.modal-overlay .modal-container .modal-content .edit-leader-form .file-input-wrapper .file-input-label {
  display: block;
  padding: 2rem;
  border: 2px dashed rgb(131, 131, 131);
  border-radius: 0.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background-color: rgba(59, 118, 137, 0.05);
}
.modal-overlay .modal-container .modal-content .edit-leader-form .file-input-wrapper .file-input-label:hover {
  border-color: rgb(59, 118, 137);
  background-color: rgba(59, 118, 137, 0.1);
}
.modal-overlay .modal-container .modal-content .edit-leader-form .file-input-wrapper .file-input-label .file-input-text {
  font-size: 1.4rem;
  color: rgb(73, 73, 73);
}
.modal-overlay .modal-container .modal-content .edit-leader-form .file-input-wrapper input[type=file] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.modal-overlay .modal-container .modal-content .edit-leader-form .form-row-2,
.modal-overlay .modal-container .modal-content .edit-leader-form .form-row-3 {
  display: flex;
  gap: 2rem;
}
@media only screen and (max-width: 56.25em) {
  .modal-overlay .modal-container .modal-content .edit-leader-form .form-row-2,
  .modal-overlay .modal-container .modal-content .edit-leader-form .form-row-3 {
    flex-direction: column;
  }
}
.modal-overlay .modal-container .modal-content .edit-leader-form .form-row-2__item-1, .modal-overlay .modal-container .modal-content .edit-leader-form .form-row-2__item-2,
.modal-overlay .modal-container .modal-content .edit-leader-form .form-row-3__item-1,
.modal-overlay .modal-container .modal-content .edit-leader-form .form-row-3__item-2 {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.modal-overlay .modal-container .modal-content .edit-leader-form .form-row-1,
.modal-overlay .modal-container .modal-content .edit-leader-form .form-row-4,
.modal-overlay .modal-container .modal-content .edit-leader-form .form-row-5,
.modal-overlay .modal-container .modal-content .edit-leader-form .form-row-6,
.modal-overlay .modal-container .modal-content .edit-leader-form .form-row-7,
.modal-overlay .modal-container .modal-content .edit-leader-form .form-row-8,
.modal-overlay .modal-container .modal-content .edit-leader-form .form-row-9 {
  display: flex;
  flex-direction: column;
}
.modal-overlay .modal-container .modal-content .edit-leader-form .form-row-9 {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 1rem;
}
@media only screen and (max-width: 56.25em) {
  .modal-overlay .modal-container .modal-content .edit-leader-form .form-row-9 {
    justify-content: center;
  }
}
.modal-overlay .modal-container .modal-content .edit-leader-form .form-row-9 .btn {
  padding: 1rem 2rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 1.4rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.modal-overlay .modal-container .modal-content .edit-leader-form .form-row-9 .btn--primary {
  background-color: rgb(59, 118, 137);
  color: white;
}
.modal-overlay .modal-container .modal-content .edit-leader-form .form-row-9 .btn--primary:hover {
  background-color: rgb(43.6479591837, 87.2959183673, 101.3520408163);
}
.modal-overlay .modal-container .modal-content .edit-leader-form .form-row-9 .btn--secondary {
  background-color: rgb(131, 131, 131);
  color: rgb(73, 73, 73);
}
.modal-overlay .modal-container .modal-content .edit-leader-form .form-row-9 .btn--secondary:hover {
  background-color: rgb(185, 185, 185);
}

.notification {
  position: fixed;
  top: 2rem;
  right: 2rem;
  background-color: white;
  border-radius: 0.8rem;
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.15);
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 30rem;
  max-width: 50rem;
  z-index: 8000;
  animation: slideInRight 0.3s ease;
}
.notification__content {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}
.notification__content i {
  font-size: 2rem;
}
.notification__content i.fa-check-circle {
  color: #28a745;
}
.notification__content i.fa-info-circle {
  color: #17a2b8;
}
.notification__content i.fa-exclamation-triangle {
  color: #ffc107;
}
.notification__content i.fa-times-circle {
  color: #dc3545;
}
.notification__content span {
  font-size: 1.4rem;
  color: rgb(73, 73, 73);
  font-weight: 500;
}
.notification__close {
  background: none;
  border: none;
  color: rgb(131, 131, 131);
  cursor: pointer;
  font-size: 1.8rem;
  padding: 0.5rem;
  border-radius: 0.4rem;
  transition: all 0.2s;
}
.notification__close:hover {
  background-color: rgb(185, 185, 185);
  color: rgb(73, 73, 73);
}
.notification--success {
  border-left: 0.4rem solid #28a745;
}
.notification--success .notification__content i.fa-check-circle {
  color: #28a745;
}
.notification--error {
  border-left: 0.4rem solid #dc3545;
}
.notification--error .notification__content i.fa-times-circle {
  color: #dc3545;
}
.notification--warning {
  border-left: 0.4rem solid #ffc107;
}
.notification--warning .notification__content i.fa-exclamation-triangle {
  color: #ffc107;
}
.notification--info {
  border-left: 0.4rem solid #17a2b8;
}
.notification--info .notification__content i.fa-info-circle {
  color: #17a2b8;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.apply-for-grants * {
  overflow: visible;
}

.apply-for-grants {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.apply-for-grants::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
  z-index: -1;
}

.apply-for-grants--1::before {
  background-image: linear-gradient(rgba(59, 118, 137, 0.9), rgba(59, 118, 137, 0.6)), linear-gradient(rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 100%), url("/img/medium-shot-smiley-man-with-vegetables.jpg");
}

.apply-for-grants--2::before {
  background-image: linear-gradient(rgba(59, 118, 137, 0.9), rgba(59, 118, 137, 0.6)), linear-gradient(rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 100%), url("/img/cheerful-black-medic-using-microscope.jpg");
  background-position: top center;
}

.apply-for-grants--3::before {
  background-image: linear-gradient(rgba(59, 118, 137, 0.9), rgba(59, 118, 137, 0.6)), linear-gradient(rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 100%), url("/img/portrait-handsome-african-barista-standing-with-crossed-arms-counter-trendy-coffee-shop.jpg");
  background-position: right;
}

.apply-for-grants--4::before {
  background-image: linear-gradient(rgba(59, 118, 137, 0.9), rgba(59, 118, 137, 0.6)), linear-gradient(rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 100%), url("/img/high-angle-stacked-books-graduation-cap-diploma-education-day.jpg");
}

.articles-page {
  position: relative;
  z-index: 1;
  margin-top: 11rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.articles-sections {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 0 2rem;
  max-width: 100%;
}
@media only screen and (max-width: 37.5em) {
  .articles-sections {
    margin: 0 1rem;
  }
}

.career * {
  overflow: visible;
}

.career {
  box-sizing: border-box;
  overflow-x: hidden;
  position: relative;
  z-index: 1;
  width: 100%;
}

.career-sections {
  padding: 5rem 15rem;
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: 10rem;
}
@media only screen and (max-width: 75em) {
  .career-sections {
    padding: 5rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .career-sections {
    padding: 1rem;
  }
}

.features-section {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.features-section .heading-text {
  text-align: center;
}
.features-section .heading-text h2 {
  color: rgb(59, 118, 137);
  margin-bottom: 3rem;
}
.features-section .features-options {
  display: flex;
  gap: 3rem;
  justify-content: space-between;
}
@media only screen and (max-width: 56.25em) {
  .features-section .features-options {
    flex-direction: column;
    align-items: center;
  }
}
.features-section .feature {
  background-color: rgba(8, 20, 24, 0.1);
  border: 1px solid rgb(185, 185, 185);
  width: 30%;
  padding: 2rem;
  border-radius: 1rem;
  text-align: center;
}
@media only screen and (max-width: 56.25em) {
  .features-section .feature {
    width: 50%;
  }
}
.features-section .feature h3 {
  margin-bottom: 3rem;
}

.jobs-section h2 {
  text-align: center;
  margin-bottom: 3rem;
  color: rgb(59, 118, 137);
}
.jobs-section .job-search {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3rem;
}
@media only screen and (max-width: 37.5em) {
  .jobs-section .job-search {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }
  .jobs-section .job-search input {
    padding: 1rem;
    height: 3rem;
  }
  .jobs-section .job-search__button {
    width: fit-content;
  }
}
.jobs-section .job-search input {
  width: 40%;
  border-radius: 0.5rem;
  border: 1px solid rgb(131, 131, 131);
  padding: 0 0.5rem;
}
.jobs-section .job-search__button {
  padding: 0.5rem 2rem;
  border: 1px solid rgb(131, 131, 131);
}
.jobs-section .job-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  grid-template-rows: repeat(auto, 1fr);
  row-gap: 3rem;
  column-gap: 3rem;
}

.donations * {
  overflow: visible;
}

.donations::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(59, 118, 137, 0.9), rgba(59, 118, 137, 0.6)), linear-gradient(rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 100%), url("/img/colleagues-team-working-company-paperwork-doig-teamwork-analyze-documents-online-research-information-planning-corporate-presentation-with-data-charts-job-collaboration.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
  z-index: -1;
}

.donations {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.faq * {
  overflow: visible;
}

.faq {
  position: relative;
  margin-top: 15rem;
}

.faq-sections {
  padding: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: start;
}

.section-faq-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.section-faq-container h2 {
  color: rgb(59, 118, 137);
}

.grants-page {
  position: relative;
  z-index: 1;
  margin-top: 11rem;
}

.grants-page::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("/img/Illustration.png");
  background-repeat: no-repeat;
  background-size: cover;
  filter: grayscale(100%);
  opacity: 0.09;
  animation: backgroundPan 100s infinite alternate ease-in-out;
  z-index: -1;
}

.list {
  list-style-type: circle;
}

.list__item {
  font-size: 1.6rem;
  font-family: "Lora Sans", sans-serif;
}

.grants-sections {
  padding: 5rem 10rem;
  display: flex;
  flex-direction: column;
  justify-content: start;
}
.grants-sections h2 {
  color: rgb(59, 118, 137);
}
.grants-sections .section-3 {
  display: flex;
  flex-direction: column;
}
.grants-sections .section-3 h3 {
  font-weight: 400;
}
.grants-sections .section-3 div {
  margin: 1rem 0;
}
.grants-sections .section-3 div em {
  background-color: rgb(255, 196, 0);
  padding: 0.5rem;
  color: rgb(73, 73, 73);
  font-weight: 600;
}
.grants-sections .section-3 button {
  margin: 0 auto;
}
.grants-sections .section-3 .initial-text {
  position: relative;
  overflow: hidden;
}
.grants-sections .section-3 .toggle-text {
  display: inline-block;
  max-height: 0; /* Collapsed state */
  overflow: hidden;
  opacity: 0;
  transition: all 0.5s;
}
.grants-sections .section-3 .show {
  max-height: 500px; /* Adjust this value based on content height */
  opacity: 1;
}
.grants-sections .section-3 .hide {
  display: none;
}
@media only screen and (max-width: 37.5em) {
  .grants-sections {
    padding: 5rem;
  }
}

.home * {
  overflow: visible;
}

.home {
  box-sizing: border-box;
  overflow-x: hidden;
  position: relative;
  z-index: 1;
  width: 100%;
}

.home::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("/img/medium-shot-smiley-artisans-workshop.jpg");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  background-attachment: fixed;
  filter: grayscale(100%);
  opacity: 0.1;
  z-index: -1;
}

.home-sections {
  padding: 5rem 15rem;
  display: flex;
  flex-direction: column;
  justify-content: start;
}
@media only screen and (max-width: 75em) {
  .home-sections {
    padding: 5rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .home-sections {
    padding: 1rem;
  }
}
.home-sections .section-charts {
  padding: 5rem;
}
.home-sections .text-card-container {
  display: flex;
  justify-content: space-between;
  overflow: visible;
}
@media only screen and (max-width: 56.25em) {
  .home-sections .text-card-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
}
.home-sections .business-health-check {
  background-color: yellowgreen !important;
  padding: 5rem 15rem;
}
@media only screen and (max-width: 75em) {
  .home-sections .business-health-check {
    padding: 5rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .home-sections .business-health-check {
    padding: 2rem 1rem;
  }
}
.home-sections .health-check-container {
  max-width: 80rem;
  margin: 0 auto;
  background: white;
  border-radius: 1.5rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.home-sections .health-check-screen {
  display: none;
  padding: 4rem;
  min-height: 50rem;
}
@media only screen and (max-width: 37.5em) {
  .home-sections .health-check-screen {
    padding: 2rem;
    min-height: 40rem;
  }
}
.home-sections .health-check-screen.active {
  display: block;
}
.home-sections .health-check__intro {
  text-align: center;
  max-width: 60rem;
  margin: 0 auto;
}
.home-sections .health-check__title {
  font-size: 3.5rem;
  font-weight: 700;
  color: rgb(69, 154, 157);
  margin-bottom: 2rem;
}
@media only screen and (max-width: 37.5em) {
  .home-sections .health-check__title {
    font-size: 2.5rem;
  }
}
.home-sections .health-check__description {
  font-size: 1.8rem;
  color: rgb(73, 73, 73);
  margin-bottom: 3rem;
  line-height: 1.6;
}
@media only screen and (max-width: 37.5em) {
  .home-sections .health-check__description {
    font-size: 1.6rem;
  }
}
.home-sections .health-check__progress {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 4rem;
}
@media only screen and (max-width: 37.5em) {
  .home-sections .health-check__progress {
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 3rem;
  }
}
.home-sections .progress-bar {
  flex: 1;
  height: 0.8rem;
  background: #e9ecef;
  border-radius: 1rem;
  overflow: hidden;
}
@media only screen and (max-width: 37.5em) {
  .home-sections .progress-bar {
    width: 100%;
  }
}
.home-sections .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, rgb(69, 154, 157), rgb(51, 59, 61));
  border-radius: 1rem;
  transition: width 0.3s ease;
  width: 0%;
}
.home-sections .progress-text {
  font-size: 1.6rem;
  font-weight: 600;
  color: rgb(69, 154, 157);
}
@media only screen and (max-width: 37.5em) {
  .home-sections .progress-text {
    font-size: 1.4rem;
  }
}
.home-sections .health-check__question-container {
  max-width: 70rem;
  margin: 0 auto;
}
.home-sections #question-content {
  margin-bottom: 3rem;
}
.home-sections #question-content h3 {
  font-size: 2.4rem;
  font-weight: 600;
  color: rgb(51, 59, 61);
  line-height: 1.4;
  margin-bottom: 2rem;
}
@media only screen and (max-width: 37.5em) {
  .home-sections #question-content h3 {
    font-size: 2rem;
  }
}
.home-sections .health-check__options {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 4rem;
}
.home-sections .health-check__option {
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 1rem;
  padding: 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}
.home-sections .health-check__option input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.home-sections .health-check__option label {
  font-size: 1.8rem;
  color: rgb(51, 59, 61);
  cursor: pointer;
  line-height: 1.5;
  flex: 1;
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}
.home-sections .health-check__option label .radio-custom {
  width: 2rem;
  height: 2rem;
  border: 2px solid rgb(69, 154, 157);
  border-radius: 50%;
  background: white;
  flex-shrink: 0;
  margin-top: 0.2rem;
  transition: all 0.3s ease;
  position: relative;
}
.home-sections .health-check__option label .radio-custom::after {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: rgb(69, 154, 157);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s ease;
}
.home-sections .health-check__option label p {
  margin: 0;
  line-height: 1.5;
  flex: 1;
}
@media only screen and (max-width: 37.5em) {
  .home-sections .health-check__option label {
    font-size: 1.6rem;
  }
  .home-sections .health-check__option label .radio-custom {
    width: 1.8rem;
    height: 1.8rem;
  }
  .home-sections .health-check__option label .radio-custom::after {
    width: 0.7rem;
    height: 0.7rem;
  }
}
.home-sections .health-check__option:hover {
  border-color: rgb(69, 154, 157);
  background: #f8f9fa;
}
.home-sections .health-check__option:hover label .radio-custom {
  border-color: rgb(69, 154, 157);
  background: rgba(69, 154, 157, 0.1);
}
.home-sections .health-check__option.selected {
  border-color: rgb(69, 154, 157);
  background: #f8f9ff;
  box-shadow: 0 0 0 4px rgba(69, 154, 157, 0.1);
}
.home-sections .health-check__option.selected label .radio-custom {
  background: rgb(69, 154, 157);
  border-color: rgb(69, 154, 157);
}
.home-sections .health-check__option.selected label .radio-custom::after {
  background: white;
  transform: translate(-50%, -50%) scale(1);
}
@media only screen and (max-width: 37.5em) {
  .home-sections .health-check__option {
    padding: 1.5rem;
    gap: 1rem;
  }
  .home-sections .health-check__option label {
    gap: 1rem;
  }
}
.home-sections .selection-reminder {
  background: rgba(230, 150, 57, 0.1);
  border: 2px solid rgb(230, 150, 57);
  border-radius: 1rem;
  padding: 1.5rem;
  margin: 2rem 0;
  text-align: center;
  animation: pulse 2s infinite;
}
.home-sections .selection-reminder p {
  color: rgb(230, 150, 57);
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0;
}
.home-sections .selection-reminder p i {
  margin-right: 1rem;
  font-size: 1.8rem;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(230, 150, 57, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(230, 150, 57, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(230, 150, 57, 0);
  }
}
@media only screen and (max-width: 37.5em) {
  .home-sections .selection-reminder {
    margin: 1.5rem 0;
    padding: 1rem;
  }
  .home-sections .selection-reminder p {
    font-size: 1.4rem;
  }
  .home-sections .selection-reminder p i {
    font-size: 1.6rem;
  }
}
.home-sections .health-check__navigation {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}
.home-sections .health-check__navigation button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #ccc;
}
.home-sections .health-check__navigation button:disabled:hover {
  transform: none;
  box-shadow: none;
}
@media only screen and (max-width: 37.5em) {
  .home-sections .health-check__navigation {
    flex-direction: column;
  }
}
.home-sections .health-check__results-container {
  text-align: center;
  max-width: 70rem;
  margin: 0 auto;
}
.home-sections .results__header h2 {
  font-size: 3rem;
  font-weight: 700;
  color: rgb(69, 154, 157);
  margin-bottom: 3rem;
}
@media only screen and (max-width: 37.5em) {
  .home-sections .results__header h2 {
    font-size: 2.5rem;
  }
}
.home-sections .results__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin-bottom: 4rem;
}
.home-sections .score-circle {
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 700;
  color: white;
  position: relative;
}
.home-sections .score-circle::before {
  content: "";
  position: absolute;
  top: -1rem;
  left: -1rem;
  right: -1rem;
  bottom: -1rem;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #e9ecef 0%, #e9ecef var(--score-angle, 0%), transparent var(--score-angle, 0%));
  z-index: -1;
}
.home-sections .score-circle--struggling {
  background: linear-gradient(135deg, #dc3545, #c82333);
}
.home-sections .score-circle--struggling::before {
  --score-angle: 0deg;
}
.home-sections .score-circle--growing {
  background: linear-gradient(135deg, #ffc107, #e0a800);
}
.home-sections .score-circle--growing::before {
  --score-angle: 0deg;
}
.home-sections .score-circle--thriving {
  background: linear-gradient(135deg, #28a745, #218838);
}
.home-sections .score-circle--thriving::before {
  --score-angle: 0deg;
}
.home-sections .score-percentage {
  font-size: 3.5rem;
  font-weight: 700;
}
@media only screen and (max-width: 37.5em) {
  .home-sections .score-percentage {
    font-size: 3rem;
  }
}
.home-sections .score-label {
  font-size: 2.5rem;
  font-weight: 600;
  padding: 1rem 2rem;
  border-radius: 2rem;
}
@media only screen and (max-width: 37.5em) {
  .home-sections .score-label {
    font-size: 2rem;
  }
}
.home-sections .results__tips {
  text-align: left;
  margin-bottom: 4rem;
}
.home-sections .results__tips h3 {
  font-size: 2.2rem;
  font-weight: 600;
  color: rgb(51, 59, 61);
  margin-bottom: 2rem;
  text-align: center;
}
@media only screen and (max-width: 37.5em) {
  .home-sections .results__tips h3 {
    font-size: 1.8rem;
  }
}
.home-sections .tip-item {
  background: #f8f9fa;
  border-left: 4px solid rgb(69, 154, 157);
  padding: 1.5rem;
  margin-bottom: 1rem;
  border-radius: 0 0.5rem 0.5rem 0;
}
.home-sections p {
  font-size: 1.6rem;
  color: rgb(73, 73, 73);
  margin: 0;
  line-height: 1.6;
}
@media only screen and (max-width: 37.5em) {
  .home-sections p {
    font-size: 1.4rem;
  }
}

.results__cta {
  display: flex;
  justify-content: center;
  gap: 2rem;
}
@media only screen and (max-width: 37.5em) {
  .results__cta {
    flex-direction: column;
    align-items: center;
  }
}
.results__cta .button {
  padding: 1.5rem 3rem;
  font-size: 1.8rem;
}
@media only screen and (max-width: 37.5em) {
  .results__cta .button {
    width: 100%;
    max-width: 30rem;
  }
}

.leadership-database {
  position: relative;
  z-index: 1;
  margin-top: 11rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media only screen and (max-width: 56.25em) {
  .leadership-database-sections {
    margin-top: 10rem !important;
  }
}
.leadership-database-sections {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.leadership-database-sections .section {
  width: 100%;
}

.section-database--info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 5rem;
}
.section-database--info__heading {
  font-size: 6rem;
  text-align: center;
}

.database-container {
  display: flex;
  width: 80vw;
  gap: 5rem;
  justify-content: space-between;
  align-items: stretch;
}
@media only screen and (max-width: 56.25em) {
  .database-container {
    flex-direction: column;
    gap: 5rem;
    align-items: center;
  }
}

.leader-info {
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  overflow: hidden;
  height: 100%;
  width: 60%;
}
@media only screen and (max-width: 37.5em) {
  .leader-info {
    width: 100%;
  }
}
.leader-info a {
  display: block;
  width: auto;
  transition: all 0.1s;
  margin-bottom: 1rem;
  height: 4rem;
  overflow: visible;
  font-weight: 700;
}
.leader-info a:hover {
  cursor: pointer;
  transform: scale(1.1) translateX(2.9rem);
  font-weight: 700;
  color: rgb(230, 150, 57);
}
.leader-info a:active {
  cursor: pointer;
  transform: scale(1) translateX(0);
  font-weight: 700;
  color: rgb(73, 73, 73);
}
.leader-info p {
  margin-bottom: 1.5rem;
  font-weight: 700;
}
.leader-info h4 {
  color: rgb(73, 73, 73);
  font-size: 2rem;
}
.leader-info__container {
  background-color: rgb(69, 154, 157);
}
.leader-info__nav-bar {
  list-style-type: none;
  color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 4rem;
}
.leader-info__nav-item {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 100;
  font-family: "Merriweather Sans", sans-serif;
  transition: all 0.1s;
}
.leader-info__nav-item:hover {
  cursor: pointer;
  transform: scale(1.1) rotate(5deg);
  font-weight: 400;
}
.leader-info__nav-item:active {
  transform: none;
}
.leader-info__nav-item--current {
  font-weight: 700;
}
.leader-info__nav-item--current:hover {
  cursor: auto;
  transform: none;
  font-weight: 700;
}
.leader-info__text {
  background-color: rgba(168, 218, 220, 0.3);
  flex: 1;
  padding: 1.5rem;
  font-size: 1.6rem;
  font-weight: 100;
  font-family: "Lora Sans", sans-serif;
}

.leadership-history {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  margin-top: 11rem;
}
.leadership-history .container {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 2rem;
}
.leadership-history .leadership-header {
  text-align: center;
  margin-bottom: 8rem;
  padding-top: 5rem;
}
.leadership-history .leadership-header h1 {
  font-size: 6rem;
  font-weight: 700;
  color: rgb(29, 53, 87);
  margin-bottom: 2rem;
}
.leadership-history .leadership-header h1 .highlight {
  color: rgb(69, 154, 157);
  display: block;
}
.leadership-history .leadership-header p {
  font-size: 1.8rem;
  color: rgb(105, 105, 105);
  max-width: 80rem;
  margin: 0 auto;
  line-height: 1.6;
}
.leadership-history .filters-section {
  margin-bottom: 5rem;
  display: flex;
  gap: 2rem;
  align-items: center;
}
@media only screen and (max-width: 56.25em) {
  .leadership-history .filters-section {
    flex-direction: column;
    gap: 2rem;
  }
}
.leadership-history .filters-section .search-container {
  flex: 1;
  position: relative;
}
.leadership-history .filters-section .search-container .search-icon {
  position: absolute;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgb(131, 131, 131);
  font-size: 1.6rem;
}
.leadership-history .filters-section .search-container input {
  width: 100%;
  padding: 1.5rem 1.5rem 1.5rem 5rem;
  font-size: 1.8rem;
  border: 1px solid rgb(185, 185, 185);
  border-radius: 0.8rem;
}
.leadership-history .filters-section .search-container input:focus {
  outline: none;
  border-color: rgb(69, 154, 157);
  box-shadow: 0 0 0 3px rgba(69, 154, 157, 0.1);
}
.leadership-history .filters-section span .highlight {
  color: rgb(69, 154, 157);
  display: block;
}
.leadership-history .filters-section select {
  padding: 1.5rem 2rem;
  border: 1px solid rgb(185, 185, 185);
  border-radius: 0.8rem;
  font-size: 1.8rem;
  background-color: white;
}
.leadership-history .filters-section select:focus {
  outline: none;
  border-color: rgb(69, 154, 157);
  box-shadow: 0 0 0 3px rgba(69, 154, 157, 0.1);
}
.leadership-history .results-count {
  margin-bottom: 3rem;
  color: rgb(105, 105, 105);
  font-size: 1.8rem;
}
.leadership-history .results-count .count {
  font-weight: 600;
}
.leadership-history .leaders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(55rem, 1fr));
  gap: 3rem;
  margin-bottom: 10rem;
}
@media only screen and (max-width: 56.25em) {
  .leadership-history .leaders-grid {
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 2rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .leadership-history .leaders-grid {
    grid-template-columns: 1fr;
  }
}
.leadership-history .timeline-section {
  margin-top: 10rem;
}
.leadership-history .timeline-section h2 {
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 5rem;
  color: rgb(29, 53, 87);
}
.leadership-history .timeline-section .timeline-container {
  position: relative;
}
.leadership-history .timeline-section .timeline-container::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0.4rem;
  height: 100%;
  background-color: rgb(168, 218, 220);
}
.leadership-history .page-footer {
  margin-top: 10rem;
  text-align: center;
  color: rgb(131, 131, 131);
  font-size: 1.2rem;
  padding: 3rem 0;
}

.leader-card {
  background: white;
  border-radius: 1rem;
  border: 1px solid rgba(8, 20, 24, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  border-left: 4px solid rgb(69, 154, 157);
  overflow: hidden;
}
.leader-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border-left-color: rgb(59, 118, 137);
  transform: translateY(-0.5rem);
}
.leader-card:hover .leader-name {
  color: rgb(69, 154, 157);
}
.leader-card .card-content {
  padding: 2.5rem;
}
.leader-card .leader-header {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 2rem;
}
@media only screen and (max-width: 56.25em) {
  .leader-card .leader-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
  }
}
.leader-card .leader-header .leader-image {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgb(168, 218, 220);
}
@media only screen and (max-width: 56.25em) {
  .leader-card .leader-header .leader-image {
    width: 8rem;
    height: 8rem;
  }
}
.leader-card .leader-header .leader-info {
  flex: 1;
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}
@media only screen and (max-width: 56.25em) {
  .leader-card .leader-header .leader-info {
    align-items: center;
    text-align: center;
    width: 100%;
  }
}
.leader-card .leader-header .leader-info .leader-name {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  transition: color 0.3s ease;
}
.leader-card .leader-header .leader-info .leader-title {
  font-size: 1.8rem;
  color: rgb(105, 105, 105);
  font-weight: 500;
}
.leader-card .leader-header .leader-badge {
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-size: 1.4rem;
  font-weight: 600;
  align-self: flex-start;
}
@media only screen and (max-width: 56.25em) {
  .leader-card .leader-header .leader-badge {
    align-self: center;
    margin-top: 0.5rem;
  }
}
.leader-card .leader-header .leader-badge.military {
  background-color: #fee2e2;
  color: #dc2626;
}
.leader-card .leader-header .leader-badge.civilian {
  background-color: #f3f4f6;
  color: #374151;
}
.leader-card .leader-details {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.leader-card .leader-details .detail-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.8rem;
}
.leader-card .leader-details .detail-item .icon {
  color: rgb(69, 154, 157);
  width: 1.6rem;
}
.leader-card .leader-details .detail-item.allegations .icon {
  color: #dc2626;
}
.leader-card .leader-details .detail-item.allegations span {
  color: #dc2626;
}
.leader-card .leader-details .detail-item.family .icon {
  color: #9333ea;
}
.leader-card .leader-details .detail-item.family span {
  color: #9333ea;
}

.leader-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  z-index: 1000;
}
.leader-modal.hidden {
  display: none;
}
.leader-modal .modal-content {
  background: white;
  border-radius: 1rem;
  max-width: 80rem;
  max-height: 90vh;
  overflow-y: auto;
  width: 100%;
}
.leader-modal .modal-header {
  padding: 3rem;
  border-bottom: 1px solid rgba(8, 20, 24, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}
.leader-modal .modal-header .leader-summary {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}
.leader-modal .modal-header .leader-summary .modal-image {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgb(168, 218, 220);
}
.leader-modal .modal-header .leader-summary .modal-info h2 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: rgb(29, 53, 87);
}
.leader-modal .modal-header .leader-summary .modal-info .modal-title {
  color: rgb(105, 105, 105);
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.leader-modal .modal-header .leader-summary .modal-info .modal-period {
  color: rgb(69, 154, 157);
  font-weight: 600;
}
.leader-modal .modal-header .close-button {
  background: none;
  border: none;
  font-size: 14rem;
  color: rgb(131, 131, 131);
  cursor: pointer;
  position: absolute;
  top: 1.5rem;
  right: 2rem;
}
.leader-modal .modal-header .close-button:hover {
  color: rgb(105, 105, 105);
}
.leader-modal .modal-tabs {
  border-bottom: 1px solid rgba(8, 20, 24, 0.1);
}
.leader-modal .modal-tabs .tab-buttons {
  display: flex;
}
.leader-modal .modal-tabs .tab-buttons .tab-button {
  background: none;
  border: none;
  padding: 2rem 3rem;
  font-size: 2.2rem;
  cursor: pointer;
  color: rgb(131, 131, 131);
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}
.leader-modal .modal-tabs .tab-buttons .tab-button:hover {
  color: rgb(105, 105, 105);
}
.leader-modal .modal-tabs .tab-buttons .tab-button.active {
  color: rgb(69, 154, 157);
  border-bottom-color: rgb(69, 154, 157);
}
.leader-modal .modal-body {
  padding: 3rem;
}

.timeline-item {
  display: flex;
  align-items: center;
  margin-bottom: 5rem;
}
.timeline-item:nth-child(even) {
  flex-direction: row-reverse;
}
.timeline-item .timeline-content {
  width: 45%;
  background: white;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-left: 4px solid rgb(69, 154, 157);
}
.timeline-item .timeline-content h3 {
  font-weight: 700;
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}
.timeline-item .timeline-content .period {
  font-size: 1.8rem;
  color: rgb(105, 105, 105);
  margin-bottom: 0.5rem;
}
.timeline-item .timeline-content .type {
  font-size: 1.8rem;
  font-weight: 500;
  color: rgb(69, 154, 157);
}
.timeline-item:nth-child(even) .timeline-content {
  padding-left: 3rem;
}
.timeline-item:nth-child(odd) .timeline-content {
  padding-right: 3rem;
  text-align: right;
}
.timeline-item .timeline-dot {
  width: 2rem;
  height: 2rem;
  background-color: rgb(69, 154, 157);
  border-radius: 50%;
  position: relative;
  z-index: 10;
  border: 4px solid white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.timeline-item .timeline-spacer {
  width: 45%;
}

.min-h-screen {
  min-height: 100vh;
}

.text-center {
  text-align: center;
}

.hidden {
  display: none;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.p-6 {
  padding: 1.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mt-16 {
  margin-top: 4rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.w-full {
  width: 100%;
}

.rounded-md {
  border-radius: 0.375rem;
}

.border {
  border-width: 1px;
}

.border-gray-300 {
  border-color: #d1d5db;
}

.bg-white {
  background-color: #ffffff;
}

.cursor-pointer {
  cursor: pointer;
}

.object-cover {
  object-fit: cover;
}

.rounded-full {
  border-radius: 9999px;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.font-medium {
  font-weight: 500;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

@media (min-width: 768px) {
  .md\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }
  .md\:flex {
    display: flex;
  }
  .md\:gap-4 {
    gap: 1rem;
  }
  .md\:items-center {
    align-items: center;
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.stories-page {
  position: relative;
  z-index: 1;
  margin-top: 11rem;
  min-height: 100vh;
}
@media only screen and (max-width: 75em) {
  .stories-page {
    margin-top: 16rem;
  }
}

.stories-sections {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 480px);
  margin: 0 10rem;
}
@media only screen and (max-width: 37.5em) {
  .stories-sections {
    margin: 0 2.5rem;
  }
}

/*# sourceMappingURL=style.css.map */