Index: imaps-frontend/src/pages/IMaps/components/Button.css
===================================================================
--- imaps-frontend/src/pages/IMaps/components/Button.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/IMaps/components/Button.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,10 +1,9 @@
-@import url(https://fonts.googleapis.com/css?family=Exo:500);
 :root {
-  --primary: #252627;
+  --primary: #fff;
 }
 
 .btn {
   padding: 8px 20px;
-  font-family: exo, sans-serif;
+
   border-radius: 20px;
   outline: none;
@@ -15,15 +14,15 @@
 .btn--primary {
   background-color: var(--primary);
-  color: #ffffff;
+
+  color: #242424;
   border: 1px solid var(--primary);
 }
 
 .btn--outline {
-  background-color: #ffffffc2;
+  background-color: transparent;
 
-  color: #252627;
+  color: #fff;
   padding: 8px 20px;
-  border: 1px solid #252627 ;
-  /* border: 1px solid var(--primary); */
+  border: 1px solid var(--primary);
   transition: all 0.3s ease-out;
 }
@@ -31,15 +30,10 @@
 .btn--medium {
   padding: 8px 20px;
-  font-size: 22px;
+  font-size: 18px;
 }
 
 .btn--large {
   padding: 12px 26px;
-  font-size: 24px;
-}
-.btn--outline:hover{
-  transition: all 0.3s ease-out;
-  background: #000000;
-  color:#ffffffc2;
+  font-size: 20px;
 }
 
@@ -47,5 +41,6 @@
 .btn--medium:hover {
   transition: all 0.3s ease-out;
-  background: #ffffffc2;
-  color: #000000;
+  background: #fff;
+  color: #242424;
+  transition: 250ms;
 }
Index: imaps-frontend/src/pages/IMaps/components/Cards.jsx
===================================================================
--- imaps-frontend/src/pages/IMaps/components/Cards.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/IMaps/components/Cards.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -19,5 +19,5 @@
               text="Create intricate floor plans for your building with precision and ease."
               label="Create"
-              path="#"
+              path="/services"
             />
             <CardItem
@@ -25,5 +25,5 @@
               text="Explore and navigate through complex building layouts seamlessly."
               label="Explore"
-              path="#"
+              path="/services"
             />
           </ul>
@@ -33,5 +33,5 @@
               text="Add custom icons, labels, and markers to personalize your indoor maps."
               label="Customize"
-              path="#"
+              path="/services"
             />
             <CardItem
@@ -39,5 +39,5 @@
               text="Ensure accessibility by mapping out routes and facilities for all users."
               label="Accessibility"
-              path="#"
+              path="/products"
             />
             <CardItem
@@ -45,5 +45,5 @@
               text="Share your maps with others and collaborate in real-time for efficient space planning."
               label="Collaboration"
-              path="#"
+              path="/sign-up"
             />
           </ul>
Index: imaps-frontend/src/pages/IMaps/components/Footer.css
===================================================================
--- imaps-frontend/src/pages/IMaps/components/Footer.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/IMaps/components/Footer.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -47,19 +47,17 @@
 .footer-links {
   width: 100%;
+  max-width: 1000px;
   display: flex;
-  justify-content: space-evenly;
-}
-.footer-link-wrapper a {
-  margin-top: 1em;
-}
-.footer-link-wrapper h2 {
-  width: 100%;
+  justify-content: center;
 }
 
+.footer-link-wrapper {
+  display: flex;
+}
 
 .footer-link-items {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
   margin: 16px;
   text-align: left;
@@ -102,10 +100,15 @@
 
 .social-media {
+  max-width: 1000px;
+  width: 100%;
 }
 
 .social-media-wrap {
   display: flex;
-  flex-direction: column;
+  justify-content: space-between;
   align-items: center;
+  width: 90%;
+  max-width: 1000px;
+  margin: 40px auto 0 auto;
 }
 
@@ -120,4 +123,5 @@
   color: #fff;
   justify-self: start;
+  margin-left: 20px;
   cursor: pointer;
   text-decoration: none;
@@ -127,13 +131,8 @@
   margin-bottom: 16px;
 }
-.social-media-wrap img {
-  width: 25%;
-}
 
 .website-rights {
   color: #fff;
-  align-content: flex-end;
-  width: 50%;
-  margin-top: 2em;
+  margin-bottom: 16px;
 }
 
Index: imaps-frontend/src/pages/IMaps/components/Footer.jsx
===================================================================
--- imaps-frontend/src/pages/IMaps/components/Footer.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/IMaps/components/Footer.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -2,11 +2,10 @@
 import "./Footer.css";
 import { Button } from "./Button";
-import logo from "../../../assets/novo_logo_nobg_cropped.png";
-import {Link} from "react-router-dom";
+import logo from "../../../assets/logo_icon.png";
 
 function Footer() {
   return (
     <div className="footer-container">
-      <div className="footer-links">
+      {/* <div className="footer-links">
         <div className="footer-link-wrapper">
           <div className="footer-link-items">
@@ -14,26 +13,45 @@
             <a href="#">Contact</a>
             <a href="#">Support</a>
+            <a href="#">Destinations</a>
+            <a href="#">Sponsorships</a>
           </div>
         </div>
-          <div className="social-media-wrap">
-
-            <div className="footer-logo">
-              <img src={logo} alt={"logo"}/>
-            </div>
-            <small className="website-rights">iMaps © {2024}</small>
-          </div>
-        <div>
-          <div className="footer-link-wrapper">
-            <div className="footer-link-items">
-              <h2>Legal & Privacy</h2>
-              <Link to={"/privacy-policy"}>Privacy Policy</Link>
-              <Link to={"/terms-of-service"}>Terms Of Service</Link>
-
-            </div>
+        <div className="footer-link-wrapper">
+          <div className="footer-link-items">
+            <h2>Social Media</h2>
+            <a href="#">Instagram</a>
+            <a href="#">Facebook</a>
+            <a href="#">Youtube</a>
+            <a href="#">Twitter</a>
           </div>
         </div>
-
-      </div>
-
+      </div> */}
+      <section className="social-media">
+        <div className="social-media-wrap">
+          <div className="footer-logo">
+            <a href="#" className="social-logo">
+              iMaps
+            </a>
+          </div>
+          <small className="website-rights">iMaps © {2024}</small>
+          <div className="social-icons">
+            <a className="social-icon-link facebook" href="#" aria-label="Facebook">
+              <i className="fab fa-facebook-f" />
+            </a>
+            <a className="social-icon-link instagram" href="#" aria-label="Instagram">
+              <i className="fab fa-instagram" />
+            </a>
+            <a className="social-icon-link youtube" href="#" aria-label="Youtube">
+              <i className="fab fa-youtube" />
+            </a>
+            <a className="social-icon-link twitter" href="#" aria-label="Twitter">
+              <i className="fab fa-twitter" />
+            </a>
+            <a className="social-icon-link linkedin" href="#" aria-label="LinkedIn">
+              <i className="fab fa-linkedin" />
+            </a>
+          </div>
+        </div>
+      </section>
     </div>
   );
Index: imaps-frontend/src/pages/IMaps/components/HeroSection.css
===================================================================
--- imaps-frontend/src/pages/IMaps/components/HeroSection.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/IMaps/components/HeroSection.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,4 +1,2 @@
-@import url(https://fonts.googleapis.com/css?family=Exo:500);
-
 video {
   object-fit: cover;
@@ -9,8 +7,6 @@
 }
 
-
-
-
 .hero-container {
+  background: url("../images/img-home.jpg") center center/cover no-repeat;
   height: 100vh;
   width: 100%;
@@ -19,9 +15,6 @@
   justify-content: center;
   align-items: center;
-
+  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.4);
   object-fit: contain;
-
-
-
 }
 
@@ -30,16 +23,4 @@
   font-size: 100px;
   margin-top: -100px;
-  font-family: exo, sans-serif;
-  text-transform: uppercase;
-  text-shadow: 1px 1px 0px #ef404e,
-  1px 2px 0px #ef404e,
-  1px 3px 0px #ef404e,
-  1px 4px 0px #ef404e,
-  1px 5px 0px #ef404e,
-  1px 6px 0px #ef404e,
-  1px 10px 5px rgba(16, 16, 16, 0.5),
-  1px 15px 10px rgba(16, 16, 16, 0.4),
-  1px 20px 30px rgba(16, 16, 16, 0.3),
-  1px 25px 50px rgba(16, 16, 16, 0.2);
 }
 
Index: imaps-frontend/src/pages/IMaps/components/HeroSection.jsx
===================================================================
--- imaps-frontend/src/pages/IMaps/components/HeroSection.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/IMaps/components/HeroSection.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -7,24 +7,25 @@
 function HeroSection() {
   return (
-      <div className="hero-container">
-          <h1>Map Your World</h1>
-          <p>Create and explore detailed indoor maps.</p>
-          <div className="hero-btns">
-              <Link to="/myMaps">
-                  <Button className="btns" buttonStyle="btn--outline" buttonSize="btn--large">
-                      Create maps
-                  </Button>
-              </Link>
-              <Link to="/Maps">
-                  <Button
-                      className="btns"
-                      buttonStyle="btn--primary"
-                      buttonSize="btn--large"
-                  >
-                      Browse Maps <i className="far fa-play-circle"/>
-                  </Button>
-              </Link>
-          </div>
+    <div className="hero-container">
+      <h1>Map Your World</h1>
+      <p>Create and explore detailed indoor maps.</p>
+      <div className="hero-btns">
+        <Link to="/Maps/FinkiMaps/Draw">
+          <Button className="btns" buttonStyle="btn--outline" buttonSize="btn--large">
+            Create maps
+          </Button>
+        </Link>
+        <Link to="/Maps">
+          <Button
+            className="btns"
+            buttonStyle="btn--primary"
+            buttonSize="btn--large"
+            onClick={console.log("hey")}
+          >
+            Browse Maps <i className="far fa-play-circle" />
+          </Button>
+        </Link>
       </div>
+    </div>
   );
 }
Index: imaps-frontend/src/pages/IMaps/components/Navbar.css
===================================================================
--- imaps-frontend/src/pages/IMaps/components/Navbar.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/IMaps/components/Navbar.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,83 +1,161 @@
-.modern-navbar {
-  background: linear-gradient(90deg, #ffffff, #fffefe);
-  color: #ffffff;
-  /*color: #333333;*/
+.navbar {
+  background: linear-gradient(90deg, rgb(28, 27, 27) 0%, rgb(26, 23, 23) 100%);
+  height: 80px;
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 0.8rem 1.5rem;
-  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+  font-size: 1.2rem;
   position: sticky;
   top: 0;
-  z-index: 1000;
-  border-radius: 8px;
-  margin: 5px;
-  height: 70px;
-  overflow: hidden;
+  z-index: 999;
+}
+
+.pad-bot {
+  /* padding-bottom: 1.5rem; */
 }
 
 .navbar-container {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
   width: 100%;
-  max-width: 1200px;
 }
 
-.navbar-left {
+.navbar-logo {
+  color: #fff;
+  justify-self: start;
+  margin-left: 20px;
+  cursor: pointer;
+  text-decoration: none;
+  font-size: 2rem;
   display: flex;
   align-items: center;
-  gap: 1rem;
 }
 
-.navbar-title {
-  font-size: 1.6rem;
-  font-weight: 700;
-  color: #ffffff;
-  margin: 0;
-  font-family: "exo", sans-serif;
+.fa-typo3 {
+  margin-left: 0.5rem;
+  font-size: 1.8rem;
 }
 
-.navbar-right {
+.nav-menu {
+  display: grid;
+  grid-template-columns: repeat(4, auto);
+  grid-gap: 10px;
+  list-style: none;
+  text-align: center;
+  width: 70vw;
+  justify-content: end;
+  margin-right: 2rem;
+}
+
+.nav-item {
+  height: 80px;
+}
+
+.nav-links {
+  color: #fff;
   display: flex;
   align-items: center;
-  gap: 1rem;
+  text-decoration: none;
+  padding: 0.5rem 1rem;
+  height: 100%;
 }
 
-.navbar-btn {
-  padding: 0.4rem 1.5rem;
-  font-size: 0.9rem;
-  border: 2px solid transparent;
-  border-radius: 20px;
-  text-decoration: none;
-  color: #ffffff;
-  font-weight: 500;
-  transition: all 0.3s ease-in-out;
-  font-family: "exo", sans-serif;
-  cursor: pointer;
-  margin-left: 4em;
-  margin-right: 1em;
+.nav-links:hover {
+  border-bottom: 4px solid #fff;
+  transition: all 0.2s ease-out;
 }
 
-.navbar-login {
-  background-color: #252627;
-  border: 2px solid #3f3232;
+.fa-bars {
+  color: #fff;
 }
 
-.navbar-login:hover {
-  background-color: #ffffff;
-  color: #212121;
-  border: 1px solid rgba(19, 18, 18, 0.82);
+.nav-links-mobile {
+  display: none;
 }
 
-.navbar-signup {
-  background-color: #252627;
-  color: #ffffff;
-  border: 2px solid #343a40;
+.menu-icon {
+  display: none;
 }
 
-.navbar-signup:hover {
-  background-color: #ffffff;
-  color: #343a40;
-  border: 2px solid #343a40;
+@media screen and (max-width: 960px) {
+  .NavbarItems {
+    position: relative;
+  }
+
+  .nav-menu {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 90vh;
+    position: absolute;
+    top: 80px;
+    left: -100%;
+    opacity: 1;
+    transition: all 0.5s ease;
+  }
+
+  .nav-menu.active {
+    background: #242222;
+    left: 0;
+    opacity: 1;
+    transition: all 0.5s ease;
+    z-index: 1;
+  }
+
+  .nav-links {
+    text-align: center;
+    padding: 2rem;
+    width: 100%;
+    display: table;
+  }
+
+  .nav-links:hover {
+    background-color: #fff;
+    color: #242424;
+    border-radius: 0;
+  }
+
+  .navbar-logo {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(25%, 50%);
+  }
+
+  .menu-icon {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(-100%, 60%);
+    font-size: 1.8rem;
+    cursor: pointer;
+  }
+
+  .fa-times {
+    color: #fff;
+    font-size: 2rem;
+  }
+
+  .nav-links-mobile {
+    display: block;
+    text-align: center;
+    margin: 2rem auto;
+    border-radius: 4px;
+    width: 80%;
+    text-decoration: none;
+    font-size: 1.5rem;
+    background-color: transparent;
+    color: #fff;
+    padding: 14px 20px;
+    border: 1px solid #fff;
+    transition: all 0.3s ease-out;
+  }
+
+  .nav-links-mobile:hover {
+    background: #fff;
+    color: #242424;
+    transition: 250ms;
+  }
 }
Index: imaps-frontend/src/pages/IMaps/components/Navbar.jsx
===================================================================
--- imaps-frontend/src/pages/IMaps/components/Navbar.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/IMaps/components/Navbar.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,42 +1,55 @@
-import React, {useContext, useState} from "react";
+import React, { useState, useEffect } from "react";
+import { Button } from "./Button";
+import "./Navbar.css";
 import { Link } from "react-router-dom";
-import logo_icon from "../../../assets/logo_icon.png";
-//import { AuthContext } from "../../../components/AuthContext/AuthContext";
-import Logo from "../../../components/Logo/Logo.jsx";
-import Profile from "../../../components/Profile/Profile.jsx";
-import {useAppContext} from "../../../components/AppContext/AppContext.jsx";
-import "./Navbar.css";
+import logo from "../../../assets/logo_icon.png";
 
 function Navbar() {
   const [click, setClick] = useState(false);
+  const [button, setButton] = useState(true);
 
-  const { isAuthenticated } = useAppContext();
+  const handleClick = () => setClick(!click);
+  const closeMobileMenu = () => setClick(false);
 
-    return (
-        <nav className="modern-navbar">
-            <div className="navbar-container">
-                {/* Left Section - Logo and Title */}
-                <div className="navbar-left">
-                    <Logo position="relative"/>
-                </div>
+  const showButton = () => {
+    if (window.innerWidth <= 960) {
+      setButton(false);
+    } else {
+      setButton(true);
+    }
+  };
 
-                {/* Right Section - Login/Signup or Profile */}
-                <div className="navbar-right">
-                    {isAuthenticated ? (
-                        <Profile position="relative"/>
-                    ) : (
-                        <>
-                            <Link to="/Login" className="navbar-btn navbar-login">
-                                Log In
-                            </Link>
-                            <Link to="/Signup" className="navbar-btn navbar-signup">
-                                Sign Up
-                            </Link>
-                        </>
-                    )}
-                </div>
-            </div>
-        </nav>
-    );
+  useEffect(() => {
+    showButton();
+  }, []);
+
+  window.addEventListener("resize", showButton);
+
+  return (
+    <>
+      <nav className="navbar">
+        <div className="navbar-container">
+          <a href="#" className="navbar-logo pad-bot" onClick={closeMobileMenu}>
+            iMaps
+          </a>
+          <div className="menu-icon" onClick={handleClick}>
+            <i className={click ? "fas fa-times" : "fas fa-bars"} />
+          </div>
+          <ul className={click ? "nav-menu active" : "nav-menu"}>
+            <Link to="/Signup">
+              <li className="nav-item">
+                <a href="#" className="nav-links" onClick={closeMobileMenu}>
+                  SignUp
+                </a>
+              </li>
+            </Link>
+          </ul>
+          <div className="pad-bot">
+            <Link to="/Login">{button && <Button buttonStyle="btn--outline">LOG IN</Button>}</Link>
+          </div>
+        </div>
+      </nav>
+    </>
+  );
 }
 
Index: imaps-frontend/src/pages/IMaps/components/pages/Home.css
===================================================================
--- imaps-frontend/src/pages/IMaps/components/pages/Home.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/pages/IMaps/components/pages/Home.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -0,0 +1,3 @@
+.home {
+  width: 100%;
+}
Index: imaps-frontend/src/pages/IMaps/components/pages/Home.jsx
===================================================================
--- imaps-frontend/src/pages/IMaps/components/pages/Home.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/IMaps/components/pages/Home.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,32 +1,17 @@
 import React from "react";
-import "./Home.scss";
-import { Link } from "react-router-dom";
-import { Button } from "../Button.jsx";
-import Cards from "../Cards.jsx";
-import Footer from "../Footer.jsx";
-import sl from "../../../../assets/bg-home-light-gray.png"
+import "./Home.css";
+import Cards from "../Cards";
+import HeroSection from "../HeroSection";
+import Footer from "../Footer";
 
 function Home() {
   return (
-    <div className="home">
-      <div className="hero-container">
-        <h1>Map Your World</h1>
-        <h2 className="description">Create and explore detailed indoor maps.</h2>
-        <div className="hero-btns">
-          <Link to="/Maps">
-            <Button buttonSize="btn--large" >
-              Browse Maps <i className="far fa-play-circle" />
-            </Button>
-          </Link>
-          <Link to="/myMaps">
-            <Button buttonSize="btn--large" buttonStyle="btn--outline">
-              Create Maps
-            </Button>
-          </Link>
-        </div>
+    <>
+      <div className="home">
+        <HeroSection />
+        {/* <Cards /> */}
+        <Footer />
       </div>
-      <Cards />
-      <Footer></Footer>
-    </div>
+    </>
   );
 }
Index: imaps-frontend/src/pages/IMaps/components/pages/Home.scss
===================================================================
--- imaps-frontend/src/pages/IMaps/components/pages/Home.scss	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,159 +1,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
-
-/* Exo thin font */
-@import url(https://fonts.googleapis.com/css?family=Exo:500);
-
-//$bg-url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVHja7M5RDYAwDEXRDgmvEocnlrQS2SwUFST9uEfBGWs9c97nbGtDcquqiKhOImLs/UpuzVzWEi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1af7Ukz8xWp8z8AAAA//8DAJ4LoEAAlL1nAAAAAElFTkSuQmCC";
-$bg-url: "../../../../assets/bg-home-light-gray.png";
-$bg-width: 50px;
-$bg-height: 50px;
-
-/* Animations */
-@-webkit-keyframes bg-scrolling-reverse {
-  100% { background-position: $bg-width $bg-height; }
-}
-@-moz-keyframes    bg-scrolling-reverse {
-  100% { background-position: $bg-width $bg-height; }
-}
-@-o-keyframes      bg-scrolling-reverse {
-  100% { background-position: $bg-width $bg-height; }
-}
-@keyframes         bg-scrolling-reverse {
-  100% { background-position: $bg-width $bg-height; }
-}
-
-@-webkit-keyframes bg-scrolling {
-  0% { background-position: $bg-width $bg-height; }
-}
-@-moz-keyframes    bg-scrolling {
-  0% { background-position: $bg-width $bg-height; }
-}
-@-o-keyframes      bg-scrolling {
-  0% { background-position: $bg-width $bg-height; }
-}
-@keyframes         bg-scrolling {
-  0% { background-position: $bg-width $bg-height; }
-}
-
-.homebg{
-  margin: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.home {
-  color: #999;
-
-  font: 400 16px/1.5 exo, ubuntu, "segoe ui", helvetica, arial, sans-serif;
-  text-align: center;
-  height: 100vh;
-  width: 100vw;
-  /* img size is 50x50 */
-  /* Set a base background color */
-  background: #87898d url($bg-url) repeat 0 0;
-
-  /* Apply hue rotation to the image */
-
-  -webkit-animation: bg-scrolling-reverse .92s infinite; /* Safari 4+ */
-  -moz-animation:    bg-scrolling-reverse .92s infinite; /* Fx 5+ */
-  -o-animation:      bg-scrolling-reverse .92s infinite; /* Opera 12+ */
-  animation:         bg-scrolling-reverse .92s infinite; /* IE 10+ */
-  -webkit-animation-timing-function: linear;
-  -moz-animation-timing-function:    linear;
-  -o-animation-timing-function:      linear;
-  animation-timing-function:         linear;
-
-  &::before {
-    font-size: 8rem;
-    font-weight: 100;
-    font-style: normal;
-  }
-}
-
-.hero-container {
-  height: 100vh;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  object-fit: contain;
-  //box-shadow: inset 0 0 0 1000px rgba(253, 244, 195, 0.5);
-
-}
-
-.hero-container h1 {
-  font-family: exo, sans-serif;
-
-
-  background: linear-gradient(
-                  90deg,
-                  #9a2020 0%,
-                  #3b3131 25%,
-                  #af2525 50%,
-                  #443a3a 75%,
-                  #8d1010 100%
-  );
-
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  text-shadow: 3px 2px 10px rgba(0, 0, 0, 0.5);
-
-  font-size: 6em;
-
-
-}
-.hero-container h2{
-  font-family: exo, sans-serif;
-  color: #1c1c1c;
-}
-
-.hero-container > p {
-  margin-top: 8px;
-  color: #fff;
-  font-size: 32px;
-}
-
-.hero-btns {
-  margin-top: 32px;
-}
-
-.hero-btns .btn {
-  margin: 6px;
-}
-
-.description{
-  color: gray;
-}
-
-.fa-play-circle {
-  margin-left: 4px;
-}
-
-@media screen and (max-width: 960px) {
-  .hero-container > h1 {
-    font-size: 70px;
-    margin-top: -150px;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .hero-container > h1 {
-    font-size: 50px;
-    margin-top: -100px;
-  }
-
-  .hero-container > p {
-    font-size: 30px;
-  }
-
-  .btn-mobile {
-    display: block;
-    text-decoration: none;
-  }
-
-  .home-btn {
-    width: 100%;
-    background: #252627;
-  }
-}
