@import url("reset.css");
@import url("components.css");

body {
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    background-color: #0f172a;
    color: #fff;
}

@media (max-width: 767.98px) {
    body {
        font-size: 18px;
    }
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: clip;
}

.wrapper>main {
    flex-grow: 1;
}

/*Обмежуючий контейнер*/
[class*="__container"] {
    max-inline-size: 1310px;
    /*1280 + 15 + 15*/
    margin-inline: auto;
    padding-inline: 15px;
}

/* ----------------------------------------------------------------------------------------- */
.header {
    padding-block: 24px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.header__container {
    max-inline-size: 1030px;
}

.header__body {
    padding: 24px;
    column-gap: 46px;
    row-gap: 5px;
    border-radius: 20px;
    background-color: #192131;
    box-shadow:
        0 0 15px 0 rgba(0, 0, 0, 0.07),
        0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: grid;
    align-items: center;
    grid-template-columns: auto 1fr auto;
}

.header__link-logo {
    position: relative;
    z-index: 3;
    font-size: 32px;
    font-weight: 700;
    line-height: 110%;
    transition: color 0.3s;
}

.header__link-logo:hover {
    color: #8f2ee9;
}

.header__menu {}

.menu {}

.menu__body {}

.menu__button {
    display: none;
}

.menu__list {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

.menu__item {}

.menu__link {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.03em;
    transition: color 0.3s;
}

.menu__link:hover {
    color: #8f2ee9;
}

.header__actions {}

.actions-header {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 3;
}

.actions-header__button {}


.icon-menu {
    display: none;
}


@media (max-width: 991.98px) {
    .header {
        padding-block: 15px;
    }

    .header__body {
        padding: 15px;
        column-gap: 25px;
    }

    .menu__list {
        column-gap: 20px;
    }

    .actions-header {
        column-gap: 10px;
    }

    .actions-header__button.button--mini {
        padding-inline: 15px;
    }

}

@media (max-width: 767.98px) {
    .menu {
        position: fixed;
        inset-inline-start: -100%;
        inset-block-start: 0;
        block-size: 100%;
        inline-size: 100%;

        transition: inset-inline-start 0.3s;

        overflow: auto;

        background-color: #0f172a;

        padding-block-start: 105px;
        padding-inline: 15px;
        padding-block-end: 30px;
    }

    .menu::before {
        position: fixed;
        content: "";
        z-index: 2;
        block-size: 64px;
        inset-block-start: 15px;
        inset-inline-start: 15px;
        inset-inline-end: 15px;

        transition: visibility 0.3s;
        visibility: hidden;

        border-radius: 20px;
        background-color: #192131;
        box-shadow:
            0 0 15px 0 rgba(0, 0, 0, 0.07),
            0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }

    .open-menu .menu {
        inset-inline-start: 0;
    }

    .open-menu .menu::before {
        visibility: visible;
    }

    .menu__list {
        flex-direction: column;
        align-items: flex-end;
        row-gap: 25px;
        padding-inline-end: 18px;
    }

    .menu__link {
        font-size: 30px;
    }

    .icon-menu {
        display: block;
        position: relative;
        inline-size: 48px;
        block-size: 48px;
        z-index: 3;
    }

    .icon-menu span,
    .icon-menu::before,
    .icon-menu::after {
        content: "";
        position: absolute;
        block-size: 4px;
        border-radius: 4px;
        background-color: #fff;

        transition: all 0.3s;
    }

    .icon-menu::before,
    .icon-menu::after {
        inline-size: 15px;
    }

    .icon-menu::before {
        inset-inline-start: 10px;
        inset-block-start: 14px;
    }

    .icon-menu::after {
        inset-inline-end: 10px;
        inset-block-end: 14px;
    }

    .icon-menu span {
        inset-inline-start: 50%;
        inset-block-start: 50%;
        transform: translate(-50%, -50%);
        inline-size: 28px;
    }

    .open-menu .icon-menu span {
        transform: translate(-50%, -50%) rotate(-45deg);
        inline-size: 33px;
    }

    .open-menu .icon-menu::before {
        transform: translate(0px, 2px) rotate(45deg);
    }

    .open-menu .icon-menu::after {
        transform: translate(0px, -2px) rotate(45deg);
    }

    .header__body {
        padding-block: 8px;
        padding-inline-start: 24px;
        padding-inline-end: 8px;
        grid-template-columns: auto auto;
        justify-content: space-between;
    }
}

@media (max-width: 439.98px) {
    .menu__list:not(:last-child) {
        margin-bottom: 30px;
    }

    .menu__button {
        display: block;
    }

    .menu__button:not(:last-child) {
        margin-bottom: 15px;
    }

    .actions-header__button {
        display: none;
    }
}

/* ----------------------------------------------------------------------------------------- */

.page {}

.page__hero {}

.page_companies {
}

[class*="page__"] {
    padding-top: 80px;
    padding-bottom: 80px;
}

@media (max-width: 991.98px) {
    [class*="page__"] {
    padding-top: 60px;
    padding-bottom: 60px;
}
}

@media (max-width: 767.98px) {
    [class*="page__"] {
    padding-top: 48px;
    padding-bottom: 48px;
}
}
/* ----------------------------------------------------------------------------------------- */

.hero {
    padding-top: 104px;
}

.hero__container {
    text-align: center;
}

.hero_block-header {
    margin-bottom: 80px;
}

.hero__image {
    max-width: 100%;
    border-radius: 20px;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07), 0 25px 50px -12px rgba(0, 0, 0, 0.25);

}

@media (max-width: 991.98px) {
    .hero {
        padding-top: 70px;
    }

    .hero_block-header {
        margin-bottom: 60px;
    }
}

@media (max-width: 767.98px) {
    .hero {
        padding-top: 35px;
    }

    .hero_block-header {
        margin-bottom: 48px;
    }
}

/* ----------------------------------------------------------------------------------------- */


.companies {
    margin-bottom: 80px;
}
.companies__container {
}

.companies__title {
    margin-bottom: 80px;
}

.companies__items {
    display: flex;
    justify-content: space-evenly;
    gap: 24px;
    flex-wrap: wrap;
}
.companies__item {
}

@media (max-width: 991.98px) {
    .companies__title {
    margin-bottom: 60px;
}
}

@media (max-width: 767.98px) {
    .companies__title {
    margin-bottom: 48px;
}
}