/* ------------- The extensions ---------------  */
/*

Primary-color:#6002ee; 
Secondary-color:  ;

*/
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box; }

html {
  scroll-behavior: smooth; }

body {
  font-family: "Montserrat", sans-serif;
  font-family: "Raleway", sans-serif;
  overflow-x: hidden; }
  
  
#loader{
position:fixed;
width:100%;
height:100vh;
background: #fff no-repeat center url(images/preloader.gif);
background-repeat:norepeat;
z-index:99999;
}
  

::-webkit-scrollbar {
  width: 8px;
  background-color: transparent;
  -webkit-border-radius: 100px;
          border-radius: 100px; }

::-webkit-scrollbar-track {
  margin: 10px 0;
  -webkit-border-radius: 100px;
          border-radius: 100px;
  background-color: transparent;
  opacity: 0; }

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 100px;
          border-radius: 100px;
  height: 5px;
  z-index: 9999;
  background-color: #6002ee;
  border: 0.5px solid #d3cece; }

/*-------------Reusable components-------------*/
.btn-white {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: black;
  padding: 10px 30px;
  background-color: #ffffff;
  -webkit-border-radius: 100px;
     -moz-border-radius: 100px;
          border-radius: 100px;
  -webkit-transition: 1s smooth all;
  -o-transition: 1s smooth all;
  -moz-transition: 1s smooth all;
  transition: 1s smooth all; }

.btn-white:hover {
  background-color: #e9e3e3c9; }

.btn-outlined {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 10px 30px;
  background-color: transparent;
  -webkit-border-radius: 100px;
     -moz-border-radius: 100px;
          border-radius: 100px;
  border: white 1px solid;
  -webkit-transition: 1s smooth all;
  -o-transition: 1s smooth all;
  -moz-transition: 1s smooth all;
  transition: 1s smooth all;
  color: white; }

.btn-outlined:hover {
  background-color: white;
  color: black; }

/*--------------------------------------------Layouts------------------------------------------*/
/*---------------------Start of section1--------------*/
#section1 {
  width: 100vw;
  height: 100vh;
  position: relative;
  background: -webkit-gradient(linear, left top, left bottom, from(#6002eed2), to(#6002ee70)), url(./spacex.jpg);
  background: -webkit-linear-gradient(#6002eed2, #6002ee70), url(./spacex.jpg);
  background: -moz-linear-gradient(#6002eed2, #6002ee70), url(./spacex.jpg);
  background: -o-linear-gradient(#6002eed2, #6002ee70), url(./spacex.jpg);
  background: linear-gradient(#6002eed2, #6002ee70), url(./spacex.jpg);
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover; }

.header-text {
  position: absolute;
  left: 75%;
  top: 65%;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
       -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 170px;
  font-family: "Montserrat", sans-serif;
  color: white; }

.top-nav li {
  display: inline;
  text-transform: uppercase;
  padding: 15px; }

.top-nav li a {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: white;
  -webkit-transition: 1s all;
  -o-transition: 1s all;
  -moz-transition: 1s all;
  transition: 1s all; }

.top-nav li a:hover {
  color: #bab5c0; }

.top-nav {
  width: 100vh;
  background-color: red; }

.top-nav ul {
  float: left;
  list-style: none;
  position: absolute;
  top: 10%;
  left: 55%;
  -webkit-transform: translate(-10%, -80%);
     -moz-transform: translate(-10%, -80%);
      -ms-transform: translate(-10%, -80%);
       -o-transform: translate(-10%, -80%);
          transform: translate(-10%, -80%); }

.header--social i {
  color: #ebe3e3;
  padding-bottom: 20px;
  font-size: 20px;
  -webkit-transition: 1s all;
  -o-transition: 1s all;
  -moz-transition: 1s all;
  transition: 1s all; }

.header--social i:hover {
  color: #646060; }

.tab {
  position: absolute;
  top: 60%;
  left: 5%;
  -webkit-transform: translate(-5%, -60%);
     -moz-transform: translate(-5%, -60%);
      -ms-transform: translate(-5%, -60%);
       -o-transform: translate(-5%, -60%);
          transform: translate(-5%, -60%); }

.tabs {
  background-color: #c9c2c2;
  height: 150px;
  margin: 10px;
  width: 3px; }

a {
  text-decoration: none;
  color: white;
  line-height: 150%; }

.elon-quote {
  font-size: 19px;
  text-align: justify;
  color: white;
  position: absolute;
  top: 80%;
  left: 12%;
  -webkit-transform: translate(-5%, -50%);
     -moz-transform: translate(-5%, -50%);
      -ms-transform: translate(-5%, -50%);
       -o-transform: translate(-5%, -50%);
          transform: translate(-5%, -50%); }

/*---------------------End of section1--------------*/
#section2 {
  width: 100vw;
  height: auto;
  position: relative;
  background: white;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover; }

.header-text2 {
  margin-top: 60px;
  margin-bottom: 10px;
  text-transform: uppercase;
  text-align: center;
  font-size: 120px;
  font-family: "Montserrat", sans-serif; }

.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  justify-items: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; }

.item img {
  opacity: 0.9;
  width: 300px;
  height: 200px;
  margin: 10px;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
  background-image: -webkit-gradient(linear, left top, left bottom, from(black), to(black));
  background-image: -webkit-linear-gradient(black, black);
  background-image: -moz-linear-gradient(black, black);
  background-image: -o-linear-gradient(black, black);
  background-image: linear-gradient(black, black); }

.item img:hover {
  -webkit-transform: scale(1.1);
     -moz-transform: scale(1.1);
      -ms-transform: scale(1.1);
       -o-transform: scale(1.1);
          transform: scale(1.1); }

/*---------------------end of section2- --------------*/
#section3 {
  margin-top: 50px;
  width: 100vw;
  height: 80vh;
  position: relative;
  background: -webkit-gradient(linear, left top, left bottom, from(#6002ee), to(#6002eefa));
  background: -webkit-linear-gradient(#6002ee, #6002eefa);
  background: -moz-linear-gradient(#6002ee, #6002eefa);
  background: -o-linear-gradient(#6002ee, #6002eefa);
  background: linear-gradient(#6002ee, #6002eefa); }

.about-header {
  position: absolute;
  left: 75%;
  top: 10%;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
       -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-transform: uppercase;
  text-align: center;
  font-size: 45px;
  color: transparent;
  -webkit-text-stroke: 2px white;
  font-family: "Montserrat", sans-serif;
  letter-spacing: 10px; }

#space-x {
  width: 60vw;
  height: 80vh;
  -webkit-clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
          clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%); }

.about-details {
  position: absolute;
  left: 85%;
  top: 40%;
  -webkit-transform: translate(-80%, -30%);
     -moz-transform: translate(-80%, -30%);
      -ms-transform: translate(-80%, -30%);
       -o-transform: translate(-80%, -30%);
          transform: translate(-80%, -30%);
  width: 400px;
  height: 300px; }

.about-details i {
  margin-right: 50px;
  color: white;
  font-size: 20px; }

cite {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: white;
  font-size: 22px;
  text-transform: uppercase; }

.icons {
  padding: 20px; }

.primary-button {
  position: absolute;
  left: 65%;
  top: 90%;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
       -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }

.secondary-button {
  position: absolute;
  left: 76%;
  top: 90%;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
       -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }

/*---------------------end of section3- --------------*/
#section4 {
  width: 100vw;
  height: auto;
  position: relative;
  background: white; }

.works-header {
  font-size: 120px;
  margin-top: 60px;
  font-family: "Montserrat";
  text-transform: uppercase;
  text-align: center; }

.works-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  justify-items: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-bottom: 60px; }

.items {
  position: relative;
  opacity: 0.9;
  width: 400px;
  height: 200px;
  margin: 10px;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
  background-color: #6002ee;
  -webkit-background-size: 400px 200px;
     -moz-background-size: 400px 200px;
       -o-background-size: 400px 200px;
          background-size: 400px 200px; }

.items:nth-child(1) {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.863)), to(rgba(0, 0, 0, 0.822))), url(./images/pixysos.jpeg);
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0.863), rgba(0, 0, 0, 0.822)), url(./images/pixysos.jpeg);
  background: -moz-linear-gradient(rgba(0, 0, 0, 0.863), rgba(0, 0, 0, 0.822)), url(./images/pixysos.jpeg);
  background: -o-linear-gradient(rgba(0, 0, 0, 0.863), rgba(0, 0, 0, 0.822)), url(./images/pixysos.jpeg);
  background: linear-gradient(rgba(0, 0, 0, 0.863), rgba(0, 0, 0, 0.822)), url(./images/pixysos.jpeg);
  -webkit-background-size: 400px 200px;
     -moz-background-size: 400px 200px;
       -o-background-size: 400px 200px;
          background-size: 400px 200px; }

.items:nth-child(2) {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.863)), to(rgba(0, 0, 0, 0.822))), url(./images/lineageos.png);
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0.863), rgba(0, 0, 0, 0.822)), url(./images/lineageos.png);
  background: -moz-linear-gradient(rgba(0, 0, 0, 0.863), rgba(0, 0, 0, 0.822)), url(./images/lineageos.png);
  background: -o-linear-gradient(rgba(0, 0, 0, 0.863), rgba(0, 0, 0, 0.822)), url(./images/lineageos.png);
  background: linear-gradient(rgba(0, 0, 0, 0.863), rgba(0, 0, 0, 0.822)), url(./images/lineageos.png);
  -webkit-background-size: 400px 200px;
     -moz-background-size: 400px 200px;
       -o-background-size: 400px 200px;
          background-size: 400px 200px; }

.items:nth-child(3) {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.863)), to(rgba(0, 0, 0, 0.822))), url(./images/dart.jpg);
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0.863), rgba(0, 0, 0, 0.822)), url(./images/dart.jpg);
  background: -moz-linear-gradient(rgba(0, 0, 0, 0.863), rgba(0, 0, 0, 0.822)), url(./images/dart.jpg);
  background: -o-linear-gradient(rgba(0, 0, 0, 0.863), rgba(0, 0, 0, 0.822)), url(./images/dart.jpg);
  background: linear-gradient(rgba(0, 0, 0, 0.863), rgba(0, 0, 0, 0.822)), url(./images/dart.jpg);
  -webkit-background-size: 400px 200px;
     -moz-background-size: 400px 200px;
       -o-background-size: 400px 200px;
          background-size: 400px 200px; }

.items:nth-child(4) {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.863)), to(rgba(0, 0, 0, 0.822))), url(./images/xda.png);
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0.863), rgba(0, 0, 0, 0.822)), url(./images/xda.png);
  background: -moz-linear-gradient(rgba(0, 0, 0, 0.863), rgba(0, 0, 0, 0.822)), url(./images/xda.png);
  background: -o-linear-gradient(rgba(0, 0, 0, 0.863), rgba(0, 0, 0, 0.822)), url(./images/xda.png);
  background: linear-gradient(rgba(0, 0, 0, 0.863), rgba(0, 0, 0, 0.822)), url(./images/xda.png);
  -webkit-background-size: 400px 200px;
     -moz-background-size: 400px 200px;
       -o-background-size: 400px 200px;
          background-size: 400px 200px; }

.items:nth-child(5) {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.863)), to(rgba(0, 0, 0, 0.822))), url(./images/android.png);
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0.863), rgba(0, 0, 0, 0.822)), url(./images/android.png);
  background: -moz-linear-gradient(rgba(0, 0, 0, 0.863), rgba(0, 0, 0, 0.822)), url(./images/android.png);
  background: -o-linear-gradient(rgba(0, 0, 0, 0.863), rgba(0, 0, 0, 0.822)), url(./images/android.png);
  background: linear-gradient(rgba(0, 0, 0, 0.863), rgba(0, 0, 0, 0.822)), url(./images/android.png);
  -webkit-background-size: 400px 200px;
     -moz-background-size: 400px 200px;
       -o-background-size: 400px 200px;
          background-size: 400px 200px; }

.items:nth-child(6) {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.863)), to(rgba(0, 0, 0, 0.822))), url(./images/posp.jpg);
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0.863), rgba(0, 0, 0, 0.822)), url(./images/posp.jpg);
  background: -moz-linear-gradient(rgba(0, 0, 0, 0.863), rgba(0, 0, 0, 0.822)), url(./images/posp.jpg);
  background: -o-linear-gradient(rgba(0, 0, 0, 0.863), rgba(0, 0, 0, 0.822)), url(./images/posp.jpg);
  background: linear-gradient(rgba(0, 0, 0, 0.863), rgba(0, 0, 0, 0.822)), url(./images/posp.jpg);
  -webkit-background-size: 400px 200px;
     -moz-background-size: 400px 200px;
       -o-background-size: 400px 200px;
          background-size: 400px 200px; }

.items:hover {
  -webkit-transform: scale(0.98);
     -moz-transform: scale(0.98);
      -ms-transform: scale(0.98);
       -o-transform: scale(0.98);
          transform: scale(0.98); }

h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 25px;
  padding: 20px;
  color: white; }

.skills-features {
  font-size: 18px;
  padding: 10px;
  color: white;
  text-align: center;
  font-family: "Raleway", sans-serif;
  font-weight: 300; }

/*---------------------end of section4- --------------*/
#section5 {
  width: 100vw;
  height: 80vh;
  position: relative;
  background-color: #6002ee; }

#elon-musk {
  float: right;
  height: 80vh;
  width: 60vw;
  -webkit-clip-path: polygon(10% 0, 100% 0%, 100% 100%, 0% 100%);
          clip-path: polygon(10% 0, 100% 0%, 100% 100%, 0% 100%); }

.inspire-header {
  position: absolute;
  left: 5%;
  top: 10%;
  -webkit-transform: translate(-5%, -10%);
     -moz-transform: translate(-5%, -10%);
      -ms-transform: translate(-5%, -10%);
       -o-transform: translate(-5%, -10%);
          transform: translate(-5%, -10%);
  text-transform: uppercase;
  text-align: center;
  font-size: 45px;
  color: transparent;
  -webkit-text-stroke: 2px white;
  font-family: "Montserrat", sans-serif;
  letter-spacing: 10px; }

.quotes {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  position: absolute;
  left: 5%;
  top: 40%;
  -webkit-transform: translate(-5%, -10%);
     -moz-transform: translate(-5%, -10%);
      -ms-transform: translate(-5%, -10%);
       -o-transform: translate(-5%, -10%);
          transform: translate(-5%, -10%); }

.quotes i {
  margin-right: 50px;
  color: white;
  font-size: 20px; }

/*---------------------end of section5- --------------*/
#section6 {
  width: 100vw;
  height: 100vh;
  position: relative;
  background-color: #ffffff;
  margin-bottom: 50px; }
  #section6 li {
    list-style: none; }

.contact--heading {
  font-size: 120px;
  margin-top: 50px;
  font-family: "Montserrat";
  text-transform: uppercase;
  text-align: center; }

.skills-container {
  margin-top: 30px; }

.outer-div {
  margin-left: 30vw;
  width: 60vw; }

.inner-div {
  display: inline-block; }

.progress {
  margin: 15px;
  width: 60vw;
  height: 30px;
  background-color: #ae98c5;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px; }

.progress-bar {
  width: 60vw;
  height: 30px;
  -webkit-border-top-right-radius: 3px;
     -moz-border-radius-topright: 3px;
          border-top-right-radius: 3px;
  -webkit-border-bottom-right-radius: 3px;
     -moz-border-radius-bottomright: 3px;
          border-bottom-right-radius: 3px;
  background-color: #6002ee;
  z-index: 999;
  -webkit-border-top-left-radius: 3px;
     -moz-border-radius-topleft: 3px;
          border-top-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
     -moz-border-radius-bottomleft: 3px;
          border-bottom-left-radius: 3px; }

.w1 {
  width: 80%; }

.w2 {
  width: 50%; }

.w3 {
  width: 30%; }

.w4 {
  width: 60%; }

.w5 {
  width: 90%; }

strong {
  vertical-align: middle;
  margin: 15px;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-weight: 700; }

#skills--i {
  position: absolute;
  left: 12%;
  top: 45%;
  -webkit-transform: translate(-5%, -10%);
     -moz-transform: translate(-5%, -10%);
      -ms-transform: translate(-5%, -10%);
       -o-transform: translate(-5%, -10%);
          transform: translate(-5%, -10%);
  font-size: 60px;
  color: #6002ee; }

.works--link:first-child {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: white;
  position: absolute;
  left: 9%;
  top: 60%;
  -webkit-transform: translate(-10%, -10%);
     -moz-transform: translate(-10%, -10%);
      -ms-transform: translate(-10%, -10%);
       -o-transform: translate(-10%, -10%);
          transform: translate(-10%, -10%);
  background-color: #6002ee;
  padding: 10px 30px;
  -webkit-border-radius: 100px;
     -moz-border-radius: 100px;
          border-radius: 100px; }

.works--link:last-child {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: white;
  position: absolute;
  left: 9%;
  top: 72%;
  -webkit-transform: translate(-10%, -10%);
     -moz-transform: translate(-10%, -10%);
      -ms-transform: translate(-10%, -10%);
       -o-transform: translate(-10%, -10%);
          transform: translate(-10%, -10%);
  background-color: #6002ee;
  padding: 10px 30px;
  -webkit-border-radius: 100px;
     -moz-border-radius: 100px;
          border-radius: 100px; }

/*---------------------end of section6 ----------------*/
footer {
  width: 100vw;
  height: 60vh;
  position: relative;
  background: -webkit-gradient(linear, left top, left bottom, from(#6002eeaf), to(#6002eeb9)), url(./images/starship_liftoff.jpg);
  background: -webkit-linear-gradient(#6002eeaf, #6002eeb9), url(./images/starship_liftoff.jpg);
  background: -moz-linear-gradient(#6002eeaf, #6002eeb9), url(./images/starship_liftoff.jpg);
  background: -o-linear-gradient(#6002eeaf, #6002eeb9), url(./images/starship_liftoff.jpg);
  background: linear-gradient(#6002eeaf, #6002eeb9), url(./images/starship_liftoff.jpg);
  background-position: top; }

footer span {
  font-size: 20px;
  color: white;
  position: absolute;
  left: 50%;
  top: 75%;
  -webkit-transform: translate(-50%, -60%);
     -moz-transform: translate(-50%, -60%);
      -ms-transform: translate(-50%, -60%);
       -o-transform: translate(-50%, -60%);
          transform: translate(-50%, -60%); }

footer ul {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  list-style: none;
  position: absolute;
  left: 50%;
  top: 88%;
  -webkit-transform: translate(-50%, -80%);
     -moz-transform: translate(-50%, -80%);
      -ms-transform: translate(-50%, -80%);
       -o-transform: translate(-50%, -80%);
          transform: translate(-50%, -80%); }

footer li {
  display: inline;
  color: white;
  text-transform: uppercase; }

.footer--buttons {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  position: absolute;
  left: 50%;
  top: 30%;
  -webkit-transform: translate(-50%, -80%);
     -moz-transform: translate(-50%, -80%);
      -ms-transform: translate(-50%, -80%);
       -o-transform: translate(-50%, -80%);
          transform: translate(-50%, -80%); }

footer #btn-white {
  margin-right: 5px; }

footer #btn-dark {
  margin-left: 5px; }

.logo-links {
  width: 60vw;
  margin-left: 20vw; }

.logo-links i {
  color: #dfdede;
  font-size: 35px;
  padding: 0 30px;
  -webkit-transform: translateY(200px);
     -moz-transform: translateY(200px);
      -ms-transform: translateY(200px);
       -o-transform: translateY(200px);
          transform: translateY(200px);
  -webkit-transition: 1s all;
  -o-transition: 1s all;
  -moz-transition: 1s all;
  transition: 1s all; }

.logo-links i:hover {
  color: #9a94a0; }