// ==============================================
// 💪 Executive Search SCSS
// ==============================================

.sec-our-story{
  position: relative;
  overflow: hidden;
  .container-fluid{
    padding: 0;
  }
  .story-content-wrapper{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    @media screen and (max-width: 991px) {
      position: relative;
      background: #F7F7F6;
    }
    .story-content{
      max-width: 1140px;
      margin: auto;
      p{
        max-width: 698px;
      }
    }
    .process-steps{
      border-top: 1px solid $cool-gray-03;
      @media screen and (max-width: 1199px) and (min-width: 768px) {
        border-top: unset;
      }
      @media screen and (max-width: $screen-xs) {
        border-top: unset;
      }
      .process-grid{
        display: grid;
        grid-template-columns: repeat(4, 360px);
        //max-width: 1310px;
        max-width: 1140px;
        margin: -6px auto 0 auto;
        @media screen and (max-width: 1199px) {
          grid-template-columns: 1fr;
          row-gap: 36px;
        }
        .number-card-01{
          padding-right: 49px;
          @media screen and (max-width: 1199px) {
            padding-right: 0;
            grid-template-columns: 1fr;
          }
          &:last-of-type{
            &:after{
              display: none;
            }
            &:before{
              @media screen and (max-width: 1199px) {
                display: block;
                top: unset;
                bottom: -50px;
              }
            }
          }
          &:after{
            content: "";
            background: $cool-gray-03;
            width: 1px;
            height: 24px;
            position: absolute;
            left: 29px;
            bottom: -30px;
            display: none;
            @media screen and (max-width: 1199px) {
              display: block;
            }
          }
        }
      }
    }
  }
  .story-card-wrapper{
    .story-img{
      img{
        width: 100%;
        height: 1600px;
        object-fit: cover;
        object-position: center;
        @media screen and (max-width: 991px) {
          height: 400px;
        }
      }
    }
  }
  .swiper{
    padding-left: 24px;
    @media screen and (max-width: $screen-xs) {
      padding-left: 12px;
    }
    .swiper-wrapper{
      .swiper-slide{
        .story-card{
          .story-img{
            img{
              width: 100%;
              object-fit: cover;
              object-position: bottom;
            }
          }
        }
      }
    }
  }
}

.sec-our-image{

}