/* ==========================================================================
   Table of Contents
   ========================================================================== */
/*
  1.  Global Styles (Body, Main, & Background Wrapper)
  2.  Careers Hero Section
      2.1 #careers-hero
      2.2 .careers-black-blur
      2.3 #careers
      2.4 #careers-vector
  3.  Interns and Volunteers Section
      3.1  #interns-and-volunteers
      3.2  .careers-title
      3.3  .careers-title h2
      3.4  #interns-and-volunteers-wrapper
      3.5  #interns, #volunteers
      3.6  #interns-image, #volunteers-image
      3.7  #interns-wrapper, #volunteers-wrapper 
      3.8  #interns-wrapper h3, #volunteers-wrapper h3 
      3.9  #interns-wrapper p, #interns-info li, #volunteers-wrapper p, #volunteers-info li
      3.10 #interns-info, #volunteers-info 
      3.11 #interns-info li:first-child, #volunteers-info li:first-child
      3.12 #interns-join-btn, volunteers-join-btn
  4. Intern Stories Section
      4.1 #testimonials
      4.2 #testimonials article
      4.3 #testimonials article img
      4.4 .intern-stories-wrapper
      4.5 .intern-name
      4.6 .intern-title
      4.7 .intern-testimony
      4.8 #rakesh (ID-specific overrides)
  5. Color Bar Section
      5.1 .color-bar
      5.2 .color-bar [color-class]
*/

/* ==========================================================================
   1. Global Styles (Body, Main, & Background Wrapper)
   ========================================================================== */

body {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  background-color: #fbfbfc;
}
main {
  display: block;
}
#background-wrapper {
  background-image: url("/assets/images/careers/careers-background.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 3;
}
@media screen and (min-width: 576px) {
  #background-wrapper {
    background-image: url("/assets/images/careers/careers-background-576.svg");
  }
}

@media screen and (min-width: 768px) {
  #background-wrapper {
    background-image: url("/assets/images/careers/careers-background-768.svg");
  }
}
@media screen and (min-width: 992px) {
  #background-wrapper {
    background-image: url("/assets/images/careers/careers-background-992.svg");
  }
}
@media screen and (min-width: 1200px) {
  #background-wrapper {
    background-image: url("/assets/images/careers/careers-background-1200.svg");
  }
}
@media screen and (min-width: 1400px) {
  #background-wrapper {
    background-image: url("/assets/images/careers/careers-background-1400.svg");
    margin-top: 14rem;
  }
}
@media screen and (min-width: 1920px) {
  #background-wrapper {
    background-image: url("/assets/images/careers/careers-background-1920.svg");
  }
}
/* ==========================================================================
   2. Careers Hero Section
   ========================================================================== */
/* ------------------------------   2.1 #careers-hero   ------------------------------ */
#careers-hero {
  min-width: 320px;
  height: clamp(533px, 40vw, 1375px);
  background-image: url("/assets/images/careers/careers-hero-image.svg");
  background-size: cover;
  background-position: center center;
}
@media screen and (min-width: 576px) {
  #careers-hero {
    min-width: 576px;
    height: clamp(615px, 40vw, 1375px);
  }
}
@media screen and (min-width: 768px) {
  #careers-hero {
    min-width: 768px;
    height: clamp(715px, 40vw, 1375px);
  }
}
@media screen and (min-width: 992px) {
  #careers-hero {
    min-width: 992px;
    height: clamp(796px, 40vw, 1375px);
  }
}
@media screen and (min-width: 1200px) {
  #careers-hero {
    min-width: 1200px;
    height: clamp(1181px, 40vw, 1375px);
  }
}
@media screen and (min-width: 1400px) {
  #careers-hero {
    min-width: 1400px;
    height: clamp(1260px, 40vw, 1375px);
  }
}
@media screen and (min-width: 1920px) {
  #careers-hero {
    min-width: 1920px;
    height: clamp(1574px, 40vw, 1375px);
  }
}
/* ------------------------------   2.2 .careers-black-blur   ------------------------------ */

.careers-black-blur {
  position: relative;
  top: -70px;
  left: 0;
  width: 100%;
  min-height: 145px;
  mask-image: linear-gradient(
    to bottom,
    rgba(36, 36, 36, 0.65) 55%,
    rgba(0, 0, 0, 0) 100%
  );
  z-index: 1;
  background-color: #323752;
}
@media screen and (min-width: 576px) {
  .careers-black-blur {
    top: -55px;
  }
}
@media screen and (min-width: 768px) {
  .careers-black-blur {
    top: -40px;
  }
}
@media screen and (min-width: 1200px) {
  .careers-black-blur {
    top: -20px;
  }
}
/* ------------------------------    2.3 #careers   ------------------------------ */

#careers {
  position: relative;
  left: 50%;
  top: 105px;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 100%;
  color: #fbfbfc;
  text-align: center;
  text-shadow: 0 2.187px 7.655px rgba(0, 0, 0, 0.25);
  font-family: Barlow;
  font-size: 4.3rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 2.58px;
  text-transform: uppercase;
}
@media screen and (min-width: 576px) {
  #careers {
    left: 50%;
    top: 125px;
    letter-spacing: 3.72px;
    font-size: 6.2rem;
  }
}
@media screen and (min-width: 768px) {
  #careers {
    top: 150px;
    font-size: 7.2rem;
  }
}
@media screen and (min-width: 992px) {
  #careers {
    top: 195px;
    /* font-size: 86.8px; */
  }
}
@media screen and (min-width: 1200px) {
  #careers {
    top: 395px;
    font-size: 8.27rem;
  }
}
@media screen and (min-width: 1400px) {
}
@media screen and (min-width: 1920px) {
  #careers {
    top: 520px;
    font-size: 10.4rem;
  }
}
/* ------------------------------    2.4 #careers-vector  ------------------------------ */

#careers-vector {
  position: relative;
  left: 0;
  bottom: -165px;
  z-index: 2;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 576px) {
  #careers-vector {
    bottom: -115px;
  }
}
@media screen and (min-width: 768px) {
  #careers-vector {
    bottom: -127px;
  }
}
@media screen and (min-width: 992px) {
  #careers-vector {
    bottom: -260px;
  }
}
@media screen and (min-width: 1200px) {
  #careers-vector {
    bottom: -569px;
  }
}
@media screen and (min-width: 1400px) {
  #careers-vector {
    bottom: -620px;
  }
}
@media screen and (min-width: 1920px) {
  #careers-vector {
    bottom: -800px;
  }
}

/* ==========================================================================
   3. Interns and Volunteers Section
   ========================================================================== */
/* ------------------------------    3.1 #interns-and-volunteers  ------------------------------ */

#interns-and-volunteers {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 280px;
  margin: 1rem auto;
}
/* @media screen and (min-width: 576px) {
} */
@media screen and (min-width: 768px) {
  #interns-and-volunteers {
    width: 648px;
  }
}
@media screen and (min-width: 992px) {
  #interns-and-volunteers {
    margin-top: 10rem;
  }
}
@media screen and (min-width: 1200px) {
  #interns-and-volunteers {
    min-width: 86.666666rem;
    margin-top: 11rem;
  }
}
/* @media screen and (min-width: 1400px) {
} */
@media screen and (min-width: 1920px) {
  #interns-and-volunteers {
    min-width: 146.6665rem;
    margin-top: 21rem;
  }
}
/* ------------------------------    3.2 .careers-title  ------------------------------ */
.careers-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
@media screen and (min-width: 576px) {
}
@media screen and (min-width: 768px) {
}
@media screen and (min-width: 992px) {
}
@media screen and (min-width: 1200px) {
}
@media screen and (min-width: 1400px) {
}
@media screen and (min-width: 1920px) {
}

/* ------------------------------    3.3 .careers-title h2  ------------------------------ */

.careers-title h2 {
  color: #192147;
  text-align: center;
  font-size: 2.1rem; /*25px*/
  font-style: normal;
  line-height: normal;
  letter-spacing: 1.25px;
}
/* @media screen and (min-width: 576px){
  
} */
@media screen and (min-width: 768px) {
  .careers-title h2 {
    font-size: 2.45rem; /* 29.4px */
  }
}
/* @media screen and (min-width: 992px){
  
} */
@media screen and (min-width: 1200px) {
  .careers-title h2 {
    font-size: 2.8rem;
    width: 850px;
  }
}
/* @media screen and (min-width: 1400px){
  
} */
@media screen and (min-width: 1920px) {
  .careers-title h2 {
    font-size: 3.5rem; /*42px*/
    width: 147rem;
  }
}
/* ------------------------------       3.4   #interns-and-volunteers-wrapper   ------------------------------ */
@media screen and (min-width: 768px) {
  #interns-and-volunteers-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}
@media screen and (min-width: 1200px) {
  #interns-and-volunteers-wrapper {
    min-width: 86.666666rem;
  }
}
@media screen and (min-width: 1920px) {
  #interns-and-volunteers-wrapper {
    min-width: 146.6665rem;
  }
}
/* ------------------------------       3.5 #interns, #volunteers   ------------------------------ */
#interns,
#volunteers {
  box-sizing: border-box;
  display: flex;
  width: 23.333rem;
  margin-top: -3rem;
  flex-direction: column;
  align-self: center;
}
/* @media screen and (min-width: 576px) {
} */
@media screen and (min-width: 768px) {
  #interns,
  #volunteers {
    width: 26rem;
    min-height: 936px;
  }
}
/* @media screen and (min-width: 992px) {
} */
@media screen and (min-width: 1200px) {
  #interns,
  #volunteers {
    width: 500px;
    min-height: 1480px;
  }
}
/* @media screen and (min-width: 1400px) {
} */
@media screen and (min-width: 1920px) {
  #interns,
  #volunteers {
    min-width: 848px;
    min-height: 1856px;
  }
}

/* ------------------------------       3.6 #interns-image, #volunteers-image   ------------------------------ */

#interns-image,
#volunteers-image {
  width: 17.5rem;
  min-height: 16.25rem;
  flex-shrink: 0;
  position: relative;
  bottom: -190px;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* @media screen and (min-width: 576px) {
} */
/* @media screen and (min-width: 768px) {
} */
/* @media screen and (min-width: 992px) {
} */
@media screen and (min-width: 1200px) {
  #interns-image,
  #volunteers-image {
    width: 425px;
    min-height: 425px;
    bottom: -430px;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
/* @media screen and (min-width: 1400px) {
} */
@media screen and (min-width: 1920px) {
  #interns-image,
  #volunteers-image {
    width: 722px;
    min-height: 722px;
    bottom: -730px;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/* ------------------------------   3.7 #interns-wrapper, #volunteers-wrapper   ------------------------------ */
#interns-wrapper {
  background: #38499c;
}
#volunteers-wrapper {
  background-color: #5f3c9b;
}
#interns-wrapper,
#volunteers-wrapper {
  box-sizing: border-box;
  display: flex;
  flex-grow: 1; /* Rather than setting a height or min-height, 
  which resulted in differing heights when side by side 
  starting at 1200, this allows the two elements to grow 
  inside their parent's size. To Change the height, go to 
  the parent containers #interns and #volunteers and set their min-height */
  width: 100%;
  padding: 1.25rem 1.75em 3.25rem 1.75rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
  border-radius: 0.425rem;
}
@media screen and (min-width: 576px) {
  #interns-wrapper,
  #volunteers-wrapper{
    border-radius: 0.667rem
  }
}
/* @media screen and (min-width: 768px) {
} */
/* @media screen and (min-width: 992px) {
} */
@media screen and (min-width: 1200px) {
  #interns-wrapper,
  #volunteers-wrapper {
    /* min-height: 975px; */
    padding: 35.655px 41.003px 59.315px 41.003px;
    border-radius: 0.825rem;
  }
}
/* @media screen and (min-width: 1400px) {
} */
@media screen and (min-width: 1920px) {
  #interns-wrapper,
  #volunteers-wrapper {
    /* min-height: 1125px; */
    padding: 35.655px 41.003px 59.315px 41.003px;
  }
}

/* ------------------------------    3.8 #interns-wrapper h3, #volunteers-wrapper h3  ------------------------------ */

#interns-wrapper h3,
#volunteers-wrapper h3 {
  margin-top: 8rem;
  margin-bottom: 0;
  color: #fbfbfc;
  font-family: "Barlow", sans-serif;
  font-size: 1.5625rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
@media screen and (min-width: 576px) {
}
@media screen and (min-width: 768px) {
}
@media screen and (min-width: 992px) {
}
@media screen and (min-width: 1200px) {
  #interns-wrapper h3,
  #volunteers-wrapper h3 {
    font-size: 2.8rem;
    margin-top: 21rem;
  }
}
@media screen and (min-width: 1400px) {
}
@media screen and (min-width: 1920px) {
  #interns-wrapper h3,
  #volunteers-wrapper h3 {
    font-size: 3.5rem; /*42px*/
    margin-top: 35rem;
  }
}

/* ------------------------------    3.9 #interns-wrapper p, #interns-info li, #volunteers-wrapper p, #volunteers-info li   ------------------------------ */

#interns-wrapper p,
#interns-info li,
#volunteers-wrapper p,
#volunteers-info li {
  color: #fbfbfc;
  font-family: "Montserrat", sans-serif;
  font-size: 1.41667rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin: 0;
}
@media screen and (min-width: 576px) {
}
@media screen and (min-width: 768px) {
}
@media screen and (min-width: 992px) {
}
@media screen and (min-width: 1200px) {
  #interns-wrapper p,
  #interns-info li,
  #volunteers-wrapper p,
  #volunteers-info li {
    font-size: 1.9rem;
  }
}
@media screen and (min-width: 1400px) {
}
@media screen and (min-width: 1920px) {
  #interns-wrapper p,
  #interns-info li,
  #volunteers-wrapper p,
  #volunteers-info li {
    font-size: 2.35rem; /*28px*/
  }
}

/* ------------------------------    3.10 #interns-info, #volunteers-info  ------------------------------ */

#interns-info,
#volunteers-info {
  padding-left: 2rem;
  margin: 0;
}
@media screen and (min-width: 576px) {
}
@media screen and (min-width: 768px) {
}
@media screen and (min-width: 992px) {
}
@media screen and (min-width: 1200px) {
}
@media screen and (min-width: 1400px) {
}
@media screen and (min-width: 1920px) {
}

/* ------------------------------    3.11 #interns-info li:first-child, #volunteers-info li:first-child  ------------------------------ */

#interns-info li:first-child,
#volunteers-info li:first-child {
  margin-bottom: 0.75rem;
}
@media screen and (min-width: 576px) {
}
@media screen and (min-width: 768px) {
}
@media screen and (min-width: 992px) {
}
@media screen and (min-width: 1200px) {
}
@media screen and (min-width: 1400px) {
}
@media screen and (min-width: 1920px) {
}

/* ------------------------------    3.12 #interns-join-btn, volunteers-join-btn  ------------------------------ */

#interns-join-btn {
  /* Layout Settings*/
  display: flex;
  min-height: 30px;
  padding: 5.455px;
  justify-content: center;
  align-items: center;

  /* Border & Color Settings */
  border-radius: 6.818px;
  border: 0.517px solid var(--Neutral-Indigo-100);
  background-color: var(--Navy-Blue-800);
  /* Font Settings */
  color: var(--Neutral-Indigo-100);
  font-family: "Barlow Condensed";
  font-size: 1.135rem;
  font-style: normal;
  font-weight: 400;
  line-height: 16.364px; /* 120% */
  letter-spacing: 0.218px;
  text-transform: uppercase;
  text-decoration: none;
}
#interns-join-btn:hover {
  border: none;
  color: var(--Neutral-Indigo-1000);
  background-color: var(--Neutral-Indigo-100);
}
#volunteers-join-btn {
  color: #fbfbfc;
  font-family: "Barlow Condensed";
  font-size: 1.41667rem;
  font-style: normal;
  font-weight: 600;
  line-height: 46.004px; /* 270.613% */
  letter-spacing: 0.613px;
  text-transform: uppercase;
  text-decoration: none;
  position: relative; /* This is the key to making the underlining animation show up in the :hover::after and ::after selectors below */
}
#volunteers-join-btn:hover::after {
  width: 100%;
}
#volunteers-join-btn::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 4px;
  background-color: currentColor;
  transition: width 0.3s ease-in-out;
}
@media screen and (min-width: 576px) {
}
@media screen and (min-width: 768px) {
}
@media screen and (min-width: 992px) {
}
@media screen and (min-width: 1200px) {
  #interns-join-btn {
    font-size: 2.5rem;
    padding: 1.09rem;
  }
  #volunteers-join-btn {
    font-size: 1.87rem;
  }
}
@media screen and (min-width: 1400px) {
}
@media screen and (min-width: 1920px) {
  #interns-join-btn {
    font-size: 3.2rem;
    padding: 1.3rem;
  }
  #volunteers-join-btn {
    font-size: 3.2rem;
  }
}

/* ==========================================================================
   4. Intern Stories Section
   ========================================================================== */

/* ------------------------------    4.1 #testimonials  ------------------------------ */

#testimonials {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 280px;
  margin: 5rem auto 0 auto;
}
@media screen and (min-width: 576px) {
}
@media screen and (min-width: 768px) {
  #testimonials {
    width: 648px;
  }
}
@media screen and (min-width: 992px) {
}
@media screen and (min-width: 1200px) {
  #testimonials {
    min-width: 86.666666rem;
    margin-top: 12rem;
  }
}
@media screen and (min-width: 1400px) {
}
@media screen and (min-width: 1920px) {
  #testimonials {
    min-width: 146.6665rem;
  }
}

/* ------------------------------    4.2 #testimonials-wrapper   ------------------------------ */
@media screen and (min-width: 1200px) {
  #testimonials-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    min-width: 86.666666rem;
  }
}
@media screen and (min-width: 1920px) {
  #testimonials-wrapper {
    min-width: 146.6665rem;
  }
}
/* ------------------------------    4.2 #testimonials article   ------------------------------ */

#testimonials article {
  box-sizing: border-box;
  display: flex;
  width: 23.333rem;
  min-height: 39.75rem;
  padding: 10rem 1.25rem 0 1.25rem;
  margin-top: 12rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border-radius: 0.425rem;
  background: #3b8165;
  position: relative;
}
@media screen and (min-width: 576px) {
  #testimonials article {
    border-radius: 0.667rem;
  }
}
@media screen and (min-width: 768px) {
  #testimonials article {
    width: 47.333rem;
    min-height: 28.75rem;
  }
  #testimonials article:first-child {
    margin-top: 8rem !important;
  }
}
@media screen and (min-width: 992px) {
}
@media screen and (min-width: 1200px) {
  #testimonials article {
    width: 500px;
    min-height: 35.75rem;
    padding: 103px 40px 0 40px;
    border-radius: 0.825rem;
  }
  #testimonials article:first-child {
    margin-top: 12rem !important;
  }
}
@media screen and (min-width: 1400px) {
}
@media screen and (min-width: 1920px) {
  #testimonials article {
    width: 848px;
  }
}

/* ------------------------------    4.3 #testimonials article img    ------------------------------ */

#testimonials article img {
  width: 17.5rem;
  min-height: 16.25rem;
  flex-shrink: 0;
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (min-width: 576px) {
}
@media screen and (min-width: 768px) {
  #testimonials article img {
    width: 14.5rem;
  }
}
@media screen and (min-width: 992px) {
}
@media screen and (min-width: 1200px) {
}
@media screen and (min-width: 1400px) {
}
@media screen and (min-width: 1920px) {
}

/* ------------------------------    4.4 .intern-stories-wrapper    ------------------------------ */

.intern-stories-wrapper {
  box-sizing: border-box;
  min-height: 29.75rem;
  color: #fbfbfc;
}
@media screen and (min-width: 576px) {
}
@media screen and (min-width: 768px) {
  .intern-stories-wrapper {
    min-height: 29.75rem;
  }
}
@media screen and (min-width: 992px) {
}
@media screen and (min-width: 1200px) {
  .intern-stories-wrapper {
    min-height: 24.75rem;
  }
}
@media screen and (min-width: 1400px) {
}
@media screen and (min-width: 1920px) {
}

/* ------------------------------    4.5 .intern-name   ------------------------------ */

.intern-name {
  text-align: center;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 0.5rem auto;
}
@media screen and (min-width: 576px) {
}
@media screen and (min-width: 768px) {
  .intern-name {
    margin: 0.5rem auto;
  }
}
@media screen and (min-width: 992px) {
}
@media screen and (min-width: 1200px) {
}
@media screen and (min-width: 1400px) {
}
@media screen and (min-width: 1920px) {
  .intern-name {
    font-size: 2rem !important;
  }
}

/* ------------------------------    4.6 .intern-title    ------------------------------ */

.intern-title {
  text-align: center;
  font-family: "Montserrat", sans-serif !important; /* OVERRIDE FOR VARIABLES SETTINGS */
  font-style: normal;
  font-weight: 400 !important; /* OVERRIDE FOR VARIABLES SETTINGS */
  line-height: normal;
  text-transform: capitalize;
  margin: 0.5rem auto;
}
@media screen and (min-width: 576px) {
}
@media screen and (min-width: 768px) {
  .intern-title {
    margin: 0.5rem auto;
  }
}
@media screen and (min-width: 992px) {
}
@media screen and (min-width: 1200px) {
}
@media screen and (min-width: 1400px) {
}
@media screen and (min-width: 1920px) {
}

/* ------------------------------    4.7 .intern-testimony    ------------------------------ */

.intern-testimony {
  text-align: center;
  font-style: normal;
  font-weight: 400;
  line-height: 1.45rem;
}

@media screen and (min-width: 576px) {
}
@media screen and (min-width: 768px) {
  .intern-testimony {
    font-size: 1.2rem;
  }
}
@media screen and (min-width: 992px) {
}
@media screen and (min-width: 1200px) {
  .intern-testimony {
    font-size: 1.35rem;
  }
}
@media screen and (min-width: 1400px) {
}
@media screen and (min-width: 1920px) {
  .intern-testimony {
    font-size: 1.7rem;
    line-height: 1.7rem;
  }
}

/* ==========================================================================
   5. Color Bar Section
   ========================================================================== */
/* ------------------------------    5.1 .color-bar    ------------------------------ */
.color-bar {
  width: 100%;
  display: flex;
}
@media screen and (min-width: 1200px) {
  .color-bar {
    width: 780px;
    margin: 0 auto;
  }
}

/* ------------------------------    5.2 .color-bar [color-class]    ------------------------------ */
.color-bar .blue,
.color-bar .green,
.color-bar .purple,
.color-bar .yellow {
  min-height: 0.6rem;
  flex: 1;
}
@media screen and (min-width: 768px) {
  .color-bar .blue,
  .color-bar .green,
  .color-bar .purple,
  .color-bar .yellow {
    min-height: 1rem;
  }
}