@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
:root {
  --black: #000000;
  --white: #fff;
  --navy-blue: #09274C;
  --yellow: #F6C42E;
  --red: #D82221;
  --gray: #F1F1F1;
}
body {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--black);
  font-family: "Lexend", sans-serif;
}

/***************
**** Global ****
***************/
h1, h2, h3, h4, h5, h6 {
  color: var(--navy-blue);
  font-weight: 600;
  font-family: "Lexend", sans-serif;
}
a {
  color: var(--navy-blue);
  transition: all .3s ease-in-out;
}
a:hover {
  text-decoration: none;
}
.site-button {
  display: inline-block;
  background-color: var(--yellow);
  color: var(--navy-blue);
  font-size: 16px;
  line-height: 30px;
  font-weight: 600;
  padding: 4px 16px;
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
}
.site-button:hover {
  background-color: var(--navy-blue);
  color: var(--white);
}

.font-xxl {
  font-size: 36px;
  line-height: 42px;
}
.font-xl {
  font-size: 24px;
  line-height: 32px;
}
.font-lg {
  font-size: 26px;
  line-height: 34px;
}
.font-medium {
  font-size: 20px;
  line-height: 24px;
}
.font-small {
  font-size: 16px;
  line-height: 24px;
}

.bg-navy-blue {
  background-color: var(--navy-blue);
}
.bg-gray {
  background-color: var(--gray);
}

.wysiwyg-content :last-child {
  margin-bottom: 0;
}

/***************
**** Header ****
***************/
.site-header {
  border-top: 25px solid var(--red);
}

/***************
**** Footer ****
***************/
.site-footer * {
  color: var(--white);
}


/***************
**** Hero ****
***************/
.hero-section {
  padding-top: 100px;
  padding-bottom: 110px;
  background-size: cover;
  background-position: top right;
  background-repeat: no-repeat;
}
.hero-section:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, rgba(9, 39, 76, 0.40) 0%, var(--navy-blue) 100%);
  z-index: -1;
}
.hero-section .site-button:hover {
  background-color: var(--white);
  color: var(--navy-blue);
}

/*******************
**** Two Column ****
*******************/
.heading-with-border {
  display: inline-block;
  border-bottom: 3px solid var(--yellow);
  padding-bottom: 16px;
}
.two-column-section .content-col {
  padding-top: 30px;
  padding-bottom: 50px;
}
.two-column-section .content-col .wysiwyg-content span.highlight {
  background-color: var(--red);
  color: var(--white);
  padding: 2px;
}
.two-column-section .image-col img {
  margin-top: -40px;
}
/********************
**** Team Section ****
*********************/
.team-section {
  padding-top: 50px;
  padding-bottom: 50px;
}
.team-member-wrapper img {
  border-radius: 5px;
}
.team-section .team-button {
  font-size: 16px;
  line-height: 22px;
  padding: 10px 20px;
  border-radius: 3px;
}
.team-member-block {
  row-gap: 30px;
}


/********************
**** Media Query ****
********************/
@media only screen and (min-width: 768px) {
  body {
    line-height: 28px;
  }
  .font-xxl {
    font-size: 45px;
    line-height: 48px;
  }
  .hero-section {
    padding-top: 120px;
    padding-bottom: 150px;
  }
  .hero-section:before {
    background: linear-gradient(270deg, rgba(9, 39, 76, 0.15) 0%, var(--navy-blue) 100%);
  }
  .team-section .team-button {
    font-size: 14px;
    line-height: 22px;
    padding: 6px;
  }
  .two-column-section .content-col {
    padding-top: 45px;
    padding-bottom: 50px;
  }
  .team-section {
    padding-top: 75px;
    padding-bottom: 75px;
  }
  .team-member-block {
    row-gap: 40px;
  }
  .two-column-section .content-col .wysiwyg-content span {
    padding: 2px;
  }
}
@media only screen and (min-width: 1620px) {
  .container {
    max-width: 1540px;
  }
  body {
    font-size: 21px;
    line-height: 34px;
  }
  .site-button {
    font-size: 24px;
    padding: 11px 30px;
  }
  .font-xxl {
    font-size: 70px;
    line-height: 70px;
  }
  .font-xl {
    font-size: 36px;
    line-height: 43px;
  }
  .font-lg {
    font-size: 35px;
    line-height: 40px;
  }
  .font-medium {
    font-size: 25px;
    line-height: 30px;
  }
  .font-small {
    font-size: 20px;
    line-height: 30px;
  }
  .hero-section {
    padding-top: 154px;
    padding-bottom: 245px;
  }
  .two-column-section .image-col img {
    transform: scale(1.05);
    margin-top: 0;
  }
  .team-section .team-button {
    font-size: 18px;
    line-height: 23px;
    padding: 6px 10px;
  }
  .two-column-section .content-col {
    padding-top: 65px;
    padding-bottom: 54px;
  }
}
@media only screen and (min-width: 1920px) {
  .two-column-section .image-col img {
    transform: scale(1.2);
    left: -75px;
  }
}