diff --git a/app/views/driver/index.php b/app/views/driver/index.php
index 2a995d78..a1b666c5 100644
--- a/app/views/driver/index.php
+++ b/app/views/driver/index.php
@@ -77,7 +77,13 @@
 <main class="page-container">
     <section class="section" id="main">
         <div class="container">
-            <h1>Driver Dashboard</h1>
+            <div class="search">
+                <input type="text" placeholder="Search">
+            </div>
+            <div class="map">
+                <img src="<?php echo URLROOT ?>/images/location.png" alt="">
+                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4231.666368350934!2d79.86014226253688!3d6.902790088271364!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae259100761b8f3%3A0x78f0a33054ea929b!2sIndependence%20Square%20Parking%20Lot!5e0!3m2!1sen!2slk!4v1697709991816!5m2!1sen!2slk" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+            </div>
         </div>
     </section>
 </main>
diff --git a/public/css/components/sidenavbar.css b/public/css/components/sidenavbar.css
index 674e3eaf..7debe36a 100644
--- a/public/css/components/sidenavbar.css
+++ b/public/css/components/sidenavbar.css
@@ -7,10 +7,17 @@
     height: 100vh;
     width: 250px;
     box-shadow: 0 0 20px 0.1px rgba(0, 0, 0, 0.49);
-    left: -270px; /* Move the sidebar off-screen to the left initially */
+    left: 0;
     transition: left 0.5s ease-in;
 }
 
+@media screen and (max-width: 700px){
+    .sidenav{
+        left: -270px;
+        transition: left 0.5s ease-in;
+    }
+}
+
 .sidenav-toggled{
     left: 0;
 }
diff --git a/public/css/driver.css b/public/css/driver.css
new file mode 100644
index 00000000..c0a38b0b
--- /dev/null
+++ b/public/css/driver.css
@@ -0,0 +1,145 @@
+/* ----------------- Driver Dashboard Styles ---------------- */
+.page-container .section .container .map{
+    margin-right: 20px;
+    margin-left: 270px;
+    margin-top: 30px;
+    border-radius: 20px;
+    box-shadow: 0 0 15px 0.1px rgba(0, 0, 0, 0.10);
+    height: 70vh;
+    transition: 0.5s;
+}
+
+.page-container .section .container .map:hover{
+    box-shadow: 0 0 15px 0.1px rgba(0, 0, 0, 0.2);
+    transition: 0.5s;
+}
+
+.page-container .section .container .search{
+    margin-left: 270px;
+    margin-right: 20px;
+    margin-top: 30px;
+    border-radius: 20px;
+}
+
+.page-container .section .container .search input{
+    height: 50px;
+    border-radius: 20px;
+    transition: 0.5s;
+}
+
+.page-container .section .container .search input:hover{
+    border-radius: 20px;
+    box-shadow: 0 0 15px 0.1px rgba(0, 0, 0, 0.15);
+    scale: 1.03;
+}
+
+.page-container .section .container .search input:focus{
+    border-radius: 20px;
+    box-shadow: 0 0 15px 0.1px rgba(0, 0, 0, 0.15);
+    scale: 1.03;
+}
+
+.page-container .section .container .map iframe{
+    width: 100%;
+    height: 100%;
+    border-radius: 20px;
+}
+
+.page-container .section .container .map img{
+    width: 40px;
+    top: 348px;
+    left: 361px;
+    position: absolute;
+}
+
+@media screen and (max-width: 700px){
+    .page-container .section .container .search{
+        width: 93%;
+        margin-left: 20px;
+        transition: left 0.5s ease-in;
+    }
+
+    .page-container .section .container .map{
+        margin-left: 20px;
+        transition: left 0.5s ease-in;
+    }
+}
+
+/* ----------------- Driver Vehicle Styles ---------------- */
+.page-container .section .container .emptyVehicle{
+    margin-top: 100px;
+    margin-left: 50px;
+    margin-right: 50px;
+    background-color: rgba(253, 198, 62, 0.07);
+    border: 2px dotted rgba(253, 198, 62, 0.24);
+    text-align: center;
+    border-radius: 20px;
+    padding-top: 50px;
+    padding-bottom: 50px;
+    color: rgba(140, 140, 140, 0.87);
+    font-size: 20px;
+}
+
+.page-container .section .container .table-container{
+    margin-left: 5vw;
+    margin-right: 5vw;
+}
+
+.page-container .section .container .table{
+    margin-top: 50px;
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 20px;
+    border-radius: 50px;
+}
+
+.page-container .section .container a{
+    text-decoration: none;
+    background-color: #fdc63e;
+    width: 100%;
+    color: #000000;
+    padding: 12px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: 0.3s;
+    margin-left: 5vw;
+}
+
+.page-container .section .container .sub-option {
+    text-decoration: none;
+    background-color: #fdc63e;
+    width: 100%;
+    color: #000000;
+    padding: 5px 10px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: 0.3s;
+    margin-left: 2px;
+}
+
+.page-container .section .container a:hover{
+    background-color: #ffc400;
+    box-shadow: 0 0 10px 0.1px rgba(0, 0, 0, 0.20);
+}
+
+.page-container .section .container th{
+    background-color: #fccc04;
+    text-align: left;
+    padding: 10px;
+    border: 1px solid #ffffff;
+}
+
+.page-container .section .container tr{
+    background-color: #fff;
+}
+
+.page-container .section .container tr:nth-child(even){
+    background-color: rgba(252, 204, 4, 0.16);
+}
+
+.page-container .section .container td{
+    padding: 10px;
+    border: 1px solid #ffffff;
+}
diff --git a/public/css/landingpage.css b/public/css/landingpage.css
new file mode 100644
index 00000000..9626c781
--- /dev/null
+++ b/public/css/landingpage.css
@@ -0,0 +1,511 @@
+/* --------------- Index Page Styles --------------- */
+.landing-container{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+}
+
+.landing-container .row{
+    display: flex;
+    margin-top: 180px;
+}
+
+.landing-container .row .col{
+    width: 50%;
+}
+
+.landing-container .row .col .left-col{
+    padding-left: 100px;
+    opacity: 0;
+    transform: translateY(-100px);
+    transition: opacity 1s, transform 1s;
+}
+
+.landing-container .row .col .left-col.reveal {
+    opacity: 1;
+    transform: translateY(0px);
+}
+
+.landing-container .row .col .right-col {
+    opacity: 0;
+    transform: translateY(-100px);
+    transition: opacity 1s, transform 1s;
+}
+
+.landing-container .row .col .right-col.reveal {
+    opacity: 1;
+    transform: translateY(-180px);
+}
+
+.landing-container .row .col .left-col h1{
+    font-size: 90px;
+    font-weight: 500;
+}
+
+.landing-container .row .col .left-col p{
+    color: rgba(0,0,0,0.29);
+    width: 40vw;
+}
+
+.landing-container .row .col .right-col .black-circle-1{
+    background-color: #1c1c1c;
+    border-radius: 50%;
+    height: 500px;
+    width: 500px;
+    position: absolute;
+    right: 100px;
+    top: 130px;
+}
+
+.landing-container .row .col .right-col .yellow-circle-1{
+    background: linear-gradient(to right, rgb(248,215,90), rgb(255,156,19));
+    border-radius: 50%;
+    height: 250px;
+    width: 250px;
+    z-index: 1;
+    position: absolute;
+    right: 70px;
+    top: 120px;
+}
+
+.landing-container .row .col .right-col .yellow-circle-2{
+    background: linear-gradient(to right, rgb(248,215,90), rgb(255,167,41));
+    border-radius: 50%;
+    height: 80px;
+    width: 80px;
+    z-index: 1;
+    position: absolute;
+    right: 550px;
+    top: 280px;
+}
+
+.landing-container .yellow-circle-3{
+    background: linear-gradient(to right, rgb(248,215,90), rgb(255,167,41));
+    z-index: -1;
+    position: absolute;
+    left: 80px;
+    bottom: 0;
+    width: 12rem;
+    height: 6rem;
+    border-radius: 10rem 10rem 0 0;
+}
+
+.landing-container .yellow-circle-4{
+    background: linear-gradient(to right, rgb(248,215,90), rgb(255,167,41));
+    border-radius: 50%;
+    height: 100px;
+    width: 100px;
+    z-index: -1;
+    position: absolute;
+    left: 35vw;
+    top: 220px;
+}
+
+
+.landing-container .yellow-circle-5{
+    background: linear-gradient(to right, rgb(248,215,90), rgb(255,167,41));
+    z-index: -1;
+    position: absolute;
+    right: 50vw;
+    top: 0;
+    width: 10rem;
+    height: 5rem;
+    border-radius: 0 0 10rem 10rem;
+}
+
+.landing-container .row .col .right-col .phone{
+    width: 350px;
+    position: absolute;
+    right: 150px;
+    top: 150px;
+    z-index: 1
+}
+
+.landing-container .row .col .right-col .car{
+    width: 500px;
+    position: absolute;
+    right: 250px;
+    top: 400px
+}
+
+@media screen and (max-width: 1379px){
+    .landing-container .row .col .left-col h1{
+        font-size: 85px;
+        font-weight: 500;
+    }
+}
+
+@media screen and (max-width: 1316px){
+    .landing-container .row .col .left-col h1{
+        font-size: 80px;
+        font-weight: 500;
+    }
+}
+
+@media screen and (max-width: 1255px){
+    .landing-container .row .col .left-col h1{
+        font-size: 75px;
+        font-weight: 500;
+    }
+}
+
+@media screen and (max-width: 1220px){
+    .landing-container .row .col .left-col{
+        padding-left: 50px;
+    }
+
+    .landing-container .row .col .left-col h1{
+        font-size: 65px;
+        font-weight: 500;
+    }
+
+    .landing-container .row .col .right-col .black-circle-1{
+        background-color: #1c1c1c;
+        border-radius: 50%;
+        height: 450px;
+        width: 450px;
+        position: absolute;
+        right: 50px;
+        top: 130px;
+    }
+
+    .landing-container .row .col .right-col .yellow-circle-1{
+        background: linear-gradient(to right, rgb(248,215,90), rgb(255,156,19));
+        border-radius: 50%;
+        height: 200px;
+        width: 200px;
+        z-index: 1;
+        position: absolute;
+        right: 30px;
+        top: 120px;
+    }
+
+    .landing-container .row .col .right-col .yellow-circle-2{
+        background: linear-gradient(to right, rgb(248,215,90), rgb(255,167,41));
+        border-radius: 50%;
+        height: 80px;
+        width: 80px;
+        z-index: 1;
+        position: absolute;
+        right: 450px;
+        top: 280px;
+    }
+
+    .landing-container .row .col .right-col .phone{
+        width: 300px;
+        position: absolute;
+        right: 120px;
+        top: 180px;
+        z-index: 1
+    }
+
+    .landing-container .row .col .right-col .car{
+        width: 480px;
+        position: absolute;
+        right: 220px;
+        top: 400px
+    }
+}
+
+@media screen and (max-width: 1000px){
+    .landing-container .row .col .left-col{
+        padding-left: 50px;
+    }
+
+    .landing-container .row .col .left-col h1{
+        font-size: 55px;
+        font-weight: 500;
+    }
+
+    .landing-container .row .col .left-col p{
+        margin-top: 50px;
+        color: rgba(0,0,0,0.29);
+        width: 30vw;
+    }
+
+    .landing-container .row .col .right-col .black-circle-1{
+        background-color: #1c1c1c;
+        border-radius: 50%;
+        height: 400px;
+        width: 400px;
+        position: absolute;
+        right: 50px;
+        top: 150px;
+    }
+
+    .landing-container .row .col .right-col .yellow-circle-1{
+        background: linear-gradient(to right, rgb(248,215,90), rgb(255,156,19));
+        border-radius: 50%;
+        height: 160px;
+        width: 160px;
+        z-index: 1;
+        position: absolute;
+        right: 30px;
+        top: 150px;
+    }
+
+    .landing-container .row .col .right-col .yellow-circle-2{
+        background: linear-gradient(to right, rgb(248,215,90), rgb(255,167,41));
+        border-radius: 50%;
+        height: 70px;
+        width: 70px;
+        z-index: 1;
+        position: absolute;
+        right: 400px;
+        top: 260px;
+    }
+
+    .landing-container .row .col .right-col .phone{
+        width: 270px;
+        position: absolute;
+        right: 100px;
+        top: 200px;
+        z-index: 1
+    }
+
+    .landing-container .row .col .right-col .car{
+        width: 450px;
+        position: absolute;
+        right: 180px;
+        top: 380px
+    }
+}
+
+@media screen and (max-width: 880px){
+    .landing-container .row .col .left-col{
+        padding-left: 30px;
+    }
+
+    .landing-container .row .col .left-col h1{
+        font-size: 50px;
+        font-weight: 500;
+    }
+
+    .landing-container .row .col .left-col p{
+        margin-top: 50px;
+        color: rgba(0,0,0,0.29);
+        width: 40vw;
+    }
+
+    .landing-container .row .col .right-col .black-circle-1{
+        background-color: #1c1c1c;
+        border-radius: 50%;
+        height: 350px;
+        width: 350px;
+        position: absolute;
+        right: 40px;
+        top: 190px;
+    }
+
+    .landing-container .row .col .right-col .yellow-circle-1{
+        background: linear-gradient(to right, rgb(248,215,90), rgb(255,156,19));
+        border-radius: 50%;
+        height: 140px;
+        width: 140px;
+        z-index: 1;
+        position: absolute;
+        right: 30px;
+        top: 180px;
+    }
+
+    .landing-container .row .col .right-col .yellow-circle-2{
+        background: linear-gradient(to right, rgb(248,215,90), rgb(255,167,41));
+        border-radius: 50%;
+        height: 60px;
+        width: 60px;
+        z-index: 1;
+        position: absolute;
+        right: 340px;
+        top: 270px;
+    }
+
+    .landing-container .yellow-circle-3{
+        background: linear-gradient(to right, rgb(248,215,90), rgb(255,167,41));
+        z-index: -1;
+        position: absolute;
+        left: 50px;
+        bottom: 0;
+        width: 10rem;
+        height: 5rem;
+        border-radius: 10rem 10rem 0 0;
+    }
+
+    .landing-container .yellow-circle-5{
+        background: linear-gradient(to right, rgb(248,215,90), rgb(255,167,41));
+        z-index: -1;
+        position: absolute;
+        right: 40vw;
+        top: 0;
+        width: 8rem;
+        height: 4rem;
+        border-radius: 0 0 10rem 10rem;
+    }
+
+    .landing-container .row .col .right-col .phone{
+        width: 230px;
+        position: absolute;
+        right: 80px;
+        top: 240px;
+        z-index: 1
+    }
+
+    .landing-container .row .col .right-col .car{
+        width: 380px;
+        position: absolute;
+        right: 140px;
+        top: 390px
+    }
+}
+
+@media screen and (max-width: 760px){
+    .landing-container .row .col .left-col{
+        padding-left: 20px;
+    }
+
+    .landing-container .row .col .left-col h1{
+        font-size: 45px;
+        font-weight: 500;
+    }
+
+    .landing-container .row .col .left-col p{
+        margin-top: 50px;
+        color: rgba(0,0,0,0.29);
+        width: 40vw;
+    }
+
+    .landing-container .row .col .right-col .black-circle-1{
+        background-color: #1c1c1c;
+        border-radius: 50%;
+        height: 300px;
+        width: 300px;
+        position: absolute;
+        right: 30px;
+        top: 200px;
+    }
+
+    .landing-container .row .col .right-col .yellow-circle-1{
+        background: linear-gradient(to right, rgb(248,215,90), rgb(255,156,19));
+        border-radius: 50%;
+        height: 120px;
+        width: 120px;
+        z-index: 1;
+        position: absolute;
+        right: 30px;
+        top: 200px;
+    }
+
+    .landing-container .row .col .right-col .yellow-circle-2{
+        background: linear-gradient(to right, rgb(248,215,90), rgb(255,167,41));
+        border-radius: 50%;
+        height: 50px;
+        width: 50px;
+        z-index: 1;
+        position: absolute;
+        right: 290px;
+        top: 270px;
+    }
+
+    .landing-container .yellow-circle-3{
+        background: linear-gradient(to right, rgb(248,215,90), rgb(255,167,41));
+        z-index: -1;
+        position: absolute;
+        left: 20px;
+        bottom: 0;
+        width: 8rem;
+        height: 4rem;
+        border-radius: 10rem 10rem 0 0;
+    }
+
+    .landing-container .row .col .right-col .phone{
+        width: 200px;
+        position: absolute;
+        right: 60px;
+        top: 220px;
+        z-index: 1
+    }
+
+    .landing-container .row .col .right-col .car{
+        width: 320px;
+        position: absolute;
+        right: 100px;
+        top: 350px
+    }
+}
+
+@media screen and (max-width: 660px){
+    .landing-container .row .col .left-col{
+        padding-left: 20px;
+        text-align: center;
+    }
+
+    .landing-container .row .col .left-col h1{
+        font-size: 45px;
+        font-weight: 500;
+    }
+
+    .landing-container .row .col .left-col p{
+        margin-top: 50px;
+        color: rgba(0,0,0,0.29);
+        width: 40vw;
+    }
+
+    .landing-container .row .col .right-col .black-circle-1{
+        background-color: #1c1c1c;
+        border-radius: 50%;
+        height: 300px;
+        width: 300px;
+        position: absolute;
+        right: 30px;
+        top: 200px;
+    }
+
+    .landing-container .row .col .right-col .yellow-circle-1{
+        background: linear-gradient(to right, rgb(248,215,90), rgb(255,156,19));
+        border-radius: 50%;
+        height: 120px;
+        width: 120px;
+        z-index: 1;
+        position: absolute;
+        right: 30px;
+        top: 200px;
+    }
+
+    .landing-container .row .col .right-col .yellow-circle-2{
+        background: linear-gradient(to right, rgb(248,215,90), rgb(255,167,41));
+        border-radius: 50%;
+        height: 50px;
+        width: 50px;
+        z-index: 1;
+        position: absolute;
+        right: 290px;
+        top: 270px;
+    }
+
+    .landing-container .yellow-circle-3{
+        background: linear-gradient(to right, rgb(248,215,90), rgb(255,167,41));
+        z-index: -1;
+        position: absolute;
+        left: 20px;
+        bottom: 0;
+        width: 8rem;
+        height: 4rem;
+        border-radius: 10rem 10rem 0 0;
+    }
+
+    .landing-container .row .col .right-col .phone{
+        width: 200px;
+        position: absolute;
+        right: 60px;
+        top: 220px;
+        z-index: 1
+    }
+
+    .landing-container .row .col .right-col .car{
+        width: 320px;
+        position: absolute;
+        right: 100px;
+        top: 350px
+    }
+}
\ No newline at end of file
diff --git a/public/css/style.css b/public/css/style.css
index b97db15a..0203d9cb 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -3,6 +3,10 @@
 @import url('components/formStyles.css');
 @import url('components/sidenavbar.css');
 
+/* ---------------- External Styles ---------------- */
+@import url('landingpage.css');
+@import url('driver.css');
+
 /* ----------------- General Styles ---------------- */
 *{
     font-family: 'Trebuchet MS', sans-serif;
@@ -25,85 +29,6 @@
     font-size: 50px;
 }
 
-/* ----------------- Driver Dashboard Styles ---------------- */
-.page-container .section .container .emptyVehicle{
-    margin-top: 100px;
-    margin-left: 50px;
-    margin-right: 50px;
-    background-color: rgba(253, 198, 62, 0.07);
-    border: 2px dotted rgba(253, 198, 62, 0.24);
-    text-align: center;
-    border-radius: 20px;
-    padding-top: 50px;
-    padding-bottom: 50px;
-    color: rgba(140, 140, 140, 0.87);
-    font-size: 20px;
-}
-
-.page-container .section .container .table-container{
-    margin-left: 5vw;
-    margin-right: 5vw;
-}
-
-.page-container .section .container .table{
-    margin-top: 50px;
-    width: 100%;
-    border-collapse: collapse;
-    margin-bottom: 20px;
-    border-radius: 50px;
-}
-
-.page-container .section .container a{
-    text-decoration: none;
-    background-color: #fdc63e;
-    width: 100%;
-    color: #000000;
-    padding: 12px 20px;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: 0.3s;
-    margin-left: 5vw;
-}
-
-.page-container .section .container .sub-option {
-    text-decoration: none;
-    background-color: #fdc63e;
-    width: 100%;
-    color: #000000;
-    padding: 5px 10px;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: 0.3s;
-    margin-left: 2px;
-}
-
-.page-container .section .container a:hover{
-    background-color: #ffc400;
-    box-shadow: 0 0 10px 0.1px rgba(0, 0, 0, 0.20);
-}
-
-.page-container .section .container th{
-    background-color: #fccc04;
-    text-align: left;
-    padding: 10px;
-    border: 1px solid #ffffff;
-}
-
-.page-container .section .container tr{
-    background-color: #fff;
-}
-
-.page-container .section .container tr:nth-child(even){
-    background-color: rgba(252, 204, 4, 0.16);
-}
-
-.page-container .section .container td{
-    padding: 10px;
-    border: 1px solid #ffffff;
-}
-
 /* ----------------- Merchandiser Dashboard Styles ---------------- */
 .page-container .section .container .emptyParking{
     margin-top: 100px;
@@ -119,519 +44,6 @@
     font-size: 20px;
 }
 
-
-/* --------------- Index Page Styles --------------- */
-.landing-container{
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-}
-
-.landing-container .row{
-    display: flex;
-    margin-top: 180px;
-}
-
-.landing-container .row .col{
-    width: 50%;
-}
-
-.landing-container .row .col .left-col{
-    padding-left: 100px;
-    opacity: 0;
-    transform: translateY(-100px);
-    transition: opacity 1s, transform 1s;
-}
-
-.landing-container .row .col .left-col.reveal {
-    opacity: 1;
-    transform: translateY(0px);
-}
-
-.landing-container .row .col .right-col {
-    opacity: 0;
-    transform: translateY(-100px);
-    transition: opacity 1s, transform 1s;
-}
-
-.landing-container .row .col .right-col.reveal {
-    opacity: 1;
-    transform: translateY(-180px);
-}
-
-.landing-container .row .col .left-col h1{
-    font-size: 90px;
-    font-weight: 500;
-}
-
-.landing-container .row .col .left-col p{
-    color: rgba(0,0,0,0.29);
-    width: 40vw;
-}
-
-.landing-container .row .col .right-col .black-circle-1{
-    background-color: #1c1c1c;
-    border-radius: 50%;
-    height: 500px;
-    width: 500px;
-    position: absolute;
-    right: 100px;
-    top: 130px;
-}
-
-.landing-container .row .col .right-col .yellow-circle-1{
-    background: linear-gradient(to right, rgb(248,215,90), rgb(255,156,19));
-    border-radius: 50%;
-    height: 250px;
-    width: 250px;
-    z-index: 1;
-    position: absolute;
-    right: 70px;
-    top: 120px;
-}
-
-.landing-container .row .col .right-col .yellow-circle-2{
-    background: linear-gradient(to right, rgb(248,215,90), rgb(255,167,41));
-    border-radius: 50%;
-    height: 80px;
-    width: 80px;
-    z-index: 1;
-    position: absolute;
-    right: 550px;
-    top: 280px;
-}
-
-.landing-container .yellow-circle-3{
-    background: linear-gradient(to right, rgb(248,215,90), rgb(255,167,41));
-    z-index: -1;
-    position: absolute;
-    left: 80px;
-    bottom: 0;
-    width: 12rem;
-    height: 6rem;
-    border-radius: 10rem 10rem 0 0;
-}
-
-.landing-container .yellow-circle-4{
-    background: linear-gradient(to right, rgb(248,215,90), rgb(255,167,41));
-    border-radius: 50%;
-    height: 100px;
-    width: 100px;
-    z-index: -1;
-    position: absolute;
-    left: 35vw;
-    top: 220px;
-}
-
-
-.landing-container .yellow-circle-5{
-    background: linear-gradient(to right, rgb(248,215,90), rgb(255,167,41));
-    z-index: -1;
-    position: absolute;
-    right: 50vw;
-    top: 0;
-    width: 10rem;
-    height: 5rem;
-    border-radius: 0 0 10rem 10rem;
-}
-
-.landing-container .row .col .right-col .phone{
-    width: 350px;
-    position: absolute;
-    right: 150px;
-    top: 150px;
-    z-index: 1
-}
-
-.landing-container .row .col .right-col .car{
-    width: 500px;
-    position: absolute;
-    right: 250px;
-    top: 400px
-}
-
-@media screen and (max-width: 1379px){
-    .landing-container .row .col .left-col h1{
-        font-size: 85px;
-        font-weight: 500;
-    }
-}
-
-@media screen and (max-width: 1316px){
-    .landing-container .row .col .left-col h1{
-        font-size: 80px;
-        font-weight: 500;
-    }
-}
-
-@media screen and (max-width: 1255px){
-    .landing-container .row .col .left-col h1{
-        font-size: 75px;
-        font-weight: 500;
-    }
-}
-
-@media screen and (max-width: 1220px){
-    .landing-container .row .col .left-col{
-        padding-left: 50px;
-    }
-
-    .landing-container .row .col .left-col h1{
-        font-size: 65px;
-        font-weight: 500;
-    }
-
-    .landing-container .row .col .right-col .black-circle-1{
-        background-color: #1c1c1c;
-        border-radius: 50%;
-        height: 450px;
-        width: 450px;
-        position: absolute;
-        right: 50px;
-        top: 130px;
-    }
-
-    .landing-container .row .col .right-col .yellow-circle-1{
-        background: linear-gradient(to right, rgb(248,215,90), rgb(255,156,19));
-        border-radius: 50%;
-        height: 200px;
-        width: 200px;
-        z-index: 1;
-        position: absolute;
-        right: 30px;
-        top: 120px;
-    }
-
-    .landing-container .row .col .right-col .yellow-circle-2{
-        background: linear-gradient(to right, rgb(248,215,90), rgb(255,167,41));
-        border-radius: 50%;
-        height: 80px;
-        width: 80px;
-        z-index: 1;
-        position: absolute;
-        right: 450px;
-        top: 280px;
-    }
-
-    .landing-container .row .col .right-col .phone{
-        width: 300px;
-        position: absolute;
-        right: 120px;
-        top: 180px;
-        z-index: 1
-    }
-
-    .landing-container .row .col .right-col .car{
-        width: 480px;
-        position: absolute;
-        right: 220px;
-        top: 400px
-    }
-}
-
-@media screen and (max-width: 1000px){
-    .landing-container .row .col .left-col{
-        padding-left: 50px;
-    }
-
-    .landing-container .row .col .left-col h1{
-        font-size: 55px;
-        font-weight: 500;
-    }
-
-    .landing-container .row .col .left-col p{
-        margin-top: 50px;
-        color: rgba(0,0,0,0.29);
-        width: 30vw;
-    }
-
-    .landing-container .row .col .right-col .black-circle-1{
-        background-color: #1c1c1c;
-        border-radius: 50%;
-        height: 400px;
-        width: 400px;
-        position: absolute;
-        right: 50px;
-        top: 150px;
-    }
-
-    .landing-container .row .col .right-col .yellow-circle-1{
-        background: linear-gradient(to right, rgb(248,215,90), rgb(255,156,19));
-        border-radius: 50%;
-        height: 160px;
-        width: 160px;
-        z-index: 1;
-        position: absolute;
-        right: 30px;
-        top: 150px;
-    }
-
-    .landing-container .row .col .right-col .yellow-circle-2{
-        background: linear-gradient(to right, rgb(248,215,90), rgb(255,167,41));
-        border-radius: 50%;
-        height: 70px;
-        width: 70px;
-        z-index: 1;
-        position: absolute;
-        right: 400px;
-        top: 260px;
-    }
-
-    .landing-container .row .col .right-col .phone{
-        width: 270px;
-        position: absolute;
-        right: 100px;
-        top: 200px;
-        z-index: 1
-    }
-
-    .landing-container .row .col .right-col .car{
-        width: 450px;
-        position: absolute;
-        right: 180px;
-        top: 380px
-    }
-}
-
-@media screen and (max-width: 880px){
-    .landing-container .row .col .left-col{
-        padding-left: 30px;
-    }
-
-    .landing-container .row .col .left-col h1{
-        font-size: 50px;
-        font-weight: 500;
-    }
-
-    .landing-container .row .col .left-col p{
-        margin-top: 50px;
-        color: rgba(0,0,0,0.29);
-        width: 40vw;
-    }
-
-    .landing-container .row .col .right-col .black-circle-1{
-        background-color: #1c1c1c;
-        border-radius: 50%;
-        height: 350px;
-        width: 350px;
-        position: absolute;
-        right: 40px;
-        top: 190px;
-    }
-
-    .landing-container .row .col .right-col .yellow-circle-1{
-        background: linear-gradient(to right, rgb(248,215,90), rgb(255,156,19));
-        border-radius: 50%;
-        height: 140px;
-        width: 140px;
-        z-index: 1;
-        position: absolute;
-        right: 30px;
-        top: 180px;
-    }
-
-    .landing-container .row .col .right-col .yellow-circle-2{
-        background: linear-gradient(to right, rgb(248,215,90), rgb(255,167,41));
-        border-radius: 50%;
-        height: 60px;
-        width: 60px;
-        z-index: 1;
-        position: absolute;
-        right: 340px;
-        top: 270px;
-    }
-
-    .landing-container .yellow-circle-3{
-        background: linear-gradient(to right, rgb(248,215,90), rgb(255,167,41));
-        z-index: -1;
-        position: absolute;
-        left: 50px;
-        bottom: 0;
-        width: 10rem;
-        height: 5rem;
-        border-radius: 10rem 10rem 0 0;
-    }
-
-    .landing-container .yellow-circle-5{
-        background: linear-gradient(to right, rgb(248,215,90), rgb(255,167,41));
-        z-index: -1;
-        position: absolute;
-        right: 40vw;
-        top: 0;
-        width: 8rem;
-        height: 4rem;
-        border-radius: 0 0 10rem 10rem;
-    }
-
-    .landing-container .row .col .right-col .phone{
-        width: 230px;
-        position: absolute;
-        right: 80px;
-        top: 240px;
-        z-index: 1
-    }
-
-    .landing-container .row .col .right-col .car{
-        width: 380px;
-        position: absolute;
-        right: 140px;
-        top: 390px
-    }
-}
-
-@media screen and (max-width: 760px){
-    .landing-container .row .col .left-col{
-        padding-left: 20px;
-    }
-
-    .landing-container .row .col .left-col h1{
-        font-size: 45px;
-        font-weight: 500;
-    }
-
-    .landing-container .row .col .left-col p{
-        margin-top: 50px;
-        color: rgba(0,0,0,0.29);
-        width: 40vw;
-    }
-
-    .landing-container .row .col .right-col .black-circle-1{
-        background-color: #1c1c1c;
-        border-radius: 50%;
-        height: 300px;
-        width: 300px;
-        position: absolute;
-        right: 30px;
-        top: 200px;
-    }
-
-    .landing-container .row .col .right-col .yellow-circle-1{
-        background: linear-gradient(to right, rgb(248,215,90), rgb(255,156,19));
-        border-radius: 50%;
-        height: 120px;
-        width: 120px;
-        z-index: 1;
-        position: absolute;
-        right: 30px;
-        top: 200px;
-    }
-
-    .landing-container .row .col .right-col .yellow-circle-2{
-        background: linear-gradient(to right, rgb(248,215,90), rgb(255,167,41));
-        border-radius: 50%;
-        height: 50px;
-        width: 50px;
-        z-index: 1;
-        position: absolute;
-        right: 290px;
-        top: 270px;
-    }
-
-    .landing-container .yellow-circle-3{
-        background: linear-gradient(to right, rgb(248,215,90), rgb(255,167,41));
-        z-index: -1;
-        position: absolute;
-        left: 20px;
-        bottom: 0;
-        width: 8rem;
-        height: 4rem;
-        border-radius: 10rem 10rem 0 0;
-    }
-
-    .landing-container .row .col .right-col .phone{
-        width: 200px;
-        position: absolute;
-        right: 60px;
-        top: 220px;
-        z-index: 1
-    }
-
-    .landing-container .row .col .right-col .car{
-        width: 320px;
-        position: absolute;
-        right: 100px;
-        top: 350px
-    }
-}
-
-@media screen and (max-width: 660px){
-    .landing-container .row .col .left-col{
-        padding-left: 20px;
-        text-align: center;
-    }
-
-    .landing-container .row .col .left-col h1{
-        font-size: 45px;
-        font-weight: 500;
-    }
-
-    .landing-container .row .col .left-col p{
-        margin-top: 50px;
-        color: rgba(0,0,0,0.29);
-        width: 40vw;
-    }
-
-    .landing-container .row .col .right-col .black-circle-1{
-        background-color: #1c1c1c;
-        border-radius: 50%;
-        height: 300px;
-        width: 300px;
-        position: absolute;
-        right: 30px;
-        top: 200px;
-    }
-
-    .landing-container .row .col .right-col .yellow-circle-1{
-        background: linear-gradient(to right, rgb(248,215,90), rgb(255,156,19));
-        border-radius: 50%;
-        height: 120px;
-        width: 120px;
-        z-index: 1;
-        position: absolute;
-        right: 30px;
-        top: 200px;
-    }
-
-    .landing-container .row .col .right-col .yellow-circle-2{
-        background: linear-gradient(to right, rgb(248,215,90), rgb(255,167,41));
-        border-radius: 50%;
-        height: 50px;
-        width: 50px;
-        z-index: 1;
-        position: absolute;
-        right: 290px;
-        top: 270px;
-    }
-
-    .landing-container .yellow-circle-3{
-        background: linear-gradient(to right, rgb(248,215,90), rgb(255,167,41));
-        z-index: -1;
-        position: absolute;
-        left: 20px;
-        bottom: 0;
-        width: 8rem;
-        height: 4rem;
-        border-radius: 10rem 10rem 0 0;
-    }
-
-    .landing-container .row .col .right-col .phone{
-        width: 200px;
-        position: absolute;
-        right: 60px;
-        top: 220px;
-        z-index: 1
-    }
-
-    .landing-container .row .col .right-col .car{
-        width: 320px;
-        position: absolute;
-        right: 100px;
-        top: 350px
-    }
-}
-
 /* ------------------------------- SVG Styles ------------------------------- */
 .svg .svg-1{
     width: 700px;
diff --git a/public/images/location.png b/public/images/location.png
new file mode 100644
index 00000000..99b5c6e4
Binary files /dev/null and b/public/images/location.png differ