:root {
  --color--background: var(--swatch--light);
  --color--text: var(--swatch--dark);
  --color--button-background: var(--swatch--brand-1);
  --color--toggle-offset: 0rem;
  --color--button-text: var(--swatch--light);
  --swatch--brand-1: #622ba7;
  --dark--background: var(--swatch--dark);
  --dark--text: var(--swatch--light);
  --dark--button-background: var(--swatch--brand-2);
  --dark--button-text: var(--swatch--dark);
  --dark--toggle-offset: 1.2rem;
  --swatch--light: #f3f3f3;
  --swatch--dark: #2e2d2e;
  --swatch--brand-2: #cf0;
}

.wf-body {
  background-color: var(--color--background);
  color: var(--color--text);
  letter-spacing: .02em;
  font-family: Formula, sans-serif;
  font-size: .8rem;
  font-weight: 300;
  line-height: 1.6;
}

.wf-h1 {
  letter-spacing: -.03em;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: -.02em;
  padding-top: .22em;
  font-size: 16vw;
  font-weight: 600;
  line-height: .6;
}

.wf-h2 {
  letter-spacing: -.03em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3.8rem;
  font-weight: 700;
  line-height: 1;
}

.wf-h3 {
  letter-spacing: -.03em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
}

.wf-h4 {
  letter-spacing: -.03em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.1;
}

.wf-h5 {
  letter-spacing: -.03em;
  margin-top: 50px;
  margin-bottom: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}

.wf-h6 {
  letter-spacing: -.03em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.wf-p {
  margin-bottom: 0;
}

a {
  text-decoration: none;
}

img {
  object-fit: cover;
  width: 100%;
  max-width: 100%;
  display: inline-block;
}

.section {
  padding: 2%;
  position: relative;
}

.section.is-nav {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  background-color: #fff0;
  justify-content: space-between;
  align-items: center;
  padding-top: 0%;
  padding-bottom: 0%;
  display: flex;
}

.section.is-hero {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  min-height: 100vh;
  padding-top: 5rem;
  display: block;
  top: 10px;
}

.container {
  width: 100%;
  max-width: 70rem;
  padding-left: 3rem;
  padding-right: 3rem;
}

.toggle_wrap {
  background-color: var(--color--button-background);
  border-radius: 100vw;
  width: 4rem;
  height: 1.6rem;
  padding: .2rem;
}

.toggle_inner {
  margin-left: var(--color--toggle-offset);
  background-color: var(--color--button-text);
  border-radius: 100vw;
  width: 2.3rem;
  height: 100%;
}

.button {
  background-color: var(--color--button-background);
  color: var(--color--button-text);
  text-align: center;
  border-radius: 100vw;
  min-width: 10rem;
  padding: .6rem 1.2rem;
}

.logo {
  letter-spacing: 0;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
}

.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-image {
    width: 100px; /* Adjust the width of your logo */
    height: auto;
    margin-right: 10px; /* Space between logo and text */
}

.logo-text {
    font-size: 18px; /* Adjust as needed */
    text-align: center;
}

.nav_wrap {
  z-index: 1000;
  background-color: #fff0;
  position: absolute;
  inset: 0% 0% auto;
}

.nav_menu {
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

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

.link_item {
  padding: 2.2rem .8rem;
}

.link_item.w--current {
  text-decoration: underline;
}

.nav_right {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.header_list {
  grid-column-gap: .5rem;
  grid-row-gap: 0rem;
  grid-template-rows: auto;
  grid-template-columns: 1.25fr 1.75fr;
  grid-auto-columns: 1fr;
  align-items: end;
  width: 100%;
  margin-bottom: 20px;
  display: grid;
}

.header_content {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-left: auto;
  display: flex;
}


.header_img {
  aspect-ratio: 3 / 2;
  background-color: #000;
  border-radius: .5rem;
  margin-top: 2rem;
}

.text-span {
  color: var(--swatch--brand-1);
}

.div-block {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: block;
}

.wf-heading {
  margin-bottom: 40px;
  padding-top: 0.0em;
  font-size: 14vw;
  margin-top: 0.0em;
}

.video {
  margin-bottom: 40px;
}

.heading-2 {
  font-size: 10vw;
}

.text-span-2 {
  text-transform: capitalize;
  font-size: 75%;
}

.text-span-3 {
  font-size: 10vw;
}

@media screen and (max-width: 991px) {
  .wf-h1 {
    font-size: 27vw;
  }

  .section {
    padding: 4%;
  }

  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .nav_menu {
    padding: 4% 4% 3.7rem;
    display: block;
  }

  .link_wrap {
    flex-direction: column;
    align-items: flex-start;
  }

  .link_item {
    text-align: left;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    width: 100%;
    padding: 1.5rem 0;
    display: block;
  }

  .nav_button {
    padding: 1.9rem 1rem;
  }

  .nav_right {
    grid-column-gap: .75rem;
    grid-row-gap: .75rem;
  }

  .header_list {
    grid-column-gap: 1.25rem;
    grid-row-gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .header_content {
    grid-column-gap: 1.25rem;
    grid-row-gap: 1.25rem;
    margin-bottom: 40px;
    margin-left: 0;
  }

  .header_img {
    margin-top: 2.2rem;
  }

  .wf-heading {
    font-size: 12vw;
  }

  .text-span-3 {
    font-size: 10vw;
  }
}

@media screen and (max-width: 767px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .header_img {
    aspect-ratio: 1;
  }
}

@media screen and (max-width: 479px) {
  .section.is-hero {
    padding-top: 8rem;
    padding-bottom: 4%;
  }

  .nav_wrap {
    bottom: auto;
  }

  .header_img {
    overflow: clip;
  }

  .wf-heading {
    font-size: 20vw;
  }

  .video {
    margin-bottom: 40px;
  }
}

#w-node-fef60ae8-1413-53c2-9056-37ee9cacea29-acca1f89, #w-node-_4c9320ac-3a87-af3a-10e6-6635afa59531-acca1f89 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_0d2212d1-3cb4-2c10-f6a4-44147ed0987d-acca1f89 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_0d2212d1-3cb4-2c10-f6a4-44147ed0987f-acca1f89 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_0c86a2ec-8001-97d4-1acf-a3fe62354018-acca1f89 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_0c86a2ec-8001-97d4-1acf-a3fe6235401a-acca1f89, #w-node-c30e8aac-99d9-36ba-9474-9e48b860f917-acca1f8a, #w-node-_23642e60-a5ac-7d96-dc64-dca733cbc2a9-acca1f8b, #w-node-c30e8aac-99d9-36ba-9474-9e48b860f917-01110238, #w-node-c30e8aac-99d9-36ba-9474-9e48b860f917-fe1a20cf, #w-node-c30e8aac-99d9-36ba-9474-9e48b860f917-a6f0c948, #w-node-c30e8aac-99d9-36ba-9474-9e48b860f915-a6f0e8c3, #w-node-c30e8aac-99d9-36ba-9474-9e48b860f917-a6f0e8c3, #w-node-c30e8aac-99d9-36ba-9474-9e48b860f917-a83ed822, #w-node-c30e8aac-99d9-36ba-9474-9e48b860f917-7595425e, #w-node-c30e8aac-99d9-36ba-9474-9e48b860f917-71db7508, #w-node-c30e8aac-99d9-36ba-9474-9e48b860f917-6aa69553, #w-node-c30e8aac-99d9-36ba-9474-9e48b860f917-6aa6e581, #w-node-fef60ae8-1413-53c2-9056-37ee9cacea29-bda51893, #w-node-_4c9320ac-3a87-af3a-10e6-6635afa59531-bda51893 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_0d2212d1-3cb4-2c10-f6a4-44147ed0987d-bda51893 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_0d2212d1-3cb4-2c10-f6a4-44147ed0987f-bda51893 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_0c86a2ec-8001-97d4-1acf-a3fe62354018-bda51893 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_0c86a2ec-8001-97d4-1acf-a3fe6235401a-bda51893, #w-node-c30e8aac-99d9-36ba-9474-9e48b860f917-7f6e6bef, #w-node-c30e8aac-99d9-36ba-9474-9e48b860f917-76777c46, #w-node-c30e8aac-99d9-36ba-9474-9e48b860f917-98d0dc8c {
  grid-area: span 1 / span 1 / span 1 / span 1;
}


@font-face {
  font-family: 'Formula';
  src: url("{{ url_for('static', filename='fonts/PPFormula-Light.otf') }}" format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Formula';
  src: url("{{ url_for('static', filename='fonts/PPFormula-NarrowSemibold.otf') }}" format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
