.hero-section{
     /* background:linear-gradient(90deg,var(--primary-blue),var(--primary-green)); */
     padding: 120px 0px;
     background: url('../assets/home/hero/banner1.png');
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
}
.hero-section h1{
   font-size: 54px;
    line-height: 62px;
    color: white;
    margin-bottom: 20px;
}
.hero-section p{
     font-size: 32px;
     color: #d8dfe7;
}
.hero-section p span{
     background: #113f56;
     font-weight: 600;
     padding: 4px;
     border-radius: 8px;

}

/* about section */
.about-section{
     padding: 100px 0px;
}
.about-section .lifycycle{
     height: 500px;
}
.about-section .content{
  margin-bottom: 30px;
}
.about-section .pillars-part h3{
     color: var(--primary-green);
     font-size: 32px;
}


.about-section .three-pillars{
     display: flex;
     justify-content: space-around;
}
.about-section .pillar{
     display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.about-section .pillar img{
     width: 100px;
}
.about-section .pillar h3{
     color:var(--primary-blue);
     margin-top: 10px;
}
/*  features section */
.features-section{
     padding: 100px 0px;
     background: #d7fffd;
}
.features-section .features{
     margin-top: 30px;
}
.features-section .features .card{
     border-radius: 16px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0px 4px 5px 1px #66b0e3;
}
.features-section .features .card-title{
     font-size: 24px;
     font-weight: 700;
     color: #113f56;
     text-align: center;
}
.features-section .features .card-text{
     text-align: center;
     font-size: 18px;
}
/* How works */
.how-works{
    padding: 100px 0px;
    background: #174352;
    color: var(--white);
}
.how-works .sub-heading{
    color: var(--white);
}
.how-works .working{
    display: flex;
    margin-top: 60px;
}
.how-works .working .process{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 300px;
}
.how-works .working .process img{
    width: 120px;
    background: white;
    padding: 10px;
    border-radius: 50%;
    box-shadow: 2px 0px 6px 6px white;
}
.how-works .working .process h3{
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}

/* outcomes */
.outcomes{
     padding: 100px 0px;
}
.outcome p{
     margin: 0;
}
.outcomes .outcomepoints{
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
     margin-top: 36px;
}
.outcomes .outcomepoints .outcome{
     border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 1px 2px 4px 1px var(--primary-green);
    color: #ffffff;
    background: linear-gradient(106deg, var(--primary-blue), var(--primary-green));
}
.outcomes .outcomepoints .outcome .name{
     display: flex;
     gap: 5px;
}
.outcomes .outcomepoints .outcome .name p{
     font-size: 22px;
     font-weight: 600;
}
.outcomes .outcomepoints .outcome .name i{
  font-size: 22px;
}
.outcomes .imagepart{
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
     margin-top: 30px;
}
.outcomes .imagepart .outcome{
     width: 400px;
}

.outcomes .imagepart .logo{
     position: absolute;
     width: 210px;
}
.outcomes .imagepart-text{
     font-size: 24px;
     font-weight: 600;
     color: #072f4a;
     text-align: center;
} 
.outcomes .imagepart-text .well-being{
 color: #2F9BD9;
}
.outcomes .imagepart-text .esg{
    color: #2CC6C8;
}
.outcomes .imagepart-text .growth{
    color: #025e6d;
}


@media screen and (max-width:1399px) {
     .hero-section h1 {
          font-size: 48px;
          line-height: 58px;
     }
}
@media  screen and (max-width:1199px) {
      .hero-section h1 {
          font-size: 44px;
          line-height: 54px;
     }
    
}
@media  screen and (max-width:991px) {
     
     .hero-section{
     background:linear-gradient(90deg,var(--primary-blue),var(--primary-green));
     padding: 60px 0px;
     }
     /* about */
       .about-section .pillars-part h3{
          font-size: 22px;
     }

     .how-works .working .process img{
          width: 80px;
     }
     .how-works .working .process h3{
          font-size: 16px;
     }
     /* outcomes */
     .outcomes .outcomepoints{
     display: flex;
     flex-wrap: nowrap;
     
     }
        .outcomes .outcomepoints .outcome .name{
     flex-direction: column;
     justify-content: center;
     align-items: center;
   }
     .outcomes .outcomepoints .outcome .name p{
          font-size: 18px;
          text-align: center;
     }
     .outcome p{
          text-align: center;
     }
}

@media screen and (max-width:767px) {
     .hero-section h1 {
    font-size: 46px;
    line-height: 56px;
     }
     .hero-section p{
          font-size: 26px;
     }
     /* about */

     /* how it works */
     .how-works .working{
          flex-direction: column;
          align-items: center;
          gap: 20px;
     }
     .how-works .working .arrow{
          transform: rotate(90deg);
          width: 30px;
     }
     .how-works .working .process{
          margin-top: 10px;
     }
     /* outcomes */
  .outcomes .outcomepoints{
     flex-direction: column;
  }
  .outcomes .outcomepoints .outcome .name{
     flex-direction: row;
  }
}

@media screen and (max-width:575px) {
         .hero-section h1 {
        font-size: 36px;
        line-height: 50px;
    }
    .about-section .pillar img {
    width: 64px;
}
.about-section .lifycycle {
    width: 500px;
    height: auto;
}
     
}