@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/ProximaNova-Light.eot');
    src: url('../fonts/ProximaNova-Light.eot?#iefix') format('embedded-opentype'),
    url('../fonts/ProximaNova-Light.woff2') format('woff2'),
    url('../fonts/ProximaNova-Light.woff') format('woff'),
    url('../fonts/ProximaNova-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/ProximaNova-Regular.eot');
    src: url('../fonts/ProximaNova-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/ProximaNova-Regular.woff2') format('woff2'),
    url('../fonts/ProximaNova-Regular.woff') format('woff'),
    url('../fonts/ProximaNova-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/ProximaNova-Semibold.eot');
    src: url('../fonts/ProximaNova-Semibold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/ProximaNova-Semibold.woff2') format('woff2'),
    url('../fonts/ProximaNova-Semibold.woff') format('woff'),
    url('../fonts/ProximaNova-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/ProximaNova-Bold.eot');
    src: url('../fonts/ProximaNova-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/ProximaNova-Bold.woff2') format('woff2'),
    url('../fonts/ProximaNova-Bold.woff') format('woff'),
    url('../fonts/ProximaNova-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

:root {
    --yellow: #ffcc08;
    --white: #fff;
    --white-smoke: #f8f8f8;
    --black: #000;
    --iron-ore: #62666a;
    --drak-blue: #144973;
    --dark-blue-800: rgba(15, 49, 76, 0.8);
    --error-light-red: #f4bfbb;
    --error-red: #f04438;
    --black-900: rgba(17, 17, 17, 0.9);
    --black-800: rgba(17, 17, 17, 0.8);
    --black-700: rgba(17, 17, 17, 0.7);
    --black-600: rgba(17, 17, 17, 0.6);
    --black-500: rgba(17, 17, 17, 0.5);
    --black-400: rgba(17, 17, 17, 0.4);
    --black-300: rgba(17, 17, 17, 0.3);
    --black-200: rgba(17, 17, 17, 0.2);
    --black-100: rgba(17, 17, 17, 0.1);
    --black-30: rgba(17, 17, 17, 0.03);
    --white-900: rgba(255, 255, 255, 0.9);
    --white-800: rgba(255, 255, 255, 0.8);
    --white-700: rgba(255, 255, 255, 0.7);
    --white-600: rgba(255, 255, 255, 0.6);
    --white-500: rgba(255, 255, 255, 0.5);
    --white-400: rgba(255, 255, 255, 0.4);
    --white-300: rgba(255, 255, 255, 0.3);
    --white-200: rgba(255, 255, 255, 0.2);
    --white-100: rgba(255, 255, 255, 0.1);
    --white-30: rgba(255, 255, 255, 0.03);

    --font-family: "Proxima Nova", sans-serif;

    --h1: max(44px, 60rem);
    --h2: max(30px, 52rem);
    --h3: max(24px, 28rem);
    --h4: max(22px, 24rem);

    --body_M: max(18px, 22rem);
    --body_S: max(16px, 18rem);
    --button: max(18px, 18rem);
    --hint: max(16px, 16rem);

    --ease: cubic-bezier(.38, .005, .215, 1);
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
}

::selection {
    color: var(--white);
    background-color: var(--drak-blue);
}

.header-block ::selection,
.hero ::selection,
.hero-min ::selection,
.matters ::selection,
.button-blue::selection,
.areas ::selection,
.news-label::selection,
.form-blue-section ::selection,
.leadership-item ::selection,
.bio-content ::selection,
.support ::selection,
.job ::selection,
.report-block ::selection,
.engagement ::selection,
.contact-form ::selection {
    color: var(--black);
    background-color: var(--white);
}

/************************* reset *************************/
html {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
    background: var(--dark-blue);
    font-size: 0.0625vw;
}

body {
    height: 100%;
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    color: var(--web-black);
    font-weight: 400;
    font-size: var(--body_M);
    line-height: 120%;
    letter-spacing: -0.04em;
    font-family: var(--font-family), Arial, Helvetica, sans-serif;
    min-width: 320px;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6, p, ul, li, a, span, div, input, textarea, select, form, fieldset, button, dl, dd, dt, figure, figcaption, blockquote, caption, aside, section {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    box-sizing: border-box;
}

img {
    margin: 0;
    padding: 0;
    border-style: none;
    vertical-align: bottom;
}

input, textarea, select, button {
    font-weight: 400;
    font-family: var(--font-family), Arial, Helvetica, sans-serif;
    vertical-align: middle;
    border: 0;
    outline: 0;
    background: none;
}

a:hover {
    text-decoration: none;
}

ul li {
    list-style: none;
}

/************************* common styles *************************/
.holder {
    padding: 0 max(20px, 20rem);
}

h1, .h1 {
    display: block;
    font-weight: 700;
    font-size: var(--h1);
    line-height: 98%;
    letter-spacing: -0.03em;
}

h2, .h2 {
    display: block;
    font-weight: 700;
    font-size: var(--h2);
    line-height: 95%;
    letter-spacing: -0.03em;
}

h3, .h3 {
    display: block;
    font-weight: 700;
    font-size: var(--h3);
    line-height: 95%;
    letter-spacing: -0.03em;
}

h4, .h4 {
    display: block;
    font-weight: 700;
    font-size: var(--h4);
    line-height: 95%;
    letter-spacing: -0.03em;
}

a {
    transition: all 0.4s;
}

p {
    margin: 0 0 max(12px, 12rem);
}

p:last-child {
    margin: 0;
}

p a, .article li a {
    color: var(--black);
}

.center {
    text-align: center;
}

.upper {
    text-transform: uppercase;
}

.underline {
    text-decoration: underline;
}

.button-holder {
    text-align: center;
}

.button {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: max(4px, 4rem);
    padding: max(19px, 19rem) max(45px, 45rem);
    font-weight: 700;
    font-size: var(--button);
    line-height: 110%;
    letter-spacing: -0.02em;
    color: var(--black);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background: var(--yellow);
    border: 1px solid var(--yellow);
    transition: 0.3s ease-out;
}

.button:hover {
    color: var(--white);
    background: transparent;
}

.button-white {
    background: var(--white);
    border-color: var(--white);
}

.button-white:hover {
    color: var(--white);
    background: transparent;
}

.button-blue {
    color: var(--white);
    background: var(--drak-blue);
    border-color: var(--drak-blue);
}

.button-blue:hover {
    color: var(--drak-blue);
    background: transparent;
}

.button-black:hover {
    color: var(--white);
    background: var(--black);
    border-color: var(--black);
}

.button-border {
    color: var(--white);
    background: transparent;
    border-color: var(--white);
}

.button-border:hover {
    color: var(--black);
    background: var(--white);
}

/************************* form-block *************************/
.wpcf7-form-control-wrap input {
    display: block;
    width: 100%;
    height: max(62px, 62rem);
    padding: 0 max(19px, 19rem);
    margin: 0 0 max(10px, 10rem);
    font-size: var(--button);
    letter-spacing: -0.03em;
    color: var(--black);
    background: var(--white);
    border: 1px solid var(--black-200);
}

.wpcf7-form-control-wrap textarea {
    display: block;
    width: 100%;
    height: max(120px, 140rem);
    padding: max(19px, 19rem);
    margin: 0 0 max(10px, 10rem);
    font-size: var(--button);
    line-height: 120%;
    letter-spacing: -0.03em;
    color: var(--black);
    resize: vertical;
    background: var(--white);
    border: 1px solid var(--black-200);
}

.wpcf7-form-control-wrap input:focus,
.wpcf7-form-control-wrap textarea:focus {
    border-color: var(--black-400);
}

.inactive {
    opacity: 0.4;
    pointer-events: none;
}

::-webkit-input-placeholder {
    color: var(--black-500);
}

:-moz-placeholder {
    color: var(--black-500);
    opacity: 1;
}

::-moz-placeholder {
    color: var(--black-500);
    opacity: 1;
}

:-ms-input-placeholder {
    color: var(--black-500);
}

.error-msg {
    display: none;
    margin: 0 0 max(10px, 10rem);
    color: var(--error-red);
    font-size: var(--hint);
    line-height: 120%;
}

.error .error-msg {
    display: block;
}

.input-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.input-box .wpcf7-form-control-wrap {
    width: calc(50% - max(5px, 5rem));
}

.form-button {
    padding: max(30px, 30rem) 0 0;
}

.form-button .button {
    width: 100%;
}

.check-item {
    position: relative;
    margin: 0 0 max(10px, 10rem);
}

.check-input {
    position: absolute;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.check-label {
    display: block;
    padding: max(2px, 2rem) 0 max(2px, 2rem) max(36px, 36rem);
    font-size: var(--button);
    line-height: 120%;
    letter-spacing: -0.03em;
    color: var(--black-200);
    cursor: pointer;
}

.check-label:after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    content: '';
    width: max(24px, 24rem);
    height: max(24px, 24rem);
    background: url(../images/checkbox.svg) 50% 50% no-repeat;
    background-size: contain;
}

.check-input:checked + .check-label:after {
    background: url(../images/checkbox-active.svg) 50% 50% no-repeat;
    background-size: contain;
}

/************************* wrapper *************************/
#wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    padding-top: max(153px, 205rem);
    background: var(--white);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

#wrapper.vis {
    opacity: 1;
}

.inner-page #wrapper {
    padding-top: max(176px, 206rem);
}

body.lock {
    overflow: hidden;
}

/************************* header *************************/
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 300;
    transition: all 0.6s var(--ease);
}

.header.header-up,
.header.header-fixed.header-up {
    top: min(-111px, -141rem);
}

.header.header-fixed {
    top: min(-41px, -51rem);
}

.header::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: max(50px, 60rem);
    content: '';
    background: var(--white);
}

.header-block {
    display: flex;
    align-items: center;
    margin-top: max(40px, 50rem);
    height: max(70px, 90rem);
    padding: 0 max(20px, 40rem);
    position: relative;
    background: var(--drak-blue);
}

.header-logo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: max(11px, 31rem);
    z-index: 550;
    display: flex;
    align-items: center;
    width: max(172px, 200rem);
}

.header-logo img {
    width: 100%;
}

.header-webs {
    position: absolute;
    top: min(-36px, -41rem);
    right: 0;
    display: flex;
    align-items: center;
    gap: max(22px, 22rem);
    height: max(32px, 32rem);
}

.header-web {
    position: relative;
}

.header-web::before {
    position: absolute;
    top: 50%;
    margin-top: min(-6px, -6rem);
    right: min(-11px, -11rem);
    content: '';
    width: 1px;
    height: max(11px, 11rem);
    background: var(--iron-ore);
    pointer-events: none;
}

.header-web:last-child::before {
    display: none;
}

.header-web svg {
    display: block;
    width: max(18px, 18rem);
    height: max(18px, 18rem);
}

.header-web path {
    fill: var(--iron-ore);
    transition: all 0.4s ease-in-out;
}

.header-web:hover path {
    fill: var(--black);
}

.header-off {
    position: absolute;
    top: min(-36px, -41rem);
    left: 0;
    display: flex;
    align-items: center;
    gap: max(16px, 22rem);
    height: max(32px, 32rem);
}

.header-off-img {
    position: relative;
    width: max(48px, 53rem);
}

.header-off-img img {
    width: 100%;
}

.header-off-mob {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.header-off-link {
    position: relative;
    font-weight: 600;
    font-size: var(--hint);
    line-height: 110%;
    letter-spacing: -0.02em;
    color: var(--iron-ore);
    text-decoration: none;
}

.header-off-link::after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #282828;
    transform: scale3d(1, 1, 1);
    transform-origin: 0% 50%;
    transition: transform 0.5s;
    transition-timing-function: ease-out;
}

.header-off-link:hover::after {
    transform: scale3d(0, 1, 1);
    transform-origin: 100% 50%;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.header-buttons {
    position: absolute;
    top: 0;
    right: max(20px, 40rem);
    bottom: 0;
    display: flex;
    align-items: center;
    gap: max(16px, 16rem);
}

.header-buttons .button {
    width: max(110px, 128rem);
    padding: max(12px, 12rem);
    font-weight: 700;
    font-size: var(--button);
    line-height: 110%;
}


.header-nav {
    flex: 1;
}

.header-nav-list {
    display: flex;
    justify-content: center;
    gap: max(24px, 40rem);
}

.header-nav-list > li {
    font-size: var(--body_S);
    line-height: 120%;
    letter-spacing: -0.03em;
}

.header-nav-list > li > a {
    position: relative;
    color: var(--white);
    text-decoration: none;
}

.header-nav-list > li > a::before {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: var(--white);
    transform: scale3d(0, 1, 1);
    transform-origin: 100% 50%;
    transition: transform 0.5s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.header-nav-list > li > a:hover::before,
.header-nav-list > li > a.active::before,
.header-nav-list.list-active > li > a.active::before {
    transform: scale3d(1, 1, 1);
    transform-origin: 0% 50%;
    transition-timing-function: ease-out;
}


.mob-nav-icon {
    position: relative;
    z-index: 550;
    padding: 7px 3px;
    display: none;
}

.mob-nav-block {
    position: relative;
    display: block;
    width: 26px;
    height: 2px;
    margin: 8px 0;
    background: var(--white);
    border-radius: 3px;
    transition: all .3s linear;
}

.mob-nav-block:after {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    width: 26px;
    height: 2px;
    background: var(--white);
    border-radius: 3px;
    transition: all .3s linear;
}

.mob-nav-block:before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    width: 26px;
    height: 2px;
    background: var(--white);
    border-radius: 3px;
    transition: all .3s linear;
}

.mob-nav-icon.active .mob-nav-block {
    background: none;
}

.mob-nav-icon.active .mob-nav-block:before {
    top: 0;
    transform: rotate(45deg);
}

.mob-nav-icon.active .mob-nav-block:after {
    top: 0;
    transform: rotate(-45deg);
}

/************************* hero *************************/
.hero {
    position: relative;
    overflow: hidden;
    margin-top: min(-113px, -133rem);
}

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero::before {
    position: absolute;
    inset: 0;
    z-index: 10;
    content: '';
    background: var(--dark-blue-800);
}

.hero-block {
    position: relative;
    z-index: 40;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: max(680px, 724rem);
    max-height: 100dvh;
    padding: max(24px, 40rem) max(24px, 40rem);
    color: var(--white);
}

.hero-block h1 {
    max-width: max(570px, 770rem);
    margin: 0 0 max(15px, 24rem);
}

.hero-text {
    max-width: max(590px, 710rem);
    margin: 0 0 max(40px, 58rem);
    color: var(--white-800);
}

.hero-block h1:last-child, .hero-text:last-child {
    margin: 0;
}

.hero-button {
    display: flex;
    gap: max(15px, 15rem) max(24px, 30rem);
}

.hero-button .button {
    width: max(220px, 238rem);
    padding: max(19px, 19rem);
}

.hero-person {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 20;
}

.hero-person-img {
    display: none;
    height: max(436px, 606rem);
}

.hero-person-img.vis {
    display: block;
}


/************************* main-program *************************/
.main-program {
    padding: 0 max(20px, 40rem);
}

.main-program .top {
    gap: max(24px, 40rem);
    margin: 0 0 max(24px, 40rem);
}

.main-program .top h2 {
    max-width: max(520px, 900rem);
}

.main-program .top-text {
    max-width: max(660px, 800rem);
}

.main-program .program-block {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: max(20px, 20rem);
}

.main-program .program-item {
    display: flex;
    flex-direction: column;
    width: calc(33.33% - max(14px, 16rem));
    height: max(340px, 440rem);
}

.main-program .program-icon {
    margin: 0 0 max(40px, 60rem);
}

.main-program .program-item h3 {
    margin-top: auto;
}

.main-program .program-text {
    max-width: max(240px, 270rem);
}

/************************* matters *************************/
.matters {
    padding: max(80px, 155rem) max(40px, 130rem) max(90px, 90rem);
    margin: 0 min(-20px, -20rem);
    color: var(--white);
    background: var(--drak-blue);
}

.matters-wrap {
    position: relative;
}

.matters .top {
    margin: 0 0 max(32px, 40rem);
}

.matters .top-text {
    max-width: max(530px, 670rem);
    color: var(--white);
}

.matters .top-text b {
    color: var(--yellow);
}

.matters-block {
    display: flex;
    justify-content: space-between;
    margin: min(-16px, -16rem) 0 0;
}

.matters-content {
    width: 54%;
    padding: max(48px, 64rem) 0 0 max(10px, 64rem);
}

.matters-img {
    width: max(140px, 230rem);
    margin: 0 0 max(24px, 24rem);
}

.matters-img img {
    width: 100%;
}

.matters-text {
    max-width: max(460px, 500rem);
    margin: 0 0 max(32px, 44rem);
    font-size: var(--h4);
    line-height: 120%;
}

.matters-stat {
    display: flex;
    flex-wrap: wrap;
    gap: max(16px, 16rem) max(20px, 40rem);
}

.matters-stat-item {
    position: relative;
    padding: 0 0 0 max(29px, 29rem);
    font-weight: 700;
    font-size: var(--h4);
    line-height: 95%;
    letter-spacing: -0.03em;
}

.matters-stat-item::before {
    position: absolute;
    top: max(4px, 4rem);
    left: max(4px, 4rem);
    content: '';
    width: max(13px, 13rem);
    height: max(13px, 13rem);
    background: var(--yellow);
    border-radius: 50%;
}

.matters-map {
    width: 41.5%;
}

.matters-map img {
    width: 100%;
}

/************************* how *************************/
.how {
    padding: 0 max(20px, 40rem);
}

.how h2 {
    margin: 0 0 max(28px, 33rem);
    text-align: center;
}

.how-links {
    margin: 0 0 max(32px, 44rem);
}

.how-link-block {
    display: flex;
    justify-content: center;
    gap: max(34px, 34rem);
}

.how-link {
    position: relative;
    font-weight: 700;
    font-size: var(--h4);
    line-height: 95%;
    letter-spacing: -0.03em;
    color: var(--black-300);
    text-decoration: none;
}

.how-link::after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #282828;
    transform: scale3d(0, 1, 1);
    transform-origin: 100% 50%;
    transition: transform 0.5s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.how-link:hover::after,
.how-link.active::after {
    transform: scale3d(1, 1, 1);
    transform-origin: 0% 50%;
    transition-timing-function: ease-out;
}

.how-link.active {
    color: var(--black);
}

.how-link-mob {
    display: none;
}

.how-item {
    display: flex;
    gap: max(20px, 20rem);
}

.how-reverse {
    flex-direction: row-reverse;
}

.how-img {
    width: calc(50% - max(10px, 10rem));
    height: max(480px, 570rem);
}

.how-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.how-content {
    display: flex;
    flex-direction: column;
    width: calc(50% - max(10px, 10rem));
    padding: max(24px, 40rem);
    background: var(--white-smoke);
}

.how-text {
    max-width: max(460px, 580rem);
    margin: 0 0 max(40px, 40rem);
    color: var(--black-800);
}

.how-content .button {
    margin: auto auto 0 0;
}

.how-list {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0 0 max(40px, 40rem);
    gap: max(13px, 18rem);
    counter-reset: counter;
}

.how-list li {
    position: relative;
    padding: 0 0 0 max(50px, 50rem);
    min-height: max(30px, 30rem);
    display: flex;
    align-items: center;
    list-style: none;
    counter-increment: counter;
    font-weight: 700;
    font-size: var(--button);
    line-height: 120%;
    letter-spacing: -0.02em;
    color: var(--black-800);
}

.how-list li::before {
    position: absolute;
    top: 0;
    left: 0;
    content: counter(counter);
    display: flex;
    align-items: center;
    justify-content: center;
    width: max(30px, 30rem);
    height: max(30px, 30rem);
    background: var(--yellow);
    border-radius: 50%;
}


/************************* areas *************************/
.areas {
    padding: max(80px, 150rem) max(40px, 60rem);
    margin: 0 min(-20px, -20rem);
    color: var(--white);
    background: var(--drak-blue);
}

.areas h2 {
    margin: 0 0 max(24px, 80rem);
    text-align: center;
}

.areas-block {
    display: flex;
    gap: max(40px, 80rem);
}

.areas-img {
    position: relative;
    width: 53.5%;
    height: max(480px, 570rem);
}

.areas-img-item {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.areas-img-item.down {
    bottom: auto;
    top: 0;
}

.areas-img-item.vis {
    z-index: 10;
}

.areas-img-item.prev {
    z-index: 15;
    height: 0;
    transition: height 0.6s ease-in-out;
}

.areas-img-item img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.areas-content {
    flex: 1;
}

.areas-item {
    max-width: max(400px, 500rem);
    padding: max(35px, 35rem) 0;
    border-bottom: 1px solid var(--white-200);
}

.areas-item:last-child {
    border-bottom: 0;
}

.areas-top {
    position: relative;
    padding-right: max(60px, 60rem);
    display: flex;
    align-items: center;
    min-height: max(40px, 40rem);
    color: var(--white);
    text-decoration: none;
}

.areas-top::after {
    position: absolute;
    top: 50%;
    margin-top: min(-20px, -20rem);
    right: 0;
    content: '';
    width: max(40px, 40rem);
    height: max(40px, 40rem);
    background: var(--white) url(../images/plus-2.svg) 50% 50% no-repeat;
    background-size: max(14px, 14rem);
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
}

.areas-top.active::after {
    transform: rotate(45deg);
}

.areas-top h4 {
    max-width: max(380px, 470rem);
}

.areas-hidden {
    display: none;
    padding: max(20px, 20rem) 0 0;
    max-width: max(440px, 440rem);
    color: var(--black-800);
}

.areas-hidden.vis {
    display: block;
}

.areas-text {
    margin: 0 0 max(28px, 28rem);
    font-size: var(--button);
    line-height: 120%;
    color: var(--white-800);
}

.areas-hidden-img {
    display: none;
}

/************************* partners *************************/
.partners {
    padding: 0 max(20px, 40rem);
}

.partners .top {
    margin: 0 0 max(24px, 40rem);
}

.partners .button-holder {
    margin: 0 0 max(40px, 80rem);
}

.partners-block {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: max(24px, 24rem) max(20px, 20rem);
}

.partners-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: max(116px, 134rem);
    background: var(--white-smoke);
}

.partners-item-wrap {
    position: relative;
    width: max(175px, 175rem);
    height: max(104px, 104rem);
}

.partners-img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    transition-duration: 0.5s;
    transition-property: opacity, transform;
}

.partners-img.hid {
    transform: scale(0);
    opacity: 0;
}

.partners-img.vis {
    transform: scale(1);
    opacity: 1;
}

/************************* main-news *************************/
.main-news {
    padding: 0 max(20px, 40rem);
}

.main-news .top {
    margin: 0 0 max(32px, 32rem);
}

.main-news .top-text {
    max-width: max(400px, 480rem);
    color: var(--black-800);
}

.main-news .news-block {
    margin: 0 0 max(48px, 60rem);
}

.main-news .news-block:last-child {
    margin: 0;
}

/************************* hero-min *************************/
.hero-min {
    position: relative;
    overflow: hidden;
}

.hero-min-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-min::before {
    position: absolute;
    inset: 0;
    z-index: 10;
    content: '';
    background: var(--dark-blue-800);
}

.hero-min-block {
    position: relative;
    z-index: 40;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: max(415px, 415rem);
    padding: max(24px, 40rem) max(24px, 40rem);
    color: var(--white);
}

.hero-min-block h1 {
    margin: 0 0 max(17px, 17rem);
}

.hero-min-text {
    margin: 0 0 max(24px, 34rem);
    color: var(--white-800);
}

.hero-min-block h1:last-child, .hero-min-text:last-child {
    margin: 0;
}

.hero-min-button {
    display: flex;
    gap: max(15px, 15rem) max(24px, 30rem);
}

.hero-min-block h1 + .hero-min-button {
    padding-top: max(17px, 17rem);
}

.hero-min-button .button {
    width: max(220px, 238rem);
    padding: max(19px, 19rem);
}

/************************* breadcrumbs *************************/
.breadcrumbs {
    position: absolute;
    top: max(122px, 152rem);
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: max(4px, 4rem);
    padding: 0 max(20px, 20rem);
    margin: 0;
}

.breadcrumbs li {
    display: flex;
    align-items: flex-start;
    gap: max(4px, 4rem);
    padding: 0;
    margin: 0;
    font-weight: 600;
    font-size: var(--hint);
    line-height: 110%;
    letter-spacing: -0.02em;
    color: var(--black-500);
    list-style: none;
}

.breadcrumbs li::before {
    display: block;
    content: '/';
    color: var(--black-800);
}

.breadcrumbs li:first-child::before {
    display: none;
}

.breadcrumbs a {
    position: relative;
    color: var(--black-800);
    text-decoration: none;
}

.breadcrumbs a::after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: var(--black);
    transform: scale3d(0, 1, 1);
    transform-origin: 100% 50%;
    transition: transform 0.5s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.breadcrumbs a:hover::after {
    transform: scale3d(1, 1, 1);
    transform-origin: 0% 50%;
    transition-timing-function: ease-out;
}

/************************* section *************************/
.section {
    margin: 0 0 max(120px, 200rem);
}

/************************* top *************************/
.top {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: max(24px, 24rem);
}

.top-text {
    max-width: max(630px, 770rem);
    color: var(--black-800);
}

/************************* about *************************/
/* Gap above the About intro matches the gap under its heading block */
/*.section {*/
/*	margin-top: calc(max(28px, 79rem) - max(120px, 200rem));*/
/*}*/

/*.about .top {*/
/*    margin: 0 0 max(120px, 200rem);*/
/*}*/

/*.about {*/
/*    padding: 0 max(20px, 40rem);*/
/*}*/

.about .top {
     margin: 0 0 max(28px, 79rem);
}

.section:has(.about .top) {
    padding-top: max(28px, 79rem);
    margin-top: calc(max(120px, 200rem) * -1);
}

.about-block {
    display: flex;
    justify-content: space-between;
    padding: max(24px, 32rem);
    background: var(--white-smoke);
}

.about-img {
    width: calc(50% - max(15px, 30rem));
    height: max(280px, 370rem);
}

.about-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc(50% - max(15px, 30rem));
}

.about-text {
    max-width: max(620px, 620rem);
    font-size: max(18px, 18rem);
    line-height: 120%;
    color: var(--black-800);
}

/************************* mission *************************/
.mission .top {
    margin: 0 0 max(22px, 40rem);
}

.mission-img {
    max-width: max(700px, 1000rem);
    height: max(280px, 467rem);
    margin: 0 auto;
}

.mission-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/************************* leadership *************************/
.leadership {
    padding: max(80px, 106rem) max(40px, 60rem) max(80px, 159rem);
    margin: 0 min(-20px, -20rem);
    background: var(--drak-blue);
}

.leadership h2 {
    margin: 0 0 max(30px, 45rem);
    text-align: center;
    color: var(--white);
}

.ceo {
    display: flex;
    gap: max(20px, 20rem);
    margin: 0 0 max(40px, 74rem);
}

.ceo-photo {
    width: max(440px, 484rem);
    min-width: max(440px, 484rem);
}

.ceo-photo img {
    width: 100%;
    aspect-ratio: 1 / 1.19;
    object-fit: cover;
}

.ceo-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: max(32px, 50rem) max(20px, 50rem);
    background: var(--white);
}

.ceo-content h3 {
    margin: 0 0 max(15px, 15rem);
}

.ceo-status {
    margin: 0 0 max(28px, 40rem);
}

.ceo-text {
    max-width: max(540px, 600rem);
    margin: auto 0 max(30px, 40rem);
    font-size: var(--body_S);
    line-height: 120%;
    color: var(--black-800);
}

.ceo-text p {
    margin: 0 0 max(20px, 22rem);
}

.ceo-text p:last-child {
    margin: 0;
}

.ceo-link {
    position: relative;
    margin: 0 auto 0 0;
    font-weight: 700;
    font-size: var(--button);
    line-height: 110%;
    color: var(--black);
    text-decoration: none;
}

.ceo-link::after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: var(--black);
    transform: scale3d(1, 1, 1);
    transform-origin: 0% 50%;
    transition: transform 0.5s;
    transition-timing-function: ease-out;
}

.ceo-link:hover::after {
    transform: scale3d(0, 1, 1);
    transform-origin: 100% 50%;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.leadership-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: max(20px, 20rem);
}

.leadership-item {
    display: flex;
    flex-direction: column;
    padding: max(20px, 46rem) max(20px, 49rem) max(20px, 42rem);
    min-height: max(390px, 422rem);
    color: var(--white);
    background: var(--black);
}

.leadership-top {
    display: flex;
    align-items: flex-start;
    gap: max(20px, 20rem);
    margin: 0 0 max(20px, 30rem);
}

.leadership-photo {
    width: max(138px, 138rem);
    min-width: max(138px, 138rem);
}

.leadership-photo img {
    width: 100%;
    aspect-ratio: 1.15 / 1;
    object-fit: cover;
}

.leadership-info {
    padding: max(23px, 23rem) 0 0;
}

.leadership-name {
    margin: 0 0 max(8px, 12rem);
    font-weight: var(--h3);
    font-size: 28px;
    line-height: 95%;
    letter-spacing: -0.03em;
}

.leadership-status {
    max-width: max(280px, 340rem);
}

.leadership-text {
    margin: 0 0 max(20px, 40rem);
    font-size: var(--body_S);
    line-height: 120%;
    color: var(--white-800);
}

.leadership-text:last-child {
    margin: 0;
}

.leadership-link {
    margin: auto auto 0 0;
    position: relative;
    font-weight: 700;
    font-size: var(--button);
    line-height: 110%;
    color: var(--white);
    text-decoration: none;
}

.leadership-link::after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: var(--white);
    transform: scale3d(1, 1, 1);
    transform-origin: 0% 50%;
    transition: transform 0.5s;
    transition-timing-function: ease-out;
}

.leadership-link:hover::after {
    transform: scale3d(0, 1, 1);
    transform-origin: 100% 50%;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

/************************* team load more *************************/
.is-hidden {
    display: none !important;
}

/************************* board *************************/
.board {
    padding: 0 max(20px, 40rem);
}

.board .top {
    margin: 0 0 max(32px, 36rem);
}

.board .top-text {
    max-width: max(470px, 580rem);
}

.team {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: max(32px, 32rem) max(20px, 20rem);
    margin: 0 0 max(40px, 44rem);
}

.team:last-child {
    margin: 0;
}

.team-item {
    color: var(--black);
    text-decoration: none;
}

.team-photo {
    position: relative;
    overflow: hidden;
}

.team-photo img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: all 0.5s var(--ease);
}

.team-photo::before {
    position: absolute;
    inset: 0;
    z-index: 5;
    content: '';
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0) 100%);
    transform: translateY(-100%);
    transition: all 0.5s var(--ease);
}

.team-photo::after {
    position: absolute;
    top: max(14px, 20rem);
    right: max(14px, 20rem);
    z-index: 10;
    content: '';
    width: max(40px, 40rem);
    height: max(40px, 40rem);
    background: var(--white-smoke) url(../images/news-arrow.svg) 50% 50% no-repeat;
    background-size: max(13px, 13rem);
    opacity: 0;
    transition: all 0.5s var(--ease);
}

a.team-item:hover .team-photo img {
    transform: scale(1.1);
}

a.team-item:hover .team-photo::before {
    transform: translateY(0);
}

a.team-item:hover .team-photo::after {
    opacity: 1;
}

.team-info {
    padding: max(16px, 24rem) max(16px, 20rem);
}

.team-name {
    margin: 0 0 max(4px, 4rem);
    font-weight: 700;
    font-size: var(--h3);
    line-height: 95%;
    letter-spacing: -0.03em;
}

.team-text {
    max-width: max(300px, 380rem);
    color: var(--black-800);
}

.team-photo-default {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background: var(--drak-blue);
}

.team-photo-default .team-logo {
    max-width: max(240px, 310rem);
    aspect-ratio: unset;
}

/************************* advisory *************************/
.advisory {
    padding: max(80px, 112rem) max(40px, 60rem) max(70px, 70rem);
    margin: 0 min(-20px, -20rem);
    background: var(--white-smoke);
}

.advisory .top {
    margin: 0 0 max(32px, 68rem);
}

.advisory .top-text {
    max-width: max(470px, 580rem);
}

.advisory .team {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: max(56px, 60rem) max(20px, 20rem);
    margin: 0 0 max(48px, 56rem);
}

.advisory .team-info {
    padding: max(12px, 20rem) 0 0;
}

.advisory .team-name {
    margin: 0 0 max(4px, 12rem);
    font-size: var(--h4);
    line-height: 95%;
}

.advisory .team-text {
    font-size: max(18px, 18rem);
    line-height: 120%;
}

/************************* faq *************************/
.section-bio {
    margin: 0 0 max(30px, 30rem);
}

.bio {
    display: flex;
    justify-content: space-between;
    gap: max(40px, 40rem);
    padding: max(40px, 50rem) max(40px, 70rem) max(40px, 55rem);
    color: var(--white);
    background: var(--drak-blue);
}

.bio-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: max(730px, 780rem);
}

.bio-content h2 {
    margin: 0 0 max(32px, 44rem);
}

.bio-content h4 {
    margin: 0 0 max(20px, 28rem);
}

.bio-text {
    margin: 0 0 max(40px, 40rem);
    font-size: var(--body_S);
    line-height: 120%;
    color: var(--white-800);
}

.bio-text p {
    margin: 0 0 max(20px, 22rem);
}

.bio-text p:last-child {
    margin: 0;
}

.bio-links {
    margin: auto 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: max(8px, 8rem) max(32px, 32rem);
}

.bio-link {
    position: relative;
    font-weight: 700;
    font-size: max(18px, 18rem);
    line-height: 110%;
    letter-spacing: -0.02em;
    color: var(--white);
    text-decoration: none;
}

.bio-link::after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: var(--white);
    transform: scale3d(1, 1, 1);
    transform-origin: 0% 50%;
    transition: transform 0.5s;
    transition-timing-function: ease-out;
}

.bio-link:hover::after {
    transform: scale3d(0, 1, 1);
    transform-origin: 100% 50%;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.bio-content .bio-photo {
    display: none;
    margin: 0 0 max(32px, 40rem);
}

.bio-photo {
    width: max(400px, 443rem);
    min-width: max(400px, 443rem);
}

.bio-photo img {
    width: 100%;
    aspect-ratio: 1 / 1.3;
    object-fit: cover;
}

/************************* faq *************************/
.faq h2 {
    margin: 0 0 max(44px, 44rem);
    text-align: center;
}

.faq-block {
    max-width: max(640px, 754rem);
    margin: 0 auto max(60px, 60rem);
    border-bottom: 1px solid var(--black-300);
}

.faq-item {
    padding: max(35px, 35rem) 0;
    border-top: 1px solid var(--black-300);
}

.faq-top {
    position: relative;
    padding-right: max(40px, 40rem);
    display: flex;
    align-items: center;
    min-height: max(24px, 24rem);
    color: var(--black);
    text-decoration: none;
}

.faq-top::after {
    position: absolute;
    top: 0;
    right: 0;
    content: '';
    width: max(24px, 24rem);
    height: max(24px, 24rem);
    background: url(../images/plus.svg) 50% 50% no-repeat;
    background-size: contain;
    transition: all 0.3s ease-in-out;
}

.faq-top.active::after {
    transform: rotate(45deg);
}

.faq-top h3 {
    max-width: max(380px, 470rem);
}

.faq-hidden {
    display: none;
    padding: max(21px, 21rem) 0 0;
    max-width: max(380px, 470rem);
    color: var(--black-800);
}

.faq-hidden.vis {
    display: block;
}

/************************* program *************************/
.program {
    padding: 0 max(20px, 40rem);
}

.program-top {
    display: flex;
    justify-content: space-between;
    margin: 0 0 max(38px, 84rem);
}

.program-top-col {
    width: calc(50% - 10px);
}

.program-top h2 {
    max-width: max(240px, 380rem);
}

.program-top-text {
    max-width: max(540px, 660rem);
    color: var(--black-800);
}

.program-block {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: max(20px, 24rem);
}

.program-item {
    position: relative;
    padding: max(24px, 34rem);
    background: var(--white-smoke);
}

.program-icon {
    height: max(46px, 46rem);
    margin: 0 0 max(74px, 106rem);
}

.program-duration {
    position: absolute;
    top: max(24px, 24rem);
    right: max(24px, 34rem);
    font-size: var(--body_S);
    line-height: 120%;
    color: var(--black-800);
}

.program-icon img {
    height: 100%;
}

.program-item h3 {
    max-width: max(340px, 380rem);
    margin: 0 0 max(16px, 30rem);
}

.program-text {
    max-width: max(340px, 380rem);
    font-size: var(--body_S);
    line-height: 120%;
    color: var(--black-800);
}

/************************* support *************************/
.support {
    padding: max(80px, 114rem) max(40px, 60rem) max(80px, 160rem);
    margin: 0 min(-20px, -20rem);
    color: var(--white);
    background: var(--drak-blue);
}

.support-block {
    display: flex;
    gap: max(30px, 80rem);
    margin: 0 0 max(100px, 140rem);
}

.support-block:last-child {
    margin: 0;
}

.support-reverse {
    flex-direction: row-reverse;
}

.support-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.support-content h2 {
    margin: 0 0 max(20px, 24rem);
}

.support-text {
    margin: 0 0 max(24px, 40rem);
}

.support-list {
    margin: 0 0 max(24px, 40rem);
    display: flex;
    flex-direction: column;
    gap: max(16px, 23rem);
}

.support-list li {
    position: relative;
    padding: 0 0 0 max(36px, 36rem);
    font-weight: 700;
    font-size: var(--h4);
    line-height: 95%;
    letter-spacing: -0.03em;
}

.support-list li::before {
    position: absolute;
    top: max(7px, 9rem);
    left: max(15px, 15rem);
    content: '';
    width: max(5px, 6rem);
    height: max(5px, 6rem);
    background: var(--white);
    border-radius: 50%;
}

.support-text:last-child,
.support-list:last-child {
    margin: 0;
}

.support-content .support-img {
    display: none;
}

.support-img {
    width: 45%;
    height: max(360px, 610rem);
}

.support-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/************************* pillars *************************/
.pillars {
    padding: 0 max(20px, 40rem);
}

.pillars h2 {
    margin: max(24px, 40rem);
    text-align: center;
}

.pillars-block {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: max(20px, 20rem);
}

.pillars-item {
    padding: max(24px, 34rem);
    background: var(--white-smoke);
}

.pillars-icon {
    height: max(46px, 46rem);
    margin: 0 0 max(74px, 74rem);
}

.pillars-icon img {
    height: 100%;
}

.pillars-item h3 {
    width: 105%;
    margin: 0 0 max(20px, 20rem);
}

.pillars-list {
    display: flex;
    flex-direction: column;
    gap: max(12px, 12rem);
    padding: 0 0 0 max(24px, 24rem);
}

.pillars-list li {
    font-size: var(--body_S);
    line-height: 120%;
    list-style-type: disc;
}

.pillars-list a {
    color: var(--black-800);
    text-decoration: underline;
}

.pillars-list a:hover {
    color: var(--black);
    text-decoration: none;
}

/************************* job *************************/
.job {
    display: flex;
    gap: max(40px, 98rem);
    padding: max(24px, 32rem);
    margin: 0 max(20px, 40rem);
    background: var(--drak-blue);
}

.job-img {
    width: 48%;
    height: max(360px, 467rem);
}

.job-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.job-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: max(20px, 24rem);
    color: var(--white);
}

/************************* why *************************/
.why {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: max(31px, 40rem);
}

.why-text {
    max-width: max(740px, 920rem);
    color: var(--black-800);
}

/************************* info *************************/
.info {
    display: flex;
    justify-content: space-between;
    padding: 0 max(20px, 40rem);
}

.info-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: max(24px, 56rem);
    width: calc(50% - 10px);
}

.info-content .info-img {
    display: none;
}

.info-content .button {
    min-width: max(215px, 215rem);
}

.info-content h2 {
    max-width: max(340px, 640rem);
}

.info-text {
    max-width: max(540px, 640rem);
    color: var(--black-800);
}

.info-list {
    display: flex;
    flex-direction: column;
    gap: max(24px, 24rem);
    max-width: max(420px, 500rem);
    padding: 0 0 0 max(24px, 24rem);
    color: var(--black-800);
}

.info-list-compact {
    gap: max(12px, 12rem);
}

.info-list li {
    list-style-type: disc;
}

.info-img {
    width: calc(50% - 10px);
    height: max(560px, 610rem);
}

.info-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/************************* report *************************/
.report {
    position: relative;
    overflow: hidden;
    height: max(600px, 800rem);
    padding: max(60px, 93rem) max(40px, 70rem) max(60px, 80rem);
    margin: 0 max(20px, 40rem);
}

.report-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.report::before {
    position: absolute;
    inset: 0;
    z-index: 10;
    content: '';
    background: linear-gradient(90deg, rgba(20, 73, 115, 0.9) 0%, rgba(20, 73, 115, 0.9) 29%, rgba(20, 73, 115, 0) 90%, rgba(20, 73, 115, 0) 100%);
}

.report-block {
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--white);
}

.report-block h2 {
    margin: 0 0 max(24px, 24rem);
}

.report-text {
    max-width: max(380px, 470rem);
    margin: 0 0 max(46px, 57rem);
}

.report-block .button {
    min-width: max(220px, 220rem);
    margin: 0 0 max(32px, 40rem);
}

.report-num {
    margin: auto 0 0;
    display: flex;
    gap: max(40px, 80rem);
}

.report-num-item {
    width: max(156px, 177rem);
}

.report-num-value {
    margin: 0 0 max(11px, 11rem);
    font-weight: 700;
    font-size: max(60px, 80rem);
    line-height: 95%;
    letter-spacing: -0.03em;
}

.report-num-text {
    max-width: max(132px, 162rem);
}

.report-img {
    display: none;
    height: max(360px, 800rem);
}

.report-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/************************* engagement *************************/
.engagement {
    padding: max(48px, 114rem) max(40px, 60rem);
    margin: 0 min(-20px, -20rem);
    background: var(--drak-blue);
}

.engagement-block {
    display: flex;
    justify-content: space-between;
    gap: max(60px, 140rem);
}

.engagement-img {
    flex: 1;
    height: max(360px, 610rem);
}

.engagement-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.engagement-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: max(20px, 24rem);
    color: var(--white);
}

.engagement-text {
    max-width: max(420px, 510rem);
}

/************************* testimonials *************************/
.testimonials-grey {
    padding: max(110px, 120rem) 0;
    background: var(--white-smoke);
}

.testimonials-grey .testimonials-slider {
    margin: 0 0 max(75px, 120rem);
}

.testimonials h2 {
    margin: 0 0 max(30px, 110rem);
    text-align: center;
}

.testimonials-slider {
    margin: 0 min(-20px, -20rem) max(75px, 120rem);
}

.testimonials-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: max(20px, 20rem);
}

.testimonials-text {
    max-width: max(540px, 640rem);
    color: var(--black-800);
}

.testimonials-slider .slick-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: min(-75px, -120rem);
}

.slick-dots {
    display: flex;
    justify-content: center;
    gap: max(8px, 8rem);
}

.slick-dots button {
    display: block;
    width: max(6px, 8rem);
    height: max(6px, 8rem);
    font-size: 0;
    cursor: pointer;
    border-radius: 50%;
    background: var(--black-100);
    transition: 0.3s ease-out;
}

.slick-dots button:hover {
    background: var(--black);
}

.slick-dots .slick-active button {
    background: var(--black);
}

.slick-arrow {
    position: absolute;
    top: 0;
    z-index: 10;
    width: max(28px, 40rem);
    height: max(28px, 40rem);
    cursor: pointer;
    font-size: 0;
    transition: 0.3s ease-out;
}

.slick-arrow::before,
.slick-arrow::after {
    position: absolute;
    inset: 0;
    content: '';
    transition: 0.5s ease-out;
}

.slick-arrow::before {
    background: url(../images/slider-arrow.svg) 50% 50% no-repeat;
    background-size: max(12px, 17rem);
}

.slick-arrow::after {
    background: url(../images/slider-arrow-blue.svg) 50% 50% no-repeat;
    background-size: max(12px, 17rem);
    opacity: 0;
}

.slick-arrow:hover::before {
    opacity: 0;
}

.slick-arrow:hover::after {
    opacity: 1;
}

.slick-prev {
    left: max(20px, 80rem);
    transform: scale(-1, 1);
}

.slick-next {
    right: max(20px, 80rem);
}

/************************* form-section *************************/
.form-section {
    padding: max(80px, 175rem) 0 max(76px, 138rem);
    background: var(--white-smoke);
}

.form-block {
    position: relative;
    max-width: max(560px, 770rem);
    margin: 0 auto;
}

.form-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: max(20px, 20rem);
    margin: 0 0 max(40px, 40rem);
    text-align: center;
}

.form-text {
    max-width: max(470px, 590rem);
}

.form-blue-section {
    position: relative;
}

.form-blue-section::before {
    position: absolute;
    inset: 0;
    content: '';
    z-index: 10;
    background: var(--dark-blue-800);
}

.form-bg {
    position: absolute;
    inset: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.form-blue-section .form-block {
    position: relative;
    z-index: 15;
    color: var(--white);
}

.form-blue .check-label {
    color: var(--white-600);
}

.form-blue .check-label:after {
    background: url(../images/checkbox-white.svg) 50% 50% no-repeat;
    background-size: contain;
}

.form-blue .check-input:checked + .check-label:after {
    background: url(../images/checkbox-white-active.svg) 50% 50% no-repeat;
    background-size: contain;
}

.form-result {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: max(20px, 20rem);
    text-align: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.form-result-text {
    max-width: max(240px, 240rem);
}

.form-sent .form-main {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.form-sent .form-result {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.footer-side .form-result {
    right: auto;
    bottom: auto;
    align-items: flex-start;
    text-align: left;
}

.footer-side .form-result h3 {
    margin: 0;
}

.footer-side .form-result-text {
    max-width: max(220px, 220rem);
    color: var(--black-800);
}

/************************* news-top *************************/
.news-top {
    display: flex;
    flex-direction: column;
    gap: max(17px, 17rem);
    margin: 0 0 max(20px, 40rem);
}

.news-top-text {
    color: var(--black-800);
}

.news-info {
    display: flex;
    justify-content: space-between;
    gap: max(40px, 98rem);
    padding: max(24px, 32rem);
    margin: 0 0 max(100px, 100rem);
    background: var(--white-smoke);
}

.news-info-img {
    width: 46.8%;
    min-width: 46.8%;
    height: max(360px, 467rem);
}

.news-info-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-info-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-info h2 {
    margin: 0 0 max(20px, 40rem);
}

.news-info .info-list {
    max-width: none;
    gap: max(16px, 16rem);
}

/************************* news-block *************************/
.news-main {
    padding: 0 max(20px, 40rem);
}

.news-block {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: max(32px, 40rem) max(20px, 20rem);
    margin: 0 0 max(48px, 100rem);
}

.news-block:last-child {
    margin: 0;
}

.news-item {
    color: var(--black);
    text-decoration: none;
}

.news-img {
    position: relative;
    overflow: hidden;
    height: max(360px, 386rem);
    margin: 0 0 max(12px, 16rem);
}

.news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s var(--ease);
}

.news-img::before {
    position: absolute;
    inset: 0;
    z-index: 5;
    content: '';
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0) 100%);
    transform: translateY(-100%);
    transition: all 0.5s var(--ease);
}

.news-img::after {
    position: absolute;
    top: max(14px, 20rem);
    right: max(14px, 20rem);
    z-index: 10;
    content: '';
    width: max(40px, 40rem);
    height: max(40px, 40rem);
    background: var(--white-smoke) url(../images/news-arrow.svg) 50% 50% no-repeat;
    background-size: max(13px, 13rem);
    opacity: 0;
    transition: all 0.5s var(--ease);
}

.news-item:hover .news-img img {
    transform: scale(1.1);
}

.news-item:hover .news-img::before {
    transform: translateY(0);
}

.news-item:hover .news-img::after {
    opacity: 1;
}

.news-date {
    margin: 0 0 max(6px, 6rem);
    font-size: var(--hint);
    line-height: 110%;
    letter-spacing: -0.02em;
    color: var(--black-400);
}

.news-label {
    position: absolute;
    top: max(14px, 20rem);
    left: max(14px, 20rem);
    z-index: 10;
    padding: max(3px, 3rem) max(10px, 10rem);
    font-size: var(--body_S);
    line-height: 120%;
    letter-spacing: -0.03em;
    color: var(--white);
    background: var(--drak-blue);
}

.news-item h4 {
    max-width: max(360px, 390rem);
}

.button-holder .button {
    min-width: max(244px, 276rem);
}

.news-section {
    padding: 0 max(10px, 40rem);
}

.news-section h2 {
    margin: 0 0 max(28px, 32rem);
    text-align: center;
}

/************************* filter *************************/
.news-filter {
    padding: 0 max(20px, 40rem);
    margin: 0 0 max(32px, 52rem);
}

.filter-mob, .filter-close-wrap {
    display: none;
}

.filter-wrap {
    display: flex;
    gap: max(30px, 30rem);
}

.filter-item {
    position: relative;
}

.filter-item.active {
    z-index: 60;
}

.filter-link {
    position: relative;
    z-index: 40;
    display: inline-flex;
    padding: 0 max(24px, 24rem) 0 0;
    font-size: var(--body_S);
    line-height: 120%;
    letter-spacing: -0.03em;
    color: var(--black-800);
    text-decoration: none;
}

.filter-link::before {
    position: absolute;
    top: max(7px, 7rem);
    right: 0;
    content: '';
    width: max(15px, 15rem);
    height: max(7px, 7rem);
    background: url(../images/filter-arrow.svg) 0 0 no-repeat;
    background-size: contain;
}

.filter-link.active::before {
    transform: rotate(180deg);
}

.filter-hidden {
    display: none;
    position: absolute;
    top: min(-10px, -10rem);
    left: min(-10px, -10rem);
    z-index: 20;
    width: max(285px, 285rem);
    background: var(--white);
}

.filter-top {
    display: flex;
    justify-content: flex-end;
    margin: 0 max(10px, 10rem);
    padding: max(12px, 12rem) 0 max(8px, 8rem);
    border-bottom: 1px solid var(--black-200);
}

.reset {
    font-size: var(--hint);
    line-height: 120%;
    letter-spacing: -0.03em;
    color: var(--error-red);
    text-decoration: none;
}

.filter-check {
    padding: max(17px, 17rem) max(10px, 10rem) max(20px, 20rem);
}

.filter-check .check-item {
    position: relative;
    margin: 0 0 max(17px, 17rem);
}

.filter-check .check-item:last-child {
    margin: 0;
}

.filter-check .check-label {
    padding: 0 0 0 max(32px, 32rem);
    font-size: var(--hint);
    line-height: 120%;
    color: var(--black-800);
}

.filter-check .check-label:after {
    width: max(20px, 20rem);
    height: max(20px, 20rem);
    background: url(../images/filter-check.svg) 50% 50% no-repeat;
    background-size: contain;
}

.filter-check .check-input:checked + .check-label:after {
    background: url(../images/filter-check-active.svg) 50% 50% no-repeat;
    background-size: contain;
}

/************************* article *************************/
.article {
    max-width: max(650px, 750rem);
    margin: 0 auto;
    padding: max(10px, 30rem) 0 0;
    font-size: var(--body_S);
    line-height: 120%;
    color: var(--black-800);
}

.article-date {
    margin: 0 0 max(17px, 24rem);
    font-weight: 600;
    font-size: var(--hint);
    line-height: 110%;
    letter-spacing: -0.02em;
    color: var(--black-300);
}

.article h2 {
    margin: 0 0 max(32px, 48rem);
    color: var(--black);
}

.article-img {
    height: max(280px, 395rem);
    margin: 0 0 max(20px, 49rem);
}

.article-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article ul {
    padding: 0 0 0 max(26px, 26rem);
    margin: 0 0 max(12px, 12rem);
}

.article ul li {
    margin: 0 0 max(12px, 12rem);
    list-style-type: disc;
}

.article ol {
    padding: 0 0 0 max(26px, 26rem);
    margin: 0 0 max(12px, 12rem);
}

.article ol li {
    margin: 0 0 max(12px, 12rem);
}

.article ul:last-child,
.article ul li:last-child,
.article ol:last-child,
.article ol li:last-child {
    margin: 0;
}

.article a {
    color: var(--black-800);
}

/************************* policy *************************/
.policy .article-date {
    margin: 0 0 max(16px, 16rem);
    font-weight: 400;
    font-size: var(--body_M);
    line-height: 120%;
    letter-spacing: -0.03em;
    color: var(--black-300);
}

.policy h2 {
    margin: 0 0 max(39px, 42rem);
    color: var(--black);
}

.policy ul li,
.policy ol li {
    margin: 0;
}

/************************* contact *************************/
.contact h1 {
    margin: 0 0 max(17px, 17rem);
}

.contact-text {
    max-width: max(430px, 490rem);
    margin: 0 0 max(40px, 40rem);
    font-size: max(18px, 20rem);
    line-height: 120%;
    color: var(--black-800);
}

.contact-section {
    padding: max(60px, 90rem) max(20px, 80rem);
    background: var(--drak-blue);
}

.contact-block {
    display: flex;
    gap: max(40px, 127rem);
    margin: 0 0 max(60px, 100rem);
}

.contact-block:last-child {
    margin: 0;
}

.contact-side {
    width: max(320px, 430rem);
    min-width: max(320px, 430rem);
}

.contact-content {
    flex: 1;
    position: relative;
}

.contact-content h2 {
    margin: 0 0 max(28px, 88rem);
    color: var(--white);
}

.contact-content .form-sent .form-main {
    display: none;
}

.contact-content .form-result {
    position: static;
    align-items: flex-start;
    text-align: left;
}

.contact-content .form-result h2 {
    margin: 0;
}

.contact-content .form-result-text {
    color: var(--white);
}

.footer-side .form-result-text {
    max-width: max(220px, 220rem);
    color: var(--black-800);
}

.contact-item {
    margin: 0 0 max(20px, 35rem);
    padding: max(24px, 32rem) max(24px, 40rem);
    background: var(--white-smoke);
}

.contact-item:last-child {
    margin: 0;
}

.contact-item h3 {
    max-width: max(260px, 300rem);
    margin: 0 0 max(12px, 26rem);
}

.contact-item-text {
    margin: 0 0 max(24px, 28rem);
    color: var(--black-800);
}

.contact-item-link {
    position: relative;
    font-weight: 700;
    font-size: max(18px, 18rem);
    line-height: 110%;
    letter-spacing: -0.02em;
    color: var(--black);
    text-decoration: none;
}

.contact-item-link::after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: var(--black);
    transform: scale3d(1, 1, 1);
    transform-origin: 0% 50%;
    transition: transform 0.5s;
    transition-timing-function: ease-out;
}

.contact-item-link:hover::after {
    transform: scale3d(0, 1, 1);
    transform-origin: 100% 50%;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

/************************* address-block *************************/
.address-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.address-side {
    position: relative;
    z-index: 10;
    width: 45%;
    max-width: max(340px, 430rem);
    padding: max(30px, 36rem) max(30px, 40rem) max(30px, 40rem);
    background: var(--yellow);
}

.address-side h3 {
    margin: 0 0 max(20px, 20rem);
}

.address-text {
    margin: 0 0 max(32px, 32rem);
    color: var(--black-800);
}

.address-text:last-child {
    margin: 0;
}

.address-text a {
    position: relative;
    color: var(--black-800);
    text-decoration: none;
}

.address-text a::after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #282828;
    transform: scale3d(0, 1, 1);
    transform-origin: 100% 50%;
    transition: transform 0.5s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.address-text a:hover::after {
    transform: scale3d(1, 1, 1);
    transform-origin: 0% 50%;
    transition-timing-function: ease-out;
}

.address-map {
    position: relative;
    width: 53.5%;
}

.address-map img {
    width: 100%;
}

.address-line {
    position: absolute;
    top: 50%;
    right: 52.3%;
    width: max(400px, 697rem);
    height: max(61px, 61rem);
    background: url(../images/line-1.svg) 100% 0% no-repeat;
    background-size: cover;
}

/************************* page404 *************************/
.page404-section {
    padding: max(50px, 50rem) 0 max(70px, 70rem);
}

.page404 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.page404-num {
    position: relative;
    font-weight: 700;
    font-size: max(210px, 420rem);
    line-height: 95%;
    letter-spacing: -0.03em;
}

.page404-img {
    position: absolute;
    top: min(-29px, -57rem);
    left: max(106px, 213rem);
    width: max(148px, 296rem);
}

.page404 h3 {
    margin: 0 0 max(30px, 30rem);
}

.page404 .button {
    min-width: max(244px, 244rem);
}

/************************* sitemap *************************/
.sitemap {
    padding: max(40px, 40rem) 0 0;
}

.sitemap h1 {
    padding: 0 0 max(40px, 40rem);
    margin: 0 0 max(48px, 60rem);
    border-bottom: 1px solid var(--black-400);
}

.sitemap-part {
    margin: 0 0 max(40px, 56rem);
}

.sitemap h3 {
    margin: 0 0 max(12px, 24rem);
}

.sitemap-part:last-child,
.sitemap h3:last-child {
    margin: 0;
}

.sitemap h3 a {
    position: relative;
    color: #282828;
    text-decoration: none;
}

.sitemap h3 a::after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #282828;
    transform: scale3d(0, 1, 1);
    transform-origin: 100% 50%;
    transition: transform 0.5s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.sitemap h3 a:hover::after {
    transform: scale3d(1, 1, 1);
    transform-origin: 0% 50%;
    transition-timing-function: ease-out;
}

.sitemap-block {
    max-width: max(800px, 960rem);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: max(6px, 12rem) max(20px, 48rem);
}

.single-col {
    grid-template-columns: repeat(1, 1fr);
}

.sitemap-item {
    font-size: var(--hint);
    line-height: 140%;
    letter-spacing: 0.01em;
}

.sitemap-link {
    position: relative;
    color: #282828;
    text-decoration: none;
}

.sitemap-link::after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #282828;
    transform: scale3d(1, 1, 1);
    transform-origin: 0% 50%;
    transition: transform 0.5s;
    transition-timing-function: ease-out;
}

.sitemap-link:hover::after {
    transform: scale3d(0, 1, 1);
    transform-origin: 100% 50%;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

/************************* footer *************************/
.footer-block {
    display: flex;
    gap: max(60px, 170rem);
    padding: max(30px, 50rem) max(20px, 40rem) max(100px, 195rem);
}

.footer-side {
    position: relative;
    width: max(360px, 544rem);
    min-width: max(360px, 544rem);
}

.footer-side h3 {
    max-width: max(350px, 410rem);
    margin: 0 0 max(24px, 24rem);
}

.footer-text {
    margin: 0 0 max(40px, 40rem);
    font-size: var(--body_S);
    line-height: 120%;
    color: var(--black-800);
}

.footer-form-block {
    display: flex;
    gap: max(20px, 20rem);
}

.footer-form-block .wpcf7-form-control-wrap {
    flex: 1;
}

.footer-form-block .wpcf7-form-control-wrap input {
    margin: 0;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    flex: 1;
}

.footer-title {
    margin: 0 0 max(24px, 24rem);
    color: var(--black-500);
}

.footer-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: max(11px, 11rem);
}

.footer-nav-link {
    position: relative;
    font-weight: 700;
    font-size: var(--button);
    line-height: 110%;
    letter-spacing: -0.02em;
    color: var(--black);
    text-decoration: none;
}

.footer-nav a::after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: var(--black);
    transform: scale3d(0, 1, 1);
    transform-origin: 100% 50%;
    transition: transform 0.5s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.footer-nav a:hover::after {
    transform: scale3d(1, 1, 1);
    transform-origin: 0% 50%;
    transition-timing-function: ease-out;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    padding: 0 max(20px, 40rem) max(20px, 23rem);
    font-size: 16px;
    line-height: 140%;
    letter-spacing: -0.02em;
    color: var(--black-600);
}

.footer-studio {
    color: var(--black-600);
}

.footer-studio img {
    width: 21px;
    height: 21px;
    min-width: 21px;
    margin: 4px 2px 0;
    vertical-align: top;
}

.footer-studio a {
    position: relative;
    color: var(--black);
    text-decoration: none;
}

.footer-studio a::after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: var(--black);
    transform: scale3d(0, 1, 1);
    transform-origin: 100% 50%;
    transition: transform 0.5s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.footer-studio a:hover::after {
    transform: scale3d(1, 1, 1);
    transform-origin: 0% 50%;
    transition-timing-function: ease-out;
}

/************************* media *************************/
@media screen and (max-width: 1300px) {
    .header-block {
        padding: 0 20px;
    }

    .header-buttons {
        right: 20px;
    }

    .header-logo {
        left: 10px;
    }

    .header-nav-list {
        gap: 16px;
        padding-right: 90px;
    }

    .footer-content {
        flex-wrap: wrap;
        gap: 45px 0;
    }

    .footer-col {
        width: calc(50% - 10px);
    }

    .contact-section {
        padding: max(60px, 90rem) max(20px, 20rem);
        margin: 0 min(-20px, -20rem);
    }

    .contact-block {
        gap: max(40px, 60rem);
    }


}

@media screen and (max-width: 1024px) {
    #wrapper {
        overflow: hidden;
        padding-top: 0;
    }

    .inner-page #wrapper {
        padding-top: 86px;
    }

    .holder {
        padding: 0 15px;
    }

    .header-block {
        height: 66px;
        margin: 0 -15px;
        padding: 0 20px;
    }

    .header.header-up,
    .header.header-fixed.header-up {
        top: -66px;
    }

    .header.header-fixed {
        top: 0;
    }

    .header-logo {
        left: 5px;
    }

    .mob-nav-icon {
        display: block;
        margin: 0 0 0 auto;
    }

    .header-nav {
        position: fixed;
        top: 0;
        left: 100%;
        width: 100%;
        z-index: 540;
        overflow: hidden;
        box-sizing: border-box;
        box-shadow: none;
        display: block;
        height: 100dvh;
        background: var(--drak-blue);
        transition: all .55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    }

    .header-nav.vis {
        left: 0;
    }

    .header-nav-wrap {
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100dvh;
        padding-top: 66px;
        padding-bottom: 190px;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
    }

    .header-nav-wrap::after {
        position: absolute;
        top: 66px;
        left: 15px;
        right: 15px;
        content: '';
        border-bottom: 1px solid var(--white-200);
    }

    .header-nav-list {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        align-items: center;
        gap: 24px;
        padding: 0 15px;
        height: 100%;
        margin: 0;
        overflow-y: auto;
    }

    .header-nav-list > li > a {
        font-weight: 400;
        font-size: 24px;
        line-height: 120%;
        letter-spacing: -0.03em;
        text-align: center;
        color: #fff;
    }

    .header-nav-list > li > a::before {
        display: none;
    }

    .header-nav-bottom {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 10px 15px 20px;
    }

    .header-webs {
        position: static;
        justify-content: center;
        height: auto;
        margin: 0 0 37px;
    }

    .header-web {
        position: relative;
    }

    .header-web path {
        fill: var(--white);
    }

    .header-web:hover path {
        fill: var(--white);
    }

    .header-web::before {
        display: none;
    }

    .header-off {
        position: static;
        justify-content: center;
        gap: 20px;
        height: auto;
    }

    .header-off-img {
        position: relative;
        width: 53px;
    }

    .header-off-desk {
        opacity: 0;
    }

    .header-off-mob {
        opacity: 1;
    }

    .header-off-link {
        color: var(--white);
    }

    .header-off-link::after {
        background: var(--white);
    }

    .header-buttons {
        position: static;
        margin: 0 0 37px;
    }

    .header-buttons .button {
        flex: 1;
        width: auto;
        padding: max(11px, 11rem);
        font-weight: 700;
        font-size: var(--button);
        line-height: 110%;
    }

    .footer-block {
        flex-direction: column;
        gap: 66px;
        padding: 60px 0 100px;
    }

    .footer-side {
        width: auto;
        min-width: 1px;
    }

    .footer-side h3 {
        font-size: 22px;
        line-height: 120%;
    }

    h4 {
        line-height: 120%;
    }

    .footer-form-block {
        flex-direction: column;
        gap: 16px;
    }

    .footer-nav {
        gap: 12px;
    }

    .footer-bottom {
        flex-direction: column-reverse;
        padding: 0 0 16px;
        gap: 16px;
    }

    .breadcrumbs {
        top: 86px;
    }

    .inner-page .breadcrumbs {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        margin: 0 0 44px;
    }

    .sitemap {
        padding: 0;
    }

    .sitemap h1 {
        padding: 0 0 45px;
    }

    .sitemap h3 {
        font-size: 32px;
        line-height: 95%;
    }

    .page404-section {
        padding: 50px 0 100px;
    }

    .page404 h3 {
        max-width: 310px;
    }

    .contact-block {
        flex-direction: column-reverse;
        gap: 36px;
    }

    .contact-content h2 {
        margin: 0 0 28px;
        text-align: center;
    }

    .contact-side {
        width: auto;
        min-width: 1px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .contact-item {
        margin: 0;
        padding: 48px 30px;
    }

    .contact-item h3 {
        max-width: none;
    }

    .article h2 {
        margin: 0 0 55px;
    }

    .policy h2 {
        margin: 0 0 42px;
    }

    .news-section {
        padding: 0;
    }

    .news-block {
        grid-template-columns: repeat(2, 1fr);
        gap: 56px 20px;
    }

    .news-img::before {
        transform: translateY(0);
    }

    .news-img::after {
        opacity: 1;
    }

    .news-date {
        margin: 0 0 12px;
    }

    .news-main {
        padding: 0;
    }

    .news-info {
        gap: max(40px, 80rem);
        padding: 48px 15px;
        margin: 0 -15px max(100px, 100rem);
    }

    .hero-min {
        margin: 0 -15px;
    }

    .hero-min-block {
        min-height: 500px;
        padding: 135px 15px 45px;
    }

    body:not(.inner-page) .breadcrumbs li {
        color: var(--white-500);
    }

    body:not(.inner-page) .breadcrumbs li::before {
        color: var(--white-800);
    }

    body:not(.inner-page) .breadcrumbs a {
        color: var(--white-800);
    }

    body:not(.inner-page) .breadcrumbs a::after {
        background: var(--white);
    }

    .info {
        padding: 0;
    }

    .engagement {
        padding: 48px 15px;
        margin: 0 -15px;
        background: var(--drak-blue);
    }

    .engagement-block {
        gap: max(20px, 60rem);
    }

    .form-section {
        padding: 80px 0 76px;
    }

    .testimonials-slider {
        margin: 0 -15px max(75px, 120rem);
    }

    .slick-prev {
        left: max(20px, 40rem);
    }

    .slick-next {
        right: max(20px, 40rem);
    }

    .report {
        padding: max(60px, 93rem) max(30px, 60rem) max(60px, 80rem);
        margin: 0;
    }

    .pillars {
        padding: 0;
    }

    .pillars-block {
        grid-template-columns: repeat(2, 1fr);
    }

    .job {
        margin: 0;
    }

    .program {
        padding: 0;
    }

    .program-block {
        grid-template-columns: repeat(2, 1fr);
    }

    .support {
        padding: 80px 15px;
        margin: 0 -15px;
    }

    .support-list li {
        font-size: var(--h4);
        line-height: 120%;
    }

    .support-list li::before {
        top: 11px;
    }

    .testimonials-grey {
        margin: 0 -15px;
    }

    .bio {
        margin: 0 -15px;
        padding: 130px 15px max(40px, 55rem);
    }

    .about {
        padding: 0;
    }

    .about-block {
        margin: 0 -15px;
        padding: 32px 15px;
    }

    .team {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .leadership {
        padding: max(80px, 106rem) 15px max(80px, 159rem);
        margin: 0 -15px;
    }

    .board {
        padding: 0;
    }

    .advisory {
        padding: max(80px, 112rem) 15px max(70px, 70rem);
        margin: 0 -15px;
    }

    .advisory .team {
        grid-template-columns: repeat(3, 1fr);
    }

    .ceo-photo {
        width: calc(50% - 10px);
        min-width: calc(50% - 10px);
    }

    .hero {
        margin: 0 -15px;
    }

    .hero-block {
        padding: 162px 15px 33px;
    }

    .main-program {
        padding: 0;
    }

    .main-program .program-block {
        justify-content: flex-start;
    }

    .main-program .program-item {
        width: calc(50% - 10px);
    }

    .matters {
        padding: max(80px, 155rem) 15px max(90px, 90rem);
        margin: 0 -15px;
    }

    .how {
        padding: 0;
    }

    .areas {
        padding: max(80px, 150rem) 15px;
        margin: 0 -15px;
    }

    .partners {
        padding: 0;
    }

    .partners-block {
        grid-template-columns: repeat(4, 1fr);
    }

    .main-news {
        padding: 0;
    }

    .news-filter {
        position: relative;
        padding: 0;
        margin: 0 0 18px;
        display: flex;
        justify-content: flex-end;
    }

    .filter-mob {
        display: block;
        padding: 5px 0 5px 9px;
    }

    .filter-mob img {
        display: block;
    }

    .filter-block {
        position: absolute;
        top: -10px;
        right: -10px;
        z-index: 40;
        width: 285px;
        padding: 13px 0 0;
        background: var(--white);
        display: none;
    }

    .filter-wrap {
        flex-direction: column;
        gap: max(30px, 30rem);
    }

    .filter-hidden {
        display: block;
        position: relative;
        top: auto;
        left: auto;
    }

    .filter-link {
        margin: 0 0 0 10px;
        pointer-events: none;
        color: var(--black-400);
    }

    .filter-link::before {
        display: none;
    }

    .filter-top {
        margin: -38px max(10px, 10rem) 0;
        padding: 17px 0 max(8px, 8rem);
    }

    .filter-close-wrap {
        position: relative;
        z-index: 60;
        display: flex;
        justify-content: flex-end;
        margin: 0 max(10px, 10rem) 17px;
        padding: 0 0 12px;
        border-bottom: 1px solid var(--black-200);
    }

    .filter-close img {
        display: block;
    }


}

@media screen and (max-width: 767px) {
    .sitemap-block {
        grid-template-columns: repeat(1, 1fr);
    }

    .input-box .wpcf7-form-control-wrap {
        width: 100%;
    }

    .contact-side {
        grid-template-columns: repeat(1, 1fr);
    }

    .address-block {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 64px;
    }

    .address-map {
        width: 100%;
    }

    .address-line {
        position: absolute;
        top: 52.4%;
        right: auto;
        left: 50%;
        margin-left: -86px;
        width: 60px;
        height: 210px;
        background: url(../images/line-2.svg) 100% 0% no-repeat;
        background-size: cover;
    }

    .address-side {
        width: 100%;
        max-width: none;
        padding: 48px 30px;
    }

    .article-img {
        height: max(210px, 800rem);
    }

    .news-section h2 {
        max-width: 240px;
        margin: 0 auto max(28px, 32rem);
    }

    .news-block {
        grid-template-columns: repeat(1, 1fr);
    }

    .news-info {
        flex-direction: column;
        gap: 24px;
    }

    .news-info-img {
        width: auto;
        min-width: 1px;
    }

    .hero-min-text {
        max-width: 320px;
    }

    .info {
        flex-direction: column;
    }

    .info-content {
        gap: max(24px, 56rem);
        width: 100%;
    }

    .info-img {
        display: none;
    }

    .info-content .info-img {
        display: block;
        width: 100%;
        height: max(360px, 800rem);
    }

    .engagement-block {
        flex-direction: column;
        gap: 24px;
    }

    .testimonials-slide {
        padding: 0 15px;
    }

    .slick-arrow {
        top: auto;
        margin-top: 0;
        bottom: -80px;
    }

    .slick-prev {
        left: 50%;
        margin-left: -100px;
    }

    .slick-next {
        left: 50%;
        right: auto;
        margin-left: 72px;
    }

    .testimonials-slider .slick-dots {
        bottom: -69px;
    }

    .form-top {
        margin: 0 0 48px;
    }

    .info-content .button {
        margin: 0 auto;
    }

    .report {
        position: relative;
        overflow: hidden;
        height: auto;
        margin: 0 -15px;
        padding: 80px 15px;
        text-align: center;
        background: var(--drak-blue);
    }

    .report > picture,
    .report::before {
        display: none;
    }

    .report-img {
        display: block;
        margin: 0 0 20px;
    }

    .report-block {
        padding: 0 0 106px
    }

    .report-button {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .report-block .button {
        margin: 0;
    }

    .report-num {
        flex-direction: column;
        align-items: center;
    }

    .report-num-text {
        margin: 0 auto;
    }

    .pillars-block {
        grid-template-columns: repeat(1, 1fr);
    }

    .job {
        flex-direction: column;
        gap: 24px;
        margin: 0 -15px;
        padding: 48px 15px;
    }

    .job-img {
        width: 100%;
        height: max(360px, 800rem);
    }

    .job-text {
        max-width: 280px;
    }

    .program-top {
        flex-direction: column;
        gap: 24px;
    }

    .program-top-col {
        width: 100%;
    }

    .program-block {
        grid-template-columns: repeat(1, 1fr);
    }

    .support-block {
        flex-direction: column;
    }

    .support-img {
        display: none;
        width: 100%;
        height: max(360px, 800rem);
    }

    .support-content .support-img {
        display: block;
        margin: 0 0 24px;
    }

    .support-content h2 {
        max-width: 280px;
    }

    .bio {
        flex-direction: column;
    }

    .bio-photo {
        display: none;
    }

    .bio-content .bio-photo {
        display: block;
        width: 100%;
        min-width: 1px;
        margin: 0 0 32px;
    }

    .bio-photo img {
        aspect-ratio: 1 / 1;
    }

    .bio-content h2 {
        margin: 0 0 12px;
    }

    .bio-content h4 {
        max-width: 240px;
        margin: 0 0 12px;
        font-weight: 400;
        font-size: var(--h4);
        line-height: 120%;
    }

    .about-block {
        flex-direction: column;
        padding: 15px 15px 30px;
        gap: 24px;
    }

    .about-img, .about-content {
        width: 100%;
    }

    .about-text {
        max-width: none;
        text-align: center;
    }

    .ceo {
        flex-direction: column-reverse;
        margin: 0 0 20px;
    }

    .ceo-photo {
        width: 100%;
        min-width: 1px;
    }

    .ceo-photo img {
        aspect-ratio: 1 / 1;
    }

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

    .leadership-item {
        min-height: 1px;
    }

    .leadership-top {
        flex-direction: column;
        gap: 32px;
    }

    .leadership-info {
        padding: 0;
    }

    .team {
        grid-template-columns: repeat(1, 1fr);
        gap: 56px 20px;
    }

    .advisory .team {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-info {
        padding: 12px 0 0;
    }

    .team-name, .advisory .team-name {
        font-size: 22px;
        line-height: 120%;
    }

    .hero-block {
        justify-content: flex-start;
        height: 844px;
    }

    .hero-button {
        flex-direction: column;
        margin: auto 0 0;
    }

    .hero-button .button {
        width: 100%;
    }

    .main-program .program-item {
        width: 100%;
        height: auto;
    }

    .main-program .program-icon {
        margin: 0 0 78px;
    }

    .matters-block {
        position: relative;
        flex-direction: column;
        margin: 0;
        padding: 0 0 45px;
    }

    .matters-content {
        width: 100%;
        padding: 0 0 46px;
    }

    .matters-map {
        width: 100%;
    }

    .matters-img {
        margin: 0 auto 24px;
    }

    .matters-text {
        max-width: 330px;
        margin: 0 auto;
        text-align: center;
    }

    .matters-stat {
        position: absolute;
        left: 0;
        bottom: 0;
        flex-direction: column;
    }

    .matters-stat-item {
        font-size: var(--h4);
        line-height: 120%;
    }

    .matters-stat-item::before {
        top: 6px;
    }

    .matters-wrap {
        padding: 0 0 127px;
    }

    .matters-wrap .button-holder {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .how-item {
        flex-direction: column;
        gap: 0;
    }

    .how-img {
        width: 100%;
        height: max(280px, 800rem);
    }

    .how-content {
        width: 100%;
        padding: 40px 16px 54px;
    }

    .how-list {
        margin: 0 0 65px;
    }

    .how-content .button {
        margin: auto auto 0;
    }

    .how h2 {
        margin: 0 0 35px;
    }

    .how-links {
        position: relative;
        margin: 0 0 15px;
    }

    .how-link-mob {
        position: relative;
        display: block;
        height: 62px;
        padding: 19px 60px 19px 19px;
        font-size: 18px;
        line-height: 120%;
        letter-spacing: -0.03em;
        color: var(--web-black);
        text-decoration: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border: 1px solid var(--black-200);
    }

    .how-link-mob::after {
        position: absolute;
        top: 50%;
        margin-top: min(-4px, -4rem);
        right: max(20px, 20rem);
        content: '';
        width: max(12px, 12rem);
        height: max(8px, 8rem);
        background: url(../images/select-arrow.svg) 50% 50% no-repeat;
        background-size: contain;
    }

    .how-link-mob.active::after {
        transform: rotate(180deg);
    }

    .how-link-mob.active {
        border-color: var(--yellow);
    }

    .how-link-block {
        flex-direction: column;
        display: block;
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 10;
        padding: max(10px, 10rem) 0;
        background: var(--white);
        border: 1px solid var(--black-200);
        border-top: 0;
    }

    .how-link {
        display: block;
        padding: 12px 19px;
        font-weight: 400;
        font-size: var(--button);
        line-height: 120%;
        letter-spacing: -0.03em;
        color: var(--black-500);
    }

    .how-link.active {
        background: var(--white-smoke);
    }

    .how-link::after {
        display: none;
    }

    .areas h2 {
        max-width: 240px;
        margin: 0 auto max(24px, 80rem);
    }

    .areas-block {
        flex-direction: column;
        gap: 0;
    }

    .areas-img {
        display: none;
    }

    .areas-item {
        max-width: none;
    }

    .areas-item:first-child {
        border-top: 1px solid var(--white-200);
    }

    .areas-text {
        max-width: 288px;
    }

    .areas-hidden-img {
        display: block;
        width: 288px;
        height: 225px;
        margin: 0 0 20px;
    }

    .areas-hidden-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .partners-block {
        grid-template-columns: repeat(3, 1fr);
    }

    .partners {
        position: relative;
        padding-bottom: 120px;
    }

    .partners .button-holder {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
    }

}

@media screen and (max-width: 576px) {
    .hero-min-button {
        flex-direction: column;
    }

    .hero-min-button .button {
        width: 100%;
    }

    .hero-min-block h1 {
        max-width: 340px;
    }

    .advisory .team {
        grid-template-columns: repeat(1, 1fr);
    }

    .partners-block {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .partners-item {
        height: 104px;
    }

    .hero-block {
        padding: 130px 15px 33px;
    }

}

@media screen and (max-width: 576px) and (max-height: 740px) {
    .hero-block {
        padding: 110px 15px 33px;
    }

    .hero-block h1 {
        font-size: 40px;
    }

    .hero-person-img {
        height: 420px;
    }
}

@media screen and (max-width: 576px) and (max-height: 670px) {
    .hero-block {
        padding: 100px 15px 33px;
    }

    .hero-person-img {
        height: 380px;
    }
}