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/HomePage.js b/src/Components/Home/HomePage.js
index 05ebfce..61e04e3 100644
--- a/src/Components/Home/HomePage.js
+++ b/src/Components/Home/HomePage.js
@@ -392,7 +392,7 @@ const HomePage = () => {
             <div className="card-image-container">
               <img
                 src="https://imagedelivery.net/OvFc3s8IYmBw7-_bogeTLg/5ff0ba9e-298f-4ee1-88d4-e19a44a00900/public"
-                alt="ai hand"
+                alt="ai card"
                 width="100%"
                 className="card-image"
               />
diff --git a/src/Components/Home/HomePageB.js b/src/Components/Home/HomePageB.js
new file mode 100644
index 0000000..3e29347
--- /dev/null
+++ b/src/Components/Home/HomePageB.js
@@ -0,0 +1,645 @@
+import { useEffect, useState } from "react";
+import { collection, setDoc, doc } from "firebase/firestore";
+import { db, auth } from "../../firebase";
+import Button from "../../pageElements/Button";
+import { v4 as uuidv4 } from "uuid";
+import arrow from "../../Assets/Images/Arrow.png";
+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-b.scss";
+import LoadingSpinner from "../../pageElements/LoadingSpinner";
+import { StarFill } from "react-bootstrap-icons";
+const HomePageB = () => {
+  const navigate = useNavigate();
+  const [showPromoModal, setShowPromoModal] = useState(false);
+  const [isBusy, setIsBusy] = useState(false);
+  const [notice, setNotice] = useState("");
+  const heroString =
+    "Interrogatories, requests for admissions/production + motions. ";
+  const heroString2 = "Done  in < 10 minutes.  For $9.50/week.";
+  const apiUrl =
+    process.env.NODE_ENV === "development"
+      ? process.env.REACT_APP_API_DEV
+      : process.env.REACT_APP_API_PROD;
+
+  useEffect(() => {
+    if (typeof window.gtag !== "undefined") {
+      window.gtag("event", "screen_view", {
+        app_name: "novodraft",
+        screen_name: "Home",
+      });
+    }
+  }, []);
+
+  function clickedTryItButton() {
+    if (typeof window.gtag !== "undefined") {
+      window.gtag("event", "try_it_click", {
+        app_name: "novodraft",
+        screen_name: "Home",
+      });
+    }
+  }
+
+  function promoSignup() {
+    if (typeof window.gtag !== "undefined") {
+      window.gtag("event", "promo_sign_up", {
+        send_to: "G-J6SQL5DF6V",
+      });
+    }
+  }
+
+  function clickedExploreLink() {
+    if (typeof window.gtag !== "undefined") {
+      window.gtag("event", "explore_click", {
+        app_name: "novodraft",
+        screen_name: "Home",
+      });
+    }
+  }
+
+  async function saveUserData(
+    authId,
+    dataValues,
+    email,
+    password,
+    customerId,
+    subscriptionCreated,
+    subscriptionPeriodStart,
+    subscriptionPeriodEnd,
+    subscriptionId,
+    isPromotionalMebership = true,
+    docsAllowedPeMonth = 1
+  ) {
+    if (!email || !password || !dataValues[0]) {
+      return;
+    }
+    const appUserId = uuidv4();
+    const firmId = uuidv4();
+    const fbAuthUid = authId;
+    const tpe = password;
+    let plan = "promo plan";
+    let docsAllowedPerMonth;
+
+    docsAllowedPerMonth = 1;
+    subscriptionId = uuidv4();
+    plan = plan;
+
+    const docsGenerated = 0;
+
+    const {
+      firstName,
+      lastName,
+      firm,
+      telephone,
+      streetAddress,
+      city,
+      state,
+      zipCode,
+      barNumber,
+      practiceArea,
+    } = dataValues[0];
+
+    const userState = stateDataValues.filter((value) => {
+      if (value.name === state) return value;
+    });
+
+    const tempData = {
+      docsAllowedPerMonth,
+      docsGenerated,
+      appUserId,
+      fbAuthUid,
+      firmId,
+      firstName,
+      lastName,
+      firm,
+      telephone,
+      streetAddress,
+      city,
+      state: userState,
+      zipCode,
+      barNumber,
+      practiceArea,
+      email,
+      tpe: tpe,
+      isPromotionalMebership,
+      isPromotionalFirstLogin: true,
+      customerId: customerId,
+      subscriptionId: subscriptionId,
+      subscriptionPlan: "flordia-spring-promo-plan",
+      subscriptionCreated: subscriptionCreated,
+      subscriptionPeriodStart: subscriptionPeriodStart,
+      subscriptionPeriodEnd: subscriptionPeriodEnd,
+    };
+
+    function scrubUndef(obj) {
+      Object.keys(obj).forEach(function (key) {
+        if (obj[key] === undefined) {
+          obj[key] = "---";
+        }
+      });
+
+      return obj;
+    }
+
+    const userData = scrubUndef(tempData);
+
+    try {
+      const usersRef = collection(db, "users");
+      const res = await setDoc(doc(usersRef, fbAuthUid), userData);
+      promoSignup();
+      return res;
+    } catch (error) {
+      console.log(`Error saving new user to db: ${error}`);
+    }
+  }
+
+  async function getFocusData(code) {
+    try {
+      const response = await fetch(`${apiUrl}/v1/get-focused-data/${code}`, {
+        method: "GET",
+      });
+      const res = await response.json();
+
+      return res;
+    } catch (err) {
+      console.log("Error in get rqst:", err);
+    }
+  }
+
+  async function handleProcessPromoSubscription(code) {
+    setIsBusy(true);
+    setShowPromoModal(false);
+    if (!code) {
+      return;
+    }
+
+    const userData = await getFocusData(code);
+    let email;
+    let password;
+
+    if (userData === undefined) {
+      return;
+    } else {
+      email = userData[0].email;
+      password = userData[0].mspall;
+    }
+
+    if (email && password) {
+      handlePromoSignup(userData, email, password);
+    } else {
+      setIsBusy(false);
+      setShowPromoModal(false);
+    }
+  }
+
+  async function handlePromoSignup(dataValues, email, password) {
+    if (!email || !password) {
+      return;
+    }
+
+    try {
+      const customerId = `${uuidv4()}-florida-spring-promo`;
+      const today = new Date();
+      const subscriptionCreated = today;
+      const subscriptionPeriodStart = today;
+      const subscriptionPeriodEnd = today;
+      const subscriptionId = uuidv4();
+
+      const userCredential = await createUserWithEmailAndPassword(
+        auth,
+        email,
+        password
+      );
+
+      const user = userCredential.user;
+      dataValues = { ...dataValues };
+      const isPromotionalMebership = true;
+
+      const res = await saveUserData(
+        user.uid,
+        dataValues,
+        email,
+        password,
+        customerId,
+        subscriptionCreated,
+        subscriptionPeriodStart,
+        subscriptionPeriodEnd,
+        subscriptionId,
+        isPromotionalMebership
+      );
+
+      setIsBusy(false);
+      navigate("/dashboard");
+    } catch (error) {
+      console.log("Error handling request", error, error.message);
+      setIsBusy(false);
+      setNotice("Sorry, something went wrong. Please try again.");
+    }
+  }
+
+  const handleTryItButton = (e) => {
+    clickedTryItButton();
+    setShowPromoModal(true);
+  };
+
+  const handleLogin = () => {
+    navigate("/login");
+  };
+
+  const handleCancelModal = () => {
+    setShowPromoModal(!showPromoModal);
+    navigate("/signup");
+  };
+
+  const handleDemo = () => {
+    const supReq = null;
+    navigate("/requestpage/supReq");
+  };
+
+  const homeContent = (
+    <div className="homepage-container">
+      <section className="section-one">
+        <div className="hero-text-container">
+          <h1 className="hero-top">AI-asssisted legal drafting</h1>
+          <div
+            className="hero-imgbox"
+            style={{
+              backgroundImage: `url(https://imagedelivery.net/OvFc3s8IYmBw7-_bogeTLg/038dfbe4-00e9-41f9-6b70-09e8e87fa600/public)`,
+              backgroundSize: "cover",
+              borderRadius: "20px",
+            }}
+          >
+            <div className="hero-middle-box">
+              <div className="hero-middle">{heroString}</div>
+              <div className="hero-middle">{heroString2}</div>
+              <div className="hero-button-box">
+                <button className="button-2" onClick={handleTryItButton}>
+                  Start A Free Trial
+                </button>
+                <button className="button-2" onClick={handleDemo}>
+                  Request a demo
+                </button>
+              </div>
+            </div>
+            <div className="hero-text-box">
+              <div className="hero-text">
+                ATTN: Attorneys - reclaim hours every week. Spend more time
+                growing your practice, or just get home in time for dinner.
+              </div>
+              <div className="arrow-container">
+                <div className="arrow-sub-left"></div>
+                <div className="arrow-sub-right">
+                  <div className="arrow-left"></div>
+                  <div className="arrow-right">
+                    <img
+                      className="testi-arrow"
+                      src="https://imagedelivery.net/OvFc3s8IYmBw7-_bogeTLg/046d4940-35e7-481f-e3c1-259cc32d3800/public"
+                    ></img>
+                  </div>
+                </div>
+              </div>
+              <div className="hero-testi-box">
+                <div className="hero-testi-left">
+                  <StarFill
+                    style={{
+                      color: "#FFD700",
+                      height: "20px",
+                      width: "20px",
+                      marginRight: "6px",
+                    }}
+                  />
+                  <StarFill
+                    style={{
+                      color: "#FFD700",
+                      height: "20px",
+                      width: "20px",
+                      marginRight: "6px",
+                    }}
+                  />
+                  <StarFill
+                    style={{
+                      color: "#FFD700",
+                      height: "20px",
+                      width: "20px",
+                      marginRight: "6px",
+                    }}
+                  />
+                  <StarFill
+                    style={{
+                      color: "#FFD700",
+                      height: "20px",
+                      width: "20px",
+                      marginRight: "6px",
+                    }}
+                  />
+                  <StarFill
+                    style={{ color: "#FFD700", height: "20px", width: "20px" }}
+                  />
+                  <div className="review-box">
+                    Used by over 1,100 Novodrafters.
+                  </div>
+                </div>
+                <div className="hero-testi-right">
+                  <div className="hero-testi-right-inner">
+                    <div className="hero-test-pic-box">
+                      <img
+                        className="hero-testi-face"
+                        src="https://imagedelivery.net/OvFc3s8IYmBw7-_bogeTLg/bdb625eb-2949-4416-f675-6660e1a04f00/public"
+                      ></img>
+                    </div>
+                    <div className="hero-testi-text"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      {/* Section 2 */}
+      <section className="section-2">
+        <div className="home-row">
+          <div className="home-col-50">
+            <div className="heading-2-mobile-box">
+              <h2 className="heading-2-mobile">
+                Made by Attorneys, for Attorneys
+              </h2>
+            </div>
+            <div className="pad-2">
+              <div className="laptop-image-container">
+                <img
+                  src="https://imagedelivery.net/OvFc3s8IYmBw7-_bogeTLg/5f0f6f11-bb56-4f03-b05e-189d4f1a5600/public"
+                  alt="image of a laptop computer"
+                  className="img-2"
+                />
+              </div>
+            </div>
+          </div>
+          <div className="home-col-50">
+            <div className="pad-2">
+              <h2 className="section-three-header">
+                Made by Attorneys, for Attorneys.
+              </h2>
+              <div className="text-block-2-box">
+                <p className="section-three-wubhead">
+                  Tech developed by litigators that understand your needs.
+                </p>
+              </div>
+              <p className="section-two-body">
+                We understand the demands on your time. For example, 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 the mire of rote tasks, but does much
+                more than automate.
+              </p>
+              <p className="section-two-body">
+                Intellidraft AI technology powers persuasive arguments and makes
+                otherwise boilerplate objections compelling. Augment your
+                drafting as much or as little as you want. Novodraft actively
+                observes your edits, and, over time, incorporates your preferred
+                style.
+              </p>
+              <p className="section-two-body">
+                Novodraft is not a “chatbot”, nor is it an “AI assitant”. It is
+                a proprietary, algorithmic drafting system that leverages AI to
+                enhance drafting. It eliminates so-called "hallucinations" and
+                side-effects.
+              </p>
+              <p className="section-two-body">
+                Modeled on real, human attorney's drafting sttyles, it generates
+                discovery requests, responses and persuasive objections, within
+                specific natural language parameters. It even applies CRAC
+                structure, where appropriate.
+              </p>
+              <p className="section-two-body"></p>
+              <div
+                className="home-link-box"
+                onClick={() => clickedExploreLink()}
+              ></div>
+            </div>
+          </div>
+        </div>
+      </section>
+      {/* Section 3 */}
+      <section className="section-3">
+        <div className="section-three-header-box">
+          <h2 className="section-three-header">
+            AI-Powered Legal Drafting Technology{" "}
+          </h2>
+          <h2 className="section-three-header-mobile">
+            Novo Drafting Technology
+          </h2>
+          <p className="section-three-subhead">
+            Created by litigators, for litigators
+          </p>
+        </div>
+        <div className="card-section-container">
+          {/***********  CARD ONE *********** */}
+          <div className="home-card">
+            <div className="card-image-container">
+              <img
+                src="https://imagedelivery.net/OvFc3s8IYmBw7-_bogeTLg/5ff0ba9e-298f-4ee1-88d4-e19a44a00900/public"
+                alt="ai hand"
+                width="100%"
+                className="card-image"
+              />
+            </div>
+            <div className="card-body">
+              <div className="card-upper-box">
+                <div className="home-card-title">
+                  <h3 className="foo-card-title">Discovery Requests</h3>
+                  <div className="home-card-divider"></div>
+                </div>
+              </div>
+
+              <div className="home-card-text-box">
+                <p className="card-texts">
+                  Generate interrogatories and requests for
+                  production/admissions leveraging AI.
+                </p>
+                <p className="card-texts">
+                  Edit or add special language with tags. Concise yet
+                  comprehensive demands, done in minutes.
+                </p>
+              </div>
+            </div>
+          </div>
+          {/***********  CARD TWO *********** */}
+          <div className="home-card">
+            <div className="card-image-container">
+              <img
+                src="https://imagedelivery.net/OvFc3s8IYmBw7-_bogeTLg/7a6dd50e-4d8f-4068-61b2-634dc5603f00/public"
+                alt="scales image"
+                width="100%"
+                className="card-image"
+              />
+            </div>
+            <div className="card-body">
+              <div className="card-upper-box">
+                <div className="home-card-title">
+                  <h3 className="foo-card-title">Discovery Responses</h3>
+                  <div className="home-card-divider"></div>
+                </div>
+              </div>
+
+              <div className="home-card-text-box">
+                <p className="card-texts">
+                  Use Novodraft AI to quickly draft responses including
+                  compelling arguments about what you withhold from disclosure.
+                  Finish in minutes with a downloadable .docx file.
+                </p>
+              </div>
+            </div>
+          </div>
+          {/***********  CARD THREE *********** */}
+          <div className="home-card">
+            <div className="card-image-container">
+              <img
+                src="https://imagedelivery.net/OvFc3s8IYmBw7-_bogeTLg/00667aa1-f847-430c-7a5e-d96abeed3300/public"
+                alt=""
+                className="card-image"
+              />
+            </div>
+            <div className="card-body">
+              <div className="card-upper-box">
+                <div className="home-card-title">
+                  <h3 className="foo-card-title">Discovery Motions</h3>
+                  <div className="home-card-divider"></div>
+                </div>
+              </div>
+              <div className="home-card-text-box">
+                <p className="card-texts">
+                  Motions to compel disclosure. Fully editable/customizable to
+                  your individual preferences. Automtically formatted and ready
+                  to serve in 10 minutes or less.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section className="section-5 py-5">
+        <div
+          className="home-test-container"
+          style={{
+            backgroundImage: `url(https://imagedelivery.net/OvFc3s8IYmBw7-_bogeTLg/209dcf14-c086-42b4-ca72-f058d9ad1b00/public)`,
+            backgroundSize: "cover",
+          }}
+        >
+          <div className="row">
+            <div className="col-md-6">
+              <div className="bottom-header-box">
+                <h4 className="heading-6">
+                  Questions about our services? <br></br>
+                  We're here to answer!
+                </h4>
+                <h4 className="heading-6-mobile">
+                  Questions about our products and services?
+                </h4>
+                <h4 className="heading-6-mobile">We're here to answer!</h4>
+              </div>
+              <h6 className="join-heading">
+                Novodraft will revolutionize your practice.
+              </h6>
+              <h6 className="join-heading">
+                Request a demo - let us show you how.
+              </h6>
+              <h6 className="join-heading-mobile">
+                Revolutionize your practice.
+              </h6>
+              <h6 className="join-heading-mobile">Let us show you how.</h6>
+            </div>
+            <div className="col-md-6 d-flex">
+              <button className="button-2" onClick={handleDemo}>
+                Request a demo
+              </button>
+              <button className="button-2" onClick={handleLogin}>
+                Start a free trial
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
+      {showPromoModal ? (
+        <ConfirmModal
+          titleText="Enter Code"
+          onCancel={handleCancelModal}
+          buttonLabelText="Enter Code"
+          isPromoModal={true}
+          onConfirm={handleProcessPromoSubscription}
+          cancelButtonText="I don't have a code"
+        />
+      ) : (
+        <></>
+      )}
+    </div>
+  );
+
+  return isBusy ? (
+    <LoadingSpinner message={""} loaderType="MoonLoader" />
+  ) : (
+    homeContent
+  );
+};
+
+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>
+
+                          <div className="explore-link">
+                  Explore Novodraft
+                  <img src={arrow} className="img-1" alt="" />
+                </div>
+        */
diff --git a/src/styles/homepage-b.scss b/src/styles/homepage-b.scss
new file mode 100644
index 0000000..43720ee
--- /dev/null
+++ b/src/styles/homepage-b.scss
@@ -0,0 +1,1540 @@
+.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;
+  justify-content: center;
+}
+
+.hero-top {
+  font-size: 0.1rem;
+  color: #fff;
+  font-family: Roboto;
+}
+
+.hero-middle-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
+  padding-top: 38px;
+  width: 800px;
+}
+
+.hero-middle {
+  font-size: 2.8rem;
+  text-align: center;
+  color: #000;
+  font-family: Roboto;
+  font-weight: 500;
+  line-height: 3.4rem;
+  width: 800px;
+}
+
+.hero-imgbox {
+  height: 700px;
+  width: 1360px;
+  z-index: 1;
+}
+
+.hero-text-box {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
+}
+
+.hero-text {
+  text-align: center;
+  width: 750px;
+  font-size: 1.5rem;
+  color: #000;
+}
+
+.hero-button-box {
+  margin-top: 50px;
+  padding-left: 8px;
+  width: 100%;
+  height: 130px;
+}
+
+.first-section-subcontainer {
+  padding-top: 35px;
+  padding-left: 20px;
+}
+
+.arrow-container {
+  display: flex;
+  flex-direction: row;
+  margin-top: -6px;
+  width: 980px;
+  height: 70px;
+}
+
+.arrow-sub-left {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  width: 50%;
+}
+
+.arrow-sub-right {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  width: 50%;
+}
+
+.arrow-left {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  width: 35%;
+}
+
+.arrow-right {
+  //
+}
+
+.testi-arrow {
+  height: 60px;
+}
+
+.hero-text-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 980px;
+}
+
+.review-box {
+  font-family: Roboto;
+  font-size: 1rem;
+  font-weight: 500;
+  display: flex;
+  color: #000;
+  margin-top: 5px;
+  margin-left: 8px;
+}
+
+.hero-testi-box {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 0px 8px;
+  height: 100px;
+  width: 1200px;
+}
+
+.hero-testi-left {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 28px;
+  width: 50%;
+}
+
+.hero-testi-right {
+  height: 90px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+  padding-left: 30px;
+  width: 50%;
+}
+
+.hero-testi-right-inner {
+  display: flex;
+  width: 80%;
+  height: 90%;
+  border-radius: 10px;
+  align-items: center;
+}
+
+.hero-test-pic-box {
+  display: flex;
+  width: 48%;
+  height: 100%;
+  align-items: center;
+}
+
+.hero-test-pic-box1 {
+  //
+}
+
+.hero-testi-pic {
+  height: 75px;
+  width: 75px;
+  border-radius: 50%;
+  margin-left: -40px;
+}
+
+.hero-testi-face {
+  height: 60px;
+  border-radius: 20px;
+}
+
+.hero-testi-text {
+  display: flex;
+  flex-direction: column;
+  width: 520px;
+}
+
+.laptop-image-container {
+  padding-top: 1rem;
+}
+
+.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: #e2fffe;
+  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: #000;
+  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: 1100px) and (max-width: 1250px) {
+  .hero-imgbox {
+    width: 1080px;
+  }
+}
+
+@media only screen and (min-width: 1000px) and (max-width: 1200px) {
+  .laptop-image-container {
+    padding-top: 2rem;
+  }
+}
+
+@media only screen and (min-width: 580px) and (max-width: 1080px) {
+  .laptop-image-container {
+    padding-top: 5rem;
+  }
+}
+
+@media only screen and (max-width: 980px) {
+  .hero-imgbox {
+    width: 820px;
+  }
+}
+
+@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;
+  }
+}
diff --git a/src/styles/homepage.scss b/src/styles/homepage.scss
index 22bb309..fbb74e4 100644
--- a/src/styles/homepage.scss
+++ b/src/styles/homepage.scss
@@ -475,7 +475,7 @@ p.text-block-4 {
   align-items: center;
   justify-content: center;
   margin: 12px auto 0px auto;
-  color: #757575;
+  color: #000;
   letter-spacing: 0.13rem;
 }