/*--- CATAGORY CONTENT ---*/
.dir-content {
    margin: 75px 0 0 0;
}

/*dir description*/
.dir-description {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0 54px;
    align-items: center;
}

.dir-description__image {}

.dir-description__image img {
    display: block;
    width: 100%;
    border-radius: 8px;
}

.dir-description__content {}

.dir-description__content h2 {
    color: #21252B;
    font-size: 30px;
    margin: 0 0 30px 0;
}

.dir-description__content p {
    color: #000;
    font-size: 15px;
    font-weight: 300;
    margin: 0 0 15px 0;
}

.dir-description__content>*:last-child {
    margin-bottom: 0;
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .dir-description {
        grid-gap: 0 30px;
    }

    .dir-description__content h2 {
        font-size: 22px;
        margin: 0 0 20px 0;
    }
}

@media screen and (max-width: 767px) {
    .dir-content {
        margin: 50px 0 0 0;
    }

    .dir-description {
        grid-template-columns: 1fr;
        grid-gap: 35px 0;
    }

    .dir-description__content h2 {
        font-size: 22px;
        margin: 0 0 15px 0;
    }

    .dir-description__content h2>br {
        display: none;
    }

    .dir-description__content p {
        font-size: 14px;
        margin: 0 0 10px 0;
    }
}

/*dir using*/
.dir-using {
    position: relative;
    display: grid;
    grid-template-columns: 520px 1fr;
    margin: 50px 0 0 0;
}

.dir-using.dir-using--simple {
    grid-template-columns: 1fr;
}

.dir-using:not(.dir-using--simple):before {
    content: "";
    width: 100%;
    height: 70px;
    position: absolute;
    top: 0;
    left: 0;
    background: #FECC00;
    border-radius: 8px;
}

.dir-using.dir-using--rostelekom:not(.dir-using--simple):before {
    background: #E7E7E7;
}

.dir-using-title {
    position: relative;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dir-using-title h2 {
    color: #21252B;
    font-size: 22px;
    margin: 0;
    text-transform: uppercase;
    text-align: center;
}

.dir-using-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 8px 0 0 0;
}

.dir-using__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dir-using__item-image {
    width: 92px;
    height: 92px;
    display: flex;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #E7E7E7;
    margin: 0 0 12px 0;
}

.dir-using--megafon .dir-using__item-image {
    border-color: #01B957;
}

.dir-using--mts .dir-using__item-image {
    border-color: #ED020A;
}

.dir-using--full-image .dir-using__item-image {
    border: none;
    background: none;
    border-radius: unset;
}

.dir-using__item-image img {
    display: block;
    width: auto;
    max-width: 100%;
    margin: auto;
}

.dir-using__item-title {
    color: #21252B;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
    transition: .2s;
}

.dir-using__item-title:hover {
    border-bottom: 1px dashed transparent;
}

@media screen and (min-width: 1200px) and (max-width: 1379px) {
    .dir-using {
        grid-template-columns: 420px 1fr;
    }

    .dir-using__item-image {
        width: 80px;
        height: 80px;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .dir-using__item-image {
        width: 72px;
        height: 72px;
        margin: 0 0 6px 0;
    }

    .dir-using {
        grid-template-columns: 260px 1fr;
    }

    .dir-using__item-title {
        font-size: 14px;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .dir-using:before {
        display: none;
    }

    .dir-using {
        grid-template-columns: 1fr;
        grid-gap: 30px 0;
    }

    .dir-using-title h2 {
        border-radius: 6px;
        background: #FECC00;
        width: 100%;
        padding: 15px 10px;
    }

    .dir-using.dir-using--rostelekom .dir-using-title h2 {
        background: #E7E7E7;
    }

    .dir-using--megafon .dir-using-title h2 {
        background: none;
    }

    .dir-using-wrapper {
        gap: 15px 15px;
    }
}


@media screen and (max-width: 767px) {
    .dir-using:before {
        display: none;
    }

    .dir-using {
        grid-template-columns: 1fr;
        grid-gap: 16px 0;
    }

    .dir-using-title h2 {
        border-radius: 6px;
        background: #FECC00;
        font-size: 18px;
        width: 100%;
        padding: 15px 10px;
    }

    .dir-using--megafon .dir-using-title h2 {
        background: none;
    }

    .dir-using.dir-using--rostelekom .dir-using-title h2 {
        background: #E7E7E7;
    }

    .dir-using-wrapper {
        gap: 15px 15px;
    }

    .dir-using__item:last-child {
        display: none;
    }

    .dir-using__item-image {
        width: 72px;
        height: 72px;
    }
}

/*dir advantages*/
.dir-advantages {
    margin: 50px 0 0 0;
}

.dir-advantages__title {
    color: #21252B;
    font-size: 30px;
    margin: 0 0 40px 0;
}

.dir-advantages-wrapper {
    display: flex;
    align-items: stretch;
    gap: 0 30px;
}

.dir-advantages__card {
    border-radius: 5px;
    background: #F9F9F9;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 15px 15px;
}

.dir-advantages--rostelekom .dir-advantages__card:nth-child(1),
.dir-advantages--rostelekom .dir-advantages__card:nth-child(4) {
    background: #FF4F13;
}

.dir-advantages--rostelekom .dir-advantages__card:nth-child(2) {
    background: #7800FF;
}

.dir-advantages--rostelekom .dir-advantages__card:nth-child(3) {
    background: #FFBF08;
}

.dir-advantages--rostelekom .dir-advantages__card:nth-child(5) {
    background: #741883;
}

.dir-advantages--rostelekom .dir-advantages__card:nth-child(6) {
    background: #E1AB0E;
}

.dir-advantages--rostelekom .dir-advantages__card:nth-child(7) {
    background: #C8491E;
}

.dir-advantages--rostelekom .dir-advantages__card:nth-child(8) {
    background: #9234FD;
}

.dir-advantages__card:before {
    content: "";
    width: 15px;
    height: 13px;
    display: block;
    background-image: url(/templates/planet/resource/img/dir-description/advantage_arrow.svg);
    background-position: center;
    background-size: cover;
    margin: 0 0 10px 0;
}

.dir-advantages--rostelekom .dir-advantages__card:before {
    background-image: url(/templates/planet/resource/img/dir-description/advantage_arrow_white.svg);
}

.dir-advantages__card-text {
    color: #000;
    font-size: 14px;
}

.dir-advantages--rostelekom .dir-advantages__card-text {
    color:#fff;
}

@media screen and (min-width: 1200px) and (max-width: 1379px) {
    .dir-advantages-wrapper {
        gap: 0 15px;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .dir-advantages-wrapper {
        flex-wrap: wrap;
        gap: 20px 20px;
    }

    .dir-advantages__card {
        flex: 1 1 auto;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .dir-advantages-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: unset;
        grid-gap: 15px 15px;
    }

    .dir-advantages__card {
        min-height: 120px;
    }
}

@media screen and (max-width: 767px) {
    .dir-advantages__title {
        font-size: 22px;
        text-align: center;
    }

    .dir-advantages-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: unset;
        grid-gap: 15px 15px;
    }

    .dir-advantages__card {
        min-height: 120px;
    }
}

/*about*/
.dir-about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0 54px;
    margin: 50px 0 0 0;
}

.dir-about--invert {
    margin-bottom: 50px;
}

.dir-about h2 {
    grid-column: 1/2;
    grid-row: 1/2;
    color: #21252B;
    font-size: 30px;
    margin: 0 0 40px 0;
}

.dir-about--invert h2 {
    grid-column: 2/3;
}

.dir-about-content {
    counter-reset: about-counter;
    grid-column: 1/2;
    grid-row: 2/3;
}

.dir-about--invert .dir-about-content {
    grid-column: 2/3;
}

.dir-about-item {
    position: relative;
    padding: 0 0 0 75px;
}

.dir-about-item+.dir-about-item {
    margin-top: 20px;
}

.dir-about-item:before {
    counter-increment: about-counter;
    content: "0" counter(about-counter);
    width: 50px;
    height: 50px;
    background: #F9F9F9;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    color: #009A3F;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    line-height: 50px;
}

.dir-about-item__title {
    color: #21252B;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 10px 0;
}

.dir-about-item__text {
    color: #000;
    font-size: 14px;
    font-weight: 300;
}

.dir-about-image {
    grid-column: 2/3;
    grid-row: 1/3;
    display: grid;
    grid-template-columns: 9fr 6fr;
    grid-gap: 0 35px;
}

.dir-about-image__first,
.dir-about-image__second {
    display: block;
    width: 100%;
    border-radius: 8px;
}

.dir-about-image__first {
    align-self: flex-start;
}

.dir-about-image__second {
    align-self: flex-end;
}

.dir-about-one-image {
    grid-column: 1/2;
    grid-row: 1/3;
}

.dir-about-one-image img {
    display: block;
    width: 100%;
    border-radius: 8px;
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    .dir-about {
        grid-template-columns: 2fr 1fr;
    }

    .dir-about--invert {
        grid-template-columns: 1fr 1fr;
    }

    .dir-about-item {
        padding: 0 0 0 55px;
    }

    .dir-about-item:before {
        width: 40px;
        height: 40px;
        font-size: 13px;
        line-height: 40px;
    }

    .dir-about-image {
        grid-template-columns: 1fr;
        grid-gap: 20px 0;
    }

    .dir-about-image__first {
        align-self: unset;
    }

    .dir-about-image__second {
        align-self: unset;
    }
}

@media screen and (max-width: 767px) {
    .dir-about {
        grid-template-columns: 1fr;
        grid-gap: 0;
    }

    .dir-about--invert h2,
    .dir-about h2 {
        grid-column: unset;
        grid-row: 1/2;
        font-size: 22px;
        text-align: center;
    }

    .dir-about-image {
        grid-column: unset;
        grid-row: 2/3;
        grid-gap: 0 15px;
        margin: 0 0 20px 0;
    }

    .dir-about-one-image {
        grid-column: unset;
        grid-row: 2/3;
        margin: 0 0 30px 0;
    }

    .dir-about--invert .dir-about-content,
    .dir-about-content {
        grid-column: unset;
        grid-row: 3/4;
    }

    .dir-about-image__first {
        margin: 0 0 10vw 0;
    }

    .dir-about-item {
        padding: 0 0 0 55px;
    }

    .dir-about-item:before {
        width: 40px;
        height: 40px;
        font-size: 13px;
        line-height: 40px;
    }

    .dir-about-item__title {
        font-size: 14px;
    }

    .dir-about-item__text {
        font-size: 12px;
    }
}

/*company*/
.dir-company {
    background-image: url(/templates/planet/resource/img/dir-description/company_bg.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 5px;
    padding: 50px 60px 60px 60px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    margin: 50px 0 0 0;
}

.dir-company-header {
    margin: 0 0 40px 0;
}

.dir-company-header h2 {
    color: #FFF;
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 20px 0;
}

.dir-company-header p {
    color: #FFF;
    text-align: center;
    font-size: 15px;
    font-weight: 300;
}

.dir-company-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
}

.dir-company-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 auto;
}

.dir-company-item__icon {
    background: #fff;
    border: 2px solid #009A3F;
    display: flex;
    border-radius: 50%;
    margin: 0 0 10px 0;
    width: 90px;
    height: 90px;
}

.dir-company-item__icon img {
    display: block;
    width: auto;
    max-width: 40px;
    margin: 0 auto;
}

.dir-company-item__title {
    margin: 0 0 8px 0;
    color: #FFF;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.dir-company-item__description {
    color: #FFF;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    .dir-company-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 30px 30px;
    }
}

@media screen and (max-width: 767px) {
    .dir-company {
        margin: 50px -24px 40px -24px;
        border-radius: 0;
        padding: 40px 24px;
    }

    .dir-company-header h2 {
        font-size: 22px;
    }

    .dir-company-header p {
        font-size: 12px;
    }

    .dir-company-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 30px 10px;
    }

    .dir-company-item__icon {
        width: 75px;
        height: 75px;
    }

    .dir-company-item__title {
        font-size: 15px;
    }

    .dir-company-item__title br {
        display: none;
    }

    .dir-company-item__description {
        font-size: 11px;
    }

    .dir-company-item__description br {
        display: none;
    }
}

@media screen and (max-width: 577px) {
    .dir-company {
        margin: 50px -16px 30px -16px;
        padding: 30px 16px;
    }
}

@media screen and (max-width: 389px) {
    .dir-company-wrapper {
        grid-template-columns: 1fr 1fr;
    }
}

/*how we work*/
.dir-work {
    margin: 50px 0 0 0;
}

.dir-work h2 {
    color: #21252B;
    font-size: 30px;
    margin: 0 0 40px 0;
}

.dir-work-steps-wrapper {
    counter-reset: step-counter;
    display: grid;
    grid-template-columns: 3fr 1fr 3fr 1fr 3fr;
}

.dir-work-step-arrow {
    display: flex;
}

.dir-work-step-arrow img {
    display: block;
    width: 21px;
    margin: auto;
}

.dir-work-step {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    background: #F9F9F9;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 30px 30px;
    margin: 0 0 50px 0;
}

.dir-work-step:before {
    counter-increment: step-counter;
    content: "0" counter(step-counter);
    color: #009A3F;
    font-size: 22px;
    font-weight: 700;
    position: absolute;
    top: 30px;
    left: 30px;
}

.dir-work-step__icon {
    width: 70px;
    align-self: flex-end;
    margin: 0 0 10px 0;
}

.dir-work-step__icon img {
    display: block;
    width: 70px;
}

.dir-work-step__title {
    color: #000;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 15px 0;
}

.dir-work-step__description {
    color: #000;
    font-size: 14px;
}

.dir-work-types-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-gap: 18px 24px;
}

.dir-work-type {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    background: #F9F9F9;
    color: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 30px 30px;
}

.dir-work-type:before {
    content: "";
    width: 82px;
    height: 82px;
    position: absolute;
    top: 20px;
    right: 20px;
    background-size: cover;
    background-position: center;
}

.dir-work-type--green {
    background: linear-gradient(94deg, #009A3F 12.06%, #19BA5B 104.24%);
}

.dir-work-type--green:before {
    background-image: url(/templates/planet/resource/img/dir-description/st_01.svg);
}

.dir-work-type--black {
    background: linear-gradient(94deg, #363636 12.06%, #484848 104.24%);
}

.dir-work-type--black:before {
    background-image: url(/templates/planet/resource/img/dir-description/st_02.svg);
}

.dir-work-type--gray {
    background: linear-gradient(94deg, #BFBFBF 12.06%, #FBFBFB 104.24%);
    color: #3C3C3C;
}

.dir-work-type--gray:before {
    background-image: url(/templates/planet/resource/img/dir-description/st_03.svg);
}

.dir-work-type__title {
    font-size: 25px;
    font-weight: 700;
    margin: 0 0 40px 0;
}

.dir-work-type-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.dir-work-type__item {
    font-size: 16px;
    font-weight: 600;
    flex: 1 1 auto;
}

.dir-work-type__item:before {
    content: "";
    display: block;
    margin: 0 0 15px 0;
    width: 15px;
    height: 13px;
    background-image: url(/templates/planet/resource/img/dir-description/s_check.svg);
    background-size: cover;
    background-position: center;
}

.dir-work-type--gray .dir-work-type__item:before {
    background-image: url(/templates/planet/resource/img/dir-description/s_check_green.svg);
}

@media screen and (min-width: 992px) and (max-width: 1379px) {
    .dir-work-type-inner {
        gap: 20px;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .dir-work-steps-wrapper {
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 0 15px;
    }

    .dir-work-step-arrow {
        display: none;
    }

    .dir-work-types-wrapper {
        grid-template-columns: 1fr;
    }

    .dir-work-type-inner {
        gap: 20px;
    }

    .dir-work-type__item {
        flex: unset;
    }
}

@media screen and (max-width: 767px) {
    .dir-work h2 {
        font-size: 22px;
        text-align: center;
    }

    .dir-work-steps-wrapper {
        grid-template-columns: 1fr;
        grid-gap: 22px 0;
        margin: 0 0 20px 0;
    }

    .dir-work-step {
        margin: 0;
    }

    .dir-work-step-arrow {
        display: none;
    }

    .dir-work-types-wrapper {
        grid-template-columns: 1fr;
    }

    .dir-work-type-inner {
        gap: 20px;
    }
}

/*review*/
.dir-review {
    margin: 50px 0 0 0;
}

.dir-review h2 {
    color: #21252B;
    font-size: 30px;
    margin: 0 0 40px 0;
    text-align: center;
}

.dir-review-inner {
    position: relative;
    padding: 0 70px;
}

.dir-review__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.dir-review__arrow:hover {
    opacity: 0.8;
}

.dir-review__arrow--prev {
    left: 0;
}

.dir-review__arrow--next {
    right: 0;
}

.dir-review__arrow img {
    width: 24px;
    display: block;
}

.dir-review-carousel .slick-track {
    margin: 0 -30px;
    display: flex;
    align-items: stretch;
}

.dir-review-carousel .slick-list {
    padding: 20px 0;
    margin: -20px 0;
}

.dir-review-card-outer {
    height: auto !important;
}

.dir-review-card {
    border-radius: 5px;
    background: #FFF;
    box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.25);
    padding: 30px 30px;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 5px 30px 0 30px;
    height: 100%;
}

.dir-review-card-outer:first-child .dir-review-card {
    margin-left: 35px;
}

.dir-review-card:before {
    content: "";
    position: absolute;
    top: 30px;
    right: 30px;
    width: 65px;
    height: 57px;
    background-image: url(/templates/planet/resource/img/dir-description/review_quote.png);
    background-size: cover;
    background-position: center;
}

.dir-review-card__rating {
    width: 131px;
    height: 20px;
    background: url(/templates/planet/resource/img/review-rating-gray.png);
    background-size: 100%;
    position: relative;
    margin: 0 0 30px 0;
}

.dir-review-card__rating-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/templates/planet/resource/img/review-rating-filled.png);
}

.dir-review-card__author {
    color: #000;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 10px 0;
}

.dir-review-card__message {
    color: #000;
    font-size: 14px;
    font-weight: 400;
    margin: 0 0 15px 0;
}

.dir-review-card__date {
    margin: auto 0 0 0;
    color: #959595;
    font-size: 12px;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .dir-review-carousel .slick-track {
        margin: 0 -15px;
    }

    .dir-review-card {
        margin: 0 15px;
    }
}

@media screen and (max-width: 767px) {
    .dir-review h2 {
        font-size: 22px;
    }

    .catalog-answers_after>div>h2 {
        font-size: 22px !important;
    }

    .dir-review-carousel .slick-track {
        margin: 0;
    }

    .dir-review-card {
        margin: 5px;
    }

    .dir-review-card-outer:first-child .dir-review-card {
        margin-left: 5px;
    }

    .dir-review-inner {
        padding: 0 30px;
    }

    .dir-review-card:before {
        width: 48px;
        height: 40px;
    }
}

/*about color*/
.dir-about-color {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    border-radius: 5px;
}

.dir-about-color--megafon {
    background: #01B957;
}

.dir-about-color--mts {
    background: linear-gradient(202deg, #E40107 14.28%, #FF0510 82.59%);
}

.dir-about-color__image {
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
    position: relative;
}

.dir-about-color--mts .dir-about-color__image {
    background-size: cover;
}

.dir-about-color__content {
    padding: 40px 50px;
}

.dir-about-color__content h2 {
    color: #FFF;
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 30px 0;
}

.dir-about-color__content p {
    color: #FFF;
    font-size: 15px;
    font-weight: 300;
    margin: 0;
}


@media screen and (min-width: 768px) and (max-width: 1199px) {
    .dir-about-color--megafon .dir-about-color__image:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 30%;
        height: 100%;
        background: linear-gradient(90deg, #01B957, transparent);
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .dir-about-color {
        grid-template-columns: 2fr 1fr;
    }
}

@media screen and (max-width: 767px) {
    .dir-about-color__content h2 {
        font-size: 22px;
    }

    .dir-about-color__content h2>br {
        display: none;
    }

    .dir-about-color {
        margin: 0 -24px;
        border-radius: 0;
        grid-template-columns: 1fr;
    }

    .dir-about-color__content {
        padding: 30px 24px;
        order: 1;
    }

    .dir-about-color--megafon .dir-about-color__image {
        display: none;
    }
}

@media screen and (max-width: 577px) {
    .dir-about-color {
        margin: 0 -16px;
    }

    .dir-about-color__content {
        padding: 30px 16px;
    }
}

/*dir reasons*/
.dir-reasons {
    margin: 50px 0 0 0;
    padding: 40px 50px 50px 50px;
    border-radius: 5px;
    background: #ECECEC;
}

.dir-reasons.dir-reasons--tele2 {
    background: none;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.20);
}

.dir-reasons-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 24px 0;
}

.dir-reasons-header__title {
    display: flex;
    align-items: center;
}

.dir-reasons-header__title-number {
    font-size: 80px;
    font-weight: 700;
}

.dir-reasons--megafon .dir-reasons-header__title-number {
    color: #01B957;
}

.dir-reasons-header__title-text {
    color: #21252B;
    font-size: 30px;
    line-height: 1.1;
    font-weight: 700;
    margin: 0 0 0 15px;
}

.dir-reasons-header__brand {}

.dir-reasons-header__brand img {
    display: block;
    max-width: 100%;
}

.dir-reasons-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 30px 20px;
    counter-reset: reasons-counter;
}

.dir-reasons-card {
    border-radius: 5px;
    background: #F9F9F9;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 20px 40px 20px 60px;
    position: relative;
}

.dir-reasons-card:before {
    counter-increment: reasons-counter;
    content: "0" counter(reasons-counter);
    font-size: 20px;
    line-height: 24px;
    font-weight: 800;
    position: absolute;
    top: 20px;
    left: 20px;
}

.dir-reasons--megafon .dir-reasons-card:before {
    color: #741883;
}

.dir-reasons--tele2 .dir-reasons-card:before {
    color: #000;
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .dir-reasons {
        padding: 20px 30px 50px 30px;
    }

    .dir-reasons-wrapper {
        grid-gap: 10px 10px;
    }

    .dir-reasons-card {
        font-size: 14px;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .dir-reasons-wrapper {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 767px) {
    .dir-reasons {
        padding: 20px 24px;
        margin: 50px -24px 0 -24px;
    }

    .dir-reasons-wrapper {
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
    }

    .dir-reasons-card {
        padding: 50px 15px 15px 15px;
        font-size: 14px;
    }

    .dir-reasons-header {
        display: block;
    }

    .dir-reasons-header__brand {
        display: none;
    }

    .dir-reasons-header__title-number {
        font-size: 60px;
    }

    .dir-reasons-header__title-text {
        font-size: 22px;
    }
}

@media screen and (max-width: 577px) {
    .dir-reasons {
        padding: 20px 16px;
        margin: 50px -16px 0 -16px;
    }
}

@media screen and (max-width: 389px) {
    .dir-reasons-wrapper {
        grid-template-columns: 1fr;
    }
}

/*why mts*/
.dir-why-mts {
    border-radius: 5px;
    background: linear-gradient(97deg, #ECEEF2 21.19%, #BBC5DF 81.26%);
    padding: 28px 50px 60px 50px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    margin: 50px 0 0 0;
}

.dir-why-mts__title {
    color: #21252B;
    font-size: 45px;
    font-weight: 700;
    line-height: 1.2;
}

.dir-why-mts-wrapper {
    display: grid;
    grid-gap: 18px 18px;
    grid-template-columns: repeat(17, 1fr);
    grid-template-rows: repeat(6, minmax(50px, 1fr));

}

.dir-why-mts__item {
    padding: 22px 22px;
    color: #000;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 600;
    background: #F9F9F9;
    display: flex;
    align-items: flex-end;
}

.dir-why-mts__item:last-child {
    background: #FE0510;
    color: #fff;
}

@media screen and (min-width: 768px) {
    .dir-why-mts__item:nth-child(1) {
        grid-column: 1/5;
        grid-row: 3/5
    }

    .dir-why-mts__item:nth-child(2) {
        grid-column: 5/8;
        grid-row: 2/4
    }

    .dir-why-mts__item:nth-child(3) {
        grid-column: 8/12;
        grid-row: 1/4
    }

    .dir-why-mts__item:nth-child(4) {
        grid-column: 12/15;
        grid-row: 2/4
    }

    .dir-why-mts__item:nth-child(5) {
        grid-column: 5/7;
        grid-row: 4/6
    }

    .dir-why-mts__item:nth-child(6) {
        grid-column: 7/10;
        grid-row: 4/6
    }

    .dir-why-mts__item:nth-child(7) {
        grid-column: 10/14;
        grid-row: 4/7;
    }

    .dir-why-mts__item:nth-child(8) {
        grid-column: 14/18;
        grid-row: 4/7;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1540px) {
    .dir-why-mts {
        padding: 28px 30px 40px 30px;
        grid-template-columns: 1fr 3fr;
    }

    .dir-why-mts__title {
        font-size: 28px;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .dir-why-mts {
        padding: 28px 30px 40px 30px;
        grid-template-columns: 1fr;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .dir-why-mts {
        padding: 28px 20px 40px 20px;
        grid-template-columns: 1fr;
    }

    .dir-why-mts-wrapper {
        grid-gap: 10px 10px;
    }

    .dir-why-mts__item {
        padding: 10px;
        font-size: 14px;
    }
}

@media screen and (max-width: 767px) {
    .dir-why-mts {
        border-radius: 0;
        margin: 50px -24px 0 -24px;
        padding: 30px 24px;
        grid-template-columns: 1fr;
    }

    .dir-why-mts-wrapper {
        grid-template-rows: unset;
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px 10px;
    }

    .dir-why-mts__item {
        padding: 10px;
        font-size: 14px;
    }

    .dir-why-mts__title {
        font-size: 22px;
        margin: 0 0 30px 0;
    }

    .dir-why-mts__title br {
        display: none;
    }
}

@media screen and (max-width: 577px) {
    .dir-why-mts {
        margin: 50px -16px 0 -16px;
        padding: 30px 16px;
    }
}

@media screen and (max-width: 389px) {
    .dir-why-mts__item {
        font-size: 12px;
        font-weight: 600;
    }
}

/*about brand*/
.dir-about-brand {
    margin: 50px 0 0 0;
}

.dir-about-brand h2 {
    color: #21252B;
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 30px 0;
}

.dir-about-brand-wrapper {
    counter-reset: brand-about-counter;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px 30px;
}

.dir-about-brand__item {
    position: relative;
    padding: 0 0 0 75px;
}

.dir-about-brand__item:before {
    counter-increment: brand-about-counter;
    content: "0" counter(brand-about-counter);
    font-size: 15px;
    font-weight: 700;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    line-height: 50px;
}

.dir-about-brand--mts .dir-about-brand__item:before {
    background: #FE0510;
    color: #FFF;
}

.dir-about-brand--rostelekom .dir-about-brand__item:before {
    background: #E3E3E3;
    color: #565656;
}

.dir-about-brand__item-title {
    color: #21252B;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 15px 0;
}

.dir-about-brand__item-description {
    color: #000;
    font-size: 14px;
    font-weight: 300;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .dir-about-brand__item {
        padding: 75px 0 0 0;
    }
}

@media screen and (max-width: 767px) {
    .dir-about-brand h2 {
        font-size: 22px;
    }

    .dir-about-brand-wrapper {
        grid-template-columns: 1fr;
    }
}

/*about and reason*/
.dir-ar {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 30px 30px;
    margin: 50px 0 0 0;
    align-items: baseline;
}

.dir-ar h2 {
    color: #21252B;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 50px 0;
}

.dir-ar-reason-outer {}

.dir-ar-reason-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 45px 30px;
}

.dir-ar-reason__item {
    display: flex;
    align-items: center;
}

.dir-ar-reason__item-icon {
    width: 50px;
    flex: 0 0 50px;
    margin: 0 30px 0 0;
}

.dir-ar-reason__item-icon img {
    display: block;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
}

.dir-ar-reason__item-text {
    color: #21252B;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
    transition: .2s;
}

.dir-ar-reason__item-text:hover {
    border-bottom: 1px dashed transparent;
}

.dir-ar-about-outer {
    border-radius: 5px;
    background: #f7f7f7;
    padding: 40px 50px 50px 50px;
}

.dir-ar-about-wrapper {}

.dir-ar-about__item {
    position: relative;
    padding: 0 0 0 75px;
}

.dir-ar-about__item+.dir-ar-about__item {
    margin-top: 20px;
}

.dir-ar-about__item:before {
    content: "+";
    width: 38px;
    height: 38px;
    border-radius: 3px;
    background: #141414;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    font-size: 25px;
    font-weight: 700;
    text-align: center;
    line-height: 38px;
}

.dir-ar-about__item-title {
    color: #21252B;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 10px 0;
}

.dir-ar-about__item-text {
    color: #000;
    font-size: 14px;
    font-weight: 300;
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .dir-ar {
        grid-template-columns: 1fr 1fr;
        grid-gap: 0 30px;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .dir-ar {
        grid-template-columns: 1fr;
        grid-gap: 50px 0;
    }

    .dir-ar h2>br {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .dir-ar {
        grid-template-columns: 1fr;
    }

    .dir-ar h2 {
        font-size: 22px;
    }

    .dir-ar h2>br {
        display: none;
    }

    .dir-ar-reason-wrapper {
        grid-gap: 40px 10px;
    }

    .dir-ar-reason__item-icon {
        margin: 0 10px 0 0;
    }

    .dir-ar-reason__item-text {
        font-size: 16px;
    }

    .dir-ar-about-outer {
        border-radius: 0;
        padding: 40px 24px;
        margin: 0 -24px;
    }

    .dir-ar-about__item {
        padding: 0 0 0 60px;
    }
}

@media screen and (max-width: 577px) {
    .dir-ar-about-outer {
        padding: 30px 16px;
        margin: 0 -16px;
    }
}

/*about tele2*/
.dir-about-tele2 {
    border-radius: 8px;
    background: #141414;
    margin: 90px 0 0 0;
    display: grid;
    grid-template-columns: 3fr 3fr 2fr;
    grid-gap: 0 30px;
    align-items: center;
}

.dir-about-tele2-content {}

.dir-about-tele2 h2 {
    color: #FFF;
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 30px 0;
}

.dir-about-tele2 p {
    color: #FFF;
    font-size: 15px;
    font-weight: 300;
}

.dir-about-tele2__people {
    height: calc(100% + 60px);
    margin: 0 0 60px 0;
    width: auto;
    max-width: 100%;
}

.dir-about-tele2__logo {
    width: 128px;
    height: 128px;
    padding: 12px;
    display: flex;
    border-radius: 7px;
    background: #FFF;
    margin: auto;
}

.dir-about-tele2__logo img {
    display: block;
    width: auto;
    max-width: 100%;
    margin: auto;
}

@media screen and (min-width: 768px) and (max-width: 1499px) {
    .dir-about-tele2__people {
        height: auto;
        margin: 0;
    }
}

@media screen and (min-width: 768px) and (max-width: 1499px) {
    .dir-about-tele2__logo {
        display: none;
    }

    .dir-about-tele2 {
        grid-template-columns: 1fr 1fr;
    }

    .dir-about-tele2-content {
        padding: 0 30px 0 0;
    }
}

@media screen and (max-width: 767px) {
    .dir-about-tele2 {
        grid-template-columns: 1fr;
        border-radius: 0;
        margin: 50px -24px 0 -24px;
        padding: 0 24px;
    }

    .dir-about-tele2__logo {
        display: none;
    }

    .dir-about-tele2-content {
        order: 1;
        padding: 30px 0;
    }

    .dir-about-tele2__people {
        height: auto;
        width: 100%;
        order: 2;
        margin: 0;
    }
}

@media screen and (max-width: 577px) {
    .dir-about-tele2 {
        margin: 50px -16px 0 -16px;
        padding: 0 16px;
    }
}

/*about rostelekom*/
.dir-about-rostelekom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 50px 0 0 0;
    background: #FFBF08;
    border-radius: 8px;
    overflow: hidden;
}

.dir-about-rostelekom__brand {
    background-image: url(/templates/planet/resource/img/dir-description/rostelekom/about_bg.jpg);
    background-size: cover;
    background-position: center right;
    display: flex
}

.dir-about-rostelekom__brand-title {
    font-size: 48px;
    font-weight: 700;
    margin: auto 20% auto auto;
    color: #fff;
}

.dir-about-rostelekom__content {
    padding: 50px 50px;
}

.dir-about-rostelekom__content h2 {
    color: #FFF;
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 30px 0;
}

.dir-about-rostelekom__content p {
    color: #fff;
    font-size: 15px;
    font-weight: 400;
}

@media screen and (max-width: 991px) {
    .dir-about-rostelekom__brand {
        display: none;
    }

    .dir-about-rostelekom {
        display: block;
        background-image: url(/templates/planet/resource/img/dir-description/rostelekom/about_bg.jpg);
        background-size: cover;
        background-position: center right;
    }
}

@media screen and (max-width: 767px) {
    .dir-about-rostelekom__content {
        padding: 0;
    }

    .dir-about-rostelekom {
        margin: 30px -24px 0 -24px;
        padding: 30px 24px;
        border-radius: 0;
    }
}

@media screen and (max-width: 577px) {
    .dir-about-rostelekom {
        margin: 30px -16px 0 -16px;
        padding: 30px 16px;
    }
}