#utp {
   width: 100%;
   height: 482px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-radius: 16px;
   background: url('../images/bg-service-utp.webp') no-repeat center right, linear-gradient(98deg, #0D6BC7 5.86%, #063461 175.35%);
   margin-top: 20px;
   padding: 60px;
   position: relative;
}

#utp .title {
   color: #FFF;
   font-size: 40px;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
   max-width: 746px;
   position: relative;
   z-index: 2;
}

#utp ul {
   padding: 40px 20px;
   display: flex;
   flex-direction: column;
   gap: 28px;
   max-width: 618px;
}

#utp ul li {
   color: #FFF;
   font-size: 20px;
   font-style: normal;
   font-weight: 600;
   line-height: 140%;
}

#utp img.bg-right {
   position: absolute;
   bottom: 0;
   right: 65px;
   height: 525px;
}

#utp .content {
   /* margin-top: 50px; */
}

#utp .advantages {
   display: flex;
   flex-direction: column;
   gap: 22px;
   margin-top: 45px;
}

#utp .advantages .item {
   width: auto;
   height: auto;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 18px;
}

#utp .advantages .item picture {
   width: 44px;
   height: 44px;
}

#utp .advantages .item picture img {
   object-fit: none;
}

#utp .advantages .item picture i.mso {
   font-size: 32px;
   color: #fff;
}

#utp .advantages .item span {
   color: #FFF;
   font-size: 20px;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
}

#utp .advantages .item {}

.notification {
   width: 100%;
   height: auto;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 16px;
   border: 1px solid #0D6BC7;
   background: #FFF;
   padding: 40px 60px;
   gap: 40px;
   margin: 70px auto;
}

.notification i.mso {
   width: 84px;
   height: 84px;
   font-size: 84px;
   color: #6BA7E2;
}

.notification span {
   color: #0D6BC7;
   font-size: 20px;
   font-style: normal;
   font-weight: 600;
   line-height: 140%;
}

.about .content {
   align-items: center;
   margin: 0;
}

.about .content picture {
   min-width: 510px;
   height: 310px;
}

#advantages-2 {
   width: 100%;
   height: auto;
   padding: 140px 0;
}

#advantages-2 .items {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 34px;
   margin-top: 40px;
}

#advantages-2 .items .item {
   width: 400px;
   height: 140px;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 12px;
   border-radius: 16px;
   background: #F6F8FB;
   padding: 32px 21px;
}

#advantages-2 .items .item img {
   width: 75px;
   height: 75px;
   display: block;
}

#advantages-2 .items .item span {
   color: #0D2C4B;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
}

#steps {
   margin: 0 auto;
}

#steps .items {
   gap: 100px;
}

#steps .items .item ul li:last-child {
   font-weight: 400;
}

#steps .items .item ul li:last-child::marker {
   color: #8797A6;
}

#advantages-3 {
   width: 100%;
   height: auto;
   padding: 140px 0;
}

#advantages-3 .items {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   flex-wrap: wrap;
}

#advantages-3 .items .item {
   width: 45%;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 30px;
   margin-top: 90px;
}

#advantages-3 .items .item:nth-child(2n-1) {
   width: 55%;
}

#advantages-3 .items .item .icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 76px;
   height: 76px;
   border-radius: 600px;
   background: #F6F8FB;
}

#advantages-3 .items .item .icon img {
   max-width: 35.35px;
   max-height: 42.339px;
}

#advantages-3 .items .item span {
   max-width: 510px;
}

#partners {
   padding: 0;
   margin-bottom: 140px;
}

.about h3.title {
   margin-bottom: 40px;
}

#reviews {
   padding-top: 60px;
}

.bread {
   margin: 20px auto 40px;
}

.steps {
   margin: 60px auto;
}

.steps p {
   color: #0D2C4B;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 140%;
   max-width: 678px;
   margin-top: 20px;
   margin-bottom: 30px;
}

.steps .items {
   width: auto;
   max-width: 860px;
   display: table;
   margin: 0 auto;
   position: relative;
   overflow: hidden;
}

.steps .items .hr {
   width: 1px;
   height: calc(100% - 5px);
   background: #C8D3E3;
   display: block;
   position: absolute;
   z-index: -1;
   left: 45px;
}

.steps .items .item {
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   width: auto;
   height: auto;
   gap: 30px;
   cursor: default;
   margin-bottom: 40px;
}

.steps .items .item:last-child {
   margin-bottom: 0px;
}

.steps .items .item .circle {
   width: 90px;
   min-width: 90px;
   height: 90px;
   border-radius: 600px;
   background: #F6F8FB;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #0D2C4B;
   font-size: 20px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
   border: 14px solid #fff;
}

.steps .items .item .data {}

.steps .items .item .data .title {
   height: 76px;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   color: #0D2C4B;
   font-size: 20px;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
}

.steps .items .item .data .text {
   color: #0D2C4B;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
}

.steps .items .item:hover .circle {
   background: #DBEDFF;
}


#advantages-4 {
   width: 100%;
   height: auto;
   padding-top: 20px;
   padding-bottom: 100px;
}

#advantages-4 .items {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 34px;
   margin-top: 40px;
}

#advantages-4 .items .item {
   width: 400px;
   height: 230px;
   display: table;
   gap: 12px;
   border-radius: 16px;
   background: #F6F8FB;
   padding: 30px;
   cursor: default;
}

#advantages-4 .items .item .title {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 12px;
   margin-bottom: 18px;
}

#advantages-4 .items .item img {
   width: 50px;
   height: 50px;
   display: block;
}

#advantages-4 .items .item .title span {
   color: #0D2C4B;
   font-size: 20px;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
}

#advantages-4 .items .item .text {
   color: #0D2C4B;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
}

#utp-mobile {
   width: 100%;
   height: auto;
}

#utp-mobile .title {
   color: #0D2C4B;
   font-size: 20px;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
}

#utp-mobile .bg {
   display: block;
   width: 100%;
   height: 316px;
   margin: 30px auto;
   overflow: hidden;
   background: url('../images/bg-service-utp.webp') no-repeat center right, linear-gradient(98deg, #0D6BC7 5.86%, #063461 175.35%);
}

#utp-mobile .bg img {
   height: calc(100% + 30px);
   position: relative;
   top: -30px;
   left: -50px;
}

#utp-mobile .advantages,
#utp-mobile ul {
   width: 100%;
   height: auto;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   flex-wrap: wrap;
   gap: 15px;
}

#utp-mobile .advantages .item {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 14px;
   width: 100%;
}

#utp-mobile .advantages .item picture i.mso {
   font-size: 32px;
   color: #6BA7E2;
}

#utp-mobile .advantages .item span {
   color: #0D2C4B;
   font-size: 16px;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
}

#utp-mobile .btn-green {
   text-align: center;
   width: 100%;
}

#utp-mobile ul {
   padding-left: 25px;
   padding-right: 25px;
}

#utp-mobile ul li {
   color: #0D2C4B;
   font-size: 16px;
   margin: 0 15px;
}

#utp-mobile ul li::marker {
   color: #6BA7E2;
   margin-right: -25px;
}

#license {
   padding-bottom: 140px;
}

#comments {
   padding-top: 0px;
}

@media only screen and (max-width: 1200px) {}

@media only screen and (max-width: 1100px) {

   #utp {
      margin-top: 80px;
      margin-bottom: 310px;
      padding: 25px;
      width: 100%;
      height: 287px;
      border-radius: 0;
      display: flex;
      flex-wrap: wrap;
   }

   #utp .title {
      display: block;
      width: 100%;
      color: #0D2C4B;
      font-size: 20px;
      order: 1;
      margin-top: -100px;
   }

   #utp .content {
      margin-top: 20px;
   }

   #utp img.bg-right {
      position: unset;
      height: calc(100% + 34px);
      margin-top: -9px;
      order: 2;
   }

   #utp ul,
   #utp .advantages {
      order: 3;
      gap: 20px;
      padding: 0;
      padding-top: 34px;
   }

   .notification {
      margin: 0;
      padding: 20px;
      min-width: 0;
      margin: 60px auto;
   }

   .notification i.mso {
      display: none;
   }

   .notification span {
      font-size: 16px;
   }

   .about .content {
      flex-wrap: wrap;
   }

   .about .content picture {
      min-width: 0;
      width: 100%;
   }

   #advantages-2 {
      padding: 60px 0;
   }

   #advantages-2 .items .item {
      width: 100%;
   }

   #steps .items {
      gap: 45px;
   }

   #advantages-3 {
      padding: 60px 0;
   }

   #advantages-3 .items {
      flex-wrap: wrap;
   }

   #advantages-3 .items .item {
      margin-top: 20px;
      width: 100% !important;
      gap: 12px;
   }

   #advantages-3 .items .item .icon {
      min-width: 76px;
   }
}

@media only screen and (max-width: 500px) {

   #utp {
      margin-bottom: 390px;
   }

   .about {
      margin-bottom: 60px;
   }

   .about .content {
      gap: 20px;
   }

   .about .content picture {
      height: auto;
      order: 1;
   }

   .about .content .text {
      order: 2;
   }

   .about .content .text {
      font-size: 12px;
   }

   #advantages-2 .items {
      gap: 12px;
   }

   #advantages-2 .items .item {
      padding: 30px 20px;
      height: auto;
   }

   #advantages-2 .items .item span {
      font-size: 14px;
   }

   #advantages-2 .items .item span br {
      display: none;
   }

   #advantages-3 .items .item span {
      color: #0D2C4B;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
   }

   #advantages-3 .items .item span br {
      display: none;
   }

   #partners {
      margin-bottom: 60px;
   }

   .about h3.title {
      margin-bottom: 20px;
   }

   #reviews {
      padding-top: 0px;
      padding-bottom: 60px;
   }

   .steps .items .item .circle {
      width: 42px;
      min-width: 42px;
      height: 42px;
      border: 2px solid #fff;
   }

   .steps p {
      font-size: 16px;
   }

   .steps .items .hr {
      left: 20px;
   }

   .steps .items .item {
      gap: 12px;
   }

   .steps .items .item .data .title {
      font-size: 16px;
      font-weight: 500;
      height: auto;
      padding-top: 12px;
      padding-bottom: 12px;
   }

   .steps .items .item .data .text {
      color: #8797A6;
      font-size: 12px;
      font-weight: 400;
   }

   .steps .items .item .data .text br {
      display: none;
   }

   #advantages-4 {
      padding-top: 0px;
      padding-bottom: 60px;
   }

   #advantages-4 .items {
      margin-top: 20px;
      gap: 13px;
   }

   #advantages-4 .items .item {
      width: 100%;
      padding: 20px;
      height: auto;
   }

   #advantages-4 .items .item .title span {
      font-size: 16px;
      font-weight: 600;
   }

   #advantages-4 .items .item .text {
      font-size: 12px;
      font-weight: 400;
   }
}