.widget.c-services.c-services-template-5 {
  position: relative;
  overflow: hidden;
  background: #141616;
  padding: clamp(48px, 12vw, 178px) 0 0;
}
.widget.c-services.c-services-template-5 .widget-title {
  font-family: "Vladivostok", sans-serif !important;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(10px, 3vw, 16px) !important;
  line-height: 152%;
  text-align: right;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #eeeeee;
}

.widget.c-services.c-services-template-5 .widget-content {
  margin: clamp(31px, 6vw, 51px) 0 0 0;
  position: relative;
}
.widget.c-services.c-services-template-5 .widget-items {
  max-width: 100%;
}
.widget.c-services.c-services-template-5 .widget-item {
  width: 870px;
}
.widget.c-services.c-services-template-5 .widget-item-content {
  display: block;
  color: #404040;
  text-decoration: none;
  -webkit-transition-duration: 0.35s;
  -moz-transition-duration: 0.35s;
  -ms-transition-duration: 0.35s;
  -o-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transition-property: color;
  -moz-transition-property: color;
  -ms-transition-property: color;
  -o-transition-property: color;
  transition-property: color;
}
.widget.c-services.c-services-template-5 .widget-item-picture-wrap {
  position: relative;
  overflow: hidden;
  margin: 0 0 clamp(17px, 5vw, 36px);
  height: clamp(126px, 38vw, 393px);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.widget.c-services.c-services-template-5 .widget-item-picture-wrap:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
  pointer-events: none;

  -webkit-transition: opacity 0.4s ease-out;
  -moz-transition: opacity 0.4s ease-out;
  -ms-transition: opacity 0.4s ease-out;
  -o-transition: opacity 0.4s ease-out;
  transition: opacity 0.4s ease-out;
}
.widget.c-services.c-services-template-5
  .widget-item.swiper-slide-active
  .widget-item-picture-wrap:after {
  opacity: 0;
}

.widget.c-services.c-services-template-5 .widget-item-picture-wrap:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
  pointer-events: none;
  opacity: 0;
  z-index: 1;

  -webkit-transition: opacity 0.4s ease-out;
  -moz-transition: opacity 0.4s ease-out;
  -ms-transition: opacity 0.4s ease-out;
  -o-transition: opacity 0.4s ease-out;
  transition: opacity 0.4s ease-out;
}
.widget.c-services.c-services-template-5
  .widget-item-content:hover
  .widget-item-picture-wrap:before {
  opacity: 1;
}

.widget.c-services.c-services-template-5 .mouse-custom {
  position: absolute;
  z-index: 3;
  left: calc(50% + (166px / 2));
  top: 52%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border: 1px solid #66c3b1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;

  -webkit-transition:
    opacity 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.1s linear;
  -moz-transition:
    opacity 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.1s linear;
  -ms-transition:
    opacity 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.1s linear;
  -o-transition:
    opacity 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.1s linear;
  transition:
    opacity 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.1s linear;
}
.widget.c-services.c-services-template-5
  .widget-item-content:hover
  .mouse-custom {
  opacity: 1;
}
.widget.c-services.c-services-template-5 .mouse-custom-wrapper {
  position: absolute;
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 18px;
  line-height: 150%;
  color: #fcffff;
  white-space: nowrap;
  right: 0;
  width: 248px;
  opacity: 0;
  overflow: hidden;

  -webkit-transition:
    transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  -moz-transition:
    transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  -ms-transition:
    transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  -o-transition:
    transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition:
    transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.widget.c-services.c-services-template-5
  .widget-item-content:hover
  .mouse-custom-wrapper {
  opacity: 1;
}
.widget.c-services.c-services-template-5 .mouse-custom-wrapper span {
  transform: translateX(248px);
  display: flex;
  align-items: center;

  -webkit-transition:
    transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  -moz-transition:
    transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  -ms-transition:
    transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  -o-transition:
    transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition:
    transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.widget.c-services.c-services-template-5
  .widget-item-content:hover
  .mouse-custom-wrapper
  span {
  transform: none;
}
.widget.c-services.c-services-template-5 .mouse-custom-wrapper svg {
  margin: 0 0 0 16px;
  flex: 0 0 52px;
  height: 100%;
  transform: translateY(1px);
}

.widget.c-services.c-services-template-5 .widget-item-picture {
  position: absolute;
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 110%;
  width: 110%;

  -webkit-transition: transform 0.6s cubic-bezier(0, 0, 0.2, 1) !important;
  -moz-transition: transform 0.6s cubic-bezier(0, 0, 0.2, 1) !important;
  -ms-transition: transform 0.6s cubic-bezier(0, 0, 0.2, 1) !important;
  -o-transition: transform 0.6s cubic-bezier(0, 0, 0.2, 1) !important;
  transition: transform 0.6s cubic-bezier(0, 0, 0.2, 1) !important;
}
.widget.c-services.c-services-template-5
  .widget-item-content:hover
  .widget-item-picture {
  -webkit-transition: transform 0.1s linear !important;
  -moz-transition: transform 0.1s linear !important;
  -ms-transition: transform 0.1s linear !important;
  -o-transition: transform 0.1s linear !important;
  transition: transform 0.1s linear !important;
}
.widget.c-services.c-services-template-5
  .widget-item-picture[data-lazyload-use="true"] {
  background-color: #f2f2f2;
}
.widget.c-services.c-services-template-5 .widget-item-name {
  display: block;
  font-family: "Viaoda Libre", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(22px, 4vw, 64px);
  line-height: 110%;
  letter-spacing: 0.01em;
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #959595;

  -webkit-transition:
    color 0.4s ease-out,
    -webkit-text-stroke-color 0.4s ease-out;
  -moz-transition:
    color 0.4s ease-out,
    -webkit-text-stroke-color 0.4s ease-out;
  -ms-transition:
    color 0.4s ease-out,
    -webkit-text-stroke-color 0.4s ease-out;
  -o-transition:
    color 0.4s ease-out,
    -webkit-text-stroke-color 0.4s ease-out;
  transition:
    color 0.4s ease-out,
    -webkit-text-stroke-color 0.4s ease-out;
}
.widget.c-services.c-services-template-5
  .swiper-slide-active
  .widget-item-name {
  color: #fcffff;
  -webkit-text-stroke-color: transparent;
}
.widget.c-services.c-services-template-5 [data-grid="2"] .widget-item-picture {
  padding-top: 50%;
}
.widget.c-services.c-services-template-5 [data-grid="3"] .widget-item-picture {
  padding-top: 60%;
}
.widget.c-services.c-services-template-5 [data-grid="4"] .widget-item-picture {
  padding-top: 132%;
}
.widget.c-services.c-services-template-5 .widget-header {
  max-width: 910px;
  margin: 0 auto;
  padding: 0 20px;
}
.widget.c-services.c-services-template-5 .widget-all-container {
  display: none;
}
.widget.c-services.c-services-template-5 .widget-all-button {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: #808080;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.widget.c-services.c-services-template-5 .widget-all-button i {
  display: none;
  font-size: 18px;
}

.widget.c-services.c-services-template-5 .widget-slider-tools-container {
  position: absolute;
  top: 29%;
  left: calc(50% - 23px);
  transform: translate(-50%, -50%);
  max-width: 1190px;
  width: 64%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 0;
  pointer-events: none;
}
.widget.c-services.c-services-template-5 .dots-container {
  display: flex;
  flex-direction: column;
  pointer-events: all;
  width: auto;
  margin: -15px 0;
}
.widget.c-services.c-services-template-5
  .dots-container
  .swiper-pagination-bullet {
  opacity: 1;
  width: 5px;
  height: 5px;
  background: #4f5555;
  padding: 0;
  margin: 15px 0;

  -webkit-transition: background-color 0.3s ease-out;
  -moz-transition: background-color 0.3s ease-out;
  -ms-transition: background-color 0.3s ease-out;
  -o-transition: background-color 0.3s ease-out;
  transition: background-color 0.3s ease-out;
}
.widget.c-services.c-services-template-5
  .dots-container
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #d9d9d9;
}

.widget.c-services.c-services-template-5 .counter-slide-container {
  pointer-events: all;
  display: flex;
  align-items: flex-end;
}
.widget.c-services.c-services-template-5 .counter-slide-container .index {
  font-family: "Viaoda Libre", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 59px;
  line-height: 110%;
  letter-spacing: 0.01em;
  color: #eeeeee;
}
.widget.c-services.c-services-template-5 .counter-slide-container .count {
  font-family: "Viaoda Libre", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 110%;
  letter-spacing: 0.01em;
  color: #7b7b7b;
  position: relative;
  transform: translate(21px, 51px);
}
.widget.c-services.c-services-template-5
  .counter-slide-container
  .count:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 66px;
  height: 1px;
  background: #7b7b7b;
  transform: rotate(-46deg) translate(-16px, -42px);
}

.widget.c-services.c-services-template-5 .navigation-container {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  max-width: 910px;
  margin: -28px auto 0;
  padding: 0 20px;
}
.widget.c-services.c-services-template-5 .navigation-container .nav:hover path {
  stroke: #66c3b1;
}
.widget.c-services.c-services-template-5 .navigation-container .nav {
  cursor: pointer;
}

.widget.c-services.c-services-template-5 .index-block {
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(76px, 22px);
}

@media all and (max-width: 1550px) {
  .widget.c-services.c-services-template-5 .widget-slider-tools-container {
    width: 74%;
  }
  .widget.c-services.c-services-template-5 .counter-slide-container .index {
    font-size: 46px;
  }
  .widget.c-services.c-services-template-5 .navigation-container {
    justify-content: center;
    margin: 30px auto 0;
  }
  .widget.c-services.c-services-template-5 .widget-header {
    max-width: 61%;
  }
}
@media all and (max-width: 1200px) {
  .widget.c-services.c-services-template-5 .index-block {
    display: flex;
    justify-content: flex-end;
    position: relative;
    transform: translateX(-69px);
    margin: 0 0 16px;
  }
  .widget.c-services.c-services-template-5 .index-block.right:before {
    transform: translate(calc(100% + 16px));
  }
  .widget.c-services.c-services-template-5 .widget-slider-tools-container {
    width: 87%;
  }
  .widget.c-services.c-services-template-5 .widget-header {
    max-width: calc(74% + 7px);
  }
}
@media all and (max-width: 1000px) {
  .widget.c-services.c-services-template-5 .widget-slider-tools-container,
  .widget.c-services.c-services-template-5 .navigation-container {
    display: none;
  }

  .widget.c-services.c-services-template-5 .mouse-custom {
    display: flex;
    width: 34px;
    height: 34px;
  }
  .widget.c-services.c-services-template-5 .mouse-custom-wrapper {
    font-size: clamp(8px, 3vw, 12px);
    width: 165px;
  }
  .widget.c-services.c-services-template-5 .mouse-custom-wrapper svg {
    flex: 0 0 26px;
  }
  .widget.c-services.c-services-template-5
    .widget-item-content:hover
    .mouse-custom {
    opacity: 1;
  }
  .widget.c-services.c-services-template-5
    .widget-item-content:hover
    .mouse-custom-wrapper {
    opacity: 1;
  }
  .widget.c-services.c-services-template-5
    .widget-item-content:hover
    .mouse-custom-wrapper
    span {
    transform: none;
  }
  .widget.c-services.c-services-template-5 .widget-header {
    max-width: 80%;
  }
}
@media all and (max-width: 550px) {
  .widget.c-services.c-services-template-5 .mouse-custom-wrapper {
    font-size: 8px;
    width: 113px;
  }
  .widget.c-services.c-services-template-5 .mouse-custom {
    width: 21px;
    height: 21px;
  }
  .widget.c-services.c-services-template-5 .mouse-custom-wrapper svg {
    margin: 0 0 0 7px;
    transform: translateY(0.5px);
  }
  .widget.c-services.c-services-template-5 .mouse-custom {
    left: calc(50% + (100px / 2));
  }
  .widget.c-services.c-services-template-5 .widget-header {
    max-width: 100%;
  }
  .widget.c-services.c-services-template-5 .widget-items .swiper-wrapper,
  .widget.c-services.c-services-template-5 .widget-item-picture {
    will-change: transform;
  }
}