body{
  margin-top:0;
}

a:hover{
  text-decoration: none;
}



.text-orange{
  color: #F97F0E;
}

.text-green{
  color:#31AB48;
}

.arrow-icon{
  color:#31AB48;
  font-size: 22px;
}


h1,h2{
  font-family: 'Sen', sans-serif;
}

h1 {
  line-height: 58px;
  font-size: 80px;
  font-weight: 800;
  color: #F97F0E;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  line-height: 70px;
}

h1 span span{
   color:#FBB03B;
}



h1:before{
  content:url('../../img/features/header-banner-img1.png');
  display: flex;
  margin-right:40px;
}

h1:after{
  content:url('../../img/features/header-banner-img2.png');
  display: flex;
  margin-left:40px;
}



h4{
  font-size:22px;
  font-weight: bold;
  font-family: 'Zen Maru Gothic', serif;
  line-height: 1.3;
}

p{
  font-size:18px;
  color:#222;        
  font-family: 'Zen Maru Gothic', serif;
  margin-bottom:0;
  line-height: 1.3;
}

ul {
    margin: 0 0 20px;
    padding: 0;
      font-size:18px;
  color:#222;        
  font-family: 'Zen Maru Gothic', serif;
  
}

.img-responsive{
  margin:0 auto;
}

.center{
  text-align: center;
}

.wrapper {
  width: 1000px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  
}

.title {
    text-align: center;
    padding: 20px 0;
    background: #31ab48;
       border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.title p{
  color:#fff;
  font-size: 18px;
}



.wrap-content{
  gap:64px;
}

  .button-link{
    border:2px solid #F97F0E;
    background:#FFF8F1;
    padding:10px 20px;
    border-radius: 30px;
   
    display: inline-flex;
    justify-content: space-around;
    align-items: center;
    font-weight: bold;
    color:#F97F0E;
    font-size: 18px;
    font-family: 'Zen Maru Gothic', serif;
    gap: 16px;
    line-height: 1.4;
    transition: 0.5s;
    text-decoration: none;
    
  }
  
  .button-link:after {
    content: "";
      width: 0px;
      height: 0px;
      border-style: solid;
      border-width: 0 5px 10px 5px;
      border-color: transparent transparent #F97F0E transparent;
      transform: rotate(90deg);
   }
  
   .button-link:hover:after {
    border-color: transparent transparent #fff transparent !important;
   }
  
  .button-link:hover{
    background: #F97F0E;
    text-decoration: none;
    color:#fff;
  }
 
.hero-section{
  background: url('../../img/index/hero-bg.jpg');
  padding:130px 0;
  min-height: 610px;
}


      .flex{
        display: flex;
        justify-content: center;
        gap: 16px;
        flex-wrap: wrap;
      }
      
        .flex img{
          width:46%;
        }
      
 

.text-red {
    color: #F30A07!important;
}


/*media hero banner*/
@media only screen and (max-width: 768px){
  h1:before,h1:after{
    display: none;
  }

  .hero-section {
    min-height:480px;
}

h1{
  font-size:50px;
 }

 h4{
  font-size: 16px;
  margin-top: 0;
 }
 


.flex {
  gap:0
}

}

@media only screen and (max-width: 600px){
  .hero-section h4 span{
    display: block
  }
  
 
}


/*sec2*/
.sec2{
  background:#E4F1D4;
  margin-top:-3px;
 padding-bottom:20px;
}


.sec2__header {
  background: url("../../img/features/sec2-bg.png") transparent repeat top center;
  min-height: 274px;
  margin-top: -270px;
}

.sec2 h2 {
    font-size: 32px;
    color: #fff;
    font-family: 'Zen Maru Gothic', serif;
    font-weight: bold;
    border-radius: 4px;
    padding:0 24px;
    background: #31AB48;
    display: block;
    margin:0
}

.sec2 h2::after {
  content: '';
  height: 4px;
  display: flex;
  background: #31AB48;
  border-radius: 3px;
}

.sec2 h2 span{
  color:#fff;
  font-size: 40px;
  font-family: 'Sen', sans-serif;
}

.content {
    background: #fff;
    padding: 32px 40px;
    display: flex;
    gap: 32px;
    flex-direction: column;
      border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;

}

.sub{
  display: flex;
  align-items: center;
  gap:8px;
  justify-content: flex-start;
}

.text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
}


.text img{
  margin: auto 0;
}

.items{
  display: flex;
  justify-content: center;
  gap:60px
}


.items .item-title h3{
  margin: 0;
  font-size: 26px;
      font-family: 'Zen Maru Gothic', serif;
          font-weight: bold;
}

.items .item {
    display: flex;
    flex-direction: column;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    flex: 1;
    justify-content: stretch;
}

.items .item .info {
    display: flex;
    flex-direction: column;
    padding: 16px;
    justify-content: space-between;
    gap: 16px;
    height: 100%;
}

 .items .item .info .inner-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

.items .item-title{
  background: #FBB03B;
  color:#fff;
  display: flex;
  justify-content: center;
  height: 64px;
  align-items: center;
  border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.items .item:last-child .item-title{
  background: #68C279;
}

.items .item:last-child .button-link{
  background: #F6FFE2;
  border:2px solid #31AB48;
  color:#31AB48;
}

.items .item:last-child .button-link:hover{
  background:#31AB48;
  color:#fff;
}

.items .item:last-child .button-link:after {

  border-color: transparent transparent #31AB48 transparent;

}

.steps{
  display: flex;
  justify-content: flex-start;
  gap:32px;
 align-items: center;
}

.steps .step{
  flex:1;
}

.steps h4{
  color:#FBB03B;
  font-size: 60px;
  font-weight: bold;
  display: flex;
  gap:8px;
  align-items: center;
}

.steps h4 span{
  font-size: 28px;
  color:#F97F0E;
  display: flex;
  gap:5px;
  flex-direction: column;
}

.steps h4 span small{
  color:#F97F0E;
}

.steps p{
  margin-bottom: 20px;
}

.steps p:last-child{
  margin-bottom: 0;
}

hr {
    border-top: 0.5px solid #E6E6E6;
    width: 100%;
        margin: 8px 0;
}


/*media sec2*/

@media only screen and (max-width: 768px){
 
  .sec2__header {
    background-size:cover;
    background-repeat: no-repeat;
    min-height: 200px;
    margin-top: -170px;
  }

  p{
    font-size:16px;
  }
  
.items, .steps {
    gap: 16px;
}

.wrap-content {
    padding: 15px;
}

.content {
    padding: 20px;
}

.sub {
    align-items: flex-start;
}
}


@media only screen and (max-width:600px){


 

  .sec2 {
    padding-top: 30px;
   
}
.sec2 h2{
  font-size: 22px;
}

.sec2 h2 span {
  font-size: 30px;
}

.sec2__header {
  min-height: 60px;
  margin-top: -80px;
}

.wrap-content {
  gap: 32px;
}

.items, .steps {
    flex-direction: column;
}

.items .item-title {
    height: 30px;
}

.items .item-title h3 {
    font-size: 16px;
}

.items .item-title .sub p{
  font-size: 16px;
}

.feature__index p{
  font-size: 15px;
}

.button-link{
  font-size: 14px;
  padding: 10px;
  gap: 8px;
  width: 100%;
}

.items .item .info{
  padding:12px;
  gap:0px;
}

.steps h4 {
    font-size: 46px;
}

.steps h4 span{
  font-size: 20px;
}
.steps h4 span small{
  font-size: 16px;
}


.content{
  gap:16px;
}

.content .steps:nth-child(2){
  background: rebeccapurple;
}

.middle{
  flex-direction: column-reverse;
}

}




a.link{
  display: inline-block;
  padding-top: 4px;
  padding-right: 16px;
  padding-bottom: 4px;
  padding-left: 16px;
  border-width: 2px;
  border-radius: 4px;
  background: #DBDCF1;
  text-decoration: none;
  margin-top: 16px;
  color:#4950B7;
  border:2px solid #4950B7;
}