@media(min-width: 768px) {
    .extra_low_size {
        font-size: 3rem;
    }
}


.troubles {
    position: relative;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(90deg, var(--yellow) 0, var(--yellow) 50%, var(--black) 50%, var(--black) 100%);
    background-repeat: no-repeat;
    background-size: 200% 100%;
    background-position: 100% 100%;
    transition: background-position 0.6s ease-in-out, color 0.6s ease-in-out;
  }
  @media (min-width: 768px) {
    .troubles {
      flex-direction: row;

      justify-content: flex-start;
      align-items: center;

      gap: 45px;
      width: 100%;
      padding: 15px 20px;
    }
  }
  @media (min-width: 1200px) {
    .troubles {
      gap: 30px;
      padding: 38px 30px;
    }
  }
  @media (min-width: 1550px) {
    .troubles {
      gap: 80px;
      padding: 30px 30px 30px 48px;
    }
  }
  .troubles__title {
    margin: 0;
    margin-bottom: 14px;
    color: var(--yellow);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: color 0.6s ease-in-out;
  }
  @media (min-width: 768px) {
    .troubles__title {
      flex-shrink: 0;
      width: 26%;
      margin-bottom: 0;
    }
  }
  @media (min-width: 1200px) {
    .troubles__title {
      width: 22%;
      font-size: 1.25rem;
    }
  }
  @media (min-width: 1550px) {
    .troubles__title {
      width: 25%;
      font-size: 1.375rem;
    }
  }
  .troubles__desc {
    margin: 0;
    margin-bottom: 32px;
    color: #898989;
    font-size: 0.75rem;
    line-height: 1.4em;
    transition: color 0.6s ease-in-out;
  }
  @media (min-width: 768px) {
    .troubles__desc {
      margin-bottom: 0;
    }
  }
  @media (min-width: 992px) {
    .troubles__desc {
      font-size: 1rem;
    }
  }
  @media (min-width: 1550px) {
    .troubles__desc {
      font-size: 1.375rem;
    }
  }
  @media (min-width: 768px) {
    .troubles__footer {
      flex-shrink: 0;
      width: 30%;
      max-width: 220px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  @media (min-width: 1200px) {
    .troubles__footer {
      width: 40%;
      max-width: 390px;
      gap: 25px;
    }
  }
  @media (min-width: 1320px) {
    .troubles__footer {
      width: 42%;
      max-width: 420px;
      gap: 45px;
    }
  }
  @media (min-width: 1550px) {
    .troubles__footer {
      max-width: 520px;
      gap: 85px;
    }
  }
  .troubles__rate {
    font-size: 1rem;
  }
  @media (min-width: 1200px) {
    .troubles__rate {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 1.25rem;
    }
  }
  @media (min-width: 1550px) {
    .troubles__rate {
      font-size: 1.375rem;
    }
  }
  .troubles__price {
    margin: 0;
    margin-bottom: 8px;
  }
  @media (min-width: 1200px) {
    .troubles__price {
      margin-bottom: 0;
    }
  }
  .troubles__value {
    margin: 0;
  }
  .troubles__btn-wrap {
    position: absolute;
    bottom: 20px;
    right: 15px;
  }
  @media (min-width: 768px) {
    .troubles__btn-wrap {
      position: static;
      display: flex;
      align-items: center;
    }
  }
  .troubles__btn {
    width: 20px;
    height: 20px;
  }
  @media (min-width: 1200px) {
    .troubles__btn {
      width: 24px;
      height: 24px;
    }
  }
  .troubles__btn path {
    transition: stroke 0.3s ease-in-out 0.3s, fill 0.3s ease-in-out 0.3s;
  }


.plus-on-detail {
    display: flex;
    flex-direction: column;
  }
  .plus-on-detail .plus__img-wrap {
    flex-shrink: 0;
  }
  .plus-on-detail .plus__desc {
    margin: 0;
  }
  .plus-on-detail .plus {
    display: flex;
    flex-direction: row;
    gap: 24px;
  }
  .plus-on-detail .plus-list__item {
    width: calc(100% - 15px);
  }
  @media (min-width: 1550px) {
    .plus-on-detail .plus-list__item {
      width: calc(100% - 48px);
    }
  }



/*
services
*/

.services-list {
  padding-left: 0;
  list-style-type: none;
  display: grid;
  grid-template-columns: auto;
  gap: 10px;
}
.services-list article {
  filter: grayscale(100%);
  background-image: var(--bg-img);
  background-repeat: no-repeat;
  background-size: auto;
  background-position-y: 85%;
  background-position-x: 95%;
  background-blend-mode: difference;
  transition: all 0.3s ease-in-out;
  position: relative;
}
.services-list article:hover {
  filter: unset;
  box-shadow: rgba(255, 255, 255, 0.02) 0px 1px 3px 0px, rgba(255, 255, 255, 0.15) 0px 0px 0px 1px;
}
.services-list article>* {
  z-index: 1;
}
.services-list article:before {
  content: '';
  background: var(--black);
  opacity:0.4;
  transition: all 0.3s ease-in-out;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.services-list article:hover:before{
  opacity: 0.1;
}
.services-section-title h2 {
  font-size: 36px;
}
.services-section-title {
  scroll-margin: 90px;
}
.services-list+.services-section-title {
  margin-top: 6rem;
}
@media(max-width: 768px){
  .services-list article:before {
      opacity:0.8;

      box-shadow: -1px 1px 15px 4px rgba(0, 0, 0, 0.4) inset;
      -webkit-box-shadow: -1px 1px 15px 4px rgba(0, 0, 0, 0.4) inset;
      -moz-box-shadow: -1px 1px 15px 4px rgba(0, 0, 0, 0.4) inset;
  }
  .services-list article:hover:before{
      opacity: 0.5;
  }
  .services-section-title {
      scroll-margin: 50px;
  }
  .services-list+.services-section-title {
      margin-top: 3rem;
  }
}
@media (min-width: 768px) {
  .services-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (min-width: 1400px) {
  .services-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.card-services {
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: 9fr 3fr;
  gap: 15px;
  padding: 20px 15px 16px;
  height: 100%;
  background-color: var(--black);
}
@media (min-width: 768px) {
  .card-services {
    padding: 30px 20px 28px;
  }
}
@media (min-width: 1200px) {
  .card-services {
    grid-template-columns: 5fr 3fr;
    gap: 10px;
    padding: 40px 30px 35px;
  }
}
@media (min-width: 1400px) {
  .card-services {
    grid-template-columns: 8fr 3fr;
  }
}
.card-services:hover .card-services__title {
  color: var(--yellow);
}
.card-services:hover .card-services__icon {
  filter: grayscale(0);
}
.card-services:hover .card-services__type {
  color: #fff;
}
.card-services__title, .card-services__icon, .card-services__type {
  transition: all 0.3s ease-in-out;
}
.card-services__title {
  margin: 0;
  grid-area: 1/1/2/2;
  font-size: 16px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .card-services__title {
    min-height: 40px;
  }
}
@media (min-width: 1200px) {
  .card-services__title {
    min-height: 62px;
    font-size: 22px;
  }
}
.card-services__preview {
  grid-area: 2/1/3/3;
  font-size: 12px;
  line-height: 1.5;
}
@media (min-width: 1200px) {
  .card-services__preview {
    grid-area: 2/1/3/2;
    font-size: 18px;
  }
}
.card-services__icon {
  grid-area: 1/2/3/3;
  justify-self: end;
  align-self: start;
  filter: grayscale(1);
  max-height: 40px;
}
@media (min-width: 1200px) {
  .card-services__icon {
    max-height: 62px;
  }
}
.card-services__type {
  grid-area: 3/1/4/2;
  color: #898989;
  font-size: 12px;
  text-transform: uppercase;
  margin-top: 22px;
}
@media (min-width: 1200px) {
  .card-services__type {
    margin-top: 20px;
    font-size: 16px;
  }
}
.card-services__arrow {
  grid-area: 3/2/4/3;
  justify-self: end;
  align-self: end;
  width: 16px;
  height: 16px;
}
@media (min-width: 1200px) {
  .card-services__arrow {
    width: 24px;
    height: 24px;
  }
}


/* fix for services */

@media (min-width: 768px) {
  .section-lead {
      justify-content: space-between;
  }
}

/* video block */

.video {

}

.video iframe {
  width: 100%;
}

.video__description p {
    display: block;
    margin-top: 7px;
    font-size: var(--fs);
    font-weight: 300;
    letter-spacing: normal;
}

.video__description p span:not([class]) {
  color: var(--yellow);
}

@media(max-width: 768px) {
  .mblHide {
      display: none;
  }
}

.bonuses__bonus_link_arrow {
  grid-area: 3/2/4/3;
  justify-self: end;
  align-self: end;
}

.bonuses__bonus_link_arrow span {
display: inline-block;
vertical-align: middle;
transition: all 0.3s ease-in-out;
}

.bonuses__bonus_link_arrow img {
display: inline-block;
vertical-align: middle;
}

@media (max-width: 1720px) {
  .bonuses__bonus_link_arrow span {
    display: none;
    
  }
}

.card-cert:hover .bonuses__bonus_link_arrow span {
  color: var(--yellow);
}



.services-list-calculator {
  grid-template-columns: repeat(4, 1fr);
}

.icon-calc {
  background: var(--yellow);
  padding: 4px;
    border-radius: 4px;
}

.card-services:hover .icon-calc {
  filter: grayscale(0);
}