/*   main content   */
* {
  box-sizing: border-box;
}

.inter-<uniquifier> {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
  font-family: 'Inter', sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
}


header {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  top: 0;
  z-index: 9999;
}

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

section {
  display: block;
  width: 100%;
}

#mainSection {
  display: grid;
  gap: 2%;
  width: 99vw;
  max-width: 1180px;
  justify-content: center;
  align-items: center;
}

.imgAdapt {
  width: 100%;
}


/*   menu   */
#floatingButton {
  display: none;
}

.navGeneralFlex {
  line-height: 40px;
  text-align: center;
  display: flex;
  flex-direction: row;
  gap: 50%;
  padding: 1vw;
  width: 100%;
  justify-content: center;
  align-items: center;
  place-content: center;
  height:75px;
}

.navButtonFlex {
  top-padding: 1vw;
  display: flex;
  flex-direction: row;
  gap: 25px;
}

.menuButtonsContainer {
  height: 40px;
  width: 128px;
}

.menuButtons {
  text-transform: uppercase;
  position: relative;
  font-family: 'Inter';
  font-size: 14px;
  display: inline-block;
  color: black;
  text-decoration: none;
  font-weight: 700;
}

.menuButtons::after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 0;
  height: 2px;
  background:rgba(163, 140, 250, 1) ;
  transition: width 300ms ease;
}

.menuButtons:hover::after {
  width: 100%;
}

#menuDownloadButton {
  text-transform: uppercase;
  display: inline-block;
  font-family: 'Inter';
  font-size: 14px;
  background-color: rgba(0, 0, 0, 1);
  height: 40px;
  width: 128px;
  border-radius: 22px;
  color: rgba(255, 255, 255, 1);
  font-weight: 700;
  text-decoration:none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#menuDownloadButton:hover {
  background-color: rgba(246, 246, 246, 1);
  color: rgba(0, 0, 0, 1);
  transform: scale(1.05);
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#Features {
  scroll-margin-top: 100px;
}

/*   section One   */

#sectionOneMainDiv {
 padding-top:124px;
}

.mainDiv {
  padding-left: 50px;
  padding-right: 50px;
  display: flex;
  flex-direction: row;
  gap: 2%;
}

.firstSubMainDiv {
  gap:2%;
  display: flex;
  flex-direction: column;
  width: 50%;
  align-items: center;
  justify-content: center;
  align-content: center;
}

.paragraphSection {
  color: rgba(99, 99, 99, 1);
  font-family: "Inter";
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0,15px;
  margin-top: 0px;
}

#paragraphSectionOne {
  margin-top: 0px;
  width: 100%;
  color: rgba(142, 142, 142, 1);
  font-family: "Inter";
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0,14px;
}

.titleSection {
  width: 100%;
  color: rgba(0, 0, 0, 1);
  font-family: "Inter";
  font-size: 40px;
  font-weight: 700;
  font-style: bold;
  letter-spacing: -0,33px;
  margin-bottom: 0px;
  margin-top: 0px;
}

.imgDivSection {
  display: block;
  width: 100%;
}

.sectionSubMainDiv {
  padding-top: 0px;
  display: inline-block;
}

.imgLogoSection {
  height: 200px;
  width: 400px;
}

.appStoreImgDiv {
  display: flex;
  flex-direction: row;
  gap: 24.1px;
  width: 100%;
}

.sectionSecondSubMainDiv {
  display: inline-block;
  width: 50%;
}

.imgSection {
  width: 30px;
  height: 32px;
}

.sectionSubDiv {
  padding-top: 0px;
  display: inline-block;
}

.sectionDivPadding {
    display: grid;
    width: 100%;
    gap: 10%;
    margin-bottom:3%;
}

/* section three */

#sectionThreeImgDivSection {
 display: flex;
 justify-content: flex-end;
}

#sectionThreeDivPadding {
 text-align: right;
}

/* section five */
#sectionFiveContainerDiv {
  display: flex;
  background-color: rgba(31, 31, 31, 1);
  justify-content: center;
  align-items: center;
  place-content: center;
  padding-top: 5%;
  padding-bottom: 5%;
}

#sectionFiveMainDiv {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 5%;
  padding-left: 50px;
  padding-right: 50px;
  justify-content: center;
  align-items: center;
  max-width:1180px;
}

#sectionFiveFirstSubMainDiv {
  display: flex;
  flex-direction: column;
  width: 50%;
}

#paragraphSectionFive {
  color: rgba(213, 213, 213, 1);
  font-family: "Inter";
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0,15px;
}

#titleSectionFive {
  color: rgba(255, 255, 255, 1);
  font-family: "Inter";
  font-size: 40px;
  font-weight: 700;
  font-style: bold;
  letter-spacing: -0,33px;
  margin-top: 0px;
  margin-bottom: 0;
}

#sectionFiveSecondSubMainDiv {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.videoWrapper {
  max-width: 100%;
  border-radius: 10px;
  overflow: hidden;
      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.sectionVideo {
  width: 100%;
  height: auto;
  display: block;
}

/* section six */
#sectionSixContainerDiv {
  width: 100%;
  display: flex;
  background-color: rgba(199, 152, 250, 1);
  justify-content: center;
  align-items: center;
  place-content: center;
  scroll-margin-top: 60px;
}

#sectionSixMainDiv {
  display: flex;
  flex-direction: column;
  gap: 4%;
  padding-left: 50px;
  padding-right: 50px;
  max-width:1180px;
}

#sectionSixFirstSubMainDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  place-content: center;
}

#paragraphSectionSix {
  color: rgba(0, 0, 0, 1);
  font-family: "Inter";
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0,15px;
  text-align: center;
}

#titleSectionSix {
  color: rgba(0, 0, 0, 1);
  font-family: "Inter";
  font-size: 40px;
  font-weight: 700;
  font-style: bold;
  letter-spacing: -0,33px;
  text-align: center;
  margin-bottom: 0;
}

#imgDivSectionSix {
  display: block;
  height: 200px;
  width: 400px;
}

#sectionSixSubDiv {
  padding-top: 0px;
  display: inline-block;
}

#imgSectionSix {
  width: 30px;
  height: 32px;
}

#sectionSixSecondSubMainDiv {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 3%;
  max-height:555px;
  max-width:auto;
}

  #sectionSixSecondSubMainDiv .videoWrapper, .mediaAdaptation{
      max-height:555px;
      max-width:auto;
  }

/* section seven */
#sectionSeven {
  background-color:rgba(249, 249, 249, 1);
  width: 100%;
  display: grid;
  justify-items: center;
  scroll-margin-top: 50px;

}

#sectionSevenContainer {
  max-width: 1180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  place-content: center;
  padding-left: 50px;
  padding-right: 50px;
  gap: 10%;
}

#sectionSevenFirstSubMainDiv {
  width: 60%;
}

#sectionSevenSecondMainDiv {
  display: flex;
  flex-direction: row;
}

#sectionSevenSubContainer {
  display: flex;
  flex-direction: row;
  align-text: start;
  gap: 5%;
}

#sectionSevenSecondSubMainDiv {
  display: flex;
  margin-bottom: 2%;
  flex-direction: column;
  width: 60%;
}

#sectionSevenTitle {
  color: rgba(0, 0, 0, 1);
  font-family: "Inter";
  font-size: 50px;
  font-weight: 700;
  font-style: bold;
  letter-spacing: -0,33px;
  margin-bottom: 0;
}

.sectionSevenParagraph {
  color: rgba(99, 99, 99, 1);
  font-family: "Inter";
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0,15px;
}

.SectionSevenSubTitle {
  color: rgba(99, 99, 99, 1);
  font-family: "Inter";
  font-size: 21px;
  font-weight: 700;
  font-style: bold;
  letter-spacing: -0,17px;
  margin-bottom: 0;
}

.sectionSevenSubParagraph {
  color: rgba(99, 99, 99, 1);
  font-family: "Inter";
  font-size: 18px;
  font-weight: 400;
  font-style: bold;
  letter-spacing: -0,17px;
  margin-bottom: 0;
}

#SectionSevenTitleDiv {
  display: inline-block;
  text-align: start;
  width: 100%;
}

  .mediaAdaptation:not(#firstVideo,#sectionFiveVideo) {
    max-height: 330px;
    width: 100%;
    height: 100%;
  }

/* section eight */

#sectionEightContainerDiv {
  width: 100%;
  display: flex;
  background-color: rgba(249, 249, 249, 1);
  justify-content: center;
  align-items: center;
  place-content: center;
}

#sectionEightMainDiv {
    padding-bottom: 50px;
    gap: 3%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    align-content: center;
    max-width:1180px;
}

#sectionEightMainDiv .firstSubMainDiv {
 width:auto;
}

#sectionEightSecondSubMainDiv {
  min-width: 205px;
  width: 19%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
}

#buttonDivSectionEight {
  width: 205px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#buttonDivSectionEight a {
  width: 205px;
  height: 50px;
  text-align: center;
  width: 100%;
  padding: 7.5%;
  background-color: rgba(135, 22, 190, 1);
  color: white;
  border-radius: 37px;
  display: inline-block;
  text-decoration: none;
  font-family: 'Inter';
  text-decoration: none;
  font-weight: 700;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  font-size: 13px;;
}

#buttonDivSectionEight a:hover {
  background-color: white;
  color: rgba(135, 22, 190, 1);
  transform: scale(1.05);
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2),
                0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }

/* section nine */

#sectionNineContainer {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}

#sectionNineMainDiv {
  gap: 3%;
  justify-content: center;
  display: flex;
  max-width:1180px;
  margin-top:50px;
  margin-bottom:25px;
}

#sectionNineSecondSubMainDiv {
  min-width:240px;
  width: 25%;
}

#SectionNineSubSectionsContainer .firstSubMainDiv {
 width: 90%;
}

#sectionNineImg {
  height: 200px;
  width: 200px;
}

#SectionNineSubSectionsContainer {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding-left:50px;
  padding-right:50px;
}

/* footer */

footer {
 width: 100%;
}

#footerContainer {
   height: 346px;
    width: 100%;
    display: flex;
    background-color: rgba(242, 243, 242, 1);
    justify-content: center;
    align-items: center;
    place-content: center;
    flex-direction: column;
    padding-left:50px;
    padding-right:50px;
    padding-top: 25px;
    text-align:center;
    vertical-align: middle;
}

#footerContainer table {
  margin: 0 auto;
  border-collapse: collapse;
  border-bottom: 0;
  border-top: 0 solid #000;
  width: 100%;
}

#footerContainer th {
  border-bottom: 0;
  border-top: 0 solid;
  font-size: 9pt;
  text-transform: uppercase;
  font-weight: bold;
  color: #4b4b4b;
  padding: 0.5rem 1rem;
  height:42px;
}

#footerContainer tbody tr {
  border: none;
}

#footerContainer td {
  border: 0;
  color: #737373;
  font-size: 9pt;
  padding: 0.75rem;
  text-align: center;
  height:42px;
  width:300px;
}

#footerContainer a {
  color: #737373;
  text-decoration: none;
}

#footerContainer .footerText {
  text-align: center;
  color: #a1a1a1;
  font-size: 9pt;
  margin-bottom: 0;
  padding-bottom: 29px;
}
  #footerMainDiv {
     max-width: 1180px;
     width: 100%;
  }

#footerContainer th,
#footerContainer td {
  text-align: left;
}

#footerContainer th a,
#footerContainer td a {
  display: inline-block;
  text-align: left;
}

@media (max-width: 1400px) {
  .navGeneralFlex {
    gap: 40%;
  }
}

@media (max-width: 1024px) {
  .navGeneralFlex {
    gap: 25%;
  }
}

/* Responsive */
@media (min-width: 500px) and (max-width: 768px) {
  #sectionFourAdjust {
    height: 680px;
  }
}

@media (max-width: 768px) {

    #menuLogoDiv {
    padding-left: 16%;
  }

    .navGeneralFlex {
      gap: 6%;
    }
  

  header {
    left: 1px;
  }

  .navGeneralFlex {
    gap: 70%;
  }

  .navButtonFlex {
    display: none;
  }

  #floatingButton {
    display: block;
  }


  #mainSection {
  min-height: 2380px;
  }

  .mainDiv,#sectionFourAdjust {
    flex-direction: column;
      transition: height 0.3s ease;
      overflow: hidden;
  }

  .firstSubMainDiv {
   width: 100%;
  }

  .sectionSecondSubMainDiv {
   width: 100%;
  }

  #sectionThreeImgDivSection {
   display: flex;
   justify-content: flex-start;
  }

 #sectionThreeDivPadding {
   text-align: left;
 }

  #sectionFiveMainDiv {
    width: 100%;
    height: 100%;
    padding: 2%;
    flex-direction: column-reverse;
  }

  #sectionOneMainDiv {
    flex-direction: column-reverse;
   padding-top:0;
  }

  #sectionSixMainDiv {
    display: grid;
    gap: 0;
  }

  #sectionSevenSubContainer {
    flex-direction: column;
  }

  #sectionOneSecondSubMainDiv {
    padding-top: 0;
    width: 100%;
    height: 100%;
  }

  #sectionOneFirstSubMainDiv {
    width: 100%;
    padding-top: 0%;
  }

  #paragraphSectionOne {
    width: 100%;
  }

  #sectionFiveSecondSubMainDiv {
    width: 100%;
    height: 100%;
    padding-left: 0;
    padding-bottom: 2%;
    padding-top: 5%;
  }

  #sectionFiveFirstSubMainDiv {
    padding-top: 20px;
    width: 100%;
  }

  #sectionFiveMainDiv {
    padding: 0;
  }

  #sectionFiveContainerDiv {
    width: 100%;
    padding-right: 50px;
    padding-left: 50px;
  }

  #sectionSixSecondSubMainDiv {
    margin-bottom:10%;
    width: 100%;
    height: 100%;
  }

  #sectionSixFirstSubMainDiv {
    height: 100%;
  }

  #sectionSevenSecondSubMainDiv {
    width: 100%;
  }

  #sectionSevenFirstSubMainDiv {
    width: 100%;
  }

  #sectionSixFirstSubMainDiv .mediaAdaptation {
   max-height:477px;
  }

  #paragraphSectionFive {
    width: 100%;
  }

  #paragraphSectionSix {
    width: 100%;
    height: 100%;
  }

  body {
    width: 100vw;
  }

  #sectionSevenSecondSubMainDiv {
    width: 90%;
  }

  #sectionSevenTitle {
    width: 90%;
  }

  .sectionSevenParagraph {
    width: 90%;
  }

  .SectionSevenSubTitle {
    width: 90%;
  }

  .sectionSevenSubParagraph {
    width: 90%;
  }

  #sectionSevenContainer {
    width: 100%;
    text-align: start;
    background-color: rgba(249, 249, 249, 1);
    gap: 0;
  }

  #sectionFourAdjust {
    margin-bottom: 5%;
  }

  #sectionEightMainDiv {
    margin-top: 25px;
   flex-direction: column;
  }

  #sectionEightMainDiv .firstSubMainDiv {
   width:100%;
  }

  #sectionEightMainDiv .secondSubMainDiv {
   width:100%;
  }

  #sectionEightMainDiv .sectionSecondSubMainDiv {
   width:100%;
  }

  #SectionNineSubSectionsContainer {
    flex-direction:column;
  }

  #sectionNineMainDiv #sectionNineSecondSubMainDiv {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    width:100%;
  }

  #sectionNineMainDiv .firstSubMainDiv {
    width:100%;
  }

  #footerContainer {
   width: 100%;
  }

  #Features {
    scroll-margin-top: 70px;
  }

  #firstVideo {
      width: 100%;
      height: 100%;
  }

  #sectionThreeMainDiv {
   flex-direction: column-reverse;
  }

}

/* safari compatible */
@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  header {
    background-color: rgba(255, 255, 255, 0.9);
  }
}