@font-face {
  font-family: "PP Fragment Glare Regular";
  font-style: normal;
  font-format: opentype;
  font-weight: 300;
  src: url("public/fonts/ppfragment-glareregular.otf") ;
}
@font-face {
  font-family: "PP Fragment Glare Light Italic";
  font-style: italic;
  font-format: opentype;
  font-weight: 200;
  src: url("public/fonts/ppfragment-glarelightitalic.otf") ;
}
@font-face {
  font-family: "PP Neue Montreal Italic";
  font-style: italic;
  font-format: opentype;
  font-weight: 500;
  src: url("public/fonts/ppneuemontreal-italic.otf") ;
}
@font-face {
  font-family: "PP Neue Montreal";
  font-style: normal;
  font-format: opentype;
  font-weight: 500;
  src: url("public/fonts/ppneuemontreal-regular.otf") ;
}
@font-face {
  font-family: "PP Neue Montreal Medium";
  font-style: normal;
  font-format: opentype;
  font-weight: 600;
  src: url("public/fonts/ppneuemontreal-medium.otf") ;
}
@font-face {
  font-family: "PP Fragment Glare Thin";
  font-style: normal;
  font-format: opentype;
  font-weight: 100;
  src: url("public/fonts/ppfragment-glarethin.otf") ;
}
@font-face {
  font-family: "PP Neue Montreal Book";
  font-style: normal;
  font-format: opentype;
  font-weight: 400;
  src: url("public/fonts/ppneuemontreal-book.otf") ;
}
@font-face {
  font-family: "PP Fragment Glare Thin Italic";
  font-style: italic;
  font-format: opentype;
  font-weight: 100;
  src: url("public/fonts/ppfragment-glarethinitalic.otf") ;
}
@font-face {
  font-family: "PP Neue Montreal Bold Italic";
  font-style: italic;
  font-format: truetype;
  font-weight: 700;
  src: url("public/fonts/ppneuemontreal-bolditalic.ttf") ;
}
@font-face {
  font-family: "PP Neue Montreal Light";
  font-style: normal;
  font-format: opentype;
  font-weight: 300;
  src: url("public/fonts/ppneuemontreal-light.otf") ;
}
@font-face {
  font-family: "PP Fragment Glare Extra Bold Italic";
  font-style: italic;
  font-format: opentype;
  font-weight: 800;
  src: url("public/fonts/ppfragment-glareextrabolditalic.otf") ;
}
@font-face {
  font-family: "PP Fragment Glare Regular Italic";
  font-style: italic;
  font-format: opentype;
  font-weight: 300;
  src: url("public/fonts/ppfragment-glareregularitalic.otf") ;
}
@font-face {
  font-family: "PP Fragment Glare Light";
  font-style: normal;
  font-format: opentype;
  font-weight: 200;
  src: url("public/fonts/ppfragment-glarelight.otf") ;
}
@font-face {
  font-family: "PP Neue Montreal Bold";
  font-style: normal;
  font-format: opentype;
  font-weight: 700;
  src: url("public/fonts/ppneuemontreal-bold.otf") ;
}
@font-face {
  font-family: "PP Fragment Glare Extra Bold";
  font-style: normal;
  font-format: opentype;
  font-weight: 800;
  src: url("public/fonts/ppfragment-glareextrabold.otf") ;
}
@font-face {
  font-family: "PP Neue Montreal Thin";
  font-style: normal;
  font-format: opentype;
  font-weight: 200;
  src: url("public/fonts/ppneuemontreal-thin.otf") ;
}
@font-face {
  font-family: "PP Neue Montreal Thin Italic";
  font-style: italic;
  font-format: opentype;
  font-weight: 200;
  src: url("public/fonts/ppneuemontreal-thinitalic.otf") ;
}
:root {
  --dl-color-gray-50: #eeeeeeff;
  --dl-color-gray-100: #ddddddff;
  --dl-color-gray-200: #cecfcdff;
  --dl-color-gray-300: #c7c7c7ff;
  --dl-color-gray-400: #aaaaaaff;
  --dl-color-gray-500: #595959;
  --dl-color-gray-600: #4c4c4cff;
  --dl-color-gray-700: #404040ff;
  --dl-color-taupe-100: #fdfbf9ff;
  --dl-color-taupe-200: #eae8e0ff;
  --dl-size-size-large: 144px;
  --dl-size-size-small: 48px;
  --dl-color-gray-black: #000000;
  --dl-color-gray-white: #FFFFFF;
  --dl-size-size-medium: 96px;
  --dl-size-size-xlarge: 192px;
  --dl-size-size-xsmall: 16px;
  --dl-space-space-1rem: 16px;
  --dl-space-space-2rem: 32px;
  --dl-space-space-3rem: 48px;
  --dl-space-space-4rem: 64px;
  --dl-space-space-5rem: 80px;
  --dl-space-space-6rem: 96px;
  --dl-space-space-7rem: 112px;
  --dl-size-size-xxlarge: 288px;
  --dl-size-size-maxwidth: 1400px;
  --dl-space-space-0.5rem: 8px;
  --dl-space-space-1.5rem: 24px;
  --dl-radius-radius-round: 50%;
  --dl-color-backgrounds-200: #eae8e0ff;
  --dl-radius-radius-radius2: 2px;
  --dl-radius-radius-radius4: 4px;
  --dl-radius-radius-radius8: 8px;
  --dl-color-backgrounds-foam: #e6f2f1ff;
  --dl-color-backgrounds-sand: #e8e7d3ff;
  --dl-color-primary-lilac-50: #f4ecfdff;
  --dl-radius-radius-radius15: 15px;
  --dl-color-backgrounds-taupe: rgba(244, 243, 239, 1);
  --dl-color-primary-lilac-100: #f2e5ffff;
  --dl-color-primary-lilac-200: #e5caffff;
  --dl-color-primary-lilac-300: #d7b0ffff;
  --dl-color-primary-lilac-400: #c488ffff;
  --dl-color-primary-lilac-500: #9544edff;
  --dl-color-primary-lilac-600: #9762ccff;
  --dl-color-primary-lilac-700: #714a99ff;
  --dl-color-primary-lilac-800: #5f3e80ff;
  --dl-color-primary-lilac-900: #4c3166ff;
  --dl-color-primary-emerald-50: #e6f1f2ff;
  --dl-color-primary-emerald-200: #cce3e4ff;
  --dl-color-primary-emerald-300: #66acafff;
  --dl-color-primary-emerald-400: #339195ff;
  --dl-color-primary-emerald-500: #00757aff;
  --dl-color-primary-emerald-600: #00696eff;
  --dl-color-primary-emerald-700: #005e62ff;
  --dl-color-primary-emerald-800: #005255ff;
  --dl-color-primary-emerald-900: #004649ff;
  --dl-color-primary-emerald-2001: #99c8caff;
  --dl-color-primary-tangerine-50: #fff4e6ff;
  --dl-color-primary-tangerine-100: #ffe9ccff;
  --dl-color-primary-tangerine-200: #ffd399ff;
  --dl-color-primary-tangerine-300: #ffbd66ff;
  --dl-color-primary-tangerine-400: #ffa733ff;
  --dl-color-primary-tangerine-500: #e68300ff;
  --dl-color-primary-tangerine-600: #cc7400ff;
  --dl-color-primary-tangerine-700: #b36600ff;
  --dl-color-primary-tangerine-800: #995700ff;
  --dl-color-backgrounds-light_lilac: #faf4fdff;
}

/*
.button {
  color: var(--dl-color-gray-black);
  display: inline-block;
  padding: 0.5rem 1rem;
  border-color: var(--dl-color-gray-black);
  border-width: 1px;
  border-radius: 4px;
  background-color: var(--dl-color-gray-white);
}
*/

.input {
  color: var(--dl-color-gray-black);
  cursor: auto;
  padding: 0.5rem 1rem;
  border-color: var(--dl-color-gray-black);
  border-width: 1px;
  border-radius: 4px;
  background-color: var(--dl-color-gray-white);
}


.list {
  width: 100%;
  margin: 1em 0px 1em 0px;
  display: block;
  padding: 0px 0px 0px 1.5rem;
  list-style-type: none;
  list-style-position: outside;
}


.nav-links {
  cursor: pointer;
  padding: 0.75rem;
  font-size: 1rem;
  transition: 0.3s;
  border-radius: var(--dl-radius-radius-radius8);
}
.nav-links:hover {
  color: var(--dl-color-gray-500);
  background-color: var(--dl-color-taupe-200);
}

.buttons {
  padding: 0.75rem;
  font-size: 0.75rem;
  font-weight:400;
  transition: 0.3s;
  border-radius: var(--dl-radius-radius-radius8);
  text-transform: uppercase;
  color: white;
  width: 100%;
  align-text: center;
  background-color: var(--dl-color-primary-lilac-500);
}

.buttons:hover {
  background-color: var(--dl-color-gray-600);
}

.nav {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-color: rgba(206, 207, 205, 1);
  border-width: 0 0 1px 0;
  flex-direction: column;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.header-content {
  gap: var(--dl-space-space-2rem);
  display: flex;
  padding: 5rem 10rem 3rem 10rem;
  align-self: flex-start;
  flex-direction: column;
}
.hero {
  width: 100%;
  height: auto;
  display: flex;
  position: relative;
  align-items: center;
  flex-direction: column;
  background-color: var(--dl-color-taupe-100);
}

.h1 {
  color: var(--dl-color-gray-600);
  font-style: normal;
  text-align: center;
  margin-bottom: var(--dl-space-space-1.5rem);
}

.about-whoa {
  gap: 2rem;
  padding: 5rem 0 5rem 0;
}

.hero-subtitle {
  color: var(--dl-color-gray-700);
  font-size: 1.5rem;
  max-width: auto;
  text-align: center;
  line-height: 140%;
}
.banner-deb {
  background-color: var(--dl-color-primary-lilac-50);
}
.heading {
  color: var(--dl-color-primary-lilac-500);
}
.img-container {
  width: 30%;
  display: flex;
  justify-content: center;
}
.hero-content {
  display: flex;
}
.links-container {
  gap: 1rem;
  display: flex;
  align-items: center;
  padding-right: 1rem;
  flex-direction: row;
}

.userlinks-container {
  gap: 1rem;
  width: auto;
  height: auto;
  border-left: 1px solid #CECFCD;
  padding-left: 1rem;
}

.userlinks-container .nav-links{
  margin-right: 1rem;
}

.paragraph1 {
  color: var(--dl-color-gray-600);
  font-size: 1.125rem;
  line-height: 140%;
}
.banner-persona-container {
  gap: 1rem;
  display: flex;
  max-width: 1280px;
  flex-direction: row;
  justify-content: space-between;
}

/* CARD DEB */

.card-deb {
  width: 33.3%;
  display: flex;
  padding: 2rem;
  align-items: center;
  border-radius: 15px;
  justify-content: center;
  background-color: var(--dl-color-taupe-100);
}

/* CARD JO */

.card-jo {
  width: 33.3%;
  display: flex;
  padding: 2rem;
  align-items: center;
  border-radius: 15px;
  justify-content: center;
  background-color: var(--dl-color-primary-tangerine-50);
}
.banner-title {
  gap: 1rem;
  display: flex;
  max-width: 1280px;
  align-items: center;
  flex-direction: column;
}
.overline {
  color: var(--dl-color-gray-500);
  font-size: 1.25rem;
  font-weight: 800;
}
.banner-subtitle {
  color: var(--dl-color-gray-500);
  width: 90%;
  font-size: 1.25rem;
  text-align: center;
  line-height: 140%;
}
.card-joanne {
  width: 33.3%;
  display: flex;
  padding: 2rem;
  align-items: center;
  border-radius: 15px;
  flex-direction: column;
  justify-content: center;
  background-color: var(--dl-color-taupe-100);
}

.banner-howitworks-documents {
  max-width: 1280px;
}
.banner-header {
  gap: 1rem;
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-bottom: 3rem;
}


/* FOOTER STYLE */
.footer-top {
  width: 100%;
  display: flex;
  max-width: 1280px;
  flex-direction: row;
  justify-content: space-between;
}
.footer-right {
  gap: 1rem;
  width: 35%;
  display: flex;
  flex-direction: column;
}
.footer-logo {
  width: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  flex-direction: column;
  justify-content: space-between;
}
.footer-left {
  gap: 1rem;
  display: flex;
  flex-direction: column;
}

.h2 {
  color: 600 (Gray);
  font-size: 2rem;
}

.user-content {
  color: rgba(100, 100, 100, 1);
  font-size: 0.75rem;
  box-shadow: inherit;
  font-style: normal;
  text-align: center;
  line-height: 140%;
}

.user-links {
  color: var(--dl-color-primary-lilac-500);
  font-size: 0.75rem;
  font-style: normal;
  transition: 0.3s;
  text-decoration: none;
}
.user-links:hover {
  color: var(--dl-color-gray-500);
}
.button-secondary {
  color: var(--dl-color-gray-500);
  width: 100%;
  padding: 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--dl-radius-radius-radius8);
  text-transform: uppercase;
  background-color: var(--dl-color-gray-100);
}
.button-secondary:hover {
  color: var(--dl-color-gray-white);
  transition: 0.3s;
  background-color: var(--dl-color-gray-500);
}



.h3 {
  color: var(--dl-color-primary-lilac-500);
  line-height: 140%;
}


.paragraph2 {
  color: var(--dl-color-gray-600);
  font-size: 1rem;
}

.deborah {
  align-items: center;
}
.deborah:hover {
  transition: 0.3s;
  background-color: var(--dl-color-primary-lilac-50);
}
.noah {
  align-items: center;
  flex-direction: column;
}
.noah:hover {
  transition: 0.3s;
  background-color: var(--dl-color-primary-emerald-50);
}
.hover-cursor {
  top: 5%;
  left: 90%;
  width: 24px;
  height: 24px;
  position: absolute;
  transform: rotate(45deg);
}
.jOAnne {
  align-items: center;
  flex-direction: column;
}
.jOAnne:hover {
  transition: 0.3s;
  background-color: var(--dl-color-primary-tangerine-50);
}


.h4 {
  color: var(--dl-color-gray-600);
  font-size: 1.125rem;
}
.article-generation {
  gap: 1.5rem;
  flex: row;
  width: 50%;
  display: flex;
  padding: 0 3rem 3rem 3rem;
  align-self: stretch;
  align-items: center;
  justify-content: flex-start;
  background-color: var(--dl-color-primary-lilac-50);
}

.article-output {
  gap: 1rem;
  width: 50%;
  display: flex;
  padding: 0 3rem 0 3rem;
  align-self: stretch;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.article-date {
  color: var(--dl-color-gray-600);
  font-size: 0.75rem;
}

.article-generation-top {
  gap: 0.5rem;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.article-generation-date {
  flex: 0 0 auto;
  color: var(--dl-color-gray-600);
  width: 100%;
  height: auto;
  display: flex;
  padding: 2rem 0 0 0;
  align-items: center;
  justify-content: space-between;
}
.article-generation-middle {
  gap: 0.5rem;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.paragraph3 {
  color: var(--dl-color-gray-600);
  font-size: 0.8rem;
}


.article-generation-bottom {
  gap: 0.5rem;
  width: 100%;
  display: flex;
  flex-direction: column;
}


.button-icon {
  fill: var(--dl-color-primary-lilac-500);
  width: 1rem;
  height: auto;
}
.button-icon:hover {
  color: var(--dl-color-gray-white);
}
.Number {
  font-size: 0.5rem;
  font-family: "PP Neue Montreal";
  font-weight: 500;
  text-transform: none;
  text-decoration: none;
}
.H4 {
  font-size: 1rem;
  font-family: "PP Fragment Glare Regular";
  font-weight: 500;
  text-transform: none;
  text-decoration: none;
}
.H2 {
  font-size: 2.5rem;
  font-family: "PP Fragment Glare Regular";
  font-weight: 500;
  line-height: 140%;
  text-transform: none;
  text-decoration: none;
}

.footer-fineprints {
  font-size: 0.75rem;
  font-family: "PP Neue Montreal";
  font-weight: 500;
  line-height: 140%;
  text-transform: none;
  text-decoration: none;
  color: var(--dl-color-gray-500)
}

.H3 {
  font-size: 1.5rem;
  font-family: "PP Fragment Glare Regular";
  font-weight: 500;
  text-transform: none;
  text-decoration: none;
}
.Subtitle1 {
  font-size: 1.25rem;
  font-family: "PP Neue Montreal";
  font-weight: 500;
  line-height: 120%;
  text-transform: none;
  text-decoration: none;
}
.Category-Title {
  font-size: rem;
  font-family: "PP Neue Montreal Medium";
  font-weight: 500;
  text-transform: none;
  text-decoration: none;
}
.Links {
  font-size: 1rem;
  font-family: "PP Neue Montreal";
  font-weight: 400;
  line-height: 140%;
  text-transform: none;
  text-decoration: none;
}

.Forms {
  font-size: 0.8rem;
  font-family: "PP Neue Montreal";
  font-weight: 500;
  text-transform: none;
  text-decoration: none;
}

.H1 {
  font-size: 2.5rem;
  font-family: "PP Fragment Glare Regular";
  font-weight: 500;
  line-height: 120%;
  text-transform: none;
  text-decoration: none;
}
.Content {
  font-size: 1rem;
  font-family: "PP Neue Montreal";
  font-weight: 500;
  line-height: 140%;
  text-transform: none;
  text-decoration: none;
}

.account-image {
  width: 158px;
  object-fit: cover;
  text-decoration: none;
}

@media(max-width: 1280px) {
  .nav {
    padding: 0 4rem 0 4rem;
  }
  .header-content {
    padding: 5rem 8rem 3rem 8rem;
  }
  .about-whoa {
    padding: 5rem;
  }
  .banner-deb {
    padding-left: 5%;
    padding-right: 5%;
  }
  .paragraph1 {
    font-size: 1rem;
  }
  .banner-title {
    padding: 0 5rem 0 5rem;
  }
  .banner-howitworks-documents {
    padding: 0 5rem 0 5rem;
  }
  .footer-logo {
    width: auto;
    flex-direction: column;
  }
  .footer-header {
    margin-bottom: 0rem;
  }


  .paragraph2 {
    font-size: 0.9rem;
  }
  .article-generation {
    align-items: flex-start;
    margin-left: 0px;
    padding-left: 2rem;
    padding-right: 2rem;
    flex-direction: column;
    padding-bottom: 2rem;
    justify-content: flex-start;
    background-color: var(--dl-color-primary-lilac-50);
  }
  .article-output {
    align-items: center;
    margin-left: 0px;
    padding-left: 2rem;
    padding-right: 2rem;
    flex-direction: column;
    justify-content: center;
    background-color: transparent;
  }
  .article-process-selection {
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    align-items: stretch;
    padding-top: 0rem;
    border-radius: var(--dl-radius-radius-radius8);
    flex-direction: row;
  }
}

/* H2 CARD */

.h2-card {
  color: var(--dl-color-primary-lilac-500);
  font-size: 1.5rem;
  line-height: 140%;
}

@media(max-width: 991px) {
  .h2-card {
    width: 75%;
  }

  @media(max-width: 479px) {
  .h2-card {
    width: 100%;
    font-size: 1.5rem;
  }
}

/* H2 CARD */ 

  .buttons {
    text-align: center;
  }
  .header-content {
    padding: 5rem;
  }
  .h1 {
    font-size: 2rem;
    line-height: 140%;
  }
  .about-whoa {
    padding: 6rem;
  }
  .hero-subtitle {
    font-size: 1.5rem;
  }
  .banner-deb {
    padding: 6rem;
  }
  .links-container {
    display: none;
  }
  .paragraph1 {
    font-size: 1rem;
  }

  /* PERSONA BANNER CONTAINER */

  .banner-persona-container {
    display: flex;
    flex-direction: column;
  }

  .card-deb {
    width: 100%;
  }
  .card-jo {
    width: 100%;
  }
  .banner-title {
    padding: 0;
  }
  .card-joanne {
    width: 100%;
  }
  .banner-howitworks-documents {
    padding: 0 5rem 0 5rem;
  }
  .pricing-unit {
    font-size: 2rem;
  }
  .footer-top {
    flex-direction: column;
  }
  .footer-logo {
    position: inherit;
    flex-direction: column;
  }

  .footer-header {
    font-size: 1.125rem;
    line-height: 140%;
  }


  .deborah {
    width: 100%;
    flex-direction: column;
    justify-content: space-between;
  }
  .noah {
    width: 100%;
    flex-direction: column;
  }
  .jOAnne {
    width: 100%;
    flex-direction: column;
  }
  .article-generation {
    width: 100%;
  }
  .article-output {
    width: 100%;
    padding: 3rem;
  }
  .article-process-selection {
    padding-top: var(--dl-space-space-0.5rem);
  }
}
@media(max-width: 767px) {
  .buttons {
    text-align: center;
  }
  .nav {
    padding: 0rem 1rem 0rem 1rem;
  }
  .header-content {
    padding: 2rem;
  }
  .hero {
    height: 1080px;
    position: relative;
  }
  .h1 {
    font-size: 28px;
  }

  .about-whoa {
    padding-top: 4rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 4rem;
  }
  .banner-deb {
    padding-top: 4rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 4rem;
  }

  .card-deb {
    padding: 4rem 1.5rem 4rem 1.5rem;
    flex-direction: column-reverse;
  }
  .card-jo {
    padding-top: 4rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 4rem;
  }
  .banner-title {
    padding: 0;
  }
  .card-joanne {
    padding-top: 4rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 4rem;
  }
  .banner-howitworks-documents {
    padding: 0 5rem 0 5rem;
  }

  .footer-header {
    font-size: 1.125rem;
    line-height: 140%;
  }

  .paragraph2 {
    padding-bottom: 0;
  }

  .deborah {
    gap: 3rem !important;
  }
  .noah {
    gap: 3rem !important;
  }
  .jOAnne {
    gap: 3rem !important;
  }

  
  }
  .article-generation {
    width: 100%;
    flex-direction: column;
  }
  .article-output {
    width: 100%;
    flex-direction: column;
  }
}

  .buttons {
    text-align: center;
  }
  .nav {
    padding: 0rem 1rem 0rem 1rem;
  }
  .heading {
    text-align: left;
  }

  .footer-header {
    color: var(--dl-color-gray-600);
    font-size: 1.125rem;
    font-style: normal;
    line-height: 140%;
  }
  
  }
  .deborah {
    gap: 1rem !important;
  }
  .noah {
    gap: 1rem !important;
  }
  .jOAnne {
    gap: 1rem !important;
  }
}