.elementor-3637 .elementor-element.elementor-element-88e7825{--display:flex;}@media(min-width:768px){.elementor-3637 .elementor-element.elementor-element-88e7825{--width:550px;}}/* Start custom CSS for html, class: .elementor-element-e0cf6fa */.service-single-box {
  background: #ffff;
  border-radius: 15px;
  padding: 45px 35px 42px;
  position: relative;
  z-index: 1;
  margin-bottom: 30px;
}
.service-single-box::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background: url('/wp-content/uploads/elementor/css/assets/images/service6.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  left: 0;
  top: 0;
  z-index: -1;
  clip-path: polygon(50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 50%);
  transition: 0.4s;
}
.service-icon {
  margin-bottom: 33px;
}

.service-icon img {
  filter: brightness(1) invert(0);
  transition: 0.5s;
}

h3.service-title {
  font-size: 22px;
  color: #050a1e;
  font-weight: 600;
  font-family: var(--heading-font);
  margin: 0;
  transition: 0.5s;
  cursor: pointer;
}

p.service-text {
  margin: 0;
  padding: 11px 0 38px;
  transition: 0.5s;
}



.service-btn i {
  display: inline-block;
  color: var(--primary);
  background: #f4f4f4;
  width: 35px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  border-radius: 50%;
  font-size: 14px;
  margin-right: 11px;
  transition: 0.5s;
}

.service-single-box:hover::before {
    clip-path: polygon(25% -70%, 75% -70%, 120% 50%, 75% 170%, 25% 170%, -20% 50%);

}
.service-single-box:hover .link{
    background-color: #fff;
    color: #020b24;
}
.service-single-box::before {
    background: #239bec;
}

.link {
  background-color: #239bec;
  color: #fff;
  padding: 4px 24px;
  border-radius: 4px;
  text-decoration: none;
}

.link--arrowed {
  display: inline-block;
  height: 39px;
  line-height: 0;

  .arrow-icon {
    position: relative;
    top: -1px;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
    vertical-align: middle;
  }

  .arrow-icon--circle {
    transition: stroke-dashoffset 0.3s ease;
    stroke-dasharray: 95;
    stroke-dashoffset: 95;
  }

  &:hover {
    .arrow-icon {
      transform: translate3d(5px, 0, 0);
    }

    .arrow-icon--circle {
      stroke-dashoffset: 0;
      stroke: #239bec;
    }
    .arrow-icon--arrow {
      stroke: #239bec; / Arrow color matches /
    }
    
  }
}

.service-single-box:hover::before {
  clip-path: polygon(
    25% -70%,
    75% -70%,
    120% 50%,
    75% 170%,
    25% 170%,
    -20% 50%
  );
}

.service-single-box:hover .service-icon img {
  filter: brightness(0) invert(1);
}

.service-single-box:hover h3.service-title {
  color: #fff;
}

.service-single-box:hover p.service-text {
  color: #fff;
}

.service-single-box:hover .service-btn i {
  color: #fff;
  background: #ff6d3e;
}/* End custom CSS */