.story{
    padding-bottom: 70px;
    background-image: url(../images/story_bgg.png);
    z-index: -1;
    position: relative;
    .section_edit{
      position: absolute;
      right: 50px;
      ul{
          li{
              display: inline-block;
              padding: 0 10px;
              a{
                  font-size: 18px;
                  color: #969696;
              }
          }
      }
  }
  .headerSection{
      h5{
          font-size: 35px;
          color: $black;
          font-weight: 600;
          line-height: 45px;
          display: inline-block;
          font-family: $font-2;
          padding: 10px 0;
          span{
              color: $primaryColor;
          }
      }
  }
  .story_wrapper{
      padding-top: 70px;
      position: relative;
      &::after{
          position: absolute;
          content: '';
          height: 98%;
          width: 1px;
          border: 1px dashed #7abbae;
          top: 80px;
          left: 50%;
          transform: translateX(-50%);
      }
        .story_wrap{
              .story_title{
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  h4{
                      font-size: 24px;
                      color: #333;
                      font-weight: 700;
                      line-height:  30px; 
                      font-family: $font-2;
                  }
                  h5{
                      font-size: 18px;
                      color: #16b092;
                      font-weight: 400;
                      line-height:  30px;
                      
                  }
              }
              .story_img{
                  padding-top: 10px;
                  .storyItem{
                      height: 320px;
                      width: 100%;
                      display: flex !important;
                      justify-content: center !important;
                      align-items: center !important;
                      background-color: #f3f3f3;
                      img{
                          max-width: 100%;
                          max-height: 100%;
                      }
                  }
              }
                  p{
                      font-size: 15px;
                      color: $text;
                      font-weight: 400;
                      line-height: 30px; 
                      padding: 20px 0;
                   } 
        }
        .margin_top{
          margin-top: 200px !important;
      }
      .margin_top2{
        margin-top: 100px !important;
      }  
      .margin_top3{
        margin-top: 300px !important ;
      }
      .margin_bottom{
          margin-top: -200px ;
      } 
      .story_icon1{
          height: 40px;
          width: 40px;
          background-color: #76c3b3;
          border-radius: 50%;
          text-align: center;
          position: absolute;
          left: 50%;
          top: 40px;
          transform: translateX(-50%);
          z-index: 1;
          i{
              font-size: 20px;
              color: #f3f3f3;
              line-height: 40px;
          }
      }
      .story_icon2{
          height: 40px;
          width: 40px;
          background-color: #76c3b3;
          border-radius: 50%;
          text-align: center;
          position: absolute;
          left: 50%;
          bottom: -55px;
          transform: translateX(-50%);
          z-index: 1;
          i{
              font-size: 18px;
              color: #f3f3f3;
              line-height: 40px;
          }
      }
      .story_icon3{
          height: 40px;
          width: 40px;
          background-color: #76c3b3;
          border-radius: 50%;
          text-align: center;
          position: absolute;
          left: 50%;
          bottom: 20%;
          transform: translateX(-50%);
          z-index: 1;
          i{
              font-size: 18px;
              color: #f3f3f3;
              line-height: 40px;
          }
      }
      .story_icon4{
          height: 40px;
          width: 40px;
          background-color: #76c3b3;
          border-radius: 50%;
          text-align: center;
          position: absolute;
          left: 50%;
          bottom: 45%;
          transform: translateX(-50%);
          z-index: 1;
          i{
              font-size: 18px;
              color: #f3f3f3;
              line-height: 40px;
          }
      }
      .story_icon5{
          height: 40px;
          width: 40px;
          background-color: #76c3b3;
          border-radius: 50%;
          text-align: center;
          position: absolute;
          left: 50%;
          top: 20%;
          transform: translateX(-50%);
          z-index: 1;
          i{
              font-size: 18px;
              color: #f3f3f3;
              line-height: 40px;
          }
      }
  }
}