main {
  width: 100%;
  height: 645px;
  position: relative;
  padding-top: 80px;
  background: url("/public/images/top-bg.png") no-repeat center/cover;
}

main .banner {
  width: 1200px;
  margin: 0 auto;
  padding-top: 163px;
  height: 564px;
  background: url("/public/images/png-1.png") no-repeat;
  background-size: 860px 564px;
  background-size: calc(860px + 120px) 564px;
  background-position: calc(100% + 200px) 0;
}
main .banner .slogan {
  width: 440px;
  height: 153px;
}
main .banner .tip {
  font-weight: 600;
  font-size: 20px;
  color: #282828;
}

main  .text {
  display: flex;
  margin-top: 34px ;
  align-items: center;
}

main  .text  .icon {
  width: 33px;
  height: 9px;
}

main  .text  .icon:nth-child(3) {
  margin-left: 24px;
}

main  .text  .tip {
  font-size: 20px;
  margin-left: 12px;
  font-family:base_font ;
  --wght: 700;
  --BEVL: 80;
  font-variation-settings: 'wght' var(--wght), 'BEVL' var(--BEVL);
}

main  .text  .quote {
  cursor: pointer;
  font-weight: 600;
  font-size: 10px;
  color: #02bb5d;
  transform: translate(6px, -6px);
}

.second {
  width: 100%;
  padding: 46px 120px;
  display: flex;
  flex-flow: column;
  align-items: center;
}


.second  .images {
  width: 117px;
  height: 117px;
}

.second   .title {
  font-family: base_font ;
  --wght: 700;
  --BEVL: 80;
  font-variation-settings: 'wght' var(--wght), 'BEVL' var(--BEVL);
  margin-top: 20px;
  font-weight: bold;
  font-size: 51px;
  color: #282828;
  letter-spacing: 2px;
}

.second  .text {
  margin-top: 28px;
  display: flex;
  align-items: flex-end;
}
.second    .count {
  width: 272px;
  height: 44px;
}

  .second  .unit {
    line-height: 24px;
    margin-left: 9px;
    font-size: 24px;
    color: #697387;
    font-family: DiwanMishafi;
  }

  .second  .quo {
    line-height: 16px;
    cursor: pointer;
    font-size: 16px;
    color: #697387;
    transform: translate(3px, -100%);
    font-family: DiwanMishafi;
  }
  .second   .paragraph {
    margin-top: 35px;
    text-align: center;
    font-weight: 400;
    font-size: 16px;
    color: var(--text-color);
    line-height: 27px;
    font-family: PingFangSC, PingFang SC;
  }


  .second   .paragraph .mark {
    color: var(--primary-text-color);
    font-weight: 500;
  }

  .second   .paragraph .quote {
    display: inline-block;
    transform: translateY(-8px);
    font-size: 16px;
    cursor: pointer;
    font-family: DiwanMishafi;
  }



.chapter {
  height: 600px;
  background: linear-gradient(270deg, #f1fff8 0%, #deffee 100%);
  display: flex;
  justify-content: center;
}
.chapter.special {
  background: linear-gradient(270deg,
      rgba(241, 255, 248, 0.2) 0%,
      rgba(222, 255, 238, 0.2) 100%);
}

.chapter.special .content {
  margin-left: 120px;
}
 
.chapter .content {
  flex: 1;
  display: flex;
  flex-flow: column;
  justify-content: center;

  max-width: 540px;
}





.chapter .content  .title {
  font-size: 40px;
  width: max-content;
}

.chapter .content  .text {
  margin-top: 28px;
  font-weight: 400;
  font-size: 16px;
  color: var(--text-color);
  line-height: 27px;
  text-align: left;
  font-style: normal;
  font-family: PingFangSC, PingFang SC;
}
.chapter .content  .text .quote {
  cursor: pointer;
  font-size: 16px;
  font-family: DiwanMishafi;
  display: inline-block;
  transform: translate(0, -8px);
}

.chapter .content .contactBtn  span {
  color: #00773b;
}


.chapter {
  height: 600px;
  background: linear-gradient(270deg, #f1fff8 0%, #deffee 100%);
  display: flex;
  justify-content: center;
}

.chapter.special {
  background: linear-gradient(270deg,
      rgba(241, 255, 248, 0.2) 0%,
      rgba(222, 255, 238, 0.2) 100%);
}
.chapter .image {
  width: 780px;
  height: 600px;
}
.chapter .content {
  flex: 1;
  display: flex;
  flex-flow: column;
  justify-content: center;

  max-width: 540px;
}




.chapter .content .title {
  font-size: 40px;
  width: max-content;
}

.chapter .content .text {
  margin-top: 28px;
  font-weight: 400;
  font-size: 16px;
  color: var(--text-color);
  line-height: 27px;
  text-align: left;
  font-style: normal;
}
.chapter .content .text  .quote {
  cursor: pointer;
  font-size: 16px;
  font-family: DiwanMishafi;
  display: inline-block;
  transform: translate(0, -8px);
}
.chapter .content .contactBtn {
  margin-top: 44px;
  width: 421px;
  height: 49px;
  background: linear-gradient(270deg, #7fecb5 0%, #37d786 100%);
  box-shadow: 11px 6px 44px 0px rgba(36, 142, 88, 0.22),
    inset 0px 1px 13px 0px rgba(255, 255, 255, 0.5);
  border-radius: 26px;
  backdrop-filter: blur(10px);
  font-weight: bold;
  font-size: 20px;
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: base_font;
  --wght: 700;
    --BEVL: 80;
    font-variation-settings: 'wght' var(--wght), 'BEVL' var(--BEVL);
}
section .title{
    position: relative;
    font-family: base_font;
    --wght: 700;
    --BEVL: 80;
    font-variation-settings: 'wght' var(--wght), 'BEVL' var(--BEVL);
    font-weight: bold;
    font-size: 46px;
    color: var(--text-color);
    line-height: 61px;
    text-align: center;
    font-style: normal;
    z-index: 10;
}
  
section .title::after {
  position: absolute;
  z-index: 0;
  top: 10px;
  right: -21px;
  display: inline-block;
  content: "";
  width: 36px;
  height: 36px;
  background: linear-gradient(
    180deg,
    #37d786 0%,
    rgba(104, 237, 187, 0.16) 100%
  );
  opacity: 0.52;
  border-radius: 50%;
  z-index: -1;
}
.chapter.special .specialContactBtn{
  width: 455px;
}