From 9ae65aed4477e428d2fe76cb8720f6e4d06135c8 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Fri, 19 Apr 2024 20:04:43 -0500
Subject: [PATCH] more

---
 public/index.html                |    4 +
 src/App.js                       |    3 +-
 src/Components/Home/HomePageB.js |  139 ++--
 src/styles/homepage-b.scss       | 1335 ++++++++++++++++++++++++++++++
 4 files changed, 1407 insertions(+), 74 deletions(-)
 create mode 100644 src/styles/homepage-b.scss

diff --git a/public/index.html b/public/index.html
index acbee2d..313e14e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -16,6 +16,10 @@
       name="keywords"
       content="Attorney AI Lawyer AI Legal Drafting Discovery Requests Discovery Responses Interrogatories Requests For Production Requests For Admissions"
     />
+    <script
+      type="text/javascript"
+      src="data:text/javascript;base64,LyogQWxsaSBBSSB3aWRnZXQgZm9yIHd3dy5ub3ZvZHJhZnQuYWkgKi8KKGZ1bmN0aW9uICh3LGQscyxvLGYsanMsZmpzKSB7d1snQWxsaUpTV2lkZ2V0J109bzt3W29dID0gd1tvXSB8fCBmdW5jdGlvbiAoKSB7ICh3W29dLnEgPSB3W29dLnEgfHwgW10pLnB1c2goYXJndW1lbnRzKSB9O2pzID0gZC5jcmVhdGVFbGVtZW50KHMpLCBmanMgPSBkLmdldEVsZW1lbnRzQnlUYWdOYW1lKHMpWzBdO2pzLmlkID0gbzsganMuc3JjID0gZjsganMuYXN5bmMgPSAxOyBmanMucGFyZW50Tm9kZS5pbnNlcnRCZWZvcmUoanMsIGZqcyk7fSh3aW5kb3csIGRvY3VtZW50LCAnc2NyaXB0JywgJ2FsbGknLCAnaHR0cHM6Ly9zdGF0aWMuYWxsaWFpLmNvbS93aWRnZXQvdjEuanMnKSk7YWxsaSgnaW5pdCcsICdzaXRlX3hqOEs2bWJmeTk1VmdGbW4nKTthbGxpKCdvcHRpbWl6ZScsICdhbGwnKTs="
+    ></script>
     <script
       data-goatcounter="https://novodraft.goatcounter.com/count"
       async
diff --git a/src/App.js b/src/App.js
index f1d6e56..7da560c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,6 +10,7 @@ import PasswordReset from "./Components/Account/PasswordReset";
 import DocumentListPage from "./Components/Document/DocumentListPage";
 import DocEditPage from "./Components/Document/DocEditPage";
 import Homepage from "./Components/Home/HomePage";
+import HomepageB from "./Components/Home/HomePageB";
 import Dashboard from "./Components/Dashboard/Dashboard";
 import OptoutPage from "./Components/OptoutPage";
 import RequestEditPage from "./Components/Document/ReqEditPage";
@@ -46,7 +47,7 @@ function App() {
       <Navbar />
       <div className="main-container">
         <Routes>
-          <Route exact path="/" element={<Homepage />} />
+          <Route exact path="/" element={<HomepageB />} />
           <Route exact path="/login" element={<Login />} />
           <Route exact path="/optout" element={<OptoutPage />} />
           <Route
diff --git a/src/Components/Home/HomePageB.js b/src/Components/Home/HomePageB.js
index 05ebfce..5bff66f 100644
--- a/src/Components/Home/HomePageB.js
+++ b/src/Components/Home/HomePageB.js
@@ -8,10 +8,10 @@ import { useNavigate } from "react-router-dom";
 import ConfirmModal from "../Modals/ConfirmModal";
 import { createUserWithEmailAndPassword } from "firebase/auth";
 import { stateDataValues } from "../../Constants/Fields/SignupFields";
-import "../../styles/homepage.scss";
+import "../../styles/homepage-b.scss";
 import LoadingSpinner from "../../pageElements/LoadingSpinner";
 
-const HomePage = () => {
+const HomePageB = () => {
   const navigate = useNavigate();
   const [showPromoModal, setShowPromoModal] = useState(false);
   const [isBusy, setIsBusy] = useState(false);
@@ -258,63 +258,7 @@ const HomePage = () => {
 
   const homeContent = (
     <div className="homepage-container">
-      <section
-        className="section-1"
-        style={{
-          backgroundImage: `url(https://imagedelivery.net/OvFc3s8IYmBw7-_bogeTLg/ee5222a0-7480-43ba-0f14-0ea482f31300/public)`,
-          backgroundSize: "cover",
-        }}
-      >
-        <div className="first-section-subcontainer">
-          <div className="row upper-row-one">
-            <div className="col-md-12 mobile-col-up">
-              <div className="heading-one-container">
-                <h1 className="heading-1">Novodraft: Legal AI</h1>
-                <h1 className="heading-1-mobile">Novodraft</h1>
-                <h1 className="heading-2-mobile">AI-Assisted Legal Drafting</h1>
-                <h1 className="heading-2">
-                  Draft documents faster <i>and </i> smarter
-                </h1>
-              </div>
-              <div className="mobile-lower-header-1">
-                <div className="mobile-lower-header-top">
-                  <div className="mobile-sw-deck">Discovery requests</div>
-                  <div className="mobile-sw-deck"> dramatically fast</div>
-                  <div className="mobile-sw-reptwo">
-                    <div className="ex-arca-two">Draft responses to</div>
-                    <div className="ex-arca-two">demands in minutes</div>
-                  </div>
-                </div>
-                <div className="mobile-lower-header-bottom">
-                  <div className="mobile-lower-header-bottom-up"></div>
-                  <div className="mobile-lower-header-bottom-down">
-                    <Button
-                      className="primary-button homepage-button"
-                      labelText="Try It For Free"
-                      onClick={handleTryItButton}
-                    />
-                  </div>
-                </div>
-              </div>
-              <p className="text-block-1">
-                Discovery requests dramatically fast – responses ready in
-                minutes.
-              </p>
-              <p className="text-block-two">
-                Reclaim hours every week. Spend more time growing your practice,
-                or just get home in time for dinner.
-              </p>
-              <div className="try-it-button-box">
-                <Button
-                  className="primary-button homepage-button"
-                  labelText="Try It For Free"
-                  onClick={handleTryItButton}
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
+      <section className="section-one"></section>
       {/* Section 2 */}
       <section className="section-2">
         <div className="home-row">
@@ -335,30 +279,28 @@ const HomePage = () => {
           </div>
           <div className="home-col-50">
             <div className="pad-2">
-              <h2 className="heading-2">Made by Attorneys, for Attorneys.</h2>
+              <h2 className="section-three-header">
+                Made by Attorneys, for Attorneys.
+              </h2>
               <div className="text-block-2-box">
-                <p className="text-block-2">
-                  Legal tech developed by people that understand what you need.
+                <p className="section-three-wubhead">
+                  Tech developed by litigators that understand your needs.
                 </p>
               </div>
-
               <p className="section-two-body">
                 Novodraft understands the demands on your time. For example,
-                that discovery request on your desk. With a few clicks, and
-                Novodraft's AI assistant on the task, you can draft a
-                ready-to-serve response in minutes. It's as easy as uploading a
-                .pdf file.
+                that discovery request on your desk. With as few as three
+                clicks, you can draft a ready-to-serve response in minutes. It's
+                as easy as uploading a .pdf file.
               </p>
               <p className="section-two-body">
                 Novodraft cuts through a mire of rote tasks, but does much more
                 than automate.
               </p>
               <p className="section-two-body">
-                Intellidraft AI technology powers persuasive arguments and
-                boosts bland, boilerplate objections. Configurable for level of
-                authoritative citation and for infering factual context from
-                pleadings and briefs. Use it to augment your drafting as much or
-                as little as you prefer.
+                Intellidraft AI technology powers persuasive arguments and makes
+                otherwise boilerplate objections compelling. Use it to augment
+                your drafting as much or as little as you prefer.
               </p>
               <div
                 className="home-link-box"
@@ -535,4 +477,55 @@ const HomePage = () => {
   );
 };
 
-export default HomePage;
+export default HomePageB;
+
+/*
+        <div className="first-section-subcontainer">
+          <div className="row upper-row-one">
+            <div className="col-md-12 mobile-col-up">
+              <div className="heading-one-container">
+                <h1 className="heading-1">Novodraft: Legal AI</h1>
+                <h1 className="heading-1-mobile">Novodraft</h1>
+                <h1 className="heading-2-mobile">AI-Assisted Legal Drafting</h1>
+                <h1 className="heading-2">
+                  Draft documents faster <i>and </i> smarter
+                </h1>
+              </div>
+              <div className="mobile-lower-header-1">
+                <div className="mobile-lower-header-top">
+                  <div className="mobile-sw-deck">Discovery requests</div>
+                  <div className="mobile-sw-deck"> dramatically fast</div>
+                  <div className="mobile-sw-reptwo">
+                    <div className="ex-arca-two">Draft responses to</div>
+                    <div className="ex-arca-two">demands in minutes</div>
+                  </div>
+                </div>
+                <div className="mobile-lower-header-bottom">
+                  <div className="mobile-lower-header-bottom-up"></div>
+                  <div className="mobile-lower-header-bottom-down">
+                    <Button
+                      className="primary-button homepage-button"
+                      labelText="Try It For Free"
+                      onClick={handleTryItButton}
+                    />
+                  </div>
+                </div>
+              </div>
+              <p className="text-block-1">
+                Discovery requests dramatically fast – responses ready in
+                minutes.
+              </p>
+              <p className="text-block-two">
+                Reclaim hours every week. Spend more time growing your practice,
+                or just get home in time for dinner.
+              </p>
+              <div className="try-it-button-box">
+                <Button
+                  className="primary-button homepage-button"
+                  labelText="Try It For Free"
+                  onClick={handleTryItButton}
+                />
+              </div>
+            </div>
+          </div>
+        */
diff --git a/src/styles/homepage-b.scss b/src/styles/homepage-b.scss
new file mode 100644
index 0000000..ad62d07
--- /dev/null
+++ b/src/styles/homepage-b.scss
@@ -0,0 +1,1335 @@
+.homepage-container {
+  font-family: Roboto;
+}
+
+.home-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.home-col-50 {
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+}
+
+.pad-2 {
+  padding: 2rem 0.5rem;
+}
+
+a {
+  font-family: Roboto;
+}
+
+.card-image-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #fff;
+}
+
+.card-image {
+  height: 90%;
+  width: 90%;
+}
+
+ul.navbar-nav {
+  margin-left: auto;
+}
+
+.homepage-button {
+  color: white;
+  z-index: 2;
+  border-radius: 0px !important;
+  filter: drop-shadow(4px 3px #b5a08e);
+}
+
+.homepage-button:hover {
+  filter: drop-shadow(0px 0px #b5a08e);
+}
+
+section.section-one {
+  height: 680px;
+  display: flex;
+}
+
+.first-section-subcontainer {
+  padding-top: 35px;
+  padding-left: 20px;
+}
+
+.text-block-1 {
+  padding: 20px 0px;
+}
+
+.section-2 {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  padding-top: 2.2rem;
+}
+
+.section-two-body {
+  font-size: 15px;
+  margin: 10px 0px !important;
+}
+
+.home-link-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  float: right;
+  padding-right: 15px;
+  margin-right: 15px;
+}
+
+.explore-link {
+  color: blue;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.card-link-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  float: right;
+  padding-right: 8px;
+  color: #4675c3;
+  a {
+    font-size: 18px;
+    font-weight: 600;
+    cursor: pointer;
+    color: #4675c3;
+  }
+  a:hover {
+    text-decoration: underline;
+  }
+}
+
+.text-block-two {
+  font-family: Roboto;
+  color: #fff;
+  padding: 20px 0px 10px 0px;
+  font-size: 19px;
+  font-weight: 300;
+  max-width: 380px;
+  line-height: 1.5;
+  text-align: justify;
+  margin-top: -8px;
+}
+
+p.text-block-1 {
+  color: #fff;
+  font-family: Roboto;
+  font-size: 26px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: 1.4;
+  width: 525px;
+  margin-top: 24px;
+}
+
+.try-it-button-box {
+  margin: 20px 0px;
+  padding: 20px 0px 0px 0px;
+}
+
+.try-it-button-box > button {
+  font-size: 1.15rem;
+  width: 200px;
+  height: 55px;
+}
+
+button.button-1 {
+  width: 225.459px;
+  height: 65.234px;
+  /* flex-shrink: 0; */
+  background: #4675c3;
+  color: #fff;
+  text-align: center;
+  font-family: Roboto;
+  font-size: 18.311px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  text-transform: capitalize;
+  border: 1px solid #fff;
+}
+
+img.img-2 {
+  width: 100%;
+}
+
+p.text-block-2 {
+  font-family: Roboto;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 30px; /* 125% */
+  letter-spacing: 0.369px;
+  margin-bottom: 6px !important;
+}
+
+.heading-6-mobile {
+  display: none;
+  margin-bottom: 0.9rem;
+}
+
+.home-text-center {
+  width: 1080px !important;
+}
+
+a.link {
+  font-family: Roboto;
+  color: #4675c3;
+  font-size: 19.677px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  margin: 8px 0px;
+}
+
+a.link:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+img.img-1 {
+  padding-left: 13px;
+  color: blue;
+}
+
+.section-3 {
+  min-height: 680px;
+  font-family: Roboto;
+  background-color: var(--background-blue);
+  margin: 20px 0px 30px 0px;
+}
+
+h2.heading-3 {
+  color: #757575;
+  text-align: center;
+  font-family: Roboto;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 36px; /* 156.25% */
+  letter-spacing: 0.369px;
+  text-transform: capitalize;
+}
+
+p.text-block-2.text-center {
+  color: #90a3b4;
+  text-align: center;
+  font-family: Roboto;
+  font-size: 17px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 30px; /* 125% */
+  letter-spacing: 0.369px;
+}
+
+p.text-block-2.text-center {
+  width: 1030px;
+}
+
+.card-body {
+  background: #fff;
+  box-shadow: 25px 0 20px -20px rgba(199, 199, 208, 0.271);
+  margin-top: -17px;
+}
+
+.section-three-wubhead {
+  margin-top: 6px;
+  padding-left: 2px;
+  font-size: 1.12rem;
+}
+.card-upper-box {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.card-img,
+.card-img-bottom {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+p.card-texts {
+  color: #90a3b4;
+  font-family: Roboto;
+  font-size: 0.98rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 23px; /* 125% */
+  letter-spacing: 0.369px;
+  padding: 0 0 8px 0px;
+  text-align: justify;
+  text-justify: auto;
+}
+
+.foo-card-title {
+  font-family: Roboto;
+  font-size: 1.7rem;
+  font-weight: 400;
+  margin-top: 2px;
+  letter-spacing: -0.007rem;
+  color: #1f74a7;
+}
+
+img.card-img {
+  padding-bottom: 18px;
+  background: white;
+}
+
+p.card-title {
+  color: #757575;
+  font-family: Roboto;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 38px; /* 156.25% */
+  letter-spacing: 0.369px;
+  text-transform: capitalize;
+  padding-top: 30px;
+}
+
+.d-flex.div-block-2 > .d-flex {
+  width: 50%;
+  align-items: center;
+  gap: 10px;
+}
+
+.d-flex.div-block-2 {
+  flex-wrap: wrap;
+  gap: 17px 0;
+  justify-content: center;
+  align-items: center;
+  padding: 43px 0;
+}
+
+.home-card-text-box {
+  padding: 2px 10px 0px 10px;
+  width: 270px;
+  height: 150px;
+}
+
+.home-card-divider {
+  width: 80%;
+
+  margin-top: -10px;
+  margin-bottom: 4px;
+}
+
+p.text-block-3 {
+  color: #90a3b4;
+  font-family: Roboto;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 30px; /* 125% */
+  letter-spacing: 0.369px;
+  padding-left: 13px;
+  margin: 0;
+  padding: 18px 0;
+}
+
+p.text-block-2.text-center {
+  /* background: aqua; */
+  padding: 0;
+  width: 76%;
+  margin: auto;
+  padding-bottom: 50px;
+}
+
+.card-section-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  margin: 0px 10px;
+  padding: 0px 10px;
+}
+
+h4.heading-4 {
+  color: #7ea4d8;
+  font-family: DM Sans;
+  font-size: 18.615px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 27.221px; /* 144.444% */
+  letter-spacing: 0.18px;
+}
+
+section.section-2.pt-5 {
+  padding-bottom: 54px;
+}
+
+h3.heading-5 {
+  color: #757575;
+  font-family: Roboto;
+  font-size: 28px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 41px; /* 156.25% */
+  letter-spacing: 0.369px;
+  text-transform: capitalize;
+  width: 100%;
+}
+
+.d-flex.star-flex {
+  align-items: center;
+  gap: 4px;
+  padding-left: 14px;
+}
+
+p.text-block-4 {
+  color: #90a3b4;
+  font-family: Roboto;
+  font-size: 20px;
+  font-style: italic;
+  font-weight: 300;
+  line-height: 26px; /* 125% */
+  letter-spacing: 0.369px;
+  padding-left: 60px;
+}
+
+.d-flex.div-block-1 {
+  align-items: center;
+  gap: 16px;
+  padding-left: 57px;
+}
+
+.section-three-header-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0.5rem 0rem;
+  padding: 1rem;
+}
+
+.section-three-header {
+  font-size: 30px;
+  font-family: Roboto;
+  font-weight: 400;
+  letter-spacing: 0.09px;
+  align-items: center;
+  justify-content: center;
+  margin: 12px auto 0px auto;
+  color: #757575;
+  letter-spacing: 0.13rem;
+}
+
+.section-three-subhead {
+  font-size: 20px;
+  font-weight: 400;
+  margin: 0.5rem 0rem;
+}
+
+h4.heading-5 {
+  color: #4675c3;
+  font-family: DM Sans;
+  font-size: 22.586px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 27.103px; /* 120% */
+  letter-spacing: 0.226px;
+}
+
+p.text-block-5 {
+  margin: 0;
+  color: #90a3b4;
+  font-family: DM Sans;
+  font-size: 18.069px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 31.621px; /* 175% */
+}
+
+h4.heading-6 {
+  color: #fff;
+  font-family: Roboto;
+  font-size: 28px;
+  font-weight: 400;
+  line-height: 38px; /* 156.25% */
+  letter-spacing: 1.369px;
+  text-transform: capitalize;
+  margin-bottom: 18px;
+  margin-top: 6px;
+  color: #006aa9;
+}
+
+h6.heading-7 {
+  color: #fff;
+  font-family: DM Sans;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+  letter-spacing: 0.339px;
+}
+
+.join-heading {
+  font-family: Roboto;
+  color: #fff;
+  font-size: 1.1rem;
+  font-weight: 400;
+  width: 520px;
+  color: #006aa9;
+  margin-bottom: 0.35rem !important;
+}
+
+.d-flex.div-block-3 {
+  align-items: center;
+  gap: 20px;
+}
+
+.d-flex.div-block-3 a {
+  text-decoration: none;
+  color: #fff;
+  font-family: DM Sans;
+  font-size: 15.836px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 36.197px; /* 228.571% */
+  letter-spacing: 0.339px;
+  text-decoration-line: underline;
+}
+
+.col-md-6.d-flex {
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+button.button-2 {
+  width: 375px;
+  height: 65px;
+  filter: drop-shadow(6px 6px #b5a08e);
+  background: #4675c3;
+  border: 0;
+  color: #fff;
+  text-align: center;
+  font-family: Roboto;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: normal;
+  margin: 6px;
+  text-transform: capitalize;
+}
+
+.home-test-container {
+  /* height: 407.213px; */
+  /* flex-shrink: 0; */
+  width: 90%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding: 66px 63px;
+  background-position: center;
+  //background-size: cover;
+  background-color: #ffb571;
+  background-repeat: no-repeat;
+  opacity: 0.9;
+}
+
+.heading-6-mobile {
+  display: none;
+}
+
+.home-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 300px;
+  height: 480px;
+  background-color: #fff;
+  box-shadow: 0 60px 80px rgba(0, 0, 0, 0.6), 0 45px 26px rgba(0, 0, 0, 0.14);
+}
+
+.home-card-title {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+footer.footer {
+  background: #4675c3;
+  padding: 78px 0 9px 0px;
+}
+
+p.text-block-6 {
+  color: #fff;
+  font-family: DM Sans;
+  font-size: 21.054px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 36.844px; /* 175% */
+}
+
+.d-flex.iconFlex {
+  gap: 17px;
+}
+
+h3.heading-8 {
+  color: #fff;
+  font-family: DM Sans;
+  font-size: 23.686px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  padding-bottom: 18px;
+}
+
+a.footer-Link {
+  color: #fff;
+  font-family: DM Sans;
+  font-size: 21.054px;
+  font-style: normal;
+  /* font-weight: 400; */
+  line-height: normal;
+  padding-bottom: 23px;
+  margin-bottom: 0;
+  display: block;
+  text-decoration: none;
+}
+
+hr {
+  margin: 3rem 0;
+  color: inherit;
+  border: 0;
+  border-top: 3px #8caada solid;
+  opacity: 0.25;
+  background: aqua;
+}
+
+p.footerCopyRight {
+  color: #fff;
+  text-align: center;
+  font-family: DM Sans;
+  font-size: 21.054px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+
+a.nav-link.button-1 {
+  background: #4675c3;
+  padding: 13px 0;
+  width: 87px;
+  text-align: center;
+  width: 125px;
+  height: 50px;
+  flex-shrink: 0;
+  color: #fff;
+  text-align: center;
+  font-family: Roboto;
+  font-size: 18.311px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  text-transform: capitalize;
+  margin-left: 38px;
+}
+
+section.section-5.py-5 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+}
+
+li.nav-item {
+  padding: 0 19px;
+}
+
+@media only screen and (min-width: 498px) {
+  .mobile-lower-header-1 {
+    display: none;
+  }
+
+  .mobile-lower-header-top {
+    display: none;
+  }
+  .mobile-lower-header-bottom {
+    display: none;
+  }
+  .mobile-lower-header-bottom-up {
+    display: none;
+  }
+  .mobile-lower-header-bottom-down {
+    display: none;
+  }
+  .join-heading-mobile {
+    display: none;
+  }
+  .section-three-header-mobile {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 1100px) {
+  .join-heading {
+    width: 370px;
+  }
+}
+
+@media only screen and (max-width: 498px) {
+  .homepage-container {
+    width: 392px;
+  }
+
+  ul.navbar-nav {
+    margin-left: auto;
+  }
+
+  .mobile-lower-header-top {
+    height: 60%;
+
+    padding-top: 12px;
+    color: #fff;
+  }
+
+  .mobile-sw-deck {
+    color: #fff;
+    font-size: 16px;
+    font-family: Roboto;
+    font-weight: 400;
+    letter-spacing: 0.01rem;
+    margin-top: -4px;
+  }
+
+  .mobile-sw-dtrk {
+    color: #fff;
+    font-size: 16px;
+    font-family: Roboto;
+    font-weight: 400;
+    letter-spacing: 0.01rem;
+    margin-top: 58px;
+  }
+
+  .ex-arca-two {
+    color: white;
+    line-height: 1.2;
+  }
+  .mobile-sw-reptwo {
+    height: 140px;
+    padding-top: 51px;
+  }
+
+  .mobile-lower-header-bottom {
+    height: 40%;
+  }
+
+  .mobile-lower-header-bottom-up {
+    height: 50%;
+  }
+
+  .mobile-lower-header-bottom-bottom {
+    height: 50%;
+  }
+  .logo-container {
+    margin-left: -24px;
+  }
+
+  .first-section-subcontainer {
+    width: 100%;
+    padding-top: 4px;
+    padding-left: 0px;
+  }
+
+  .try-it-button-box {
+    align-items: end;
+    margin-top: -6px;
+    display: none;
+  }
+
+  .try-it-button-box > button {
+    width: 140px;
+    margin-left: 10px;
+  }
+
+  .mobile-lower-header-1 {
+    width: 60%;
+    height: 260px;
+  }
+
+  .text-block-1 {
+    visibility: none;
+  }
+
+  .text-block-two {
+    display: none;
+  }
+
+  .section-one {
+    max-height: 480px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: auto;
+    margin-left: auto;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    margin-top: 28px;
+  }
+
+  .section-2 {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding-top: 0.6rem;
+  }
+
+  .home-row {
+    flex-direction: column;
+  }
+
+  p.text-block-1 {
+    display: none;
+  }
+
+  .home-col-50 {
+    width: 100%;
+  }
+
+  .pad-2 {
+    padding-top: 0rem;
+    padding-bottom: 0rem;
+  }
+
+  button.button-1 {
+    width: 151.459px;
+    height: 38.234px;
+    /* flex-shrink: 0; */
+    background: #4675c3;
+    color: #fff;
+    text-align: center;
+    font-family: Roboto;
+    font-size: 14.311px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    text-transform: capitalize;
+    border: 0;
+    margin-bottom: 18px;
+  }
+
+  img.img-2 {
+    height: 100%;
+    flex-shrink: 0;
+    width: 101%;
+  }
+
+  .text-block-2-box {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin: auto;
+    align-items: center;
+  }
+
+  p.text-block-2 {
+    color: #000;
+    font-family: Roboto;
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 25px; /* 125% */
+    letter-spacing: 0.369px;
+  }
+
+  .section-two-body {
+    color: #78838d;
+    font-size: 0.9rem;
+    text-align: justify;
+  }
+
+  a.link {
+    color: #4675c3;
+    font-family: Roboto;
+    font-size: 13.677px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  .card-section-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  img.img-1 {
+    padding-left: 6px;
+    width: 27px;
+  }
+
+  .home-card {
+    margin-bottom: 28px;
+  }
+
+  section.section-3 {
+    min-height: 680px;
+    background: #eef4f5;
+  }
+
+  .section-three-header {
+    display: none;
+  }
+
+  .section-three-header-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0.5rem 0rem;
+    padding: 0.3rem;
+  }
+
+  .section-three-header-mobile {
+    font-size: 20px;
+    font-family: Roboto;
+    font-weight: 400;
+    letter-spacing: 0.09px;
+    align-items: center;
+    justify-content: center;
+    margin: 12px auto 12px auto;
+    color: #757575;
+    letter-spacing: 0.13rem;
+  }
+
+  .section-three-subhead {
+    display: none;
+  }
+
+  .home-card-text-box {
+    width: 100%;
+    border: none;
+  }
+
+  .home-link-box {
+    margin-right: 0px;
+  }
+
+  h2.heading-3 {
+    color: #757575;
+    text-align: center;
+    font-family: Roboto;
+    font-size: 17px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 27px; /* 156.25% */
+    letter-spacing: 0.369px;
+    text-transform: capitalize;
+  }
+
+  p.text-block-2.text-center {
+    color: #90a3b4;
+    text-align: center;
+    font-family: Roboto;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 125% */
+    letter-spacing: 0.369px;
+  }
+
+  p.text-block-2.text-center {
+    width: 1030px;
+  }
+
+  .card-body {
+    background: #fff;
+    box-shadow: none;
+    padding: 16px 18px;
+    width: 270px;
+  }
+
+  .card-img,
+  .card-img-bottom {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  p.card-texts {
+    color: #90a3b4;
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: 400;
+    letter-spacing: 0.369px;
+    font-size: 0.9rem;
+    line-height: 1.4rem;
+    padding: 0 0 8px 0px;
+  }
+
+  h3.card-title {
+    color: #757575;
+    font-family: Roboto;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 23px; /* 156.25% */
+    letter-spacing: 0.369px;
+    text-transform: capitalize;
+    padding-bottom: 13px;
+  }
+
+  .heading-6-mobile {
+    display: flex;
+    color: #fff;
+  }
+
+  img.card-img {
+    padding-bottom: 18px;
+    background: white;
+  }
+
+  p.card-title {
+    color: #757575;
+    font-family: Roboto;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 25px; /* 156.25% */
+    letter-spacing: 0.369px;
+    text-transform: capitalize;
+    padding-top: 30px;
+  }
+
+  .d-flex.div-block-2 > .d-flex {
+    width: 100%;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .d-flex.div-block-2 {
+    flex-wrap: wrap;
+    gap: 0px 0;
+    justify-content: center;
+    align-items: center;
+    padding: 0 0;
+    padding-top: 20px;
+  }
+
+  p.text-block-3 {
+    color: #90a3b4;
+    font-family: Roboto;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 125% */
+    letter-spacing: 0.369px;
+    padding-left: 13px;
+    margin: 0;
+    padding: 13px 0;
+  }
+
+  p.text-block-2.text-center {
+    /* background: aqua; */
+    padding: 0;
+    width: 100%;
+    margin: auto;
+    padding-bottom: 44px;
+  }
+  h4.heading-4 {
+    color: #7ea4d8;
+    font-family: DM Sans;
+    font-size: 16.615px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 24.221px; /* 144.444% */
+    letter-spacing: 0.18px;
+    margin-top: 20px;
+  }
+
+  section.section-2.pt-5 {
+    padding-bottom: 54px;
+  }
+
+  h3.heading-5 {
+    color: #757575;
+    font-family: Roboto;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 26px; /* 156.25% */
+    letter-spacing: 0.369px;
+    text-transform: capitalize;
+    margin-bottom: 18px;
+  }
+
+  .d-flex.star-flex {
+    align-items: center;
+    gap: 4px;
+    padding-left: 12px;
+  }
+
+  p.text-block-4 {
+    color: #90a3b4;
+    font-family: Roboto;
+    font-size: 14px;
+    font-style: italic;
+    font-weight: 300;
+    line-height: 18px; /* 125% */
+    letter-spacing: 0.369px;
+    padding-left: 60px;
+  }
+
+  .d-flex.div-block-1 {
+    align-items: center;
+    gap: 16px;
+    padding-left: 57px;
+  }
+
+  img.img-2 {
+  }
+
+  .home-test-container {
+    padding: 24px;
+  }
+
+  h4.heading-5 {
+    color: #4675c3;
+    font-family: DM Sans;
+    font-size: 17.586px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 16.103px; /* 120% */
+    letter-spacing: 0.226px;
+  }
+
+  p.text-block-5 {
+    margin: 0;
+    color: #90a3b4;
+    font-family: DM Sans;
+    font-size: 13.069px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 19.621px; /* 175% */
+  }
+
+  h4.heading-6 {
+    display: none;
+    color: #1f74a7;
+  }
+
+  h6.heading-7 {
+    color: #fff;
+    font-family: DM Sans;
+    font-size: 13.836px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 36.197px; /* 228.571% */
+    letter-spacing: 0.339px;
+  }
+
+  .buttons-demo-req {
+    width: 290px;
+    margin: auto;
+  }
+
+  .d-flex.div-block-3 {
+    align-items: center;
+    gap: 18px;
+    margin-bottom: 17px;
+  }
+
+  .d-flex.div-block-3 a {
+    text-decoration: none;
+    color: #fff;
+    font-family: DM Sans;
+    font-size: 15.836px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 36.197px; /* 228.571% */
+    letter-spacing: 0.339px;
+    text-decoration-line: underline;
+  }
+
+  .col-md-6.d-flex {
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .join-heading-mobile {
+    width: 250px;
+    font-size: 1rem;
+    text-align: justify;
+    justify-content: center;
+    align-items: center;
+    margin-top: 1.1rem;
+    margin-bottom: 1.1rem;
+    margin-left: auto;
+    margin-right: auto;
+    color: #1f74a7;
+    display: flex;
+  }
+
+  .join-heading {
+    display: none;
+  }
+
+  button.button-2 {
+    width: 238px;
+    height: 46px;
+    flex-shrink: 0;
+    background: #4675c3;
+    border: 0;
+    color: #fff;
+    text-align: center;
+    font-family: Roboto;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    text-transform: capitalize;
+    margin-bottom: 11px;
+  }
+
+  .container.bg-color {
+    /* height: 407.213px; */
+    /* flex-shrink: 0; */
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    padding: 58px 17px;
+    background-position: center;
+    background-size: cover;
+    background: #ffb571;
+    background-repeat: no-repeat;
+  }
+
+  footer.footer {
+    background: #4675c3;
+    padding: 35px 0 9px 0px;
+  }
+
+  p.text-block-6 {
+    color: #fff;
+    font-family: DM Sans;
+    font-size: 16.054px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24.844px; /* 175% */
+  }
+
+  .d-flex.iconFlex {
+    gap: 17px;
+    margin-bottom: 15px;
+  }
+
+  h3.heading-8 {
+    color: #fff;
+    font-family: DM Sans;
+    font-size: 20.686px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    padding-bottom: 18px;
+  }
+
+  a.footer-Link {
+    color: #fff;
+    font-family: DM Sans;
+    font-size: 16.054px;
+    font-style: normal;
+    /* font-weight: 400; */
+    line-height: normal;
+    padding-bottom: 11px;
+    margin-bottom: 0;
+    display: block;
+    text-decoration: none;
+  }
+
+  hr {
+    margin: 3rem 0;
+    color: inherit;
+    border: 0;
+    border-top: 3px #8caada solid;
+    opacity: 0.25;
+    background: aqua;
+  }
+
+  p.footerCopyRight {
+    color: #fff;
+    text-align: center;
+    font-family: DM Sans;
+    font-size: 16.054px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+  }
+
+  a.nav-link.button-1 {
+    background: #4675c3;
+    padding: 10px 0;
+    width: 87px;
+    text-align: center;
+    width: 133px;
+    height: auto;
+    flex-shrink: 0;
+    color: #fff;
+    text-align: center;
+    font-family: Roboto;
+    font-size: 18.311px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    text-transform: capitalize;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .bottom-header-box {
+    display: flex;
+    flex-direction: column;
+    width: 290px;
+    align-items: center;
+    text-align: center;
+    margin: auto;
+  }
+
+  li.nav-item {
+    padding: 0 19px;
+    text-align: center;
+  }
+
+  a.navbar-brand > img {
+    width: 151px;
+  }
+
+  .card {
+    margin-bottom: 17px;
+  }
+
+  section.section-4.py-5 {
+    padding: 15px 0 !important;
+  }
+
+  section.section-5.py-5 {
+    padding: 14px 11px !important;
+  }
+
+  a.logo > img {
+    width: 148px;
+    margin-bottom: 14px;
+  }
+
+  .col-md-2.col-6.col-2-footer {
+    margin: 20px 0 0 0;
+  }
+}