:root {
  --clr-primary-300: hsl(180, 66%, 49%);
  --clr-primary-350: hsl(180, 52%, 70%);
  --clr-secondary-200: hsl(0, 87%, 67%);
  --clr-primary-800: hsl(257, 27%, 26%);
  --clr-primary-850: hsl(258, 20%, 33%);
  --clr-neutral-100: white;
  --clr-neutral-200: hsl(0, 0%, 75%);
  --clr-neutral-300: hsl(257, 7%, 63%);
  --clr-neutral-800: hsl(255, 11%, 22%);
  --clr-neutral-900: hsl(260, 8%, 14%);
  --fs-body: 1.125rem;
  --ff-primary: "Poppins", sans-sherif;
  --fw-bold: 700;
  --fw-medium: 500;
  --fs-heading-100: 2.5rem;
  --fs-heading-500: 2.5rem;
  --fs-heading-900: 5rem;

  --fs-paragraph-300: .95rem;
  --fs-paragraph-400: 1.15rem;
  --fs-paragraph-500: 1.375rem;
  --fs-paragraph-600: 1.425rem;
  --fs-input: 1.2rem;
  --fs-button: .9rem;
  --base-rem: 16px;
  --vertical-padding: 10.5rem;
  --max-width-page: 100rem;
}

@media (max-width: 800px) {
  :root {
    --fs-heading-100: 1.75rem;
    --fs-heading-500: 1.825rem;
    --fs-heading-900: 2.5rem;
    --fs-paragraph-400: 1rem;
    --fs-paragraph-500: 1rem;
    --vertical-padding: 1.5rem;
    /* --fs-button: .8rem; */
    --fs-input: .9rem;
  }

  /* .form {
    display: none;
  } */
}

html,
body {
  font-size: var(--base-rem);
  font-family: var(--ff-primary);
}

/* Utility Classes */

.max-width-page {
  max-width: var(--max-width-page);
}

.vertical-padding {
  padding-left: var(--vertical-padding);
  padding-right: var(--vertical-padding);
}

.clr-primary-300 {
  color: var(--clr-primary-300);
}

.clr-primary-800 {
  color: var(--clr-primary-800);
}

.clr-secondary-200 {
  color: var(--clr-primary-200);
}

.clr-neutral-100 {
  color: var(--clr-neutral-100);
}

.clr-neutral-200 {
  color: var(--clr-neutral-200);
}

.clr-neutral-300 {
  color: var(--clr-neutral-300);
}

.clr-neutral-800 {
  color: var(--clr-neutral-800);
}

.clr-neutral-900 {
  color: var(--clr-neutral-900);
}

.bg-primary-300 {
  background-color: var(--clr-primary-300);
}

.bg-primary-800 {
  background-color: var(--clr-primary-800);
}

.bg-secondary-200 {
  background-color: var(--clr-primary-200);
}

.bg-neutral-100 {
  background-color: var(--clr-neutral-100);
}

.bg-neutral-200 {
  background-color: var(--clr-neutral-200);
}

.bg-neutral-300 {
  background-color: var(--clr-neutral-300);
}

.bg-neutral-800 {
  background-color: var(--clr-neutral-800);
}

.bg-neutral-900 {
  background-color: var(--clr-neutral-900);
}

.fw-bold {
  font-weight: var(--fw-bold);
}

.fw-medium {
  font-weight: var(--fw-medium);
}

.fs-heading-100 {
  font-size: var(--fs-heading-100);
}

.fs-heading-500 {
  font-size: var(--fs-heading-500);
}

.fs-heading-900 {
  font-size: var(--fs-heading-900);
}

.fs-paragraph-300 {
  font-size: var(--fs-paragraph-300);
}

.fs-paragraph-400 {
  font-size: var(--fs-paragraph-400);
}

.fs-paragraph-500 {
  font-size: var(--fs-paragraph-500);
}

.fs-paragraph-600 {
  font-size: var(--fs-paragraph-600);
}

.fs-button {
  font-size: var(--fs-button);
}

.fs-input {
  font-size: var(--fs-input);
}

/* ALL */

* {
  margin: 0;
  padding: 0;
  transition: all .15s;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

.ref-button {
  background: var(--clr-primary-300);
  cursor: pointer;
  color: var(--clr-neutral-100);
  border: none;
  border-radius: 100vw;
  padding: .625rem 1.475rem;
  box-sizing: content-box;
  font-size: var(--fs-button);
  font-weight: var(--fw-bold);
  font-family: var(--ff-primary);
  width: max-content;
  height: max-content;
  letter-spacing: 0.025em;
  /* font-weight: var(--fw-medium); */
}

.ref-button:hover {
  background: var(--clr-primary-350);
}

.benefit p {
  transition: all .15s, color .25s;
}

.benefit p:hover {
  color: var(--clr-primary-800);
}

.trans-button {
  background: transparent;
  color: var(--clr-neutral-300);
}

.trans-button:hover {
  background-color: transparent;
}

.CTA {
  padding: .9rem 2.5rem;
  font-size: 1.2rem;
  /* letter-spacing: .045em; */
  /* font-weight: var(--fw-medium); */
}

/* Header */

header {
  width: min(100dvw, var(--max-width-page));
  display: grid;
  place-items: center;
}

.header-countainer {
  padding: 3.1rem 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* justify-content: space-between; */
  column-gap: 2.75rem;
}

.header-links {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.logo {
  display: flex;
  /* align-items: center; */
}

.primary-navigation ul {
  gap: 2rem;
  list-style: none;
  display: flex;
  flex-direction: row
}

.primary-navigation ul li a {
  transition: all .15s, color .25s;
}

.primary-navigation ul li a:hover {
  color: var(--clr-neutral-800);
}

.header-CTA {
  display: flex;
  gap: .875rem;
}

.toggle {
  position: fixed;
  top: 2.75rem;
  right: 1.625rem;
  background-color: var(--clr-neutral-100);
  border: none;
  padding: 0;
  z-index: 5000000;
  width: 1.5rem;
  height: 1.25rem;
  box-sizing: content-box;
  padding: .5rem;
  border-radius: .25rem;
}

.lines {
  width: 1.5rem;
  height: 1.25rem;
  /* display: flex;
  flex-direction: column;
  justify-content: space-between; */
  position: relative;
  width: 100%;
  height: 100%;
}

.line {
  left: 0;
  right: 0;
  position: absolute;
  height: .275rem;
  width: 100%;
  background-color: grey;
}

.start-line {
  top: 0;
}

.middle-line {
  top: calc(50% - .275rem / 2);
}

.last-line {
  bottom: 0;
}

.open .middle-line {
  opacity: 0;
  width: 0;
}

.open .start-line {
  transform: rotateZ(45deg);
  top: 50%;
}

.open .last-line {
  transform: rotateZ(-45deg);
  top: 50%;
}


/* Hero */

main,
body {
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-section {
  position: relative;
  padding-top: 1.25rem;
  width: min(100dvw, var(--max-width-page));
  padding-right: 0;
  display: flex;
  /* justify-items: center; */
  /* grid-template-columns: 1fr 1fr; */
  /* column-gap: 3rem;
  row-gap: .5rem; */
  padding-bottom: 9.375rem;
}

.hero-countainer {
  display: grid;
  justify-items: center;
  --column-1: 1fr;
  --column-2: 1fr;
  column-gap: 3rem;
  row-gap: 2.5rem;
}

@media (min-width:1500px) {
  .hero-section {
    padding-right: var(--vertical-padding);
  }
}

h1 {
  line-height: 1.1;
  letter-spacing: -.025em;
}

h2,
h3 {
  letter-spacing: -.025em;
}

.hero-image {
  width: 100%;
}

.hero-image img {
  width: 100%;
  height: 30rem;
  object-fit: cover;
  object-position: left;
}

@media (min-width:1500px) {
  .hero-image img {
    object-fit: contain;
  }
}

.hero-content {
  /* padding-right: ; */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-content p {
  max-width: 40ch;
  line-height: 1.65;
}

/* Benefits */

.benefits-section {
  padding-top: 0;
  width: 100dvw;
  background-color: #f0f1f6;
  padding-bottom: 7.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* row-gap: 6.5rem; */
}

.form {
  position: relative;
  /* position: relative; */
  border-radius: var(--radius);
  padding: 3.125rem 4rem;
  width: min(calc(100dvw - var(--vertical-padding) * 2), var(--max-width-page) - var(--vertical-padding) * 2);
  height: max-content;
  background-color: var(--clr-primary-800);
  display: grid;
  /* grid-template-columns: 1fr max-content; */
  --column-1: 1fr;
  --column-2: max-content;
  column-gap: 1.5rem;
  row-gap: .875rem;
  background-position: top left;
  background-image: url("/images/bg-shorten-desktop.svg");
  background-repeat: no-repeat;
  background-size: cover;
}

.form-countainer {
  position: relative;
  top: -5.125rem;
  --radius: .5rem;
  width: min(calc(100dvw - var(--vertical-padding) * 2), var(--max-width-page) - var(--vertical-padding) * 2);
  display: flex;
  padding: 0;
  flex-direction: column;
  position: relative;
  /* padding-bottom: 2rem; */
  height: max-content;
  row-gap: 1.375rem;
}

.shorted-links {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* max-width: 20rem; */
  /* padding-bottom: 5.125rem; */
}

.shorted-link {
  border-radius: var(--radius);
  padding: .75rem 2rem;
  font-size: 1.25rem;
}

.shorted-link-p {
  padding: .75rem 0rem;
}

.shorted-link,
.shorted-link>* {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}

.shorted-link>* {
  gap: 3.5rem;
}

.shorted-link button {
  border-radius: .25rem;
  font-size: var(--fs-button);
  padding: .675rem auto;
  display: flex;
  justify-content: center;
  width: 2rem;
}

.ref-copied {
  background-color: var(--clr-primary-800);
}

.ref-copied:hover {
  background-color: var(--clr-primary-850);
}

.rec-button {
  border-radius: var(--radius);
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  font-size: 1.2rem;
}

.form button {
  padding-top: 0;
  padding-bottom: 0;
}

.form>* {
  min-height: 4rem;
  max-height: 4rem;
  height: 4rem;
}

.form input {
  position: relative;
  border: none;
  border-radius: var(--radius);
  padding: 2rem 2.25rem;
  font-family: var(--ff-primary);
  font-weight: var(--fw-medium);
  font-size: var(--fs-input);
}

.form[data-validation=error] input {
  border: .225rem solid var(--clr-secondary-200);
}

.form[data-validation=error] .label {
  display: unset;
}

.label {
  display: none;
  position: absolute;
  bottom: -1.28rem;
  left: 5rem;
  color: var(--clr-secondary-200);
  font-style: italic;
}

@media (max-width: 800px) {

  /* st  */
  .form {
    background-image: url("/images/bg-shorten-mobile.svg");
    background-size: contain;
    background-position: top right;
  }
}


.form input::placeholder {
  font-family: var(--ff-primary);
  font-weight: var(--fw-medium);
}

*:focus {
  outline: .125rem solid var(--clr-neutral-100);
}

.form input:focus {
  outline: none;
}

.benefit-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
  text-align: center;
  margin-bottom: 6.5rem;
}

.benefit-content p {
  max-width: 45ch;
  line-height: 1.8;
}

.benefits {
  position: relative;
  width: max-content;
  display: grid;
  column-gap: 1.875rem;
  row-gap: 5rem;
  --column-1: 22.0625rem;
  --column-2: 22.0625rem;
  --column-3: 22.0625rem;
  place-items: center;
}

.line-res {
  position: absolute;
  top: 41.5%;
  bottom: 60%;
  right: 0;
  left: 0;
  height: 8px;
  background: var(--clr-primary-300);
}

.benefit {
  position: relative;
  z-index: 2;
  --mar: 5.25rem;
  --img-h: 5.5rem;
}

.benefit p {
  width: min(var(--column-1), 100%);
  line-height: 1.75;
  max-width: 45ch;
}

.benefit-first {
  padding-top: 0;
  padding-bottom: var(--mar);
}

.benefit-middle {
  padding-top: calc(var(--mar) / 2);
  padding-bottom: calc(var(--mar) / 2);
}

.benefit-last {
  padding-top: var(--mar);
  padding: ;
  padding-bottom: 0;
}

.benefit-countainer {
  position: relative;
  border-radius: .35rem;
  background-color: var(--clr-neutral-100);
  padding: 4.75rem 1.95rem 2.75rem 1.95rem;
  height: 16.875rem;
}

.benefit-image-c {
  top: calc(var(--img-h) / -2);
  position: absolute;
  padding: 1.4rem;
  width: var(--img-h);
  height: var(--img-h);
  background-color: var(--clr-primary-800);
  border-radius: 50%;
}

.benefit-image-c img {
  width: 100%;
  height: max-content;
  object-fit: contain;
  object-position: center;
}

/* CTA */

.CTA-section {
  width: 100dvw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 15.625rem;
  row-gap: 1.5rem;
  background-color: var(--clr-primary-800);
  background-image: url("/images/bg-boost-desktop.svg");
  background-repeat: no-repeat;
  background-size: cover;
}

@media (max-width: 800px) {

  /* st  */
  .CTA-section {
    background-image: url("/images/bg-boost-mobile.svg");
    background-size: contain;
    background-position: top right;
  }
}

.CTA-capital {
  padding: .85rem 2.55rem;
}

/* Footer */

.footer {
  width: 100dvw;
  --pad: min(calc((100dvw - var(vertical-padding)) / 2), var(vertical-padding));
  padding: 4.375rem var(--vertical-padding) 5rem var(--vertical-padding);
  display: grid;
  place-items: center;
}

.footer-countainer {
  width: min(100%, calc(var(--max-width-page) - var(--vertical-padding) * 2));
  display: flex;
  justify-content: space-between;
}

.footer-logo {
  fill: var(--clr-neutral-100);
  height: 2.125rem;
  width: 7.5rem;
  object-fit: contain;
}

.footer-logo-countainer {
  width: max-content;
}

.footer-links {
  display: grid;
  /* grid-template-columns: max-content max-content; */
  --column-1: max-content;
  --column-2: max-content;
  gap: 4.25rem;
}

/* Links */

.footer-navigation {
  display: grid;
  /* grid-template-columns: 1fr 1fr 1fr; */
  --column-1: 1fr;
  --column-2: 1fr;
  --column-3: 1fr;
  column-gap: 5rem;
  row-gap: 3rem;
}

.footer .wrap {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.footer-links-ul {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.footer-links span {
  font-size: var(--fs-paragraph-300);
}

.footer-links ul li a {
  font-size: .9rem;
}

.footer-links span {
  color: var(--clr-neutral-100);
  font-weight: var(--fw-bold);
}

.footer-links-ul li a {
  color: var(--clr-neutral-200);
}

/* Social */

.social-links {
  width: max-content;
  display: flex;
  flex-direction: row;
  column-gap: 1.5rem;
}

.footer ul {
  list-style: none;
}

.social-icon {
  width: 1.5rem;
  height: 1.5rem;
  fill: var(--clr-neutral-100);
}

.social-icon:hover,
.footer-logo:hover {
  fill: var(--clr-primary-300);
}

.footer-links-ul li a:hover {
  color: var(--clr-primary-300);
}

/* Griding And Flexing System */

.grid-1-row-2-column {
  grid-template-columns: var(--column-1) var(--column-2);
  grid-template-rows: var(--row-1, unset);
}

.grid-1-row-3-column {
  grid-template-columns: var(--column-1) var(--column-2) var(--column-3);
  grid-template-rows: var(--row-1, unset);
}

.grid-1-row-2-column-sm {
  grid-template-columns: var(--column-1) var(--column-2);
  grid-template-rows: var(--row-1, unset);
}

.grid-1-row-3-column-sm {
  grid-template-columns: var(--column-1) var(--column-2) var(--column-3);
  grid-template-rows: var(--row-1, unset);
}

.r-direction-row {
  flex-direction: row;
}

.r-direction-row-sm {
  flex-direction: row;
}

@media (max-width:800px) {
  .grid-1-row-2-column {
    grid-template-rows: var(--column-1) var(--column-2);
    grid-template-columns: var(--row-1, unset);
  }

  .grid-1-row-3-column {
    grid-template-rows: var(--column-1) var(--column-2) var(--column-3);
    grid-template-columns: var(--row-1, unset);
  }

  .r-direction-row {
    flex-direction: column;
  }
}

@media (max-width:550px) {
  .grid-1-row-2-column-sm {
    grid-template-rows: var(--column-1) var(--column-2);
    grid-template-columns: var(--row-1, unset);
  }

  .grid-1-row-3-column-sm {
    grid-template-rows: var(--column-1) var(--column-2) var(--column-3);
    grid-template-columns: var(--row-1, unset);
  }

  .r-direction-row-sm {
    flex-direction: column;
  }
}

/* Overwrites */

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

body {
  position: relative;
}

display-none-md {
  display: unset;
}

display-none-lar {
  display: none;
}

@media (max-width: 800px) {
  display-none-md {
    display: none;
  }

  display-none-lar {
    display: unset;
  }

}
*[data-display=none] {
  display: none;
}

:where(.flow :not(:first-child)) {
  margin-top: var(--flow-spacer);
}

.display-none-750s {
  display: none;
}

/* Responsive */

@media screen {
  @media (max-width: 1350px){:root{--base-rem: 15px;}}
  @media (max-width: 1260px){:root{--base-rem: 14px;}}
  @media (max-width: 1170px){:root{--base-rem: 13px;}}
  @media (max-width: 1080px){:root{--base-rem: 12px;}}
  @media (max-width: 990px){:root{--base-rem: 11px;}}
  @media (max-width: 900px){:root{--base-rem: 10px;}}
  @media (max-width: 810px){:root{--base-rem: 9px;}}

  @media (max-width: 350px){:root{--base-rem: 15px;}}
  @media (max-width: 325px){:root{--base-rem: 14px;}}
  @media (max-width: 300px){:root{--base-rem: 13px;}}
  @media (max-width: 275px){:root{--base-rem: 12px;}}
  @media (max-width: 250px){:root{--base-rem: 11px;}}
  @media (max-width: 225px){:root{--base-rem: 10px;}}
  @media (max-width: 200px){:root{--base-rem: 9px;}}
  @media (max-width: 175px){:root{--base-rem: 8px;}}


  @media (max-width: 800px) {
    :root{
      --base-rem: 16px;
    }
    p,
    span,
    h1,
    h2,
    h3,
    h4 {
      text-align: center;
    }

    .align-c-md {
      align-items: center;
    }

    .hero-section {
      width: 100dvw;
      display: flex;
    }

    .hero-countainer {
      width: 100%;
      align-items: center;
      display: flex;
      flex-direction: column-reverse;
    }

    .hero-content p {
      margin-top: 1rem;
    }

    .hero-image {
      width: max-content;
      height: max-content;
      display: flex;
    }

    .hero-image img {
      /* object-fit: contain; */
      object-position: center;
      width: max-content;
      height: 20rem;
    }

    .hero-content {
      padding: 0 var(--vertical-padding) 0 0;
      height: max-content;
      justify-content: center;
      align-items: center;
    }

    .benefit {
      width: min(calc(100dvw - var(--vertical-padding) * 2), 28rem);
    }

    .benefit p {
      padding: 0;
      margin-right: 0;
      width: 100%;
      max-width: 100%;
      text-align: center;
    }

    .benefit-countainer {
      padding-bottom: 2.5rem;
    }

    .benefit,
    .benefit-first,
    .benefit-middle,
    .benefit-last {
      padding: 0;
    }

    .form-countainer {
      top: -3rem;
    }

    .form {
      /* top: 2rem; */
      place-items: center;
      padding: 1.5rem;
      margin-bottom: 0rem;
    }

    .form>* {
      width: 100%;
      min-height: 3rem;
      max-height: 3rem;
      height: 3rem;
      box-sizing: border-box;
    }

    .form .ref-button {
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }

    .form input {
      padding-top: calc((3rem - var(--fs-input)) / 2);
      padding-bottom: calc((3rem - var(--fs-input)) / 2);
      padding-left: 1em;
      padding-right: 1em;
    }

    .shorted-links {
      padding: var(--vertical-padding);
      flex-direction: row;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      width: 100%;
      box-sizing: border-box;
      gap: 1.625rem;
    }

    .shorted-links>* {
      width: 18rem;
    }

    .shorted-link,
    .shorted-link>* {
      flex-direction: column;
      align-items: start;
      text-align: left;
      gap: 0;
      width: 100%;
      font-size: 1rem;
    }

    .shorted-link {
      padding: 0rem 1rem 1.25rem 1rem;
    }

    .shorted-link-p {
      padding: 0;
      gap: 0;
    }

    .shorted-link a {
      padding: .75rem 0;
    }

    .link-countainer {
      /* padding-top: 1.5rem; */
      position: relative;
    }

    .link-countainer::after {
      content: '';
      position: absolute;
      --h: .08rem;
      bottom: calc(var(--h) / 2 * -1);
      height: var(--h);
      left: -1rem;
      right: -1rem;
      /* width: 100%; */
      background-color: var(--clr-neutral-200);
      z-index: 10;
      opacity: .5;
    }

    .shorted-link button {
      margin-top: 0rem;
      width: 100%;
      padding: .5rem 0;
      font-size: 1rem;
    }

    .benefit-content {
      margin-bottom: 5rem;
    }

    .benefits {
      display: flex;
      flex-direction: column;
    }

    .benefit-image-c {
      left: calc(50% - 3rem);
    }

    .benefit-countainer {
      padding-bottom: 2.5rem;
      height: max-content;
    }

    .line-res {
      top: 0;
      bottom: 0;
      left: calc(50% - 8px);
      right: calc(50% - 8px);
      /* min-width: none;
      width: 8px; */
      min-width: 8px;
      width: 100%;
      height: 100%;
    }

    .benefit {
      height: max-content;
    }

    .CTA-section {
      height: 18.75rem;
    }

    .line-res {
      width: 2px;
      height: ;
    }

    .footer-logo-countainer {
      margin-bottom: 3.25rem;
    }

    .social-links {
      justify-self: center;
    }

    .form button {
      padding: 0;
    }

  }

  @media (max-width: 750px) {

    .display-none-750s {
      display: unset;
    }

    header {
      position: relative;
    }

    .header-links {
      position: fixed;
      top: 8rem;
      left: 1.5rem;
      right: 1.5rem;
      width: calc(100dvw - 3rem);
      height: max-content;
      display: flex;
      flex-direction: column;
      background-color: var(--clr-primary-800);
      z-index: 1000;
      border-radius: .75rem;
      padding: 2.5rem 1.5rem;
    }

    .header-links[aria-hidden=true] {
      transform: translateX(0);
      transform: translateX(100dvw);
    }

    .header-links[aria-hidden=false] {
      transform: translateX(100dvw);
      transform: translateX(0);
    }

    .go-left {
      right: calc(100dvw + 1.5rem);
      left: calc(-100dvw + 1.5rem);
    }

    .go-left[aria-hidden=true] {
      transform: translateX(100dvw);
      transform: translateX(0);
    }

    .go-left[aria-hidden=false] {
      transform: translateX(0);
      transform: translateX(100dvw);
    }

    .header-CTA {
      display: grid;
      align-items: center;
      grid-template-rows: 3rem 3rem;
      width: 100%;
    }

    .primary-navigation ul {
      display: grid;
      grid-template-rows: 3.75rem 3.75rem 3.75rem;
      gap: 0;
    }

    .primary-navigation {
      position: relative;
      width: 100%;
      height: max-content;
      margin-bottom: 1.25rem;
      padding-bottom: 1.25rem;
    }

    .primary-navigation::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -.0125rem;
      opacity: .45;
      height: .025rem;
      background: var(--clr-neutral-100);
    }

    .primary-navigation ul li {
      width: 100%;
      width: 100%;
      display: flex;
    }

    .primary-navigation ul li a {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
    }

    .header-links * {
      color: var(--clr-neutral-100);
    }

    .header-CTA {
      row-gap: .625rem;
    }

    .header-CTA>* {
      width: 100%;
      height: 3rem;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .display-none-750l {
      display: none;
    }

    .diaplay-shown-750l {
      display: shown;
    }

    .header-links-display-none-750l {
      display: none;
    }

    .header-links-diaplay-shown-750l {
      display: shown;
    }
  }

  @media (max-width: 699px) {
    .shorted-links>* {
      width: 28rem;
      max-width: 100%;
    }

    .shorted-link {
      width: 28rem;
      max-width: 100%;
    }
  }

  @media (max-width: 550px) {
    .hero-image img {
      object-position: left;
    }

    .hero-image {
      width: 100%;
    }

    .form-countainer {
      top: -4.5rem;
    }
  }

}