:root {
    --color-white: #fff;
    --color-black: #000000;
    --color-black-hover: #1f1f1f;
    --color-accent: #EC6E3B;
    --color-accent-hover: #E4571E;
    --color-gray: #A5A2AC;
}

@font-face {
    font-family: 'SF';
    src: url('../fonts/SF-Pro-Display-Regular.otf');
}

@font-face {
    font-family: 'SF Medium';
    src: url('../fonts/SF-Pro-Display-Medium.otf');
}

@font-face {
    font-family: 'SF SemiBold';
    src: url('../fonts/SF-Pro-Display-Semibold.otf');
}

@font-face {
    font-family: 'SF Light';
    src: url('../fonts/SF-Pro-Display-Light.otf');
}

@font-face {
    font-family: 'Angst';
    src: url('../fonts/Angst-Normal.otf');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'SF';
}
img {
    user-select: none;
}
a {
    text-decoration: none;
}

body {
    background: var(----color-white);
    font-size: 18px;
}
body.hidden {
    overflow: hidden;
}
.main-header {
    display: flex;
    position: fixed;
    overflow: hidden;
    left: 0;
    top: 0;
    width: 100%;
    height: 106px;
    background: var(--color-white);
    z-index: 100;
}

.wrapper-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 80px;
    margin: 0 auto;
}

.main-header>.wrapper-container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.header-block {
    display: flex;
    width: 33.33%;
}

.header-block.center {
    justify-content: center;
}

.header-block:last-child {
    justify-content: flex-end;
    gap: 64px;
}

.header-logotype {
    display: flex;
    align-items: center;
    width: fit-content;
}

.header-navbar {
    display: flex;
    align-items: center;
    list-style-type: none;
    gap: 32px;
}

.header-navbar a {
    color: var(--color-black);
    transition: .3s;
}

.header-navbar a:hover {
    color: var(--color-accent);
}

.header-phone {
    color: var(--color-gray);
    transition: .3s;
}

.header-phone:hover {
    color: var(--color-accent);
}

.header-menu {
    display: flex;
    align-items: center;
    user-select: none;
    gap: 16px;
    cursor: pointer;
}

.header-menu>span {
    transition: .3s;
    color: var(--color-gray);
}

.header-menu:hover>span {
    color: var(--color-black);
}


.header-burger {
    display: flex;
    width: 36px;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.header-burger>div {
    width: 100%;
    transition: .3s;
    height: 2px;
    position: relative;
    background: var(--color-black);
}

.header-menu.active {
    gap: 0px;
}
.header-menu.active span  {
    font-size: 0px;
}
.active > .header-burger > div {
    width: 25px;
}
.active > .header-burger > div:nth-child(2) {
    width: 0px;
    transition: .1s;
    height: 0px;
}
.active > .header-burger > div:first-child {
    rotate: 45deg;
    top: 5px;
}
.active > .header-burger > div:last-child {
    rotate: -45deg;
    top: -5px;
}


.sidebar {
    display: flex;
    position: fixed;
    height: 100vh;
    transition: .3s;
    padding-top: 175px;
    width: 100%;
    z-index: 99;
    top: -100vh;
    background: var(--color-white);
}
.sidebar h1.section-title {
    opacity: 0;
    color: var(--color-accent);
} 
.sidebar.active {
    top: 0vh;
}
.sidebar.active h1.section-title {
    animation: FadeSidebar 0.3s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
}


.sidebar-menu {
    display: flex;
    margin-top: 64px;
    flex-wrap: wrap;
    width: 100%;
    opacity: 0;
    gap: 24px;
}
.sidebar.active .sidebar-menu {
    animation: FadeSidebar 0.3s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
}
.sidebar-menu__list {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 535px;
}
.sidebar-menu__list.tablet, .sidebar-menu__list.mobile {
    display: none;
}

.sidebar-menu__list > .menu {
    display: flex;
    flex-direction: column;
    margin-top: 16px;
    list-style-type: none;
    gap: 16px;
}
.sidebar-menu__list > .menu a {
    font-size: 24px;
    transition: .3s;
    color: var(--color-gray);
}
.sidebar-menu__list > .menu a:hover {
    color: var(--color-accent);
}

@keyframes FadeSidebar {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.main-wrapper {
    margin-top: 152px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.main-wrapper>.wrapper-container {
    display: flex;
    flex-direction: column;
    gap: 175px;
}

h1.section-title {
    font-size: 9vw;
    justify-content: center;
    display: flex;
    font-family: 'Angst';
    line-height: 100%;
    margin: 0;
    text-wrap: nowrap;
    font-weight: 300;
    color: var(--color-black);
}

h2.section-title {
    font-size: 64px;
    font-family: 'Angst';
    line-height: 150%;
    margin: 0;
    font-weight: 300;
}

h3.section-title {
    font-size: 48px;
    font-weight: 500;
    line-height: 130%;
    margin: 0;
    text-transform: uppercase;
}

h4.section-title {
    font-size: 32px;
    font-weight: 500;
    line-height: 130%;
    margin: 0;
    text-transform: uppercase;
}

.index-banner {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.index-banner__info {
    display: flex;
    width: 100%;
    padding: 48px;
    border-radius: 15px;
    height: 596px;
    background-size: cover;
    background-position: center top;
    background-image: url('../static/i-banner.jpg');
}

.index-banner__info>.container {
    display: flex;
    flex-direction: column;
    max-width: 732px;
    width: 100%;
    gap: 40px;
    color: var(--color-white);
}

.index-banner__tags {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 8px;
}

.index-banner__tags>.tag {
    background: var(--color-white);
    color: var(--color-black);
    padding: 10px 30px;
    border-radius: 10px;
}

.button {
    display: flex;
    width: 100%;
    height: 64px;
    outline: none;
    border: none;
    border-radius: 60px;
    background: var(--color-accent);
    transition: .3s;
    color: var(--color-white);
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

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

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

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

.index-banner .button {
    max-width: 380px;
}

.choice-section {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 48px;
}

.choice-block {
    display: flex;
    justify-content: space-between;
    width: 100%;
    /* Когда нужно будет добавлять интерактив нужно будет убрать комментарий и оставить align-items*/
    /* align-items: flex-start; */
    gap: 64px;
}

.choice-block .liter__img {
    display: flex;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    /* при добавлении адаптива удалить строки ниже*/
    object-fit: cover; /* это */
    object-position: center; /* это */
}

.liter-container {
    display: flex;
    width: 70%;
}

.liter-container svg{
    width: 100%;
    height: 100%;
    border-radius: 15px;
}

.svg-int-lnk{

}

.svg-int-lnk polygon{
    opacity: 0;
    transition: all .3s ease;
    fill: var(--color-accent);
}
.svg-int-lnk polygon:hover{
    opacity: .7;
    transition: all .3s ease;
}

.choice-info {
    display: flex;
    width: 30%;
    gap: 32px;
    flex-direction: column;
}

.choice-info .button {
    margin-top: auto;
    border-radius: 15px;
}

.choice-info .section-title {
    color: var(--color-accent);
}

.choice-info-element {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 16px;
}

.choice-info-element .title {
    font-size: 14px;
    color: var(--color-gray);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-gray);
}

.choice-info-element>p {
    margin: 0;
    font-size: 24px;
    line-height: 160%;
}

.fos-section {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 24px;
}

.fos-container {
    display: flex;
    flex-direction: column;
    width: 50%;
    gap: 40px;
    background: var(--color-accent);
    padding: 72px;
    border-radius: 15px;
}

.fos-container>.section-title {
    color: var(--color-white);
    line-height: 150%;
}

.fos-container>p {
    font-size: 24px;
    color: var(--color-white);
    line-height: 160%;
}

.fos__form {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.fos__form input {
    height: 46px;
    width: 100%;
    background: none;
    padding: 0;
    font-size: 24px;
    display: flex;
    align-items: center;
    margin-bottom: 32px;
    outline: none;
    border: none;
    color: var(--color-white);
    border-bottom: 1px solid var(--color-white);
}

.fos__form input::placeholder {
    color: var(--color-white);
}

.fos__form .button {
    border-radius: 15px;
}

.fos__form span {
    font-size: 14px;
    color: var(--color-white);
    margin-top: 16px;
}

.fos-section>img {
    width: 50%;
    object-fit: cover;
    object-position: center;
    border-radius: 15px;
}


.technologies-section {
    display: flex;
    flex-direction: column;
    gap: 72px;
}

.technologies-header {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.technologies-header>.section-title {
    width: 50%;
    max-width: 823px;
}

.technologies-header>p {
    font-size: 24px;
    max-width: 873px;
    width: 50%;
    line-height: 160%;
}

.technologies__banner {
    display: flex;
    width: 100%;
    border-radius: 15px;
    height: 700px;
    object-fit: cover;
    object-position: center;
}

.pluses {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 64px;
}

.pluses__header {
    display: flex;
    align-items: flex-start;
    width: 100%;
    justify-content: space-between;
    gap: 24px;
}

.pluses__header>.section-title {
    width: 50%;
    max-width: 705px;
}

.pluses__header>p {
    max-width: 1000px;
    font-size: 24px;
    line-height: 160%;
}

.pluses__banner {
    display: flex;
    width: 100%;
    height: 850px;
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    padding: 24px;
    background-image: url('../static/genplan.jpg');
}

.pluses__info {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: auto;
    gap: 24px;
}

.pluses__info-element {
    flex: 1 1 320px;
    min-width: 320px;
    min-height: 200px;
    width: 100%;
    padding: 40px;
    border-radius: 15px;
    flex-direction: column;
    background: var(--color-white);
    color: var(--color-black);
}
.pluses__info-element .section-title {
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-black);
}
.pluses__info-element > p {
    margin-top: 28px;
    line-height: 150%;
}

.uniqual__section {
    display: flex;
    flex-direction: column;
    gap: 64px;
}
.uniqual__swiper {
    display: flex;
    width: 100%;
    height: 635px;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.uniqual__swiper .swiper-slide {
    display: flex;
    align-items: flex-start;
    width: 100%;
    height: auto;
    gap: 64px;
}
.uniqual__swiper .swiper-slide .uniqual-info {
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.uniqual-info {
    opacity: 0;
    transition: .3s;
}
.swiper-slide-active .uniqual-info {
    opacity: 1;
}
.uniqual-info > .section-title {
    color: var(--color-accent);
}
.uniqual-info > p {
    font-size: 24px;
    line-height: 150%;
}
.uniqual__swiper .swiper-slide > img {
    width: 60%;
    height: 100%;
    opacity: 0;
    transition: .3s;
    border-radius: 15px;
    object-fit: cover;
    object-position: center;
}
.uniqual__swiper .swiper-slide-active > img {
    opacity: 1;
}
.uniqual__counts {
    display: flex;
    align-items: center;
    left: calc(60% + 64px);
    position: absolute;
    gap: 12px;
}
.uniqual__counts > div {
    font-size: 24px;
    color: var(--color-black);
}
.devider {
    display: flex;
    width: 136px;
    height: 1px;
    background: var(--color-gray);
}

.uniqual__next, .uniqual__prev {
    display: flex;
    width: 48px;
    position: absolute;
    height: 48px;
    transition: .3s;
    z-index: 5;
    border-radius: 50%;
    background: var(--color-accent);
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}
.uniqual__next:hover, .uniqual__prev:hover {
    background: var(--color-accent-hover);
}
.uniqual__next > img, .uniqual__prev > img {
    height: 14px;
    user-select: none;
}
.uniqual__next.swiper-button-disabled, .uniqual__prev.swiper-button-disabled {
    background: var(--color-gray);
    pointer-events: none;
}
.uniqual__next {
    right: 0px;
    rotate: 180deg;
}
.uniqual__prev {
    right: 64px;
}


.main-footer {
    display: flex;
    margin: 175px 0;
}
.footer-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 72px;
    margin-top: 72px;
}
.contacts__container {
    display: flex;
    width: 100%;
    padding-bottom: 72px;
    border-bottom: 1px solid var(--color-gray);
    justify-content: space-between;
}
.contact__element {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 267px;
}
.contact__element > .title {
    font-size: 24px;
    color: var(--color-gray);
}

@media screen and (max-width: 1660px) {
    .pluses__header>p {
        max-width: 740px;
    }
}
@media screen and (max-width: 1440px) {
    h2.section-title {
        font-size: 48px;
    }
    h1.section-title {
        font-size: 8.5vw;
    }
    .index-banner__info>.container {
        max-width: 765px;
    }
    .fos-container h2.section-title {
        font-size: 42px;
    }
    .fos-container>p {
        font-family: 'SF Light';
    }
    .pluses__banner {
        padding: 20px;
    }
    .pluses__info {
        gap: 20px;
    }
    .uniqual__swiper .swiper-slide > img {
        width: 50%;
    }
    .uniqual__counts {
        left: calc(50% + 64px);
    }
}
@media screen and (max-width: 1224px) {
    .wrapper-container {
        padding: 0 48px;
    }

    .sidebar-menu__list {
        max-width: 262px;
    }
    .main-wrapper>.wrapper-container {
        gap: 140px;
    }
    .main-footer {
        margin: 140px 0;
    }
    h1.section-title {
        font-size: 9vw;
    }
    h4.section-title {
        font-size: 28px;
    }
    .sidebar-menu__list > .menu a {
        font-size: 20px;
    }
    body {
        font-size: 16px;
    }
    .header-block:last-child {
        gap: 48px;
    }
    .contact__element {
        min-width: unset;
    }
    .index-banner__info {
        height: 550px;
    }
    .liter-container {
        width: 60%;
    }
    .choice-info {
        width: 40%;
    }
    .main-header {
        height: 90px;
    }
    .main-wrapper {
        margin-top: 122px;
    }
    .fos-container {
        padding: 50px;
    }
    .technologies-header {
        gap: 64px;
    }
    .technologies__banner {
        height: 600px;
    }
    .choice-info-element>p, .technologies-header>p, .fos-container>p, .pluses__header>p, .uniqual-info > p {
        font-size: 20px;
    }
    .uniqual__swiper {
        height: 530px;
    }
    .sidebar {
        padding-top: 122px;
    }
}
@media screen and (max-width: 1024px) {
    .header-block.center {
        display: none;
    }
    .sidebar-menu {
        justify-content: space-between;
    }
    .sidebar-menu__list.tablet {
        display: flex;
    }
    .sidebar-menu__list {
        max-width: 192px;
    }
    .technologies-header>p {
        max-width: 600px;
    }
    .technologies-header>.section-title {
        width: 65%;
    }
    .pluses__header>p {
        max-width: 540px;
    }
    .pluses__info-element {
        flex: 1 1 280px;
        min-width: 280px;
    }
    .header-block {
        width: 50%;
    }
    h1.section-title {
        font-size: 8.5vw;
    }
    h3.section-title {
        font-size: 24px;
    }
    .index-banner .button {
        max-width: 100%;
    }
    .index-banner {
        gap: 32px;
    }
    h4.section-title {
        font-size: 20px;
    }
    .sidebar-menu__list > .menu a {
        font-size: 16px;
    }
    h2.section-title {
        font-size: 32px;
    }
}
@media screen and (max-width: 880px) {
    .choice-block {
        flex-direction: column;
    }
    .liter-container {
        width: 100%;
    }
    .choice-info {
        width: 100%;
        flex-wrap: wrap;
        flex-direction: row;
    }
    .choice-info .section-title {width: 100%}
    .choice-info-element {
        width: calc(50% - 16px);
    }
    .choice-info-element:nth-child(6) {width: 100%;}

    .fos-section {
        flex-direction: column-reverse;
    }
    .fos-section>img {
        width: 100%;
        height: 430px;
    }
    .fos-container {
        width: 100%;
        gap: 32px;
    }
    .fos-container h2.section-title {
        font-size: 32px;
    }
    .choice-info-element>p, .technologies-header>p, .fos-container>p, .pluses__header>p, .uniqual-info > p {
        font-size: 16px;
    }
    .technologies-header {
        flex-direction: column;
        gap: 32px;
    }
    .technologies-header>.section-title {
        width: 100%;
        max-width: 335px;
    }
    .technologies-header>p {
        max-width: 100%;
        width: 100%;
    }
    .technologies-section {
        gap: 48px;
    }
    .pluses__header {
        flex-direction: column;
    }
    .pluses__header>p {
        max-width: 100%;
    }
    .pluses__header {
        gap: 32px;
    }
    .pluses {
        gap: 48px;
    }
    .uniqual__swiper {
        height: auto;
    }
    .uniqual__counts {
        left: 0;
        position: static;
    }
    .uniqual__swiper .swiper-slide > img {
        width: 100%;
    }
    .uniqual__swiper .swiper-slide {
        flex-direction: column-reverse;
    }
    .uniqual__swiper .swiper-slide .uniqual-info {
        margin-top: 40px;
    }
    .uniqual-info > p {
        max-width: 500px;
        width: 80%;
    }
    .uniqual__swiper .swiper-slide > img {
        height: 600px;
    }
    .uniqual__swiper .swiper-slide {
        gap: 48px;
    }
    .uniqual__next, .uniqual__prev {
        bottom: 648px;
    }
    .choice-block {
        gap: 48px;
    }
    .contact__element > .title {
        font-size: 20px;
    }
}

@media screen and (max-width: 564px) {
    .wrapper-container {
        padding: 0 28px;
    }
    .header-phone {
        display: none;
    }
    .sidebar-menu {
        gap: 48px 16px;
    }
    .sidebar-menu__list {
        width: calc(50% - 8px);
    }
    .sidebar-menu__list.mobile {
        display: flex;
    }
    .index-banner__info {
        padding: 32px;
    }
    .index-banner__tags>.tag {
        width: 100%;
    }
    .choice-block {
        gap: 32px;
    }
    .main-footer {
        margin: 110px 0;
    }
    .main-header {
        height: 76px;
    }
    .main-wrapper {
        margin-top: 100px;
    }
    .main-wrapper>.wrapper-container {
        gap: 110px;
    }
    .fos-section>img {
        height: 250px;
        object-fit: cover;
        object-position: center;
    }
    .fos-container {
        padding: 32px;
    }
    .pluses__header>.section-title {
        width: 100%;
    }
    .pluses__banner {
        height: auto;
    }
    .uniqual__swiper .swiper-slide .uniqual-info {
        margin-bottom: 48px;
    }
    .uniqual__prev {
        left: 0px;
    }
    .uniqual__next {
        left: 64px;
    }
    .uniqual__prev, .uniqual__next {
        bottom: calc(255px + 24px);
    }
    .uniqual__swiper .swiper-slide > img {
        height: 255px;
    }
    .contacts__container {
        flex-direction: column;
        gap: 24px;
    }
    .footer-content {
        margin-top: 32px;
        gap: 32px;
    }
    .contacts__container {
        padding-bottom: 32px;
    }
    .liter-container {
        /* убрать при интерактиве */
        height: 330px;
    }
    .index-banner__tags>.tag {
        padding: 10px 24px;
    }
}