.main-page-wrapper {
  padding-top: 120px;
  /*background: #b4d8ff;
  background: linear-gradient(
    180deg,
    rgba(180, 216, 255, 1) 0%,
    rgba(255, 255, 255, 1) 24%
  );*/
  background-image: url("../images/bodybg.png");
  background-position: top left;
  background-repeat: repeat-x;
}
.hero {
  padding: 48px 0;
}
.herodata {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 7%;
}
.herobgimg {
  display: flex;
  justify-content: end;
}

.journey-sec {
  padding: 48px 0;
  /*background-color: #f9f0e5;*/
  background-color: transparent;
  background-image: url("../images/journey-bg.png");
  background-position: center right;
  background-repeat: no-repeat;
  background-size: cover;
}

.journeywrap {
  display: flex;
  gap: 20px;
  color: #1b2533;
}
.joleft {
  display: flex;
  width: 15%;
}
.joright {
  display: flex;
  gap: 20px;
  width: 85%;
}
.journeywrap .i-badge {
  background-color: #fff;
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 20px;
  padding: 3px;
  vertical-align: middle;
  margin-right: 10px;
  margin-top: 6px;
}
.journeywrap .i-badge i {
  background-color: #ed6a2c;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 20px;
}
.jobox {
  width: 25%;
  font-size: 14px;
  line-height: 16px;
}
.jobox {
  width: 25%;
  font-size: 14px;
  line-height: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.jobox .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
}
.jobox h2 {
  font-size: 44px;
  line-height: 44px;
}
.jobox p {
  margin-bottom: 0;
}
.jobox .impact-counter,
.jobox .suffix {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.jobox .suffix {
  font-size: 20px;
  line-height: 22px;
}

.pillars-sec {
  gap: 48px;
  background: linear-gradient(180deg, #f4f8ff 0%, #ffffff 33.14%);
}
.pillars-lead {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}
.cardwrap {
  padding: 12px;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0px 4.18px 16.71px 0px #677fb91a;
  color: #445164;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.carddatawrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px 16px 80px;
}
.cardwrap .cardbott-hr {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: absolute;
  left: 20px;
  bottom: 20px;
  width: calc(100% - 40px);
}
.cardwrap .carddata {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cardwrap .cardbott {
  display: flex;
  gap: 20px;
}
.cardwrap p {
  margin-bottom: 0;
}
.cardwrap .aplogo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 20px;
  border-left: 1px solid #adb5c2;
  height: 30px;
}
.cardwrap .aplogo:first-child {
  padding-left: 0px;
  border-left: 0px solid #adb5c2;
}
.cardwrap .aplogo img {
  max-height: 28px;
  max-width: 215px;
}
.cardwrap .aplogo .golink {
  display: block;
  width: 24px;
  height: 24px;
  border: 1px solid #697483;
  border-radius: 40px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.0254 5.22256C10.8715 5.22256 10.7239 5.2837 10.6151 5.39252C10.5063 5.50135 10.4451 5.64894 10.4451 5.80285V8.70427C10.4451 9.16597 10.2617 9.60876 9.93524 9.93524C9.60876 10.2617 9.16597 10.4451 8.70427 10.4451H2.90142C2.43972 10.4451 1.99693 10.2617 1.67045 9.93524C1.34398 9.60876 1.16057 9.16597 1.16057 8.70427V2.90142C1.16057 2.43972 1.34398 1.99693 1.67045 1.67045C1.99693 1.34398 2.43972 1.16057 2.90142 1.16057H5.80285C5.95675 1.16057 6.10434 1.09943 6.21317 0.990608C6.32199 0.881783 6.38313 0.734186 6.38313 0.580284C6.38313 0.426383 6.32199 0.278786 6.32199 0.169961C6.10434 0.0611369 5.95675 0 5.80285 0H2.90142C2.1322 0.000921409 1.39475 0.306902 0.850825 0.850825C0.306902 1.39475 0.000921409 2.1322 0 2.90142V8.70427C0.000921409 9.47349 0.306902 10.2109 0.850825 10.7549C1.39475 11.2988 2.1322 11.6048 2.90142 11.6057H8.70427C9.47349 11.6048 10.2109 11.2988 10.7549 10.7549C11.2988 10.2109 11.6048 9.47349 11.6048 8.70427V5.80285C11.6048 5.64894 11.5436 5.50135 11.4348 5.39252C11.326 5.2837 11.1784 5.22256 11.0245 5.22256Z' fill='%23697483'/%3E%3Cpath d='M11.0254 0H8.124C7.9701 0 7.8225 0.0611369 7.71368 0.169961C7.60485 0.278786 7.54371 0.426383 7.54371 0.580285C7.54371 0.734186 7.60485 0.881783 7.71368 0.990608C7.8225 1.09943 7.9701 1.16057 8.124 1.16057H9.62461L7.13345 3.65173C7.07803 3.70526 7.03382 3.76929 7.00341 3.84009C6.973 3.91089 6.95699 3.98703 6.95632 4.06408C6.95565 4.14113 6.97033 4.21754 6.99951 4.28886C7.02869 4.36017 7.07178 4.42496 7.12626 4.47945C7.18075 4.53393 7.24553 4.57702 7.31685 4.60619C7.38816 4.63537 7.46458 4.65005 7.54163 4.64939C7.61868 4.64872 7.69482 4.63271 7.76562 4.6023C7.83641 4.57188 7.90045 4.52768 7.95398 4.47225L10.4451 1.98109V3.48171C10.4451 3.63561 10.5063 3.78321 10.6151 3.89203C10.7239 4.00085 10.8715 4.06199 11.0254 4.06199C11.1793 4.06199 11.3269 4.00085 11.4357 3.89203C11.5446 3.78321 11.6057 3.63561 11.6057 3.48171V0.580285C11.6057 0.426383 11.5446 0.278786 11.4357 0.169961C11.3269 0.0611369 11.1793 0 11.0254 0Z' fill='%23697483'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  text-indent: -9999px;
}
.cardwrap .aplogo .golink:hover {
  border-color: var(--secondary-color);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23f98613' d='M11.03 5.22c-.15 0-.3.06-.41.17-.11.11-.17.26-.17.41v2.9c0 .46-.18.9-.51 1.23-.33.33-.77.51-1.23.51H2.9c-.46 0-.9-.18-1.23-.51-.33-.33-.51-.77-.51-1.23V2.9c0-.46.18-.9.51-1.23.33-.33.77-.51 1.23-.51h2.9c.15 0 .3-.06.41-.17.11-.11.17-.26.17-.41s-.06-.3-.17-.41c-.11-.11-.26-.17-.41-.17h-2.9c-.77 0-1.51.31-2.05.85C.31 1.39 0 2.13 0 2.9v5.8c0 .77.31 1.51.85 2.05.54.54 1.28.85 2.05.85h5.8c.77 0 1.51-.31 2.05-.85.54-.54.85-1.28.85-2.05v-2.9c0-.15-.06-.3-.17-.41-.11-.11-.26-.17-.41-.17Z'/%3E%3Cpath fill='%23f98613' d='M11.03 0h-2.9c-.15 0-.3.06-.41.17-.11.11-.17.26-.17.41s.06.3.17.41c.11.11.26.17.41.17h1.5L7.14 3.65c-.06.05-.1.12-.13.19-.03.07-.05.15-.05.22 0 .08.01.15.04.22.03.07.07.14.13.19.05.05.12.1.19.13.07.03.15.04.22.04.08 0 .15-.02.22-.05.07-.03.13-.07.19-.13l2.49-2.49v1.5c0 .15.06.3.17.41.11.11.26.17.41.17s.3-.06.41-.17c.11-.11.17-.26.17-.41V.58c0-.15-.06-.3-.17-.41-.11-.11-.26-.17-.41-.17Z'/%3E%3C/svg%3E");
}

.commoneco-sec {
  gap: 48px;
  background: linear-gradient(180deg, #f4f8ff 0%, #ffffff 33.14%);
}
.commoneco-sec .main-btn {
  padding: 8px 24px;
  font-size: 14px;
  line-height: 24px;
}
.commoneco-sec2 {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.commoneco-sec .commoneco-data {
  max-width: 510px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 0;
}
.commoneco-sec .picture-box {
  box-shadow: 0px 4.18px 16.71px 0px #677fb91a;
  border-radius: 20px;
}
.commoneco-sec .sublogo img {
  max-height: 48px;
}
.commoneco-sec .commoneco-para {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.commoneco-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 48px;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0px 4.18px 16.71px 0px #677fb926;
}
.commoneco-card .commoneco-data {
  padding: 0;
}

@media (min-width: 992px) {
}
@media (min-width: 1200px) {
}
@media (min-width: 1300px) {
}
@media (min-width: 1600px) {
}

@media (max-width: 991px) {
  .main-page-wrapper {
    background-image: url(../images/bodybg-mob.png);
  }
  .hero {
    padding: 40px 0;
  }
  .herodata {
    padding-left: 0;
  }
  .hero-row {
    gap: 40px;
  }
  .herobgimg {
    justify-content: center;
  }
  .journey-sec {
    background-color: #f9f0e5;
    background-image: none;
  }
  .journeywrap {
    gap: 24px;
    flex-direction: column;
  }
  .joleft {
    width: 100%;
  }
  .joright {
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
  }
  .jobox {
    width: 45%;
    gap: 10px;
  }
  .commoneco-sec2 {
    gap: 48px;
  }
  .pillars-sec {
    background: #f4f8ff;
  }
  .pillars-lead {
    text-align: left;
  }
  .carddatawrap {
    padding: 16px;
  }
  .cardwrap .cardbott-hr {
    position: relative;
    left: 0;
    bottom: inherit;
    width: 100%;
    gap: 16px;
  }
  .cardwrap .cardbott {
    width: 100%;
    position: relative;
    left: 0;
    flex-direction: column;
    gap: 16px;
  }
  .cardwrap .aplogo {
    height: inherit;
    padding-left: 0;
    border-left: 0px;
  }
  .commoneco-sec .commoneco-data {
    padding: 0 0;
  }
  .commoneco-sec .sublogo img {
    max-height: 36px;
  }
  .commoneco-sec .commoneco-data .list2col {
    flex-direction: column;
  }
  .commoneco-sec .commoneco-data .list2col li {
    width: 100%;
  }
  .infrastructure-data {
    padding: 24px;
  }
}

@media (max-width: 780px) {
  .purposebox {
    max-width: inherit !important;
  }
}

@media (max-width: 580px) {
  .journey-sec {
    background-color: #f9f0e5;
    background-image: none;
  }
  .joright {
    gap: 24px;
  }
  .jobox h2 {
    font-size: 36px;
    line-height: 38px;
  }
  .jobox .icon {
    width: 52px;
    height: 52px;
  }
  .journeywrap .i-badge {
    margin-top: 4px;
  }
  .pillars-sec {
    gap: 24px;
  }
  .pillars-lead {
    gap: 8px;
  }
  .cardwrap {
    padding: 8px;
    border-radius: 12px;
    gap: 12px;
  }
  .carddatawrap {
    gap: 16px;
    padding: 0 12px 12px;
  }
  .cardwrap .picture {
    border-radius: 10px;
  }
  .cardwrap .carddata {
    gap: 16px;
  }
  .cardwrap .cardbott-hr {
    position: relative;
    left: 0;
    bottom: inherit;
    width: 100%;
    gap: 16px;
  }
  .cardwrap .cardbott {
    width: 100%;
    position: relative;
    left: 0;
    flex-direction: column;
    gap: 16px;
  }
  .cardwrap .aplogo {
    height: inherit;
    padding-left: 0;
    border-left: 0px;
  }
  .cardwrap .aplogo .golink {
    width: 28px;
    height: 28px;
  }
  .sublogo img {
    max-height: 30px;
  }
  .commoneco-sec {
    gap: 24px;
    background: #f4f8ff;
    padding-bottom: 48px !important;
  }
  .commoneco-sec2 {
    padding-left: 24px;
    padding-right: 24px;
    gap: 24px;
  }
  .commoneco-mid {
    padding: 0;
  }
  .commoneco-row {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 8px 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0px 1px 6px 0px #0000001a;
  }
  .commoneco-row > * {
    padding: 0;
  }
  .commoneco-sec .picture-box {
    padding: 0;
    border-radius: 10px;
  }
  .commoneco-sec .commoneco-data {
    padding: 0 12px;
    gap: 16px;
  }
  .commoneco-sec .commoneco-para {
    font-size: 16px;
    line-height: 24px;
  }
  .commoneco-data h3 {
    font-size: 20px;
    line-height: 32px;
  }
}