body {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0px;
  padding: 0px;
  background-color: #EBEFF2;
}






* {
  -webkit-tap-highlight-color: transparent;
}

*::selection {
  background-color: #1884dc34;
}











/* -- Whole Body -- */

.whole-body {
  height: 100%;
  width: 100%;
  display: block;
  position: fixed;
  top: 0px;
  left: 0px;
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: #FFFFFF;
}

.whole-body::-webkit-scrollbar {
  width: 0px;
  display: none;
}

.whole-body::-webkit-scrollbar-thumb {
  width: 10px;
  border-radius: 10px;
  background-color: #d7d7d7;
}

.whole-body::-webkit-scrollbar-thumb:active {
  width: 10px;
  border-radius: 10px;
  background-color: #bfbebe;
}









* {
  outline: 1px solid plum;
  outline: none;
}













.header-blur {
  width: 100%;
  height: 82px;
  display: flex;

  z-index: 999;
  position: fixed;

  filter: blur(60px);
  background-color: #FFFFFF;

}






/* -- Header -- */


header {
  width: calc(100% - 10px);
  height: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;

  z-index: 1000;
  position: fixed;
  /* box-shadow: 0 0 28px 0 #0000001a; */
  
  backdrop-filter: blur(5px) saturate(200%);
  background-color: #ffffffe6;

  transition: 0.5s;
}




/* -- Color Bar -- */

.colorbar {
  width: 100%;
  height: 0px;
  display: flex;
  position: relative;
  background: linear-gradient(45deg, #6F217E, #CC0C56);
}










/* -- Navigation -- */


.nav-area {
  width: 100%;
  height: 100%;
  max-width: 1250px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  /* backdrop-filter: blur(16px);
  background-color: #ffffffa8; */

}



.nav-logo-area {
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
  user-select: none;
}




.nav-logo-area > img {
  height: 46px;
}



.nav-logo-area > h1 {
  font-size: 30px;
  font-family: 'Tilt Warp';
  font-weight: 500;
  color: #373c4a;
  margin: -6px 0px 0px 12px;
}

.nav-logo-area > h1 > span {
  color: #673ab7;
}

.nav-logo-area > h1 > div {
  font-size: 12px;
  font-family: 'Comfortaa';
  font-weight: 700;
  margin: 6px 0px 0px 0px;
}














/* -- Nav Menu -- */

.primary-nav {
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0px 0px 0px 0px;
}







.nav-list {
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;

  list-style-type: none;
}


.nav-list > li {
  display: flex;
  align-items: center;
}


.nav-list > li > a {
  font-size: 13px;
  font-family: 'Poppins';
  font-weight: 500;
  color: #6d707c;
  margin: 0px 0px 0px 50px;
  text-decoration: none;
  cursor: pointer;
  transition: 0.2s;
}


.nav-list > li > a:hover {
  color: #673ab7;
  transition: 0.2s;
}



.nav-list > li > img {
  width: 16px;
  height: 12px;
  margin: 0px 16px 0px 8px;
}









.login {
  width: fit-content;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px 12px 24px;

  border: none;
  outline: none;
  border-radius: 6px;
  background-color: #7d4cd1;

  font-size: 13px;
  font-family: 'Comfortaa';
  font-weight: 500;
  color: #FFFFFF;

  user-select: none;
  cursor: pointer;
  transition: 0.3s;
}











.header-divider {
  width: 100%;
  height: 2px;
  display: flex;
  background-color: #F0F0F5;
}



























/* -- Section 1 -- */

.section1 {
  width: 100%;
  height: calc(100% - 132px);
  max-width: 1250px;
  display: flex;
  justify-content: center;
  justify-self: center;
  margin: 82px 0px 0px 0px;
}





.section1-left {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.section1-left > img {
  width: 400px;
  display: flex;
  margin: 0px 0px 0px 50px;
  user-select: none;
}



.section1-right {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.section1-right > h4 {
  font-size: 14px;
  font-family: 'Comfortaa';
  font-weight: 700;
  color: #7d4cd1;
  margin: 0px 0px 0px 0px;
}

.section1-right > h1 {
  font-size: 40px;
  font-family: 'Tilt Warp';
  font-weight: 500;
  color: #22292F;
  margin: 12px 0px 0px 0px;
}

.section1-right > h5 {
  max-width: 500px;
  font-size: 14px;
  font-family: 'Poppins';
  font-weight: 400;
  color: #667085;
  margin: 32px 0px 0px 0px;
}





.start {
  width: fit-content;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 32px 0px 0px 0px;
  padding: 18px 36px 18px 36px;

  outline: none;
  border-radius: 8px;
  border: 2px solid #673ab7;
  background-color: transparent;
  outline: 5px solid #ffffff;
  
  font-size: 13px;
  font-family: 'Comfortaa';
  font-weight: 700;
  color: #673ab7;

  user-select: none;
  cursor: pointer;
  transition: 0.3s;
}

.start:hover {
  transition: 0.3s;
  border: 2px solid #7d4cd1;
  background-color: #7d4cd1;
  color: #FFFFFF;
  outline: 5px solid #7d4cd121;
}

.start:active {
  transition: 0.2s;
  transform: scale(0.97);
}






















/* -- Scroll Down Arrow -- */


.scroll-down-arrow-section {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  transform: translateY(-20px);
}



.scroll-down-arrow {
  width: 40px;
  height: 30px;

  animation: arrowbounce 0.5s linear infinite alternate;
}


.scroll-down-arrow > path {
  stroke: #b5b8bc;
}




@keyframes arrowbounce {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(5px);
  }
}






























/* -- Section 2 -- */

.section2 {
  width: 100%;
  height: calc(100% - 82px);
  max-width: 1250px;
  display: flex;
  justify-content: center;
  justify-self: center;
  margin: 82px 0px 0px 0px;
}


.section2-left {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.section2-left > h4 {
  font-size: 20px;
  font-family: 'Comfortaa';
  font-weight: 700;
  color: #7d4cd1;
  margin: 0px 0px 0px 0px;
}

.section2-left > h1 {
  font-size: 40px;
  font-family: 'Tilt Warp';
  font-weight: 500;
  color: #22292F;
  margin: 12px 0px 0px 0px;
}

.section2-left > h5 {
  max-width: 500px;
  font-size: 16px;
  font-family: 'Poppins';
  font-weight: 400;
  color: #667085;
  margin: 32px 0px 0px 0px;
}





.section2-right {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


.section2-right > img {
  height: calc(100% - 50px);
  max-height: 600px;
  display: flex;
  transform: translateX(250px);
  user-select: none;
}






.watch-a-video {
  width: fit-content;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 32px 0px 0px 0px;
  padding: 18px 36px 18px 36px;

  outline: none;
  border-radius: 8px;
  border: 2px solid #673ab7;
  background-color: transparent;
  outline: 5px solid #ffffff;
  
  font-size: 13px;
  font-family: 'Comfortaa';
  font-weight: 700;
  color: #673ab7;

  user-select: none;
  cursor: pointer;
  transition: 0.3s;
}

.watch-a-video:hover {
  transition: 0.3s;
  border: 2px solid #7d4cd1;
  background-color: #7d4cd1;
  color: #FFFFFF;
  outline: 5px solid #7d4cd121;
}

.watch-a-video:active {
  transition: 0.2s;
  transform: scale(0.97);
}





























/* -- Section 3 -- */

.section3 {
  width: 100%;
  height: calc(100% - 100px);
  max-width: 1250px;
  display: flex;
  flex-direction: column;
  justify-self: center;
  margin: 82px 0px 0px 0px;
}

.section3 > main {
  width: 100%;
  height: auto;
  display: flex;
}



.section3 > h4 {
  align-self: center;
  font-size: 24px;
  font-family: 'Comfortaa';
  font-weight: 700;
  color: #7d4cd1;
  margin: 16px 0px 0px 0px;
}










.section3-left {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
}




.section3-left > h1 {
  font-size: 30px;
  font-family: 'Tilt Warp';
  font-weight: 500;
  color: #22292F;
  margin: 80px 0px 0px 0px;
}


.section3-left > h5 {
  max-width: 500px;
  font-size: 16px;
  font-family: 'Poppins';
  font-weight: 400;
  color: #667085;
  margin: 16px 0px 0px 0px;
}






.copy {
  width: 20px;
  height: 20px;
  display: flex;
  margin: 22px 0px 0px 0px;

  top: 0px;
  left: 502px;
  z-index: 10;
  position: absolute;

  cursor: pointer;
  transition: 0.2s;
}

.copy:active {
  transition: 0.2s;
  transform: scale(0.9);
}


.code-block {
  position: relative;
  margin: 20px 0px 0px 0px;
}




.code-block pre code {
  width: 500px;
  font-size: 16px;
  white-space: pre-wrap;
  word-break: break-word;
  background-color: #2b303b;
  border-radius: 12px;
}




.url {
  width: auto;
  max-width: 516px;
  display: flex;
  align-items: center;

  font-size: 12px;
  font-family: 'Poppins';
  font-weight: 500;
  color: #22292F;
  margin: 12px 0px 0px 0px;
  padding: 8px 16px 8px 0px;

  border-radius: 12px;
  background-color: #EBEFF2;

  cursor: pointer;
  transition: 0.2s;
}

.url > img {
  width: 16px;
  height: 16px;
  margin: 0px 8px 0px 12px;
}

.url:hover {
  transition: 0.2s;
  background-color: #dee4e8;
}

.url:active {
  transition: 0.2s;
  background-color: #d4dade;
  transform: scale(0.99);
}













.section3-right {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}



.video-container {
  width: 600px;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: 600px;
  background-repeat: no-repeat;
  background-image: url(../assets/images/video-backdrop.svg);
}



.video {
  width: 430px;
  height: 240px;
  border-radius: 16px;
  margin: 0px 0px 0px 0px;
}



























/* -- Section 4 -- */

.section4 {
  width: 100%;
  height: calc(100% - 82px);
  max-width: 1250px;
  display: flex;
  justify-content: center;
  justify-self: center;
  margin: 82px 0px 0px 0px;
}





.section4-left {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.section4-left > img {
  width: auto;
  max-width: 450px;
  display: flex;
  margin: 0px 0px 0px 50px;
  border-radius: 8px;
  box-shadow: 0px 0px 30px #dde4ea;
  user-select: none;
}



.section4-right {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.section4-right > h4 {
  font-size: 14px;
  font-family: 'Comfortaa';
  font-weight: 700;
  color: #7d4cd1;
  margin: -50px 0px 0px 0px;
}

.section4-right > img {
  width: fit-content;
  height: 28px;
  display: flex;
  margin: 16px 0px 0px 0px;
  padding: 12px 16px 12px 16px;

  border-radius: 8px;
  background-color: #41445f;

  user-select: none;
  transition: 0.2s;
}

.section4-right > h5 {
  max-width: 500px;
  font-size: 16px;
  font-family: 'Poppins';
  font-weight: 400;
  color: #667085;
  margin: 16px 0px 0px 0px;
}





.start-for-free {
  width: fit-content;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 32px 0px 0px 0px;
  padding: 18px 36px 18px 36px;

  outline: none;
  border-radius: 8px;
  border: 2px solid #673ab7;
  background-color: transparent;
  outline: 5px solid #ffffff;
  
  font-size: 13px;
  font-family: 'Comfortaa';
  font-weight: 700;
  color: #673ab7;

  user-select: none;
  cursor: pointer;
  transition: 0.3s;
}

.start-for-free:hover {
  transition: 0.3s;
  border: 2px solid #7d4cd1;
  background-color: #7d4cd1;
  color: #FFFFFF;
  outline: 5px solid #7d4cd121;
}

.start-for-free:active {
  transition: 0.2s;
  transform: scale(0.97);
}































/* -- Footer Section -- */

.footer-section {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  /* background: linear-gradient(90deg, #0088FF, #A033FF); */
  background-color: #f0f3f7;
}








.footer-curve {
  width: 100%;
  height: 200px;
  margin: 0px 0px -10px 0px;
  user-select: none;
}





















.footer-color-bar {
  width: 100%;
  height: 10px;
  display: flex;
  background: linear-gradient(45deg, #6F217E, #CC0C56);
}














.primary-footer-container {
  width: 100%;
  height: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #F0F3F7;
}




.primary-footer {
  width: 1200px;
  height: 100%;
  display: flex;
  flex-direction: column;
}





.footer-top {
  width: 100%;
  height: 116px;
  display: flex;
  align-items: center;
}






.connect-with-us {
  font-size: 16px;
  font-family: 'Poppins';
  font-weight: 500;
  color: #202124;
  margin: 0px 0px 0px 40px;
}




.social-list {
  width: 400px;
  height: 28px;
  display: flex;
  justify-content: space-between;
  list-style-type: none;
}


.social-icon {
  width: 24px;
  height: 24px;
  cursor: pointer;
  transition: 0.3s;
}

.social-icon:hover {
  transition: 0.3s;
  transform: scale(1.2);
}


















.footer-divider {
  width: 100%;
  height: 1px;
  background-color: #DADCE0;
}















.footer-bottom {
  width: 100%;
  height: 116px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}





.footer-brand {
  width: 370px;
  height: 100%;
  display: flex;
  align-items: center;
}



.footer-logo {
  width: 50px;
  height: 50px;
  margin: 0px 0px 0px 28px;
  user-select: none;
}



.footer-company-name {
  font-size: 18px;
  font-family: 'Tilt Warp';
  font-weight: 500;
  color: #373c4a;
  margin: -6px 0px 0px 12px;
  user-select: none;
}

.footer-company-name > span {
  color: #673ab7;
}

.footer-company-name > div {
  font-size: 14px;
  font-family: 'Comfortaa';
  font-weight: 700;
  margin: 6px 0px 0px 0px;
  user-select: text;
}









.footer-list {
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;

  list-style-type: none;
}


.footer-list > li > a {
  font-size: 14px;
  font-family: 'Poppins';
  font-weight: 500;
  color: #9499a9;
  text-decoration: none;
}


.footer-list > li > a:hover {
  color: #1884dc;
}


.footer-home {
  margin: 0px 48px 0px 0px;
}

.footer-services {
  margin: 0px 48px 0px 0px;
}

.footer-privacy-policy {
  margin: 0px 48px 0px 0px;
}

.footer-about-us {
  margin: 0px 48px 0px 0px;
}

.footer-careers-us {
  margin: 0px 48px 0px 0px;
}

.footer-contact-us {
  margin: 0px 0px 0px 0px;
}










/* -- Copyright -- */


.copyright {
  align-self: center;
  font-size: 14px;
  font-family: 'Poppins';
  font-weight: 400;
  color: #9499a9;
  margin: 32px 0px 0px 0px;
}



.company-address {
  display: flex;
  align-items: center;
  align-self: center;
  font-size: 14px;
  font-family: 'Poppins';
  font-weight: 400;
  color: #9499a9;
  margin: 15px 0px 0px 0px;
}

.heart {
  width: 15px;
  height: 15px;
  margin: 0px 6px 0px 6px;
}

.flag {
  width: 20px;
  margin: 0px 0px 0px 4px;
}