.servicesWrapper {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 120px;
}
.servicesWrapper .mainBaner {
  padding: 58px 101px;
  border-radius: 0px 0px 30px 30px;
  background: linear-gradient(154deg, #B200FF -18.49%, #000 85.3%, #FF00F5 173.71%);
  position: relative;
}
.servicesWrapper .mainBaner * {
  z-index: 2;
}
.servicesWrapper .mainBaner .bg {
  position: absolute;
  right: 0;
  z-index: 1;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background-repeat: no-repeat;
  background-position: right;
  background-image: url("/main-images/servicesBaner.png");
}
.servicesWrapper .mainBaner .content {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 551px;
}
.servicesWrapper .mainBaner .content h2 {
  color: #FFF;
  font-family: "Bebas";
  font-size: 50px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 50px */
}
.servicesWrapper .mainBaner .content p {
  color: #FFF;
  font-variant-numeric: lining-nums proportional-nums;
  font-family: Montserrat;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 20.8px */
}
.servicesWrapper .mainBaner .content a {
  width: fit-content;
  color: #FFF;
  font-family: Montserrat;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 16px */
  padding: 20px 33px;
  border-radius: 30px;
  background: linear-gradient(170deg, #0F0098 -29.55%, #B200FF 48.7%, #FF00F5 94.76%);
}
.servicesWrapper .cases {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 28px;
}
.servicesWrapper .cases .case {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 30px;
  border: 0.5px solid #E0E0E0;
  background: #FFF;
  box-shadow: 0px 8.148px 6.519px 0px rgba(0, 0, 0, 0.03), 0px 1.852px 3.148px 0px rgba(0, 0, 0, 0.02);
  padding: 40px 0px 20px 30px;
  width: 590px;
  background-repeat: no-repeat;
  background-position: right top;
}
.servicesWrapper .cases .case img {
  display: none;
}
.servicesWrapper .cases .case.case1 {
  background-image: url("/main-images/serv1.png");
}
.servicesWrapper .cases .case.case1 p.desc {
  width: 320px;
}
.servicesWrapper .cases .case.case2 {
  background-image: url("/main-images/serv2.png");
}
.servicesWrapper .cases .case.case2 p.desc {
  width: 306px;
}
.servicesWrapper .cases .case.case3 {
  background-image: url("/main-images/serv3.png");
}
.servicesWrapper .cases .case.case3 h4 {
  width: 386px;
}
.servicesWrapper .cases .case.case3 p.desc {
  width: 368px;
}
.servicesWrapper .cases .case.case4 {
  background-image: url("/main-images/serv4.png");
}
.servicesWrapper .cases .case.case4 h4 {
  width: 250px;
}
.servicesWrapper .cases .case.case4 p.desc {
  width: 334px;
}
.servicesWrapper .cases .case h4 {
  color: #690097;
  font-family: "Bebas";
  font-size: 35px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 35px */
}
.servicesWrapper .cases .case h4 a {
  color: #FF00F5;
  font-family: "Bebas";
  font-size: 35px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 35px */
  text-decoration-line: underline !important;
}
.servicesWrapper .cases .case p.desc {
  color: #170021;
  font-variant-numeric: lining-nums proportional-nums;
  font-family: Montserrat;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 20.8px */
}
.servicesWrapper .cases .case .openApplic {
  color: #690097;
  font-family: Montserrat;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 15px */
  padding: 18px 25px;
  border-radius: 30px;
  border: 1px solid #690097;
  width: fit-content;
  margin-top: 10px;
  transition: 0.5s;
}
.servicesWrapper .cases .case .openApplic:hover {
  box-shadow: 0px 0px 5px 0px rgba(105, 0, 151, 0.7607843137);
}
.servicesWrapper .bot {
  display: flex;
  gap: 20px;
  padding-top: 20px;
}
.servicesWrapper .bot .case {
  border-radius: 30px;
  border: 0.5px solid #E0E0E0;
  background: #FFF;
  box-shadow: 0px 8.148px 6.519px 0px rgba(0, 0, 0, 0.03), 0px 1.852px 3.148px 0px rgba(0, 0, 0, 0.02);
  padding: 40px 30px;
  background-repeat: no-repeat;
  background-position: right top;
  background-image: url("/main-images/serv5.png");
  min-width: 387px;
  max-width: 387px;
}
.servicesWrapper .bot .case h4 {
  color: #690097;
  font-family: "Bebas";
  font-size: 35px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 35px */
}
.servicesWrapper .bot .serviceFormWrapper {
  display: flex;
  gap: 78px;
  padding: 40px 30px;
  border-radius: 30px;
  background-image: linear-gradient(170deg, #B200FF -18.49%, #000 110.3%), url(/main-images/serviceFormBg.png);
  background-repeat: no-repeat;
  background-position: right top;
  background-blend-mode: color;
  position: relative;
}
.servicesWrapper .bot .serviceFormWrapper * {
  z-index: 2;
}
.servicesWrapper .bot .serviceFormWrapper .bg {
  background-image: url("/main-images/serviceFormBg2.png");
  background-repeat: no-repeat;
  background-position: left bottom;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border-radius: 30px;
}
.servicesWrapper .bot .serviceFormWrapper .left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 305px;
  max-width: 305px;
}
.servicesWrapper .bot .serviceFormWrapper .left h4 {
  color: #FFF;
  font-family: "Bebas";
  font-size: 35px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 35px */
  margin-bottom: 0;
}
.servicesWrapper .bot .serviceFormWrapper .left p {
  color: #FFF;
  font-family: Montserrat;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 20.8px */
}
.servicesWrapper .bot .serviceFormWrapper .serviceForm {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.servicesWrapper .bot .serviceFormWrapper .serviceForm .checkbox {
  padding-top: 5px;
}
.servicesWrapper .bot .serviceFormWrapper .serviceForm button {
  color: #FFF;
  font-family: Montserrat;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 18px */
  padding: 20px 0px;
  width: 100%;
  margin-top: 10px;
  border-radius: 30px;
  background: linear-gradient(127deg, #0F0098 -29.55%, #B200FF 48.7%, #FF00F5 94.76%);
}

@media screen and (max-width: 1250px) {
  .servicesWrapper {
    max-width: 95%;
  }
  .servicesWrapper .cases {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .servicesWrapper .cases .case {
    width: 100%;
  }
  .servicesWrapper .bot {
    flex-direction: column;
  }
  .servicesWrapper .bot .case {
    width: 100%;
    height: 300px;
    max-width: 100%;
    order: 1;
  }
}
@media screen and (max-width: 900px) {
  .servicesWrapper .mainBaner .content {
    width: 100%;
    align-items: center;
  }
  .servicesWrapper .mainBaner .content * {
    text-align: center;
  }
  .servicesWrapper .mainBaner .bg {
    display: none;
  }
  .servicesWrapper .cases {
    display: flex;
    flex-direction: column;
  }
  .servicesWrapper .cases .case {
    width: 100%;
  }
  .servicesWrapper .cases .case .sendApplic {
    z-index: 5;
    position: relative;
  }
  .servicesWrapper .bot .case {
    min-width: 100%;
    background-size: 40%;
    height: 217px;
  }
  .servicesWrapper .bot .case h4 {
    font-size: 25px;
  }
  .servicesWrapper .bot .serviceFormWrapper {
    background-image: linear-gradient(170deg, #B200FF -18.49%, #000 110.3%), url(/main-images/servFormBg2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    height: 600px;
    background-blend-mode: lighten;
    padding: 60px 35px;
  }
  .servicesWrapper .bot .serviceFormWrapper .bg {
    display: block;
    background-image: url("/main-images/servFormBg3.png");
    top: 0;
    right: 35px;
    left: auto;
    background-position: right top;
  }
  .servicesWrapper .bot .serviceFormWrapper .serviceForm {
    width: 100%;
  }
  .servicesWrapper .bot .serviceFormWrapper .left {
    display: none;
  }
}
@media screen and (max-width: 600px) {
  .servicesWrapper .mainBaner {
    padding: 69px 23px 0px 23px;
    height: 535px;
  }
  .servicesWrapper .mainBaner .content {
    width: 100%;
    align-items: center;
    gap: 10px;
  }
  .servicesWrapper .mainBaner .content * {
    text-align: center;
  }
  .servicesWrapper .mainBaner .content h2 {
    font-size: 55px;
  }
  .servicesWrapper .mainBaner .content p {
    font-size: 14px;
  }
  .servicesWrapper .mainBaner .content a {
    margin-top: 10px;
  }
  .servicesWrapper .mainBaner .bg {
    display: block;
    left: 0;
    bottom: 0;
    background-image: url("/main-images/servicesBaner2.png");
    background-position: center bottom;
    background-size: cover;
  }
  .servicesWrapper .cases .case {
    padding: 40px 30px 0px 30px;
    background-image: none !important;
  }
  .servicesWrapper .cases .case img {
    display: block;
    align-self: center;
    margin-top: -40px;
  }
  .servicesWrapper .cases .case.case3 img {
    margin-left: 60px;
  }
  .servicesWrapper .cases .case.case4 img {
    margin-top: -80px;
  }
  .servicesWrapper .cases .case h4 {
    font-size: 25px;
    width: 100% !important;
  }
  .servicesWrapper .cases .case h4 a {
    font-size: 25px;
  }
  .servicesWrapper .cases .case p {
    width: 100% !important;
    font-size: 14px;
  }
  .servicesWrapper .cases .case .sendApplic button:not(.closePopup) {
    width: 100%;
  }
}