fixed navbar

public/css/jquery.bxslider.css

@@ -0,0 +1,178 @@
+/** VARIABLES
+===================================*/
+/** RESET AND LAYOUT
+===================================*/
+.bx-wrapper {
+    position: relative;
+    margin-bottom: 60px;
+    padding: 0;
+    *zoom: 1;
+    -ms-touch-action: pan-y;
+    touch-action: pan-y;
+  }
+  .bx-wrapper img {
+    max-width: 100%;
+    display: block;
+  }
+  .bxslider {
+    margin: 0;
+    padding: 0;
+  }
+  ul.bxslider {
+    list-style: none;
+  }
+  .bx-viewport {
+    /*fix other elements on the page moving (on Chrome)*/
+    -webkit-transform: translatez(0);
+  }
+  /** THEME
+  ===================================*/
+  .bx-wrapper {
+    -moz-box-shadow: 0 0 5px #ccc;
+    -webkit-box-shadow: 0 0 5px #ccc;
+    box-shadow: 0 0 5px #ccc;
+    border: 5px solid #fff;
+    background: #fff;
+  }
+  .bx-wrapper .bx-pager,
+  .bx-wrapper .bx-controls-auto {
+    position: absolute;
+    bottom: -30px;
+    width: 100%;
+  }
+  /* LOADER */
+  .bx-wrapper .bx-loading {
+    min-height: 50px;
+    background: url('images/bx_loader.gif') center center no-repeat #ffffff;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2000;
+  }
+  /* PAGER */
+  .bx-wrapper .bx-pager {
+    text-align: center;
+    font-size: .85em;
+    font-family: Arial;
+    font-weight: bold;
+    color: #666;
+    padding-top: 20px;
+  }
+  .bx-wrapper .bx-pager.bx-default-pager a {
+    background: #666;
+    text-indent: -9999px;
+    display: block;
+    width: 10px;
+    height: 10px;
+    margin: 0 5px;
+    outline: 0;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+  }
+  .bx-wrapper .bx-pager.bx-default-pager a:hover,
+  .bx-wrapper .bx-pager.bx-default-pager a.active,
+  .bx-wrapper .bx-pager.bx-default-pager a:focus {
+    background: #000;
+  }
+  .bx-wrapper .bx-pager-item,
+  .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
+    display: inline-block;
+    vertical-align: bottom;
+    *zoom: 1;
+    *display: inline;
+  }
+  .bx-wrapper .bx-pager-item {
+    font-size: 0;
+    line-height: 0;
+  }
+  /* DIRECTION CONTROLS (NEXT / PREV) */
+  .bx-wrapper .bx-prev {
+    left: 10px;
+    background: url('images/controls.png') no-repeat 0 -32px;
+  }
+  .bx-wrapper .bx-prev:hover,
+  .bx-wrapper .bx-prev:focus {
+    background-position: 0 0;
+  }
+  .bx-wrapper .bx-next {
+    right: 10px;
+    background: url('images/controls.png') no-repeat -43px -32px;
+  }
+  .bx-wrapper .bx-next:hover,
+  .bx-wrapper .bx-next:focus {
+    background-position: -43px 0;
+  }
+  .bx-wrapper .bx-controls-direction a {
+    position: absolute;
+    top: 50%;
+    margin-top: -16px;
+    outline: 0;
+    width: 32px;
+    height: 32px;
+    text-indent: -9999px;
+    z-index: 9999;
+  }
+  .bx-wrapper .bx-controls-direction a.disabled {
+    display: none;
+  }
+  /* AUTO CONTROLS (START / STOP) */
+  .bx-wrapper .bx-controls-auto {
+    text-align: center;
+  }
+  .bx-wrapper .bx-controls-auto .bx-start {
+    display: block;
+    text-indent: -9999px;
+    width: 10px;
+    height: 11px;
+    outline: 0;
+    background: url('images/controls.png') -86px -11px no-repeat;
+    margin: 0 3px;
+  }
+  .bx-wrapper .bx-controls-auto .bx-start:hover,
+  .bx-wrapper .bx-controls-auto .bx-start.active,
+  .bx-wrapper .bx-controls-auto .bx-start:focus {
+    background-position: -86px 0;
+  }
+  .bx-wrapper .bx-controls-auto .bx-stop {
+    display: block;
+    text-indent: -9999px;
+    width: 9px;
+    height: 11px;
+    outline: 0;
+    background: url('images/controls.png') -86px -44px no-repeat;
+    margin: 0 3px;
+  }
+  .bx-wrapper .bx-controls-auto .bx-stop:hover,
+  .bx-wrapper .bx-controls-auto .bx-stop.active,
+  .bx-wrapper .bx-controls-auto .bx-stop:focus {
+    background-position: -86px -33px;
+  }
+  /* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
+  .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
+    text-align: left;
+    width: 80%;
+  }
+  .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
+    right: 0;
+    width: 35px;
+  }
+  /* IMAGE CAPTIONS */
+  .bx-wrapper .bx-caption {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    background: #666;
+    background: rgba(80, 80, 80, 0.75);
+    width: 100%;
+  }
+  .bx-wrapper .bx-caption span {
+    color: #fff;
+    font-family: Arial;
+    display: block;
+    font-size: .85em;
+    padding: 10px;
+  }
+  

public/index.html

@@ -12,13 +12,12 @@
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="stylesheet" href="%PUBLIC_URL%/style.css" type="text/css" />
     <link rel="stylesheet" href="%PUBLIC_URL%/css/animate.css" type="text/css" />
+    <link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.min.css" type="text/css" />
+    <link rel="stylesheet" href="%PUBLIC_URL%/css/jquery.bxslider.css" type="text/css" />
 
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
-	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
-
-	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
 	<!-- Font Google -->
 	<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
+	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <!--
@@ -35,12 +34,11 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Safe QR App</title>
   </head>
   <body>
-	
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> 
+	<script src="%PUBLIC_URL%/js/bootstrap.min.js"></script> 
+	<script src="%PUBLIC_URL%/js/jquery.min.js"></script> 
 <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> 
 <!-- scrollIt js --> 
 <script src="%PUBLIC_URL%/js/scrollIt.min.js"></script> 

src/About.tsx

@@ -13,9 +13,16 @@ const About: React.FC = () => {
                             <h3>About</h3>
                             <span className="line"></span>
                             <p>
-                                Sed quis nisi nisi. Proin consectetur porttitor
-                                dui sit amet viverra. Fusce sit amet lorem
-                                faucibus, vestibulum ante in, pharetra ante.
+                            Currently, in the QR code security landscape, there is a gap in comprehensive protection against potential 
+                            threats posed by malicious QR codes. Existing solutions often provide basic functionality, such as scanning QR 
+                            codes to extract website URLs. However, these applications lack robust security measures to defend users against 
+                            various types of malicious content embedded within QR codes.
+                            </p>
+                            <p>
+                            Our intention with the SafeQR project is to bridge this gap by developing a comprehensive mobile application 
+                            that offers advanced security features for scanning and interacting with QR codes. Unlike existing solutions 
+                            that primarily focus on verifying website URLs, our app aims to take a more proactive and broad approach to QR 
+                            code security.
                             </p>
                         </div>
                         <div className="section-content text-center">
@@ -30,11 +37,9 @@ const About: React.FC = () => {
                                             className="fa fa-life-ring"
                                             aria-hidden="true"
                                         ></i>
-                                        <h5>Support</h5>
+                                        <h5>QR Code Scanning</h5>
                                         <p>
-                                            Phasellus lobortis justo a magna
-                                            facilisis, in commodo tellus rutrum.
-                                            Sed vitae condimentum nulla.
+                                        The application will have the capability to scan QR codes directly using a camera or from saved images.
                                         </p>
                                     </div>
                                 </div>
@@ -50,9 +55,8 @@ const About: React.FC = () => {
                                         ></i>
                                         <h5>Cross Platform</h5>
                                         <p>
-                                            Phasellus lobortis justo a magna
-                                            facilisis, in commodo tellus rutrum.
-                                            Sed vitae condimentum nulla.
+                                        Designed to function seamlessly on both iOS and Android platforms, ensuring a broad user base can 
+                                        benefit from the application's protective features.
                                         </p>
                                     </div>
                                 </div>
@@ -66,18 +70,17 @@ const About: React.FC = () => {
                                             className="fa fa-bolt"
                                             aria-hidden="true"
                                         ></i>
-                                        <h5>Fast</h5>
+                                        <h5>Sandboxing for Safe Browsing</h5>
                                         <p>
-                                            Phasellus lobortis justo a magna
-                                            facilisis, in commodo tellus rutrum.
-                                            Sed vitae condimentum nulla.
+                                        To enhance security, the application will open links in a sandboxed environment. This protected mode 
+                                        helps isolate and contain potential threats away from the user's device.
                                         </p>
                                     </div>
                                 </div>
                             </div>
-                            <a href="#" className="about-btn">
+                            <a href="#" data-scroll-nav="2" className="about-btn">
                                 Learn More
-                            </a>{" "}
+                            </a>
                         </div>
                     </div>
                 </div>

src/App.tsx

@@ -1,25 +1,25 @@
-import React from 'react';
 import Header from './Header'
 import Banner from './Banner'
 import About from './About'
-import Video from './Video'
 import Features from './Features'
 import Team from './Team'
 import Faq from './Faq'
 import Footer from './Footer'
+import ContactUs from './ContactUs'
+
 
 function App() {
   return (
-    <div>
+    <>
       <Header />
       <Banner />
       <About />
-      <Video />
       <Features />
       <Team />
       <Faq />
+      <ContactUs />
       <Footer />
-    </div>
+    </>
   );
 }
 

src/Banner.tsx

@@ -11,18 +11,6 @@ const Banner: React.FC = () => {
                                 <h2 className="white">
                                     Safe QR - Your Secure QR Code Scanner
                                 </h2>
-                                <h6 className="white">
-                                    This awesome template designed by{" "}
-                                    <a
-                                        href="http://w3Template.com"
-                                        target="_blank"
-                                        rel="dofollow"
-                                        className="weblink"
-                                    >
-                                        W3 Template
-                                    </a>
-                                    .
-                                </h6>
                                 <p className="banner-text white">
                                     Safe QR is a mobile app designed for
                                     scanning QR codes, offering a simple and
@@ -30,15 +18,16 @@ const Banner: React.FC = () => {
                                     is easy to use and provides an interactive
                                     and intuitive experience for users. With
                                     Safe QR, you can quickly scan QR codes with
-                                    high-quality results.
+                                    a peace of mind.
                                 </p>
                                 <ul>
                                     <li>
-                                        <a href="#">
+                                        <a href="#" rel="noopener noreferrer">
                                             <img
                                                 src="../marketing/images/appstore.png"
                                                 className="wow fadeInUp"
                                                 data-wow-delay="0.4s"
+                                                alt=""
                                             />
                                         </a>
                                     </li>
@@ -48,6 +37,7 @@ const Banner: React.FC = () => {
                                                 src="../marketing/images/playstore.png"
                                                 className="wow fadeInUp"
                                                 data-wow-delay="0.7s"
+                                                alt=""
                                             />
                                         </a>
                                     </li>
@@ -59,6 +49,7 @@ const Banner: React.FC = () => {
                             <img
                                 src="../marketing/images/iphone-screen.png"
                                 className="img-fluid wow fadeInUp"
+                                alt=""
                             />{" "}
                         </div>
                     </div>
@@ -69,6 +60,7 @@ const Banner: React.FC = () => {
                 <img
                     className="svg-hero"
                     src="../marketing/images/applight-wave.svg"
+                    alt=""
                 />{" "}
             </span>
         </section>

src/ContactUs.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+const ContactUs: React.FC = () => {
+    return (
+        <section className="contact section-padding" data-scroll-index='6'>
+          <div className="container">
+            <div className="row">
+              <div className="col-md-12">
+                <div className="sectioner-header text-center">
+                  <h3>Contact us</h3>
+                  <span className="line"></span>
+                  <p>We'd love to hear from you! Whether you are curious about the features, a free Trial, We're ready to serve you!</p>
+                </div>
+                <div className="section-content">
+                  <div className="row">
+                    <div className="col-sm-12 col-md-12 col-lg-6">
+                    <div className="contact-info white">
+                        <div className="contact-item media"> <i className="fa fa-envelope media-left media-right-margin"></i>
+                          <div className="media-body">
+                            <p className="text-uppercase">E-mail</p>
+                            <p className="text-uppercase"><a className="text-white" href="mailto:safeqr.fyp.24.s2.43p@gmail.com">safeqr.fyp.24.s2.43p@gmail.com</a> </p>
+                          </div>
+                        </div>
+                      </div>
+                      
+                    </div>
+                    <div className="col-sm-12 col-md-12 col-lg-6">
+                      <div className="contact-info white">
+                        <div className="contact-item media"> <i className="fa fa-clock media-left media-right-margin"></i>
+                          <div className="media-body">
+                            <p className="text-uppercase">Working Hours</p>
+                            <p className="text-uppercase">Mon-Fri 9.00 AM to 5.00PM.</p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+    );
+};
+
+export default ContactUs;

src/Features.tsx

@@ -9,29 +9,31 @@ const Features: React.FC = () => {
         <div className="sectioner-header text-center">
           <h3>Features</h3>
           <span className="line"></span>
-          <p>Safe QR is a mobile app designed for scanning QR codes, offering a simple and effective QR code scanning service. The app is easy to use and provides an interactive and intuitive experience for users. With Safe QR, you can quickly scan QR codes with high-quality results.</p>
+          <p>Safe QR is a mobile app designed for scanning QR codes, offering a simple and effective QR code scanning service. The app is 
+            easy to use and provides an interactive and intuitive experience for users. With Safe QR, you can quickly scan QR codes with 
+            high-quality results.</p>
         </div>
         <div className="section-content text-center">
           <div className="row">
             <div className="col-md-4 col-sm-12">
               <div className="media single-feature wow fadeInUp" data-wow-delay="0.2s">
                 <div className="media-body text-right media-right-margin">
-                  <h5>Safe and Secure</h5>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididugnt ut labore</p>
+                  <h5>SSL Checking</h5>
+                  <p>The security of the connection to the website associated with the QR code by verifying its SSL/TLS certificate.</p>
                 </div>
                 <div className="media-right icon-border"> <span className="fa fa-bolt" aria-hidden="true"></span> </div>
               </div>
               <div className="media single-feature wow fadeInUp" data-wow-delay="0.4s">
                 <div className="media-body text-right media-right-margin">
-                  <h5>Efficient Scanning</h5>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididugnt ut labore</p>
+                  <h5>Payload Inspection</h5>
+                  <p> Preview the contents of a URL to assess its relevance and safety before deciding to proceed with opening it.</p>
                 </div>
                 <div className="media-right icon-border"> <span className="fa fa-battery-full" aria-hidden="true"></span> </div>
               </div>
               <div className="media single-feature wow fadeInUp" data-wow-delay="0.6s">
                 <div className="media-body text-right media-right-margin">
-                  <h5>User Friendly Interface</h5>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididugnt ut labore</p>
+                  <h5>Copy payload to Clipboard</h5>
+                  <p>Copy the contents of the URL extracted from a QR code to the device’s clipboard.</p>
                 </div>
                 <div className="media-right icon-border"> <span className="fa fa-wifi" aria-hidden="true"></span> </div>
               </div>
@@ -43,22 +45,24 @@ const Features: React.FC = () => {
               <div className="media single-feature wow fadeInUp" data-wow-delay="0.2s">
                 <div className="media-left icon-border media-right-margin"> <span className="fa fa-check-double" aria-hidden="true"></span> </div>
                 <div className="media-body text-left">
-                  <h5>Reliable Performance</h5>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididugnt ut labore</p>
+                  <h5>History of scans</h5>
+                  <p>View the list of saved QR codes in the application's history for reference.</p>
                 </div>
               </div>
               <div className="media single-feature wow fadeInUp" data-wow-delay="0.4s">
                 <div className="media-left icon-border media-right-margin"> <span className="fa fa-dollar-sign" aria-hidden="true"></span> </div>
                 <div className="media-body text-left">
-                  <h5>Effortless QR Scanning</h5>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididugnt ut labore</p>
+                  <h5>Open in selected browser</h5>
+                  <p>Open the scanned QR code in your favourite browser</p>
                 </div>
               </div>
               <div className="media single-feature wow fadeInUp" data-wow-delay="0.6s">
                 <div className="media-left icon-border media-right-margin"> <span className="fa fa-hdd" aria-hidden="true"></span> </div>
                 <div className="media-body text-left">
-                  <h5>Instant Results</h5>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididugnt ut labore</p>
+                  <h5>Bookmarking scans</h5>
+                  <p>Automatically saved to the application's history for future reference or sharing. Bookmark a scanned QR code for 
+                    easy access and reference during the payload inspection phase.
+                  </p>
                 </div>
               </div>
             </div>

src/Footer.tsx

@@ -9,7 +9,12 @@ const Footer: React.FC = () => {
         <div className="sectioner-header text-center white">
           <h3>Download Our App</h3>
           <span className="line"></span>
-          <p className="white">Sed quis nisi nisi. Proin consectetur porttitor dui sit amet viverra. Fusce sit amet lorem faucibus, vestibulum ante in, pharetra ante.</p>
+          <p className="white">Inspired by the growing reliance on QR codes for various interactions and the increasing need for heightened 
+          security in the digital landscape, our motivation is to empower users with a secure and seamless QR code experience. We are driven 
+          by the desire to mitigate security risks associated with QR code usage and to provide users with peace of mind while engaging in
+           digital transactions. Our motivation fuels our commitment to innovation and excellence in developing a solution that addresses 
+           the evolving challenges of QR code security.
+        </p>
         </div>
       </div>
       <div className="col-md-12">

src/Header.tsx

@@ -5,7 +5,7 @@ const Header: React.FC = () => {
 
     useEffect(() => {
         function setFixed() {
-            if (window.scrollY > 0) {
+            if (window.scrollY > 50) {
                 setFix(true);
                 return;
             } 
@@ -19,9 +19,9 @@ const Header: React.FC = () => {
     }, []);
 
     return (
-        <nav className="navbar navbar-expand-lg banner">
+        <nav className={fix ? "navbar navbar-expand-lg nav-scroll": "navbar navbar-expand-lg banner"}>
             <div className="container">
-                <img src="../marketing/images/logo.png" alt="logo" className="logo-1" />
+                <img src={fix ? "../marketing/images/logo-black.png" : "../marketing/images/logo.png"} alt="logo" width="160" height="80" />
                 <button
                     className="navbar-toggler"
                     type="button"
@@ -75,16 +75,6 @@ const Header: React.FC = () => {
                                 Team
                             </a>{" "}
                         </li>
-                        <li className="nav-item">
-                            {" "}
-                            <a
-                                className="nav-link"
-                                href="#"
-                                data-scroll-nav="4"
-                            >
-                                Testimonials
-                            </a>{" "}
-                        </li>
                         <li className="nav-item">
                             {" "}
                             <a

src/Team.tsx

@@ -9,7 +9,9 @@ const Team: React.FC = () => {
         <div className="sectioner-header text-center">
           <h3>Our Team</h3>
           <span className="line"></span>
-          <p>Our mission is to provide the most secured QR code scans to achieve your business or personal goals.</p>
+          <p>Our mission is to pioneer the development of a robust QR code security solution that not only safeguards users from malicious
+            activities but also fosters trust and confidence in QR code technology. We aim to achieve this by continuously innovating and 
+            adapting our solution to evolving threats while promoting collaboration and integration with other QR scanning applications.</p>
         </div>
         <div className="section-content text-center">
           <div className="row">
@@ -26,14 +28,14 @@ const Team: React.FC = () => {
               </div>
             </div>
             <div className="col-md-3">
-              <div className="team-detail wow bounce" data-wow-delay="0.2s"> <img src="../marketing/images/user1.jpg" className="img-fluid"/>
+              <div className="team-detail wow bounce" data-wow-delay="0.2s"> <img src="../marketing/images/user4.jpg" className="img-fluid"/>
                 <h4>Seng Jin Hui</h4>
                 <p>Marketing Specialist, Backend Developer</p>
               </div>
             </div>
             <div className="col-md-3">
               <div className="team-detail wow bounce" data-wow-delay="0.4s"> <img src="../marketing/images/user2.jpg" className="img-fluid"/>
-                <h4>MUHAMMED ISKANDER SHAH</h4>
+                <h4>Muhammed Iskander Shah</h4>
                 <p>Team Leader, Full Stack Developer</p>
               </div>
             </div>

src/index.css

@@ -0,0 +1,614 @@
+* {
+	padding:0;
+	margin:0;
+}
+body {
+	font-family: 'Poppins', sans-serif;
+	font-size: 14px;
+}
+a {
+	color:#5f0099;
+}
+a:hover {
+	color:#5f0099;
+}
+h1, h2, h3 {
+	font-weight: 700;
+}
+h4, h5 {
+	font-weight:600;
+}
+h6 {
+	font-weight:500;
+}
+.white {
+	color:#ffffff !important;
+}
+.black {
+	color:#000000;
+}
+.navbar {
+	position: fixed;
+	right: 0;
+	left: 0;
+	width: 100%;
+	padding-left: 0;
+	padding-right: 0;
+	min-height: 50px;
+	line-height: 50px;
+	background: transparent;
+	z-index: 9999999;
+}
+.navbar .active {
+	color: #5f0099 !important;
+}
+.navbar .navbar-brand {
+}
+.navbar .nav-item {
+	margin: 0 5px;
+	padding: 0;
+}
+.navbar .nav-item a {
+	color: #fff;
+	text-transform: uppercase;
+	font-weight: 600;
+	font-size: 13px;
+}
+.navbar .nav-item a:hover {
+	color: #5f0099;
+}
+.navbar .nav-link {
+	position: relative;
+	padding: 0;
+}
+.navbar .navbar-toggler {
+	cursor: pointer;
+}
+.navbar .navbar-toggler span {
+	color: #fff;
+}
+.navbar-style2 .active:after, .navbar-style2 .nav-link:after {
+	display: none;
+}
+.nav-scroll {
+	position: fixed;
+	right: 0;
+	left: 0;
+	width: 100%;
+	padding-left: 0;
+	padding-right: 0;
+	min-height: 50px;
+	line-height: 50px;
+	background: transparent;
+	z-index: 9999999;
+	background: #fff;
+	-webkit-box-shadow: 0 1px 8px 3px rgba(0, 0, 0, 0.0509803922);
+	box-shadow: 0 1px 8px 3px rgba(0, 0, 0, 0.0509803922);
+	-webkit-transition: all .4s ease;
+	transition: all .4s ease;
+}
+.nav-scroll .navbar-nav > li > a {
+	color: #333;
+}
+.nav-scroll .navbar-brand img {
+	-webkit-transform: scale(1.03) !important;
+	transform: scale(1.03) !important;
+}
+.nav-scroll .navbar-toggler {
+	cursor: pointer;
+}
+.nav-scroll .navbar-toggler span {
+	color: #333;
+}
+.nav-scroll .nav-link:hover:after {
+	background-color: #2388ed;
+}
+.nav-scroll .active {
+	position: relative;
+}
+.banner {
+	background: #7a60ff;
+	background: linear-gradient(to left, #7a60ff, #cd9ffa);
+	padding:20px 0px;
+	padding-bottom: 100px;
+	position:relative;
+}
+.banner::before {
+	content: "";
+	display: block;
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background: url(../public/images/pattern.png);
+}
+.banner a.weblink {
+	color:#ffffff;
+	border-bottom:1px dotted #ffffff;
+}
+.banner a:hover {
+	text-decoration:none;
+}
+.svg-wave {
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+}
+.banner-text {
+	padding-right:80px;
+	margin:50px 0px 0px;
+}
+.banner-text p {
+	margin:40px 0px;
+}
+.banner-text ul {
+	list-style: none;
+}
+.banner-text ul li {
+	display: inline-block;
+	margin: 0px 10px 10px 0px;
+}
+.banner-text ul li a {
+	display: block;
+}
+.banner-text ul li a img {
+	width: 150px;
+	border-radius: 7px;
+}
+.prelative {
+	position:relative
+}
+.section-padding {
+	padding:80px 0px;
+}
+.sectioner-header {
+	width:69%;
+	margin:0 auto;
+}
+.line {
+	height: 2px;
+	width: 50px;
+	background: #8e1efc;
+	display: block;
+	margin: 20px auto 20px;
+}
+.line::after {
+	content:"";
+	position: absolute;
+	left: 50%;
+	width: 150px;
+	height: 2px;
+	border-bottom: 2px dashed #8e1efc;
+	margin-left: -75px;
+}
+.sectioner-header p {
+	color:#818992;
+	font-size: 17px;
+}
+.section-content {
+	margin-top: 80px;
+}
+.icon-box {
+	margin-bottom:50px;
+}
+.icon-box i {
+	display: block;
+	position: relative;
+	width: 135px;
+	height: 135px;
+	border-radius: 100px;
+	background: #7a60ff;
+	background:  linear-gradient(to left, #7a60ff, #cd9ffa);
+	color: #ffffff;
+	font-size: 50px;
+	line-height: 135px;
+	margin: 0 auto;
+}
+.icon-box h5 {
+	margin-top:30px;
+}
+.icon-box p {
+	color: #818992;
+	font-size: 14px;
+	width: 80%;
+	margin: 0 auto;
+}
+.about-btn {
+	color: #8e1efc;
+	padding: 10px 40px;
+	border: 2px solid #8e1efc;
+	border-radius: 7px;
+	margin-top: 30px;
+	display: inline-block;
+	font-size: 18px;
+}
+.about-btn:hover {
+	background:#8e1efc;
+	color:#ffffff;
+	text-decoration:none;
+}
+.video-section {
+	background: url(../public/images/video-bg.jpg) no-repeat fixed center;
+	background-size: cover;
+	overflow: hidden;
+}
+.video-overlay {
+	background: linear-gradient(to left, rgba(122, 96, 255, 0.90), rgba(205, 159, 250, 0.90));
+}
+.video-section h3 {
+	font-weight: 600;
+	font-size: 38px;
+}
+.video-section i {
+	display: block;
+	position: relative;
+	width: 70px;
+	height: 70px;
+	border-radius: 100px;
+	background: #ffffff;
+	color: #8e1efc;
+	font-size: 30px;
+	line-height: 70px;
+	margin: 0 auto;
+	cursor:pointer;
+}
+.video-popup {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 99999;
+	background: rgba(0, 0, 0, 0.5);
+	display: none;
+	align-content: center !important;
+	-ms-flex-line-pack: center !important;
+	-ms-flex-align: center !important;
+	align-items: center !important;
+	-ms-flex-pack: center !important;
+	justify-content: center !important;
+}
+.video-popup .video-src {
+	position: relative;
+	width: 700px;
+	max-width: 80%;
+}
+.video-popup .iframe-src {
+	width: 100%;
+	height: 0;
+	padding-top: 56.3%;
+	position: relative;
+	display: none;
+}
+.video-popup .iframe-src iframe {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+.single-feature {
+	margin-bottom: 80px;
+	margin-top: 40px;
+}
+.single-feature h5 {
+	font-size: 16px;
+}
+.media-right-margin {
+	margin-right:25px;
+}
+.single-feature p {
+	font-size: 13px;
+}
+.icon-border {
+}
+.icon-border span {
+	display: block;
+	position: relative;
+	width: 50px;
+	height: 50px;
+	border-radius: 100px;
+	color: rgb(142, 30, 252);
+	font-size: 18px;
+	line-height: 50px;
+	border: 1px solid rgb(142, 30, 252);
+}
+.team {
+	background: #fafafa;
+	border-top: 1px solid #e4e4e4;
+}
+.team-detail {
+	margin-top:40px;
+}
+.team-detail img {
+	border-radius: 50%;
+	width: 70%;
+}
+.team-detail h4 {
+	color:rgb(142, 30, 252);
+	margin-top: 20px;
+	font-size: 17px;
+	margin-bottom: 0px;
+}
+.testimonial {
+	background: #7a60ff;
+	background: linear-gradient(to left, #7a60ff, #cd9ffa);
+	padding:100px 0px;
+	position:relative;
+}
+.testimonial::before {
+	content: "";
+	display: block;
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background: url(../public/images/pattern.png);
+}
+.bx-prev {
+	left: -90px !important;
+	background: url(../public/images/arrow-left.png) no-repeat !important;
+	background-size: auto auto !important;
+	background-size: 100% 100% !important;
+}
+.bx-next {
+	right: -90px !important;
+	background: url(../public/images/arrow-right.png) no-repeat !important;
+	background-size: auto auto !important;
+	background-size: 100% 100% !important;
+}
+.bx-wrapper {
+	border: none !important;
+	background: rgba(255, 255, 255, 0.81) !important;
+	border-radius: 5px !important;
+	box-shadow:none !important;
+}
+.slider-item {
+	padding:20px;
+}
+.slider .test-img img {
+	border: 12px solid #fff;
+	border-radius: 50%;
+	width: 100%;
+	height: auto;
+}
+.test-img {
+	float: left;
+	width: 20%;
+	margin-right:5%;
+}
+.test-text {
+	float: left;
+	width: 75%;
+}
+.slider .title {
+	display: block;
+	position: relative;
+	margin: 0 0 20px;
+	font-size: 1.125em;
+	line-height: 1.25;
+}
+.slider .title span {
+	display: block;
+	font-size: 1.5em;
+	font-weight: 700;
+}
+.faq {
+	background: #fafafa;
+	border-bottom: 1px solid #e4e4e4;
+}
+.faq-content {
+	margin: 20px 0px;
+}
+.faq-content h4 {
+	font-weight: 400;
+	font-size: 20px;
+}
+.faq-content p {
+	color: #818992;
+	font-weight:300;
+	margin-top:15px;
+}
+#contact_form .form-input {
+	border: 1px solid #e4e4e4;
+}
+input {
+	height: 42px;
+	padding: 0 1rem;
+	background: #fff;
+	border-radius: 30px;
+	margin-bottom: 1rem;
+	-webkit-transition: all 0.3s ease-in-out;
+	-moz-transition: all 0.3s ease-in-out;
+	-o-transition: all 0.3s ease-in-out;
+	transition: all 0.3s ease-in-out;
+	border:0;
+}
+#contact_form textarea {
+	resize: none;
+	padding: 1rem;
+	height: 150px;
+	background: #fff;
+	border: 0;
+	border-radius: 30px;
+	margin-bottom: 1rem;
+	-webkit-transition: all 0.3s ease-in-out;
+	-moz-transition: all 0.3s ease-in-out;
+	-o-transition: all 0.3s ease-in-out;
+	transition: all 0.3s ease-in-out;
+}
+.btn-grad {
+ padding: .7rem 2rem;
+	display: inline-block;
+	color: #fff;
+	border-radius: 2rem;
+	border: 0;
+	background: #7a60ff;
+	background: linear-gradient(to left, #7a60ff, #cd9ffa);
+	cursor:pointer;
+}
+.contact-info {
+	padding: 2rem 2rem 1rem;
+	border-radius: 8px;
+	background: #7a60ff;
+	background: linear-gradient(to left, #7a60ff, #cd9ffa);
+}
+.contact-item {
+	margin:23px 0px;
+}
+.contact-item i {
+	font-size: 20px;
+}
+.contact-item p {
+	line-height: 20px;
+	margin: 0;
+}
+.download {
+	background: #7a60ff;
+	background: linear-gradient(to left, #7a60ff, #cd9ffa);
+	padding:100px 0px;
+	position:relative;
+}
+.download::before {
+	content: "";
+	display: block;
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background: url(../public/images/pattern.png);
+}
+.download ul {
+	list-style: none;
+}
+.download ul li {
+	display: inline-block;
+	margin: 0px 10px 10px 0px;
+}
+.download ul li a {
+	display: block;
+}
+.download ul li a img {
+	width: 150px;
+	border-radius: 7px;
+}
+.footer-copy {
+	background: #ffffff;
+	color: #242424;
+	font-size: 13px;
+	text-align: center;
+	padding:15px 0px;
+}
+.footer-copy p {
+	margin-bottom:0px;
+}
+@media all and (max-width:991px) {
+.navbar .navbar-collapse {
+	overflow: auto;
+	background:  rgb(213, 198, 221);
+	color: #fff !important;
+	text-align: center;
+	padding: 10px 0;
+}
+.nav-scroll .navbar-collapse {
+	background: #fff !important;
+}
+#contact_form {
+	margin-bottom:20px;
+}
+}
+@media all and (max-width:768px) {
+.nav-scroll .navbar-brand img, .navbar-brand img {
+	transform: scale(0.75) !important;
+	-webkit-transform: scale(0.75) !important;
+}
+.banner-text {
+	padding-right: 0px;
+	margin: 10px 0px 0px;
+}
+h2 {
+	font-size: 25px;
+}
+h3 {
+	font-size: 23px;
+}
+.section-padding {
+	padding: 40px 0px;
+}
+.banner-text p {
+	margin: 25px 0px;
+}
+.banner-text ul li a img {
+	width: 140px;
+	border-radius: 7px;
+}
+.sectioner-header {
+	width: 90%;
+}
+.sectioner-header p {
+	font-size: 14px;
+}
+.about-btn {
+	padding: 5px 30px;
+	margin-top: 0px;
+	font-size: 16px;
+}
+.single-feature {
+	margin-bottom: 20px;
+	margin-top: 20px;
+}
+.team-detail {
+	margin-top: 20px;
+}
+.team-detail img {
+	width: 50%;
+}
+.bx-controls
+{
+	display:none;
+}
+.bx-wrapper {
+	margin: 0px 20px !important;
+}
+.slider .test-img img {
+	margin: 0 auto;
+}
+.test-img {
+	float:none;
+	width: 200px;
+	height: 200px;
+	margin: 0 auto;
+}
+.test-text {
+	float: none;
+	width: 100%;
+	text-align: center;
+}
+.section-content {
+	margin-top: 40px;
+}
+.faq-content {
+	margin: 10px 0px;
+}
+.faq-content h4 {
+	font-size: 16px;
+}
+.faq-content p {
+	font-size: 13px;
+}
+#contact_form {
+	margin-bottom:20px;
+}
+.contact-item {
+	font-size: 12px;
+}
+.download ul li a img {
+	width: 120px;
+}
+.footer-copy p {
+	font-size: 10px;
+}
+}