@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
/*variables*/
* {
  font-family: "Poppins", sans-serif;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.progress-div {
  overflow-x: hidden;
  background-image: url("../images/waves.svg");
  background-repeat: no-repeat;
  background-position: bottom;
}

.neogation-img-div {
  margin-right: auto;
  padding-right: auto;
}

.neogation-img-div img {
  border: 10px solid white;
  padding: 0;
  -webkit-box-shadow: rgba(246, 57, 28, 0.4) -5px 5px, rgba(246, 57, 28, 0.3) -10px 10px, rgba(246, 57, 28, 0.2) -15px 15px, rgba(246, 57, 28, 0.1) -20px 20px, rgba(246, 57, 28, 0.05) -25px 25px;
          box-shadow: rgba(246, 57, 28, 0.4) -5px 5px, rgba(246, 57, 28, 0.3) -10px 10px, rgba(246, 57, 28, 0.2) -15px 15px, rgba(246, 57, 28, 0.1) -20px 20px, rgba(246, 57, 28, 0.05) -25px 25px;
}

.progress-perc-div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-top: 0;
  margin-top: 0;
}

.progress-perc-div p {
  color: #80889d;
  padding-bottom: 0;
  margin-bottom: 0;
}

.progress-perc-div h1 {
  padding-top: 0;
  margin-top: 0;
  color: #f6391c;
}

.skillbar-title {
  color: #2f3985;
}

.perc-title-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.perc-title-wrapper p {
  color: white;
  background-color: #999999;
  font-size: 13px;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  margin-bottom: 5px;
  border-radius: 5px;
}

#waves-svg {
  background-image: url("../images/waves.svg");
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 0px;
  padding-top: 0px;
  width: 100%;
  height: 180px;
}

.skillbar {
  position: relative;
  display: block;
  width: 100%;
  background-color: #c9ccd4;
  margin-bottom: 15px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -webkit-transition: 0.4s linear;
  transition: 0.4s linear;
  -webkit-transition-property: width, background-color;
  transition-property: width, background-color;
}

.skillbar-bar {
  height: 3px;
  width: 0%;
  background: #f6391c;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

@media (max-width: 500px) {
  .neogation-img-div {
    margin-bottom: 50px;
  }
}

@media (max-width: 700px) {
  .neogation-img-div {
    margin-bottom: 60px;
  }
}

@media (min-height: 1000px) {
  .neogation-img-div {
    margin-right: 50px;
  }
  .neogation-img-div img {
    width: 400px;
    height: 400px;
  }
}

@media (min-height: 1000px) and (min-width: 1000px) {
  .neogation-img-div img {
    width: 500px;
    height: 500px;
  }
}
/*# sourceMappingURL=progress.css.map */