@import url('./reset.css');
@import url('./variables.css');

@font-face {
    font-family: 'Commissioner';
    src: url('../fonts/CommissionerVariable.ttf');
}

html {
    inset: 0;
    position: absolute;
    scroll-behavior: smooth;
}

body {
    font-family: 'Commissioner';
    position: absolute;
    inset: 0;
    color: var(--black);
    background-color: var(--bg-gray);
}

button {
    all: unset;
    cursor: pointer;
}

.button {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border-radius: 5px;
    font: var(--smallSM);
    transition: all 150ms linear;
    user-select: none;
    white-space: nowrap;
}

.button-1 {
    background-color: var(--green-light);
    color: var(--white);
    padding: 17px 22px;
}
.button-1:hover {
    background-color: var(--white);
    color: var(--green-light);
}

.button-2 {
    background: var(--dark-gradient);
    color: var(--white);
    padding: 12px 20px;
}
.button-2:hover {
    background: var(--green);
}

.button-3 {
    background: var(--white);
    color: var(--black);
    padding: 17px 22px;

    .marker {
        color: var(--green-light);
    }
}
.button-3:hover {
    background: var(--gradient);
    color: var(--white);

    .marker {
        color: var(--white);
    }
}

.button-4 {
    background: var(--gradient);
    color: var(--white);
    padding: 12px 20px;
}
.button-4:hover {
    background: var(--green);
}

#container {
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    height: 50px;
    display: flex;
    flex-direction: column;
    gap: 150px;
    height: fit-content;
}

#header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 15px 20px;
}

.top {
    display: flex;
    gap: 70px;
    align-items: center;
}

.logo {
    display: flex;
    gap: 12px;
    align-items: center;
}

.logo__title {
    font-size: 24px;
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: calc(24px * -0.03);
}

.navigation {
    display: flex;
    align-items: center;
}

.navigation__list {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: center;
}

.navigation__item {
    white-space: nowrap;
    text-overflow: ellipsis;
    font: var(--smallM);
    transition: 150ms linear;
}

.navigation__item:hover {
    color: var(--green-light);
}

.header-button {
    margin-left: auto;
}

.splide-header {
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.header-info {
    display: flex;
    justify-content: space-between;
    position: absolute;
    z-index: 5;
    inset: 0;
    padding: 107px 64px 40px 70px;
    color: var(--white);
}

.header-left {
    display: flex;
    flex-direction: column;
    gap: 60px;
    max-width: 956px;
}

.header-text {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.header-title {
    font: var(--h1);
}

.header-caption {
    font: var(--h6R);
}

.header-right {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 404px;
    gap: 21px;
}

.header-card {
    background-color: rgba(0 0 0 / 20%);
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    backdrop-filter: blur(16px);
    border-radius: 5px;
    border: 1px solid rgba(255 255 255 / 20%);
    user-select: none;
}

.header-card__title {
    font: var(--h2);
    white-space: pre-wrap;
}

.header-card__caption {
    font: var(--pR);
}

.header-card__icon {
    width: 38px;
    height: 38px;
    position: absolute;
    top: 20px;
    right: 20px;
}

.header-paginator {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.header-arrow-button {
    background-color: rgba(255 255 255 / 10%);
    border-radius: 50%;
    padding: 17px 22px;
    backdrop-filter: blur(16px);
    transition: all 150ms linear;
    cursor: pointer;
}
.header-arrow-button:hover {
    background-color: rgba(255 255 255 / 20%);
}

.page-status {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 20px;
    font: var(--smallSM);
    user-select: none;

    .divider {
        color: rgba(255 255 255 / 35%);
    }

    #header-splide-length {
        color: rgba(255 255 255 / 35%);
    }
}

#about {
    display: flex;
    flex-direction: column;
    gap: 70px;
    padding: 15px 20px;
}

.about-text {
    display: flex;
    gap: 191px;
}

.about-name {
    white-space: nowrap;
    font: var(--smallM);
    color: var(--gray-el);
}

.about-top {
    display: flex;
    gap: 110px;
}

.about-info {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.about__title {
    font: var(--h2);
}

.about__caption {
    font: var(--pR);
    color: var(--gray-text);
}

.about__icon {
    width: 38px;
    height: 38px;
}

.about__prove {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.about__prove-title {
    font: var(--h6);
}

.about__prove-caption {
    font: var(--pR);
    color: var(--gray-text);
}

.about-action {
    display: flex;
    align-items: flex-end;
}

.about-bottom {
    background-color: var(--white);
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 70px 50px;
    border-radius: 10px;
}

.sklad-about,
.product-category {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.sklad-about__top,
.product-category__top {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sklad-about__title,
.product-category__title {
    font: var(--h4);
}

.sklad-about__caption,
.product-category__caption {
    font: var(--pR);
    color: var(--gray-text);
}

.sklad-about__bottom {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.sklad-card {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 25px;
    border: 1px solid var(--bg-stroke);
    border-radius: 5px;
    flex: 1 0 21%;
}

.sklad-card__text {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sklad-card__title {
    font: var(--h6);
    letter-spacing: calc(22px * -0.03);
}

.sklad-card__caption {
    font: var(--pR);
    color: var(--gray-text);
    letter-spacing: calc(18px * -0.03);
}

.product-category__bottom {
    display: flex;
    gap: 20px;
    height: 100%;
}

.category-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 5px;
    background-color: var(--bg-gray);
    padding: 25px;
}

.category__title {
    font: var(--h6);
    letter-spacing: calc(22px * -0.03);
}

.category__caption {
    font: var(--pR);
    color: var(--gray-text);
    max-width: 196px;
    letter-spacing: calc(18px * -0.03);
}

#services {
    display: flex;
    flex-direction: column;
    gap: 70px;
    padding: 15px 20px;
}

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

.services__text {
    display: flex;
    gap: 185px;
}

.services__name {
    font: var(--smallM);
    color: var(--gray-el);
}

.services__title {
    font: var(--h2);
}

.services__action {
    display: flex;
    align-items: flex-end;
}

.services__content {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 20px;

    .arrow-card {
        padding: 17px 22px;
        background: var(--bg-gray);
        width: fit-content;
        border-radius: 50%;
        transition: all 150ms linear;
        cursor: pointer;
    }

    .arrow-card:hover {
        background: rgba(0 0 0 / 20%);
    }

    .card-text {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .card__title {
        font: var(--h5);
    }

    .card__caption {
        font: var(--pR);
        color: var(--gray-text);
    }

    .card-image {
        position: absolute;
        width: 100%;
        object-fit: contain;
        pointer-events: none;
        max-width: 526px;
    }

    .card-1 {
        position: relative;
        grid-column: 1 / 3;
        grid-row: 1 / 3;
        background-color: var(--white);
        border-radius: 5px;
        padding: 35px;
        min-height: 460px;
        justify-content: space-between;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .card-image {
            bottom: -35%;
            right: -15%;
        }
    }

    .card-2 {
        grid-column: 3;
        grid-row: 1 / 3;
        background-color: var(--white);
        border-radius: 5px;
        padding: 35px;
        min-height: 460px;
        justify-content: space-between;
        display: flex;
        flex-direction: column;

        overflow: hidden;
    }

    .card-3 {
        grid-column: 4;
        grid-row: 1 / 3;
        background-color: var(--white);
        border-radius: 5px;
        padding: 35px;
        min-height: 460px;
        justify-content: space-between;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .card-4 {
        grid-column: 5 / 7;
        grid-row: 1 / 4;
        background-color: var(--white);
        border-radius: 5px;
        padding: 35px;
        min-height: 460px;
        justify-content: space-between;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;

        .card-image {
            bottom: -20%;
            right: -20%;
        }
    }

    .card-5 {
        grid-column: 1 / 3;
        grid-row: 3 / 5;
        background-color: var(--white);
        border-radius: 5px;
        padding: 35px;
        min-height: 460px;
        justify-content: space-between;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;

        .card-image {
            bottom: -28%;
            right: -17%;
        }
    }

    .card-6 {
        grid-column: 3 / 5;
        grid-row: 3 / 5;
        background: var(--dark-gradient);
        border-radius: 5px;
        padding: 35px;
        min-height: 460px;
        justify-content: space-between;
        display: flex;
        flex-direction: column;
        color: var(--white);

        .card__caption {
            color: var(--white);
        }

        .arrow-card {
            background: var(--white);
        }

        overflow: hidden;
        position: relative;

        .card-image {
            bottom: -35%;
            right: -20%;
        }
    }

    .card-7 {
        grid-column: 1 / 4;
        grid-row: 5 / 7;
        background: var(--white);
        border-radius: 5px;
        padding: 35px;
        min-height: 460px;
        justify-content: space-between;
        display: flex;
        flex-direction: column;

        overflow: hidden;
        position: relative;

        .card-image {
            bottom: -30%;
            right: -2%;
        }
    }

    .card-8 {
        grid-column: 4;
        grid-row: 5 / 7;
        background: var(--white);
        border-radius: 5px;
        padding: 35px;
        min-height: 460px;
        justify-content: space-between;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
    }

    .card-9 {
        grid-column: 5 / 7;
        grid-row: 4 / 7;
        background: var(--white);
        border-radius: 5px;
        padding: 35px;
        min-height: 460px;
        justify-content: space-between;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;

        .card-image {
            bottom: -18%;
            right: -15%;
        }
    }
}

#order {
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    padding: 50px 70px;
    gap: 70px;
    margin: 15px 20px;
}

.order-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order__title {
    font: var(--h2);
}

.order-view {
    display: flex;
    gap: 20px;
}

.order-step {
    display: flex;
    flex-direction: column;
    gap: 40px;
    border-radius: 5px;
    padding: 25px 25px 25px 0;
    flex: 1;
}

.order-step:last-child {
    .order__path {
        display: none;
    }
}

.order__top {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

.order__num {
    font: var(--smallM);
    color: var(--gray-el);
}

.order__icon {
    width: 38px;
    height: 38px;
}

.order__path {
    width: calc(100% + 10px);
    position: absolute;
    border-bottom: 1px dashed var(--green-light);
    bottom: 19px;
    left: 38px;
}

.order__bottom {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.order-step__title {
    font: var(--h6);
}

.order-step__caption {
    font: var(--pR);
    color: var(--gray-text);
}

#benefits {
    display: flex;
    flex-direction: column;
    gap: 70px;
    padding: 70px 50px;
    border-radius: 10px;
    background-image: url('../img/benefits.png');
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--white);
    margin: 15px 20px;
}

.benefits__tags {
    display: flex;
    gap: 10px;
    align-items: center;
}

.benefits__tag {
    display: flex;
    gap: 10px;
    align-items: center;
    background-color: var(--white);
    color: var(--black);
    border-radius: 50px;
    padding: 9px 18px;
    font: var(--smallM);
}

.benefits__text {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.benefits__title {
    font: var(--h1);
}

.benefits__caption {
    font: var(--h6);
}

#complexes {
    display: flex;
    flex-direction: column;
    padding: 15px 20px;
    gap: 70px;
}

.complexes__head {
    display: flex;
    gap: 113px;
}

.complexes__name {
    font: var(--smallM);
    color: var(--gray-el);
}

.complexes__title {
    font: var(--h2);
}

.complexes__action {
    display: flex;
    align-items: flex-end;
    margin-left: auto;
}

.complexes__content {
    display: flex;
    gap: 20px;
}

.sklad-record,
.sklad-add {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: calc(50% - 10px);
}

.splide-add,
.splide-record {
    border-radius: 5px;
    overflow: hidden;
    position: relative;

    .splide__pagination__page {
        width: 200px;
        border-radius: 3px;
        height: 3px;
    }

    .splide__pagination__page.is-active {
        transform: unset;
    }
}

.splide-add {
    .splide__pagination__page {
        width: 170px;
    }
}

.plash-record {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 2;
    font: var(--smallM);
    color: var(--white);
    background: var(--dark-gradient);
    padding: 9px 18px;
    border-radius: 50px;
}

.plash-add {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 2;
    font: var(--smallM);
    background-color: var(--white);
    padding: 9px 18px;
    border-radius: 50px;
}

.sklad-description {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.sklad__title {
    font: var(--h4);
}

.sklad__stats {
    display: flex;
    gap: 64px;
    padding: 25px 30px;
    border: 1px solid var(--bg-stroke);
    border-radius: 5px;
    width: fit-content;
}

.sklad__stats-item {
    display: flex;
    flex-direction: column;
    gap: 5px;

    .stat-name {
        font: var(--h6);
    }

    .stat-value {
        font: var(--pR);
        color: var(--gray-text);
    }
}

#contacts {
    display: flex;
    flex-direction: column;
    gap: 70px;
    padding: 15px 20px;
}

.contacts__head {
    display: flex;
    gap: 95px;
}

.contacts__name {
    font: var(--smallM);
    color: var(--gray-el);
}

.contacts__title {
    font: var(--h2);
}

.contacts__action {
    display: flex;
    align-items: flex-end;
    margin-left: auto;
}

#map {
    height: 800px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.marker {
    display: flex;
    align-items: center;
    justify-content: center;
    font: var(--smallM);
    color: var(--gray-el);
    gap: 5px;

    .number {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        border-radius: 50px;
        justify-content: center;
        background-color: var(--white);
    }

    .title {
        padding: 9px 18px;
        border-radius: 50px;
        background: var(--white);
        white-space: nowrap;
    }
}

#active-marker {
    position: relative;
    color: var(--white);

    .number {
        background: var(--dark-gradient);
    }

    .title {
        background: var(--dark-gradient);
    }
}

#active-marker:hover .hover-popup {
    opacity: 1;
    transform: scale(1);
}

.contacts__info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: absolute;
    z-index: 5;
    top: 100px;
    left: 50px;
}

.contacts__card {
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    gap: 25px;
    border-radius: 5px;
    padding: 35px;
    max-width: 500px;
}

.contacts__name {
    display: flex;
    flex-direction: column;
    gap: 5px;

    .stuff-name {
        font: var(--h6);
        color: var(--black);
    }

    .stuff-grade {
        font: var(--pR);
        color: var(--gray-text);
    }
}

.contacts__divider {
    border-bottom: 1px solid var(--stroke);
}

.contacts__phone {
    display: flex;
    align-items: center;
    gap: 20px;
    font: var(--h5);
}

.contacts__slogan {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--gradient);
    max-width: 500px;
    padding: 35px;
    border-radius: 5px;
    color: var(--white);
    font: var(--h6);
}

.hover-popup {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 35px;
    border-radius: 5px;
    background-color: var(--white);
    top: 110%;
    color: var(--black);
    width: 350px;
    opacity: 0;
    transition: 200ms;
    transform: scale(0);

    .divider {
        border-bottom: 1px solid var(--stroke);
    }

    .actions {
        display: flex;
        flex-direction: column;
        gap: 10px;

        button {
            width: unset;
        }
    }

    .adress {
        display: flex;
        flex-direction: column;
        gap: 5px;

        .first {
            font: var(--h6);
        }

        .second {
            font: var(--pR);
            color: var(--gray-text);
        }
    }

    .work-time {
        display: flex;
        gap: 20px;

        .left,
        .right {
            display: flex;
            flex-direction: column;
            gap: 5px;
            flex: 1;

            .top {
                font: var(--pR);
                color: var(--gray-text);
            }

            .bottom {
                font: var(--h6);
            }
        }
    }
}

#footer {
    display: flex;
    gap: 280px;
    padding: 70px 120px;
    background: var(--dark-gradient);
}

.footer-inner {
    margin: 0 auto;
    width: 100%;
    max-width: 1680px;
    justify-content: space-between;
    display: flex;
    gap: 20px;
}

.info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 1000px;
    flex: 1;
}

.info-top {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    .logo {
        color: var(--white);
    }
}

.social {
    display: flex;
    flex-direction: column;
    padding: 35px;
    background-color: var(--white);
    border-radius: 5px;
    gap: 25px;
    width: 400px;

    .divider {
        border-bottom: 1px solid var(--stroke);
    }
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    span {
        font: var(--h6);
    }
}

.info-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.privacy,
.footer-about {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font: var(--smallM);
}

.privacy {
    color: rgba(255 255 255 / 50%);
    a {
        text-decoration: underline;
        text-underline-offset: 2.5px;
    }
}

.footer-about {
    span {
        font: var(--h6);
        color: var(--white);
    }

    p {
        color: rgba(255 255 255 / 50%);

        a {
            text-decoration: underline;
            text-underline-offset: 2.5px;
        }
    }
}

.modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal--open {
    display: flex;
}

.modal__content {
    background-color: var(--white);
    border-radius: 5px;
    max-width: 680px;
    width: 100%;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 35px;
}

.modal__close {
    position: absolute;
    top: -66px;
    right: 0;
    border: none;
    background: transparent;
    font-size: 24px;
    width: 46px;
    height: 46px;
    background-color: var(--white);
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--gray-el);
}

.modal__close:hover {
    background-color: var(--gray-el);
    color: var(--black);
}

.modal-tags {
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--bg-gray);
    padding: 9px 18px;
    border-radius: 50px;
    font: var(--smallM);

    .tag-icon {
        width: 22px;
        height: 22px;
    }
}

.modal__title {
    font: var(--h4);
}

.modal__head {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.modal__body {
    display: flex;
    flex-direction: column;
    gap: 20px;

    .fields {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .field-row {
        display: flex;
        gap: 10px;
    }
}

.input {
    border: 1px solid var(--bg-stroke);
    padding: 17px 20px;
    border-radius: 5px;
    font: var(--smallM);
    flex: 1;
}

.input::placeholder {
    color: var(--gray-el);
}

.my-textarea {
    border: 1px solid var(--bg-stroke);
    padding: 17px 20px;
    border-radius: 5px;
    font: var(--smallM);
    flex: 1;
    resize: none;
}

.my-textarea::placeholder {
    color: var(--gray-el);
}

#success-modal {
    .modal__content {
        background: var(--gradient);
    }

    .modal__text {
        display: flex;
        flex-direction: column;
        gap: 20px;
        color: var(--white);
    }
}

.splide__slide img {
    width: 100%;
}