/* ====================
  About Section
=======================*/
.about-section.fix {
  background: url(../images/about.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.about-section .about-items {
  padding: 100px 0;
}

.about-img {
  height: 373px;
  position: relative;
}


.site-btn.border {
  background: transparent;
  border: 1px solid #f35b68;
  z-index: 2;
}

.progress-bars {
  padding-top: 90px;
}

.single-progress-item {
  margin-bottom: 20px;
  position: relative;
}

.single-progress-item p {
  font-size: 14px;
  text-transform: capitalize;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  color: #252525;
}

.progress-bar-style {
  display: block;
  height: 12px;
  position: relative;
  width: 100%;
  border-radius: 25px;
  background: #ddd;
}

.bar-inner {
  position: absolute;
  height: 12px;
  left: 0;
  top: 0;
}

.bar-inner span {
  position: absolute;
  right: 0;
  font-weight: bold;
  top: -30px;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #000;
}

.about-items {
    position: relative;
    padding:70px 20px 80px 0;
    background-color: rgb( 22, 28, 44 );
    opacity: 0.929;
}
.about-items:before {
    content: "";
    background-color:  rgb( 22, 28, 44 );
    position: absolute;
    height: 100%;
    width: 200%;
    left: -100%;
    z-index: -1;
    top: 0;
    right: 0;
}
.about-items:after {
    content: "";
    background-color: rgb( 22, 28, 44 );
    position: absolute;
    height: 100%;
    width: 230px;
    z-index: -1;
    top: 0;
    right: -100px;
    transform: skew(-12deg);
}


.about-items h4 {
  color: #f7f7f7;
  font-size: 42px;
  position: relative;
}
.about-items h4:after {
  position: absolute;
  content: "";
  width: 115px;
  height: 2px;
  left: 0px;
 bottom: -23px;;
  background: #fff;
}

.about-items h2 {
  line-height: 1.5;
  width: 436px;
  padding: 40px 0px 30px 0px;
 color: #ffaf53;
  font-size: 24px;
}

.about-items p {
  color: #ffcb7a;
  margin-bottom: 17px;
  width: 680px;
  font-size: 16px;
  line-height: 1.5;
}

.sag01 {
  padding-right: 10px;
}
.sag02 {
  padding-right: 40px;
}
.sag03 {
  padding-right: 80px;
}
.sag04 {
  padding-right: 80px;
}
.sag05 {
  padding-right: 140px;
}

@media only screen and (max-width: 767px) {
    .about-items p {
		width: 480px;
	}
	.sag01 {
		padding-right: 0px;
	}
	.sag02 {
		padding-right: 0px;
	}
	.sag03 {
		padding-right: 0px;
	}
	.sag04 {
		padding-right: 0px;
	}
	.sag05 {
		padding-right: 0px;
	}
}
@media only screen and (max-width: 1200px) {
    .about-items p {
		width: 480px;
	}
	.sag01 {
		padding-right: 0px;
	}
	.sag02 {
		padding-right: 0px;
	}
	.sag03 {
		padding-right: 0px;
	}
	.sag04 {
		padding-right: 0px;
	}
	.sag05 {
		padding-right: 0px;
	}
}

/* ====================
  About2 Section
=======================*/
.about-section2.fix2 {
  background: url(../images/about.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.about-section2 .about-items2 {
  padding: 100px 0;
}

.about-items2 {
    position: relative;
    padding:70px 20px 80px 0;
    background-color: rgb( 22, 28, 44 );
    opacity: 0.929;
}
.about-items2:before {
    content: "";
    background-color:  rgb( 22, 28, 44 );
    position: absolute;
    height: 100%;
    width: 200%;
    right: -100%;
    z-index: -1;
    top: 0;
    left: 0;
}
.about-items2:after {
    content: "";
    background-color: rgb( 22, 28, 44 );
    position: absolute;
    height: 100%;
    width: 230px;
    z-index: -1;
    top: 0;
    left: -100px;
    transform: skew(-12deg);
}

.about-items2 h4 {
  color: #f7f7f7;
  font-size: 42px;
  position: relative;
}
.about-items2 h4:after {
  position: absolute;
  content: "";
  width: 115px;
  height: 2px;
  left: 50px;
  bottom: -23px;
  background: #e0af63
}

.about-items2 h2 {
  line-height: 1.5;
  width: 436px;
  padding: 40px 0px 30px 0px;
  color: #ffaf53;
  font-size: 24px;
}

.about-items2 p {
  color: #ffcb7a;
  margin-bottom: 17px;
  width: 680px;
  font-size: 16px;
  line-height: 1.5;
}

.sol01 {
  margin-left: 10px;
}
.sol02 {
  margin-left: -15px;
}
.sol03 {
  margin-left: -30px;
}
.sol04 {
  margin-left: -45px;
}
.sol05 {
  margin-left: -60px;
}
.sol06 {
  margin-left: -75px;
}

@media only screen and (max-width: 767px) {
    .sol01 {
	margin-left: 10px;
	}
	.sol02 {
	margin-left: 10px;
	}
	.sol03 {
	margin-left: 10px;
	}
	.sol04 {
	margin-left: 10px;
	}
	.sol05 {
	margin-left: 10px;
	}
	.sol06 {
	margin-left: 10px;
	}
}
@media only screen and (max-width: 1200px) {
    .sol01 {
	margin-left: 10px;
	}
	.sol02 {
	margin-left: 10px;
	}
	.sol03 {
	margin-left: 10px;
	}
	.sol04 {
	margin-left: 10px;
	}
	.sol05 {
	margin-left: 10px;
	}
	.sol06 {
	margin-left: 10px;
	}
}