/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
:root {
  --container: 80.813rem;
  --orange: #f39320;
  --white: #ffffff;
  --off-black: #2c2f31;
  --grey: #edefee;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Lexend", sans-serif;
  color: var(--off-black);
}

.u-container {
  max-width: var(--container);
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
  margin-left: auto;
  margin-right: auto;
}

.u-bg-grey {
  background: var(--grey);
}

.u-bg-off-black {
  background: var(--off-black);
}

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

.u-text-uppercase {
  text-transform: uppercase;
}

.u-orange-text {
  color: var(--orange);
}

h1 {
  font-size: 30px;
  font-size: clamp(
    30px,
    16.3636363636px + 4.2613636364vw,
    60px
  );
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0px;
}

h2 {
  font-size: 25px;
  font-size: clamp(
    25px,
    16.3636363636px + 2.6988636364vw,
    44px
  );
  font-weight: 400;
}

p {
  font-size: 18px;
  font-size: clamp(
    18px,
    16.6363636364px + 0.4261363636vw,
    21px
  );
  font-weight: 400;
}

.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 0.875rem;
  border: 1px solid transparent;
  padding: 0.625rem 1.375rem 0.5rem 1.375rem;
  line-height: 1.5;
  border-radius: 1.25rem;
  text-decoration: none;
}
.btn--orange {
  background: var(--orange);
  color: var(--white);
}
.btn--white {
  background: var(--white);
  color: var(--off-black);
}

header {
  position: fixed;
  width: 100%;
  z-index: 1;
  transition: all 0.9s;
  height: 200px;
  z-index: 2;
  height: 7rem;
}
@media (min-width: 64em) {
  header {
    height: 12.5rem;
  }
}

.header {
  display: flex;
  justify-content: space-between;
  padding-top: 0.625rem;
}
@media (min-width: 64em) {
  .header {
    padding-top: 2.5rem;
  }
}
@media (max-width: 63.99em) {
  .header__col a {
    font-size: 0.75rem;
  }
}
.header__col a svg {
  width: 0.9375rem;
  position: relative;
  top: 0.1875rem;
}
.header__col:first-of-type svg {
  max-width: 15.8125rem;
  width: 100%;
  height: auto;
}
@media (max-width: 63.99em) {
  .header__col:last-of-type {
    display: flex;
    flex-direction: column;
    margin-left: 1.25rem;
  }
  .header__col:last-of-type a:first-of-type {
    margin-bottom: 1.25rem;
  }
}

.js-scrolling {
  height: 7.5rem;
}
@media (min-width: 64em) {
  .js-scrolling {
    height: 122px;
  }
}
.js-scrolling .header {
  align-items: center;
  padding-top: 0.625rem;
}
@media (min-width: 64em) {
  .js-scrolling .header {
    padding-top: 1.25rem;
  }
}
.js-scrolling .btn--white {
  background: var(--grey);
  color: var(--off-black);
}
.js-scrolling svg {
  max-width: 12.3125rem !important;
  transition: all 0.9s;
}
.js-scrolling svg .scroll-text {
  fill: var(--off-black) !important;
}

.hero {
  display: grid;
  grid-template-areas: "hero";
  place-items: end;
  height: 45.5rem;
}
@media (min-width: 64em) {
  .hero {
    place-items: center;
  }
}
@media (max-width: 63.99em) {
  .hero:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 45.5rem;
    background: transparent linear-gradient(180deg, #000000 0%, rgba(255, 255, 255, 0) 43%) 0% 0% no-repeat padding-box;
  }
}
.hero:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 45.5rem;
  background: transparent linear-gradient(0deg, #000000 0%, rgba(255, 255, 255, 0) 60%) 0% 0% no-repeat padding-box;
  mix-blend-mode: multiply;
}
@media (min-width: 64em) {
  .hero:before {
    background: transparent linear-gradient(90deg, #000000 0%, rgba(255, 255, 255, 0) 43%) 0% 0% no-repeat padding-box;
  }
}
.hero > * {
  grid-area: hero;
  width: 100%;
}
.hero h1 {
  color: var(--white);
  margin-bottom: 1.875rem;
}
.hero img:first-child,
.hero picture:first-child {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 45.5rem;
}
.hero img:last-child,
.hero picture:last-child {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.hero__content {
  max-width: 27.0625rem;
  position: relative;
}
@media (max-width: 63.99em) {
  .hero__content {
    padding-bottom: 1.25rem;
  }
}
@media (min-width: 64em) {
  .hero__content {
    padding-top: 5rem;
  }
}
.hero__content p {
  color: var(--white);
  margin-top: 1.25rem;
}

.swiper-button-next, .swiper-button-prev {
  color: var(--off-black) !important;
}

.swiper-container {
  position: relative;
  padding: 4.6875rem 0 4.6875rem 0;
}
.swiper-container p {
  text-align: center;
  font-family: var(--lexendMed);
  font-size: 22px;
  font-size: clamp(
    22px,
    22px + 0vw,
    22px
  );
  padding-bottom: 3.75rem;
}

.swiper {
  max-width: 62.5rem;
  width: 100%;
  height: 100px;
}
.swiper img,
.swiper picture {
  width: 5rem;
  height: 5rem;
}
.swiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper__center-arrows {
  max-width: var(--container);
  width: 100%;
  position: absolute;
  left: 50%;
  top: 65%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
@media (min-width: 64em) {
  .swiper__center-arrows {
    top: 65%;
  }
}

.experience {
  padding-top: 5.75rem;
  padding-bottom: 7.1875rem;
}
.experience h2,
.experience p {
  color: var(--white);
}
.experience h2 {
  padding-bottom: 2.5rem;
}
.experience p {
  padding-bottom: 3.4375rem;
}
.experience p {
  max-width: 70.625rem;
  margin: 0 auto;
  font-size: 24px;
  font-size: clamp(
    24px,
    21.2727272727px + 0.8522727273vw,
    30px
  );
}
.experience__grid {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 64em) {
  .experience__grid {
    gap: 4.375rem;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
.experience__grid p {
  font-size: 20px;
  font-size: clamp(
    20px,
    20px + 0vw,
    20px
  );
  padding-bottom: 1.25rem;
}
.experience__col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.video-block {
  max-width: 68.875rem;
  margin: 0 auto;
  padding-bottom: 5.375rem;
}
.video-block__title {
  padding: 5.25rem 0 3.75rem 0;
  font-size: 22px;
  font-size: clamp(
    22px,
    22px + 0vw,
    22px
  );
}
.video-block__grid {
  display: grid;
  /* Then style the iframe to fit in the container div with full height and width */
}
.video-block__grid iframe {
  margin: 0 auto;
  display: block;
}
.video-block__grid .container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  margin-bottom: 3.125rem;
}
.video-block__grid .responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.video-block__col p:first-of-type {
  font-size: 20px;
  font-size: clamp(
    20px,
    20px + 0vw,
    20px
  );
  margin-bottom: 1.25rem;
}
.video-block__col p:last-of-type {
  font-size: 16px;
  font-size: clamp(
    16px,
    16px + 0vw,
    16px
  );
}
.video-block__image {
  position: relative;
}
.video-block__image img,
.video-block__image picture {
  width: 100%;
  height: 13.4375rem;
  -o-object-fit: cover;
     object-fit: cover;
}
.video-block__image svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5rem;
}
.video-block__button {
  display: flex;
  justify-content: center;
}

.left-banner {
  display: grid;
  position: relative;
}
@media (min-width: 64em) {
  .left-banner {
    grid-template-columns: 1fr 1fr;
    height: 35.8125rem;
  }
}
.left-banner img,
.left-banner picture {
  height: 35.8125rem;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.left-banner__col {
  position: relative;
}
.left-banner__col:first-of-type:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 35.8125rem;
  background: transparent linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(238, 240, 239, 0.9647058824) 95%, #edefee 100%) 0% 0% no-repeat padding-box;
}
.left-banner__col:last-of-type {
  background: var(--grey);
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 64em) {
  .left-banner__col:last-of-type {
    flex-direction: row;
  }
}
.left-banner blockquote {
  max-width: 36.75rem;
  padding: 1.25rem;
}
.left-banner blockquote p {
  font-size: 23px;
  font-size: clamp(
    23px,
    21.6363636364px + 0.4261363636vw,
    26px
  );
  font-weight: 300;
}
.left-banner blockquote cite {
  display: block;
  margin-top: 1.25rem;
  font-size: 18px;
  font-size: clamp(
    18px,
    18px + 0vw,
    18px
  );
  font-style: normal;
  font-weight: 300;
}
@media (min-width: 64em) {
  .left-banner blockquote cite {
    margin-top: 3.75rem;
  }
}

.footer {
  padding-top: 6.5625rem;
  padding-bottom: 6.5625rem;
}
.footer p,
.footer h2,
.footer a {
  color: var(--white);
}
.footer p {
  padding-bottom: 2.8125rem;
}
.footer a {
  text-decoration: none;
}
.footer__top-row {
  max-width: 26.25rem;
  margin: 0 auto;
  padding-bottom: 1.0625rem;
}
.footer__top-row p {
  font-size: 24px;
  font-size: clamp(
    24px,
    18.5454545455px + 1.7045454545vw,
    36px
  );
  line-height: 1.2;
}
.footer__buttons {
  display: flex;
  justify-content: center;
}
.footer__bottom-row {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 64em) {
  .footer__bottom-row {
    flex-direction: row;
    justify-content: space-between;
  }
}
@media (max-width: 63.99em) {
  .footer__bottom-row > div:first-of-type {
    order: 2;
  }
}
.footer__bottom-row svg {
  max-width: 13.75rem;
  width: 100%;
}
@media (min-width: 64em) {
  .footer__col:last-of-type {
    margin-top: 1.625rem;
  }
}