* {
  margin: 0;
  padding: 0;
  /* background-color: #011F26; */
}
body {
  background-color: #111a24;
}

.top-bar {
  display: flex;
  justify-content: space-evenly;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: 0.14s ease;
  background-color: #111a24;
  height: 80px;
  border-bottom: 2px solid yellow;
}
.top-bar a {
  text-decoration: none;
}
.logo {
  position: relative;
  right: 30px;
  color: rebeccapurple;

  top: 26px;
  font-size: 40px;
  font-weight: bolder;
}
.navbar {
  position: relative;
  display: flex;
  top: 33px;
}
.navbar li {
  position: relative;
  list-style: none;
  display: flex;
  margin-left: 40px;
  padding-left: 60px;
}
.navbar li a {
  position: relative;
  color: white;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
}
.navbar li a:hover {
  color: yellow;
  transition: 0.1s linear;
}
.navbar li a::after {
  content: "";
  position: absolute;
  height: 3px;
  width: 0%;
  background-color: yellow;
  /* bottom: 0px; */
  left: 0px;
  top: 22px;
}
.navbar li a:hover::after {
  width: 100%;
  transition: 0.5s linear;
}
.bar {
  background: none;
  position: relative;
  top: 30px;
}
.bar .toggle {
  background: none;
  color: white;
  border: none;
  height: 30px;
  cursor: pointer;
  display: none;
}
.dropdown {
  display: none;
  position: absolute;
  right: 2rem;
  top: 70px;
  height: 0;
  background: rgb(188, 186, 186);
  backdrop-filter: blur(15px);
  overflow: hidden;
  border: 10px;
  transition: height 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.dropdown.open {
  height: 240px;
}
.dropdown li {
  padding: 0.7rem;
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dropdown li a {
  color: white;
  text-decoration: none;
}
.dropdown li:hover {
  color: blue;
}

/* responsive for navbar */
@media (max-width: 650px) {
  .navbar {
    width: 100%;
    position: fixed;
  }
  .navbar li {
    display: none;
  }
  .bar .toggle {
    display: block;
  }
  .dropdown {
    display: block;
  }
}

.home {
  /* border-bottom: 1px solid blanchedalmond; */
  /* border-top: 1px solid blanchedalmond; */
  height: 750px;
  width: 100%;
  /* margin-top: 100px; */
  color: white;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #111a24;
  /* background-color: yellowgreen; */
}
#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #111a24;
  /* background-image: url("http://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/NASA_logo.svg/1237px-NASA_logo.svg.png"); */
  background-repeat: no-repeat;
  background-size: 20%;
  background-position: 50% 50%;
}
---- stats.js ---- .count-particles {
  background: #000022;
  position: absolute;
  top: 48px;
  left: 0;
  width: 80px;
  color: #13e8e9;
  font-size: 0.8em;
  text-align: left;
  text-indent: 4px;
  line-height: 14px;
  padding-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}
.js-count-particles {
  font-size: 1.1em;
}
#stats,
.count-particles {
  /* -webkit-user-select: none; */
  margin-top: 5px;
  margin-left: 5px;
}
#stats {
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}
.count-particles {
  border-radius: 0 0 3px 3px;
}

.text {
  background-color: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* background-color: yellow; */
  height: 400px;
  width: 500px;
  margin-left: 70px;
  position: relative;
  top: 120px;
  background: none;
}
.text p {
  font-size: 60px;
  /* text-shadow: #13e8e9; */
}
.text p span {
  color: orange;
  font-weight: bolder;
  font-size: 60px;
  /* margin-top: 100px; */
  position: relative;
  top: 10px;
}
#me {
  color: white;
}
#hello {
  font-size: 30px;
  color: white;
}
.wrapper {
  display: flex;
  margin-right: 36px;
  /* background: none; */
}

.wrapper .static-txt {
  color: #fff;
  font-size: 60px;
  font-weight: 400;
}

.wrapper .dynamic-txts {
  margin-left: 15px;
  line-height: 90px;
  height: 90px;
  overflow: hidden;
}

.dynamic-txts li {
  list-style: none;
  color: #ff4c29;
  font-size: 60px;
  font-weight: 500;
  top: 0;
  position: relative;
  animation: slide 12s steps(4) infinite;
}

@keyframes slide {
  100% {
    top: -360px;
  }
}

.dynamic-txts li {
  position: relative;
  /* left: 0; */
}

.dynamic-txts li::after {
  content: "";
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #111a24;
  border-left: 2px solid #ff4c29;
  animation: typing 3s steps(10) infinite;
}

@keyframes typing {
  40%,
  60% {
    left: calc(100% + 30px);
  }
  100% {
    left: 0;
  }
}

.image-container {
  position: absolute;
  right: -740px;
  top: 38%;
  transform: translateY(-50%);
  background: none;
}

.image {
  position: relative;
  top: 50px;
  left: 10px;
  width: 600px;
  height: 600px;
  overflow: hidden;
  background: none;
}

/* Style for the shape image */
.image .shape {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Style for the man image */
.image .men {
  position: relative;
  top: 50%;
  left: 60%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -49%) rotateY(15deg);
  /* border: 1px solid black; */
  z-index: 2;
  background: none;
  /* box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); */
}
.icons {
  width: 100%;
}
.icons-list {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
.icons-list li {
  list-style: none;
}
.icons-list li a {
  color: white;
  margin-left: -80px;
  border: 1px solid yellow;
  border-radius: 100%;
  padding: 8px;
}
.icons-list li a:hover {
  border: 1px solid red;
  color: red;
}

/* responsive for home section */
@media (max-width: 650px) {
  .home {
    height: 400px;
    left: 0;
    width: 100%;
    position: relative;
  }
  .text {
    position: absolute;
    width: 60%;
    /* margin: 0; */
    padding: 0;
    /* background-color: green; */
  }
  #hello {
    position: absolute;
    font-size: 40px;
    top: -10px;
    left: 0;
  }
  #me {
    top: 40px;
    font-size: 40px;
    position: absolute;
    left: 0;
    /* top: -30px; */
  }
  #manoj {
    /* background-color: #ff4c29; */
    position: absolute;
    width: 100%;
    left: 0;
    font-size: 40px;
    top: 40px;
    padding-left: 80px;
  }
  .wrapper {
    position: absolute;
    top: 100px;
    left: 0px;
  }
  .static-txt span {
    /* height: 10px; */
    top: -20px;
    width: 100px;
    display: inline-block;
    position: relative;
    /* background-color: red; */
    font-size: 40px;
  }
  .wrapper .dynamic-txts {
    position: relative;
    top: -10px;
    margin-left: 0px;
    line-height: 70px;
    height: 70px;
  }

  .dynamic-txts li {
    font-size: 40px;
  }

  @keyframes slide {
    100% {
      top: -280px;
    }
  }

  .dynamic-txts li::after {
    border-left: 1px solid #ff4c29;
  }
  .icons {
    /* background-color: red; */
    position: absolute;
    top: 160px;
    left: 30px;
  }
  .image-container {
    display: none;
  }
}

/* responsive for smaller one */
@media (max-width: 450px) {
  .home {
    height: 400px;
    left: 0;
    width: 100%;
    position: relative;
    left: -10px;
  }
  .text {
    position: absolute;
    width: 60%;
    /* margin: 0; */
    padding: 0;
    /* background-color: green; */
  }
  #hello {
    position: absolute;
    font-size: 40px;
    top: -10px;
    left: 0;
  }
  #me {
    top: 40px;
    font-size: 40px;
    position: absolute;
    left: 0;
    /* top: -30px; */
  }
  #manoj {
    /* background-color: #ff4c29; */
    position: absolute;
    width: 100%;
    left: 0;
    font-size: 30px;
    top: 50px;
    padding-left: 80px;
  }
  .wrapper {
    position: absolute;
    top: 100px;
    left: 0px;
  }
  .static-txt span {
    /* height: 10px; */
    top: -20px;
    width: 100px;
    display: inline-block;
    position: relative;
    /* background-color: red; */
    font-size: 40px;
  }
  .wrapper .dynamic-txts {
    position: relative;
    top: -10px;
    margin-left: 0px;
    line-height: 70px;
    height: 70px;
  }

  .dynamic-txts li {
    font-size: 40px;
  }

  @keyframes slide {
    100% {
      top: -280px;
    }
  }

  .dynamic-txts li::after {
    border-left: 1px solid #ff4c29;
  }
  .icons {
    /* background-color: red; */
    position: absolute;
    top: 160px;
    left: 30px;
  }
  .image-container {
    display: none;
  }
}

.about {
  height: 800px;
  width: 100%;
  background-color: #faefe6;
  transition: 0.5s linear;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  top: 0;
  bottom: 0;
  /* margin-top: -30px; */
  /* border-bottom: 1px solid whitesmoke; */
}
.us {
  position: absolute;
  top: 80px;
  /* background-color: #d1bf8e; */
  right: 40%;
  font-size: 50px;
  font-weight: bolder;
  color: rgb(76, 0, 255);
  text-shadow: #6a00f6;
}
.photo {
  /* background-color: #ff4c29; */
  margin-top: 100px;
  position: absolute;
  height: 80%;
  width: 55%;
  top: 90px;
  right: 25%;
}
.photo img {
  position: absolute;
  height: 65%;
  width: 55%;
  left: -180px;
  top: 70px;
  /* border: 1px solid rgb(8, 16, 127); */
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
    rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
    rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  border-radius: 50%;
}
.info {
  right: 150px;
  top: 270px;
  height: 50%;
  width: 50%;
  position: absolute;
  /* background-color: red; */
  right: 10px;
  color: white;
  /* padding: 30px;
  border: 1px solid yellow;
  box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px,
    rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px,
    rgba(240, 46, 170, 0.05) 25px 25px;*/
}
.info p {
  color: #071af4;
  position: absolute;
  font-size: 20px;
  bottom: 160px;
  /* background-color: rgb(167, 186, 24); */
  /* right: -100px; */
  left: -100px;
  height: 100%;
  width: 100%;
  top: 70px;
  /* padding-top: 10px; */
  /* border: 1px solid black; */
}
.info .cv {
  position: absolute;
  bottom: 60px;
  left: 100px;
  border: none;
  cursor: pointer;
  border-radius: 20px;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
  height: 50px;
  width: 140px;
  color: rgb(89, 0, 255);
  background-color: rgb(255, 255, 255);
  font-weight: bolder;
  animation: button 5s  1s infinite linear;
}
@keyframes button {
  0%{
    background: none;
  }
  100%{
    background-color: rgb(0, 248, 252);
  }
  
}

/* responsive for about section */
@media (max-width: 650px) {
  .about {
    /* height: 1000px; */
    position: relative;
    width: 100%;
    /* margin-top: -100px; */
  }
  .us h1 {
    position: relative;
    top: 0px;
    font-size: 30px;
    /* left: -100px; */
  }
  .about .photo {
    top: -20px;
    left: 80px;
    height: 300px;
    width: 100%;
    position: absolute;
    /* background-color: red; */
  }
  .about .photo img {
    position: absolute;
    height: 70%;
    width: 55%;
    left: 0;
  }
  .info {
    position: absolute;
    /* background-color: green; */
    width: 90%;
    left: 105px;
    top: 460px;
  }
  .info p {
    position: absolute;
    left: 250px;
    font-size: 1px;
    margin-top: 30px;
    top: -40px;
  }
  .about .info .cv {
    position: absolute;
    height: 50px;
    width: 100px;
    left: 380px;
    top: 77px;
    bottom: 300px;
  }
}

/* responsive for smaller screen */
@media (max-width: 450px) {
  .about {
    position: relative;
    width: 100%;
    top: 0;
  }
  .us h1 {
    position: relative;
    top: 0px;
    font-size: 30px;
    left: 20px;
  }
  .photo {
    top: -20px;
    left: 75px;
    height: 100%;
    width: 100%;
    position: absolute;
    /* background-color: red; */
  }
  .photo img {
    position: absolute;
    height: 30%;
    width: 55%;
    left: 0;
  }
  .info {
    position: absolute;
    /* background-color: green; */
    width: 90%;
    left: -215px;
    top: 420px;
  }
  .info p {
    /* margin-top: 50px; */
    font-size: 15px;
  }
  .info .cv {
    position: absolute;
    height: 50px;
    width: 100px;
    left: 240px;
    margin-top: 125px;
  }
}

/* services part */
.services {
  position: relative;
  background-color: #d6c8bc;
  height: 800px;
}
.services h1 {
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 80px;
  font-size: 50px;
  left: 45%;
}