:root {
	--black-100: #041733;
	--primary-100: #143260;
	--primary-80: #0d5baf;
	--primary-30: #5f90c5;
	--primary-15: #e5f2fe;
	--primary-1: #f5faff;
	--yellow: #ffd52e;
	--yellow-30: #ffedcf;
	--gray-15: #d7d7d7;
	--gray-5: #f7f7f7;
	--gray-0: #fff;
	--primary-green-100: #04ae94;
	--gray-1: #fafafa;
    --green-dark: #319888;
    --light-green: #ccfff7;
    --green-hover: #01826e;

    --font-family: "PlusJakartaSans", sans-serif;

    --container: 20px;

    @media(width <= 1024px) {
        --container: 16px;
    }
}

@font-face {
    font-family: "PlusJakartaSans";
    src: url('../fonts/PlusJakartaSans/PlusJakartaSans-Regular.woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "PlusJakartaSans";
    src: url('../fonts/PlusJakartaSans/PlusJakartaSans-Medium.woff2');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "PlusJakartaSans";
    src: url('../fonts/PlusJakartaSans/PlusJakartaSans-SemiBold.woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: "PlusJakartaSans";
    src: url('../fonts/PlusJakartaSans/PlusJakartaSans-Light.woff2');
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    margin: 0;
    padding: 0;
    font-family: var(--font-family), sans-serif;
    font-size: 16px;
    line-height: 1.4;
}

html {
    scroll-behavior: smooth;
}

body {
    padding-top: 160px;

    @media(width <= 1024px) {
        padding-top: 130px;
    }

    @media(width <= 768px) {
        padding-top: 110px;
    }
}

.container {
    display: block;
    width: 100%;
    max-width: calc(1340px + var(--container) * 2);
    margin: 0 auto;
    padding-inline: var(--container);
}

.swiper__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;

    .swiper-pagination-bullet {
        background-color: var(--primary-green-100);
    }

    .swiper-pagination-bullet-active {
        background-color: var(--green-dark);
    }
}

.swiper__button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .2s ease;

    @media(hover: hover) {
        &:hover {
            background-color: var(--primary-green-100);

            &::after {
                background-color: #fff;
            }
        }
    }

    @media(width <= 1024px) {
        width: 36px;
        height: 36px;
    }

    &::after {
        content: '';
        display: block;
        height: 32px;
        width: 32px;
        mask-image: url('../images/icons/icon-chevron-right.svg');
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        background-color: #000;
        transition: background-color .2s ease;

        @media(width <= 1024px) {
            width: 24px;
            height: 24px;
        }
    }

    &.swiper__button-prev {
        transform: rotate(180deg);
    }

    &.swiper-button-disabled {
        opacity: 0.3;
        pointer-events: none;
    }
}

.section {
    .section-subtitle {
        font-family: var(--font-family);
        font-weight: 600;
        font-size: 24px;
        line-height: 1.2;
        color: var(--primary-green-100);

        @media(width <= 1024px) {
            font-size: 22px;
        }

        @media(width <= 768px) {
            font-size: 20px;
        }

    }

    .section-title {
        font-family: var(--font-family);
        font-weight: 600;
        font-size: 40px;
        line-height: 1.2;
        color: #000;

        @media(width <= 1024px) {
            font-size: 36px;
        }

        @media(width <= 768px) {
            font-size: 32px;
        }

        @media(width <= 576px) {
            font-size: 30px;
        }

    }

    .section__header {
        text-align: center;
        margin-bottom: 36px;

        @media(width <= 768px) {
            margin-bottom: 24px;
        }
    }

    &.pblock {
        padding-block: 56px;

        @media(width <= 1024px) {
            padding-block: 44px;
        }

        @media(width <= 768px) {
            padding-block: 36px;
        }
    }
}

.link {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 18px;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    text-underline-offset: 3px;
    color: var(--black-100);
    transition: color .2s ease;

    @media(width <= 768px) {
        font-size: 16px;
    }

    @media(hover: hover) {
        &:hover {
            color: var(--green-hover);
        }
    }

    &.link--back {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 24px;

        @media(width <= 768px) {
            gap: 12px;
        }

        @media(hover: hover) {
            &:hover {
                &::before {
                    background-color: var(--green-hover);
                }
            }
        }

        &::before {
            content: '';
            display: block;
            width: 24px;
            height: 24px;
            flex-shrink: 0;
            transform: rotate(180deg);
            mask-image: url('../images/icons/icon-arrow-right.svg');
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: contain;
            background-color: currentColor;
            transition: background-color .2s ease;

            @media(width <= 768px) {
                width: 20px;
                height: 20px;
            }
        }
    }
}

.btn {  
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    border-radius: 32px;
    background-color: var(--primary-green-100);
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 18px;
    text-decoration: none;
    white-space: nowrap;
    color: var(--gray-0);
    padding: 10px 70px;
    transition: background-color .2s ease;

    @media(hover: hover) {
        &:hover {
            background-color: var(--green-hover);
        }
    }

    @media(width <= 1024px) {
        height: 48px;
        font-size: 16px;
        padding: 10px 50px;
    }

    @media(width <= 768px) {
        padding: 5px 30px;
    }

    &.btn--white {
        background-color: #fff;
        color: var(--primary-green-100);

        @media(hover: hover) {
            &:hover {
                background-color: var(--light-green);
            }
        }
    }

    &.btn--green-border {
        background-color: transparent;
        border: 1px solid var(--primary-green-100);
        color: var(--primary-green-100);
        gap: 32px;

        @media(width <= 768px) {
            gap: 24px;
        }

        @media(width <= 576px) {
            gap: 16px;
        }

        &::after {
            content: '';
            display: block;
            width: 32px;
            height: 32px;
            flex-shrink: 0;
            mask-image: url('../images/icons/icon-arrow-right.svg');
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: contain;
            background-color: currentColor;

            @media(width <= 1024px) {
                width: 30px;
                height: 30px;
            }

            @media(width <= 768px) {
                width: 28px;
                height: 28px;
            }
        }

        @media(hover: hover) {
            &:hover {
                background-color: var(--green-dark);
                color: #fff;
            }
        }
    }
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;

    .header__top {
        background-color: var(--light-green);
        
        .header__top-container {
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            @media(width <= 1024px) {
                height: 50px;
            }

            @media(width <= 768px) {
                height: 40px;
            }

        }

        .header__top-item {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            text-decoration: none;
            font-family: var(--font-family);
            font-weight: 500;
            font-size: 16px;
            color: var(--black-100);
            transition: color .2s ease;

            @media(width <= 1024px) {
                font-size: 15px;
                gap: 6px;
            }

            @media(width <= 768px) {
                font-size: 14px;
                gap: 4px;
            }
        }
        
        span {
            display: inline-block;
            
            &::before {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                height: 24px;
                width: 24px;
                font-size: 24px;

                @media(width <= 1024px) {
                    height: 22px;
                    width: 22px;
                    font-size: 22px;
                }

                @media(width <= 768px) {
                    height: 20px;
                    width: 20px;
                    font-size: 20px;
                }
            }
        }

        a {
            @media(hover: hover) {
                &:hover {
                    color: var(--primary-80);
                }
            }
        }

        .header-location {
            @media(width <= 768px) {
                display: none;
            }
        }

        .header-insurances {
            @media(width <= 1024px) {
                display: none;
            }
        }
    }
    
    .header__bottom {
        background-color: #fff;
        position: relative;

        .header__bottom-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 22px;
            height: 100px;

            @media(width <= 1024px) {
                height: 80px;
            }

            @media(width <= 768px) {
                height: 70px;
            }
        }

        .header__bottom-logo {

            @media(width <= 1024px) {
                max-width: 180px;
            }

            @media(width <= 768px) {
                max-width: 160px;
            }

            img {
                display: block;
                max-width: 100%;
            }
        }

        .header__nav {
            margin-left: auto;

            @media(width <= 1024px) {
                margin-left: initial;
                background-color: #fff;
                width: 100%;
                position: absolute;
                top: 100%;
                left: 0;
                padding: 32px 16px;
                transform: translateY(-100%);
                transition: transform .2s ease;
                z-index: -1;
            }

            &.active {
                transform: translateY(0);
            }

            ul {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                gap: 16px;
                list-style: none;

                @media(width <= 1024px) {
                    flex-direction: column;
                    align-items: center;
                    justify-content: flex-start;
                    margin-bottom: 24px;
                    gap: 10px;
                }
            }

            a:not(.btn) {
                text-decoration: none;
                font-family: var(--font-family);
                font-weight: 500;
                font-size: 16px;
                color: var(--black-100);

                @media(hover: hover) {
                    &:hover {
                        color: var(--primary-80);
                    }
                }

                @media(width <= 1024px) {
                    font-size: 18px;
                }
            }
        }

        .header__nav-btn {
            display: none;
            @media(width <= 576px) {
                display: flex;
            }
        }

        .header__bottom-btn {
            @media(width <= 1024px) {
                margin-left: auto;
            }

            @media(width <= 576px) {
                display: none;
            }
        }
    }

    .header-mobile__btn{
        padding: 0;
        margin: 0;
        border: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background-color: transparent;
		position: relative;
		
		&::before {
            content: '';
            display: block;
            width: 24px;
            height: 24px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50% -50%);
        }

        span {
            display: block;
            height: 2px;
            width: 24px;
            background-color: var(--black-100);
            transition: transform .3s ease;
        }

        @media(width > 1024px) {
            display: none;
        }

        &.active {
            gap: 0;

            span:first-child {
                transform: translateY(1px) rotate(45deg);
            }

            span:nth-child(2) {
                display: none;
            }

            span:last-child {
                transform: translateY(-1px) rotate(-45deg);
            }
        }
    }
}

.footer {
    background-color: var(--green-dark);
    border-radius: 24px 24px 0 0;
    padding-block: 36px;
    color: var(--gray-0);

    .footer__container {
        display: grid;
        grid-template-columns: minmax(0, 432px) minmax(0, 320px) minmax(0, 320px);
        justify-content: space-between;
        gap: 30px;

        @media(width <= 1024px) {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            gap: 50px;
        }

        @media(width <= 576px) {
            gap: 24px;
        }
    }

    .footer__column {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 24px;

        @media(width <= 1024px) {
            gap: 16px;
        }
    }

    .footer__item {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 16px;

        @media(width <= 576px) {
            gap: 8px;
            font-size: 14px;
        }

        .icon {
            display: block;
            height: 24px;
            width: 24px;
            font-size: 24px;

            @media(width <= 576px) {
                height: 20px;
                width: 20px;
                font-size: 18px;
            }
        }
    }

    a {
        text-decoration: none;
        font-family: var(--font-family);
        font-weight: 500;
        font-size: 16px;
        color: var(--gray-0);
        transition: color .2s ease;

        @media(hover: hover) {
            &:hover {
                color: var(--primary-100);
            }
        }

        @media(width <= 576px) {
            font-size: 14px;
        }
    }

    .footer-title {
        font-family: var(--font-family);
        font-weight: 600;
        font-size: 24px;

        @media(width <= 1024px) {
            font-size: 20px;
        }

        @media(width <= 576px) {
            font-size: 18px;
        }
    }

    p {
        font-family: var(--font-family);
        font-weight: 400;
        font-size: 20px;

        @media(width <= 1024px) {
            font-size: 18px;
        }

        @media(width <= 576px) {
            font-size: 16px;
        }
    }

    .btn {
        margin-top: 12px;

        @media(width <= 576px) {
            width: 100%;
        }
    }
}

.hero {
    background: linear-gradient(252.59deg, #fff 0%, #edfffc 96%);
    padding-block: 100px 150px;
    position: relative;
    overflow: hidden;

    @media(width <= 1024px) {
        padding-block: 90px 120px;
    }

    @media(width <= 768px) {
        padding-block: 80px 100px;
    }

    @media(width <= 576px) {
        padding-block: 52px 64px;
    }

    &::before {
        content: '';
        display: block;
        height: 95%;
        aspect-ratio: 1;
        border-radius: 50%;
        border: 1px solid #127e66;
        position: absolute;
        bottom: 10px;
        right: 0;
        z-index: 0;
        transform: translateX(45%);

        @media(width <= 1024px) {
            opacity: 0.1;
        }

        @media(width <= 768px) {
            content: none;
        }
    }

    &::after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: url('../images/hero.png') bottom right / contain no-repeat;
        z-index: 0;

        @media(width <= 1024px) {
            opacity: 0.2;
            background: url('../images/hero.png') bottom right / contain no-repeat;
        }
    }

    .hero__container {
        position: relative;
        z-index: 1;
    }

    .hero__header {
        margin-bottom: 64px;

        @media(width <= 768px) {
            margin-bottom: 46px;
        }
        @media(width <= 576px) {
            margin-bottom: 32px;
        }

        .hero-title {
            font-family: var(--font-family);
            font-weight: 600;
            font-size: 40px;
            color: #046b55;
            margin-top: 8px;

            @media(width <= 1024px) {
                font-size: 36px;
            }

            @media(width <= 768px) {
                font-size: 30px;
            }
        }
    
        .hero-subtitle {
            display: inline-block;
            font-family: var(--font-family);
            font-weight: 600;
            font-size: 24px;
            color: var(--black-100);
            border-bottom: 1px solid var(--black-100);

            @media(width <= 1024px) {
                font-size: 22px;
            }

            @media(width <= 768px) {
                font-size: 20px;
            }
        }

    }

    .hero__swiper {
        overflow: visible;
    }

    .hero__cards {
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
    }

    .hero__card {
        width: 100%;
        height: auto;
        max-width: 432px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        background-color: #fff;
        border-radius: 12px 12px 24px 24px;
        overflow: hidden;

        @media(width <= 576px) {
            /* max-width: 320px; */
        }

        .hero__card-img {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 12px;
            aspect-ratio: 432 / 302;
            object-fit: cover;
        }

        .hero__card-text {
            width: 100%;
            padding: 24px 16px;

            @media(width <= 768px) {
                padding: 18px 16px;
            }

            a {
                text-decoration: none;
                
                @media(hover: hover) {
                    &:hover {
                        .hero__card-title {
                            color: var(--green-hover);  
                        }
                    }
                }
                
            }
        }
        
        .hero__card-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;
            font-family: var(--font-family);
            font-weight: 400;
            font-size: 20px;
            color: var(--black-100);

            @media(width <= 1024px) {
                font-size: 18px;
            }

            @media(width <= 768px) {
                font-size: 16px;
            }
            
            &::after {
                content: '';
                display: block;
                flex-shrink: 0;
                width: 32px;
                height: 32px;
                mask-image: url('../images/icons/icon-arrow-right.svg');
                mask-repeat: no-repeat;
                mask-position: center;
                mask-size: contain;
                background-color: currentColor;

                @media(width <= 1024px) {
                    width: 24px;
                    height: 24px;
                }
            }
        }
    }

}

.advantages {
    padding-block: 80px;

    @media(width <= 768px){
        padding-block: 52px;
    }

    .advantages__container {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 32px;

        @media(width <= 768px){
            flex-direction: column;
            align-items: center;
        }
    }

    .advantages__item {
        width: 100%;
        max-width: 320px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;

        .advantages__item-img {
            display: block;
            width: 44px;
            height: 44px;
            object-fit: contain;
            margin-bottom: 24px;

            @media(width <= 768px){
                margin-bottom: 16px;
            }
        }

        .advantages__item-title {
            font-family: var(--font-family);
            font-weight: 600;
            font-size: 24px;
            color: var(--black-100);
            margin-bottom: 16px;
    
            @media(width <= 576px){
                font-size: 20px;
                margin-bottom: 8px;
            }

        }

        .advantages__item-text {
            display: inline-block;
            font-family: var(--font-family);
            font-weight: 300;
            font-size: 16px;
            text-align: center;
            color: var(--black-100);

            @media(width <= 576px){
                font-size: 14px;
            }
        }
    }
}

.about-us {
    padding-block: 44px;

    .about-us__container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 7%;

        @media(width <= 1024px) {
            flex-direction: column;
            gap: 32px;
        }
    }

    .about-us__item {
        width: 100%;

        img {
            display: block;
            width: auto;
            height: auto;
            max-width: 100%;
            border-radius: 24px;
            object-fit: cover;

            @media(width <= 1024px) {
                margin: 0 auto;
            }
        }
    }

    .section-subtitle,
    .section-title {
        margin-bottom: 24px;

        @media(width <= 1024px) {
            margin-bottom: 18px;
        }
    }

    p {
        font-family: var(--font-family);
        font-weight: 400;
        font-size: 20px;
        color: var(--black-100);

        @media(width <= 1024px) {
            font-size: 18px;
        }

        @media(width <= 768px) {
            font-size: 16px;
        }

    }

    p + p {
        margin-top: 16px;

        @media(width <= 768px) {
            margin-top: 12px;
        }

    }
}

.person {
    margin-bottom: 56px;

    @media(width <= 1024px) {
        margin-bottom: 36px;
    }

    @media(width <= 768px) {
        margin-bottom: 24px;
    }

    .person__container {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 44px;
        background-color: var(--gray-1);
        border-radius: 12px;
        gap: 7%;

        @media(width <= 1024px) {
            gap: 24px;
            align-items: flex-start;
        }
        
        @media(width <= 768px) {
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            padding: 24px;
            border-radius: 24px;
        }

        @media(width <= 576px) {
            padding: 16px;
        }

        &.reverse {
            flex-direction: row-reverse;

            @media(width <= 768px) {
                flex-direction: column;
            }
        }
    }

    .person__img {
        width: 100%;
        max-width: 386px;

        @media(width <= 1024px) {
            /* position: sticky; */
            /* top: 140px; */
        }

        @media(width <= 768px) {
            position: static;
            margin: 0 auto;
        }

        img {
            display: block;
            width: auto;
            height: auto;
            max-width: 100%;
            object-fit: cover;
            border-radius: 24px;
        }
    }

    .person__content {
        width: 100%;
        max-width: 620px;

        @media(width <= 768px) {
            max-width: 100%;
        }
    }

    .person__name {
        font-family: var(--font-family);
        font-weight: 600;
        font-size: 24px;
        color: var(--black-100);
        margin-bottom: 16px;

        @media(width <= 1024px) {
            font-size: 22px;
            margin-bottom: 8px;
        }

        @media(width <= 768px) {
            font-size: 20px;
        }

        @media(width <= 576px) {
            font-size: 18px;
        }
    }

    .person__position {
        font-family: var(--font-family);
        font-weight: 600;
        font-size: 24px;
        color: var(--primary-green-100);
        margin-bottom: 32px;

        @media(width <= 1024px) {
            font-size: 22px;
            margin-bottom: 24px; 
        }

        @media(width <= 768px) {
            font-size: 20px;
            margin-bottom: 16px; 
        }

        @media(width <= 576px) {
            font-size: 18px;
        }
    }

    p {
        font-family: var(--font-family);
        font-weight: 400;
        font-size: 20px;
        color: var(--black-100);

        @media(width <= 1024px) {
            font-size: 18px;
        }

        @media(width <= 576px) {
            font-size: 16px;
        }
    }

    p + p {
        margin-top: 24px;

        @media(width <= 1024px) {
            margin-top: 16px;   
        }

        @media(width <= 768px) {
            margin-top: 8px;   
        }
    }

    .person__highlight {
        background-color: #e0fffa;
        border-radius: 12px;
        padding: 16px;
        margin-top: 32px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 16px;

        @media(width <= 1024px) {
            margin-top: 24px;
        }

        @media(width <= 768px) {
            margin-top: 16px;
            gap: 12px;
        }

        &::before {
            content: '';
            display: block;
            width: 44px;
            height: 44px;
            flex-shrink: 0;
            border: 1px solid var(--primary-green-100);
            border-radius: 50%;
            background: url('../images/icons/icon-outline-heart.svg') center center / 80% no-repeat;

            @media(width <= 1024px) {
                width: 32px;
                height: 32px;
            }

        }

        p {
            font-family: var(--font-family);
            font-weight: 500;
            font-size: 20px;
            color: var(--black-100);

            @media(width <= 1024px) {
                font-size: 16px;
            }

            @media(width <= 576px) {
                font-size: 14px;
            }
        }
    }
}

.support {
    margin-bottom: 56px;

    .support__container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 24px;
    }

    .support__swiper {
        align-items: stretch;

        @media(width <= 576px) {
            order: -1;
        }
    }

    .support__swiper-wrapper {
        align-items: center;

        @media(width <= 1024px) {
            align-items: flex-start;        
        }
    }

    .support__header {
        height: 80px;
        border-radius: 12px;
        padding: 0 16px;
        background-color: #effffd;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8%;

        @media(width <= 1024px) {
            height: 70px;
        }

        @media(width <= 768px) {
            height: 60px;
        }

        @media(width <= 576px) {
            height: 50px;       
        }

        &::after {
            content: '';
            display: block;
            width: 100%;
            height: 2px;
            background-color: #04c1a4;
        }

        .support__header-title {
            font-family: var(--font-family);
            font-weight: 600;
            font-size: 24px;
            color: var(--primary-green-100);
            white-space: nowrap;

            @media(width <= 1024px) {
                font-size: 22px;
            }

            @media(width <= 768px) {
                font-size: 20px;
            }

            @media(width <= 576px) {
                font-size: 18px;  
            }
        }
    }

    .support__content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 12px;
        background-color: #effffd;
        padding: 24px 8px;
        position: relative;

        @media(width <= 576px) {
            flex-wrap: wrap;
            padding: 16px;
        }
    }

    .support__card {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        @media(width <= 1024px) {
            flex-wrap: wrap;
            gap: 16px 24px;       
        }

        @media(width <= 576px) {
            gap: 16px;          
        }

        .support__card-img {
            display: block;
			flex-shrink: 0;
            width: 100%;
            height: auto;
            border-radius: 24px;
            max-width: 386px;
            aspect-ratio: 386 / 463;
            object-fit: cover;

            @media(width <= 1024px) {
                border-radius: 50%;
                width: 120px;
                aspect-ratio: 1;
                object-position: top center;
            }

            @media(width <= 576px) {
                width: 100px;           
            }
        }

        .support__card-header {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 32px;

            @media(width <= 1024px) {
                width: calc(100% - 144px);
                gap: 24px;
            }

            @media(width <= 768px) {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }

            @media(width <= 576px) {
                width: calc(100% - 116px);
                gap: 8px;
            }
        }

        .support__card-badge {
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--primary-green-100);
            border-radius: 32px;
            padding: 10px;
            font-family: var(--font-family);
            font-weight: 400;
            font-size: 20px;
            color: var(--primary-green-100);
            white-space: nowrap;

            @media(width <= 1024px) {
                font-size: 16px;
                height: 36px;
            }

            @media(width <= 768px) {
                height: auto;
                font-size: 12px;
                padding: 4px 8px;
            }
        }

        .support__card-name {
            font-family: var(--font-family);
            font-weight: 600;
            font-size: 24px;
            line-height: 1.2;
            color: var(--black-100);
            margin-bottom: 16px;

            @media(width <= 1024px) {
                font-size: 22px;
                margin-bottom: 8px;
            }

            @media(width <= 768px) {
                font-size: 20px;
            }

            @media(width <= 576px) {
                font-size: 18px;        
            }
        }

        .support__card-position {
            display: inline-block;
            font-family: var(--font-family);
            font-weight: 600;
            font-size: 24px;
            line-height: 1.2;
            color: var(--primary-green-100);

            @media(width <= 1024px) {
                font-size: 20px;
            }

            @media(width <= 768px) {
                font-size: 18px;
            }

            @media(width <= 576px) {
                font-size: 16px;        
            }
        }

        .support__card-content-wrapper {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 16px;
            padding: 20px 40px;

            @media(width <= 1024px) {
                display: contents;
            }
            
        }

        .support__card-content {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 16px;
            font-family: var(--font-family);
            font-weight: 400;
            font-size: 18px;
            color: var(--black-100);

            @media(width <= 1024px) {
                font-size: 16px;
            }

            @media(width <= 576px) {
                font-size: 14px; 
                gap: 10px;    
            }

            ul {
                list-style: none;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: flex-start;
                gap: 16px;

                @media(width <= 1024px) {
                    gap: 8px;
                }

                @media(width <= 576px) {
                    gap: 6px;
                }

                li {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    gap: 16px;

                    @media(width <= 1024px) {
                        gap: 8px;
                    }

                    &::before {
                        content: '';
                        display: block;
                        height: 22px;
                        width: 22px;
                        flex-shrink: 0;
                        border-radius: 50%;
                        background-image: url('../images/icons/icon-check.svg');
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: contain;

                        @media(width <= 1024px) {
                            height: 20px;
                            width: 20px;
                        }
                    }
                }
            }
        }
    }

    .support__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
        border-radius: 12px;
        background-color: #edfffc;
        gap: 24px;

        @media(width <= 1024px) {
            gap: 16px;
        }

        @media(width <= 768px) {
            flex-wrap: wrap;
            justify-content: center;
        }

        @media(width <= 576px) {
            gap: 16px;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        &::before {
            content: '';
            display: block;
            height: 64px;
            width: 64px;
            flex-shrink: 0;
            border-radius: 50%;
            background-color: var(--primary-green-100);
            background-image: url('../images/icons/icon-calendar-outline.svg');
            background-repeat: no-repeat;
            background-position: center;
            background-size: 70%;

            @media(width <= 1024px) {
                height: 56px;
                width: 56px;
            }
        }

        .support__footer-content {
            margin-right: auto;
            max-width: 462px;

            @media(width <= 768px) {
                margin-right: initial;
                max-width: calc(100% - 80px);
            }

            @media(width <= 576px) {
                max-width: 100%;
                text-align: center;
            }
        }

        .support__footer-title {
            font-family: var(--font-family);
            font-weight: 600;
            font-size: 24px;
            color: var(--black-100);
            line-height: 1.2;
            margin-bottom: 8px;

            @media(width <= 1024px) {
                font-size: 20px;
            }

            @media(width <= 768px) {
                font-size: 18px;
                margin-bottom: 6px;
            }
        }

        p {
            font-family: var(--font-family);
            font-weight: 400;
            font-size: 20px;
            color: var(--black-100);

            @media(width <= 1024px) {
                font-size: 18px;
            }

            @media(width <= 768px) {
                font-size: 16px;
            }
        }

        .btn {
            @media(width <= 576px) {
                width: 100%;
            }
        }
    }
}

.contacts {
    margin-bottom: 56px;

    .contacts__container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;

        @media(width <= 768px) {
            grid-template-columns: 1fr;
        }
    }

    .contacts__location {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 16px;
    }

    .contacts__img,
    iframe {
        display: block;
        width: 100%;
        border-radius: 12px;
    }

    .contacts__img {
        object-fit: cover;
        height: 65%;
    }

    iframe {
        height: 250px;
    }

    .contacts__content {
        border: 1px solid var(--gray-15);
        border-radius: 12px;
        padding: 32px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 32px;

        @media(width <= 576px) {
            gap: 24px;
            padding: 24px 16px;
        }

        .contacts__content-title {
            width: 100%;
            font-family: var(--font-family);
            font-weight: 600;
            font-size: 24px;
            text-align: center;
            color: var(--black-100);
            text-align: center;

            @media(width <= 1024px) {
                font-size: 22px;
            }

            @media(width <= 768px) {
                font-size: 20px;
            }
        }

        ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 32px;

            @media(width <= 1024px) {
                gap: 24px;
            }
        }

        .contacts__text {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 8px;
            font-family: var(--font-family);
            font-weight: 500;
            font-size: 18px;
            color: var(--black-100);
            text-decoration: none;

            @media(width <= 1024px) {
                font-size: 16px;
            }

            @media(width <= 576px) {
                gap: 6px;
                font-size: 14px;
            }

            .icon {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 24px;
                height: 24px;
                flex-shrink: 0;
                font-size: 24px;

                @media(width <= 576px) {
                    height: 20px;
                    width: 20px;
                    font-size: 20px;
                }
            }
        }

        a:not(.btn) {
            transition: color .2s ease;

            @media(hover: hover) {
                &:hover {
                    color: var(--green-dark);
                }
            }
        }

        .btn {
            margin-top: 56px;
            align-self: center;

            @media(width <= 576px) {
                width: 100%;
                margin-top: 32px;
            }
        }
    }
}

.feedback {

    .feedback__container {
        border-bottom: 1px solid var(--gray-0);
        border-radius: 12px;
        padding-block: 36px;
        background-color: #effffd;
    }

    .section__header {
        margin-bottom: 64px;
    }

    .section-title {
        position: relative;
        z-index: 1;

        &::before {
            content: '';
            display: block;
            height: 124px;
            width: 124px;
            background-image: url('../images/icons/icon-quote.svg');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            z-index: -1;

            @media(width <= 768px) {
                width: 100px;
                height: 100px;
            }
        }
    }

    .feedback__buttons {
        text-align: center;
        margin-top: 32px;

        .btn {
            margin: 0 auto;
    
            @media(width <= 576px) {
                width: 100%;
            }
        }
    }

}

.hero-inner {
    overflow: hidden;
    background: linear-gradient(252deg, #fff 0%, #edfffc 96%);
    margin-bottom: 56px;

    @media(width <= 768px) {
        margin-bottom: 32px;
    }

    &.inner--bg {
        position: relative;
        background-repeat: no-repeat;
        background-position: right center;
        background-size: contain;

        &::before {
            content: '';
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, #fff 55%, #fff 100%);

            @media(width <= 768px) {
                content: none;
            }
        }

        .hero-inner__container {
            position: relative;
        }

        .hero-inner__content {
            position: static;

            &::before {
                content: '';
                display: block;
                width: calc(100% + 2px);
                height: calc(100% + 2px);
                position: absolute;
                top: -1px;
                left: -1px;
                background: linear-gradient(270deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 20%, #fff 55%, #fff 100%);
                z-index: -1;

                @media(width <= 768px) {
                    content: none;
                }
            }

            .hero-inner__img {
                left: initial;
                right: 0;
                z-index: -2;
                
                @media(width <= 768px) {
                    display: none;
                }
            }
        }
    }
    
    .hero-inner__container {
        display: flex;
        align-items: stretch;
        min-height: 720px;

        @media(width <= 1024px) {
            min-height: 640px;
        }

        @media(width <= 768px) {
            min-height: 580px;
        }

        @media(width <= 576px) {
            min-height: 500px;
        }
    }
    
    .hero-inner__content {
        width: 60%;
        max-width: 620px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 36px;
        padding-block: 56px;
        position: relative;
        z-index: 1;

        @media(width <= 768px) {
            gap: 24px;
        }

        @media(width <= 576px) {
            gap: 16px;
            width: 100%;
        }

        .hero-inner__content-text {
            padding-bottom: 16px;
            border-bottom: 1px solid var(--gray-15);
        }

        .hero-inner__img {
            display: block;
            height: 100%;
            position: absolute;
            top: 0;
            left: 110%;
            bottom: 0;
            z-index: -1;

            @media(width <= 576px) {
                left: 50%;
                opacity: 0.3;
            }
        }
    }

    .hero-inner__title {
        font-family: var(--font-family);
        font-weight: 600;
        font-size: 40px;
        line-height: 1.2;
        color: var(--primary-green-100);
        margin-bottom: 36px;

        @media(width <= 1024px) {
            font-size: 38px;
            margin-bottom: 24px;  
        }

        @media(width <= 768px) {
            font-size: 36px;
            margin-bottom: 16px; 
        }

        @media(width <= 576px) {
            font-size: 32px;
        }
    }

    p {
        font-family: var(--font-family);
        font-weight: 400;
        font-size: 20px;
        color: #000;

        @media(width <= 1024px) {
            font-size: 18px;
        }

        @media(width <= 768px) {
            font-size: 16px;
        }
    }

    p + p {
        margin-top: 16px;

        @media(width <= 768px) {
            margin-top: 8px;
        }
    }

    .hero-inner__buttons {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 30%;

        @media(width <= 768px) {
            justify-content: space-between;
            gap: 32px;
        }

        @media(width <= 576px) {
            flex-direction: column;
            align-items: flex-start;
            gap: 24px;
        }
    }

}

.services {

    .services__container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;

        @media(width <= 1024px) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media(width <= 576px) {
            grid-template-columns: 1fr;
        }
    }

    .services__item {
        background-color: var(--gray-5);
        border-radius: 12px;

        img {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 12px;
            aspect-ratio: 320 / 214;
            object-fit: cover;
        }

        .services__item-description {
            padding: 16px;
            text-align: center;
        }

        .services__item-title {
            font-family: var(--font-family);
            font-weight: 600;
            font-size: 24px;
            line-height: 1.2;
            text-align: center;
            color: #000;
            margin-bottom: 8px;

            @media(width <= 1024px) {
                font-size: 22px;
            }

            @media(width <= 768px) {
                font-size: 20px;
            }
        }

        .services__item-text {
            display: inline-block;
            font-family: var(--font-family);
            font-weight: 400;
            font-size: 20px;
            text-align: center;
            color: var(--black-100);

            @media(width <= 1024px) {
                font-size: 18px;
            }

            @media(width <= 768px) {
                font-size: 16px;
            }
        }
    }

}

.media-list {
    margin-bottom: 36px;

    @media(width <= 1024px) {
        margin-bottom: 24px;
    }

    @media(width <= 768px) {
        margin-bottom: 16px;
    }

    @media(width <= 576px) {
        margin-bottom: 8px;
    }
    
    .media-list__container {
        border-radius: 12px;
        padding: 44px 16px;
        background-color: var(--gray-1);
    }

    .media-list__block {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 560px));
        justify-content: center;
        gap: 54px;

        @media(width <= 1024px) {
            gap: 36px;
        }

        @media(width <= 768px) {
            gap: 16px;
        }

        @media(width <= 576px) {
            grid-template-columns: 1fr;
            gap: 24px;
        }

        &.reverse {
            .media-list__content {
                order: -1;
            }
        }
    }

    .media-list__img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 24px;
    }

    .media-list__content {
        
        p {
            font-family: var(--font-family);
            font-weight: 600;
            font-size: 24px;
            color: var(--black-100);
            margin-bottom: 24px;

            @media(width <= 1024px) {
                font-size: 20px;
                margin-bottom: 18px;
            }

            @media(width <= 768px) {
                font-size: 18px;
                margin-bottom: 12px;
            }

            @media(width <= 576px) {
                font-size: 16px;
                margin-bottom: 8px;
            }
        }

        ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
            gap: 20px;

            @media(width <= 1024px) {
                gap: 16px;
            }

            @media(width <= 768px) {
                gap: 8px;
            }

            li {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                gap: 16px;
                border-radius: 24px;
                padding: 8px 16px;
                background-color: var(--gray-0);
                font-family: var(--font-family);
                font-weight: 400;
                font-size: 20px;
                color: var(--black-100);

                @media(width <= 1024px) {
                    font-size: 18px;
                }

                @media(width <= 768px) {
                    font-size: 16px;
                }

                &::before {
                    content: '';
                    display: block;
                    width: 24px;
                    height: 24px;
                    flex-shrink: 0;
                    background-image: url('../images/icons/icon-check.svg');
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: contain;

                    @media(width <= 1024px) {
                        width: 22px;
                        height: 22px;
                    }

                    @media(width <= 768px) {
                        width: 20px;
                        height: 20px;
                    }
                }
            }
        }

        .btn {
            margin-top: 36px;

            @media(width <= 768px) {
                margin-top: 18px;
            }

            @media(width <= 576px) {
                width: 100%;
            }
        }
    }
}

.tech {
    margin-bottom: 36px;

    @media(width <= 1024px) {
        margin-bottom: 24px;
    }

    @media(width <= 768px) {
        margin-bottom: 16px;
    }

    @media(width <= 576px) {
        margin-bottom: 8px;
    }

    &.reverse {
        .tech__section {
            .tech__header {
                flex-direction: row-reverse;

                .tech__header-content {
                    .tech__header-text {
                        flex-direction: row-reverse;

                        @media(width <= 768px) {
                            flex-direction: row;
                        }
                    }
                }
            }
        }
    }

    .tech__section {
        background: linear-gradient(259.41deg, rgba(4, 174, 148, 0.72) 1.16%, rgba(4, 174, 148, 0.03) 91.91%);
        padding-block: 32px;
        
        .tech__header {
            display: flex;
            align-items: stretch;
            justify-content: space-between;
            gap: 32px;
            margin-bottom: 54px;

            @media(width <= 1024px) {
                gap: 24px;
                margin-bottom: 36px;
            }

            @media(width <= 768px) {
                display: grid;
                grid-template-columns: 1fr;
                margin-bottom: 24px;
            }

            .tech__header-content {
                width: calc(50% - 16px);
                max-width: 658px;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: space-between;
                gap: 32px;

                @media(width <= 1024px) {
                    gap: 24px;
                }

                @media(width <= 768px) {
                    width: 100%;
                    max-width: 100%;
                }

                .tech__header-text {
                    display: flex;
                    align-items: flex-start;
                    justify-content: flex-start;
                    gap: 32px;

                    @media(width <= 1024px) {
                        gap: 16px;
                    }
                }

                .tech__header-logo {
                    display: block;
                    width: 100%;
                    max-width: 80px;

                    @media(width <= 1024px) {
                        max-width: 60px;
                    }

                    @media(width <= 576px) {
                        max-width: 50px;
                    }

                }

                .tech__header-title {
                    font-family: var(--font-family);
                    font-weight: 600;
                    font-size: 24px;
                    color: var(--black-100);
                    margin-bottom: 24px;

                    @media(width <= 1024px) {
                        font-size: 22px;
                        margin-bottom: 16px;
                    }
                }

                p {
                    font-family: var(--font-family);
                    font-weight: 400;
                    font-size: 20px;
                    color: var(--black-100);

                    @media(width <= 1024px) {
                        font-size: 18px;   
                    }
                }

                .tech__header-list {
                    width: 100%;

                    .tech__header-list-title {
                        font-family: var(--font-family);
                        font-weight: 600;
                        font-size: 24px;
                        color: var(--black-100);
                        margin-bottom: 24px;

                        @media(width <= 1024px) {
                            font-size: 22px;
                            margin-bottom: 16px;
                        }
                    }

                    ul {
                        list-style: none;
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        gap: 16px;

                        @media(width <= 1024px) {
                            gap: 8px;       
                        }

                        @media(width <= 576px) {
                            grid-template-columns: 1fr;
                        }

                        li {
                            display: inline-flex;
                            align-items: center;
                            justify-content: flex-start;
                            gap: 16px;
                            border-radius: 24px;
                            padding: 8px 16px;
                            background-color: var(--gray-0);
                            font-family: var(--font-family);
                            font-weight: 400;
                            font-size: 20px;
                            line-height: 1.2;
                            color: var(--black-100);

                            @media(width <= 1024px) {
                                font-size: 16px;
                                padding: 6px 12px;
                                gap: 12px;
                            }

                            @media(width <= 768px) {
                                font-size: 18px;
                                padding: 8px 16px;
                                gap: 16px;
                            }

                            @media(width <= 576px) {
                                font-size: 16px;
                                gap: 12px;   
                            }

                            &::before {
                                content: '';
                                display: block;
                                width: 24px;
                                height: 24px;
                                flex-shrink: 0;
                                background-image: url('../images/icons/icon-check.svg');
                                background-repeat: no-repeat;
                                background-position: center;
                                background-size: contain;

                                @media(width <= 1024px) {
                                    width: 22px;
                                    height: 22px;
                                }
                            }
                        }
                    }
                }
            }

            .tech__header-img {
                width: calc(50% - 16px);
                display: block;
                border-radius: 12px;
                height: auto;
                max-width: 550px;
                object-fit: cover;

                @media(width <= 768px) {
                    width: 100%;
                    max-width: 100%;
                    aspect-ratio: 2 / 1.25;
                }

                @media(width <= 576px) {
                    aspect-ratio: initial;
                }
            }
        }

        .tech__footer {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            justify-content: space-between;

            @media(width <= 1024px) {
                grid-template-columns: repeat(2, 1fr);
            }

            @media(width <= 576px) {
                grid-template-columns: 1fr;
            }

            .tech__footer-item {
                text-align: center;
                padding: 16px;

                img {
                    display: block;
                    width: 64px;
                    height: 64px;
                    object-fit: contain;
                    margin: 0 auto 24px;

                    @media(width <= 1024px) {
                        height: 56px;
                        width: 56px;
                        margin-bottom: 16px;
                    }
                }

                .tech__footer-title {
                    font-family: var(--font-family);
                    font-weight: 600;
                    font-size: 24px;
                    text-align: center;
                    color: var(--black-100);
                    margin-bottom: 16px;

                    @media(width <= 1024px) {
                        font-size: 22px;
                        margin-bottom: 12px;
                    }
                }

                p {
                    font-family: var(--font-family);
                    font-weight: 400;
                    font-size: 20px;
                    text-align: center;
                    color: var(--black-100);

                    @media(width <= 1024px) {
                        font-size: 18px;   
                    }
                }
            }
        }
    }
}

.preview {
    padding-block: 36px;
    background-color: #319888;
    margin-bottom: 56px;

    @media(width <= 1024px) {
        margin-bottom: 36px;
    }

    @media(width <= 768px) {
        margin-bottom: 24px;
    }

    .section__header {
        max-width: 860px;
        margin: 0 auto 36px;

        @media(width <= 1024px) {
            margin-bottom: 24px;
        }

        @media(width <= 768px) {
            margin-bottom: 16px;
        }

        .section-title {
            color: var(--gray-0);
            margin-bottom: 24px;

            @media(width <= 768px) {
                margin-bottom: 16px;
            }
        }

        p {
            font-family: var(--font-family);
            font-weight: 400;
            font-size: 20px;
            text-align: center;
            color: var(--gray-0);

            @media(width <= 1024px) {
                font-size: 18px;
            }

            @media(width <= 768px) {
                font-size: 16px;
            }
        }
    }

    .preview__img {
        display: block;
        border-radius: 24px;
        width: 100%;
        object-fit: cover;
    }
}

.process {

    .process__container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;

        @media(width <= 768px){
            gap: 10px;
        }

        @media(width <= 576px){
            flex-direction: column;
            gap: 64px;
        }
    }

    .process__item {
        width: 100%;
        position: relative;

        &:not(:first-child) {
            &::before {
                content: '';
                display: block;
                width: 32px;
                height: 32px;
                flex-shrink: 0;
                background-image: url('../images/icons/icon-arrow-right.svg');
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
                position: absolute;
                top: 50%;
                left: -8px;
                transform: translate(-50%, -50%);

                @media(width <= 768px){
                    width: 24px;
                    height: 24px;
                    left: -5px;
                }

                @media(width <= 576px){
                    width: 32px;
                    height: 32px;
                    left: 50%;
                    top: -32px;
                    transform: translate(-50%, -50%) rotate(90deg);
                }

                
            }
        }

        .process__item-content {
            max-width: 170px;
            margin: 0 auto;
        }

        img {
            display: block;
            max-width: 70%;
            margin: 0 auto 12px;

            @media(width <= 1024px){
                max-width: 60%;
            }

            @media(width <= 768px){
                margin-bottom: 4px;
            }
        }

        .process__item-title {
            font-family: var(--font-family);
            font-weight: 500;
            font-size: 20px;
            line-height: 1.2;
            text-align: center;
            color: var(--black-100);

            @media(width <= 1024px){
                font-size: 16px;
            }

            @media(width <= 768px){
                font-size: 14px;
            }

            @media(width <= 576px){
                font-size: 16px;
            }
        }
    }
}

.conditions {
    margin-bottom: 56px;

    @media(width <= 1024px) {
        margin-bottom: 36px;
    }

    @media(width <= 768px) {
        margin-bottom: 24px;
    }

    .conditions__container {
        border-radius: 12px;
        background: var(--gray-5);
        padding: 36px;
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        gap: 36px;

        @media(width <= 1024px) {
            padding: 36px 24px;
        }

        @media(width <= 768px) {
            flex-direction: column;
        }

        @media(width <= 576px) {
            padding: 16px;
        }

        .conditions__content {
            width: 50%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 36px;

            @media(width <= 1024px) {
                gap: 24px;       
            }

            @media(width <= 768px) {
                width: 100%;
            }

            ul {
                width: 100%;
                list-style: none;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 24px;

                @media(width <= 1024px) {
                    gap: 12px;
                }

                @media(width <= 576px) {
                    grid-template-columns: 1fr;
                    gap: 16px;
                }

                li {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    font-family: var(--font-family);
                    font-weight: 500;
                    font-size: 20px;
                    color: var(--black-100);
                    border-radius: 24px;
                    padding: 8px 16px;
                    background: var(--gray-0);

                    @media(width <= 1024px) {
                        font-size: 18px;
                    }

                    @media(width <= 576px) {
                        font-size: 16px;
                    }
                }
            }

            .btn {
                @media(width <= 576px) {
                    width: 100%;
                }
            }
        }


        img {
            display: block;
            width: 50%;
            border-radius: 12px;
            object-fit: cover;

            @media(width <= 768px) {
                width: 100%;
                height: auto;
                aspect-ratio: 2 / 1.25;
            }
        }
        
    }
}

.preventive {
    background: #effffd;
    padding-block: 32px;
    margin-bottom: 56px;

    @media(width <= 1024px) {
        margin-bottom: 36px;
    }

    @media(width <= 768px) {
        margin-bottom: 24px;
    }

    .section__header {
        margin-inline: auto;
        max-width: 545px;

        .section-title {
            margin-bottom: 24px;
        }

        p {
            font-family: var(--font-family);
            font-weight: 400;
            font-size: 20px;
            text-align: center;
            color: var(--black-100);

            @media(width <= 768px) {
                font-size: 18px;
            }

            @media(width <= 576px) {
                font-size: 16px;
            }
        }
    }


    .preventive__container {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 16px;

        @media(width <= 1024px) {
            grid-template-columns: repeat(3, 1fr);  
        }

        @media(width <= 576px) {
            grid-template-columns: repeat(2, 1fr);  
            gap: 8px;
        }
    }

    .preventive__item {
        min-height: 140px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        border-radius: 12px;
        padding: 8px;
        background: var(--gray-0);
        text-align: center;

        img {
            display: block;
            width: 56px;
            height: 56px;
            object-fit: contain;

            @media(width <= 576px) {
                width: 48px;
                height: 48px;
            }
        }

        .preventive__item-title {
            font-family: var(--font-family);
            font-weight: 500;
            font-size: 16px;
            text-align: center;
            color: var(--black-100);
        }
    }
}

.diagnostics {
    background-color: var(--gray-5);
    margin-bottom: 56px;

    @media(width <= 1024px) {
        margin-bottom: 36px;
    }

    @media(width <= 768px) {
        margin-bottom: 24px;
    }

    .section__header {
        margin-inline: auto;
        max-width: 545px;

        .section-title {
            margin-bottom: 24px;
        }

        p {
            font-family: var(--font-family);
            font-weight: 400;
            font-size: 20px;
            text-align: center;
            color: var(--black-100);

            @media(width <= 768px) {
                font-size: 18px;
            }

            @media(width <= 576px) {
                font-size: 16px;
            }
        }
    }

    .diagnostics__container {
        margin-bottom: 36px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;

        @media(width <= 768px) {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;  
        }
    }

    .diagnostics__item {
        background-color: var(--gray-0);
        border-radius: 12px;
        overflow: hidden;
        max-width: 432px;

        img {
            display: block;
            max-width: 100%;
            height: auto;
            border-radius: 12px;
            object-fit: cover;
            aspect-ratio: 432 / 228;
        }

        .diagnostics__item-wrap {
            padding: 16px;
            text-align: center;
        }

        .diagnostics__item-title {
            font-family: var(--font-family);
            font-weight: 600;
            font-size: 24px;
            text-align: center;
            color: var(--black-100);

            @media(width <= 1024px) {
                font-size: 22px;
            }
        }
    }

    .diagnostics__buttons {
        text-align: center;

        .btn {
            margin: 0 auto;
    
            &::after {
                content: none;
            }
        }
    }

}

.page-404 {
    min-height: calc(100vh - 560px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-block: 80px;

    .page-404__code {
        display: inline-block;
        font-size: 10rem;
        text-align: center;
        margin-bottom: 20px;
    }

    .page-title {
        font-family: var(--second-family);
        font-weight: 700;
        margin-bottom: 32px;
    }
}

.simple-post {
    padding-block: 32px;

    .container {
        max-width: calc(1024px + var(--container));
    }

    .simple-post__content {
        padding-block: 24px;
    }

    p + p,
    * + p {
        margin-top: 16px;
    }

    h1, h2, h3, h4, h5, h6 {
        margin-bottom: 16px;
    }

    * + h1,
    * + h2,
    * + h3,
    * + h4,
    * + h5,
    * + h6 {
        margin-top: 24px;
    }

    ul {
        margin-block: 24px;
        padding-left: 20px;
    }

    img {
        display: block;
        max-width: 100%;
        margin: 24px auto;
    }
}