html, body {
    overflow-x: hidden !important;
}

th {
font-size: 2rem !important;
text-align: center !important;
}

tr {
background-color: #f2f2f2;
font-size: 0.875rem;
}

s {
color: darkgray;
}

.card > .d-flex > button.btn-success {
margin: 0 auto;
}

.card {
   margin-bottom: 32px;
}

i {
font-size: 2rem;
}

.custom-card {
position: relative;
height: 200px; /* Adjust as needed */
overflow: hidden;
cursor: pointer;
background-color: #bfbfbf;
color: white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}

.card-front, .card-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s;
padding: 20px;
box-sizing: border-box;
}

.card-front-header {
margin-bottom: 0;
}

.card-front-text {
font-size: 0.875rem;
color: #896e6e;
margin-bottom: 0;
}

.card-front {
flex-direction: column;
z-index: 2;
opacity: 1;
}

.card-back {
z-index: 1;
opacity: 0;
top: 100%; /* Start below the card */
background-color: #858585;
}

.card-back p {
font-size: 0.875rem;
line-height: 16px;
text-align: start;
margin: auto;
}

.custom-card:hover .card-front {
opacity: 0;
top: -100%; /* Move above the card */
}

.custom-card:hover .card-back {
opacity: 1;
top: 0; /* Slide into view */
}

.cards_second {
margin-top: 30px;
}

@media only screen and (max-width: 992px) {
.row_7_width {
    width: 100%;
}

.cards_second {
    margin-top: 0px;
}
}

@media only screen and (max-width: 768px) {
.row_7_width {
    width: 100%;
}
}

.h2_header {
    font-size: 40px !important; color: black; font-weight: 500;
}

.promo-block {
    position: relative;
    background: url('https://xn------6cdeuccsfg1anduoccnf1abjcmn7lwd5e.xn--p1ai/wp-content/uploads/2020/09/single-page-5.jpg') no-repeat center center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.promo-block__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 15px;
    padding: 30px;
    width: 100%;
    color: white;
}

.promo-block__text {
    flex: 1;
    margin-right: 30px;
}

.promo-block__title {
    color: white;
    font-weight: bold;
    margin-bottom: 20px;
}

.promo-block__highlight {
    color: #ff5722;
}

.promo-block__description {
    font-size: 20px;
    margin-top: 10px;
}

.promo-block__date {
    font-style: italic;
    margin-top: 20px;
    font-size: 18px;
}

.promo-block__button {
    background-color: #4CAF50;
    color: white;
    padding: 15px 30px;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    margin-top: 30px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.promo-block__button:hover {
    background-color: #45a049;
}

.promo-block__disclaimer {
    font-size: 14px;
    color: #cccccc;
    margin-top: 30px;
}

.promo-block__image {
    flex: 1;
    background: url('/adv/to.new/electric.png') no-repeat center center/contain;
    height: 500px;
    margin-bottom: -30px;
}

.num-stages {
    color: #365edc;
}

.sale-list__headers {
    font-size: 24px;
    color: black;
}

.getup-wrapper {
    position: relative;
    width: 100%;
    background: linear-gradient(to bottom, rgb(57 57 57), rgb(83 83 83));
    /* background-image: url('https://thumb.tildacdn.com/tild6333-6631-4333-b462-376633623435/-/format/webp/young-man-in-uniform.png.webp'); */
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* .getup-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.7;
    z-index: 1;
} */

.getup-content {
    position: relative;
    z-index: 2;
    /* Ваши стили для контента, который будет поверх изображения */
}

.getup-item-text h4 {
    color: white;
    font-size: 24px;
    font-weight: 600;
}

.getup-item-text p {
    color: white;
}

.getup-item-text {
   margin-bottom: 32px;
}

.steps-container {
    margin: 20px 0;
}

.steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.steps__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 350px;
    max-width: 350px;
    text-align: center;
    margin: 10px;
}

.steps__button {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #4a90e2; /* Или любой другой цвет */
    border: none;
    color: white;
    font-size: 32px; /* Размер иконки */
    margin-bottom: 10px;
}

.steps__title {
    font-size: 20px;
    margin: 10px 0;
}

.steps__description {
    font-size: 16px;
}

.steps__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0;
    padding: 0 10px;
    font-size: 24px; /* Размер стрелки */
}

@media (max-width: 768px) {
    .steps {
        flex-direction: column;
        align-items: center;
    }

    .steps__item {
        max-width: 100%;
    }

    .steps__arrow {
        transform: rotate(90deg); /* Поворот стрелки на 90 градусов для вертикального отображения */
    }
}

.phone__block-wrapper {
    background-image: url(https://pssg.ru/adv/to.old/template/images/jpg/zvinite.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.phone_block_header {
    color: white;
    font-size: 32px;
    font-weight: 600;
}

.benefits-block-item {
    background-color: white;
    border-radius: 15px;
    box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
}

.benefits-block-item:nth-child(odd) {
    margin-right: 30px;
}

.benefits-block-item:nth-child(even) {
    margin-left: 30px;
}

.benefits-block-item div h5 {
    margin-bottom: 8px;
    margin-top: 8px;
    font-size: 24px;
    font-weight: 600;
}

.benefits-block-button {
    cursor: auto;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    font-size: 2rem;
    float: right;
    border: 0px;
    background-color: #365edc;
    color: white;
    font-weight: 600;
}

.container .third_block
{
   display: block;
   width: 100%;
   height: auto;
   padding: 30px 0 0;
   margin: 50px auto;
   color: #fff;
   background-color: #616B84;
}
   .container .third_block .h_block
   {
      display: block;
      padding: 0 10px;
      margin: 30px auto;
      width: 70%;
      text-align: center;
      font-size: 38px;
      font-weight: 600;
   }
   .container .third_block .text_block
   {
      display: block;
      padding: 0 10px;
      margin: auto;
      width: 70%;
      text-align: center;
      font-size: 24px;
   }
   .container .third_block .area_block
   {
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      align-items: flex-start;
      padding: 0;
      margin: 40px auto 0;
      width: 100%;
   }
      .container .third_block .area_block [class^="block_"]
      {
         display: block;
         height: auto;
         width: 25%;
         padding: 0;
         margin: 0;
         position: relative;
         cursor: pointer;
      }
      .container .third_block .area_block [class^="block_"]:nth-child(2), .container .third_block .area_block [class^="block_"]:nth-child(4), .container .third_block .area_block [class^="block_"]:nth-child(5), .container .third_block .area_block [class^="block_"]:nth-child(7)
      {
         background-color: #525C73;
      }
         .container .third_block .area_block [class^="block_"] .vis
         {
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            justify-content: center;
            z-index: 1;
            height: 300px;
         }
            .container .third_block .area_block [class^="block_"] .vis i
            {
               font-size: 16px;
               margin-left: 10px;
               margin-bottom: 20px;
               text-align: center;
            }
            .container .third_block .area_block [class^="block_"] .vis .h
            {
               font-weight: inherit;
               font-size: 22px;
               text-align: center;
            }
            .container .third_block .area_block [class^="block_"] .vis .txt
            {
               color: #cecece;
               font-weight: inherit;
               font-size: 18px;
               text-align: center;
            }
         .container .third_block .area_block [class^="block_"] .hid
         {
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            width: 100%;
            height: 0;
            overflow: hidden;
            -webkit-transition: ease-out 0.2s;
            -moz-transition: ease-out 0.2s;
            -o-transition: ease-out 0.2s;
            transition: ease-out 0.2s;
         }
            .container .third_block .area_block [class^="block_"] .hid span{
               display: inline-block;
               width: auto;
               height: auto;
               padding: 10px 40px;
               margin: auto;
               color: #282828;
               font-size: 14px;
            }
         .container .third_block .area_block [class^="block_"]:hover .hid
         {
            height: 100%;
         }

         @media(max-width: 1500px){
   .footer{
      width: 90%;
   }
}
@media(max-width: 1120px){
   .container .second_block
   {
      width: calc(100% - 100px);
   }
   .container .third_block .area_block [class^="block_"]
   {
      width: 50%;
   }
   .container .third_block .area_block [class^="block_"]:nth-child(4), .container .third_block .area_block [class^="block_"]:nth-child(5)
   {
      background-color: #616B84;
   }
   .container .third_block .area_block [class^="block_"]:nth-child(3), .container .third_block .area_block [class^="block_"]:nth-child(6)
   {
      background-color: #525C73;
   }

   .container .eighth_block .block_area
   {
      flex-wrap: wrap;
   }
      .container .eighth_block .block_area [class^="block_"]
      {
         width: calc(50% - 20px);
      }
}
@media(max-width: 1024px){
   .header
   {
      flex-wrap: wrap;
   }
      .header .logo
      {
         width: 100%;
         margin-bottom: 20px;
      }
      .header .logo a
      {
         margin-left: 20px;
      }
      .header .headline
      {
         width: 100%;
         margin-bottom: 20px;
      }
      .header .contacts
      {
         width: 100%;
         margin-bottom: 20px;
      }
   .container .first_block
   {
      padding-top: 300px;
   }
      .container .first_block .text .f
      {
         font-size: 30px;
      }
         .container .first_block .text .f span
         {
            font-size: 50px;
         }
      .container .first_block .text .s
      {
         font-size: 22px;
      }
   .container .first_half_block .text_block
   {
    width: auto;
    padding: 0 20px;
   }
   .container .fourth_block
   {
      width: 100%;
   }
      .container .fourth_block .block_area
      {
         flex-wrap: wrap;
      }
         .container .fourth_block .block_area [class^="block_"]
         {
            width: calc(33% - 40px);
            margin-top: 20px;
         }
   .container .fifth_block .block_area
   {
      width: 100%;
   }
   .container .ninth_block
   {
      width: 95%;
   }
   .container .tenth_block .block_text
   {
      margin-right: 20px;
      margin-left: auto;
   }
   .footer .logo
   {
      width: 33.333333%;
   }
   .footer .footline
   {
      width: 33.333333%;
   }
   .footer .contacts
   {
      width: 33.333333%;
   }
}
@media(max-width: 850px){
   .container .first_half_block .text_block .text{
      width: 44%;
   }
   .container .second_block
   {
      width: 100%;
      padding-left: 40px;
      width: calc(100% - 40px);
      padding-left: 40px;
      flex-wrap: wrap;
   }
      .container .second_block .blue .f, .container .second_block .blue, .container .second_block .blue .f, .container .second_block .red
      {
         width: auto;
      }
         .container .second_block .blue .f, .container .second_block .blue .s, .container .second_block .blue .t
         {
            padding: 10px 10px 0 50px;
         }
         .container .second_block .red .f, .container .second_block .red .s, .container .second_block .red .t
         {
            padding: 10px 10px 0 50px;
         }
   .container .fifth_block .block_area [class^="block_"]
   {
      margin-left: 35px;
   }
   .container .fifth_block .block_area [class^="block_"]:nth-child(2n+1)
   {
      flex-direction: row;
      width: auto;
      border-right: none;
      border-left: 5px solid #fbfbfb;
   }
      .container .fifth_block .block_area [class^="block_"]:nth-child(2n+1) .text
      {
         margin: 0 10px 25px 50px;
      }
         .container .fifth_block .block_area [class^="block_"]:nth-child(2n+1) .text::before
         {
            right: unset;
            left: -10px;
         }
   .container .fifth_block .block_area [class^="block_"]:nth-child(2n)
   {
      float: none;
      width: auto;
   }
      .container .fifth_block .block_area [class^="block_"]:nth-child(2n) .text
      {
         margin: 0 10px 25px 50px;
      }
      .container .fifth_block .block_area [class^="block_"]:nth-child(2n) .icon
      {
      }
      .container .fifth_block .block_area [class^="block_"] .icon
      {
         right: unset;
         left: -33px;
         top: 0;
      }
   .container .fifth_block .block_area [class^="block_"]:last-child
   {
      border-left: none;
      margin-left: 40px;
   }
   .container .ninth_block [class^="block_"]
   {
      width: auto;
   }
   .container .ninth_block [class^="block_"]:nth-child(2n+1)
   {
      margin-left: auto;
   }
      .container .ninth_block [class^="block_"] .photo
      {
         flex-wrap: wrap;
         margin-bottom: 40px;
      }
   .container .eleventh_block
   {
      width: auto;
      padding: 0 20px;
   }

   .footer
   {
      width: 100%;
      flex-wrap: wrap;
   }
      .footer .logo
      {
         width: 100%;
      }
         .footer .logo a
         {
            margin: auto;
         }
      .footer .footline
      {
         width: 100%;
         margin-top: 20px;
      }
      .footer .contacts
      {
         width: 100%;
         margin-top: 20px;
      }
         .footer .contacts .f, .footer .contacts .s
         {
            text-align: center;
         }
}
@media(min-width: 651px){
   .container .second_block
   {
      padding-left: 85px;
   }
}
@media(max-width: 650px){
   .header .headline .f
   {
      font-size: 20px;
   }
   .header .headline .s
   {
      font-size: 16px;
   }
   .header .contacts .f
   {
      font-size: 20px;
   }
   .container .first_block .text .f
   {
      font-size: 20px;
   }
      .container .first_block .text .f span
      {
         font-size: 20px;
      }
   .container .first_block .text .s
   {
      font-size: 18px;
   }
   .container .first_block .button button
   {
      font-size: 18px;
   }
   .container .first_half_block .text_block .text{
      width: auto;
   }
   .container .third_block .text_block
   {
      width: auto;
   }
   .container .third_block .area_block
   {
      padding-bottom: 5px;
   }
      .container .third_block .area_block [class^="block_"]
      {
         width: 100%;
      }
      .container .third_block .area_block [class^="block_"]:nth-child(2n+1)
      {
         background-color: #525C73;
      }
      .container .third_block .area_block [class^="block_"]:nth-child(2n)
      {
         background-color: unset;
      }
         .container .third_block .area_block [class^="block_"] .vis
         {
            padding: 10px;
         }
   .container .fourth_block .block_area [class^="block_"]
   {
      width: calc(50% - 40px);
   }
   .container .eighth_block .block_area [class^="block_"]
   {
      width: 100%;
   }
   /*#tarif
   {
      padding-left: 20px;
      padding-right: 20px;
   }
      #tarif .container, #tarif .container_form
      {
         width: 100%;
      }*/
      #tarif .container .eighth_block .block_area [class^="block_"]
      {
         min-width: unset;
      }
}
@media(max-width: 400px){
   .container .second_block .blue, .container .second_block .red
   {
      width: 100%;
   }
   .container .fourth_block .block_area [class^="block_"]
   {
      width: auto;
   }
   .container .sixth_block .block_h
   {
      font-size: 30px;
   }
   .container .tenth_block .block_text
   {
      width: auto;
   }
      .container .tenth_block .block_text .phone
      {
         font-size: 28px;
      }
   .container .eleventh_block .block_h
   {
      font-size: 30px;
   }
   .footer .footline .f
   {
      font-size: 18px;
   }
   .footer .contacts .f
   {
      font-size: 22px;
   }
   .container .third_block .area_block [class^="block_"] .hid span {
      padding: 10px 10px;
      font-size: 13px;
   }
}

/* TO page media fix */

@media (max-width: 1332px) {
   .promo-block__title {
       font-size: xx-large;
   }
}

@media (max-width: 1100px) {
   .promo-block__image {
       display: none;
   }
}

@media (max-width: 768px) {
   .text-right {
       text-align: center !important;
       margin-bottom: 25px;
   }

   .align-items-center {
       flex-direction: column;
       gap: 20px;
   }

   .benefits-block-item:nth-child(even),
   .benefits-block-item:nth-child(odd) {
       margin-left: 0;
   }

   .benefits-block-item:nth-child(odd) {
      text-align: left !important;
      margin-right: 0 !important;
   }

   .align-items-center:nth-child(odd) {
      flex-direction: column-reverse !important;
   }

   .reviews .owl-carousel {
       padding: 0 !important;
   }
}

@media (max-width: 420px) {
   .promo-block__button {
       font-size: 16px;
   }
}