├── README.md ├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── Images │ ├── mockup_events.png │ ├── mockup_prep.png │ ├── mockup_college_dir.png │ ├── mockup_competition.png │ ├── mockup_internship.png │ ├── mockup_scholarship.png │ ├── mockup_college_feed.png │ └── google-play-badge.svg ├── manifest.json └── index.html ├── eventbeep.rar ├── src ├── Components │ ├── Triangle.js │ ├── Circle.js │ ├── Google.js │ ├── TextContent.js │ ├── Images.js │ ├── MainSection.js │ └── Sections │ │ ├── Slider.js │ │ ├── Events.js │ │ ├── Jobs.js │ │ ├── Footer.js │ │ ├── Connect.js │ │ ├── College.js │ │ ├── Scholarships.js │ │ ├── Competitions.js │ │ ├── Intern.js │ │ ├── Home.js │ │ └── Header.js ├── index.css ├── index.js ├── App.js ├── serviceWorker.js └── App.css ├── .gitignore └── package.json /README.md: -------------------------------------------------------------------------------- 1 | # Event-beep-React-landing-page 2 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /eventbeep.rar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pawan-kumar-dev/Event-beep-React-landing-page/HEAD/eventbeep.rar -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pawan-kumar-dev/Event-beep-React-landing-page/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pawan-kumar-dev/Event-beep-React-landing-page/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pawan-kumar-dev/Event-beep-React-landing-page/HEAD/public/logo512.png -------------------------------------------------------------------------------- /public/Images/mockup_events.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pawan-kumar-dev/Event-beep-React-landing-page/HEAD/public/Images/mockup_events.png -------------------------------------------------------------------------------- /public/Images/mockup_prep.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pawan-kumar-dev/Event-beep-React-landing-page/HEAD/public/Images/mockup_prep.png -------------------------------------------------------------------------------- /public/Images/mockup_college_dir.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pawan-kumar-dev/Event-beep-React-landing-page/HEAD/public/Images/mockup_college_dir.png -------------------------------------------------------------------------------- /public/Images/mockup_competition.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pawan-kumar-dev/Event-beep-React-landing-page/HEAD/public/Images/mockup_competition.png -------------------------------------------------------------------------------- /public/Images/mockup_internship.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pawan-kumar-dev/Event-beep-React-landing-page/HEAD/public/Images/mockup_internship.png -------------------------------------------------------------------------------- /public/Images/mockup_scholarship.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pawan-kumar-dev/Event-beep-React-landing-page/HEAD/public/Images/mockup_scholarship.png -------------------------------------------------------------------------------- /public/Images/mockup_college_feed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pawan-kumar-dev/Event-beep-React-landing-page/HEAD/public/Images/mockup_college_feed.png -------------------------------------------------------------------------------- /src/Components/Triangle.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Triangle = () => { 4 | return
; 5 | }; 6 | 7 | export default Triangle; 8 | -------------------------------------------------------------------------------- /src/Components/Circle.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Circle = ({ num }) => { 4 | return
; 5 | }; 6 | 7 | export default Circle; 8 | -------------------------------------------------------------------------------- /src/Components/Google.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Google = () => { 4 | return ( 5 |
6 | google 11 |
12 | ); 13 | }; 14 | 15 | export default Google; 16 | -------------------------------------------------------------------------------- /src/Components/TextContent.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const TextContent = ({ title, desc, children }) => { 4 | return ( 5 |
6 | {children} 7 |

{title}

8 |

{desc}

9 |
10 | ); 11 | }; 12 | 13 | export default TextContent; 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .gitignore 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 8 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 9 | sans-serif; 10 | -webkit-font-smoothing: antialiased; 11 | -moz-osx-font-smoothing: grayscale; 12 | } 13 | 14 | code { 15 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 16 | monospace; 17 | } 18 | -------------------------------------------------------------------------------- /src/Components/Images.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Fade from "react-reveal/Fade"; 3 | const Images = ({ src, classes }) => { 4 | return ( 5 | 6 | colleges 16 | 17 | ); 18 | }; 19 | 20 | export default Images; 21 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import * as serviceWorker from "./serviceWorker"; 6 | import "bootstrap/dist/css/bootstrap.min.css"; 7 | 8 | import "slick-carousel/slick/slick.css"; 9 | import "slick-carousel/slick/slick-theme.css"; 10 | ReactDOM.render(, document.getElementById("root")); 11 | 12 | // If you want your app to work offline and load faster, you can change 13 | // unregister() to register() below. Note this comes with some pitfalls. 14 | // Learn more about service workers: https://bit.ly/CRA-PWA 15 | serviceWorker.unregister(); 16 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import "./App.css"; 3 | import Header from "./Components/Sections/Header"; 4 | import MainSection from "./Components/MainSection"; 5 | import Footer from "./Components/Sections/Footer"; 6 | import Loader from "react-loader-spinner"; 7 | function App() { 8 | const [state, setState] = useState(false); 9 | setTimeout(() => { 10 | setState(true); 11 | }, 4000); 12 | return state ? ( 13 |
14 |
15 | 16 |
17 |
18 | ) : ( 19 |
20 | 25 |
26 | ); 27 | } 28 | 29 | export default App; 30 | -------------------------------------------------------------------------------- /src/Components/MainSection.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Home from "./Sections/Home"; 3 | import Connect from "./Sections/Connect"; 4 | import College from "./Sections/College"; 5 | import Intern from "./Sections/Intern"; 6 | import Jobs from "./Sections/Jobs"; 7 | import Scholarships from "./Sections/Scholarships"; 8 | import Competitions from "./Sections/Competitions"; 9 | import Events from "./Sections/Events"; 10 | import Sliders from "./Sections/Slider"; 11 | const MainSection = () => { 12 | return ( 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | ); 25 | }; 26 | 27 | export default MainSection; 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "event", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@material-ui/core": "^4.11.0", 7 | "@material-ui/icons": "^4.9.1", 8 | "@testing-library/jest-dom": "^4.2.4", 9 | "@testing-library/react": "^9.5.0", 10 | "@testing-library/user-event": "^7.2.1", 11 | "bootstrap": "^4.5.2", 12 | "react": "^16.13.1", 13 | "react-dom": "^16.13.1", 14 | "react-loader-spinner": "^3.1.14", 15 | "react-reveal": "^1.2.2", 16 | "react-scripts": "3.4.3", 17 | "react-slick": "^0.27.11", 18 | "react-typed": "^1.2.0", 19 | "slick-carousel": "^1.8.1" 20 | }, 21 | "scripts": { 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test", 25 | "eject": "react-scripts eject" 26 | }, 27 | "eslintConfig": { 28 | "extends": "react-app" 29 | }, 30 | "browserslist": { 31 | "production": [ 32 | ">0.2%", 33 | "not dead", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/Components/Sections/Slider.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Slider from "react-slick"; 3 | import Images from "../Images"; 4 | const Sliders = () => { 5 | const settings = { 6 | className: "", 7 | dots: true, 8 | infinite: true, 9 | slidesToShow: 1, 10 | slidesToScroll: 1, 11 | adaptiveHeight: true, 12 | autoplay: true, 13 | speed: 1000, 14 | autoplaySpeed: 1000, 15 | }; 16 | return ( 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | ); 29 | }; 30 | export default Sliders; 31 | -------------------------------------------------------------------------------- /src/Components/Sections/Events.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Images from "../Images"; 3 | import Circle from "../Circle"; 4 | import TextContent from "../TextContent"; 5 | import Fade from "react-reveal/Fade"; 6 | const Events = () => { 7 | return ( 8 |
9 |
10 |
11 |
12 | 13 | 18 | 19 | 20 | 21 |
22 |
23 |
24 | 25 | 26 | 27 | 28 |
29 |
30 |
31 |
32 |
33 | ); 34 | }; 35 | 36 | export default Events; 37 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | EventBeep 28 | 32 | 33 | 34 | 35 |
36 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /src/Components/Sections/Jobs.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Images from "../Images"; 3 | import Circle from "../Circle"; 4 | import Triangle from "../Triangle"; 5 | import TextContent from "../TextContent"; 6 | import Fade from "react-reveal/Fade"; 7 | const Jobs = () => { 8 | return ( 9 |
10 |
11 |
12 |
13 | 14 | 19 | 20 | 21 | 22 |
23 |
24 |
25 | 26 |
27 | 33 | 34 | 39 | 40 |
41 | 42 | 43 |
44 |
45 |
46 |
47 | 48 |
49 | ); 50 | }; 51 | 52 | export default Jobs; 53 | -------------------------------------------------------------------------------- /src/Components/Sections/Footer.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import TwitterIcon from "@material-ui/icons/Twitter"; 3 | import InstagramIcon from "@material-ui/icons/Instagram"; 4 | import FacebookIcon from "@material-ui/icons/Facebook"; 5 | import LinkedInIcon from "@material-ui/icons/LinkedIn"; 6 | import EmojiEventsIcon from "@material-ui/icons/EmojiEvents"; 7 | import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward"; 8 | import Google from "../Google"; 9 | const Footer = () => { 10 | const [show, setShow] = useState(false); 11 | useEffect(() => { 12 | let mounted = true; 13 | window.addEventListener("scroll", () => { 14 | if (window.scrollY > 100) { 15 | if (mounted) setShow(true); 16 | } else { 17 | if (mounted) setShow(false); 18 | } 19 | }); 20 | return () => { 21 | mounted = false; 22 | }; 23 | }, []); 24 | return ( 25 | 62 | ); 63 | }; 64 | 65 | export default Footer; 66 | -------------------------------------------------------------------------------- /src/Components/Sections/Connect.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Images from "../Images"; 3 | import Circle from "../Circle"; 4 | import Triangle from "../Triangle"; 5 | import TextContent from "../TextContent"; 6 | import Fade from "react-reveal/Fade"; 7 | const Connect = () => { 8 | return ( 9 |
10 |
11 | 12 | 18 | 23 | 24 |
25 |
26 |
27 |
28 | 29 | 33 | 34 | 35 | 36 |
37 |
38 |
39 |
40 | 44 | 45 |
46 | 52 | 53 | 58 | 59 |
60 |
61 |
62 |
63 |
64 | 65 |
66 | ); 67 | }; 68 | 69 | export default Connect; 70 | -------------------------------------------------------------------------------- /src/Components/Sections/College.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Images from "../Images"; 3 | import Circle from "../Circle"; 4 | import Triangle from "../Triangle"; 5 | import TextContent from "../TextContent"; 6 | import Fade from "react-reveal/Fade"; 7 | const College = () => { 8 | return ( 9 |
10 | 11 |
12 |
13 |
14 | 15 | 20 | 21 |
22 |
23 |
24 | 30 | 31 | 35 | 36 | 37 | 38 |
39 |
40 | 44 |
45 |
46 | 52 | 53 | 58 | 59 |
60 |
61 |
62 |
63 | 64 |
65 | ); 66 | }; 67 | 68 | export default College; 69 | -------------------------------------------------------------------------------- /src/Components/Sections/Scholarships.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Images from "../Images"; 3 | import Circle from "../Circle"; 4 | import Triangle from "../Triangle"; 5 | import TextContent from "../TextContent"; 6 | import Fade from "react-reveal/Fade"; 7 | const Scholarships = () => { 8 | return ( 9 |
10 |
11 | 12 |
13 | 19 | 20 | 21 | 27 | 28 | 29 | 30 |
31 |
32 |
33 |
34 | 35 | 40 | 41 | 42 | 43 |
44 |
45 |
46 |
47 | 48 | 52 |
53 | 59 | 60 | 65 | 66 |
67 |
68 |
69 |
70 |
71 | 72 |
73 | ); 74 | }; 75 | 76 | export default Scholarships; 77 | -------------------------------------------------------------------------------- /src/Components/Sections/Competitions.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Images from "../Images"; 3 | import Circle from "../Circle"; 4 | import Triangle from "../Triangle"; 5 | import TextContent from "../TextContent"; 6 | import Fade from "react-reveal/Fade"; 7 | const Competitions = () => { 8 | return ( 9 |
10 |
11 |
12 |
13 | 14 | 20 | 21 |
22 |
23 |
24 |
25 | 31 | 32 | 37 | 38 |
39 | 43 |
44 | 50 | 51 | 55 | 61 | 67 | 68 | 69 |
70 | 71 | 72 | 73 |
74 |
75 |
76 |
77 | 78 |
79 | ); 80 | }; 81 | 82 | export default Competitions; 83 | -------------------------------------------------------------------------------- /src/Components/Sections/Intern.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Images from "../Images"; 3 | import Circle from "../Circle"; 4 | import Triangle from "../Triangle"; 5 | import TextContent from "../TextContent"; 6 | import Fade from "react-reveal/Fade"; 7 | const Intern = () => { 8 | return ( 9 |
10 | 11 |
12 |
13 |
14 | 15 | 20 | 21 | 22 | 23 |
24 |
25 |
26 |
27 | 33 | 34 | 39 | 40 |
41 | 45 |
46 | 52 | 53 | 58 | 59 |
60 | 61 |
62 |
63 |
64 |
65 |
66 | 67 | 73 | 74 | 75 |
76 | 77 |
78 | ); 79 | }; 80 | 81 | export default Intern; 82 | -------------------------------------------------------------------------------- /src/Components/Sections/Home.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Images from "../Images"; 3 | import Circle from "../Circle"; 4 | import Triangle from "../Triangle"; 5 | import Google from "../Google"; 6 | import Typed from "react-typed"; 7 | const Home = () => { 8 | return ( 9 |
10 |
11 |
12 |
13 |
14 | 15 | 16 | 17 | 18 |
19 | 25 | 26 | 31 | 32 |
33 | 34 | 35 |
36 |
37 |
38 |
39 |
47 |

48 | 54 |

55 |
56 |
64 | 65 |
73 | Download App Now 74 |
75 |
76 |
77 |
78 |
79 |
80 | 81 | 82 |
83 | ); 84 | }; 85 | 86 | export default Home; 87 | -------------------------------------------------------------------------------- /public/Images/google-play-badge.svg: -------------------------------------------------------------------------------- 1 | google-play-badge -------------------------------------------------------------------------------- /src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.0/8 are considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl, { 104 | headers: { 'Service-Worker': 'script' }, 105 | }) 106 | .then(response => { 107 | // Ensure service worker exists, and that we really are getting a JS file. 108 | const contentType = response.headers.get('content-type'); 109 | if ( 110 | response.status === 404 || 111 | (contentType != null && contentType.indexOf('javascript') === -1) 112 | ) { 113 | // No service worker found. Probably a different app. Reload the page. 114 | navigator.serviceWorker.ready.then(registration => { 115 | registration.unregister().then(() => { 116 | window.location.reload(); 117 | }); 118 | }); 119 | } else { 120 | // Service worker found. Proceed as normal. 121 | registerValidSW(swUrl, config); 122 | } 123 | }) 124 | .catch(() => { 125 | console.log( 126 | 'No internet connection found. App is running in offline mode.' 127 | ); 128 | }); 129 | } 130 | 131 | export function unregister() { 132 | if ('serviceWorker' in navigator) { 133 | navigator.serviceWorker.ready 134 | .then(registration => { 135 | registration.unregister(); 136 | }) 137 | .catch(error => { 138 | console.error(error.message); 139 | }); 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /src/Components/Sections/Header.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import TwitterIcon from "@material-ui/icons/Twitter"; 3 | import InstagramIcon from "@material-ui/icons/Instagram"; 4 | import FacebookIcon from "@material-ui/icons/Facebook"; 5 | import LinkedInIcon from "@material-ui/icons/LinkedIn"; 6 | import EmojiEventsIcon from "@material-ui/icons/EmojiEvents"; 7 | import { Button, TextField } from "@material-ui/core"; 8 | import { SwipeableDrawer } from "@material-ui/core"; 9 | import Google from "../Google"; 10 | import Modal from "@material-ui/core/Modal"; 11 | import { makeStyles } from "@material-ui/core/styles"; 12 | import Zoom from "react-reveal/Zoom"; 13 | import MenuIcon from "@material-ui/icons/Menu"; 14 | const useStyles = makeStyles((theme) => ({ 15 | paper: { 16 | width: 400, 17 | margin: "20% auto", 18 | backgroundColor: theme.palette.background.paper, 19 | border: "2px solid #000", 20 | boxShadow: theme.shadows[5], 21 | padding: theme.spacing(2, 4, 3), 22 | }, 23 | })); 24 | 25 | const Header = () => { 26 | const classes = useStyles(); 27 | const [sideNav, setSideNav] = useState(false); 28 | const [show, setShow] = useState(false); 29 | const [open, setOpen] = useState(false); 30 | useEffect(() => { 31 | let mounted = true; 32 | window.addEventListener("scroll", () => { 33 | if (window.scrollY > 100) { 34 | if (mounted) setShow(true); 35 | } else { 36 | if (mounted) setShow(false); 37 | } 38 | }); 39 | window.addEventListener("resize", () => { 40 | if (window.innerWidth > 720) { 41 | if (mounted) setSideNav(false); 42 | } 43 | }); 44 | return () => { 45 | mounted = false; 46 | }; 47 | }, []); 48 | const handleOpen = () => { 49 | setOpen(true); 50 | }; 51 | 52 | const handleClose = () => { 53 | setOpen(false); 54 | }; 55 | 56 | const body = ( 57 |
58 |
59 | 60 | 61 | 62 | 70 | 71 |
72 | ); 73 | return ( 74 |
75 | 76 | 82 | {body} 83 | 84 | 85 | 86 | { 90 | setSideNav(false); 91 | }} 92 | onOpen={() => { 93 | setSideNav(true); 94 | }} 95 | > 96 |
{ 100 | setSideNav(false); 101 | }} 102 | className="up-nav" 103 | > 104 | 184 | 192 | 193 |
194 |

Follow Us At:

195 |
    196 |
  • 197 | 198 |
    • 199 |
  • 200 | 201 |
    • 202 |
  • 203 | 204 |
    • 205 |
  • 206 | 207 |
    • 208 |
209 |
210 |
211 | 212 |
213 | 269 |
270 |
271 | ); 272 | }; 273 | 274 | export default Header; 275 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 14px; 3 | scroll-behavior: smooth; 4 | } 5 | html { 6 | scroll-behavior: smooth; 7 | } 8 | /* width */ 9 | html::-webkit-scrollbar { 10 | width: 15px; 11 | } 12 | 13 | /* Track */ 14 | html::-webkit-scrollbar-track { 15 | box-shadow: inset 0 0 5px grey; 16 | border-radius: 8px; 17 | } 18 | 19 | /* Handle */ 20 | html::-webkit-scrollbar-thumb { 21 | background: #146da0; 22 | border-radius: 8px; 23 | } 24 | 25 | /* Handle on hover */ 26 | html::-webkit-scrollbar-thumb:hover { 27 | background: #1a6591; 28 | } 29 | 30 | body { 31 | color: #363636 !important; 32 | } 33 | 34 | a:hover { 35 | text-decoration: none; 36 | } 37 | 38 | /*Define custom Width*/ 39 | .custom_container { 40 | position: relative; 41 | display: block; 42 | width: 90%; 43 | margin: auto; 44 | padding-left: 15px; 45 | padding-right: 15px; 46 | } 47 | 48 | .loading { 49 | width: 100%; 50 | height: 100vh; 51 | display: grid; 52 | place-content: center; 53 | } 54 | 55 | .slick .slick-list .slick-track .slick-slide div { 56 | display: flex; 57 | justify-content: center; 58 | align-items: center; 59 | } 60 | /* font weight */ 61 | .font_weight_300 { 62 | font-weight: 300; 63 | } 64 | 65 | .font_weight_400 { 66 | font-weight: 400; 67 | } 68 | .menu-icons { 69 | display: none !important; 70 | cursor: pointer !important; 71 | } 72 | .font_weight_600 { 73 | font-weight: 600; 74 | } 75 | 76 | /*font sizes*/ 77 | .font_smallest { 78 | font-size: 0.8rem; 79 | } 80 | 81 | .font_small .font_small { 82 | font-size: 1.4rem; 83 | } 84 | 85 | .font_medium { 86 | font-size: 1.5rem; 87 | } 88 | 89 | .font_16 { 90 | font-size: 1rem !important; 91 | } 92 | .font_18 { 93 | font-size: 1.125rem !important; 94 | } 95 | 96 | .font_20 { 97 | font-size: 1.25rem !important; 98 | } 99 | 100 | .font_25 { 101 | font-size: 1.5625rem; 102 | } 103 | 104 | .font_30 { 105 | font-size: 1.875rem; 106 | } 107 | 108 | .font_35 { 109 | font-size: 2.1875rem; 110 | } 111 | 112 | .bg_primary { 113 | background-color: #6d6bdb; 114 | } 115 | .bg_green { 116 | background-color: #28a745; 117 | } 118 | .bg_gray { 119 | background-color: #f7f7f7; 120 | } 121 | 122 | .default_black { 123 | color: #363636 !important; 124 | } 125 | .gray_text { 126 | color: #828282; 127 | } 128 | .color_primary { 129 | color: #6d6bdb; 130 | } 131 | 132 | .br_primary { 133 | border-radius: 0.5rem !important; 134 | } 135 | 136 | .style_none { 137 | list-style: none; 138 | } 139 | .pl_15 { 140 | padding-left: 15px; 141 | } 142 | 143 | /*navigation styles*/ 144 | header { 145 | padding: 3rem 0rem 2rem; 146 | z-index: 9; 147 | position: absolute; 148 | width: 100%; 149 | top: 0px; 150 | background: #fff; 151 | } 152 | 153 | header.fixed { 154 | position: fixed; 155 | top: 0; 156 | left: 0; 157 | width: 100%; 158 | z-index: 9999; 159 | background: #fff; 160 | box-shadow: 0px 1px 6px #00000029; 161 | } 162 | 163 | header.fixed { 164 | padding: 0.7rem 0rem 0.7rem; 165 | } 166 | header.fixed a.navbar-brand { 167 | min-width: 11rem; 168 | } 169 | 170 | .for_mobile { 171 | display: none; 172 | } 173 | 174 | .for_desktop { 175 | display: flex; 176 | flex-basis: inherit; 177 | } 178 | 179 | .navbar { 180 | padding: 0px; 181 | } 182 | 183 | .up-nav { 184 | display: flex; 185 | flex-direction: column; 186 | justify-content: center; 187 | align-items: center; 188 | } 189 | .up-nav > ul { 190 | margin: 65px auto 0 auto; 191 | } 192 | .up-nav .mob_social > ul { 193 | list-style-type: none; 194 | display: flex; 195 | justify-content: center; 196 | align-items: center; 197 | padding: 0; 198 | } 199 | header .navbar .navbar-brand { 200 | width: 8rem; 201 | } 202 | header.fixed .navbar .navbar-brand .nav_logo { 203 | max-width: 75%; 204 | height: auto; 205 | transition: all 0.1s ease; 206 | } 207 | header .navbar .navbar-brand .nav_logo { 208 | max-width: 100%; 209 | height: auto; 210 | transition: all 0.1s ease; 211 | } 212 | 213 | .navbar-expand-lg .navbar-collapse { 214 | display: block !important; 215 | } 216 | 217 | .navbar-expand-lg .navbar-nav { 218 | margin: auto; 219 | } 220 | 221 | .navbar-light .navbar-nav .nav-link { 222 | color: #222; 223 | } 224 | 225 | .login_part { 226 | display: flex; 227 | } 228 | 229 | .nav_button { 230 | font-size: 1.1rem; 231 | } 232 | 233 | .btn-outline-primary { 234 | border: 1px solid #6d6bdb; 235 | } 236 | 237 | .rounded_button { 238 | padding: 0.45rem 1.8rem; 239 | margin-left: 35px; 240 | border: 0px solid #007bff; 241 | } 242 | 243 | .btn-outline-primary { 244 | color: #6d6bdb; 245 | border: 2px solid #6d6bdb; 246 | } 247 | 248 | .rounded_button.rounded_button { 249 | border-radius: 50px; 250 | 251 | transition: all 0.3s ease; 252 | } 253 | 254 | /*home section styles*/ 255 | .home_screen_section .model { 256 | width: 15rem; 257 | height: auto; 258 | } 259 | 260 | .home_screen_section .google_badge { 261 | width: 15rem; 262 | height: auto; 263 | } 264 | 265 | /*end home section*/ 266 | /*feature sections*/ 267 | .feature_section { 268 | text-align: center; 269 | } 270 | 271 | .feature_section_heading { 272 | font-size: 1.9rem; 273 | color: #2a2a2a; 274 | } 275 | 276 | .feature_section_sub_heading { 277 | font-family: "Source Sans Pro", sans-serif; 278 | font-size: 1.4rem; 279 | line-height: 1.8rem; 280 | } 281 | 282 | .feature_section .feature_model { 283 | width: 12rem; 284 | height: auto; 285 | } 286 | 287 | /*end sections*/ 288 | /*background colors*/ 289 | .bg_1 { 290 | background-color: #f2f3ff; 291 | } 292 | 293 | .bg_2 { 294 | background: rgba(254, 69, 223, 0.05); 295 | } 296 | 297 | .bg_3 { 298 | background: rgba(150, 62, 249, 0.07); 299 | } 300 | 301 | .small_icons { 302 | margin-left: 1.5rem; 303 | margin-right: 1.5rem; 304 | width: auto; 305 | height: 1.8rem; 306 | } 307 | 308 | .heart { 309 | width: 0.8rem; 310 | height: auto; 311 | } 312 | 313 | .rotate { 314 | transform: rotate(-90deg); 315 | /* Safari */ 316 | -webkit-transform: rotate(-90deg); 317 | /* Firefox */ 318 | -moz-transform: rotate(-90deg); 319 | /* IE */ 320 | -ms-transform: rotate(-90deg); 321 | /* Opera */ 322 | -o-transform: rotate(-90deg); 323 | /* Internet Explorer */ 324 | } 325 | 326 | .floating_button { 327 | position: fixed; 328 | width: 3em; 329 | height: 3em; 330 | bottom: 2.2rem; 331 | right: 2.2rem; 332 | background-color: #6d6bdb; 333 | color: #fff; 334 | text-align: center; 335 | border-radius: 5px; 336 | cursor: pointer; 337 | z-index: 9999; 338 | display: none; 339 | } 340 | 341 | /*AK*/ 342 | section { 343 | position: relative; 344 | } 345 | 346 | section.main_sec { 347 | overflow: hidden; 348 | padding-top: 8.875rem; 349 | } 350 | 351 | /*Globle Shape*/ 352 | .circle_12 { 353 | position: absolute; 354 | z-index: 1; 355 | border-radius: 50%; 356 | background: #666; 357 | width: 0.75rem; 358 | height: 0.75rem; 359 | } 360 | 361 | .circle_15 { 362 | width: 0.9375rem; 363 | height: 0.9375rem; 364 | position: absolute; 365 | z-index: 1; 366 | border-radius: 50%; 367 | background: #666; 368 | } 369 | 370 | .circle_22 { 371 | width: 1.375rem; 372 | height: 1.375rem; 373 | position: absolute; 374 | z-index: 1; 375 | border-radius: 50%; 376 | background: #666; 377 | } 378 | 379 | .circle_23 { 380 | width: 1.4375rem; 381 | height: 1.4375rem; 382 | position: absolute; 383 | z-index: 1; 384 | border-radius: 50%; 385 | background: #666; 386 | } 387 | 388 | .circle_24 { 389 | width: 1.5rem; 390 | height: 1.5rem; 391 | position: absolute; 392 | z-index: 1; 393 | border-radius: 50%; 394 | background: #666; 395 | } 396 | 397 | .circle_25 { 398 | width: 1.5625rem; 399 | height: 1.5625rem; 400 | position: absolute; 401 | z-index: 1; 402 | border-radius: 50%; 403 | background: #666; 404 | } 405 | 406 | .circle_28 { 407 | width: 1.75rem; 408 | height: 1.75rem; 409 | position: absolute; 410 | z-index: 1; 411 | border-radius: 50%; 412 | background: #666; 413 | } 414 | 415 | .circle_34 { 416 | width: 2.125rem; 417 | height: 2.125rem; 418 | position: absolute; 419 | z-index: 1; 420 | border-radius: 50%; 421 | background: #666; 422 | } 423 | 424 | .circle_46 { 425 | width: 2.875rem; 426 | height: 2.875rem; 427 | position: absolute; 428 | z-index: 1; 429 | border-radius: 50%; 430 | background: #666; 431 | } 432 | 433 | .circle_50 { 434 | width: 3.125rem; 435 | height: 3.125rem; 436 | position: absolute; 437 | z-index: 1; 438 | border-radius: 50%; 439 | background: #666; 440 | } 441 | 442 | .circle_56 { 443 | width: 3.5rem; 444 | height: 3.5rem; 445 | position: absolute; 446 | z-index: 1; 447 | border-radius: 50%; 448 | background: #666; 449 | } 450 | 451 | .circle_66 { 452 | width: 4.125rem; 453 | height: 4.125rem; 454 | position: absolute; 455 | z-index: 1; 456 | border-radius: 50%; 457 | background: #666; 458 | } 459 | 460 | .circle_240 { 461 | width: 15rem; 462 | height: 15rem; 463 | position: absolute; 464 | z-index: 1; 465 | border-radius: 50%; 466 | background: #666; 467 | } 468 | 469 | .circle_254 { 470 | width: 15.875rem; 471 | height: 15.875rem; 472 | z-index: 1; 473 | position: absolute; 474 | z-index: 1; 475 | border-radius: 50%; 476 | background: #666; 477 | } 478 | 479 | .square_304 { 480 | width: 19rem; 481 | height: 19rem; 482 | transform: rotate(24deg); 483 | position: absolute; 484 | z-index: 1; 485 | border-radius: 50%; 486 | background: #666; 487 | position: absolute; 488 | z-index: 1; 489 | border-radius: 50%; 490 | background: #666; 491 | border-radius: 50px; 492 | } 493 | 494 | .triangle { 495 | width: 100%; 496 | height: 100px; 497 | position: absolute; 498 | bottom: 0; 499 | background: linear-gradient( 500 | to bottom right, 501 | #fff 0%, 502 | #fff 50%, 503 | #f2f3ff 51%, 504 | #f2f3ff 100% 505 | ); 506 | } 507 | 508 | .circle_12, 509 | .circle_15, 510 | .circle_22, 511 | .circle_23, 512 | .circle_24, 513 | .circle_25, 514 | .circle_28, 515 | .circle_34, 516 | .circle_46, 517 | .circle_50, 518 | .circle_56, 519 | .circle_66 { 520 | display: block; 521 | } 522 | 523 | .all_aimation .circle_12, 524 | .all_aimation .circle_15, 525 | .all_aimation .circle_22, 526 | .all_aimation .circle_23, 527 | .all_aimation .circle_24, 528 | .all_aimation .circle_25, 529 | .all_aimation .circle_28, 530 | .all_aimation .circle_34, 531 | .all_aimation .circle_46, 532 | .all_aimation .circle_50, 533 | .all_aimation .circle_56, 534 | .all_aimation .circle_66 { 535 | display: initial; 536 | } 537 | 538 | /*Header*/ 539 | .ellipse_svg1 { 540 | display: inline-block; 541 | position: absolute; 542 | right: -6.5rem; 543 | top: -15.5rem; 544 | } 545 | 546 | .navbar-expand-lg .navbar-nav .nav-link { 547 | padding-right: 1rem; 548 | padding-left: 1rem; 549 | position: relative; 550 | margin: 0rem 0.5rem; 551 | font-size: 1.2rem; 552 | padding: 0.5rem 1rem; 553 | transition: all 0.3s ease; 554 | } 555 | 556 | .about_app img.logo_title { 557 | width: 38.9rem; 558 | } 559 | 560 | .navbar-expand-lg .navbar-nav .nav-link:hover { 561 | transform: scaleX(1.1); 562 | opacity: 1; 563 | } 564 | 565 | .navbar-expand-lg .navbar-nav .nav-link:hover { 566 | color: #6d6bdb; 567 | } 568 | 569 | /*Home section 1*/ 570 | .home_screen_section { 571 | padding: 3rem 8.5rem 8rem; 572 | } 573 | 574 | .app_img { 575 | position: relative; 576 | padding-left: 3rem; 577 | } 578 | 579 | .home_screen_section .app_img .circle_254 { 580 | background: #ffd500; 581 | left: -2rem; 582 | top: -1rem; 583 | } 584 | 585 | .app_img > .circle_56 { 586 | top: -1rem; 587 | right: 0rem; 588 | background: #72ece8; 589 | } 590 | 591 | .app_img .circle_24 { 592 | top: 10rem; 593 | left: 25.5rem; 594 | background: #fcb100; 595 | } 596 | 597 | .app_img .circle_46 { 598 | bottom: 6rem; 599 | right: 10.5rem; 600 | background: #78c8ec; 601 | } 602 | 603 | section.home_section1 .circle_22 { 604 | top: 26rem; 605 | left: 2rem; 606 | background: #c1bfff; 607 | } 608 | 609 | .app_img .circle_56:last-child { 610 | top: auto; 611 | bottom: -5rem; 612 | right: auto; 613 | left: 2rem; 614 | background: #ffcfce; 615 | z-index: 1; 616 | } 617 | 618 | .app_img .svg1 { 619 | display: inline-block; 620 | position: absolute; 621 | left: 3.6rem; 622 | bottom: -1.3rem; 623 | z-index: 1; 624 | } 625 | 626 | .about_app h4 { 627 | margin: 1.5rem 0rem 4rem; 628 | } 629 | 630 | .about_app { 631 | padding-top: 5rem; 632 | } 633 | 634 | /*Home Section 2*/ 635 | section.feature_section.home_section2 { 636 | padding: 0rem 0rem 8rem; 637 | } 638 | 639 | .home_screen_section .about_app { 640 | padding-top: 0rem; 641 | } 642 | 643 | .ellipse_svg2 { 644 | display: inline-block; 645 | position: absolute; 646 | left: -25rem; 647 | top: 1rem; 648 | z-index: 1; 649 | } 650 | 651 | .home_section2 .triangle { 652 | background: linear-gradient( 653 | to bottom right, 654 | #f2f3ff 0%, 655 | #f2f3ff 50%, 656 | #fff 51%, 657 | #fff 100% 658 | ); 659 | } 660 | 661 | .home_section2 .circle_22 { 662 | right: 16rem; 663 | background: #c1bfff; 664 | z-index: 1; 665 | bottom: -6rem; 666 | } 667 | 668 | .home_section2 .circle_66 { 669 | right: 4rem; 670 | background: #fcb100; 671 | z-index: 1; 672 | bottom: -13rem; 673 | } 674 | 675 | .home_section2 .square_304 { 676 | right: 2rem; 677 | top: -4.5rem; 678 | background: #4f42c2; 679 | } 680 | 681 | .home_section2 .feature_model { 682 | position: relative; 683 | } 684 | 685 | .app_img_right { 686 | text-align: right; 687 | padding-right: 6rem; 688 | } 689 | 690 | .app_img_right .svg4 { 691 | display: inline-block; 692 | position: absolute; 693 | bottom: -4rem; 694 | left: 6rem; 695 | width: 21rem; 696 | } 697 | 698 | .home_section2 .about_app_left { 699 | padding-left: 5rem; 700 | } 701 | 702 | /*Home Section 3*/ 703 | .home_section3 { 704 | padding: 2rem 0rem 3rem; 705 | } 706 | 707 | .home_section3 .app_img { 708 | padding-left: 3rem; 709 | z-index: 9; 710 | } 711 | 712 | .home_section3 .svg5 { 713 | display: inline-block; 714 | position: absolute; 715 | left: 9rem; 716 | top: -8rem; 717 | transform: rotateZ(183deg); 718 | } 719 | 720 | .home_section3 .svg6 { 721 | display: inline-block; 722 | position: absolute; 723 | bottom: -6rem; 724 | left: -6rem; 725 | z-index: 1; 726 | } 727 | 728 | .home_section3 .triangle { 729 | background: linear-gradient( 730 | to bottom right, 731 | #fff 0%, 732 | #fff 50%, 733 | #fff6fd 51%, 734 | #fff6fd 100% 735 | ); 736 | } 737 | 738 | .home_section3 .about_app { 739 | padding-top: 0rem; 740 | padding-left: 0rem; 741 | } 742 | 743 | .home_section3 .circle_34 { 744 | background: #dc6969; 745 | left: 2.5rem; 746 | top: 9rem; 747 | } 748 | 749 | .home_section3 .circle_56 { 750 | background: #c1bfff; 751 | bottom: -7rem; 752 | z-index: 1; 753 | left: 12rem; 754 | } 755 | 756 | /*Home Section 4*/ 757 | .home_section4 .about_app_left { 758 | padding-left: 5rem; 759 | } 760 | 761 | .home_section4 .triangle { 762 | background: linear-gradient( 763 | to bottom right, 764 | #fff6fd 0%, 765 | #fff6fd 50%, 766 | #fff 51%, 767 | #fff 100% 768 | ); 769 | } 770 | 771 | .app_img img { 772 | position: relative; 773 | } 774 | 775 | .app_img .svg7 { 776 | display: inline-block; 777 | position: absolute; 778 | top: -6.5rem; 779 | left: 5rem; 780 | z-index: 0; 781 | } 782 | 783 | .app_img .svg8 { 784 | display: inline-block; 785 | position: absolute; 786 | bottom: -9rem; 787 | right: 0rem; 788 | z-index: 9; 789 | } 790 | 791 | .home_section4 .svg9 { 792 | display: inline-block; 793 | position: absolute; 794 | bottom: 0.5rem; 795 | right: -27rem; 796 | z-index: 9; 797 | } 798 | 799 | .home_section4 { 800 | padding: 2rem 0rem 8rem; 801 | } 802 | 803 | .home_section4 .circle_66 { 804 | background: #81dfdc; 805 | bottom: 1rem; 806 | left: 5rem; 807 | } 808 | 809 | .home_section4 .circle_15 { 810 | background: #f3506c; 811 | bottom: -12rem; 812 | right: 16rem; 813 | } 814 | 815 | .home_section4 .circle_28 { 816 | background: #f9946e; 817 | left: 39rem; 818 | top: 1rem; 819 | } 820 | 821 | /*Home Section 5*/ 822 | .home_section5 { 823 | padding: 1rem 0rem 4rem; 824 | } 825 | 826 | .home_section5 .triangle { 827 | background: linear-gradient( 828 | to bottom right, 829 | #fff 0%, 830 | #fff 50%, 831 | #f8f1ff 51%, 832 | #f8f1ff 100% 833 | ); 834 | } 835 | 836 | .home_section5 .app_img { 837 | padding-left: 6rem; 838 | } 839 | 840 | .home_section5 .app_img .svg10 { 841 | position: absolute; 842 | display: inline-block; 843 | top: -6rem; 844 | left: -1rem; 845 | } 846 | 847 | .home_section5 .app_img .circle_240 { 848 | background: #fcb100; 849 | right: 9rem; 850 | bottom: -5rem; 851 | z-index: 1; 852 | } 853 | 854 | .home_section5 .app_img .circle_24 { 855 | bottom: 16rem; 856 | top: auto; 857 | right: 10.5rem; 858 | left: auto; 859 | background: #6f7474; 860 | } 861 | 862 | .home_section5 .circle_15 { 863 | bottom: -7rem; 864 | left: 15.5rem; 865 | background: #f3506c; 866 | } 867 | 868 | .home_section5 .circle_46 { 869 | top: -9rem; 870 | left: 0.5rem; 871 | background: #4442c2; 872 | } 873 | 874 | .home_section5 .about_app { 875 | padding-top: 0rem; 876 | } 877 | 878 | /*Home Section 6*/ 879 | .home_section6 { 880 | padding: 0rem 0rem 11rem; 881 | } 882 | 883 | .home_section6 .triangle { 884 | background: linear-gradient( 885 | to bottom right, 886 | #f8f1ff 0%, 887 | #f8f1ff 50%, 888 | #fff 51%, 889 | #fff 100% 890 | ); 891 | } 892 | 893 | .home_section6 .svg11 { 894 | position: absolute; 895 | display: inline-block; 896 | left: -19rem; 897 | top: -3rem; 898 | } 899 | 900 | .home_section6 .square_304 { 901 | background: #f9946e; 902 | position: absolute; 903 | border-radius: 100px; 904 | top: -3.1rem; 905 | left: 12rem; 906 | z-index: 1; 907 | } 908 | 909 | .home_section6 .svg12 { 910 | display: inline-block; 911 | position: absolute; 912 | right: -5rem; 913 | bottom: -6rem; 914 | } 915 | 916 | .home_section6 .about_app_left { 917 | padding-left: 3rem; 918 | } 919 | 920 | .home_section6 .app_img { 921 | padding-left: 10rem; 922 | } 923 | 924 | .home_section6 > .circle_46 { 925 | left: 2rem; 926 | top: 21rem; 927 | background: #4442c2; 928 | } 929 | 930 | .home_section6 .about_app_left .circle_46 { 931 | right: -4rem; 932 | bottom: -5rem; 933 | background: #fcb100; 934 | } 935 | 936 | .home_section6 .app_img .circle_25 { 937 | left: 8rem; 938 | top: 18rem; 939 | background: #ffb9ba; 940 | } 941 | 942 | /*Home Section 7*/ 943 | .home_section7 { 944 | padding: 0rem 0rem 8rem; 945 | } 946 | 947 | .home_section7 .triangle { 948 | background: linear-gradient( 949 | to bottom right, 950 | #fff 0%, 951 | #fff 50%, 952 | #f2f3ff 51%, 953 | #f2f3ff 100% 954 | ); 955 | } 956 | 957 | .home_section7 .svg13 { 958 | display: inline-block; 959 | position: absolute; 960 | top: -6rem; 961 | right: 11rem; 962 | } 963 | 964 | .home_section7 .svg14 { 965 | display: inline-block; 966 | position: absolute; 967 | bottom: -3rem; 968 | left: -4rem; 969 | z-index: 1; 970 | } 971 | 972 | .home_section7 .app_img { 973 | padding-left: 5rem; 974 | } 975 | 976 | .home_section7 .circle_50 { 977 | top: -6rem; 978 | right: 11rem; 979 | background: #e7374e; 980 | } 981 | 982 | .home_section7 .circle_50 { 983 | top: 7rem; 984 | left: -1rem; 985 | background: #e7374e; 986 | } 987 | 988 | .home_section7 .circle_23 { 989 | top: 19rem; 990 | right: 10rem; 991 | background: #4442c2; 992 | } 993 | 994 | .home_section7 .circle_12 { 995 | bottom: 10rem; 996 | right: 4rem; 997 | background: #2bdcca; 998 | } 999 | 1000 | /*Home Section 8*/ 1001 | .home_section8 { 1002 | padding: 0rem 0rem 6rem; 1003 | } 1004 | 1005 | .home_section8 .circle_240 { 1006 | top: -3rem; 1007 | left: 5rem; 1008 | background: #d338f8; 1009 | z-index: 1; 1010 | } 1011 | 1012 | .home_section8 .circle_50 { 1013 | bottom: -4rem; 1014 | left: 4rem; 1015 | background: #e7374e; 1016 | z-index: 1; 1017 | } 1018 | 1019 | .home_section8 .circle_46 { 1020 | top: 13rem; 1021 | right: -3rem; 1022 | background: #fcb100; 1023 | z-index: 1; 1024 | } 1025 | 1026 | .home_section8 .circle_23 { 1027 | top: 1rem; 1028 | right: 4rem; 1029 | background: #4442c2; 1030 | z-index: 1; 1031 | } 1032 | 1033 | .home_section8 .about_app { 1034 | padding-top: 0rem; 1035 | padding-left: 3rem; 1036 | } 1037 | 1038 | /*Footer*/ 1039 | footer { 1040 | background-color: #1c1b5c; 1041 | color: #c1bfff; 1042 | text-align: center; 1043 | position: relative; 1044 | padding: 3rem 0rem 2rem; 1045 | background-repeat: no-repeat; 1046 | background-size: cover; 1047 | background-position: center; 1048 | } 1049 | 1050 | footer p, 1051 | footer a { 1052 | font-size: 1rem; 1053 | } 1054 | 1055 | .footer_logo { 1056 | text-align: left; 1057 | } 1058 | 1059 | .footer_social a { 1060 | display: inline-block; 1061 | margin: 0px 1.2rem; 1062 | } 1063 | 1064 | .footer_social svg { 1065 | fill: #c1bfff; 1066 | width: 2rem; 1067 | } 1068 | 1069 | .footer_social svg.fb { 1070 | width: 1rem; 1071 | } 1072 | 1073 | .footer_play img { 1074 | width: 12rem; 1075 | margin: 0px; 1076 | } 1077 | 1078 | .footer_social { 1079 | padding-top: 2.5rem; 1080 | } 1081 | 1082 | .copy_right { 1083 | padding-top: 1rem; 1084 | } 1085 | 1086 | .copy_right p span { 1087 | padding: 0rem 0.1rem; 1088 | } 1089 | .show-scroll { 1090 | display: block; 1091 | } 1092 | 1093 | /* svgs */ 1094 | 1095 | .aa { 1096 | fill: #6d6bdb; 1097 | } 1098 | .track { 1099 | stroke: #707070; 1100 | stroke-dasharray: 0.15 0.45; 1101 | } 1102 | 1103 | .abc { 1104 | fill: #ffb9ba; 1105 | } 1106 | 1107 | .el1, 1108 | .cc { 1109 | fill: none; 1110 | } 1111 | .el1 { 1112 | stroke: #f9946e; 1113 | stroke-width: 99px; 1114 | stroke-dasharray: 500 331; 1115 | } 1116 | .b { 1117 | stroke: none; 1118 | } 1119 | 1120 | .abcd { 1121 | fill: #615fc2; 1122 | } 1123 | .x { 1124 | fill: #ffd500; 1125 | } 1126 | 1127 | .s8 { 1128 | fill: #c840ba; 1129 | } 1130 | .svg10 { 1131 | fill: #34bcc6; 1132 | } 1133 | .svg11-a, 1134 | .svg11-c { 1135 | fill: none; 1136 | } 1137 | .svg11-a { 1138 | stroke: #707070; 1139 | stroke-dasharray: 10 33; 1140 | } 1141 | .svg11-b { 1142 | stroke: none; 1143 | } 1144 | 1145 | .svg12-a { 1146 | fill: #6d6bdb; 1147 | } 1148 | .svg13-a { 1149 | fill: #2bdf73; 1150 | } 1151 | .svg14-a, 1152 | .c { 1153 | fill: none; 1154 | } 1155 | .svg14-a { 1156 | stroke: #fcb100; 1157 | stroke-width: 99px; 1158 | } 1159 | .svg14-b { 1160 | stroke: none; 1161 | } 1162 | /*mobile menu*/ 1163 | .menu_button span.name { 1164 | float: left; 1165 | opacity: 1; 1166 | color: #fff; 1167 | text-transform: uppercase; 1168 | outline: 0; 1169 | font-size: 12px; 1170 | font-family: "Montserrat", sans-serif; 1171 | } 1172 | 1173 | .menu_button { 1174 | position: relative; 1175 | min-width: 50px; 1176 | } 1177 | 1178 | .menu_button span.b-bar { 1179 | width: 30px; 1180 | height: 2px; 1181 | float: right; 1182 | margin-bottom: 2px; 1183 | display: block; 1184 | background: #000; 1185 | transition: transform 0.5s; 1186 | -moz-transition: transform 0.5s; 1187 | -webkit-transition: transform 0.5s; 1188 | } 1189 | 1190 | .navbar-light .navbar-toggler { 1191 | border: 0px; 1192 | } 1193 | 1194 | button.navbar-toggler:focus { 1195 | outline: 0px dotted; 1196 | outline: 0px auto -webkit-focus-ring-color; 1197 | } 1198 | 1199 | .menu_button.active span.name { 1200 | opacity: 0; 1201 | } 1202 | 1203 | .menu_button.active span.b-bar { 1204 | position: absolute; 1205 | display: inline; 1206 | } 1207 | 1208 | .menu_button span.b-bar.mid { 1209 | margin: 2px 0 4px; 1210 | float: right; 1211 | width: 30px; 1212 | } 1213 | 1214 | .menu_button span.b-bar.last { 1215 | clear: both; 1216 | width: 30px; 1217 | } 1218 | 1219 | .menu_button.active span.b-bar.first { 1220 | transform: rotate(47deg); 1221 | -moz-transform: rotate(47deg); 1222 | -webkit-transform: rotate(47deg); 1223 | top: 0px; 1224 | right: 15px; 1225 | width: 20px; 1226 | } 1227 | 1228 | .menu_button.active span.b-bar.last { 1229 | transform: rotate(-44deg); 1230 | -moz-transform: rotate(-44deg); 1231 | -webkit-transform: rotate(-44deg); 1232 | top: 0px; 1233 | right: 15px; 1234 | width: 20px; 1235 | } 1236 | 1237 | .menu_button.active span.b-bar.mid { 1238 | display: none; 1239 | } 1240 | 1241 | .copy_year { 1242 | text-align: left; 1243 | } 1244 | 1245 | @keyframes move_height_100 { 1246 | 0% { 1247 | height: 0%; 1248 | } 1249 | 10% { 1250 | transform: rotate(2deg); 1251 | } 1252 | 20% { 1253 | transform: rotate(0deg); 1254 | } 1255 | 30% { 1256 | transform: rotate(2deg); 1257 | } 1258 | 40% { 1259 | transform: rotate(0deg); 1260 | } 1261 | 50% { 1262 | transform: rotate(2deg); 1263 | } 1264 | 60% { 1265 | transform: rotate(0deg); 1266 | } 1267 | 70% { 1268 | transform: rotate(2deg); 1269 | } 1270 | 80% { 1271 | transform: rotate(0deg); 1272 | } 1273 | 90% { 1274 | transform: rotate(2deg); 1275 | } 1276 | 100% { 1277 | height: 100%; 1278 | transform: rotate(0deg); 1279 | } 1280 | } 1281 | 1282 | @keyframes move_height_50 { 1283 | 0% { 1284 | height: 0; 1285 | } 1286 | 10% { 1287 | transform: rotate(2deg); 1288 | } 1289 | 20% { 1290 | transform: rotate(0deg); 1291 | } 1292 | 30% { 1293 | transform: rotate(2deg); 1294 | } 1295 | 40% { 1296 | transform: rotate(0deg); 1297 | } 1298 | 50% { 1299 | transform: rotate(2deg); 1300 | } 1301 | 60% { 1302 | transform: rotate(0deg); 1303 | } 1304 | 70% { 1305 | transform: rotate(2deg); 1306 | } 1307 | 80% { 1308 | transform: rotate(0deg); 1309 | } 1310 | 90% { 1311 | transform: rotate(2deg); 1312 | } 1313 | 100% { 1314 | height: 50%; 1315 | transform: rotate(0deg); 1316 | } 1317 | } 1318 | 1319 | .all_aimation .circle_66 { 1320 | background: #fcb100; 1321 | } 1322 | 1323 | .all_aimation .circle_56 { 1324 | background: #72ece8; 1325 | } 1326 | 1327 | .all_aimation .circle_56_2 { 1328 | background: #ffcfce; 1329 | } 1330 | 1331 | .all_aimation .circle_46 { 1332 | background: #78c8ec; 1333 | } 1334 | 1335 | .all_aimation .circle_34 { 1336 | background: #4f42c2; 1337 | } 1338 | 1339 | .all_aimation .circle_28 { 1340 | background: #fcb100; 1341 | } 1342 | 1343 | .all_aimation .circle_25 { 1344 | background: red; 1345 | } 1346 | 1347 | .all_aimation .circle_24 { 1348 | background: #fcb100; 1349 | } 1350 | 1351 | .all_aimation .circle_22 { 1352 | background: #c1bfff; 1353 | } 1354 | 1355 | .all_aimation .circle_15 { 1356 | background: #f3506c; 1357 | } 1358 | 1359 | .all_aimation .circle_12 { 1360 | background: #2bdcca; 1361 | } 1362 | 1363 | #move1 { 1364 | position: absolute; 1365 | left: 10%; 1366 | bottom: 10%; 1367 | z-index: 300; 1368 | animation: move_height_100 50s linear infinite; 1369 | -webkit-animation: move_height_100 50s linear infinite; 1370 | } 1371 | 1372 | #move2 { 1373 | position: absolute; 1374 | left: 90%; 1375 | bottom: 20%; 1376 | z-index: 300; 1377 | animation: move_height_100 40s linear infinite; 1378 | -webkit-animation: move_height_100 40s linear infinite; 1379 | } 1380 | 1381 | #move3 { 1382 | position: absolute; 1383 | left: 35%; 1384 | bottom: 0; 1385 | z-index: 300; 1386 | animation: move_height_100 30s linear infinite; 1387 | -webkit-animation: move_height_100 30s linear infinite; 1388 | } 1389 | 1390 | #move4 { 1391 | position: absolute; 1392 | left: 60%; 1393 | bottom: 80%; 1394 | z-index: 300; 1395 | animation: move_height_100 550s linear infinite; 1396 | -webkit-animation: move_height_100 55s linear infinite; 1397 | } 1398 | 1399 | #move5 { 1400 | position: absolute; 1401 | left: 45%; 1402 | bottom: 0; 1403 | z-index: 300; 1404 | animation: move_height_100 60s linear infinite; 1405 | -webkit-animation: move_height_100 60s linear infinite; 1406 | } 1407 | 1408 | #move6 { 1409 | position: absolute; 1410 | left: 35%; 1411 | bottom: 95%; 1412 | z-index: 300; 1413 | animation: move_height_100 40s linear infinite; 1414 | -webkit-animation: move_height_100 40s linear infinite; 1415 | } 1416 | 1417 | #move7 { 1418 | position: absolute; 1419 | left: 25%; 1420 | bottom: 10%; 1421 | z-index: 300; 1422 | animation: move_height_100 50s linear infinite; 1423 | -webkit-animation: move_height_100 50s linear infinite; 1424 | } 1425 | 1426 | #move8 { 1427 | position: absolute; 1428 | left: 60%; 1429 | bottom: 0; 1430 | z-index: 300; 1431 | animation: move_height_100 50s linear infinite; 1432 | -webkit-animation: move_height_100 50s linear infinite; 1433 | } 1434 | 1435 | #move9 { 1436 | position: absolute; 1437 | left: 5%; 1438 | bottom: 25%; 1439 | z-index: 300; 1440 | animation: move_height_100 50s linear infinite; 1441 | -webkit-animation: move_height_100 50s linear infinite; 1442 | } 1443 | 1444 | #move10 { 1445 | position: absolute; 1446 | left: 35%; 1447 | bottom: 50%; 1448 | z-index: 300; 1449 | animation: move_height_100 40s linear infinite; 1450 | -webkit-animation: move_height_100 40s linear infinite; 1451 | } 1452 | 1453 | #move11 { 1454 | position: absolute; 1455 | left: 55%; 1456 | bottom: 70%; 1457 | z-index: 300; 1458 | animation: move_height_100 30s linear infinite; 1459 | -webkit-animation: move_height_100 30s linear infinite; 1460 | } 1461 | 1462 | #move12 { 1463 | position: absolute; 1464 | left: 85%; 1465 | bottom: 90%; 1466 | z-index: 300; 1467 | animation: move_height_50 55s linear infinite; 1468 | -webkit-animation: move_height_50 55s linear infinite; 1469 | } 1470 | 1471 | #move13 { 1472 | position: absolute; 1473 | left: 95%; 1474 | bottom: 20%; 1475 | z-index: 300; 1476 | animation: move_height_50 60s linear infinite; 1477 | -webkit-animation: move_height_50 60s linear infinite; 1478 | } 1479 | 1480 | #move14 { 1481 | position: absolute; 1482 | left: 35%; 1483 | bottom: 0; 1484 | z-index: 300; 1485 | animation: move_height_50 40s linear infinite; 1486 | -webkit-animation: move_height_50 40s linear infinite; 1487 | } 1488 | 1489 | #move15 { 1490 | position: absolute; 1491 | left: 17%; 1492 | bottom: 60%; 1493 | z-index: 300; 1494 | animation: move_height_50 60s linear infinite; 1495 | -webkit-animation: move_height_50 60s linear infinite; 1496 | } 1497 | 1498 | #move16 { 1499 | position: absolute; 1500 | left: 78%; 1501 | bottom: 80%; 1502 | z-index: 300; 1503 | animation: move_height_50 55s linear infinite; 1504 | -webkit-animation: move_height_50 55s linear infinite; 1505 | } 1506 | 1507 | #move17 { 1508 | position: absolute; 1509 | left: 40%; 1510 | bottom: 70%; 1511 | z-index: 300; 1512 | animation: move_height_50 80s linear infinite; 1513 | -webkit-animation: move_height_50 80s linear infinite; 1514 | } 1515 | 1516 | #move18 { 1517 | position: absolute; 1518 | left: 55%; 1519 | bottom: 40%; 1520 | z-index: 300; 1521 | animation: move_height_50 55s linear infinite; 1522 | -webkit-animation: move_height_50 55s linear infinite; 1523 | } 1524 | 1525 | #move19 { 1526 | position: absolute; 1527 | left: 33%; 1528 | bottom: 60%; 1529 | z-index: 300; 1530 | animation: move_height_50 40s linear infinite; 1531 | -webkit-animation: move_height_50 40s linear infinite; 1532 | } 1533 | 1534 | #move20 { 1535 | position: absolute; 1536 | left: 60%; 1537 | bottom: 70%; 1538 | z-index: 300; 1539 | animation: move_height_50 45s linear infinite; 1540 | -webkit-animation: move_height_50 45s linear infinite; 1541 | } 1542 | 1543 | #move21 { 1544 | position: absolute; 1545 | left: 70%; 1546 | bottom: 100%; 1547 | z-index: 300; 1548 | animation: move_height_50 55s linear infinite; 1549 | -webkit-animation: move_height_50 55s linear infinite; 1550 | } 1551 | 1552 | #move22 { 1553 | position: absolute; 1554 | left: 15%; 1555 | bottom: 66%; 1556 | z-index: 300; 1557 | animation: move_height_50 30s linear infinite; 1558 | -webkit-animation: move_height_50 30s linear infinite; 1559 | } 1560 | 1561 | #move1, 1562 | #move2, 1563 | #move3, 1564 | #move4, 1565 | #move5, 1566 | #move6, 1567 | #move7, 1568 | #move8, 1569 | #move9, 1570 | #move10, 1571 | #move11, 1572 | #move12, 1573 | #move13, 1574 | #move14, 1575 | #move15, 1576 | #move16, 1577 | #move17, 1578 | #move18, 1579 | #move19, 1580 | #move20, 1581 | #move21, 1582 | #move22 { 1583 | z-index: 0; 1584 | } 1585 | 1586 | .about_app_left, 1587 | .about_app, 1588 | .login_left h2, 1589 | form.login_form, 1590 | .business_page_text { 1591 | position: relative; 1592 | z-index: 1; 1593 | } 1594 | 1595 | /*SVG Animation*/ 1596 | .circle_move { 1597 | motion-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0"); 1598 | offset-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0"); 1599 | animation: move_on_circle 25s linear infinite; 1600 | } 1601 | 1602 | @keyframes move_on_circle { 1603 | 100% { 1604 | motion-offset: 100%; 1605 | offset-distance: 100%; 1606 | } 1607 | } 1608 | 1609 | /******/ 1610 | @keyframes ak1 { 1611 | 100% { 1612 | d: path( 1613 | "M9652.548,854.245c-44.753,43.775,65.263,205.439,275.973,165.917s205.659-443.337,24.061-376.371S9697.3,804.47,9652.548,847.245Z" 1614 | ); 1615 | } 1616 | } 1617 | 1618 | @keyframes ak2 { 1619 | 100% { 1620 | border-radius: 10px; 1621 | } 1622 | } 1623 | 1624 | @keyframes ak3 { 1625 | 100% { 1626 | d: path( 1627 | "M211.7,134.781C237.51,176.936,168.334,247.4,109.22,233.4S-19.639,162.936,5.981,134.781,185.89,106.625,211.7,134.781Z" 1628 | ); 1629 | } 1630 | } 1631 | 1632 | @keyframes ak4 { 1633 | 100% { 1634 | d: path( 1635 | "M160.377,48.181a41,41,0,0,1,38.245,0L343.015,201.537c18.967,27.179-.48,64.463-33.623,64.463H78.608c-33.143,0-52.589-37.284-33.623-64.463Z" 1636 | ); 1637 | } 1638 | } 1639 | 1640 | @keyframes ak5 { 1641 | 100% { 1642 | d: path("M358,179A179,179,0,0,1,0,144Z"); 1643 | } 1644 | } 1645 | 1646 | @keyframes ak6 { 1647 | 100% { 1648 | d: path( 1649 | "M7861.039,3804.265c-95.83,217.173,154.009,178.958,203.886,44.755S7956.868,3582.092,7861.039,3821.265Z" 1650 | ); 1651 | } 1652 | } 1653 | 1654 | @keyframes ak7 { 1655 | 100% { 1656 | d: path( 1657 | "M8462.153,3828.512c-32.819-85.028,106.733-315.462,146.147-196.827s176.1,164.472,94,217.219S8494.974,3913.54,8462.153,3828.512Z" 1658 | ); 1659 | } 1660 | } 1661 | 1662 | @keyframes ak8 { 1663 | 100% { 1664 | border-radius: 10px; 1665 | } 1666 | } 1667 | 1668 | @keyframes ak9 { 1669 | 100% { 1670 | d: path("M358,179A179,179,0,0,1,0,131Z"); 1671 | } 1672 | } 1673 | 1674 | @keyframes ak10 { 1675 | 100% { 1676 | d: path( 1677 | "M7857.306,3786.744c-79.226,170.831,88.325,83.823,199.148,31.967S7936.531,3615.912,7857.306,3786.744Z" 1678 | ); 1679 | } 1680 | } 1681 | 1682 | @keyframes ak11 { 1683 | 100% { 1684 | d: path("M358,179A179,166,0,0,1,0,179Z"); 1685 | } 1686 | } 1687 | 1688 | @keyframes ak12 { 1689 | 100% { 1690 | d: path( 1691 | "M7861.039,3781.265c-95.83,239.173,133.009,157.958,225.886,44.755S7956.868,3582.092,7861.039,3821.265Z" 1692 | ); 1693 | } 1694 | } 1695 | 1696 | @keyframes ak13 { 1697 | 100% { 1698 | d: path( 1699 | "M350.085,148.619c42.723,10.606-71.785,134.426-169.637,147.426S-32.855,177.225,9.554,155.619,307.361,102.012,350.085,148.619Z" 1700 | ); 1701 | } 1702 | } 1703 | 1704 | @keyframes ak14 { 1705 | 100% { 1706 | d: path( 1707 | "M8462.153,3810.512c-32.819-85.028,54.733-315.462,170.147-196.827s176.1,164.472,94,202.219S8494.974,3913.54,8462.153,3828.512Z" 1708 | ); 1709 | } 1710 | } 1711 | 1712 | @keyframes ak15 { 1713 | 100% { 1714 | d: path( 1715 | "M7857.306,3786.744c-79.226,170.831,127.325,47.823,199.148,31.967S7936.531,3615.912,7857.306,3786.744Z" 1716 | ); 1717 | } 1718 | } 1719 | 1720 | @keyframes ak16 { 1721 | 100% { 1722 | d: path( 1723 | "M134.377,34.181a41,41,0,0,1,49.245,0L343.015,197.537c18.967,27.179-.48,64.463-33.623,64.463H78.608c-33.143,0-52.589-37.284-33.623-64.463Z" 1724 | ); 1725 | } 1726 | } 1727 | 1728 | @keyframes ak17 { 1729 | 100% { 1730 | d: path("M345,179A179,179,0,0,1,0,179Z"); 1731 | } 1732 | } 1733 | 1734 | @keyframes triangle_animation { 1735 | 100% { 1736 | transform: rotate(-1deg); 1737 | bottom: -1rem; 1738 | } 1739 | } 1740 | 1741 | .svg1 svg path { 1742 | animation: ak1 5s linear alternate infinite; 1743 | } 1744 | 1745 | .app_img_right .svg4 svg path { 1746 | animation: ak3 5s linear alternate infinite; 1747 | } 1748 | 1749 | .home_section2 .square_304, 1750 | .business_sec3 .square_304 { 1751 | animation: ak2 5s linear alternate infinite; 1752 | } 1753 | 1754 | .home_section3 .svg6 svg path { 1755 | animation: ak4 5s linear alternate infinite; 1756 | } 1757 | 1758 | .app_img .svg7 svg path { 1759 | animation: ak5 5s linear alternate infinite; 1760 | } 1761 | 1762 | .app_img .svg8 svg path { 1763 | animation: ak6 5s linear alternate infinite; 1764 | } 1765 | 1766 | .home_section5 .app_img .svg10 svg path { 1767 | animation: ak7 5s linear alternate infinite; 1768 | } 1769 | 1770 | .home_section6 .square_304 { 1771 | animation: ak8 5s linear alternate infinite; 1772 | } 1773 | 1774 | .home_section6 .svg12 svg path { 1775 | animation: ak9 5s linear alternate infinite; 1776 | } 1777 | 1778 | .home_section7 .svg13 svg path { 1779 | animation: ak10 4s linear alternate infinite; 1780 | } 1781 | 1782 | .business_svg3 svg path { 1783 | animation: ak11 3s linear alternate infinite; 1784 | } 1785 | 1786 | .business_svg4 svg path { 1787 | animation: ak12 5s linear alternate infinite; 1788 | } 1789 | 1790 | .business_svg5 svg path { 1791 | animation: ak13 5s linear alternate infinite; 1792 | } 1793 | 1794 | .business_svg6 svg path { 1795 | animation: ak14 5s linear alternate infinite; 1796 | } 1797 | 1798 | .business_svg7 svg path { 1799 | animation: ak15 5s linear alternate infinite; 1800 | } 1801 | 1802 | .business_svg9 svg path { 1803 | animation: ak16 5s linear alternate infinite; 1804 | } 1805 | 1806 | .business_svg10 svg path { 1807 | animation: ak17 5s linear alternate infinite; 1808 | } 1809 | 1810 | /*Large devices (desktops, 992px and up)*/ 1811 | 1812 | @media (min-width: 992px) { 1813 | html { 1814 | font-size: 14px; 1815 | } 1816 | 1817 | .home_screen_section .model { 1818 | width: 20.25rem; 1819 | height: auto; 1820 | z-index: 99; 1821 | } 1822 | .home_screen_section .google_badge { 1823 | width: 15rem; 1824 | height: auto; 1825 | } 1826 | .feature_section_heading { 1827 | font-size: 2.1rem; 1828 | } 1829 | .feature_section_sub_heading { 1830 | font-size: 1.5rem; 1831 | line-height: 2.1rem; 1832 | } 1833 | .feature_section .feature_model { 1834 | width: 16rem; 1835 | height: auto; 1836 | } 1837 | .feature_section .feature_model { 1838 | width: 20.25rem; 1839 | height: auto; 1840 | z-index: 99; 1841 | } 1842 | } 1843 | 1844 | /*Extra large devices (large desktops, 1200px and up)*/ 1845 | 1846 | @media (max-width: 1200px) { 1847 | html { 1848 | font-size: 14px; 1849 | } 1850 | } 1851 | 1852 | @media (min-width: 1600px) { 1853 | html { 1854 | font-size: 16px; 1855 | } 1856 | } 1857 | 1858 | @media (max-width: 1800px) { 1859 | .navbar-expand-lg .navbar-nav .nav-link { 1860 | font-size: 1.1rem; 1861 | } 1862 | } 1863 | 1864 | @media (max-width: 1600px) { 1865 | html { 1866 | font-size: 14px; 1867 | } 1868 | .navbar-expand-lg .navbar-nav .nav-link { 1869 | padding: 0.5rem 1rem; 1870 | } 1871 | 1872 | .nav_link { 1873 | font-size: 1.5rem; 1874 | } 1875 | .about_app img.logo_title { 1876 | width: 30rem; 1877 | } 1878 | .rounded_button { 1879 | margin-left: 1.5rem; 1880 | } 1881 | 1882 | .home_screen_section { 1883 | padding: 3rem 5.5rem 8rem; 1884 | } 1885 | .app_img .circle_46 { 1886 | right: -1.5rem; 1887 | } 1888 | .ellipse_svg1 { 1889 | right: -9.5rem; 1890 | } 1891 | .home_section2 .about_app_left { 1892 | padding-left: 3rem; 1893 | } 1894 | .app_img_right .svg4 { 1895 | bottom: -4rem; 1896 | left: -1rem; 1897 | } 1898 | .feature_section .feature_model { 1899 | width: 20rem; 1900 | } 1901 | svg { 1902 | width: 90%; 1903 | } 1904 | .home_section3 .svg5 { 1905 | left: 5rem; 1906 | } 1907 | .ellipse_svg2 { 1908 | left: -25rem; 1909 | top: 6rem; 1910 | } 1911 | .copy_right p span svg { 1912 | width: auto; 1913 | padding: 0px 5px; 1914 | } 1915 | .home_screen_section .model { 1916 | z-index: 99; 1917 | } 1918 | } 1919 | 1920 | @media (max-width: 1500px) { 1921 | .navbar-expand-lg .navbar-nav .nav-link { 1922 | padding: 0.5rem 0.5rem; 1923 | } 1924 | .rounded_button { 1925 | margin-left: 1rem; 1926 | } 1927 | .nav_logo { 1928 | width: 10rem; 1929 | } 1930 | } 1931 | 1932 | @media (max-width: 1450px) { 1933 | .home_screen_section { 1934 | padding: 4rem 3.5rem 8rem; 1935 | } 1936 | .navbar-expand-lg .navbar-nav .nav-link { 1937 | font-size: 1.1rem; 1938 | } 1939 | .navbar-expand-lg .navbar-nav .nav-link { 1940 | padding: 0.5rem 1rem; 1941 | } 1942 | .nav_button { 1943 | font-size: 1.1rem; 1944 | } 1945 | .circle_254 { 1946 | width: 14rem; 1947 | height: 14rem; 1948 | } 1949 | .circle_240 { 1950 | width: 13rem; 1951 | height: 13rem; 1952 | } 1953 | .app_img .svg1 { 1954 | width: 27rem; 1955 | } 1956 | .home_screen_section .model { 1957 | z-index: 99; 1958 | } 1959 | .app_img .svg1 { 1960 | width: 29rem; 1961 | z-index: 1; 1962 | left: 3.6rem; 1963 | bottom: -2rem; 1964 | } 1965 | .home_section3 .svg5 { 1966 | left: 8rem; 1967 | width: 25rem; 1968 | top: -10rem; 1969 | } 1970 | .home_section3 .about_app { 1971 | padding-left: 2rem; 1972 | } 1973 | .home_section3 .svg6 { 1974 | bottom: -8rem; 1975 | left: -3rem; 1976 | width: 28rem; 1977 | } 1978 | .app_img .svg7 { 1979 | top: -7rem; 1980 | left: 0rem; 1981 | width: 23rem; 1982 | } 1983 | .home_section4 .svg9 { 1984 | bottom: 0.5rem; 1985 | right: -30rem; 1986 | } 1987 | .app_img .svg8 { 1988 | bottom: -9rem; 1989 | right: -3rem; 1990 | } 1991 | .home_section4 .circle_66 { 1992 | left: -1rem; 1993 | } 1994 | .home_section5 .app_img .circle_240 { 1995 | right: -2rem; 1996 | bottom: -4rem; 1997 | } 1998 | .home_section6 .svg11 { 1999 | left: -17rem; 2000 | top: -3rem; 2001 | } 2002 | .home_section6 > .circle_46 { 2003 | left: 2rem; 2004 | top: 19.5rem; 2005 | } 2006 | .home_section6 .app_img { 2007 | padding-left: 5rem; 2008 | } 2009 | .square_304 { 2010 | width: 17rem; 2011 | height: 17rem; 2012 | } 2013 | .home_section6 .square_304 { 2014 | top: -3.1rem; 2015 | left: 5rem; 2016 | } 2017 | .home_section6 .svg12 { 2018 | right: -7rem; 2019 | bottom: -7rem; 2020 | width: 24rem; 2021 | } 2022 | .home_section6 .app_img .circle_25 { 2023 | left: 1rem; 2024 | } 2025 | .home_section6 .about_app_left .circle_46 { 2026 | right: 0rem; 2027 | bottom: -6rem; 2028 | } 2029 | .home_section7 .svg13 { 2030 | top: -7rem; 2031 | right: -1rem; 2032 | width: 16rem; 2033 | } 2034 | .home_section7 .svg14 { 2035 | bottom: -3rem; 2036 | left: -2rem; 2037 | width: 19rem; 2038 | } 2039 | .home_section7 .circle_23 { 2040 | right: 2rem; 2041 | } 2042 | .home_section7 .circle_12 { 2043 | bottom: 8rem; 2044 | right: -2rem; 2045 | } 2046 | .home_section8 .circle_240 { 2047 | top: -3rem; 2048 | left: 1rem; 2049 | } 2050 | footer p, 2051 | footer a { 2052 | font-size: 1.1rem; 2053 | } 2054 | .footer_social { 2055 | padding-top: 3.5rem; 2056 | } 2057 | .footer_social a { 2058 | margin: 0px 1rem; 2059 | } 2060 | /*Business Page*/ 2061 | .login_right { 2062 | padding: 4rem 5rem 7rem 5rem; 2063 | } 2064 | .login_left { 2065 | padding: 6rem 4rem 7rem 4rem; 2066 | } 2067 | .b_text_left { 2068 | padding-right: 3rem; 2069 | } 2070 | .b_text_right { 2071 | padding-left: 3rem; 2072 | } 2073 | .business_sec3 .circle_66 { 2074 | left: -6rem; 2075 | } 2076 | .login_left h2 { 2077 | font-size: 1.6rem; 2078 | line-height: 2.8rem; 2079 | } 2080 | } 2081 | 2082 | @media (max-width: 1300px) { 2083 | .custom_container { 2084 | width: 95%; 2085 | } 2086 | .app_img { 2087 | padding-left: 0rem; 2088 | } 2089 | .rounded_button { 2090 | margin-left: 0.5rem; 2091 | } 2092 | .home_screen_section { 2093 | padding: 5rem 4rem 8rem; 2094 | } 2095 | .home_screen_section .model { 2096 | width: 20rem; 2097 | z-index: 9; 2098 | } 2099 | .circle_254 { 2100 | width: 13rem; 2101 | height: 13rem; 2102 | } 2103 | .home_screen_section .app_img .circle_254 { 2104 | left: -3rem; 2105 | top: -1rem; 2106 | } 2107 | .app_img .svg1 { 2108 | left: 0.6rem; 2109 | bottom: -2.3rem; 2110 | width: 27rem; 2111 | z-index: 1; 2112 | } 2113 | .font_30 { 2114 | font-size: 1.6rem; 2115 | } 2116 | .home_screen_section .about_app > img { 2117 | width: 70%; 2118 | } 2119 | .about_app { 2120 | padding-top: 3rem; 2121 | } 2122 | .about_app h4 { 2123 | margin: 1.5rem 0rem 3rem; 2124 | } 2125 | .feature_section .feature_model { 2126 | width: 18rem; 2127 | } 2128 | .home_section2 .square_304 { 2129 | width: 17rem; 2130 | height: 17rem; 2131 | } 2132 | .ellipse_svg2 { 2133 | left: -30rem; 2134 | top: 3rem; 2135 | } 2136 | .home_section4 .about_app_left { 2137 | padding-left: 3rem; 2138 | } 2139 | .app_img .svg7 { 2140 | top: -8.5rem; 2141 | left: 0rem; 2142 | width: 20rem; 2143 | } 2144 | .app_img .svg8 { 2145 | bottom: -10rem; 2146 | right: -2rem; 2147 | width: 18rem; 2148 | } 2149 | .home_section4 .circle_66 { 2150 | left: -2rem; 2151 | } 2152 | .home_section3 .app_img { 2153 | padding-left: 3rem; 2154 | } 2155 | .home_section3 .svg5 { 2156 | left: 6rem; 2157 | width: 25rem; 2158 | top: -9rem; 2159 | } 2160 | .home_section3 .svg6 { 2161 | bottom: -8rem; 2162 | left: -3rem; 2163 | width: 25rem; 2164 | } 2165 | .home_section4 .svg9 { 2166 | bottom: 0.5rem; 2167 | right: -27rem; 2168 | width: 35rem; 2169 | } 2170 | .home_section5 .app_img { 2171 | padding-left: 3rem; 2172 | } 2173 | .home_section5 .app_img .circle_240 { 2174 | right: 1rem; 2175 | } 2176 | .home_section5 .app_img .svg10 { 2177 | top: -6rem; 2178 | left: -3rem; 2179 | } 2180 | .home_section5 .app_img .circle_24 { 2181 | bottom: 14rem; 2182 | right: 2.5rem; 2183 | } 2184 | .square_304 { 2185 | width: 17rem; 2186 | height: 17rem; 2187 | } 2188 | .circle_240 { 2189 | width: 12rem; 2190 | height: 12rem; 2191 | } 2192 | .home_section6 .app_img { 2193 | padding-left: 5rem; 2194 | } 2195 | .home_section6 .square_304 { 2196 | top: -3.1rem; 2197 | left: 3rem; 2198 | } 2199 | .home_section6 .svg12 { 2200 | right: -4rem; 2201 | bottom: -8rem; 2202 | width: 20rem; 2203 | } 2204 | .home_section6 .svg11 { 2205 | left: -21rem; 2206 | top: -3rem; 2207 | } 2208 | .home_section6 > .circle_46 { 2209 | left: 2rem; 2210 | top: 17rem; 2211 | } 2212 | .home_section6 .app_img .circle_25 { 2213 | left: 2rem; 2214 | } 2215 | .home_section6 .about_app_left .circle_46 { 2216 | right: 1rem; 2217 | bottom: -7rem; 2218 | } 2219 | .home_section7 .svg13 { 2220 | top: -7rem; 2221 | right: -1rem; 2222 | width: 16rem; 2223 | } 2224 | .home_section7 .svg14 { 2225 | bottom: -5rem; 2226 | left: -1rem; 2227 | width: 14rem; 2228 | } 2229 | .home_section7 .circle_23 { 2230 | top: 15rem; 2231 | right: 1rem; 2232 | } 2233 | .home_section7 .circle_12 { 2234 | bottom: 6rem; 2235 | right: 1rem; 2236 | } 2237 | .home_section8 .circle_240 { 2238 | top: -3rem; 2239 | left: -1rem; 2240 | } 2241 | .home_section8 .circle_23 { 2242 | top: 2rem; 2243 | right: 1rem; 2244 | } 2245 | .home_section8 .circle_50 { 2246 | bottom: -3rem; 2247 | left: -2rem; 2248 | } 2249 | footer p, 2250 | footer a { 2251 | font-size: 1rem; 2252 | } 2253 | .copy_right p span svg { 2254 | width: auto; 2255 | } 2256 | .footer_social a { 2257 | margin: 0px 0.5rem; 2258 | } 2259 | .footer_play img { 2260 | width: 12rem; 2261 | } 2262 | footer { 2263 | padding: 3rem 0rem 2rem; 2264 | } 2265 | .footer_logo svg { 2266 | width: 9rem; 2267 | } 2268 | 2269 | .rounded_button { 2270 | padding: 0.4rem 1.2rem; 2271 | } 2272 | .navbar-expand-lg .navbar-nav .nav-link { 2273 | margin: 0rem 0.3rem; 2274 | } 2275 | } 2276 | 2277 | @media (max-width: 1199px) { 2278 | header.fixed .navbar .navbar-brand .nav_logo { 2279 | max-width: 100%; 2280 | } 2281 | svg { 2282 | width: 85%; 2283 | } 2284 | .custom_container { 2285 | width: 100%; 2286 | } 2287 | header.fixed a.navbar-brand { 2288 | min-width: 5rem; 2289 | width: 5rem; 2290 | } 2291 | 2292 | .navbar-expand-lg .navbar-nav .nav-link { 2293 | padding-right: 0.1rem; 2294 | padding-left: 0.1rem; 2295 | font-size: 1.4rem; 2296 | margin: 0rem 0.5rem; 2297 | } 2298 | .nav_button { 2299 | font-size: 1rem; 2300 | } 2301 | .navbar-expand-lg .navbar-nav .nav-link { 2302 | font-size: 1.1rem; 2303 | } 2304 | .rounded_button { 2305 | padding: 0.5rem 1rem; 2306 | } 2307 | .home_screen_section .model { 2308 | width: 18rem; 2309 | } 2310 | .home_screen_section { 2311 | padding: 5rem 3rem 8rem; 2312 | } 2313 | .circle_254 { 2314 | width: 10rem; 2315 | height: 10rem; 2316 | } 2317 | .app_img .svg1 { 2318 | left: 5.6rem; 2319 | bottom: -9.3rem; 2320 | width: 18rem; 2321 | } 2322 | .home_screen_section .google_badge { 2323 | width: 13.5rem; 2324 | } 2325 | .home_section2 .square_304 { 2326 | width: 15rem; 2327 | height: 15rem; 2328 | right: 4rem; 2329 | top: -5.5rem; 2330 | } 2331 | .app_img_right .svg4 { 2332 | bottom: -5rem; 2333 | left: -4rem; 2334 | z-index: 9; 2335 | } 2336 | .home_section3 .svg5 { 2337 | left: 6rem; 2338 | width: 24rem; 2339 | top: -12rem; 2340 | } 2341 | .feature_section_heading { 2342 | font-size: 1.9rem; 2343 | margin-bottom: 0.9rem; 2344 | } 2345 | .home_section4 .circle_28 { 2346 | left: 25rem; 2347 | } 2348 | .app_img .svg7 { 2349 | left: -3rem; 2350 | } 2351 | .home_section4 .svg9 { 2352 | bottom: -4.5rem; 2353 | right: -29rem; 2354 | width: 35rem; 2355 | } 2356 | .home_section5 .app_img .circle_240 { 2357 | right: 0rem; 2358 | bottom: -3rem; 2359 | } 2360 | .home_section6 .app_img { 2361 | padding-left: 3rem; 2362 | } 2363 | .home_section6 .square_304 { 2364 | top: -3.5rem; 2365 | left: 2rem; 2366 | width: 13rem; 2367 | height: 13rem; 2368 | border-radius: 70px !important; 2369 | } 2370 | .about_app img.logo_title { 2371 | width: 22rem; 2372 | } 2373 | .home_section6 > .circle_46 { 2374 | left: 1rem; 2375 | top: 18rem; 2376 | } 2377 | .home_section7 .app_img { 2378 | padding-left: 3rem; 2379 | } 2380 | .home_section7 .svg14 { 2381 | bottom: -6rem; 2382 | left: -1rem; 2383 | width: 13rem; 2384 | } 2385 | .home_section7 .circle_12 { 2386 | right: -2rem; 2387 | } 2388 | .footer_social { 2389 | padding-top: 3rem; 2390 | } 2391 | } 2392 | 2393 | @media (max-width: 992px) { 2394 | .navbar-expand-lg .navbar-collapse { 2395 | width: auto; 2396 | flex-basis: auto; 2397 | } 2398 | .for_desktop { 2399 | display: flex; 2400 | flex-flow: column-reverse; 2401 | width: 100%; 2402 | } 2403 | .navbar-expand-lg .navbar-nav { 2404 | display: flex; 2405 | flex-direction: row; 2406 | justify-content: flex-end; 2407 | margin-right: 0 !important; 2408 | margin-top: 5px; 2409 | } 2410 | .login_part { 2411 | justify-content: flex-end; 2412 | } 2413 | .rounded_button { 2414 | padding: 0.4rem 1.2rem; 2415 | } 2416 | .about_app img.logo_title { 2417 | width: 18rem; 2418 | } 2419 | header.fixed a.navbar-brand { 2420 | min-width: 6rem; 2421 | width: 6rem; 2422 | } 2423 | } 2424 | 2425 | @media (max-width: 992px) { 2426 | footer p, 2427 | footer a { 2428 | font-size: 0.9rem; 2429 | } 2430 | } 2431 | 2432 | @media (max-width: 991px) { 2433 | .custom_container { 2434 | width: 100%; 2435 | } 2436 | header { 2437 | padding: 1rem 0rem 1rem; 2438 | z-index: 99; 2439 | } 2440 | footer p, 2441 | footer a { 2442 | font-size: 0.7rem; 2443 | } 2444 | .navbar-expand-lg .navbar-nav .nav-link.active:before { 2445 | content: none; 2446 | } 2447 | .navbar-collapse.show .nav-item.rm-md-2 { 2448 | margin-top: 0.5rem; 2449 | padding: 0rem 2rem; 2450 | } 2451 | svg { 2452 | width: 80%; 2453 | } 2454 | .copy_right svg { 2455 | width: auto; 2456 | } 2457 | header .navbar { 2458 | background: transparent; 2459 | } 2460 | .ellipse_svg1 { 2461 | right: -17.5rem; 2462 | top: -15.5rem; 2463 | } 2464 | .home_screen_section .model { 2465 | width: 15.25rem; 2466 | z-index: 99; 2467 | } 2468 | .feature_section .feature_model { 2469 | width: 15.25rem; 2470 | z-index: 99; 2471 | } 2472 | .feature_section_heading { 2473 | font-size: 1.5rem; 2474 | } 2475 | .font_30 { 2476 | font-size: 1.4rem; 2477 | } 2478 | .font_35 { 2479 | font-size: 1.6rem; 2480 | } 2481 | .circle_12 { 2482 | width: 0.65rem; 2483 | height: 0.65rem; 2484 | } 2485 | .circle_15 { 2486 | width: 0.8375rem; 2487 | height: 0.8375rem; 2488 | } 2489 | .circle_22 { 2490 | width: 1.275rem; 2491 | height: 1.275rem; 2492 | } 2493 | .circle_23 { 2494 | width: 1.375rem; 2495 | height: 1.375rem; 2496 | } 2497 | .circle_24 { 2498 | width: 1.4rem; 2499 | height: 1.4rem; 2500 | } 2501 | .circle_25 { 2502 | width: 1.4625rem; 2503 | height: 1.4625rem; 2504 | } 2505 | .circle_28 { 2506 | width: 1.65rem; 2507 | height: 1.65rem; 2508 | } 2509 | .circle_34 { 2510 | width: 2rem; 2511 | height: 2rem; 2512 | } 2513 | .circle_46 { 2514 | width: 2.775rem; 2515 | height: 2.775rem; 2516 | } 2517 | .circle_50 { 2518 | width: 3em; 2519 | height: 3rem; 2520 | } 2521 | .circle_56 { 2522 | width: 3.1rem; 2523 | height: 3.1rem; 2524 | } 2525 | .circle_66 { 2526 | width: 3.125rem; 2527 | height: 3.125rem; 2528 | } 2529 | .circle_240 { 2530 | width: 12rem; 2531 | height: 12rem; 2532 | } 2533 | .circle_254 { 2534 | width: 10.875rem; 2535 | height: 10.875rem; 2536 | } 2537 | .square_304 { 2538 | width: 12rem; 2539 | height: 12rem; 2540 | } 2541 | .home_screen_section .app_img .circle_254 { 2542 | left: -2rem; 2543 | top: -2rem; 2544 | } 2545 | .app_img .circle_24 { 2546 | top: 10rem; 2547 | left: 17.5rem; 2548 | } 2549 | .app_img .svg1 { 2550 | left: 4.6rem; 2551 | bottom: -9.3rem; 2552 | width: 19rem; 2553 | } 2554 | .home_section2 .square_304 { 2555 | width: 10rem; 2556 | height: 10rem; 2557 | right: 3rem; 2558 | top: -5.5rem; 2559 | border-radius: 35px; 2560 | } 2561 | .ellipse_svg2 { 2562 | left: -28rem; 2563 | top: -5rem; 2564 | width: 90%; 2565 | } 2566 | .app_img_right .svg4 { 2567 | bottom: -8rem; 2568 | left: -6rem; 2569 | z-index: 9; 2570 | } 2571 | .app_img_right { 2572 | padding-right: 2rem; 2573 | } 2574 | .home_section3 .app_img { 2575 | padding-left: 2rem; 2576 | } 2577 | .home_section3 .svg5 { 2578 | left: 5rem; 2579 | width: 19rem; 2580 | top: -13rem; 2581 | } 2582 | .home_section3 .svg6 { 2583 | bottom: -12rem; 2584 | left: -1rem; 2585 | width: 21rem; 2586 | } 2587 | .home_section3 .about_app { 2588 | padding-left: 0rem; 2589 | } 2590 | .home_section3 .circle_56 { 2591 | bottom: -5rem; 2592 | left: 8rem; 2593 | } 2594 | .app_img .svg7 { 2595 | left: -3rem; 2596 | top: -10.5rem; 2597 | width: 18rem; 2598 | } 2599 | .app_img .svg8 { 2600 | bottom: -12rem; 2601 | right: -3rem; 2602 | } 2603 | .home_section4 .circle_15 { 2604 | bottom: -10rem; 2605 | } 2606 | .home_section5 .app_img .svg10 { 2607 | top: -10rem; 2608 | left: -1rem; 2609 | } 2610 | .home_section5 .app_img .circle_240 { 2611 | right: -3rem; 2612 | bottom: -4rem; 2613 | } 2614 | .home_section5 .app_img .circle_24 { 2615 | right: -0.5rem; 2616 | } 2617 | .home_section6 .square_304 { 2618 | top: -4.5rem; 2619 | left: 2rem; 2620 | border-radius: 55px; 2621 | } 2622 | .home_section6 .svg12 { 2623 | right: -4rem; 2624 | bottom: -8rem; 2625 | width: 25rem; 2626 | } 2627 | .home_section7 .svg13 { 2628 | top: -8rem; 2629 | right: -6rem; 2630 | width: 17rem; 2631 | } 2632 | .home_section7 .circle_50 { 2633 | top: 7rem; 2634 | left: 1rem; 2635 | width: 2rem; 2636 | height: 2rem; 2637 | } 2638 | .home_section7 .svg14 { 2639 | bottom: -9rem; 2640 | left: -1rem; 2641 | width: 15rem; 2642 | } 2643 | .home_section8 .circle_240 { 2644 | top: -3rem; 2645 | left: -1rem; 2646 | } 2647 | .home_section8 .app_img .circle_46 { 2648 | right: 0rem; 2649 | } 2650 | .footer_social a { 2651 | margin: 0px 0.9rem; 2652 | } 2653 | .footer_social { 2654 | padding-top: 2rem; 2655 | display: inline-block; 2656 | justify-content: center; 2657 | } 2658 | } 2659 | 2660 | @media (max-width: 768px) { 2661 | .navbar-expand-lg .navbar-toggler { 2662 | display: none; 2663 | } 2664 | } 2665 | 2666 | @media (max-width: 767px) { 2667 | .menu-icons { 2668 | display: block !important; 2669 | } 2670 | .navbar-expand-lg .navbar-toggler { 2671 | display: block; 2672 | z-index: 9999; 2673 | } 2674 | .navbar-expand-lg .navbar-toggler.active { 2675 | position: fixed; 2676 | right: 15px; 2677 | } 2678 | .btn-primary { 2679 | color: #fff; 2680 | } 2681 | .navbar-collapse { 2682 | position: absolute; 2683 | width: 100% !important; 2684 | top: -115vh; 2685 | padding: 0rem 1rem; 2686 | z-index: 9; 2687 | min-height: auto; 2688 | transition: all 0.3s ease-in-out; 2689 | box-shadow: none; 2690 | } 2691 | 2692 | .navbar-expand-lg .navbar-nav.main_menu li a { 2693 | border-bottom: 1px solid #fff; 2694 | padding: 0.5rem 0rem 0.5rem; 2695 | color: #fff; 2696 | } 2697 | 2698 | .navbar-light .navbar-toggler { 2699 | display: flex; 2700 | flex-direction: column; 2701 | } 2702 | } 2703 | 2704 | @media (max-width: 767px) { 2705 | .menu-icons { 2706 | display: block !important; 2707 | } 2708 | .home_screen_section .model { 2709 | width: 15rem; 2710 | } 2711 | 2712 | .navbar-collapse.show .nav-item.rm-md-2 { 2713 | margin-top: 0.5rem; 2714 | margin-bottom: 0.5rem; 2715 | } 2716 | header .custom_container .for_mobile .amigoz_icon img { 2717 | width: 10rem; 2718 | } 2719 | header .custom_container .for_mobile .amigoz_icon h4 { 2720 | font-size: 1.25rem; 2721 | margin-top: 1rem; 2722 | } 2723 | header .custom_container .for_mobile .business_login { 2724 | margin: 5rem 0rem 4rem; 2725 | } 2726 | header .custom_container .for_mobile .business_login a.rounded_button { 2727 | font-size: 1.375rem; 2728 | border: 2px solid #6d6bdb; 2729 | padding: 0.655rem 1.8rem; 2730 | } 2731 | header .custom_container .for_mobile .mob_app a img { 2732 | width: 12rem; 2733 | } 2734 | header .custom_container .for_mobile .mob_social { 2735 | width: 100%; 2736 | margin: auto; 2737 | left: 0; 2738 | padding: 2.5rem 5rem 2rem; 2739 | } 2740 | header .custom_container .for_mobile .mob_social h4 { 2741 | font-size: 1.25rem; 2742 | font-weight: 600; 2743 | color: #363636; 2744 | margin-bottom: 1.5rem; 2745 | } 2746 | header .custom_container .for_mobile .mob_social ul { 2747 | padding: 0rem; 2748 | margin: 0rem; 2749 | display: flex; 2750 | justify-content: center; 2751 | } 2752 | header .custom_container .for_mobile .mob_social ul li { 2753 | list-style: none; 2754 | width: 25%; 2755 | } 2756 | header .custom_container .for_mobile .mob_social ul li a svg { 2757 | width: 1.5rem; 2758 | height: auto; 2759 | fill: #4442c2; 2760 | } 2761 | header .custom_container .for_mobile .mob_social ul li a svg.fb { 2762 | width: 0.9rem; 2763 | } 2764 | header .custom_container .for_desktop { 2765 | display: none; 2766 | } 2767 | header .custom_container .navbar-collapse.show { 2768 | width: 100%; 2769 | width: auto; 2770 | min-width: 100%; 2771 | padding: 0px; 2772 | left: 0px; 2773 | right: 0px; 2774 | position: fixed; 2775 | min-height: 100vh; 2776 | background: #fff; 2777 | top: 0; 2778 | transition: all 0.3s ease-in-out; 2779 | } 2780 | 2781 | header .custom_container .for_mobile { 2782 | background: #fff; 2783 | padding: 5rem 4rem 1rem 4rem; 2784 | text-align: center; 2785 | } 2786 | header .custom_container .navbar-collapse.show .for_mobile { 2787 | display: block; 2788 | width: 100%; 2789 | min-height: 100%; 2790 | } 2791 | 2792 | .feature_section .feature_model { 2793 | width: 12rem; 2794 | } 2795 | .feature_section_heading { 2796 | font-size: 1.9rem; 2797 | line-height: normal; 2798 | text-align: center; 2799 | } 2800 | .ellipse_svg1 { 2801 | display: none; 2802 | } 2803 | .circle_254 { 2804 | width: 9.875rem; 2805 | height: 9.875rem; 2806 | } 2807 | .home_screen_section .app_img .circle_254 { 2808 | left: 1rem; 2809 | top: -2rem; 2810 | } 2811 | .circle_56, 2812 | .circle_55, 2813 | .circle_46, 2814 | .circle_50, 2815 | .ellipse_svg2, 2816 | .circle_66, 2817 | .home_section4 .svg9, 2818 | .home_section6 .svg11 { 2819 | display: none; 2820 | } 2821 | .app_img .svg1 { 2822 | left: 2.6rem; 2823 | bottom: -8rem; 2824 | width: 22rem; 2825 | } 2826 | .app_img .circle_24 { 2827 | top: 7rem; 2828 | left: 23.5rem; 2829 | } 2830 | .home_screen_section .about_app { 2831 | padding-top: 5rem; 2832 | } 2833 | .home_section2 .about_app_left { 2834 | padding-left: 0rem; 2835 | padding-top: 3rem; 2836 | padding-bottom: 5rem; 2837 | } 2838 | .app_img_right { 2839 | padding-right: 0rem; 2840 | text-align: center; 2841 | } 2842 | .home_screen_section { 2843 | padding: 5rem 3rem 6rem; 2844 | } 2845 | .home_section2 .square_304 { 2846 | width: 10rem; 2847 | height: 10rem; 2848 | right: 2rem; 2849 | top: -2.5rem; 2850 | } 2851 | .app_img_right .svg4 { 2852 | bottom: -6rem; 2853 | left: -2rem; 2854 | z-index: 1; 2855 | } 2856 | .home_section3 .about_app { 2857 | padding-left: 0rem; 2858 | padding-bottom: 3rem; 2859 | padding-top: 1rem; 2860 | } 2861 | .home_section3 .svg5 { 2862 | left: 10rem; 2863 | width: 18rem; 2864 | top: -13rem; 2865 | } 2866 | .home_section3 .app_img { 2867 | padding-left: 0rem; 2868 | } 2869 | .home_section3 .circle_34 { 2870 | left: 1.5rem; 2871 | top: 17rem; 2872 | } 2873 | .home_section3 { 2874 | padding: 2rem 0rem 6rem; 2875 | } 2876 | .home_section3 .svg6 { 2877 | bottom: -11rem; 2878 | left: -1.5rem; 2879 | width: 24rem; 2880 | } 2881 | .app_img .svg7 { 2882 | left: 1rem; 2883 | width: 16rem; 2884 | top: -10rem; 2885 | } 2886 | .app_img .svg8 { 2887 | bottom: -12rem; 2888 | right: 0rem; 2889 | width: 15rem; 2890 | } 2891 | .home_section4 .about_app_left { 2892 | padding-left: 0rem; 2893 | padding-bottom: 3rem; 2894 | } 2895 | .home_section4 .circle_28 { 2896 | left: 25rem; 2897 | top: 10rem; 2898 | } 2899 | .home_section4 { 2900 | padding: 2rem 0rem 7rem; 2901 | } 2902 | .home_section5 .app_img { 2903 | padding-left: 0rem; 2904 | } 2905 | .home_section5 .about_app { 2906 | padding-top: 2rem; 2907 | padding-bottom: 3rem; 2908 | } 2909 | .home_section5 .app_img .svg10 { 2910 | top: -9rem; 2911 | left: -4rem; 2912 | width: 25rem; 2913 | } 2914 | .home_section5 { 2915 | padding: 1rem 0rem 6rem; 2916 | } 2917 | .home_section5 .app_img .circle_240 { 2918 | right: 4rem; 2919 | bottom: -3rem; 2920 | width: 10rem; 2921 | height: 10rem; 2922 | } 2923 | .home_section6 .about_app_left { 2924 | padding-left: 0rem; 2925 | padding-top: 3rem; 2926 | padding-bottom: 3rem; 2927 | } 2928 | .home_section6 .app_img { 2929 | padding-left: 0rem; 2930 | } 2931 | .home_section6 .square_304 { 2932 | top: -1.5rem; 2933 | left: 1rem; 2934 | border-radius: 35px; 2935 | width: 10rem; 2936 | height: 10rem; 2937 | } 2938 | .home_section6 .svg12 { 2939 | right: 1rem; 2940 | bottom: -10rem; 2941 | width: 18rem; 2942 | z-index: 1; 2943 | } 2944 | .home_section6 { 2945 | padding: 0rem 0rem 7rem; 2946 | } 2947 | .home_section7 .about_app { 2948 | padding-top: 3rem; 2949 | padding-bottom: 3rem; 2950 | } 2951 | .home_section7 .app_img { 2952 | padding-left: 0rem; 2953 | } 2954 | .home_section7 .svg13 { 2955 | top: -9rem; 2956 | right: 1rem; 2957 | width: 14rem; 2958 | } 2959 | .home_section7 .svg14 { 2960 | bottom: -9.5rem; 2961 | left: 3rem; 2962 | width: 12rem; 2963 | } 2964 | .home_section7 { 2965 | padding: 0rem 0rem 7rem; 2966 | } 2967 | .home_section8 .circle_240 { 2968 | top: -2rem; 2969 | left: 5rem; 2970 | width: 8rem; 2971 | height: 8rem; 2972 | } 2973 | .home_section8 .about_app { 2974 | padding-top: 2rem; 2975 | padding-left: 0rem; 2976 | padding-bottom: 3rem; 2977 | } 2978 | .home_section8 { 2979 | padding: 0rem 0rem 3rem; 2980 | } 2981 | .footer_logo { 2982 | text-align: center; 2983 | padding-bottom: 1rem; 2984 | } 2985 | footer p, 2986 | footer a { 2987 | font-size: 0.8rem; 2988 | } 2989 | .copy_right { 2990 | padding-top: 2rem; 2991 | text-align: center; 2992 | } 2993 | .copy_year { 2994 | text-align: center; 2995 | } 2996 | .navbar-expand-lg .navbar-nav .nav-link { 2997 | margin: 0rem 0rem; 2998 | } 2999 | .b_text_left { 3000 | padding-right: 0rem; 3001 | padding-bottom: 5rem; 3002 | } 3003 | .b_text_right { 3004 | padding-left: 0rem; 3005 | padding-bottom: 5rem; 3006 | } 3007 | .floating_button { 3008 | right: 1rem; 3009 | z-index: 9; 3010 | } 3011 | 3012 | .navbar-expand-lg .navbar-nav { 3013 | flex-direction: column; 3014 | } 3015 | .navbar-expand-lg .navbar-nav.main_menu li a { 3016 | color: #363636; 3017 | } 3018 | .navbar-expand-lg .navbar-nav.main_menu li a { 3019 | padding: 0.5rem 0rem 0.5rem; 3020 | } 3021 | .navbar-expand-lg .navbar-nav { 3022 | margin-top: 2rem; 3023 | } 3024 | .rounded_button { 3025 | padding: 0.7rem 1.2rem; 3026 | } 3027 | .navbar-expand-lg .navbar-nav .nav-link { 3028 | font-weight: 600; 3029 | font-size: 1.2rem; 3030 | } 3031 | .nav_button { 3032 | font-size: 1.2rem; 3033 | } 3034 | 3035 | header { 3036 | padding: 0.5rem 0rem 0.5rem; 3037 | z-index: 9999; 3038 | position: fixed; 3039 | width: 100%; 3040 | top: 0; 3041 | background: #fff; 3042 | box-shadow: 0px -1px 10px #00000029; 3043 | transition: all 0.3s ease; 3044 | } 3045 | 3046 | header.scroll_up { 3047 | position: fixed; 3048 | width: 100%; 3049 | top: 0; 3050 | background: #fff; 3051 | transition: all 0.3s ease; 3052 | } 3053 | 3054 | header.scroll_down { 3055 | position: fixed; 3056 | width: 100%; 3057 | top: -5rem; 3058 | transition: all 0.3s ease; 3059 | } 3060 | 3061 | .nav_logo { 3062 | width: 8rem; 3063 | } 3064 | section.main_sec { 3065 | padding-top: 5rem; 3066 | } 3067 | } 3068 | 3069 | @media (max-width: 375px) { 3070 | .menu-icons { 3071 | display: block !important; 3072 | } 3073 | .app_img .svg1 { 3074 | left: 0.6rem; 3075 | bottom: -8.3rem; 3076 | width: 21rem; 3077 | } 3078 | .font_35 { 3079 | font-size: 1.1rem; 3080 | } 3081 | .about_app h4 { 3082 | margin: 1.5rem 0rem 2rem; 3083 | } 3084 | .home_section3 .svg5 { 3085 | left: 15rem; 3086 | width: 14rem; 3087 | top: -13rem; 3088 | } 3089 | 3090 | header .custom_container .for_mobile .mob_social { 3091 | bottom: 1rem; 3092 | } 3093 | } 3094 | 3095 | @media (max-width: 360px) { 3096 | .menu-icons { 3097 | display: block !important; 3098 | } 3099 | .home_section3 .svg5 { 3100 | left: 11.5rem; 3101 | width: 12rem; 3102 | top: -13rem; 3103 | } 3104 | .home_section4 .circle_28 { 3105 | left: 22rem; 3106 | } 3107 | .home_section6 .app_img .circle_25 { 3108 | left: 0rem; 3109 | } 3110 | .home_section6 .svg12 { 3111 | right: -1rem; 3112 | bottom: -10rem; 3113 | width: 17rem; 3114 | } 3115 | .home_section7 .svg13 { 3116 | top: -8rem; 3117 | right: 1rem; 3118 | width: 12rem; 3119 | } 3120 | .home_section7 .circle_23 { 3121 | top: 15rem; 3122 | right: 0rem; 3123 | } 3124 | .home_section7 .svg14 { 3125 | bottom: -8.5rem; 3126 | left: 2rem; 3127 | width: 9rem; 3128 | } 3129 | .home_section8 .circle_23 { 3130 | top: -2rem; 3131 | right: 2rem; 3132 | } 3133 | .navbar-collapse.show .nav-item.rm-md-2 { 3134 | padding: 0rem 1rem; 3135 | } 3136 | 3137 | header .custom_container .for_mobile { 3138 | padding: 3rem 5rem 1rem 5rem; 3139 | } 3140 | } 3141 | 3142 | @media (max-width: 320px) { 3143 | .menu-icons { 3144 | display: block !important; 3145 | } 3146 | .home_section8 .circle_240 { 3147 | top: -1rem; 3148 | } 3149 | header .custom_container .for_mobile { 3150 | padding: 2rem 3rem 1rem 3rem; 3151 | } 3152 | .navbar-expand-lg .navbar-nav.main_menu li a { 3153 | padding: 0.5rem 0rem 0.5rem; 3154 | } 3155 | header .custom_container .for_mobile .mob_social h4 { 3156 | margin-bottom: 0.5rem; 3157 | } 3158 | .login_part { 3159 | margin-bottom: 1rem; 3160 | } 3161 | header .custom_container .for_mobile .mob_social { 3162 | bottom: 2rem; 3163 | } 3164 | header .custom_container .for_mobile .business_login { 3165 | margin: 4rem 0rem 3rem; 3166 | } 3167 | .home_section7 .svg13 { 3168 | top: -8rem; 3169 | right: -3rem; 3170 | } 3171 | .home_section6 .svg12 { 3172 | right: -5rem; 3173 | bottom: -11rem; 3174 | } 3175 | .home_section6 .square_304 { 3176 | top: -1.5rem; 3177 | left: 0rem; 3178 | } 3179 | .home_section5 .app_img .circle_240 { 3180 | right: -0.5rem; 3181 | bottom: -2rem; 3182 | width: 8rem; 3183 | height: 8rem; 3184 | } 3185 | .home_section5 .app_img .circle_24 { 3186 | display: none; 3187 | } 3188 | .home_section5 .app_img .svg10 { 3189 | top: -10rem; 3190 | left: -3.5rem; 3191 | width: 18rem; 3192 | } 3193 | .app_img .svg8 { 3194 | bottom: -12rem; 3195 | width: 11rem; 3196 | } 3197 | .home_section4 .circle_28 { 3198 | left: 18rem; 3199 | top: 12rem; 3200 | } 3201 | .home_section3 .svg5 { 3202 | display: none; 3203 | } 3204 | .app_img_right .svg4 { 3205 | bottom: -6rem; 3206 | left: -4rem; 3207 | } 3208 | .home_section2 .square_304 { 3209 | width: 10rem; 3210 | height: 10rem; 3211 | right: 1rem; 3212 | top: -1.5rem; 3213 | } 3214 | .home_screen_section { 3215 | padding: 5rem 0rem 6rem; 3216 | } 3217 | .home_screen_section .app_img .circle_254 { 3218 | left: 1rem; 3219 | top: -2rem; 3220 | } 3221 | } 3222 | --------------------------------------------------------------------------------