@font-face {
    font-family: "PT Root UI";
    src: url(/local/templates/main/assets/fonts/PT-Root-UI_Light.woff) format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "PT Root UI";
    src: url(/local/templates/main/assets/fonts/PT-Root-UI_Regular.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "PT Root UI";
    src: url(/local/templates/main/assets/fonts/PT-Root-UI_Medium.woff) format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "PT Root UI";
    src: url(/local/templates/main/assets/fonts/PT-Root-UI_Bold.woff) format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Loos Wide";
    src: url(/local/templates/main/assets/fonts/Loos_Wide_Medium.woff) format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

:root {
    --size-1: 4px;
    --size-2: 8px;
    --size-3: 16px;
    --size-4: 24px;
    --size-5: 32px;
    --size-6: 48px;
    --size-7: 64px;
    --size-8: 80px;

    --color-primary: #004077;
    --color-secondary: #77DDBE;

    --font-regular: 'PT Root UI', serif;
    --font-header: 'Loos Wide', serif;
}

* {
    box-sizing: border-box;
}

body {
    line-height: 1.15;
    font-size: 18px!important;
    font-family: var(--font-regular);
    font-weight: 500;
    color: var(--color-primary);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -ms-overflow-style: none;
    font-synthesis: none;
    height: 100%;
    position: relative;
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    margin: 0;
    background: #fff;
}

.m-0 { margin: 0 !important; }
.m-1 { margin: var(--size-1) !important; }
.m-2 { margin: var(--size-2) !important; }
.m-3 { margin: var(--size-3) !important; }
.m-4 { margin: var(--size-4) !important; }
.m-5 { margin: var(--size-5) !important; }
.m-6 { margin: var(--size-6) !important; }
.m-7 { margin: var(--size-7) !important; }
.m-8 { margin: var(--size-8) !important; }
.m-auto { margin: auto !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--size-1) !important; }
.mt-2 { margin-top: var(--size-2) !important; }
.mt-3 { margin-top: var(--size-3) !important; }
.mt-4 { margin-top: var(--size-4) !important; }
.mt-5 { margin-top: var(--size-5) !important; }
.mt-6 { margin-top: var(--size-6) !important; }
.mt-7 { margin-top: var(--size-7) !important; }
.mt-8 { margin-top: var(--size-8) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--size-1) !important; }
.mb-2 { margin-bottom: var(--size-2) !important; }
.mb-3 { margin-bottom: var(--size-3) !important; }
.mb-4 { margin-bottom: var(--size-4) !important; }
.mb-5 { margin-bottom: var(--size-5) !important; }
.mb-6 { margin-bottom: var(--size-6) !important; }
.mb-7 { margin-bottom: var(--size-7) !important; }
.mb-8 { margin-bottom: var(--size-8) !important; }

.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: var(--size-1) !important; }
.ml-2 { margin-left: var(--size-2) !important; }
.ml-3 { margin-left: var(--size-3) !important; }
.ml-4 { margin-left: var(--size-4) !important; }
.ml-5 { margin-left: var(--size-5) !important; }
.ml-6 { margin-left: var(--size-6) !important; }

.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: var(--size-1) !important; }
.mr-2 { margin-right: var(--size-2) !important; }
.mr-3 { margin-right: var(--size-3) !important; }
.mr-4 { margin-right: var(--size-4) !important; }
.mr-5 { margin-right: var(--size-5) !important; }
.mr-6 { margin-right: var(--size-6) !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: var(--size-1) !important; }
.p-2 { padding: var(--size-2) !important; }
.p-3 { padding: var(--size-3) !important; }
.p-4 { padding: var(--size-4) !important; }
.p-5 { padding: var(--size-5) !important; }
.p-6 { padding: var(--size-6) !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: var(--size-1) !important; }
.pt-2 { padding-top: var(--size-2) !important; }
.pt-3 { padding-top: var(--size-3) !important; }
.pt-4 { padding-top: var(--size-4) !important; }
.pt-5 { padding-top: var(--size-5) !important; }
.pt-6 { padding-top: var(--size-6) !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: var(--size-1) !important; }
.pb-2 { padding-bottom: var(--size-2) !important; }
.pb-3 { padding-bottom: var(--size-3) !important; }
.pb-4 { padding-bottom: var(--size-4) !important; }
.pb-5 { padding-bottom: var(--size-5) !important; }
.pb-6 { padding-bottom: var(--size-6) !important; }

.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: var(--size-1) !important; }
.pl-2 { padding-left: var(--size-2) !important; }
.pl-3 { padding-left: var(--size-3) !important; }
.pl-4 { padding-left: var(--size-4) !important; }
.pl-5 { padding-left: var(--size-5) !important; }

.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: var(--size-1) !important; }
.pr-2 { padding-right: var(--size-2) !important; }
.pr-3 { padding-right: var(--size-3) !important; }
.pr-4 { padding-right: var(--size-4) !important; }
.pr-5 { padding-right: var(--size-5) !important; }

.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }

input {
    font-family: var(--font-regular);
    font-size: 16px;
    font-weight: 500;
}

h1 {
    font-weight: 500;
    font-size: 40px;
    font-family: var(--font-header);
    line-height: 120%;
    margin: 0;
}

h2 {
    font-family: var(--font-header);
    font-weight: 500;
    margin: 100px 0 20px;
    font-size: 24px;
    max-width: 1000px;
}

h3 {
    font-family: var(--font-header);
    font-weight: 500;
    font-size: 20px;
    max-width: 1000px;
}

h4 {
    font-family: var(--font-header);
    font-weight: 500;
    font-size: 18px;
    max-width: 1000px;
}

h5 {
    font-family: var(--font-header);
    font-size: 15px;
    max-width: 1000px;
}

h6 {
    font-family: var(--font-header);
    font-size: 12px;
    max-width: 1000px;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color .2s ease;

    &:hover {
        color: var(--color-secondary);
    }
    &.underline {
        text-decoration: underline;
    }
}

.text-bold {
    font-weight: 600;

}

.text-regular {
    font-weight: 400;

}

.text-medium {
    font-weight: 500;
}

.text-no-wrap {
    white-space: nowrap;
}

p {
    font-size: 18px;
    line-height: 1.3em;
    font-weight: 500;

    &:first-of-type {
        margin-top: 0;
    }

    &:last-of-type {
        margin-bottom: 0;
    }
}

ul, ol {
    font-weight: 500;

    li {
        margin-bottom: 10px;

        &:last-child {
            margin-bottom: 0;
        }
    }
}

img {
    &.img--w100 {
        width: 100%;
        height: auto;
    }

    &.img--rounded {
        border-radius: 10px;
    }

    &.img--radius {
        max-height: 100%;
        border-radius: 20px;
        object-fit: cover;
        object-position: center;
    }
}

.section-header {
    font-size: 24px;
    line-height: 1;
    margin: 0 0 24px;
}

.page-links {
    padding: 19px 0 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 35px;
}

.page-links__item {
    display: block;
    font-size: 18px;
    font-weight: 500;
    padding: 0 var(--size-2) var(--size-1);
    border-bottom: 1px solid var(--color-primary);

    &:hover {
        border-color: var(--color-secondary);
    }
}

.card {
    border-radius: 20px;
    background: #E5F0F7;
    padding: 20px;
    color: var(--color-primary);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;

    &.card--green {
        background: var(--color-secondary);
    }

    &.card--blue {
        background: var(--color-primary);
        color: var(--color-secondary);
    }

    .card__title-big {
        font-size: 90px;
        line-height: 1;
        font-weight: 500;
        font-family: var(--font-header);
    }

    .card__title {
        font-size: 36px;
        line-height: 52px;
        font-family: var(--font-header);
        font-weight: 500;
    }

    .card__description {
        font-size: 24px;
        font-weight: 500;
    }
}

.button {
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 16px;
    text-wrap: nowrap;
    text-transform: uppercase;
    background: var(--color-primary);
    border-radius: 3px;
    height: 39px;
    overflow: hidden;
    border: none;
    line-height: 39px;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-regular), sans-serif;
    color: #fff;
    transition: all .5s ease, scale .5s cubic-bezier(0, 0, 0.43, 1.69);

    &.button--icon {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
    }

    &.button--icon.button--pdf::before {
        content: '';
        width: 22px;
        height: 23px;
        background-color: currentColor;
        mask-size: contain;
        mask: url('/local/templates/main/assets/icon/pdf-icon.svg') no-repeat center;
        -webkit-mask-size: contain;
        -webkit-mask: url('/local/templates/main/assets/icon/pdf-icon.svg') no-repeat center;
    }

    &.button--icon.button--arrow::after {
        content: '';
        width: 22px;
        height: 23px;
        background-color: currentColor;
        mask-size: contain;
        mask: url('/local/templates/main/assets/icon/arrow-right.svg') no-repeat center;
        -webkit-mask-size: contain;
        -webkit-mask: url('/local/templates/main/assets/icon/arrow-right.svg') no-repeat center;
    }

    &.button--icon.button--arrow-left::before {
        content: '';
        width: 22px;
        height: 23px;
        background-color: currentColor;
        mask-size: contain;
        mask: url('/local/templates/main/assets/icon/arrow-right.svg') no-repeat center;
        -webkit-mask-size: contain;
        -webkit-mask: url('/local/templates/main/assets/icon/arrow-right.svg') no-repeat center;
        transform: rotate(180deg);
        transform-origin: center center;
    }

    &:hover {
        cursor: pointer;
        color: #fff;
        background: transparent;
        color: var(--color-primary);
        box-shadow: inset 0 0 0 1px var(--color-primary);
    }

    &:active {
        scale: 1.05;
    }

    svg {
        font-size: 16px;
    }
}