body {
  background-color: #464646;
  padding: 0;
  margin: 0;
}

body svg {
  margin: 0;
  z-index: 5;
}

body nav {
  display: inherit;
  background-color: #e0e0e0;
}

body nav #navbarNav {
  position: relative;
}

body nav #navbarNav ul {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  z-index: 5;
}

body nav #navbarNav ul .liquid {
  position: relative;
  background-color: transparent;
  -webkit-filter: url("#goo");
          filter: url("#goo");
}

body nav #navbarNav ul .liquid li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  position: absolute;
  height: 40px;
  width: 40px;
  border-radius: 50px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -webkit-box-shadow: inset -1px -1px 5px rgba(255, 255, 255, 0.2), inset 3px 3px 5px rgba(0, 0, 0, 0.3);
          box-shadow: inset -1px -1px 5px rgba(255, 255, 255, 0.2), inset 3px 3px 5px rgba(0, 0, 0, 0.3);
}

body nav #navbarNav ul .liquid li a {
  border-radius: 50%;
  -webkit-box-shadow: -1px -1px 5px rgba(255, 255, 255, 0.2), 3px 3px 5px rgba(0, 0, 0, 0.3);
          box-shadow: -1px -1px 5px rgba(255, 255, 255, 0.2), 3px 3px 5px rgba(0, 0, 0, 0.3);
}

body nav #navbarNav ul .liquid li div {
  pointer-events: none;
  padding: 5px 10px 5px 10px;
  text-align: center;
  position: absolute;
  right: 30px;
  top: 40px;
  background-color: #919191;
  border-radius: 30px;
  width: auto;
  height: auto;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  opacity: 0;
}

body nav #navbarNav ul .liquid #navhome {
  right: 300px;
}

body nav #navbarNav ul .liquid #navabout {
  right: 200px;
}

body nav #navbarNav ul .liquid #navQ {
  right: 100px;
}

body nav #navbarNav ul .liquid #navP {
  right: 0;
}

body nav #navbarNav ul .liquid li:hover {
  background-color: #919191;
  -webkit-box-shadow: none;
          box-shadow: none;
}

body nav #navbarNav ul .liquid li:hover .home {
  opacity: 1;
  right: -11px;
}

body nav #navbarNav ul .liquid li:hover .about {
  opacity: 1;
  right: -11px;
}

body nav #navbarNav ul .liquid li:hover .qualification {
  opacity: 1;
  right: -35px;
}

body nav #navbarNav ul .liquid li:hover .project {
  opacity: 1;
  right: -15px;
}

body #mobilebtn {
  display: none;
}

body #mobilebtn a {
  color: #b0b0b0;
}

@media (max-width: 992px) {
  body #navbars {
    display: none;
  }
  body #mobilebtn {
    padding: 10px;
    position: relative;
    display: inherit;
    background-color: #e0e0e0;
    height: 40px;
  }
  body #mobilebtn #hamburger {
    z-index: 10;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: transparent;
    -webkit-box-shadow: -1px -1px 5px rgba(255, 255, 255, 0.2), 3px 3px 5px rgba(0, 0, 0, 0.3);
            box-shadow: -1px -1px 5px rgba(255, 255, 255, 0.2), 3px 3px 5px rgba(0, 0, 0, 0.3);
  }
  body #mobilebtn #hamburger .innerbox {
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: absolute;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: transparent;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -webkit-box-shadow: inset -1px -1px 5px rgba(255, 255, 255, 0.2), inset 3px 3px 5px rgba(0, 0, 0, 0.3);
            box-shadow: inset -1px -1px 5px rgba(255, 255, 255, 0.2), inset 3px 3px 5px rgba(0, 0, 0, 0.3);
  }
  body #mobilebtn #hamburger .innerbox svg {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  body #mobilebtn #offcanvasRight {
    background-color: rgba(70, 70, 70, 0.5);
    width: 300px;
  }
  body #mobilebtn #offcanvasRight .offcanvas-body a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  body #mobilebtn #offcanvasRight .offcanvas-body a .outerbox {
    display: inline-block;
    -webkit-box-shadow: -1px -1px 5px rgba(255, 255, 255, 0.2), 3px 3px 5px rgba(0, 0, 0, 0.3);
            box-shadow: -1px -1px 5px rgba(255, 255, 255, 0.2), 3px 3px 5px rgba(0, 0, 0, 0.3);
    height: 40px;
    width: 40px;
    border-radius: 50%;
    margin-right: 10px;
  }
  body #mobilebtn #offcanvasRight .offcanvas-body a .outerbox .innerbox {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    margin-right: 10px;
    background-color: transparent;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -webkit-box-shadow: inset -1px -1px 5px rgba(255, 255, 255, 0.2), inset 3px 3px 5px rgba(0, 0, 0, 0.3);
            box-shadow: inset -1px -1px 5px rgba(255, 255, 255, 0.2), inset 3px 3px 5px rgba(0, 0, 0, 0.3);
  }
  body #mobilebtn #offcanvasRight .offcanvas-body a .outerbox .innerbox svg {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

body #home {
  background-color: #e0e0e0;
  position: relative;
  z-index: 3;
  color: #464646;
}

body #home .homeicon {
  z-index: -5;
}

body #home .homeicon .circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: lightblue;
  position: relative;
  top: 50px;
  left: 450px;
  z-index: -1;
}

body #home .homeicon .square {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 4px solid #8a49ff;
  right: 10%;
  bottom: 15%;
  -webkit-animation: rotation 10s linear infinite;
          animation: rotation 10s linear infinite;
}

body #home .homeicon .dots {
  position: absolute;
  width: 40px;
  left: 3%;
  bottom: 20%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-animation: bounce 3s ease infinite;
          animation: bounce 3s ease infinite;
}

body #home .homeicon .dots div {
  width: 3px;
  height: 3px;
  background-color: #ff9c07;
  margin: 0 3px 8px;
}

body #home .homeicon .ring {
  position: absolute;
  height: 180px;
  width: 180px;
  border: 25px solid coral;
  border-radius: 50%;
  left: 50%;
  top: -150px;
  -webkit-animation: left 3s ease infinite;
          animation: left 3s ease infinite;
  z-index: 5;
}

body #home .homeicon .triangle {
  position: absolute;
  border-top: 30px solid transparent;
  border-left: 30px solid #06d79c;
  left: 30%;
  top: 20%;
  -webkit-animation: rotation 15s ease infinite;
          animation: rotation 15s ease infinite;
}

body #home .homeicon .triangle:before {
  content: '';
  position: absolute;
  border-top: 30px solid transparent;
  border-left: 30px solid #06d79c;
  opacity: 0.5;
  left: -35px;
  top: -25px;
}

body #home .homeicon .stripecircle {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 15%;
  right: 10%;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  overflow: hidden;
  -webkit-animation: counterrotation 10s linear infinite;
          animation: counterrotation 10s linear infinite;
}

body #home .homeicon .stripecircle div {
  width: 1px;
  background-color: #4dd0e1;
}

@media (max-width: 576px) {
  body #home .homeicon .ring {
    position: absolute;
    height: 180px;
    width: 180px;
    border: 25px solid coral;
    border-radius: 50%;
    left: 30%;
    top: -150px;
    -webkit-animation: left 3s ease infinite;
            animation: left 3s ease infinite;
    z-index: 5;
  }
  body #home .homeicon .dots {
    bottom: 40%;
  }
  body #home .homeicon .square {
    bottom: 30%;
  }
}

body #home #tilts {
  opacity: 0.7;
  line-height: 0.8;
  padding: 0;
  height: 600px;
  margin-left: 15%;
  text-align: center;
  font-size: 35em;
  color: white;
  font-weight: 700;
  text-transform: uppercase;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  text-shadow: -1px 1px 1px #a8a8a8, -2px 2px 1px #a8a8a8, -3px 3px 1px #a8a8a8, -4px 4px 1px #a8a8a8, -5px 5px 1px #a8a8a8, -6px 6px 1px #a8a8a8, -7px 7px 1px #a8a8a8, -8px 8px 1px #a8a8a8, -9px 9px 1px #a8a8a8, -10px 10px 1px #a8a8a8, -11px 11px 1px #a8a8a8, -12px 12px 1px #a8a8a8, -13px 13px 1px #a8a8a8, -14px 14px 1px #a8a8a8, -15px 15px 1px #a8a8a8, -16px 16px 1px #a8a8a8, -17px 17px 1px #a8a8a8, -18px 18px 1px #a8a8a8, -19px 19px 1px #a8a8a8, -20px 20px 1px #a8a8a8, -21px 21px 1px #a8a8a8, -22px 22px 1px #a8a8a8, -23px 23px 1px #a8a8a8, -24px 24px 1px #a8a8a8, -25px 25px 1px #a8a8a8, -26px 26px 1px #a8a8a8, -27px 27px 1px #a8a8a8, -28px 28px 1px #a8a8a8, -29px 29px 1px #a8a8a8, -30px 30px 1px #a8a8a8, -31px 31px 1px #a8a8a8, -32px 32px 1px #a8a8a8, -33px 33px 1px #a8a8a8, -34px 34px 1px #a8a8a8, -35px 35px 1px #a8a8a8, -36px 36px 1px #a8a8a8, -37px 37px 1px #a8a8a8, -38px 38px 1px #a8a8a8, -39px 39px 1px #a8a8a8, -40px 40px 1px #a8a8a8, -41px 41px 1px #a8a8a8, -42px 42px 1px #a8a8a8, -43px 43px 1px #a8a8a8, -44px 44px 1px #a8a8a8, -45px 45px 1px #a8a8a8, -46px 46px 1px #a8a8a8, -47px 47px 1px #a8a8a8, -48px 48px 1px #a8a8a8, -49px 49px 1px #a8a8a8, -50px 50px 1px #a8a8a8;
  -webkit-transform: skew(10deg, 0deg);
          transform: skew(10deg, 0deg);
}

@media (max-width: 576px) {
  body #home #tilts {
    opacity: 0.7;
    line-height: 0.8;
    width: 50px;
    height: 300px;
    padding: 0;
    margin-left: 15%;
    text-align: center;
    font-size: 20em;
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: -1px 1px 1px #a8a8a8, -2px 2px 1px #a8a8a8, -3px 3px 1px #a8a8a8, -4px 4px 1px #a8a8a8, -5px 5px 1px #a8a8a8, -6px 6px 1px #a8a8a8, -7px 7px 1px #a8a8a8, -8px 8px 1px #a8a8a8, -9px 9px 1px #a8a8a8, -10px 10px 1px #a8a8a8, -11px 11px 1px #a8a8a8, -12px 12px 1px #a8a8a8, -13px 13px 1px #a8a8a8, -14px 14px 1px #a8a8a8, -15px 15px 1px #a8a8a8, -16px 16px 1px #a8a8a8, -17px 17px 1px #a8a8a8, -18px 18px 1px #a8a8a8, -19px 19px 1px #a8a8a8, -20px 20px 1px #a8a8a8, -21px 21px 1px #a8a8a8, -22px 22px 1px #a8a8a8, -23px 23px 1px #a8a8a8, -24px 24px 1px #a8a8a8, -25px 25px 1px #a8a8a8, -26px 26px 1px #a8a8a8, -27px 27px 1px #a8a8a8, -28px 28px 1px #a8a8a8, -29px 29px 1px #a8a8a8, -30px 30px 1px #a8a8a8;
    -webkit-transform: skew(10deg, 0deg);
            transform: skew(10deg, 0deg);
  }
}

body #home #H {
  color: white;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  text-shadow: -1px 1px 1px #a8a8a8, -2px 2px 1px #a8a8a8, -3px 3px 1px #a8a8a8;
  -webkit-transform: skew(10deg, 0deg);
          transform: skew(10deg, 0deg);
}

body #home .homebtn {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  width: 150px;
  padding: 10px 25px;
  margin: 10px 10px 30px 0;
  border-radius: 20px;
  background-color: transparent;
  -webkit-box-shadow: -2px -2px 2px rgba(255, 255, 255, 0.2), -2px -2px 3px rgba(255, 255, 255, 0.2), inset 2px 2px 2px rgba(255, 255, 255, 0.1), 2px 2px 4px rgba(0, 0, 0, 0.15), 2px 2px 8px rgba(0, 0, 0, 0.15);
          box-shadow: -2px -2px 2px rgba(255, 255, 255, 0.2), -2px -2px 3px rgba(255, 255, 255, 0.2), inset 2px 2px 2px rgba(255, 255, 255, 0.1), 2px 2px 4px rgba(0, 0, 0, 0.15), 2px 2px 8px rgba(0, 0, 0, 0.15);
}

body #home .homebtn:hover {
  -webkit-box-shadow: inset -2px -2px 2px rgba(255, 255, 255, 0.2), inset -2px -2px 3px rgba(255, 255, 255, 0.2), 2px 2px 2px rgba(255, 255, 255, 0.1), inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset 2px 2px 8px rgba(0, 0, 0, 0.15);
          box-shadow: inset -2px -2px 2px rgba(255, 255, 255, 0.2), inset -2px -2px 3px rgba(255, 255, 255, 0.2), 2px 2px 2px rgba(255, 255, 255, 0.1), inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset 2px 2px 8px rgba(0, 0, 0, 0.15);
}

body #about {
  padding: 100px 0 0 0;
  margin: 0;
  color: #a3a199;
  overflow: hidden;
}

body #about .profileouter {
  position: relative;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  -webkit-box-shadow: inset -1px -1px 5px rgba(255, 255, 255, 0.2), inset 3px 3px 5px rgba(0, 0, 0, 0.3);
          box-shadow: inset -1px -1px 5px rgba(255, 255, 255, 0.2), inset 3px 3px 5px rgba(0, 0, 0, 0.3);
}

body #about .profileouter .profileinner {
  position: absolute;
  width: 310px;
  height: 310px;
  border-radius: 50%;
  border: solid transparent;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-box-shadow: -1px -1px 5px rgba(255, 255, 255, 0.2), 3px 3px 5px rgba(0, 0, 0, 0.3);
          box-shadow: -1px -1px 5px rgba(255, 255, 255, 0.2), 3px 3px 5px rgba(0, 0, 0, 0.3);
}

body #about .profileouter .profileinner #profile {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

body #about #aboutdetail {
  position: relative;
}

body #about #aboutdetail .aboutbtn {
  text-align: center;
  padding: 10px 25px;
  margin-top: 10px;
  margin-bottom: 30px;
  border-radius: 20px;
  background-color: transparent;
  -webkit-box-shadow: -2px -2px 2px rgba(255, 255, 255, 0.2), -2px -2px 3px rgba(255, 255, 255, 0.2), inset 2px 2px 2px rgba(255, 255, 255, 0.1), 2px 2px 4px rgba(0, 0, 0, 0.15), 2px 2px 8px rgba(0, 0, 0, 0.15);
          box-shadow: -2px -2px 2px rgba(255, 255, 255, 0.2), -2px -2px 3px rgba(255, 255, 255, 0.2), inset 2px 2px 2px rgba(255, 255, 255, 0.1), 2px 2px 4px rgba(0, 0, 0, 0.15), 2px 2px 8px rgba(0, 0, 0, 0.15);
}

body #about #aboutdetail .aboutbtn:hover {
  -webkit-box-shadow: inset -2px -2px 2px rgba(255, 255, 255, 0.2), inset -2px -2px 3px rgba(255, 255, 255, 0.2), 2px 2px 2px rgba(255, 255, 255, 0.1), inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset 2px 2px 8px rgba(0, 0, 0, 0.15);
          box-shadow: inset -2px -2px 2px rgba(255, 255, 255, 0.2), inset -2px -2px 3px rgba(255, 255, 255, 0.2), 2px 2px 2px rgba(255, 255, 255, 0.1), inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset 2px 2px 8px rgba(0, 0, 0, 0.15);
}

body #about #aboutdetail #iconcontainer a {
  width: 80px;
  display: block;
  margin-right: 20px;
}

body #about #aboutdetail #iconcontainer a .abouticon {
  cursor: pointer;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background-color: transparent;
  -webkit-box-shadow: -2px -2px 2px rgba(255, 255, 255, 0.2), -2px -2px 3px rgba(255, 255, 255, 0.2), inset 2px 2px 2px rgba(255, 255, 255, 0.1), 2px 2px 4px rgba(0, 0, 0, 0.15), 2px 2px 8px rgba(0, 0, 0, 0.15);
          box-shadow: -2px -2px 2px rgba(255, 255, 255, 0.2), -2px -2px 3px rgba(255, 255, 255, 0.2), inset 2px 2px 2px rgba(255, 255, 255, 0.1), 2px 2px 4px rgba(0, 0, 0, 0.15), 2px 2px 8px rgba(0, 0, 0, 0.15);
}

body #about #aboutdetail #iconcontainer a .abouticon:hover {
  -webkit-box-shadow: inset -2px -2px 2px rgba(255, 255, 255, 0.2), inset -2px -2px 3px rgba(255, 255, 255, 0.2), 2px 2px 2px rgba(255, 255, 255, 0.1), inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset 2px 2px 8px rgba(0, 0, 0, 0.15);
          box-shadow: inset -2px -2px 2px rgba(255, 255, 255, 0.2), inset -2px -2px 3px rgba(255, 255, 255, 0.2), 2px 2px 2px rgba(255, 255, 255, 0.1), inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset 2px 2px 8px rgba(0, 0, 0, 0.15);
}

body #qualification {
  background-color: #e0e0e0;
  padding-top: 100px;
  margin: 0;
  color: #464646;
  overflow: hidden;
  padding-bottom: 20px;
}

body #qualification #offerbox {
  position: relative;
  width: 300px;
  height: 330px;
  background-color: transparent;
  -webkit-box-shadow: -2px -2px 2px rgba(255, 255, 255, 0.2), -2px -2px 3px rgba(255, 255, 255, 0.2), inset 2px 2px 2px rgba(255, 255, 255, 0.1), 2px 2px 4px rgba(0, 0, 0, 0.15), 2px 2px 8px rgba(0, 0, 0, 0.15);
          box-shadow: -2px -2px 2px rgba(255, 255, 255, 0.2), -2px -2px 3px rgba(255, 255, 255, 0.2), inset 2px 2px 2px rgba(255, 255, 255, 0.1), 2px 2px 4px rgba(0, 0, 0, 0.15), 2px 2px 8px rgba(0, 0, 0, 0.15);
}

body #qualification #offerbox .offericon {
  position: absolute;
  top: 20px;
  left: 120px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: transparent;
  -webkit-box-shadow: inset -1px -1px 5px rgba(255, 255, 255, 0.2), inset 3px 3px 5px rgba(0, 0, 0, 0.3);
          box-shadow: inset -1px -1px 5px rgba(255, 255, 255, 0.2), inset 3px 3px 5px rgba(0, 0, 0, 0.3);
}

body #qualification #offerbox .offericon div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  -webkit-box-shadow: -1px -1px 5px rgba(255, 255, 255, 0.2), 3px 3px 5px rgba(0, 0, 0, 0.3);
          box-shadow: -1px -1px 5px rgba(255, 255, 255, 0.2), 3px 3px 5px rgba(0, 0, 0, 0.3);
}

body #qualification #offerbox .tech {
  position: absolute;
  top: 250px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

body #qualification #offerbox .tech div {
  margin-right: 10px;
  margin-top: 10px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  padding: 0 10px 0 10px;
  border-radius: 20px;
  background-color: transparent;
  -webkit-box-shadow: -2px -2px 2px rgba(255, 255, 255, 0.2), -2px -2px 3px rgba(255, 255, 255, 0.2), inset 2px 2px 2px rgba(255, 255, 255, 0.1), 2px 2px 4px rgba(0, 0, 0, 0.15), 2px 2px 8px rgba(0, 0, 0, 0.15);
          box-shadow: -2px -2px 2px rgba(255, 255, 255, 0.2), -2px -2px 3px rgba(255, 255, 255, 0.2), inset 2px 2px 2px rgba(255, 255, 255, 0.1), 2px 2px 4px rgba(0, 0, 0, 0.15), 2px 2px 8px rgba(0, 0, 0, 0.15);
}

body #qualification #offerbox .tech div:hover {
  -webkit-box-shadow: inset -2px -2px 2px rgba(255, 255, 255, 0.2), inset -2px -2px 3px rgba(255, 255, 255, 0.2), 2px 2px 2px rgba(255, 255, 255, 0.1), inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset 2px 2px 8px rgba(0, 0, 0, 0.15);
          box-shadow: inset -2px -2px 2px rgba(255, 255, 255, 0.2), inset -2px -2px 3px rgba(255, 255, 255, 0.2), 2px 2px 2px rgba(255, 255, 255, 0.1), inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset 2px 2px 8px rgba(0, 0, 0, 0.15);
}

body #qualification #offerbox h4 {
  margin-top: 100px;
}

body #qualification #offerbox h6 {
  position: absolute;
  bottom: 70px;
  text-align: left;
}

body #qualification #SkillsContainer {
  display: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-bottom: 20px;
}

body #qualification #SkillsContainer #SkillsDetail {
  position: relative;
}

body #qualification #SkillsContainer #SkillsDetail ul {
  position: relative;
  margin: 0 0 250px 0;
  padding: 0;
  width: 600px;
  height: 380px;
}

body #qualification #SkillsContainer #SkillsDetail ul li {
  list-style: none;
  width: 150px;
  height: 150px;
  border: solid transparent;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  position: absolute;
  -webkit-box-shadow: inset -1px -1px 5px rgba(255, 255, 255, 0.2), inset 3px 3px 5px rgba(0, 0, 0, 0.3);
          box-shadow: inset -1px -1px 5px rgba(255, 255, 255, 0.2), inset 3px 3px 5px rgba(0, 0, 0, 0.3);
}

body #qualification #SkillsContainer #SkillsDetail ul li .innerbox {
  position: absolute;
  width: 120px;
  height: 120px;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: solid transparent;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-box-shadow: -1px -1px 5px rgba(255, 255, 255, 0.2), 3px 3px 5px rgba(0, 0, 0, 0.3);
          box-shadow: -1px -1px 5px rgba(255, 255, 255, 0.2), 3px 3px 5px rgba(0, 0, 0, 0.3);
  position: relative;
}

body #qualification #SkillsContainer #SkillsDetail ul li .innerbox .liquid {
  position: relative;
  background-color: transparent;
  -webkit-filter: url("#goo");
          filter: url("#goo");
}

body #qualification #SkillsContainer #SkillsDetail ul li .innerbox .liquid .skillswrap {
  background-color: transparent;
  padding: 8px;
  border-radius: 50%;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

body #qualification #SkillsContainer #SkillsDetail ul li .innerbox .liquid .skillswrap img {
  width: 40px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

body #qualification #SkillsContainer #SkillsDetail ul li .innerbox .liquid .skillswrap svg {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

body #qualification #SkillsContainer #SkillsDetail ul li .innerbox .liquid .skillstext {
  width: 90px;
  position: absolute;
  top: 30%;
  left: 30%;
  -webkit-transform: translateX(60px) translateY(-60px) rotate(-45deg);
          transform: translateX(60px) translateY(-60px) rotate(-45deg);
  background-color: #919191;
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  pointer-events: none;
  border-radius: 20px;
}

body #qualification #SkillsContainer #SkillsDetail ul li .innerbox:hover .skillswrap {
  background-color: #919191;
  -webkit-transform: translateX(-15px) translateY(-15px);
          transform: translateX(-15px) translateY(-15px);
}

body #qualification #SkillsContainer #SkillsDetail ul li .innerbox:hover .skillstext {
  opacity: 1;
  -webkit-transform: translateX(-18px) translateY(13px) rotate(-45deg);
          transform: translateX(-18px) translateY(13px) rotate(-45deg);
}

body #qualification #SkillsContainer #SkillsDetail ul li:hover {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -webkit-transform: scale(1.2) rotate(45deg);
          transform: scale(1.2) rotate(45deg);
  z-index: 3;
}

body #qualification #SkillsContainer #SkillsDetail ul li:nth-child(5n+1) {
  left: 0;
}

body #qualification #SkillsContainer #SkillsDetail ul li:nth-child(5n+2) {
  left: 228px;
}

body #qualification #SkillsContainer #SkillsDetail ul li:nth-child(5n+3) {
  left: 456px;
}

body #qualification #SkillsContainer #SkillsDetail ul li:nth-child(5n+4) {
  left: 114px;
}

body #qualification #SkillsContainer #SkillsDetail ul li:nth-child(5n+5) {
  left: 342px;
}

body #qualification #SkillsContainer #SkillsDetail ul li:nth-child(11) {
  top: 456px;
  left: 228px;
}

body #qualification #SkillsContainer #SkillsDetail ul #item1 {
  top: 0;
}

body #qualification #SkillsContainer #SkillsDetail ul #item2 {
  top: 0;
}

body #qualification #SkillsContainer #SkillsDetail ul #item3 {
  top: 0;
}

body #qualification #SkillsContainer #SkillsDetail ul #item4 {
  top: 114px;
}

body #qualification #SkillsContainer #SkillsDetail ul #item5 {
  top: 114px;
}

body #qualification #SkillsContainer #SkillsDetail ul #item6 {
  top: 228px;
}

body #qualification #SkillsContainer #SkillsDetail ul #item7 {
  top: 228px;
}

body #qualification #SkillsContainer #SkillsDetail ul #item8 {
  top: 228px;
}

body #qualification #SkillsContainer #SkillsDetail ul #item9 {
  top: 342px;
}

body #qualification #SkillsContainer #SkillsDetail ul #item10 {
  top: 342px;
}

@media (max-width: 768px) {
  body #qualification #SkillsContainer #SkillsDetail ul {
    margin-bottom: 550px;
  }
  body #qualification #SkillsContainer #SkillsDetail ul li:nth-child(3n) {
    left: 228px;
  }
  body #qualification #SkillsContainer #SkillsDetail ul li:nth-child(3n+1) {
    left: 113px;
  }
  body #qualification #SkillsContainer #SkillsDetail ul li:nth-child(3n-1) {
    left: 343px;
  }
  body #qualification #SkillsContainer #SkillsDetail ul #item1 {
    top: 0;
  }
  body #qualification #SkillsContainer #SkillsDetail ul #item2 {
    top: 0;
  }
  body #qualification #SkillsContainer #SkillsDetail ul #item3 {
    top: 113px;
  }
  body #qualification #SkillsContainer #SkillsDetail ul #item4 {
    top: 226px;
  }
  body #qualification #SkillsContainer #SkillsDetail ul #item5 {
    top: 226px;
  }
  body #qualification #SkillsContainer #SkillsDetail ul #item6 {
    top: 339px;
  }
  body #qualification #SkillsContainer #SkillsDetail ul #item7 {
    top: 452px;
  }
  body #qualification #SkillsContainer #SkillsDetail ul #item8 {
    top: 452px;
  }
  body #qualification #SkillsContainer #SkillsDetail ul #item9 {
    top: 565px;
  }
  body #qualification #SkillsContainer #SkillsDetail ul #item10 {
    top: 678px;
  }
  body #qualification #SkillsContainer #SkillsDetail ul li:nth-child(11) {
    top: 678px;
  }
  body #qualification #SkillsContainer #SkillsDetail #skillsbtn .aboutbtn.reactjs {
    margin: 0 20px 0 20px;
  }
  body #qualification #SkillsContainer #SkillsDetail #skillsbtn .aboutbtn.reactnative {
    margin: 0 20px 0 20px;
  }
}

@media (max-width: 576px) {
  body #qualification #SkillsContainer #SkillsDetail ul {
    margin-bottom: 350px;
    width: 360px;
  }
  body #qualification #SkillsContainer #SkillsDetail ul li {
    width: 120px;
    height: 120px;
  }
  body #qualification #SkillsContainer #SkillsDetail ul li .innerbox {
    width: 90px;
    height: 90px;
  }
  body #qualification #SkillsContainer #SkillsDetail ul li:nth-child(3n) {
    left: 120px;
  }
  body #qualification #SkillsContainer #SkillsDetail ul li:nth-child(3n+1) {
    left: 30px;
  }
  body #qualification #SkillsContainer #SkillsDetail ul li:nth-child(3n-1) {
    left: 210px;
  }
  body #qualification #SkillsContainer #SkillsDetail ul #item1 {
    top: 0px;
  }
  body #qualification #SkillsContainer #SkillsDetail ul #item2 {
    top: 0px;
  }
  body #qualification #SkillsContainer #SkillsDetail ul #item3 {
    top: 90px;
  }
  body #qualification #SkillsContainer #SkillsDetail ul #item4 {
    top: 180px;
  }
  body #qualification #SkillsContainer #SkillsDetail ul #item5 {
    top: 180px;
  }
  body #qualification #SkillsContainer #SkillsDetail ul #item6 {
    top: 270px;
  }
  body #qualification #SkillsContainer #SkillsDetail ul #item7 {
    top: 360px;
  }
  body #qualification #SkillsContainer #SkillsDetail ul #item8 {
    top: 360px;
  }
  body #qualification #SkillsContainer #SkillsDetail ul #item9 {
    top: 450px;
  }
  body #qualification #SkillsContainer #SkillsDetail ul #item10 {
    top: 540px;
  }
  body #qualification #SkillsContainer #SkillsDetail ul li:nth-child(11) {
    top: 540px;
  }
  body #qualification #SkillsContainer #SkillsDetail #skillsbtn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-bottom: 10px;
  }
  body #qualification #SkillsContainer #SkillsDetail #skillsbtn .reactjs {
    margin-bottom: 20px;
  }
}

body #qualification #SkillsContainer #SkillsDetail #skillsbtn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

body #qualification #SkillsContainer #SkillsDetail #skillsbtn a {
  border-radius: 20px;
  background-color: transparent;
  -webkit-box-shadow: -2px -2px 2px rgba(255, 255, 255, 0.2), -2px -2px 3px rgba(255, 255, 255, 0.2), inset 2px 2px 2px rgba(255, 255, 255, 0.1), 2px 2px 4px rgba(0, 0, 0, 0.15), 2px 2px 8px rgba(0, 0, 0, 0.15);
          box-shadow: -2px -2px 2px rgba(255, 255, 255, 0.2), -2px -2px 3px rgba(255, 255, 255, 0.2), inset 2px 2px 2px rgba(255, 255, 255, 0.1), 2px 2px 4px rgba(0, 0, 0, 0.15), 2px 2px 8px rgba(0, 0, 0, 0.15);
  text-align: center;
  padding: 10px 25px;
  width: 270px;
  margin: 0 50px 0 50px;
}

body #qualification #SkillsContainer #SkillsDetail #skillsbtn a:hover {
  -webkit-box-shadow: inset -2px -2px 2px rgba(255, 255, 255, 0.2), inset -2px -2px 3px rgba(255, 255, 255, 0.2), 2px 2px 2px rgba(255, 255, 255, 0.1), inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset 2px 2px 8px rgba(0, 0, 0, 0.15);
          box-shadow: inset -2px -2px 2px rgba(255, 255, 255, 0.2), inset -2px -2px 3px rgba(255, 255, 255, 0.2), 2px 2px 2px rgba(255, 255, 255, 0.1), inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset 2px 2px 8px rgba(0, 0, 0, 0.15);
}

body #project {
  padding-top: 100px;
  color: #a3a199;
  overflow: hidden;
}

body #project #projectcontainer {
  position: relative;
}

body #project #projectcontainer #device {
  position: relative;
  width: 450px;
  height: 320px;
}

body #project #projectcontainer #device #device1 {
  cursor: pointer;
  position: relative;
  right: 200px;
}

body #project #projectcontainer #device #device2 {
  cursor: pointer;
  position: relative;
  right: 0px;
}

body #project #projectcontainer #device #android1 {
  width: 350px;
  height: 336px;
  position: absolute;
  top: -28px;
  right: -50px;
  z-index: 3;
}

body #project #projectcontainer #device #mobile1 {
  width: 134.5px;
  position: absolute;
  top: 30px;
  left: 258px;
  z-index: 3;
}

body #project #projectcontainer #device #laptop {
  width: 450px;
}

body #project #projectcontainer #device #phone {
  width: 242px;
  position: absolute;
  bottom: 0;
  right: -70px;
  z-index: 3;
}

body #project #projectcontainer #device #projectCard {
  position: absolute;
  top: 15px;
  width: 343px;
  left: 54px;
}

body #project #projectcontainer #device #projectCard img {
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
          box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  overflow: hidden;
}

body #project #projectcontainer #device #mobile {
  width: 93px;
  position: absolute;
  top: 119px;
  left: 353px;
  z-index: 3;
}

@media (max-width: 576px) {
  body #project #projectcontainer #device #laptop {
    width: 350px;
  }
  body #project #projectcontainer #device #phone {
    width: 170px;
    position: absolute;
    bottom: 73px;
    right: 20px;
    z-index: 3;
  }
  body #project #projectcontainer #device #mobile {
    width: 66px;
    position: absolute;
    top: 107px;
    left: 312px;
    z-index: 3;
  }
  body #project #projectcontainer #device #projectCard {
    position: absolute;
    top: 10px;
    width: 266px;
    left: 92px;
  }
}

body #project #projectcontainer #ProjectDetail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

body #project #projectcontainer #ProjectDetail #projecttitle {
  color: #a3a199;
  margin-bottom: 30px;
  text-align: start;
}

body #project #projectcontainer #ProjectDetail p {
  margin-bottom: 0;
  text-align: start;
}

body #project #projectcontainer #ProjectDetail .tech {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 50px;
  margin-bottom: 10px;
}

body #project #projectcontainer #ProjectDetail .tech div {
  margin: 0 10px 10px 0;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  padding: 0 10px 0 10px;
  border-radius: 20px;
  background-color: transparent;
  -webkit-box-shadow: -2px -2px 2px rgba(255, 255, 255, 0.2), -2px -2px 3px rgba(255, 255, 255, 0.2), inset 2px 2px 2px rgba(255, 255, 255, 0.1), 2px 2px 4px rgba(0, 0, 0, 0.15), 2px 2px 8px rgba(0, 0, 0, 0.15);
          box-shadow: -2px -2px 2px rgba(255, 255, 255, 0.2), -2px -2px 3px rgba(255, 255, 255, 0.2), inset 2px 2px 2px rgba(255, 255, 255, 0.1), 2px 2px 4px rgba(0, 0, 0, 0.15), 2px 2px 8px rgba(0, 0, 0, 0.15);
}

body #project #projectcontainer #ProjectDetail .tech div:hover {
  -webkit-box-shadow: inset -2px -2px 2px rgba(255, 255, 255, 0.2), inset -2px -2px 3px rgba(255, 255, 255, 0.2), 2px 2px 2px rgba(255, 255, 255, 0.1), inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset 2px 2px 8px rgba(0, 0, 0, 0.15);
          box-shadow: inset -2px -2px 2px rgba(255, 255, 255, 0.2), inset -2px -2px 3px rgba(255, 255, 255, 0.2), 2px 2px 2px rgba(255, 255, 255, 0.1), inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset 2px 2px 8px rgba(0, 0, 0, 0.15);
}

body #project #projectcontainer #ProjectDetail .projectbtn {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

body #project #projectcontainer #ProjectDetail .projectbtn a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  cursor: pointer;
  text-decoration: none;
  margin-right: 10px;
  height: 40px;
  width: 40px;
  border-radius: 20px;
  background-color: transparent;
  -webkit-box-shadow: -2px -2px 2px rgba(255, 255, 255, 0.2), -2px -2px 3px rgba(255, 255, 255, 0.2), inset 2px 2px 2px rgba(255, 255, 255, 0.1), 2px 2px 4px rgba(0, 0, 0, 0.15), 2px 2px 8px rgba(0, 0, 0, 0.15);
          box-shadow: -2px -2px 2px rgba(255, 255, 255, 0.2), -2px -2px 3px rgba(255, 255, 255, 0.2), inset 2px 2px 2px rgba(255, 255, 255, 0.1), 2px 2px 4px rgba(0, 0, 0, 0.15), 2px 2px 8px rgba(0, 0, 0, 0.15);
}

body #project #projectcontainer #ProjectDetail .projectbtn a:hover {
  -webkit-box-shadow: inset -2px -2px 2px rgba(255, 255, 255, 0.2), inset -2px -2px 3px rgba(255, 255, 255, 0.2), 2px 2px 2px rgba(255, 255, 255, 0.1), inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset 2px 2px 8px rgba(0, 0, 0, 0.15);
          box-shadow: inset -2px -2px 2px rgba(255, 255, 255, 0.2), inset -2px -2px 3px rgba(255, 255, 255, 0.2), 2px 2px 2px rgba(255, 255, 255, 0.1), inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset 2px 2px 8px rgba(0, 0, 0, 0.15);
}

body #project #projectcontainer #ProjectDetail .projectbtn p {
  margin-right: 20px;
}

@media (max-width: 576px) {
  body #project #projectcontainer #ProjectDetail #projecttitle {
    margin-top: 0;
  }
}

body #project #projectcontainer #videobackground {
  margin: 0;
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 11;
  display: none;
}

body #project #projectcontainer #videobackground .videowrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

body #project #projectcontainer #videobackground .videowrap video {
  max-height: 100vh;
  z-index: 8;
}

body #project #projectcontainer #videobackground .videowrap svg {
  width: 30px;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

a:link {
  color: inherit;
  text-decoration: none;
}

a:visited {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: inherit;
  text-decoration: none;
}

a:active {
  color: inherit;
  text-decoration: none;
}

@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
}

@keyframes bounce {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
}

@-webkit-keyframes left {
  0%, 100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(25px);
            transform: translateX(25px);
  }
}

@keyframes left {
  0%, 100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(25px);
            transform: translateX(25px);
  }
}

@-webkit-keyframes rotation {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotation {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes counterrotation {
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}

@keyframes counterrotation {
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}

@-webkit-keyframes animate {
  0% {
    -webkit-transform: translateY(0) rotate(0deg);
            transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(-1000px) rotate(360deg);
            transform: translateY(-1000px) rotate(360deg);
    opacity: 0.8;
  }
}

@keyframes animate {
  0% {
    -webkit-transform: translateY(0) rotate(0deg);
            transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(-1000px) rotate(360deg);
            transform: translateY(-1000px) rotate(360deg);
    opacity: 0.8;
  }
}

@-webkit-keyframes navbar {
  0% {
    -webkit-transform: translateX(100vw);
            transform: translateX(100vw);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0vw) translateY(100px);
            transform: translateX(0vw) translateY(100px);
    opacity: 0.8;
  }
}

@keyframes navbar {
  0% {
    -webkit-transform: translateX(100vw);
            transform: translateX(100vw);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0vw) translateY(100px);
            transform: translateX(0vw) translateY(100px);
    opacity: 0.8;
  }
}
/*# sourceMappingURL=style.css.map */