@font-face {
    font-family: 'Poiret One';
    src: url('../fonts/Poiret-One/PoiretOne-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Unbounded';
    src: url('../fonts/Unbounded/Unbounded-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Unbounded';
    src: url('../fonts/Unbounded/Unbounded-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Unbounded';
    src: url('../fonts/Unbounded/Unbounded-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Unbounded';
    src: url('../fonts/Unbounded/Unbounded-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Unbounded';
    src: url('../fonts/Unbounded/Unbounded-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

:root {
    --main-dark: #1E1E1E;
    --main-light: #FFFFFF;

    --border-radius-nealit: 10px;

    --font-face-Unbounded: 'Unbounded', sans-serif;
    --font-face-Poiret-One: 'Poiret One', sans-serif;

    --padding-main-nealit: 64px;
    --padding-in: 32px;
}

body {
    background-color: var(--main-light);
    color: var(--main-dark);
    font-family: var(--font-face-Unbounded);
    line-height: normal;
}

section {
    padding: var(--padding-main-nealit);
    transition: var(--transition-duration);
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    border: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    clip-path: inset(100%) !important;
    clip: rect(0 0 0 0) !important;
    overflow: hidden !important;
}

.head-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: var(--padding-main-nealit);
    align-self: stretch;
}

.frame-head {
    width: 100%;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr auto 1fr;
}

.head-text {
    font-size: clamp(5px, 2.5vw, 48px);
    font-weight: 400;
}

.head-text:first-child {
    text-align: left;
}

.head-text:last-child {
    text-align: right;
}

.logo-nealit-head {
    justify-self: center;
    width: clamp(40px, 13vw, 250px);
    height: auto;
}

.pictures-head-list {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--padding-in);
}

.pictures-head-item {
    width: 100%;
    height: 100%;
}

.picture-nealitman {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 1 / 1;
    border-radius: var(--border-radius-nealit);
}

.project-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--padding-in);
    align-self: stretch;
    background: var(--main-dark);
    color: var(--main-light);
}

.about-title {
    font-size: clamp(24px, 5vw, 96px);
    font-weight: 500;
}

.about-text {
    align-self: stretch;
    text-align: left;
    font-size: clamp(17px, 2.8vw, 54px);
    font-weight: 200;
}

.technology-block {
    display: flex;
    height: clamp(320px, 57vw, 1048px);
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    position: relative;
}

.color-list {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    column-gap: var(--padding-main-nealit);
    align-self: stretch;
}

.color-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: var(--padding-in);
}

.color {
    width: clamp(35px, 7.8vw, 150px);
    aspect-ratio: 1;
    border-radius: var(--border-radius-nealit);
}

.color-name {
    text-align: center;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--main-dark);
    font-family: var(--font-face-Poiret-One);
    font-size: clamp(8px, 1.7vw, 32px);
    font-weight: 400;
}

.typographyca-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--padding-main-nealit);
}

.typographyca-title {
    color: var(--main-dark);
    text-align: right;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--main-dark);
    font-family: var(--font-face-Poiret-One);
    font-size: clamp(14px, 2.1vw, 40px);
    font-weight: 400;
}

.font-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--padding-in);
}

.font-name {
    font-size: clamp(10px, 3.3vw, 64px);
    font-weight: 700;
}

.font-letters {
    font-size: clamp(5px, 1vw, 20px);
    font-weight: 300;
}

.jacket-1 {
    position: absolute;
    top: max(-15.62vw, -300px);
    margin: 0 -4.3vw;
    width: clamp(240px, 43.75vw, 840px);
    height: clamp(280px, 58vw, 1120px);
    background: url('../img/nealit/jackets/jacket_1.png') center / cover no-repeat;
}

.jacket-2 {
    position: absolute;
    right: 0px;
    bottom: -7.2vw;
    width: clamp(210px, 49.7vw, 950px);
    height: clamp(235px, 48.8vw, 940px);
    background: url('../img/nealit/jackets/jacket_2.png') center / cover no-repeat;
}

.cap-man {
    position: relative;
    height: 66vw;
    max-height: 1280px;
    background-color: var(--main-dark);
}

.cap-man-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.logo-block {
    display: flex;
    align-items: flex-start;
    padding: 0;
}

.partition-logo {
    display: flex;
    padding: var(--padding-main-nealit);
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.logo-part-1 {
    width: clamp(60px, 8.3vw, 160px);
    height: auto;
}

.logo-part-2 {
    width: clamp(65px, 8.85vw, 170px);
    height: auto;
}

.logo-part-3 {
    width: clamp(90px, 11vw, 210px);
    height: auto;
}

.content-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
}

.discription-logo {
    display: flex;
    padding: var(--padding-in);
    flex-direction: column;
    align-items: center;
    align-self: stretch;
}

.discription-logo figcaption {
    display: flex;
    align-items: center;
    gap: clamp(20px, 6.25vw, 120px);
}

.discription-logo.light {
    border-left: 2px solid var(--main-dark);
    background: var(--main-light);
}

.discription-logo.dark {
    background: var(--main-dark);
}

.logo-nealit {
    width: clamp(100px, 10.15vw, 195px);
    height: auto;
}

.logo-nealit.black {
    fill: var(--main-dark);
}

.logo-nealit.white {
    fill: var(--main-light);
}

.logo-title-text {
    width: clamp(271px, 24.3vw, 465px);
    text-align: justify;
    font-family: var(--font-face-Poiret-One);
    font-size: clamp(13px, 1.77vw, 34px);
    font-weight: 400;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.logo-title-text.white {
    color: var(--main-light);
}

.logo-title-text::before {
    content: "";
    width: clamp(16px, 1.66vw, 32px);
    aspect-ratio: 1;
    border-radius: 50%;
    flex-shrink: 0;
}

.logo-title-text.black::before {
    background-color: var(--main-dark);
}

.logo-title-text.white::before {
    background-color: var(--main-light);
}

.texture {
    height: 19.8vw;
    max-height: 380px;
    background-color: var(--main-dark);
}

.texture-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.alter-logo-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--padding-main-nealit);
}

.alter-logo-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--padding-main-nealit);
    row-gap: 3.64vw;
}

.alter-logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

hr {
    border: none;
    height: 2px;
    width: 100%;
    background-color: var(--main-dark);
    margin: 0;
}

.alter-logo-title {
    text-align: center;
    font-size: clamp(12px, 1.67vw, 32px);
    font-weight: 300;
}

.chest {
    height: 69.3vw;
    max-height: 1330px;
    background-color: var(--main-dark);
}

.chest-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 80%;
}

.style {
    display: flex;
    background-color: var(--main-light);
    align-items: flex-start;
}

.style-img {
    width: 50%;
    height: auto;
}

.foot-block {
    display: flex;
    height: clamp(260px, 69.27vw, 1330px);
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    padding: 0;
    background: var(--Nealit-Gradient, linear-gradient(180deg, #403E3E 0%, #C2BBBB 100%));
}

.vector-logo-ima {
    width: clamp(50px, 19.27vw, 370px);
    height: auto;
    margin: var(--padding-main-nealit);
}

.foot-img {
    width: 76.25vw;
    max-width: 1460px;
    height: auto;
    position: absolute;
    right: 0;
}

@media (max-width: 1440px) {
    :root {
        --padding-main-nealit: 32px;
    }

    .jacket-1 {
        top: -13.62vw;
    }

}

@media (max-width: 1024px) {
    .alter-logo-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    :root {
        --border-radius-nealit: 5px;
        --padding-in: 8px;
        --padding-main-nealit: 16px;
    }

    .jacket-1 {
        margin: 0px -7.3vw;
    }

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

    .logo-block {
        flex-direction: column;
        align-items: center;
    }

    .partition-logo {
        flex-direction: row;
        justify-content: center;
        gap: clamp(10px, 2vw, 20px);
        padding: var(--padding-in);
    }

    .logo-part-1 {
        order: 1;
        margin-right: auto;
    }

    .logo-part-2 {
        order: 2;
        margin: 0 auto;
    }

    .logo-part-3 {
        order: 3;
        margin-left: auto;
    }

    .content-logo {
        width: 100%;
    }

    .logo-title-text {
        gap: 6px;
    }

    .discription-logo.light {
        border-top: 2px solid var(--main-dark);
        border-left: none;
    }
}

@media (max-width: 500px) {
    .jacket-1 {
        margin: 0px -8.3vw;
    }
}