.office_tasks {
  width: 100%;
  .head {
    padding: 12px 42px;
    h3 {
      font-size: 24px;
      font-weight: 700;
      line-height: 42px;
      color: #5c4b43;
      text-align: right;
    }
  }

  .slider_container {
    margin: 0 auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .container {
      padding: 42px 0;
      width: min(1320px, 100% - 32px);
      margin: 0 auto;

      display: flex;

      .slider_wrapper {
        width: calc((100% / 4) * 3);
        display: flex;
        flex-direction: column;
        gap: 20px;

        .slide {
          transition: all 0.3 ease-in-out;
          display: flex;
          gap: 16px;
          background: #d8edf44d;
          backdrop-filter: blur(20px);

          .icon {
            margin: 20px 20px 0 0;
            width: 68px;
            height: 68px;
            background: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
              filter: brightness(0);
            }
          }

          h3 {
            color: #2f2622;
          }

          ul {
            padding: 0 16px 0 0;
            color: #2f2622;
          }

          .pattern {
            margin-right: auto;
            img {
              filter: grayscale(1);
            }
          }
        }
      }

      .controls {
        width: calc((100% / 4) * 1);
      }
    }
  }
}

.swiper {
  width: 100%;
  height: 500px;
}

.swiper-slide {
  cursor: pointer;
}

.swiper-slide-active {
  cursor: auto !important;
  .slide {
    background: #d8edf4 !important;

    .icon {
      background: #f0974f !important;
      img {
        filter: brightness(1) !important;
      }
    }

    .pattern {
      img {
        filter: grayscale(0) !important;
      }
    }
  }
}

.controls {
  display: flex;
  flex-direction: column;
}

.swiper_controls {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  margin-top: auto;

  .pagination {
    width: fit-content;
  }
}

.swiper-button-next-custom,
.swiper-button-prev-custom {
  width: 42px;
  height: 42px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  border: none;
  cursor: pointer;
}

.swiper-button-next-custom img {
  transform: scale(-1);
}

.swiper .pagination {
  font-size: 18px;
  color: #fff;
  font-weight: 700;
}