/*  ========================================================
    #BANNER / ПЕРЕОПРЕДЕЛЕНИЕ БАННЕРА
    ======================================================== */

.banner__container {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    /*margin-left: 12.5rem;*/
    margin-bottom: 10rem;
    justify-content: unset;
    align-items: unset;
}

.banner__content {
    text-align: unset;
    max-width: 75rem;
}

/*Services*/

.services {
    padding: 6.875rem 0;
}

.services__content {
    width: 100%;
    box-sizing: border-box;
}

.services__title {
    margin: 0 0 4.125rem;
    font-family: 'Unbounded', sans-serif;
    font-size: var(--font-h2-desktop);
    font-weight: 900;
    line-height: 100%;
    text-align: center;
    text-transform: uppercase;
    color: #202938;
}

.services__tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.875rem;
    padding-bottom: 1.875rem;
    border-bottom: 1px solid #D5D1C9;
}

.services__tab {
    padding: 1rem 0;
    border: none;
    border-radius: 5rem;
    background: transparent;
    font-family: 'Unbounded', sans-serif;
    font-size: var(--font-h3-desktop);
    font-weight: 900;
    line-height: 100%;
    text-transform: uppercase;
    color: #7B7E82;
    cursor: pointer;
    transition: .3s;
}

.services__tab--active {
    background: #202938;
    color: #fff;
}

.services__tab:hover:not(.services__tab--active) {
    background: #EEE;
}

.services__list {
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.875rem;
    margin-bottom: 2.1875rem;
}

.services__list--active {
    display: grid;
}

.service-card {
    display: flex;
	cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
    min-height: 11.625rem;
    padding: 1.25rem 1.5rem;
    border-radius: 1.5rem;
    background: #fff;
    border: 1px solid rgba(187, 187, 187, 0.5);
    transition:
            border-color .3s,
            transform .3s;
}

.service-card:hover {
    border-color: #FF7A00;
}

.service-card__title {
    margin: 0;
    font-family: 'Unbounded', sans-serif;
    font-size: var(--font-h3-desktop);
    font-weight: 900;
    line-height: 120%;
    text-transform: uppercase;
    color: #202938;
}

.service-card__footer {
    display: flex;
    justify-content: space-between;
}

.service-card__info {
    display: flex;
    flex-direction: column;
    font-family: 'Ysabeau SC', sans-serif;
    font-size: var(--font-main-desktop);
    font-weight: 700;
    line-height: 1.4;
    color: #7B7E82;
    text-transform: uppercase;
}

.service-card__arrow {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #7B7E82;
    transition: color .3s, transform .3s;
    margin-right: 1.25rem;
}

.service-card__arrow svg {
    width: 100%;
    height: 100%;
}

.service-card:hover .service-card__arrow {
    color: #FF6B01;
    transform: translateX(0.5rem);
}

.services__button {
    display: block;
    margin: 0 auto;
    padding: 1.125rem 4.25rem;
    background-color: #FF6B01;
    color: #fff;
    font-family: 'Ysabeau SC', sans-serif;
    font-size: var(--font-button-desktop);
    font-weight: 700;
    line-height: 100%;
    text-transform: uppercase;
    border-radius: 5rem;
    cursor: pointer;
}

/*Services*/

/*Design*/

.design {
    position: relative;
    padding: 6.875rem 0;
    background-color: #202938;
    overflow: hidden;
}

.design__content {
    position: relative;
    z-index: 0;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.design__title {
    margin: 0 0 3rem;
    font-family: 'Unbounded', sans-serif;
    font-size: var(--font-h2-desktop);
    font-weight: 900;
    line-height: 120%;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
}

.design__decor {
    position: absolute;
    top: 70%;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
}

.design__decor img {
    display: block;
    width: 17.8125rem; 
    height: auto;
}

.design__row {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 1.125rem;
    margin-bottom: 1.125rem;
}

.design__row--reverse {
    grid-template-columns: 2fr 3fr;
    margin-bottom: 0;
}

.design-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 22.5rem;
    padding: 1.75rem;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(0.75rem);
    -webkit-backdrop-filter: blur(0.75rem);
    box-shadow:
        inset 0 0.0625rem 0 rgba(255,255,255,.08),
        0 0.75rem 1.875rem rgba(0,0,0,.18);
}

.design-card__number {
    font-family: Unbounded, sans-serif;
    font-weight: 900;
    color: var(--color-accent);
    font-size: var(--font-h3-desktop);
}

.design-card__title {
    margin: 0 0 6.875rem;
    font-family: 'Unbounded', sans-serif;
    font-size: var(--font-h3-desktop);
    font-weight: 900;
    line-height: 120%;
    text-transform: uppercase;
    color: #fff;
    width: 33.3125rem;
}

.design-card__description {
    font-family: 'Ysabeau SC', sans-serif;
    font-size: var(--font-main-desktop);
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
}

/*/Design*/

/*Advantages*/

.advantages {
    position: relative;
    overflow: hidden;
    padding: 6.875rem 0;
    background: #EEE;
}

.advantages__content {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

.advantages__title {
    margin: 0 0 3.75rem;
    font-family: 'Unbounded', sans-serif;
    font-size: var(--font-h2-desktop);
    font-weight: 900;
    line-height: 100%;
    text-align: center;
    text-transform: uppercase;
    color: #1F2938;
}

.advantages__title--mobile {
    display: none;
}

.advantages__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9375rem;
    margin-bottom: 1.75rem;
}

.advantages-card {
    padding-top: 1.25rem;
    padding-bottom: 1.875rem;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
    border-radius: 1.25rem;
    background: #fff;
}

.advantages-card__title {
    color: var(--color-accent);
    font-weight: 900;
    font-size: var(--font-h2-desktop);
    text-align: center;
}

.advantages-card__text {
    margin: 0;
    font-family: 'Ysabeau SC', sans-serif;
    font-size: var(--font-main-desktop);
    font-weight: 700;
    line-height: 120%;
    color: #202938;
}

.advantages__list {
    display: flex;
    flex-direction: column;
    margin-bottom: 2.5rem;
}

.advantages-item {
    padding: 2.375rem 0;
    border-bottom: 1px solid #D5D1C9;
}

.advantages-item__title {
    margin: 0 0 0.875rem;
    font-family: 'Unbounded', sans-serif;
    font-size: var(--font-h3-desktop);
    font-weight: 900;
    line-height: 100%;
    text-transform: uppercase;
    color: #1F2938;
}

.advantages-item__text {
    margin: 0;
    font-family: 'Ysabeau SC', sans-serif;
    font-size: var(--font-main-desktop);
    font-weight: 700;
    line-height: 100%;
    color: #7B7E82;
}

.advantages-item__title--mobile,
.advantages-item__text--mobile {
    display: none;
}

.advantages__button {
    position: relative;
    z-index: 2;
    background-color:#FF6B01;
    padding: 1.125rem 4.75rem;
    border-radius: 5rem;
    color: #fff;
    font-family: 'Ysabeau SC', sans-serif;
    font-size: var(--font-button-desktop);
    font-weight: 700;
    line-height: 100%;
    text-transform: uppercase;
    cursor: pointer;
}

.advantages__decor {
    position: absolute;
    right: -7.5rem;
    bottom: -7.5rem;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

.advantages__decor img {
    display: block;
    width: 26.25rem;
    height: auto;
}

/*/Advantages*/

/*TOOLS*/

.tools {
    padding-top: 6.875rem;
    padding-bottom: 8.8125rem;
    background: #EEE;
    overflow: hidden;
}

.tools__title {
    margin-bottom: 2.375rem;
    font-family: 'Unbounded', sans-serif;
    font-size: var(--font-h2-desktop);
    font-weight: 900;
    line-height: 100%;
    text-align: center;
    text-transform: uppercase;
    color: #202938;
}

.tools__slider {
    width: 100%;
}

.tools__item {
    width: 18.125rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
    padding-top: 1.375rem;
    padding-bottom: 1.25rem;
}

.tools__icon {
    width: 6.25rem;
    height: 6.25rem;
    object-fit: contain;

}

.tools__name {
    font-family: 'Unbounded', sans-serif;
    font-size: var(--font-h3-desktop);
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    line-height: 100%;
    color: #202938;
}

.splide__arrows,
.splide__pagination {
    display: none;
}

.splide__track {
    overflow: visible;
}

.splide__slide {
    display: flex;
    justify-content: center;
   
}

/*/TOOLS*/

/*Stages*/

.stages {
    position: relative;
    padding: 7.5rem 0;
    background: #202938;
}

.stages__container {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

.stages__content {
    position: relative;
    z-index: 2;
}

.stages__title {
    margin-bottom: 3rem;
    font-family: "Unbounded", sans-serif;
    font-size: var(--font-h2-desktop);
    font-weight: 900;
    line-height: 100%;
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
}

/*==========================
            DECOR
==========================*/

.stages__decor {
    position: absolute;
    left: 0;
    top: -5.625rem;
    transform: translateX(-5px);
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

.stages__decor img {
    display: block;
    width: 13.625rem;
    height: auto;
}

/*==========================
            LINES
==========================*/

.stages__line {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

.stages__line--mobile-1,
.stages__line--mobile-2,
.stages__line--mobile-3,
.stages__line--mobile-4,
.stages__line--mobile-5{
    display:none;
}

/* Верхняя левая */
.stages__line--top-left{
    top: 1.375rem;
    left: 13.125rem;
	width: 27.5rem;
}

/* Верхняя правая */
.stages__line--top-right{
    top: 1.375rem;
    left: 43.75rem;
	width: 27.5rem;
}

/* Правое скругление */
.stages__line--corner-right{
    top: 1.375rem;
    left: 11.75rem;
    width: 72.5rem;	
}

/* Нижняя левая */
.stages__line--bottom-left{
    top: 18.125rem;
    left: 13.125rem;
	width: 27.5rem;
}

/* Нижняя правая */
.stages__line--bottom-right{
    top: 18rem;
    left: 43.75rem;
	width: 27.5rem;
}

/*==========================
            GRID
==========================*/

.stages__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 7.5rem;
    row-gap: 4.0625rem;
}

/*==========================
            CARD
==========================*/

.stage {
    text-align: center;
}

.stage__icon {
    width: 2.5rem;
    height: 2.5rem;
    margin-left: 10.25rem;
    margin-right: 10.25rem;
    margin-bottom: 1.875rem;
}

.stage__icon img {
    display: block;
    width: 100%;
    height: auto;
}

.stage__title {
    margin-bottom: 0.875rem;
    font-family: "Unbounded", sans-serif;
    font-size: var(--font-h3-desktop);
    font-weight: 900;
    line-height: 1.6;
    text-transform: uppercase;
    color: #FFFFFF;
}

.stage__text {
    max-width: 18.125rem;
    margin: 0 auto;
    font-family: "Ysabeau SC", sans-serif;
    font-size: var(--font-main-desktop);
    font-weight: 700;
    line-height: 124%;
    color: #FFFFFF;
}

/*/STAGES*/

/*Feedback*/

.feedback {
    padding: 5rem 0;
    background-color: #202938;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.feedback__container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    padding: 6rem 4.3125rem;
    background-color: #FE6A04;
    border-radius: 1.25rem;
    gap: 5rem;
}

.feedback__title {
    margin-bottom: 2.5rem;
    font-family: 'Ysabeau SC', sans-serif;
    font-size: var(--font-h2-desktop);
    font-weight: 900;
    line-height: 100%;
    color: #fff;
}

.feedback__description {
    font-family: 'Ysabeau SC';
    font-size: var(--font-main-desktop);
    font-weight: 500;
    line-height: 100%;
    text-transform: uppercase;
    color: #fff;
}

.feedback__form {
    display: flex;
    flex-direction: column;
    padding: 2.5rem;
    background-color: #202938;
    border-radius: 1.5rem;
    width: 100%;
}

.feedback__field:not(:last-of-type) {
    margin-bottom: 1.25rem;
}

.feedback__input {
    width: 100%;
    padding: 1.25rem 0.8775rem;
    border: 1px solid #BBB;
    border-radius: 0.625rem;
    background: transparent;
    font-family: 'Ysabeau SC', sans-serif;
    font-weight: 400;
    font-size: var(--font-small-desktop);
    color: #fff;
    text-transform: uppercase;
    transition: .3s;
}

.feedback__input::placeholder {
    color: rgba(255,255,255,.7);
}

.feedback__input:hover {
    border-color: #FF6B01;
}

.feedback__input:focus {
    outline: none;
    border-color: #FF6B01;
    box-shadow: 0 0 0.75rem rgba(255,122,0,.35);
}

.feedback__agreement {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 2.1875rem;
    cursor: pointer;
}

.feedback__checkbox {
    display: none;
}

.feedback__checkmark {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #BBB;
    border-radius: 0.25rem;
    transition: .3s;
}

.feedback__checkbox:checked + .feedback__checkmark {
    background-color: #FF6B01;
    border-color: #FF6B01;
}

.feedback__agreement-text {
    font-size: var(--font-small-desktop);
    line-height: 1.4;
    font-family: 'Ysabeau SC', sans-serif;
    font-weight: 400;
    color: #BBB;
}

.feedback__agreement-link {
    color: #fff;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: .3s;
}

.feedback__agreement-link:hover {
    color: #FF6B01;
}

.feedback__button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    background-color: #FF6B01;
    padding: 0.8125rem 0;
    border-radius: 5rem;
    font-family: 'Ysabeau SC', sans-serif ;
    font-weight: 700;
    font-size: var(--font-button-desktop);
    line-height: 100%;
    text-transform: uppercase;
    color: #fff;
}

.feedback__button-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
}

.feedback__button-icon svg {
    display: block;
}

/*/Feedback*/

/*Related*/

/*  ========================================================
    #CARDS / КАРТОЧКИ
    ======================================================== */

.related__title {
    font-family: 'Unbounded', sans-serif;
    font-weight: 900;
    font-size: var(--font-h2-desktop);
    line-height: 100%;
    letter-spacing: -0.5%;
    text-transform: uppercase;
    color: #202938;
    text-align: center;
    margin-bottom: 3rem;
}

.related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.875rem;
    transition: opacity .3s ease;
}

.related-card {
    position: relative;
    display: block;
    text-decoration: none;
    border-radius: 1.25rem;
    overflow: hidden;
    background: rgb(32, 41, 56);
    border: .0625rem solid rgba(255, 107, 1, .1);
    transition: border-color .3s, transform .35s ease, opacity .35s ease, visibility .35s;
}

.related-card:hover {
    border-color: rgba(255, 107, 1, .32);
    transform: translateY(-0.375rem);
}

.related-card.is-hidden,
.related-card.is-pager-hidden {
    display: none;
}

.related-card__image {
    aspect-ratio: 4/3;
    overflow: hidden;
    position: relative;
    background: #222;
}

.related-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(.78) saturate(.8);
    transition: transform .5s ease, filter .4s;
}

.related-card:hover .related-card__image img {
    transform: scale(1.07);
    filter: brightness(.96) saturate(1);
}

.related-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 15, 15, .65) 0%, transparent 60%);
    pointer-events: none;
    }

    /*  #1024_CARDS_BODY  */

.related-card__category {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-family: 'Ysabeau SC', sans-serif;
    font-size: var(--font-main-desktop);
    font-weight: 700;
    letter-spacing: .09375rem;
    text-transform: uppercase;
    color: #FF6B01;
    background: rgba(15, 15, 15, .7);
    backdrop-filter: blur(.25rem);
    padding: .3125rem .75rem;
    border-radius: 6.25rem;
    border: .0625rem solid rgba(255, 107, 1, .2);
}

.related-card__body {
    padding: 1.75rem 1.75rem 2rem;
}

.related-card__title {
    font-family: 'Unbounded', sans-serif;
    font-size: var(--font-h3-desktop);
    font-weight: 800;
    color: #f0ede6;
    line-height: 1.3;
    margin-bottom: .75rem;
    letter-spacing: -.01875rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    min-height: 6.1rem;
}

.related-card__description {
    font-size: var(--font-h3-desktop);
    line-height: 1.65;
    margin-bottom: 1.5rem;
    height: 4.9rem;
    overflow: hidden;
}

.related-card__link {
    background-color: #FF6B01;
    padding: .75rem 3.125rem;
    border-radius: 5rem;
    text-transform: uppercase;
    font-size: var(--font-h3-desktop);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .938rem;
    height: 100%;
    cursor: pointer;
    justify-content: center;
    color: #FFF;
}

/*/Related*/

/*==========================
          Адаптив
==========================*/

/* @media(max-width: 1366px) {
    .stages__grid { display: flex; justify-content: space-between; flex-wrap: wrap; column-gap: 0; }
} */

@media(max-width: 1024px) {
    .feedback__container { grid-template-columns: 1fr; }
}

@media(max-width: 768px) {
    .services__tabs { grid-template-columns: 1fr; }
    .services__list { grid-template-columns: 1fr; }
    .design__row { grid-template-columns: 1fr; }
    .advantages__cards { grid-template-columns: 1fr; }
    .stages__grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10.625rem;
    }
	
    .stages__line--mobile-1, .stages__line--mobile-2, .stages__line--mobile-3, .stages__line--mobile-4, .stages__line--mobile-5 {
        display: block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
    }
	
    .stages__line--mobile-1 {
        top: 18.75rem;
    }	
	
	.stages__line--mobile-2 {
        top: 42.25rem;
    }
	
    .stages__line--mobile-3 {
        top: 63.75rem;
    }

    .stages__line--mobile-4 {
        top: 84.875rem;
    }
	
    .stages__line--mobile-5 {
        top: 106.625rem;
    }	
	
    .stages__line--top-left, .stages__line--top-right, .stages__line--corner-right, .stages__line--bottom-left, .stages__line--bottom-right {
        display: none;
    }

    .feedback__container {
        padding: 4rem 3rem;
    }
}

@media (max-width: 570px) {
    .stages__line--mobile-1 {
        top: 17.75rem;
    }	
	
	.stages__line--mobile-2 {
        top: 41.25rem;
    }
	
    .stages__line--mobile-3 {
        top: 62.75rem;
    }

    .stages__line--mobile-4 {
        top: 83.875rem;
    }
	
    .stages__line--mobile-5 {
        top: 105.625rem;
    }	
}

/*Related*/

@media (max-width: 1024px) {
    /*  #1024_CARDS  */

    .related__grid {
        grid-template-columns: 1fr 1fr;
    }

    /*  #1024_CARDS_BODY  */

    .related-card__category {
        font-size: 0.918rem;
    }

    .related-card__title {
        font-size: 1.492rem;
    }

    .related-card__description {
        font-size: 1.492rem;
    }

    .related-card__link {
        font-size: 1.378rem;
    }
}

@media (max-width: 48rem) {
    /*  #768_CARDS_BODY  */

    .related__title {
        font-size: 2.5rem;
        margin-bottom: 5rem;
    }

    .related__grid {
        grid-template-columns: 1fr;
    }

    .related-card__category {
        font-size: 1.286rem;
        padding: 0.5rem 1.5rem;
    }

    .related-card__title {
        font-size: 2.089rem;
        min-height: 8.2rem;
    }

    .related-card__description {
        font-size: 1.928rem;
        height: 5.8rem;
    }

    /*  #768_LOAD  */

    .related-card__link {
        padding: 1.25rem 2.893rem;
        font-size: 1.607rem;
        gap: 1.607rem;
    }
}

@media (max-width: 29.9375rem) {
    .related__title {
        font-size: 4rem;
    }
 }

/*/Related*/