// ==============================================
// 💪 FINANCE CONTROLLING SCSS
// ==============================================

.sec-job-filter{
  margin: -210px 0 0 -32px;
  position: relative;
  z-index: 1;
  @media screen and (max-width: 1199px) {
    margin: -210px 0 0 0;
  }
  .container{
    padding: 0;
    @media screen and (max-width: 1199px) and (min-width: 768px) {
      padding: 0 24px;
    }
  }
  .job-filter-card{
    max-width: 913px;
  }
}

.sec-support-finance{
  padding: 75px 0 60px;
  @media screen and (max-width: $screen-xs) {
    padding: 16px 0 30px;
  }
  .content-wrapper{
    >h1{

    }
  }
}

.sec-accountant{
  padding: 60px 0;
  @media screen and (max-width: $screen-xs) {
    padding: 30px 0;
  }
  .container{
    >h2{
      //margin-bottom: 24px;
    }
  }

  .accountant-detail{
    padding: 64px 0;
    @media screen and (max-width: $screen-xs) {
      padding: 0 0 48px;
    }
  }
  .features-list-card-01{
    margin-bottom: 24px;
    @media screen and (max-width: $screen-xs) {
      margin-bottom: 20px;
    }
  }

  .btn-wrapper{
    //text-align: center;
  }
}

.sec-do-offer{
  padding: 60px 0;
  @media screen and (max-width: $screen-xs) {
    padding: 30px 0;
  }
  .sec-heading{
    h1{

    }
    h2{

    }
    h4{

    }
  }
  .offer-grid{
    display: grid;
    grid-template-columns: repeat(3, 33%);
    @media screen and (max-width: $screen-xs) {
      grid-template-columns: 1fr;
    }
    .card-style-01{
      padding-bottom: 56px;
      padding-left: 16px;
      padding-right: 16px;
      margin-bottom: 44px;
      border-bottom: 1px solid $cool-gray-03;
      @media screen and (max-width: 991px) and (min-width: 768px) {
        padding-bottom: 35px;
        margin-bottom: 35px;
      }
      &:last-of-type{
        border-bottom: unset;
        @media screen and (max-width: $screen-xs) {
          margin-bottom: 0;
          padding-bottom: 0;
        }
      }
      @media screen and (max-width: $screen-xs) {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 42px;
        padding-bottom: 32px;
      }
      &:nth-last-child(-n + 3) {
        @media screen and (min-width: 1200px) {
          padding-bottom: 0;
          margin-bottom: 0;
          border-bottom: none;
        }
      }
      &:nth-of-type(3n+1){
        padding-left: 0;
      }
      &:nth-of-type(3n+3){
        padding-right: 0;
      }
    }
  }
  .btn-wrapper{
    text-align: center;
  }
}

.sec-employees-say{
  padding: 60px 0 120px;
  @media screen and (max-width: $screen-xs) {
    padding: 30px 0 80px;
  }
  .container{
    position: relative;
    >h2{
    }
    .swiper-pagination{
    }
  }
  @include slider-dots(10px, 10px, -48px, 50%, $cool-gray-03, $primary-01, 24px, left, null, absolute, 240px, center);
  @media screen and (max-width: 991px) {
    @include slider-dots(10px, 10px, -48px, 50%, $cool-gray-03, $primary-01, 24px, left, null, absolute, 100% , center);
  }
  .swiper{
    .swiper-wrapper{
      .swiper-slide{
        .employees-card{
          display: grid;
          grid-template-columns: 240px 1fr;
          align-items: center;
          column-gap: 32px;
          @media screen and (max-width: 991px) {
            grid-template-columns: 1fr;
          }
          .employees-img{
            @media screen and (max-width: 991px) and (min-width: 768px) {
              margin-bottom: 20px;
            }
            @media screen and (max-width: $screen-xs) {
              text-align: center;
            }
            img{
              width: 240px;
              height: 240px;
              object-fit: cover;
              object-position: top;
              border-radius: 50%;
              @media screen and (max-width: 991px) and (min-width: 768px) {
                width: 160px;
                height: 160px;
              }
              @media screen and (max-width: $screen-xs) {
                width: 128px;
                height: 128px;
              }
            }
          }
          .employees-content{
            position: relative;
            padding-left: 29px;
            @media screen and (max-width: 991px) {
              padding-left: 0;
              padding-top: 29px;
            }
            &:before{
              content: "";
              background: url("../../assets/icons/others/quote-red-icon.svg") no-repeat center;
              background-size: cover;
              width: 21px;
              height: 15px;
              position: absolute;
              left: 0;
              top: 5px;
            }
            .review-body{
              p{
                margin-bottom: 0;
              }
            }
            .review-footer{
              padding-top: 24px;
              margin-top: 24px;
              border-top: 1px solid $cool-gray-03;
              @media screen and (max-width: $screen-xs) {
                padding-top: 20px;
                margin-top: 20px;
                text-align: center;
              }
              .name-wrapper{
                p{
                  margin-bottom: 0;
                  &.name{
                    margin-bottom: 2px;
                  }
                  &.profession{

                  }
                }
              }
              .brand-logo{
                text-align: left;
                @media screen and (max-width: $screen-xs) {
                  text-align: center;
                }
                img{
                  max-width: 130px;
                }
              }
              .audio-card-01{
                .audio-style-01{
                  @media screen and (max-width: 991px) {
                    justify-content: center;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.sec-job-waiting{
  padding: 60px 0 120px;
  @media screen and (max-width: 991px) and (min-width: 768px) {
    padding: 60px 0;
  }
  @media screen and (max-width: $screen-xs) {
    padding: 30px 0 60px;
  }
}

.sec-application-process{
  padding: 150px 0 157px;
  background: $bright-red-14;
  overflow-x: hidden;
  @media screen and (max-width: 1199px) and (min-width: 768px) {
    padding: 100px 40px 110px;
  }
  @media screen and (max-width: $screen-xs) {
    padding: 48px 0 98px;
  }
  &.bg-gray{
    background: $cool-gray-15;
  }
  .sec-heading{
    .rocket-icon{
      //display: block;
    }
    h2{

    }
  }
  .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(5, 262px);
      //max-width: 1310px;
      max-width: 1140px;
      margin: -6px auto 0 auto;
      @media screen and (max-width: 1400px) and (min-width: 1200px) {
        grid-template-columns: repeat(5, 228px);
      }
      @media screen and (max-width: 1199px) {
        grid-template-columns: 1fr;
        row-gap: 60px;
      }
      &.grid-3{
        @media screen and (min-width: 1200px) {
          grid-template-columns: repeat(3, 33%);
        }
      }
      .number-card-01{
        padding-right: 36px;
        @media screen and (max-width: 1199px) {
          padding-right: 0;
        }
        &: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;
          }
        }
      }
    }
  }

  .btn-wrapper{
    .btn-style{
      @media screen and (max-width: $screen-xs) {
        min-width: 100%;
      }
    }
  }
}

.sec-look-like{
  padding: 60px 0 0;
  @media screen and (max-width: $screen-xs) {
    padding: 30px 0 40px;
  }
  ul.arrow-list{
    text-align: right;
    li{
      display: inline-block;
      vertical-align: middle;
      &:not(:last-of-type){
        margin: 0 40px 0 0;
      }
      a{
        img{
          min-width: 18px;
        }
        &.swiper-button-disabled{
          pointer-events: none;
          img{
            filter: brightness(0) saturate(100%) invert(68%) sepia(30%) saturate(0%) hue-rotate(147deg) brightness(101%) contrast(102%);
          }
        }
      }
    }
  }
  .candidates-header{
    h2{
      margin-bottom: 0;
    }
    ul.arrow-list{
      @media screen and (max-width: $screen-xs) {
        display: none;
      }
    }
  }
  .swiper-container{
    max-width: 1140px;
    min-width: calc((100vw - 1140px) / 2 + 1163px);
    margin: 0 0 0 auto;
    @media screen and (max-width: 1199px) {
      min-width: auto;
    }
    .swiper{
      padding: 70px 0 70px 22px;
      @media screen and (max-width: $screen-xs) {
        padding: 60px 0 52px 24px;
      }
      .swiper-wrapper{
        .swiper-slide{
          transition: $transition-01;
          &.swiper-slide-active{
            @media screen and (min-width: 992px) {
              width: 750px !important;
            }
            .candidate-card-04{
              box-shadow: 0 20px 25px 0 rgba(86, 86, 95, 0.15), 0 50px 50px 0 rgba(86, 86, 95, 0.05);
              .video-wrapper{
                .video-card-03{
                  .video-wrapper{
                    .video-content{
                      &:before{
                        opacity: 0;
                      }
                    }
                  }
                }
              }
              .content-wrapper{
                @media screen and (min-width: 992px) {
                  padding: 48px;
                }
                h4{
                  @media screen and (min-width: 992px) {
                    @include font-size(32);
                  }
                }
                p{
                  @media screen and (min-width: 992px) {
                    @include font-size(20);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .slider-navigation{
    ul.arrow-list{
      padding-left: 44px;
      text-align: left;
    }
  }
}

.sec-interesting-jobs{
  padding: 60px 0 70px;
  @media screen and (max-width: $screen-xs) {
    padding: 60px 0 70px;
  }
  ul.arrow-list{
    text-align: right;
    li{
      display: inline-block;
      vertical-align: middle;
      &:not(:last-of-type){
        margin: 0 40px 0 0;
      }
      a{
        img{
          min-width: 18px;
        }
        &.swiper-button-disabled{
          pointer-events: none;
          img{
            filter: brightness(0) saturate(100%) invert(68%) sepia(30%) saturate(0%) hue-rotate(147deg) brightness(101%) contrast(102%);
          }
        }
      }
    }
  }
  .candidates-header{
    h2{
      margin-bottom: 0;
    }
    ul.arrow-list{
      @media screen and (max-width: $screen-xs) {
        display: none;
      }
    }
  }
  .swiper-container{
    max-width: 1140px;
    min-width: calc((100vw - 1140px) / 2 + 1163px);
    margin: 0 0 0 auto;
    @media screen and (max-width: $screen-xs) {
      min-width: auto;
    }
    .swiper{
      padding: 70px 0 70px 45px;
      @media screen and (max-width: $screen-xs) {
        padding: 48px 0 52px 24px;
      }
    }
  }
  .slider-navigation{
    ul.arrow-list{
      padding-left: 44px;
      text-align: left;
    }
  }
}

.sec-breadcrumb{
  .container{
    padding: 0;
  }
}