/* General Settings 
---- 01 Typography System
      FONT SIZE SYSTEM (px)
      10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

      FONT WEIGHTS: 
      Default: 400
      Medium: 500
      Semi-Bold: 600
      Bold: 700

      LINE HEIGHTS: 
      Default: 1
      Small: 1.05
      Medium: 1.2
      Large: 1.8
      Paragraph Default: 1.6

      LETTER SPACING:
      -0.5px
      0.75px

      02 COLORS
      Primary: #FE2F20; #5BC0EB; #FFFC31; #0F7173;

      Tints: #fffe98; #ffeae9
      Shades: #e52a1d; #cb261a; #499abc; #4086a5; #37738d (ACCESIBLE ON #ffeae9);
      Accents: 
      Greys: #19180A; 

      05 SHADOWS
      box-shadow: 

      06 BORDER-RADIUS
      Small: 6px;
      Big: 15px;
      Medium: 9px;

      07 WHITESPACE
      SPACING SYSTEM (px)
      2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  color: #444;
  line-height: 1;
  font-family: "Lato", sans-serif;
}

.container {
  max-width: 130rem;
  margin: 0 auto;
}

.grid--2-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.grid--4-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
}

.header-logo,
.footer-img {
  cursor: pointer;
}

/* HEADER */
.header {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: space-between;
  padding: 0.5rem 4.8rem 0.5rem 4.8rem;
  border-top: 0.3rem solid #fe2f20;
  align-items: center;
  background-color: #ffeae9;
}

.header-logo {
  height: 16rem;
}

.nav-links {
  display: flex;
  flex-direction: row;
  list-style: none;
  justify-content: space-between;
  gap: 3rem;
}

.nav-link:link,
.nav-link:visited {
  font-size: 1.8rem;
  text-decoration: none;
  color: #37738d;
  transition: all 0.3s;
}

.nav-link:hover,
.nav-link:active {
  color: #cb261a;
}

.menu-link:link,
.menu-link:visited {
  background-color: #37738d;
  color: #fff;
  border-radius: 0.6rem;
  padding: 0.6rem 1.2rem;
  transition: all 0.3s;
}

.menu-link:hover,
.menu-link:active {
  background-color: #cb261a;
  color: #fff;
}
/* //////////////////////// */

/* //////////////////////// */
/* HERO - CAREERS PAGE */
.hero-careers {
  background: linear-gradient(to right, #7ccdef, #def2fb);
  height: 15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 9.6rem;
}

.hero-careers-text {
  font-size: 3.6rem;
  color: #b22116;
}
/* //////////////////////// */

/* //////////////////////// */
/* CAREERS PAGE - MAIN PART */
.careers-main {
  margin-bottom: 9.6rem;
}

.skip-button-subheading {
  font-size: 1.4rem;
  color: #7f1810;
  text-align: center;
  margin-bottom: 0.8rem;
}

.careers-skip-button:link,
.careers-skip-button:visited {
  background-color: #37738d;
  color: #fff;
  border: 0.2rem solid #b22116;
  width: 60%;
  font-size: 2.4rem;
  padding: 0.6rem 1.2rem;
  display: block;
  margin: 0 auto;
  margin-bottom: 4.8rem;
  text-align: center;
  border-radius: 0.6rem;
  text-decoration: none;
  transition: 0.3s all;
}

.careers-skip-button:hover,
.careers-skip-button:active {
  border: 0.2rem solid #37738d;
  color: #b22116;
  background-color: #fff;
}

.careers-main-heading {
  font-size: 2.8rem;
  margin-bottom: 2.4rem;
  text-align: center;
  color: #37738d;
}

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

.job-item:last-child {
  margin-bottom: 4.8rem;
}

.job-img {
  width: 30rem;
  margin-bottom: 1.6rem;
  border-radius: 0.6rem;
  border: 0.3rem solid #e6e32c;
}

.job-title {
  margin-bottom: 0.4rem;
  font-size: 2rem;
  color: #244d5e;
  font-weight: 600;
  text-align: center;
}

.job-description {
  margin-bottom: 2.4rem;
  font-size: 1.6rem;
  color: #7f1810;
  width: 75%;
  line-height: 1.6;
  text-align: center;
}

.application-warning {
  font-size: 1.2rem;
  text-align: center;
  color: #244d5e;
}

.application-form-box {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: row;
}

/* //////////////////////// */
/* FOOTER */
.footer {
  padding-bottom: 3.6rem;
  display: grid;
  grid-template-columns: 1.5fr 3fr 1.5fr;
  justify-items: center;
  border-top: 0.2rem solid rgba(254, 47, 32, 0.6);
  padding-top: 2rem;
  background-color: #eff9fd;
}

.site-map-box {
  display: flex;
  justify-items: center;
}

.site-map-links {
  display: flex;
  flex-direction: column;
  row-gap: 0.8rem;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 1.8rem;
  color: #244d5e;
}

.site-map-link:link,
.site-map-link:visited {
  color: #244d5e;
  transition: 0.3s;
  text-decoration: none;
}

.site-map-link:hover,
.site-map-link:active {
  color: #7f1810;
}

.slogan-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* row-gap: 0.8rem; */
}

.footer-img {
  width: 16rem;
}

.senior-project-box {
  /* display: flex;
  flex-direction: column; */
  padding-top: 3.2rem;
}

.sp-info {
  display: flex;
  flex-direction: column;
  font-size: 1.8rem;
  row-gap: 0.8rem;
  align-items: center;
  justify-items: center;
}

.sp-link:link,
.sp-link:visited {
  color: #244d5e;
  transition: 0.3s;
  text-decoration: none;
}

.sp-link:hover,
.sp-link:active {
  color: #666514;
}

.sp-footer-text {
  color: #666514;
  box-shadow: 0 0 0.3rem 0.1rem #cb261a;
  padding: 0.3rem;
  margin-top: 4.3rem;
  border-radius: 0.4rem;
}
/* //////////////////////// */

/* MEDIA QUERIES */

/* 1088px */
@media (max-width: 68em) {
  .grid--4-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 928px */
@media (max-width: 58em) {
  /* HEADER */
  .header-logo {
    max-width: 14rem;
    max-height: 14rem;
  }

  .nav-link:link,
  .nav-link:visited {
    font-size: 1.6rem;
  }
  /* /////////// */

  /* FOOTER */
  .footer {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-img {
    max-width: 14rem;
    max-height: 14rem;
  }

  .site-map-links,
  .sp-link:link,
  .sp-link:visited {
    font-size: 1.6rem;
  }

  .sp-footer-text {
    font-size: 1.6rem;
  }
}

/* 624px */
@media (max-width: 39em) {
  /* HEADER */
  .header {
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: center;
    padding-bottom: 1.6rem;
  }

  .header-logo {
    margin: 0 auto;
    display: block;
    padding-bottom: 0.8rem;
  }

  .grid--4-cols {
    grid-template-columns: 1fr;
  }

  .careers-skip-button:link,
  .careers-skip-button:visited {
    font-size: 2rem;
  }

  .careers-main-heading {
    font-size: 2rem;
  }

  /* FOOTER */
  .footer {
    grid-template-columns: 1fr;
  }

  .site-map-box {
    margin-bottom: 1.6rem;
  }

  .slogan-box {
    margin-bottom: 1.6rem;
  }

  .senior-project-box {
    padding-top: 0;
    margin-bottom: 1.6rem;
  }
}

/* 416px */
@media (max-width: 26em) {
  /* HEADER */
  .nav-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    column-gap: 0;
    row-gap: 1.8rem;
  }

  .menu-link-li {
    grid-column: 1/3;
  }

  .menu-link:link,
  .menu-link:hover {
    padding: 0.4rem 0.8rem;
  }

  .careers-skip-button:link,
  .careers-skip-button:visited {
    font-size: 1.8rem;
  }

  .job-img {
    width: 25rem;
  }
}
/* //////////////////////// */