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

.nav-title {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  min-width: 17.5rem; /* 280px */
}

.nav-title > h1 {
  text-align: left;
  width: 100%;
}

h1,
h2,
h3,
h4,
p {
  font-family: "Josefin Sans";
}

p {
  font-size: 1.25rem; /* 20px */
  font-weight: 300;
}

h1,
h2,
h3 {
  font-size: 1.5rem; /* 24px */
  font-weight: 500;
}

.bold {
  font-weight: 450;
}

.header {
  display: flex;
  justify-content: space-around;
  height: 9.375rem; /* 150px */
  align-items: center;
  gap: 0.625rem; /* 10px */
}

.header > div {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  width: 100%;
}

.nav-title > h4 {
  font-size: 1.25rem; /* 20px */
  text-align: left;
}

.content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.bullet-points > p {
  text-align: left;
}

.bullet-points-intro > p {
  width: 36.25rem; /* 580px */
}

.foot-note {
  font-size: 0.8rem; /* 12.8px */
}

.half-section-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 16px */
  align-items: center;
}

.half-section-text-wide {
  transform: translate(8.75rem, 0px); /* 140px */
}

.full-section-text {
  width: 90%;
}

.separator {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: #323232;
  height: 13.75rem; /* 220px */
  width: 100%;
  gap: 7em;
  margin-top: 4.6875rem; /* 75px */
  margin-bottom: 4.6875rem; /* 75px */
}

.separator > div > h2 {
  font-size: 2rem; /* 32px */
  font-weight: bold;
  text-align: left;
}

.separator > div > p {
  font-size: 1.5rem; /* 24px */
  font-weight: 500;
  text-align: left;
}

.card {
  border-radius: 2.5rem; /* 40px */
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background-color: #eeeeee;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: 3rem; /* 48px */
  padding: 3rem 3rem 6rem 3rem; /* 48px 48px 96px 48px */
  width: 20rem; /* 320px */
}

.card-title-orange {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2.5rem; /* 40px */
  background-color: orange;
  width: 100%;
  height: 4.375rem; /* 70px */
}

.x-axis > .card {
  min-height: 33.75rem; /* 540px */
  max-height: 43.75rem; /* 700px */
}

.footer {
  color: white;
  background-color: #323232;
  height: 13.75rem; /* 220px */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.625rem; /* 10px */
  align-items: center;
  margin-top: 6rem; /* 96px */
}

.icons {
  display: flex;
  gap: 1.875rem; /* 30px */
}

.icon {
  width: 3.5rem; /* 56px */
}

img {
  max-height: 95vh;
  max-width: 50vw;
}

svg {
  max-height: 95vh;
  max-width: 50vw;
}

.x-axis {
  flex-flow: row nowrap;
  justify-content: center;
  gap: -18.75rem; /* -300px */
}

.border-shadow {
  box-shadow: 2px 5px 5px 3px rgba(69, 69, 69, 0.83);
}

.orange {
  background-color: orange;
}

.round {
  border-radius: 2.5rem; /* 40px */
  padding: 1rem; /* 16px */
}

.unique {
  width: 100%;
  justify-content: center;
  padding: 3rem; /* 48px */
}

.card-wide {
  width: 23.75rem; /* 380px */
  height: 37.5rem; /* 600px */
}

.unique-image {
  width: 80%;
}

.unique-image-full {
  width: 100%;
}

.card-tall-wide {
  width: 25rem; /* 400px */
  height: 43.75rem; /* 700px */
  justify-content: start;
  gap: 1.5rem; /* 24px */
  padding: 2rem; /* 32px */
}

.card-tall-wide > p {
  text-align: left;
  width: 90%;
}

.card-tall-wide > h3 {
  font-size: 2rem; /* 32px */
}

.wrap {
  flex-wrap: wrap;
}

.small-gap {
  gap: 2rem; /* 32px */
}

.smaller-gap {
  gap: 1rem; /* 16px */
}

.text-gap {
  gap: 1.875rem; /* 30px */
}

.round-border {
  border-radius: 2.5rem; /* 40px */
}

h4 {
  font-size: 1.25rem; /* 20px */
  font-weight: 500;
}

.xl {
  border-radius: 2.5rem; /* 40px */
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background-color: #eeeeee;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  padding: 3rem 3rem 6rem 3rem; /* 48px 48px 96px 48px */
  justify-content: start;
  gap: 1rem; /* 16px */
  padding: 2rem; /* 32px */
  width: 37.5rem; /* 600px */
  height: 56.25rem; /* 900px */
}

.xl > .orange {
  padding: 3rem 8rem; /* 48px 128px */
}

.margin {
  margin-left: 13.8125rem; /* 221px */
  margin-right: 13.8125rem; /* 221px */
}

.arrow {
  margin: -10em; /* -160px */
}

.smaller-text > p {
  font-size: 1.6rem; /* 25.6px */
  width: 100%;
  margin-left: 3em; /* 48px */
}

.justify-start {
  align-items: start;
}

.justify-start > img {
  max-width: 18.75rem; /* 300px */
}

.extra-padding {
  padding: 6em; /* 96px */
}

video {
  max-height: 62.5rem; /* 1000px */
  border: 0.375rem solid black; /* 6px */
  border-radius: 1.25rem; /* 20px */
}

.contact > h1 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem; /* 8px */
  background-color: orange;
  border-radius: 0.625rem; /* 10px */
  min-width: 12.5rem; /* 200px */
}

a {
  text-decoration: none;
  color: inherit;
}

.int-content {
  margin-bottom: 4.0625rem; /* 65px */
}

.margin-bot {
  margin-bottom: 1.875rem; /* 30px */
}

.case-text-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem; /* 20px */
}

.gap {
  gap: 3rem; /* 48px */
}

.info-dump {
  display: flex;
  flex-direction: column;
  justify-content: left;
  gap: 0.625rem; /* 10px */
  text-align: left;
  width: 45%;
  margin-top: 1.875rem; /* 30px */
}

.info-dump-title {
  display: flex;
  text-align: left;
  gap: 0.3125rem; /* 5px */
}

.info-dump-title > h4 {
  min-width: 0.9375rem; /* 15px */
}

.margin-left {
  margin-left: 1.875rem; /* 30px */
}

.half {
  width: 50%;
}

.center {
  text-align: center;
}
.align-left {
  text-align: left;
  align-items: start;
}

.seventy-percent {
  width: 70%;
}

.margin-right {
  margin: 1.875rem; /* 30px */
}

.ninety-five {
  width: 70%;
}

.tall {
  max-height: 90vh;
  width: auto;
}

.small-margin {
  margin: 1.25rem; /* 20px */
}

.frame {
  border-radius: 1.25rem; /* 20px */
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 10rem; /* 160px */
  border-radius: 0.625rem; /* 10px */
  z-index: 1;
  top: 60%;
  left: 0;
}

.dropdown-content a {
  color: black;
  padding: 0.375rem 0.5rem; /* 6px 8px */
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.bebas {
  font-family: "Bebas Neue", serif;
  font-style: bold;
  font-size: 2.5rem; /* 40px */
}

.thin {
  font-weight: 350;
}

.nav-url > h1,
.url {
  font-size: 1.25rem; /* 20px */
}

.box {
  max-width: 40rem;
  min-width: 20rem;
}

.larger-box {
  max-width: 120rem;
  min-width: 20rem;
}

@media (max-width: 768px) {
  .x-axis {
    flex-flow: column nowrap;
    gap: 1rem;
  }

  .content {
    flex-direction: column;
  }

  .separator {
    flex-direction: column;
    gap: 1rem;
  }

  .box,
  .larger-box {
    width: 80vw;
  }

  @media (max-width: 1024px) {
    .main > div {
      margin-left: 5cap;
      margin-right: 5rem;
    }
  }

  @media (max-width: 800px) {
    .header {
      flex-direction: column;
      height: auto;
      gap: 1rem;
      align-items: start;
      margin-left: 1rem;
      margin-right: 1rem;
    }

    .nav-title {
      align-items: flex-start;
      text-align: left;
    }

    .nav-title > h1 {
      font-size: 2rem;
    }

    .nav-title > h4 {
      font-size: 1rem;
    }

    .nav-url {
      justify-content: flex-start;
    }

    .main > div {
      margin-left: 1rem;
      margin-right: 1rem;
    }

    .footer > span > p {
      text-align: center;
    }

    .nav-url > h1 {
      font-size: 1rem;
    }

    .dropdown-content {
      display: block;
      position: static;
      transform: none;
    }
    .dropdown-content {
      display: flex;
      gap: 0.5rem;
      margin-left: 0.5rem;
    }

    .dropdown-content a {
      text-align: center;
      border: 1px solid grey;
      border-radius: 10px;
      min-width: 6.5rem;
      font-size: 1rem;
    }

    .dropdown:hover .dropdown-content {
      display: flex;
    }
  }
}