@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Sora:wght@100..800&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Bai Jamjuree", sans-serif;
  }
  
  .mainContainer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* padding: 20px 0; */
    overflow-x: hidden;
    /* background-color: #4285f4; */
  }

  .headerContainer {
    background-color: #F9F9F9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .headerBox {
    background: linear-gradient(to bottom, #8D8DF5, #8B3CC0);
    margin: 15px 15px 300px 15px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 97%;
    min-width: 1200px;
    max-width: 1600px;
    height: 860px;
    position: relative;
    overflow: visible;
  }

  .headerSection {
    background-color: #F9F9F9;
    width: 100%; 
   }
 


  /* ------------ Menu Section ------------ */

  .menuSection {
    z-index: 10;
    width: 100%;
    padding: 30px 40px;
  }
  
  .menuContainer {
    /* background-color: aqua; */


    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

  }

  .menuContainer img {
    width: 195px;
  }
  
  .menuBox {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* background-color: #ff6262; */
  }
  
  .menuItem {
    font-size: 16px;
    padding: 13px;
    margin: 0 5px;
    color: #fff;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    cursor: pointer;
  }
  
  .menuItem:hover {
    text-decoration: underline;
  }
  
  .ctaMenu {
    /* background-color: #fff; */
    text-align: center;
    padding: 13px 24px;
    margin-left: 40px;
    /* font-size: 14px; */
    border-radius: 10px;
    border: 1px solid #fff;
    /* font-family: "Sora", sans-serif; */
    font-optical-sizing: auto;
    /* font-weight: 500; */
    font-style: normal;
    color: #fff;
    cursor: pointer;
  }
  
  .ctaMenu:hover {
    background-color: #fff;
    color: #8D8DF5;
  }


  /* ------------ Hero Section ------------ */

  .heroSection {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
 
  .heroTitle { 
    font-size: 64px;
    color: #fff;
    font-weight: 800;
    text-align: center;
    width: 700px;
    line-height: 1.1;
    padding: 10px 0 0 0;
  }

  .heroSubTitle { 
    font-size: 24px;
    color: #fff;
    font-weight: 200;
    text-align: center;
    width: 750px;
    line-height: 1.25;
    padding: 30px 0 40px 0;
  }

  .heroCta { 
    font-size: 24px;
    background-color: #fff;
    color: #3C3A3A;
    font-weight: 300;
    text-align: center;
    padding: 20px 75px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .heroCta:hover {
    background-color: #8D8DF5;
    color: #fff;
  }

  .dashWrapper {
    z-index: 2;
    position: absolute;
    top: 68%;
  }

  .dashWrapper img {
    width: 880px;
  }


  /*  */
    
  .bookDemoSection {
    width: 100%;
    background: radial-gradient(circle at center, #9658C0, #8B3CC0);
    padding: 70px 0;
    margin: 0 0 27px 0;
  }
  
  .bookDemoContainer {
    display: flex;
    align-items: start;
    justify-content: center;
  }
  
  .demoContent {
    width: 610px;
  }
  
  .demoTitle {
    width: 500px;
    margin-bottom: 12px;
    font-family: "Sora", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 64px;
    color: #fff;
  }
  
  .demoSubTitle {
    width: 570px;
    margin-bottom: 40px;
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-size: 32px;
    color: #fff;
  }

  .demoBulletsTitle {
    width: 570px;
    margin-bottom: 15px;
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-size: 24px;
    color: #fff;
  }
  
  .dBullet {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
  }
  
  .dBullet p {
    margin-left: 15px;
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    font-size: 16px;
    color: #fff;
  }
  .dBullet img {
    width: 15px;
  }
  
  .demoForm {
    margin-left: 20px;
    padding: 40px 40px;
    width: 430px;
    background-color: #eff3f5;
    border-radius: 20px;
  }
  
  input,
  label {
    font-family: "Noto Sans", serif;
    font-optical-sizing: auto;
    font-style: normal;
  }
  
  label {
    color: #515151;
    font-size: 16px;
  }
  
  input[type="text"],
  input[type="email"],
  input[type="tel"] {
    width: 100%;
    padding: 15px 20px;
    margin: 10px 0;
    border: 1px solid #f1f1f1;
    border-radius: 20px;
    font-size: 15px;
    color: #bebebf;
    font-weight: 300;
  }
  
  input[type="submit"] {
    width: 100%;
    padding: 15px 15px;
    margin-top: 10px;
    border: none;
    border-radius: 20px;
    background-color: #8B3CC0;
    color: white;
    font-size: 20px;
    cursor: pointer;
  }
  input[type="submit"]:hover {
    background-color: #762fa5;
  }


  /* ------------ Footer Section ------------ */

  .footerSection {
    padding: 20px;
    margin-bottom: 20px;
    width: 100%;
  }
  .footerContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: "Ubuntu", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 12px;
  }
  
  .footerRight {
    display: flex;
    align-items: center;
  }
  
  .footerRight img {
    width: 26px;
    margin-right: 10px;
  }
  
  .footerRight a {
    margin-left: 10px;
    color: #000;
  }
  
  .footerRight a:visited {
    color: #000;
  }


  /* ------------ Why Section ------------ */

  .whySection {
    width: 100%;
    background-color: #F9F9F9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 70px 60px 100px 60px;
  }

  .whyTitle {
    font-size: 48px;
    width: 700px;
    font-weight: 700;
    text-align: center;
  }

  .whySubTitle {
    font-size: 24px;
    font-weight: 200;
    text-align: center;
    width: 520px;
    margin: 15px 0 60px 0;
  }

  .whyBox {
    width: 100%;
    max-width: 1200px;
    min-width: 1200px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
  }

  .whyItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .whyItemTitle {
    font-size: 20px;
    width: 200px;
    font-weight: 600;
    text-align: center;
    margin: 30px 0 20px 0;
  }

  .whyItemSubTitle {
    font-size: 16px;
    width: 200px;   
    font-weight: 200;
    text-align: center;
  } 

  .whyItem img {
    width: 165px;
  }

  /* ------------ Features Section ------------ */

  .featuresSection {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 60px 100px 60px;
  }

  .featuresTitle {
    font-size: 48px;
    width: 700px;
    font-weight: 700;
    text-align: center;
  }

  .featuresSubTitle {
    font-size: 24px;
    font-weight: 200;
    text-align: center;
    width: 520px;
    margin: 15px 0 60px 0;
  }

  .featuresBox {
    width: 100%;
    max-width: 1200px;
    min-width: 1200px;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;
  }

  .fLeft {
    width: 55%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .fLeft img {
    width: 465px;
  } 

  .fRight {
    width: 45%;
  }

  .featuresRightBox {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: left;
    margin-bottom: 10px;
  }

  .featuresRightTitle {
    font-size: 24px;
    width: 200px;
    font-weight: 600;
    text-align: left;
    margin: 30px 0 10px 0;
  }

  .featuresRightItem {
    display: flex;
    align-items: center;
    font-size: 16px;
    width: 400px;   
    font-weight: 300;
    text-align: left;
    margin-bottom: 10px;
  } 

  .featuresRightItem img {
    width: 7px;
    margin: 0 10px 0 0;
    /* padding-top: -5px; */
  }