:root {
  --bg-service: #ffffff;
  --color-service: #111915; }

.greenweave-about-us-service {
  background: var(--bg-service);
  color: var(--color-service); }
  .greenweave-about-us-service .list-service {
    margin: 60px 0 0;
    gap: 50px; }
  .greenweave-about-us-service .service-item {
    -ms-flex: 0 0 calc(100% / 4 - 37.5px);
    flex: 0 0 calc(100% / 4 - 37.5px);
    max-width: calc(100% / 4 - 37.5px);
    transition: all 0.3s;
    padding-right: 50px; }
    .greenweave-about-us-service .service-item:not(:last-child) {
      position: relative; }
      .greenweave-about-us-service .service-item:not(:last-child):before {
        content: '';
        position: absolute;
        top: 0;
        right: -15px;
        width: 1px;
        height: 100%;
        background: currentcolor;
        opacity: 0.1; }
    .greenweave-about-us-service .service-item a {
      color: var(--color-service); }
    .greenweave-about-us-service .service-item .img {
      position: relative;
      margin-bottom: 30px;
      width: 80px;
      height: 80px; }
      .greenweave-about-us-service .service-item .img:before, .greenweave-about-us-service .service-item .img:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
      .greenweave-about-us-service .service-item .img:before {
        background-image: var(--bg-img);
        background-size: contain;
        background-repeat: no-repeat;
        transition: all 0.3s; }
      .greenweave-about-us-service .service-item .img:after {
        background: var(--color-service);
        -webkit-mask: var(--bg-img) center/contain;
        mask: var(--bg-img) center/contain;
        mask-repeat: no-repeat;
        transition: all 0.3s;
        opacity: 0; }
    .greenweave-about-us-service .service-item .title {
      font-size: 22px;
      margin-bottom: 15px; }
    .greenweave-about-us-service .service-item .btn-more {
      overflow: hidden;
      margin-top: 40px; }
      .greenweave-about-us-service .service-item .btn-more .icon {
        display: inline-flex;
        align-items: center;
        gap: 8px; }
        .greenweave-about-us-service .service-item .btn-more .icon span {
          white-space: nowrap;
          font-weight: 600; }
        .greenweave-about-us-service .service-item .btn-more .icon svg {
          width: 20px;
          height: 20px;
          fill: var(--color-service); }
          .greenweave-about-us-service .service-item .btn-more .icon svg polyline,
          .greenweave-about-us-service .service-item .btn-more .icon svg line {
            stroke: var(--color-service); }
        .greenweave-about-us-service .service-item .btn-more .icon.has-text {
          transform: translateX(calc(-100% + 20px));
          transition: all 0.3s; }
  @media (min-width: 992px) {
    .greenweave-about-us-service .heading-col {
      display: flex;
      gap: 30px; }
      .greenweave-about-us-service .heading-col .title2 {
        margin: 0; }
      .greenweave-about-us-service .heading-col .heading-left,
      .greenweave-about-us-service .heading-col .heading-right {
        -ms-flex: 0 0 calc(50% - 15pxx);
        flex: 0 0 calc(50% - 15px);
        max-width: calc(50% - 15px); }
    .greenweave-about-us-service .service-item:hover .img:before {
      opacity: 0; }
    .greenweave-about-us-service .service-item:hover .img:after {
      opacity: 1; }
    .greenweave-about-us-service .service-item:hover .btn-more .icon.has-text {
      transform: translateX(0); } }
  @media (max-width: 991px) {
    .greenweave-about-us-service {
      padding-bottom: 40px; }
      .greenweave-about-us-service .list-service {
        gap: 30px; }
      .greenweave-about-us-service .service-item {
        -ms-flex: 0 0 calc(50% - 15px);
        flex: 0 0 calc(50% - 15px);
        max-width: calc(50% - 15px); }
        .greenweave-about-us-service .service-item:not(:last-child) {
          border-right: none; } }
  @media (max-width: 767px) {
    .greenweave-about-us-service .list-service {
      margin: 30px 0 0; }
    .greenweave-about-us-service .service-item {
      padding: 0;
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%; }
      .greenweave-about-us-service .service-item .img {
        margin-bottom: 20px;
        max-height: 60px; }
      .greenweave-about-us-service .service-item .title {
        font-size: 20px; }
      .greenweave-about-us-service .service-item .btn-more {
        margin-top: 25px; }
        .greenweave-about-us-service .service-item .btn-more .icon.has-text {
          transform: none; } }