.sec-hmservice:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.85;
}

.sec-hmservice .content-width p {
  color: var(--white);
}

.sec-hmservice .heading-44 {
  max-width: 615px;
  margin: 0 auto 19px;
}

.sec-hmservice {
  position: relative;
  color: var(--white);
  /* overflow: hidden; */

  & ul.service-hmul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style-type: none;
    margin: 35px -25px 0;
    padding: 0;

    >li {
      width: 50%;
      margin: 0;
      padding: 0 80px 80px;
      background: transparent linear-gradient(60deg, #121517 0%, #2f3237 100%) 0% 0% no-repeat padding-box;
      opacity: 1;

      &:after {
        display: none;
      }

    }
  }

  & .service-hmli {
    display: flex;
    flex-wrap: wrap;
    border-radius: 10px;
    height: 100%;
    position: relative;

    .banner-shape {
      position: absolute;
      left: 180px;
      top: 0;
      bottom: 0;
      margin: auto;
      z-index: 0;
      opacity: 0.05;
    }
  }

  & .service-hmim,
  & .service-hmimg>img {
    border-radius: 10px 0 0 10px;
  }

  & .service-hmlist {
    width: calc(100% - 380px);
    padding: 109px 36px 0 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    & .button {
      margin-top: auto;
      background: #bcd525 0% 0% no-repeat padding-box;
      color: #1a1d20;
      font-weight: 600;
    }

    & img {
      filter: brightness(0) saturate(100%) invert(0%) sepia(2%) saturate(0%) hue-rotate(155deg) brightness(94%) contrast(102%);
    }

    & .button:hover {
      color: #bcd525;
      border-color: #bcd525;
      background-color: transparent;

      & img {
        filter: brightness(0) saturate(100%) invert(99%) sepia(76%) saturate(4749%) hue-rotate(9deg) brightness(97%) contrast(71%);
      }
    }

    & ul.sul-list {
      margin: 0 0 50px 0;
      width: 100%;
      list-style-type: none;
      padding: 0;
    }

    & ul.sul-list li {
      font-size: 16px;
      color: #d6d6d6;
      line-height: 20px;
      font-weight: 500;
      margin-bottom: 16px;
      padding-left: 20px;
      width: auto;
      position: relative;
      font-family: "Instrument Sans";

      &:after {
        top: 3px;
        filter: brightness(0) saturate(100%) invert(91%) sepia(0%) saturate(1149%) hue-rotate(140deg) brightness(100%) contrast(81%);
      }
    }
  }

  & .service-hmimg {
    width: 380px;
    position: relative;

    &:before {
      position: absolute;
      content: "";
      right: -1px;
      bottom: -1px;
      width: 53px;
      height: 53px;
      z-index: 1;
      clip-path: polygon(100% 0, 0% 100%, 100% 100%);
      background: transparent linear-gradient(60deg, #121517 0%, #2f3237 100%) 0% 0% no-repeat padding-box;
    }
  }

  & .service-hmimg>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border-top: 5px solid #bcd525;
    border-radius: 0;
  }

  & .sr-hm-title.large {
    font-size: 36px;
    font-weight: bold;
    line-height: 38px;
    color: #ffffff;
    position: relative;
    letter-spacing: 0px;
    margin-bottom: 17px;
    height: 80px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  & .sr-hm-title.small {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #d6d6d6;
    position: relative;
    letter-spacing: 0px;
    margin-bottom: 31px;
  }

  & ul.service-hmul.slick-initialized {
    display: block;
    margin-bottom: 30px;
    padding-bottom: 30px;
  }

  & ul.service-hmul .slick-track {
    display: flex;
  }

  & ul.service-hmul .slick-slide {
    height: auto;
  }

  & ul.service-hmul .slick-slide>div {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
  }

  & .slick-dots li {
    width: auto !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }

  & .slick-dots li button:before {
    opacity: 0;
  }

  & .slick-dots {
    bottom: 0;
    top: 100%;
  }
}

.sec-hmservice .container-fluid {
  overflow: hidden;
}

ul.service-hmul>li:hover {
  background: transparent linear-gradient(60deg, #006CB9 0%, #BCD525 100%) 0% 0% no-repeat padding-box;
}

ul.service-hmul li:hover .sr-hm-title {
  color: #fff;
}

ul.service-hmul li:hover ul.sul-list li {
  color: #fff;
}

ul.service-hmul li:hover .service-hmimg:before {
  background: transparent;
}

.sec-hmservice:after {
  position: absolute;
  content: "";
  left: 50%;
  bottom: -45px;
  background: #707070;
  width: 1px;
  height: 91px;
}


/* --------------------------------------------------- */
@media (max-width: 1799px) {
  .sec-hmservice {
    & ul.service-hmul {
      >li {
        padding: 0 30px 40px;
      }
    }
  }
}

@media (max-width: 1599px) {
  .sec-hmservice {
    & .service-hmlist {
      padding: 20px 10px 20px 0;
      margin: auto;
      width: calc(100% - 300px);
    }
  }

  .sec-hmservice {
    & .service-hmimg {
      width: 300px;
    }
  }
}

@media (max-width: 1440px) {
  .sec-hmservice {
    & ul.service-hmul {
      >li {
        padding: 0 30px 0px;
      }
    }
  }

  .sec-hmservice {
    & .service-hmlist {
      & ul.sul-list {
        margin: 0 0 30px 0;
      }
    }
  }

  .sec-hmservice {
    & .sr-hm-title.large {
      font-size: 30px;
      height: 76px;
    }
  }

  .sec-hmservice {
    & .service-hmli {
      .banner-shape {
        display: none;
      }
    }
  }
}

@media (max-width: 1199px) {
  .sec-hmservice {
    & ul.service-hmul {
      margin: 35px -20px 0;

      >li {
        padding: 0 20px 0px;
      }
    }
  }

  .sec-hmservice {
    & .service-hmimg {
      width: 100%;
      order: 1;
    }
  }

  .sec-hmservice {
    & .service-hmlist {
      width: 100%;
      order: 2;
      margin: 0;
    }
  }

  .sec-hmservice {
    & .service-hmimg>img {
      height: 500px;
    }
  }
}

@media (max-width: 991px) {
  .sec-hmservice {
    & .service-hmlist {
      & ul.sul-list li {
        padding-left: 30px;
      }
    }
  }

  .sec-hmservice {
    & .service-hmli {
      .banner-shape {
        display: none;
      }
    }
  }

  .sec-hmservice {
    & ul.service-hmul {
      margin: 0px -20px 0;
    }
  }

  .sec-hmservice .heading-44 {
    max-width: 615px;
    margin: 0 auto 15px;
  }

  .sec-hmservice:after {
    display: none;
  }
}

@media (max-width: 767px) {
  .sec-hmservice {
    & .service-hmimg>img {
      height: 350px;
    }
  }

  .sec-hmservice {
    & .service-hmlist {
      padding: 0px 0 32px 0;
    }
  }

  .sec-hmservice {
    & .sr-hm-title.large {
      margin-bottom: 15px;
      font-size: 24px;
      line-height: 32px;
      height: 67px;
    }
  }

  .sec-hmservice {
    & .service-hmlist {
      & ul.sul-list li {
        &:last-of-type {
          margin-bottom: 0;
        }
      }
    }
  }


}

@media (max-width: 575px) {
  .sec-hmservice {
    & ul.service-hmul {
      >li {
        width: 100%;
      }
    }
  }

  .sec-hmservice {
    & .service-hmlist {
      padding: 20px 0 32px 0;
    }
  }

  .sec-hmservice {
    & .sr-hm-title.large {
      height: auto;
    }
  }

}

@media (max-width: 480px) {
  .sec-hmservice {
    & .sr-hm-title.large {
      margin-bottom: 10px;
      font-size: 18px;
      line-height: 38px;
    }
  }

  .sec-hmservice {
    & .sr-hm-title.small {
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
      color: #d6d6d6;
      position: relative;
      letter-spacing: 0px;
      margin-bottom: 22px;
    }
  }

  .sec-hmservice {
    & .service-hmlist {
      & ul.sul-list li {
        padding-left: 25px;

        &:after {
          width: 15px;
          height: 15px;
        }
      }
    }
  }
}