html {
  scroll-behavior: smooth;
}

body {
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
}

.fonts-loaded body{
  font-family: "Inter", sans-serif;
}

.siteContainer {
  display: grid;
  grid-auto-flow: row;
  background-color: #f7fbfa;
}

.button {
  align-items: center;
  justify-content: center;
  height: 3rem;
  padding: 0 2.25rem;
  background: #202025;
  border: 0.125rem solid #202025;
  border-radius: 0.25rem;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #f7fbfa;
  transition: all 0.2s;
  -webkit-font-smoothing: antialiased;
  cursor:pointer;
}

.buttonWhite{
  align-items: center;
  justify-content: center;
  height: 3rem;
  padding: 0 2.25rem;
  background: #F7FBFA;
  border: 0.125rem solid #F7FBFA;
  border-radius: 0.25rem;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #202025;
  transition: all 0.2s;
  -webkit-font-smoothing: antialiased;
  cursor:pointer;
}

.link{
  color:white;
  text-decoration: none;
}

.title {
  font-style: normal;
  font-weight: 800;
  font-size: 3rem;
  line-height: 3rem;
  letter-spacing: -0.02rem;
  color: #202025;
  margin: 24px 0px;
  -webkit-font-smoothing: antialiased;
}

.subTitle{
  font-style: normal;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #202025;
  -webkit-font-smoothing: antialiased;
  margin-bottom: 0px;
}

.description {
  font-style: normal;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: -0.02em;
  color: #686a6c;
  -webkit-font-smoothing: antialiased;
}

.subHeading{
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #686A6C;
  text-align: left;
}

.black{
  color: #202025;
}

.white{
  color:#F7FBFA;
}

.grey{
  color: #686A6C;
}

.lightGrey{
  color:#A6AEAD
}

.inputFieldContainer{
  display: block;
  position: relative;
}

.inputField{
  width: 100%;
  border-width: 0 0 0.0625rem;
  border-style: solid;
  border-color: #555555;
  color: #F7FBFA;
  background: #202025;
  border-radius: 0;    
  height: 3.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: -0.01em;
  font-weight: 700;
  transition: border-color 0.2s;
  -webkit-font-smoothing: antialiased;
}

.inputFieldIcon{
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  pointer-events: none;
  fill: #686A6C;
  width: 1.5rem;
  height: 1.5rem;
}

.inputFieldContainer input:focus-visible{
  outline:none;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #F7FBFA;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color:#F7FBFA;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color:#F7FBFA;
}

.inputFieldContainer input:focus::placeholder {
  color: #202025;
}

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #202025 inset !important;
}

/*Change text in autofill textbox*/
input:-webkit-autofill{
  -webkit-text-fill-color: white !important;
}

.section4Title{
  font-style: normal;
  font-weight: 800;
  font-size: 3rem;
  line-height: 3rem;
  letter-spacing: -0.02rem;
  color: #202025;
  margin: 24px 0px;
  -webkit-font-smoothing: antialiased;
}

@media only screen and (min-width: 800px) {
  .title {
    font-size: 4rem;
    line-height: 4rem;
  }

  .subTitle{
    font-size: 1.2rem;
    font-size: 1.2rem;
  }

  .section4Title{
    font-size: 3.2rem;
    line-height: 3.2rem;
  }
}

@media only screen and (min-width: 1024px) {
  .title {
    font-size: 5rem;
    line-height: 5rem;
  }

  .subTitle{
    font-size: 1.6rem;
    font-size: 1.6rem;
  }

  .description {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }

  .subHeading{
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .section4Title{
    font-size: 4.2rem;
    line-height: 4.2rem;
  }
}

@media only screen and (min-width: 1440px) {
  .title {
    font-size: 5.5rem;
    line-height: 5.5rem;
  }

  .subTitle{
    font-size: 1.6rem;
    font-size: 1.6rem;
    margin-bottom:.8rem;
  }

  .section4Title{
    font-size: 5rem;
    line-height: 5rem;
  }
}

.section {
  display: grid;
}

#section1 {
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  border-bottom: 1px solid #e1e2e2;
  min-height: 32px;
  height: 10vh;
  gap: 1px;
  grid-template-areas: "section1Logo section1Links";
  grid-area:"section1Complete";
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 1;
  z-index: 2;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(100px);
}

#section1Logo {
  display: grid;
  grid-area: section1Logo;
  /* background-color: #f7fbfa; */
  padding: 0px 32px;
  justify-content: start;
  align-content: center;
  align-items: center;
}

#section1Links {
  display: grid;
  grid-area: section1Links;
  /* background-color: #f7fbfa; */
  padding: 0px 24px;
  justify-content: end;
  align-content: center;
  align-items: center;
}

#section1LinksGroup {
  display: grid;
  grid-auto-flow: column;
  gap: 36px;
  align-items: center;
  justify-content: end;
}

#section1headerCTA{
  min-width:176px;
}

.headerLinks {
  font-style: normal;
  font-weight: 800;
  font-size: 12px;
  line-height: 24px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #202025;
  -webkit-font-smoothing: antialiased;
  display: none;
  text-decoration: none;
}

.footerLinkHeaders {
  font-style: normal;
  font-weight: 800;
  font-size: 12px;
  line-height: 24px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #202025;
  -webkit-font-smoothing: antialiased;
  text-decoration: none;
}

.footerLinks{
  text-decoration: none;
  color: #202025;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

@media only screen and (min-width: 916px) {
  #section1 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "section1Logo section1Links section1Links";
  }
  
  #section1Logo {
    padding:0px 72px;
    justify-content: start;
  }

  .headerLinks{
    display:grid;
  }
}

@media only screen and (min-width: 1220px) {
  #section1 {
  grid-template-columns: 1fr 1fr;
    grid-template-areas: "section1Logo section1Links";
  }
}

#section2 {
  display: grid;
  grid-template-columns: 1fr;
  height: 100vh;
  grid-area:"section2Complete";
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 1;
  z-index: 1;
}

#section2Title {
  display: grid;
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 1;
  z-index: 2;
  align-items: center;
  justify-content: center;
  align-content: center;
  text-align: center;
  padding: 0px 20px;
}

#section2Animation {
  display: grid;
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 1;
  z-index: 1;
  overflow:hidden;
}

#section1and2{
  display:grid;
  grid-template-columns: 1fr;
  grid-area: 
  "section1Complete"
  "section2Complete";
}

#section3 {
  padding: 12px 36px;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-areas: "section3Title section3Title" "section3Description section3Description";
  background-color: #F7FBFA;
}

#section3Title {
  grid-area: section3Title;
}

#section3Description {
  grid-area: section3Description;
  padding: 24px 0px;
}

#section3Arrow {
  background: #6dd3c2;
  border-radius: 48px;
  display: grid;
  align-content: center;
  justify-content: center;
  height: 3rem;
  width: 8rem;
  padding-left: 32px;
}

@media only screen and (min-width: 1024px) {
  #section3 {
    grid-template-areas: "section3Title section3Description";
  }

  #section3Title {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
  }
}

#section4 {
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-areas: "section4Illustration section4Illustration" "section4Title section4Title";
}

#section4Content {
  display: grid;
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 1;
  z-index: 2;
  align-content: center;
}

#section4Title {
  display: grid;
  grid-area: section4Title;
  background-color: #dbff73;
  grid-auto-flow: column;
  padding: 32px;
  object-fit: cover; 
  aspect-ratio: 1 / 1;
}

#section4Illustration {
  display: grid;
  grid-area: section4Illustration;
}

/* #section4IllustrationDummy {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 1;
  z-index: 1;
} */

@media only screen and (min-width: 550px) {
  #section4Illustration{
    display:none;
  }

  #section4Title {
  aspect-ratio: 2 / 1;
  }
}

@media only screen and (min-width: 770px) {
  #section4 {
    grid-template-areas: "section4Illustration section4Title";
  }

  #section4Illustration{
    display:grid;
  }

  #section4Title {
    aspect-ratio: 1 / 1;
    padding:2rem;
  }
}
@media only screen and (min-width: 1210px) {
   #section4Title {
    padding:3rem;
  }
}

@media only screen and (min-width: 1400px) {
   #section4Title {
    padding:6rem;
  }
}

@media only screen and (min-width: 1800px) {
   #section4Title {
    padding:8rem;
  }
}

#section5 {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "featuresTitle featuresTitle"
    "featuresList featuresList";
}


#circularButton {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 5rem;
  height: 5rem;
  margin-left: 1.5rem;
  border: 0.0625rem solid #f1f4f4;
  background: #f7fbfa;
  border-radius: 50%;
  box-shadow: 0 1.25rem 1rem -0.375rem rgba(0, 0, 0, 0.15);
  margin: 1.5rem 0 0;
}

#circularButton svg {
  fill: #010101;
  transition: fill 0.2s;
}

#section5Description {
  margin-top: 48px;
  max-width: 500px;
  line-height: 2rem;
}

#featuresTitle {
  display: grid;
  grid-area: featuresTitle;
  padding: 32px;
}

@media only screen and (min-width: 550px) {
  #featuresTitle {
    justify-content: center;
  }
}

@media only screen and (min-width: 1024px) {
  #featuresTitle {
    position: sticky;
    top: 0;
  }
}

#featuresList {
  display: grid;
  grid-area: featuresList;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "feature1 feature2"
    "feature3 feature4"
    "feature5 feature6"
    "feature7 feature8";
}

.featureItem {
  display: grid;
  border-width: 0.0625rem 0.0625rem 0 0;
  border-style: solid;
  border-color: #e1e2e2;
  text-align: center;
  transition: all 0.2s;
  padding: 1.5rem 0.75rem;
  background: #f1f4f4;
}

.featureItemNumber {
  display: grid;
  align-items: center;
  align-self: end;
  justify-self: end;
  width: 2.5rem;
  height: 2.5rem;
  -webkit-clip-path: circle();
  clip-path: circle();
  background: #f7fbfa;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: #202025;
  transition: all 0.2s;
  filter: drop-shadow(0 0.5rem 0.5rem rgba(0, 0, 0, 0.06));
  -webkit-font-smoothing: antialiased;
}

.featureItemAvatar {
  display: grid;
  align-items: center;
  align-self: center;
  justify-self: center;
  /* border-radius: 50%; */
  width: 60%;
  max-width:170px;
  padding-bottom: 16px;
}

.feautureItemTitle {
  margin-bottom: 0.25rem;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #202025;
  font-size: 1rem;
  line-height: 1.5rem;
  -webkit-font-smoothing: antialiased;
}

.featureItemDescription {
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: #686a6c;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}

.featureItemDescriptionGroup1{
  min-height: 200px;
}

.featureItemDescriptionGroup2{
  min-height: 220px;
}

.featureItemDescriptionGroup3{
  min-height: 180px;
}

.featureItemDescriptionGroup4{
  min-height: 250px;
}

@media only screen and (min-width: 420px) {
  .featureItemDescriptionGroup1{
    min-height: 160px;
  }
  
  .featureItemDescriptionGroup2{
    min-height: 160px;
  }
  
  .featureItemDescriptionGroup3{
    min-height: 140px;
  }
  
  .featureItemDescriptionGroup4{
    min-height: 210px;
  }
}

@media only screen and (min-width: 520px) {
  .featureItemDescriptionGroup1{
    min-height: 140px;
  }
  
  .featureItemDescriptionGroup2{
    min-height: 140px;
  }
  
  .featureItemDescriptionGroup3{
    min-height: 120px;
  }
  
  .featureItemDescriptionGroup4{
    min-height: 190px;
  }
}

@media only screen and (min-width: 620px) {
  .featureItemDescriptionGroup1{
    min-height: 130px;
  }
  
  .featureItemDescriptionGroup2{
    min-height: 130px;
  }
  
  .featureItemDescriptionGroup3{
    min-height: 110px;
  }
  
  .featureItemDescriptionGroup4{
    min-height: 180px;
  }
}

@media only screen and (min-width: 670px) {
  .featureItemDescriptionGroup1{
    min-height: initial;
  }
  
  .featureItemDescriptionGroup2{
    min-height: initial;
  }
  
  .featureItemDescriptionGroup3{
    min-height: initial;
  }
  
  .featureItemDescriptionGroup4{
    min-height: initial;
  }
}

#feature1 {
  grid-area: feature1;
}

#feature2 {
  grid-area: feature2;
}

#feature3 {
  grid-area: feature3;
}

#feature4 {
  grid-area: feature4;
}

#feature5 {
  grid-area: feature5;
}

#feature6 {
  grid-area: feature6;
}

#feature7 {
  grid-area: feature7;
}

#feature8 {
  grid-area: feature8;
}

@media only screen and (min-width: 1024px) {
  #section5 {
    grid-template-areas:
      "featuresTitle featuresList"
      "featuresTitle featuresList";
  }

  #featuresList {
    grid-template-areas:
      "feature1 feature2"
      "feature3 feature4"
      "feature5 feature6"
      "feature7 feature8";
    overflow-y: scroll;
  }

  #featuresTitle {
    height: 600px;
    padding: 4rem;
  }
}

@media only screen and (min-width: 1200px) {
  #featuresTitle {
    height: 700px;
    padding: 6rem;
  }
}

@media only screen and (min-width: 1400px) {
  #featuresTitle {
    height: 900px;
    padding: 8rem;
  }
}

#section6 {    
  padding: 3rem 1.5rem 1.5rem 1.5rem;
  background-color: #F7FBFA;
}

@media only screen and (min-width: 1024px) {
  #section6 {
    align-items: center;
    justify-content: center;
    align-content: center;
    text-align: center;
    padding: 6rem 3rem 3rem 6rem;
  }

  #section6 p{
    max-width:500px;
    text-align: center;
    justify-self: center;
  }
}

#section7 {
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-areas:
    "section7Illustration section7Illustration"
    "section7Content section7Content";
  padding: 1.5rem 1.5rem 1.5rem 1.5rem;
  background-color: #F7FBFA;
}

#section7Illustration {
  display: grid;
  grid-area: section7Illustration;
  padding-bottom: 1.5rem;
}

#section7Content {
  display: grid;
  grid-area: section7Content;
}

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

@media only screen and (min-width: 892px) {
  #section7 {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    "section7Illustration section7Content"
    "section7Illustration section7Content";
  }

  #section7Illustration{
    max-width: 400px;
    align-items: center;
    justify-content: center;
    align-content: center;
  }
}

@media only screen and (min-width: 1024px) {
  #section7 {
    grid-template-areas:
      "section7Illustration section7Content"
      "section7Illustration section7Content";
  }

  #section7Illustration{
    padding:3rem;
    align-items: center;
    max-width: 4000px;
  }

  #section7Content{
    padding:3rem;
  }
}

#section8 {
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-areas:
    "section8Illustration section8Illustration"
    "section8Content section8Content";
  padding: 1.5rem 1.5rem 1.5rem 1.5rem;
  background-color: #F7FBFA;
}

#section8Illustration {
  display: grid;
  grid-area: section8Illustration;
  padding-bottom: 1.5rem;
}

#section8Content {
  display: grid;
  grid-area: section8Content;
}

@media only screen and (min-width: 892px) {
  #section8 {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    "section8Content section8Illustration "
    "section8Content section8Illustration ";
  }

  #section8Illustration{
    max-width: 400px;
    align-items: center;
    justify-content: center;
    align-content: center;
  }
}


@media only screen and (min-width: 1024px) {
  #section8 {
    grid-template-areas:
      "section8Content section8Illustration"
      "section8Content section8Illustration";
  }

  #section8Illustration{
    padding:3rem;
    align-items: center;
    max-width: 4000px;
  }

  #section8Content{
    padding:3rem;
  }

  #section8Content p{
    max-width:550px;
    line-height: 2rem;
  }
}

#section9 {
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-areas:
    "section9Download section9Download"
    "section9Newsletter section9Newsletter";
}

.section9Content{
  padding: 1.5rem 1.5rem 1.5rem 1.5rem;
  min-height: 450px;
}

#section9Download {
  display: grid;
  grid-area: section9Download;
  background:#DBFF73;
}

#section9Newsletter {
  display: grid;
  grid-area: section9Newsletter;
  background:#202025;
}

#section9ButtonSVG{
  width: 1.5rem;
  height: 1.5rem;
  fill: #F7FBFA;
  transition: fill 0.2s;
  padding-left: 16px;
}

#marketplaceButton{
  align-items: center;
  text-align: center;
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  align-content: center;
}

@media only screen and (min-width: 1024px) {
  #section9 {
    grid-template-areas:
      "section9Download section9Newsletter";
  }

  #section9Download{
    padding:5rem;
  }

  #section9Download p{
    max-width: 550px;
  }

  #section9Newsletter{
    padding:5rem;
  }

  #section9 button{
    max-width: 350px;
  }
  
}

#section10 {
  grid-template-columns: 2fr 2fr 0.25fr;
  grid-auto-flow: column;
  grid-template-areas:
    "section10Header section10Header section10Header"
    "section10Links1 section10Socials section10Socials"
    "section10Divider section10Divider section10Divider"
    "section10Copyright section10Copyright section10Copyright";
  padding: 1.5rem 1.5rem 1.5rem 1.5rem;
  background-color: #F7FBFA;
}

#section10Header {
  display: grid;
  grid-area: section10Header;
  justify-content: start;
  padding: 2rem 0rem;
}

#section10Logo {
  display: grid;
  background-color: #f7fbfa;
  justify-content: start;
  align-content: center;
  align-items: center;
  margin-bottom:42px;
}

#section10Links1 {
  display: grid;
  grid-area: section10Links1;
  grid-auto-flow: row;
}

#section10Links2 {
  display: grid;
  grid-area: section10Links2;
  grid-auto-flow: row;
}

#section10Socials {
  display: grid;
  grid-area: section10Socials;
  grid-auto-flow: row;
  align-items: start;
}

.footerLinksSocials{
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  grid-gap: 10px;
  text-decoration: none;
  justify-content: start;
  min-height: 51.5px;
}

.footerLinksSocialsText{
  /* display:none; */
  text-decoration: none;
  color: #202025;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

#section10Divider {
  display: grid;
  grid-area: section10Divider;
  border-bottom: 1px solid #e1e2e2;
  margin:2rem 0rem;
}

#section10Copyright {
  display: grid;
  -webkit-font-smoothing: antialiased;
  grid-area: section10Copyright;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #A6AEAD;
}

@media only screen and (min-width: 550px) {
  #section10 {
    grid-template-columns: 1.5fr 1fr 1fr;
    grid-template-areas:
      "section10Header section10Links1 section10Socials"
      "section10Divider section10Divider section10Divider"
      "section10Copyright section10Copyright section10Copyright";
  }

  .footerLinksSocialsText{
    display:grid;
  }
}

@media only screen and (min-width: 1024px) {
  #section10 {
    grid-template-columns: 0.5fr 0.17fr 0.17fr 0.16fr;
    grid-template-areas:
      "section10Header section10Header section10Links1 section10Socials"
      "section10Divider section10Divider section10Divider section10Divider"
      "section10Copyright section10Copyright section10Copyright section10Copyright";
    padding: 6rem 6rem 3rem 6rem;
  }

  .footerLinksSocials{
    justify-content: start;
  }

  .footerLinksSocialsText{
    display:grid;
  }
}

.loading {
  opacity: .5;
}
.loading span {
  display: none;
}


.lds-ring {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  margin: 4px 8px 0px 8px;
  border: 2px solid #202025;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #202025 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}