/*================================================
EA Progress Bar Area CSS
=================================================*/
.ea-progress-bar-area.style-two {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  position: relative;
  z-index: 1;
}

.ea-progress-bar-area.style-two::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  opacity: 0.8;
  z-index: -1;
}

.ea-progress-bar-area.style-three {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  position: relative;
  z-index: 1;
}

.ea-progress-bar-area.style-three::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  opacity: 0.8;
  z-index: -1;
}

.ea-progress-bar-area.style-three::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background-color: var(--whiteColor);
  z-index: -1;
}

.ea-progress-bar-area.style-five {
  position: relative;
  z-index: 1;
}

.ea-progress-bar-area.style-five::before {
  content: "";
  position: absolute;
  top: 268px;
  left: -30%;
  width: 100%;
  height: 398px;
  background-color: #f9efef;
  z-index: -1;
  border-radius: 0 100px 100px 0;
}

.ea-progress-bar-content {
  margin-bottom: 20px;
}

.ea-progress-bar-content .top-title {
  color: #7aca76;
  display: block;
  font-size: 16px;
  margin-bottom: 10px;
}

.ea-progress-bar-content .ea-title {
  margin-bottom: 15px;
}

.ea-progress-bar-content h2 {
  font-size: 36px;
}

.ea-progress-bar-content.style-two .top-title {
  color: var(--whiteColor);
}

.ea-progress-bar-content.style-two .ea-title {
  color: var(--whiteColor);
}

.ea-progress-bar-content.style-two p {
  color: var(--whiteColor);
}

.ea-all-skill-bar .skill-bar {
  margin-bottom: 20px;
}

.ea-all-skill-bar .skill-bar .progress-title-holder {
  position: relative;
}

.ea-all-skill-bar .skill-bar .progress-title {
  font-size: 16px;
  font-weight: normal;
}

.ea-all-skill-bar .skill-bar .progress-number-wrapper {
  width: 100%;
  z-index: 10;
  font-size: 11px;
  line-height: 24px;
  height: 24px;
  letter-spacing: 0px;
  font-weight: 600;
  font-style: normal;
  text-transform: none;
  color: var(--whiteColor);
}

.ea-all-skill-bar .skill-bar .progress-number-mark {
  margin-bottom: 0;
  border-radius: 3px;
  color: var(--blackColor);
  padding: 0 8px;
  position: absolute;
  bottom: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  font-size: 16px;
  font-weight: normal;
}

.ea-all-skill-bar .skill-bar .down-arrow {
  border: 1px solid var(--mainColor);
  position: absolute;
  left: 50%;
  top: 88%;
  height: 35px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: none;
}

.ea-all-skill-bar .skill-bar .progress-content-outter {
  height: 6px;
  background-color: #e1e0e7;
}

.ea-all-skill-bar .skill-bar .progress-content {
  height: 6px;
  background-color: #7aca76;
  width: 0%;
}

.ea-all-skill-bar.style-two .skill-bar .progress-content {
  background: -webkit-gradient(linear, left top, right top, from(#e16d42), to(#ff9f59));
  background: linear-gradient(to right, #e16d42, #ff9f59);
}

.ea-all-skill-bar.style-two .skill-bar .progress-title {
  color: var(--whiteColor);
}

.ea-all-skill-bar.style-two .skill-bar .progress-number-mark {
  color: var(--whiteColor);
}

.ea-all-skill-bar.style-three .skill-bar .progress-content {
  background-color: #00a5f8;
  height: 3px;
}

.ea-all-skill-bar.style-three .skill-bar .progress-content-outter {
  height: 3px;
}

.ea-all-skill-bar.style-three .skill-bar .down-arrow {
  display: block;
  border-color: #00a5f8;
  -webkit-transform: rotate(20deg);
          transform: rotate(20deg);
  left: 45%;
  top: 72%;
}

.ea-all-skill-bar.style-four .skill-bar .progress-content {
  background-color: #cda78f;
}

.ea-all-skill-bar.style-four .skill-bar .progress-title {
  color: var(--blackColor);
}

.ea-all-skill-bar.style-four .skill-bar .progress-number-mark {
  color: #fff7f2;
}

.ea-all-skill-bar.style-five {
  background-color: #f9efef;
}

.ea-all-skill-bar.style-five .skill-bar {
  margin-bottom: 30px;
}

.ea-all-skill-bar.style-five .skill-bar .progress-content {
  background-color: #f64a4a;
  height: 25px;
}

.ea-all-skill-bar.style-five .skill-bar .progress-content-outter {
  height: 25px;
  background-color: #f8bdbd;
}

.ea-all-skill-bar.style-five .skill-bar .down-arrow {
  display: none;
}

.ea-all-skill-bar.style-five .skill-bar .progress-title {
  position: absolute;
  top: 3px;
  left: 10px;
  color: var(--whiteColor);
}

.ea-all-skill-bar.style-five .skill-bar .progress-number-mark {
  top: 1px;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  color: var(--whiteColor);
}

.ea-progress-bar-img-two {
  margin-left: 30px;
  position: relative;
  z-index: 1;
}

.ea-progress-bar-area.style-six .progress-bar-img-two {
  margin-bottom: 30px;
}

.ea-progress-bar-area.style-six .progress-bar-img-two img {
  display: block;
  margin: 0 auto;
}

.ea-progress-bar-img-two .progress-bar-shape {
  position: absolute;
  top: -100px;
  right: -100px;
  z-index: -1;
}

.ea-progres-and-content-wrap {
  padding: 100px;
  background-color: #fff7f2;
}

.progress-bar {
  background-color: #ffffff !important;
  margin: auto;
}

.progress-bar div span {
  background-color: #fcf0ec;
  color: #e16d42;
}

.progress-bar div span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 5px solid #fff;
  border-radius: 50%;
}

.progress-bar .rotate {
  background-color: #e16d42 !important;
}

.progress-bar .right {
  background-color: #e16d42 !important;
}

.progress-bar .background {
  background-color: #fcf0ec !important;
}

.progress-bar .left {
  background-color: #fcf0ec !important;
}

.progress-bar.color-f1faf1 .background {
  background-color: #f1faf1 !important;
}

.progress-bar.color-f1faf1 .left {
  background-color: #f1faf1 !important;
}

.progress-bar.color-f1faf1 .right {
  background-color: #7aca76 !important;
}

.progress-bar.color-f1faf1 .rotate {
  background-color: #7aca76 !important;
}

.progress-bar.color-f1faf1 div span {
  background-color: #f1faf1 !important;
  color: #7aca76;
}

.progress-bar.color-f2effc .background {
  background-color: #f2effc !important;
}

.progress-bar.color-f2effc .left {
  background-color: #f2effc !important;
}

.progress-bar.color-f2effc .right {
  background-color: #8361e3 !important;
}

.progress-bar.color-f2effc .rotate {
  background-color: #8361e3 !important;
}

.progress-bar.color-f2effc div span {
  background-color: #f2effc !important;
  color: #8361e3;
}

.progress-bar.color-fcfaec .background {
  background-color: #fcfaec !important;
}

.progress-bar.color-fcfaec .left {
  background-color: #fcfaec !important;
}

.progress-bar.color-fcfaec .right {
  background-color: #e6d142 !important;
}

.progress-bar.color-fcfaec .rotate {
  background-color: #e6d142 !important;
}

.progress-bar.color-fcfaec div span {
  background-color: #fcfaec !important;
  color: #e6d142;
}

.progress-bar.color-e5f6fe .background {
  background-color: #e5f6fe !important;
}

.progress-bar.color-e5f6fe .left {
  background-color: #e5f6fe !important;
}

.progress-bar.color-e5f6fe .right {
  background-color: #00a5f8 !important;
}

.progress-bar.color-e5f6fe .rotate {
  background-color: #00a5f8 !important;
}

.progress-bar.color-e5f6fe div span {
  background-color: #e5f6fe !important;
  color: #00a5f8;
}

.progress-content span {
  display: block;
  text-align: center;
  margin-top: 10px;
}