.bgcolor-24{
    background: #242424;
}

.bg-img {
  background: no-repeat center center;
  background-size: cover
}
.bgcolor-shore {
    background: #70e1f5;
    background: -webkit-linear-gradient(to bottom, #ffd194, #70e1f5);
    background: linear-gradient(to bottom, #ffd194, #70e1f5);
}
.bg-img.bg-img-top {
  background-position: top center
}
.content-items-center {
  align-items: center;
  display: flex
}
.justify-items-center {
  display: flex;
  justify-content: center
}
.wrapper .main-content {
  overflow-x: hidden
}

@keyframes la-rotateplane {
  0% {
    transform: perspective(120px) rotateX(0) rotateY(0)
  }
  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0)
  }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg)
  }
}
.about-area.about-default-area {
  padding: 140px 0
}
@media only screen and (max-width:1399px) {
  .about-area.about-default-area {
    padding: 125px 0
  }
}
@media only screen and (max-width:1199px) {
  .about-area.about-default-area {
    padding: 100px 0 80px
  }
}
@media only screen and (max-width:767px) {
  .about-area.about-default-area {
    padding: 70px 0 50px
  }
}

.about-area .about-content {
  padding: 0px;
  position:relative;
}
@media only screen and (min-width:1199px) {
.about-area .about-content {
  padding: 0 0 0 70px;
}
}
@media only screen and (min-width:1400px) {
  .about-area .about-content {
    margin-right: -50px
  }
}
@media only screen and (max-width:1399px) {
  .about-area .about-content {
    padding: 47px 0 0 0
  }
}
@media only screen and (max-width:1199px) {
  .about-area .about-content {
    padding: 0
  }
}
.about-area .about-content .section-title {
  margin-bottom: 45px
}
.about-area .about-content .section-title .title {
  padding-right: 20px
}
.about-area .about-content .section-title p {
  font-size: var(--font-size);
  font-weight: 500;
  line-height: 1.648;
  font-weight: 400
}
.about-inner {
  background: #fff;
  position: relative;
  padding: 15px 15px 15px 100px;
  margin: 0 0 30px 0;
  border-radius: 8px;
  text-align: left;
  webkit-transition: .3s all cubic-bezier(.4, 0, .2, 1);
  transition: .3s all cubic-bezier(.4, 0, .2, 1);
  display: flex;
  min-height: 200px;
  align-items: center
}
.about-inner:hover {
  box-shadow: rgb(0 0 0 / 25%) 0 25px 50px -12px
}
.about-inner span {
  margin: 10px 0;
  font-weight: 700;
  color: #6583fe;
    font-size: var(--font-lg-size);
}
.about-inner .about-icon {
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100px;
  height: 100px;
  line-height: 80px;
  text-align: center
}
.about-icon img {
  max-width: 55px;
  max-height: 75px
}
@media only screen and (max-width:767px) {
  .about-area .about-content .section-title p {
    font-size: var(--font-size);
  }
}
@media only screen and (max-width:479.98px) {
  .about-area .about-content .section-title p {
    font-size: var(--font-size);
  }
}
.about-area .about-content .section-title p span {
  color: #fd9704;
  text-decoration: underline
}
.about-area .about-content-style2 {
  padding: 0 0 0 70px
}
.about-area .about-content-style2 ul {
  list-style: none;
	margin: 0px;
	padding: 0px;
}
.about-area .about-content-style2 ul li {
  line-height: 1.25;
  margin-bottom: .75rem;
  position: relative;
	padding-left: 25px;
  font-size: var(--font-size);
}
.about-area .about-content-style2 ul li:before {
  font-family: var(--font-awesome);
  position: absolute;
  top: 0px;
  left: 0px;
  font-size: var(--font-size);
  color: #32cd32;
  content: "\e802"
}
@media only screen and (max-width:1399px) {
  .about-area .about-content-style2 {
    padding: 7px 0 0 30px
  }
}
@media only screen and (max-width:767px) {
  .about-area .about-content-style2 {
    padding: 0
  }
}
.about-area .about-content-style2 .section-title {
  margin-bottom: 44px;
  margin-right: -43px
}
@media only screen and (max-width:767px) {
  .about-area .about-content-style2 .section-title {
    margin-right: 0
  }
}
.about-area .about-content-style2 .section-title .title {
  line-height: 1.2;
  margin-bottom: 18px
}
.about-area .about-content-style2 .section-title .title span {
  color: #0e62ac;
  font-weight: 300
}
@media only screen and (max-width:991px) {
  .about-area .about-content-style2 .section-title .title span {
    z-index: auto
  }
}
.about-area .about-content-style2 .section-title .title span:after {
  background-color: #dff3e8
}
.about-area .about-content-style2 .inner-content {
  background-color: #f6f7fc;
  margin-right: -6px;
  padding: 51px 0 54px 0;
  position: relative
}
.about-area .about-content-style2 .inner-content:before {
  background-color: #f6f7fc;
  content: "";
  height: 100%;
  left: -49px;
  position: absolute;
  top: 0;
  width: 49px;
  border-radius: 15px 0 0 15px
}
.about-area .about-content-style2 .inner-content.service-inner-content:before {
  border-radius: 0
}
@media only screen and (max-width:1399px) {
  .about-area .about-content-style2 .inner-content:before {
    left: -25px;
    z-index: -1
  }
}
.about-area .about-content-style2 .inner-content:after {
  background-color: #f6f7fc;
  content: "";
  height: 100%;
  left: 100%;
  position: absolute;
  top: 0;
  width: calc(100% + 400px)
}
.about-area .about-content-style2 .inner-content p {
  margin-bottom: 14px;
  font-size: var(--font-size);
}
.about-area .about-content-style2 .inner-content p .text-block {
  color: #121421;
  font-size: 60px;
  font-weight: 700;
  float: left;
  line-height: 54px;
  padding-right: 10px;
  position: relative;
  top: 1px
}
.about-area .about-content-style2 .inner-content .inline-style {
  align-items: center;
  display: flex;
  margin-top: 40px;
  position: relative;
  z-index: 1
}
@media only screen and (max-width:767px) {
  .about-area .about-content-style2 .inner-content .inline-style {
    display: block
  }
}
.about-area .about-content-style2 .inner-content .inline-style .btn-theme.btn-border {
  padding: 19.5px 58.5px 19.5px 35px
}
@media only screen and (max-width:767px) {
  .about-area .about-content-style2 .inner-content .inline-style .btn-theme.btn-border {
    margin-bottom: 40px
  }
}
.about-area .about-content-style2 .inner-content .inline-style .btn-theme.btn-border .icon {
  right: 30px
}
.about-area .about-content-style2 .inner-content .btn-play {
  color: #0e62ac;
  display: inline-block;
  font-size: var(--font-size);
  font-weight: 700;
  margin-left: 20px
}
@media only screen and (max-width:767px) {
  .about-area .about-content-style2 .inner-content .btn-play {
    margin-left: 10px
  }
}
.about-area .about-content-style2 .inner-content .btn-play .icon {
  background-color: #0e62ac;
  border-radius: 50%;
  display: inline-block;
  height: 73px;
  line-height: 71px;
  margin-right: 25px;
  position: relative;
  text-align: center;
  width: 73px;
  z-index: 3
}
.about-area .about-content-style2 .inner-content .btn-play .icon:after {
  background-color: #0e62ac;
  border-radius: 50%;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
  animation: animation-scale 1.8s infinite;
  -webkit-animation: animation-scale 1.8s infinite
}
.about-area .about-content-style2 .text-shape {
  bottom: 28px;
  position: absolute;
  right: 0;
  pointer-events: none
}
@media only screen and (max-width:1199px) {
  .about-area .about-content-style2 .text-shape {
    bottom: 0
  }
}
@media only screen and (max-width:767px) {
  .about-area .about-content-style2 .text-shape {
    display: none
  }
}
.about-area .about-content-style2 .text-shape img {
  max-width: none
}
.about-area .layer-style {
  position: relative;
  margin-left: -78px
}
@media (max-width:1499px) {
  .about-area .layer-style {
    margin-left: -45px
  }
}
@media only screen and (max-width:1399px) {
  .about-area .layer-style {
    margin-left: 0
  }
}
@media only screen and (max-width:1199px) {
  .about-area .layer-style {
    margin-top: 30px
  }
}
@media only screen and (max-width:991px) {
  .about-area .layer-style {
    display: inline-flex;
    justify-content: center;
    margin-bottom: 100px;
    margin-top: 40px
  }
}
@media only screen and (max-width:767px) {
  .about-area .layer-style {
    margin-top: 0
  }
}
.about-area .layer-style .thumb img {
  width: 100%
}
@media only screen and (max-width:1399px) {
  .about-area .layer-style .thumb img {
    max-width: 100%
  }
}
.about-area .layer-style .shape-style1 {
  left: 0;
  position: absolute;
  top: -45px;
  z-index: -1
}
@media only screen and (max-width:1399px) {
  .about-area .layer-style .shape-style1 {
    left: -40px
  }
}
@media only screen and (max-width:991px) {
  .about-area .layer-style .shape-style1 {
    left: -47px
  }
}
@media only screen and (max-width:767px) {
  .about-area .layer-style .shape-style1 {
    display: none
  }
}
@media only screen and (max-width:1399px) {
  .about-area .layer-style .shape-style1 img {
    width: 95%
  }
}
@media only screen and (max-width:991px) {
  .about-area .layer-style .shape-style1 img {
    width: 100%
  }
}
.about-area .layer-style .shape-style2 {
  bottom: -255px;
  left: -50px;
  position: absolute;
  z-index: -1
}
@media only screen and (max-width:991px) {
  .about-area .layer-style .shape-style2 {
    bottom: -95px
  }
}
.about-area .layer-style .experience-time {
  border-radius: 10px;
  top: calc(100% + 20px);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1
}
.about-area .layer-style .experience-time .content {
  background-color: #0e62ac;
  color: #fff;
  font-size: var(--font-xl-size);
  font-weight: 300;
  height: auto;
  border-radius: 40px;
  line-height: 1;
  padding: 15px 25px;
  position: relative;
  text-align: center
}
.about-area .layer-about-style {
  position: relative
}
@media only screen and (max-width:1199px) {
  .about-area .layer-style .experience-time .content {
    font-size: var(--font-size);
  }
  .about-area .layer-about-style {
    margin-bottom: 80px
  }
}
@media only screen and (max-width:767px) {
  .about-area .layer-about-style {
    margin-bottom: 60px
  }
}
.about-area .layer-about-style .thumb img {
  width: 100%
}
.about-area .layer-about-style .shape-style1 {
  left: -81px;
  position: absolute;
  top: 90px;
  animation: animation-five linear infinite 5s
}
@media only screen and (max-width:575px) {
  .about-area .layer-about-style .shape-style1 {
    display: none
  }
}
.about-area .layer-about-style .experience-time {
  bottom: 40px;
  position: absolute;
  right: 40px;
  z-index: 1
}
@media only screen and (max-width:575px) {
  .about-area .layer-about-style .experience-time {
    bottom: 15px;
    right: 15px
  }
}
.about-area .layer-about-style .experience-time .content {
  background-color: #0e62ac;
  color: #fff;
  font-size: 127.58px;
  font-weight: 700;
  height: 305px;
  line-height: 1px;
  padding: 111px 15px 15px;
  position: relative;
  text-align: center;
  width: 273px
}
@media only screen and (max-width:575px) {
  .about-area .layer-about-style .experience-time .content {
    font-size: 64px;
    height: 200px;
    padding: 60px 15px 5px;
    width: 200px
  }
}
.about-area .layer-about-style .experience-time .content:before {
  background-color: #fff;
  content: "";
  height: 305px;
  left: -20px;
  position: absolute;
  top: -20px;
  width: 273px;
  z-index: -1
}
@media only screen and (max-width:575px) {
  .about-area .layer-about-style .experience-time .content:before {
    height: 200px;
    left: -10px;
    top: -10px;
    width: 200px
  }
}
.about-area .layer-about-style .experience-time .content span {
  display: inline-block;
  font-size: 20px;
  font-weight: 500;
  line-height: 20px;
  padding-top: 5px
}
.about-page-wrapper .about-area {
  padding: 80px 0
}
@media only screen and (max-width:1199px) {
  .about-page-wrapper .about-area {
    padding: 60px 0
  }
}
@media only screen and (max-width:767px) {
  .about-page-wrapper .about-area {
    padding: 50px 0
  }
}
.about-page-wrapper .team-area {
  padding: 142px 0 123px
}
@media only screen and (max-width:1199px) {
  .about-page-wrapper .team-area {
    padding: 100px 0 80px
  }
}
@media only screen and (max-width:991px) {
  .about-page-wrapper .team-area {
    padding: 90px 0 60px
  }
}
@media only screen and (max-width:767px) {
  .about-page-wrapper .team-area {
    padding: 70px 0 50px
  }
}
@media only screen and (max-width:575px) {
  .about-page-wrapper .team-area {
    padding: 70px 0 40px
  }
}
@media only screen and (max-width:1199px) {
  .about-page-wrapper .team-area .section-title {
    margin-bottom: 30px
  }
}
@media only screen and (max-width:767px) {
  .about-page-wrapper .team-area .section-title {
    margin-bottom: 10px
  }
}
.pm-button {
  margin-top: 15px
}
.pm-button img {
  margin-bottom: 15px;
  display: block
}
.pm-button span img {
  color: #fff;
  width: 60%;
  padding: 0;
  margin: 0
}
.pm-button a {
  background-image: linear-gradient(to right, #ece9e6 0, #fff 51%, #ece9e6 100%);
  margin: 10px 0;
  padding: 8px 25px;
  text-align: center;
  text-transform: uppercase;
  transition: .5s;
  background-size: 200% auto;
  color: #0f62ac;
  border-radius: 4px;
  display: inline-block
}
.pm-button a:hover {
  background-position: right center;
  text-decoration: none
}
.programe-inner {
  text-align: left;
  padding: 15px;
  border: 1px solid #eee;
  margin-bottom: 25px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
  position: relative;
  background: #fff
}
.programe-inner span {
  margin: 10px 0;
  font-weight: 700;
  font-size:22px;
  display:block;
}
.programe-inner:nth-last-child(4) {
  border-right: none
}
.programe-icon {
  position: relative;
  z-index: 1
}
.programe-icon img {
  max-width: 200px
}
.about-content {
  padding: 0 65px
}
.about-text-2 {
  padding: 70px 0;
  position: relative;
  background: url(https://www.kdrsoft.com/assets/img/service-bg.webp);
  background-size: cover
}
.service-section-2 {
  margin-top: 140px;
  padding: 0 0 65px 0;
  background-size: cover;
  background-repeat: no-repeat
}
.about-img1 {
  background: #ada996;
  background: -webkit-linear-gradient(to left, #eaeaea, #dbdbdb, #f2f2f2, #ada996);
  background: linear-gradient(to left, #eaeaea, #dbdbdb, #f2f2f2, #ada996);
  display: block;
  padding: 35px;
  border-radius: 10px;
  margin: 25px;
  text-align: center
}
.about-img {
  display: block;
  padding: 5px;
  border-radius: 10px;
  margin: 30px 25px;
  text-align: center
}
.about-img1 img {
  max-width: 100%;
  max-height: 520px
}
@media (max-width:1200px) {
  .about-content {
    padding: 0 15px
  }
}
.about-area-content {
  padding: 70px 0
}

  .about-padding-50 {
      padding:50px 20px;
  }
@media only screen and (min-width:1199px) {
  .about-padding-50 {
      padding:50px;
  }
}