body {
  background: linear-gradient(229.92deg, #313131 50.8%, #333131 54.08%, #383232 57.36%, #423434 60.64%, #4f3636 63.92%, #613939 67.2%, #753c3c 70.48%, #8c4040 73.76%, #a44343 77.04%, #bb4747 80.32%, #cf4a4a 83.6%, #e14d4d 86.88%, #ee4f4f 90.16%, #f85151 93.44%, #fd5252 96.72%, #ff5252 100%);
}

main {
  background: url("../../../assets/back-services.png");
  height: 100%;
  padding-top: 100px;
  -webkit-animation: back-services 15s ease-in-out infinite;
          animation: back-services 15s ease-in-out infinite;
}

@-webkit-keyframes back-services {
  0% {
    background-size: 102%;
  }
  50% {
    background-size: 100%;
  }
  100% {
    background-size: 102%;
  }
}

@keyframes back-services {
  0% {
    background-size: 102%;
  }
  50% {
    background-size: 100%;
  }
  100% {
    background-size: 102%;
  }
}

main .main-title {
  background: linear-gradient(93.74deg, #c5fbff 0%, #ffc0c0 100%);
}

main .start {
  background: rgba(33, 33, 33, 0.5);
  -webkit-backdrop-filter: blur(24.5px);
          backdrop-filter: blur(24.5px);
  padding: 20px 40px;
}

@media screen and (max-width: 1220px) {
  main .start {
    padding: 20px 20px;
  }
}

main .start .three-grid {
  display: -ms-grid;
  display: grid;
  grid-gap: 30px;
  -ms-grid-columns: (1fr)[4];
      grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
}

@media screen and (max-width: 1240px) {
  main .start .three-grid {
    -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 950px) {
  main .start .three-grid {
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 600px) {
  main .start .three-grid {
    -ms-grid-columns: (1fr)[1];
        grid-template-columns: repeat(1, 1fr);
  }
}

main .start .three-grid .service-elem {
  display: -ms-grid;
  display: grid;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  overflow: hidden;
  height: 300px;
  -webkit-filter: drop-shadow(0px 11px 24px rgba(0, 0, 0, 0));
          filter: drop-shadow(0px 11px 24px rgba(0, 0, 0, 0));
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
  cursor: pointer;
}

main .start .three-grid .service-elem h4 {
  -ms-grid-row: 1;
  grid-row: 1;
  -ms-grid-column: 1;
  grid-column: 1;
  font-weight: 500;
  font-size: 36px;
  line-height: 44px;
  color: #000000;
  background: #ffffff;
  padding: 5px 20px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

@media screen and (max-width: 1680px) {
  main .start .three-grid .service-elem h4 {
    padding: 5px 10px;
    font-size: 34px;
    line-height: 42px;
  }
}

@media screen and (max-width: 1570px) {
  main .start .three-grid .service-elem h4 {
    font-size: 30px;
    line-height: 39px;
  }
}

@media screen and (max-width: 1440px) {
  main .start .three-grid .service-elem h4 {
    font-size: 26px;
    line-height: 35px;
  }
}

@media screen and (max-width: 1240px) {
  main .start .three-grid .service-elem h4 {
    font-size: 23px;
    line-height: 33px;
  }
}

main .start .three-grid .service-elem .back {
  position: relative;
  z-index: -1;
  -ms-grid-row: 1;
  grid-row: 1;
  -ms-grid-column: 1;
  grid-column: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
  opacity: 0.7;
  width: 100%;
  height: 100%;
  -webkit-transition: 0.3s opacity;
  transition: 0.3s opacity;
}

main .start .three-grid .service-elem .back::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.94%, rgba(0, 0, 0, 0.82)), color-stop(7.52%, rgba(0, 0, 0, 0.812909)), color-stop(14.1%, rgba(0, 0, 0, 0.790882)), color-stop(20.69%, rgba(0, 0, 0, 0.753039)), color-stop(27.27%, rgba(0, 0, 0, 0.699123)), color-stop(33.85%, rgba(0, 0, 0, 0.629945)), color-stop(40.43%, rgba(0, 0, 0, 0.547855)), color-stop(47.01%, rgba(0, 0, 0, 0.456993)), color-stop(53.59%, rgba(0, 0, 0, 0.363007)), color-stop(60.17%, rgba(0, 0, 0, 0.272145)), color-stop(66.76%, rgba(0, 0, 0, 0.190055)), color-stop(73.34%, rgba(0, 0, 0, 0.120877)), color-stop(79.92%, rgba(0, 0, 0, 0.0669611)), color-stop(86.5%, rgba(0, 0, 0, 0.0291182)), color-stop(93.08%, rgba(0, 0, 0, 0.0070907)), color-stop(99.66%, rgba(0, 0, 0, 0)));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.82) 0.94%, rgba(0, 0, 0, 0.812909) 7.52%, rgba(0, 0, 0, 0.790882) 14.1%, rgba(0, 0, 0, 0.753039) 20.69%, rgba(0, 0, 0, 0.699123) 27.27%, rgba(0, 0, 0, 0.629945) 33.85%, rgba(0, 0, 0, 0.547855) 40.43%, rgba(0, 0, 0, 0.456993) 47.01%, rgba(0, 0, 0, 0.363007) 53.59%, rgba(0, 0, 0, 0.272145) 60.17%, rgba(0, 0, 0, 0.190055) 66.76%, rgba(0, 0, 0, 0.120877) 73.34%, rgba(0, 0, 0, 0.0669611) 79.92%, rgba(0, 0, 0, 0.0291182) 86.5%, rgba(0, 0, 0, 0.0070907) 93.08%, rgba(0, 0, 0, 0) 99.66%);
}

main .start .three-grid .service-elem .back img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

main .start .three-grid .service-elem:hover {
  -webkit-transform: translateY(-10px);
          transform: translateY(-10px);
  -webkit-filter: drop-shadow(0px 11px 24px rgba(0, 0, 0, 0.25));
          filter: drop-shadow(0px 11px 24px rgba(0, 0, 0, 0.25));
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
}

main .start .three-grid .service-elem:hover .back {
  opacity: 1;
  -webkit-transition: 0.3s opacity;
  transition: 0.3s opacity;
}

main .start .three-grid .elem-two-columns {
  grid-column: span 2;
}

@media screen and (max-width: 1240px) {
  main .start .three-grid .elem-two-columns {
    grid-column: span 1;
  }
}
/*# sourceMappingURL=services.css.map */