.services {
  background-color: #f0f0ff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-top: 120px;
  padding-bottom: 100px;
}
.services > div h2 {
  text-align: center;
  margin-bottom: 52px;
}
.services > div p {
  padding-left: 100px;
  padding-right: 100px;
  text-align: center;
  line-height: 24px;
}
.services > div .cards {
  margin-top: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 20px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  max-width: 1500px;
}
.services > div .cards .card:nth-child(1) {
  cursor: pointer;
  color: #fff;
  height: 370px;
  width: 370px;
  background: url("../../img/cards/bg/bg1.png") center center/cover no-repeat #495e51;
  border-radius: 16px;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.services > div .cards .card:nth-child(1) span {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 60px;
  margin-left: 20px;
}
.services > div .cards .card:nth-child(1) div {
  margin-top: 24px;
  z-index: 1;
  -webkit-transition: 0.3s ease-in-out transform;
  transition: 0.3s ease-in-out transform;
}
.services > div .cards .card:nth-child(1) div img {
  float: inline-end;
  width: 270px;
  height: auto;
}
.services > div .cards .card:nth-child(1) div:hover {
  -webkit-transition: 0.3s ease-in-out transform;
  transition: 0.3s ease-in-out transform;
  -webkit-transform: scale(1.07);
          transform: scale(1.07);
}
.services > div .cards .card:nth-child(2) {
  cursor: pointer;
  color: #fff;
  height: 370px;
  width: 370px;
  background: url("../../img/cards/bg/bg2.png") center center/cover no-repeat #e6892c;
  border-radius: 16px;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.services > div .cards .card:nth-child(2) span {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 60px;
  margin-left: 20px;
}
.services > div .cards .card:nth-child(2) div {
  margin-top: 24px;
  z-index: 1;
  -webkit-transition: 0.3s ease-in-out transform;
  transition: 0.3s ease-in-out transform;
}
.services > div .cards .card:nth-child(2) div img {
  float: inline-end;
  width: 270px;
  height: auto;
}
.services > div .cards .card:nth-child(2) div:hover {
  -webkit-transition: 0.3s ease-in-out transform;
  transition: 0.3s ease-in-out transform;
  -webkit-transform: scale(1.07);
          transform: scale(1.07);
}
.services > div .cards .card:nth-child(3) {
  cursor: pointer;
  color: #fff;
  height: 370px;
  width: 370px;
  background: url("../../img/cards/bg/bg3.png") center center/cover no-repeat #495e51;
  border-radius: 16px;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.services > div .cards .card:nth-child(3) span {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 60px;
  margin-left: 20px;
}
.services > div .cards .card:nth-child(3) div {
  margin-top: 24px;
  z-index: 1;
  -webkit-transition: 0.3s ease-in-out transform;
  transition: 0.3s ease-in-out transform;
}
.services > div .cards .card:nth-child(3) div img {
  float: inline-end;
  width: 270px;
  height: auto;
}
.services > div .cards .card:nth-child(3) div:hover {
  -webkit-transition: 0.3s ease-in-out transform;
  transition: 0.3s ease-in-out transform;
  -webkit-transform: scale(1.07);
          transform: scale(1.07);
}
.services > div .cards .card:nth-child(4) {
  cursor: pointer;
  color: #fff;
  height: 370px;
  width: 370px;
  background: url("../../img/cards/bg/bg4.png") center center/cover no-repeat rgb(22, 27, 31);
  border-radius: 16px;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.services > div .cards .card:nth-child(4) span {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 60px;
  margin-left: 20px;
}
.services > div .cards .card:nth-child(4) div {
  margin-top: 24px;
  z-index: 1;
  -webkit-transition: 0.3s ease-in-out transform;
  transition: 0.3s ease-in-out transform;
}
.services > div .cards .card:nth-child(4) div img {
  float: inline-end;
  width: 270px;
  height: auto;
}
.services > div .cards .card:nth-child(4) div:hover {
  -webkit-transition: 0.3s ease-in-out transform;
  transition: 0.3s ease-in-out transform;
  -webkit-transform: scale(1.07);
          transform: scale(1.07);
}
.services > div .cards .card:nth-child(5) {
  cursor: pointer;
  color: #fff;
  height: 370px;
  width: 370px;
  background: url("../../img/cards/bg/bg4.png") center center/cover no-repeat rgb(22, 27, 31);
  border-radius: 16px;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.services > div .cards .card:nth-child(5) span {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 60px;
  margin-left: 20px;
}
.services > div .cards .card:nth-child(5) div {
  margin-top: 24px;
  z-index: 1;
  -webkit-transition: 0.3s ease-in-out transform;
  transition: 0.3s ease-in-out transform;
}
.services > div .cards .card:nth-child(5) div img {
  float: inline-end;
  width: 270px;
  height: auto;
}
.services > div .cards .card:nth-child(5) div:hover {
  -webkit-transition: 0.3s ease-in-out transform;
  transition: 0.3s ease-in-out transform;
  -webkit-transform: scale(1.07);
          transform: scale(1.07);
}
.services > div .cards .card:nth-child(6) {
  cursor: pointer;
  color: #fff;
  height: 370px;
  width: 370px;
  background: url("../../img/cards/bg/bg3.png") center center/cover no-repeat #e6892c;
  border-radius: 16px;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.services > div .cards .card:nth-child(6) span {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 60px;
  margin-left: 20px;
}
.services > div .cards .card:nth-child(6) div {
  margin-top: 24px;
  z-index: 1;
  -webkit-transition: 0.3s ease-in-out transform;
  transition: 0.3s ease-in-out transform;
}
.services > div .cards .card:nth-child(6) div img {
  float: inline-end;
  width: 270px;
  height: auto;
}
.services > div .cards .card:nth-child(6) div:hover {
  -webkit-transition: 0.3s ease-in-out transform;
  transition: 0.3s ease-in-out transform;
  -webkit-transform: scale(1.07);
          transform: scale(1.07);
}

@media (max-width: 850px) {
  .services > div p {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (max-width: 370px) {
  .services > div .cards .card:nth-child(1) {
    cursor: pointer;
    color: #fff;
    height: 300px;
    width: 300px;
    background: url("../../img/cards/bg/bg1.png") center center/cover no-repeat #495e51;
    border-radius: 16px;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .services > div .cards .card:nth-child(1) span {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 60px;
    margin-left: 20px;
  }
  .services > div .cards .card:nth-child(1) div {
    margin-top: 24px;
    z-index: 1;
    -webkit-transition: 0.3s ease-in-out transform;
    transition: 0.3s ease-in-out transform;
  }
  .services > div .cards .card:nth-child(1) div img {
    float: inline-end;
    width: 270px;
    height: auto;
  }
  .services > div .cards .card:nth-child(1) div:hover {
    -webkit-transition: 0.3s ease-in-out transform;
    transition: 0.3s ease-in-out transform;
    -webkit-transform: scale(1.07);
            transform: scale(1.07);
  }
  .services > div .cards .card:nth-child(2) {
    cursor: pointer;
    color: #fff;
    height: 300px;
    width: 300px;
    background: url("../../img/cards/bg/bg2.png") center center/cover no-repeat #e6892c;
    border-radius: 16px;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .services > div .cards .card:nth-child(2) span {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 60px;
    margin-left: 20px;
  }
  .services > div .cards .card:nth-child(2) div {
    margin-top: 24px;
    z-index: 1;
    -webkit-transition: 0.3s ease-in-out transform;
    transition: 0.3s ease-in-out transform;
  }
  .services > div .cards .card:nth-child(2) div img {
    float: inline-end;
    width: 270px;
    height: auto;
  }
  .services > div .cards .card:nth-child(2) div:hover {
    -webkit-transition: 0.3s ease-in-out transform;
    transition: 0.3s ease-in-out transform;
    -webkit-transform: scale(1.07);
            transform: scale(1.07);
  }
  .services > div .cards .card:nth-child(3) {
    cursor: pointer;
    color: #fff;
    height: 300px;
    width: 300px;
    background: url("../../img/cards/bg/bg3.png") center center/cover no-repeat #495e51;
    border-radius: 16px;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .services > div .cards .card:nth-child(3) span {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 60px;
    margin-left: 20px;
  }
  .services > div .cards .card:nth-child(3) div {
    margin-top: 24px;
    z-index: 1;
    -webkit-transition: 0.3s ease-in-out transform;
    transition: 0.3s ease-in-out transform;
  }
  .services > div .cards .card:nth-child(3) div img {
    float: inline-end;
    width: 270px;
    height: auto;
  }
  .services > div .cards .card:nth-child(3) div:hover {
    -webkit-transition: 0.3s ease-in-out transform;
    transition: 0.3s ease-in-out transform;
    -webkit-transform: scale(1.07);
            transform: scale(1.07);
  }
  .services > div .cards .card:nth-child(4) {
    cursor: pointer;
    color: #fff;
    height: 300px;
    width: 300px;
    background: url("../../img/cards/bg/bg4.png") center center/cover no-repeat rgb(22, 27, 31);
    border-radius: 16px;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .services > div .cards .card:nth-child(4) span {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 60px;
    margin-left: 20px;
  }
  .services > div .cards .card:nth-child(4) div {
    margin-top: 24px;
    z-index: 1;
    -webkit-transition: 0.3s ease-in-out transform;
    transition: 0.3s ease-in-out transform;
  }
  .services > div .cards .card:nth-child(4) div img {
    float: inline-end;
    width: 270px;
    height: auto;
  }
  .services > div .cards .card:nth-child(4) div:hover {
    -webkit-transition: 0.3s ease-in-out transform;
    transition: 0.3s ease-in-out transform;
    -webkit-transform: scale(1.07);
            transform: scale(1.07);
  }
  .services > div .cards .card:nth-child(5) {
    cursor: pointer;
    color: #fff;
    height: 300px;
    width: 300px;
    background: url("../../img/cards/bg/bg4.png") center center/cover no-repeat rgb(22, 27, 31);
    border-radius: 16px;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .services > div .cards .card:nth-child(5) span {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 60px;
    margin-left: 20px;
  }
  .services > div .cards .card:nth-child(5) div {
    margin-top: 24px;
    z-index: 1;
    -webkit-transition: 0.3s ease-in-out transform;
    transition: 0.3s ease-in-out transform;
  }
  .services > div .cards .card:nth-child(5) div img {
    float: inline-end;
    width: 270px;
    height: auto;
  }
  .services > div .cards .card:nth-child(5) div:hover {
    -webkit-transition: 0.3s ease-in-out transform;
    transition: 0.3s ease-in-out transform;
    -webkit-transform: scale(1.07);
            transform: scale(1.07);
  }
  .services > div .cards .card:nth-child(6) {
    cursor: pointer;
    color: #fff;
    height: 300px;
    width: 300px;
    background: url("../../img/cards/bg/bg3.png") center center/cover no-repeat #e6892c;
    border-radius: 16px;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .services > div .cards .card:nth-child(6) span {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 60px;
    margin-left: 20px;
  }
  .services > div .cards .card:nth-child(6) div {
    margin-top: 24px;
    z-index: 1;
    -webkit-transition: 0.3s ease-in-out transform;
    transition: 0.3s ease-in-out transform;
  }
  .services > div .cards .card:nth-child(6) div img {
    float: inline-end;
    width: 270px;
    height: auto;
  }
  .services > div .cards .card:nth-child(6) div:hover {
    -webkit-transition: 0.3s ease-in-out transform;
    transition: 0.3s ease-in-out transform;
    -webkit-transform: scale(1.07);
            transform: scale(1.07);
  }
}