/* Reset CSS */
body {
    font-family: "Jost", sans-serif;
    padding: 0;
    margin: 0;
    width: 100%;
    font-size: 20px;
    color: var(--text-color);
    line-height: 1.5;
    box-sizing: border-box;

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

body.no-scroll {
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6, p, span, div, main, section, header, footer, ol, ul, li {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

a, button {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* Global styles */
:root {
    --main-alternative-color: #F5C236;
    --lightblue-color: #038796;
    --second-alternative-color: #7E50CE;
    --text-color: #000;
    --background-color: #000;
    --white-color: #fff;
    --light-grey-color: #F2F2F2;
    --neutral-grey-color: #D9D9D9;
    --middle-grey-color: #CDCDCD;
    --grey-color: #5A5A5A;
    --dark-grey-color: #3A3A3A;
    --cell-padding-x: 40px;

    @media (max-width: 768px) {
        --cell-padding-x: 20px;
    }
}

h1 {
    font-size: 96px;
    font-weight: 700;
    line-height: 1.2;

    @media (max-width: 768px) {
        font-size: 50px;
    }
}

h3 {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.5;
    padding-bottom: 20px;

    @media (max-width: 768px) {
        font-size: 28px;
    }
}

h4 {
    font-size: 28px;
    padding-bottom: 20px;

    @media (min-width: 768px) {
        font-size: 32px;
    }
}

h5 {
    font-size: 20px;
    line-height: 1.5;
    font-weight: 700;
}

.content {
    max-width: 1400px;
    margin: 0 auto;
}

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

/* Buttons */
.button {
    border: 1px solid currentColor;
    color: inherit;
    padding: 10px 32px;
}

.button--rounded {
    border-radius: 220px;
}

.button--gradient {
    max-width: 170px;
    position: relative;
    padding: 10px 32px;
    color: #FFF;
    box-sizing: border-box;
    white-space: nowrap;
    background: #000;
    background-clip: padding-box;
    border: solid 1px transparent;

    &::before {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        z-index: -1;
        margin: -1px;
        box-sizing: border-box;
        border-radius: inherit;
        background: -webkit-linear-gradient(0deg, var(--second-alternative-color), var(--main-alternative-color));
    }
}

.button--gradient-lines {
    position: relative;
    padding: 10px 0;
    color: #FFF;
    box-sizing: border-box;
    white-space: nowrap;;
    background-clip: padding-box;
    border: none;
    border-radius: inherit;
    text-align: center;
    font-size: 20px;
    font-weight: 600;

    &::before {
        content: '';
        position: absolute;
        top: -1px;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(
            to right,
            var(--second-alternative-color),
            var(--main-alternative-color)
        );
    }

    &::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(
            to right,
            var(--second-alternative-color),
            var(--main-alternative-color)
        );
    }
}

/* Text gradients */
.text-blue-gradient {
    display: inline-block;
    background: -webkit-linear-gradient(0deg, var(--lightblue-color), var(--second-alternative-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Using for text with a yellow-gradient effect */
em {
    display: inline-block;
    background: -webkit-linear-gradient(0deg, var(--second-alternative-color), var(--main-alternative-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: normal;
}

.gradient-underline {
    background: linear-gradient(to right, #6a0dad, #d39d66);
    background-size: 100% 7px;
    background-repeat: repeat-x;
    background-position: bottom;
    padding-bottom: 8px;
}

/* Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: initial;
    justify-content: space-between;
    box-sizing: border-box;
}

.grid-item-4 {
    grid-column: span 4;
}

.grid-item-6 {
    grid-column: span 6;
}

.grid-item-8 {
    grid-column: span 8;
}

@media (max-width: 768px) {
    .grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-item-4 {
        grid-column: span 4;
    }

    .grid-item-6 {
        grid-column: span 4;
    }

    .grid-item-8 {
        grid-column: span 4;
    }
}

/* Info banner */
.info-banner-container {
    &:empty { display: none; }
    background-color: var(--main-alternative-color);
    padding: 25px 0;
    padding-left: var(--cell-padding-x);
    padding-right: var(--cell-padding-x);
    border-bottom: 1px solid var(--background-color);
    position: relative;
    z-index: 5000;

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

        .info-banner-text {
            color: var(--text-color);
        }

        .info-banner-button {
            flex-shrink: 0;
            display: inline-block;
        }
    }

    &.violet-background {
        background-color: var(--second-alternative-color);
    }

    @media (max-width: 768px) {
        .content {
            flex-wrap: wrap;

            .info-banner-text {
                font-size: 16px;
                padding-bottom: 20px;
            }

            .info-banner-button {
                a {
                    font-size: 16px;
                }
            }
        }
    }
}

/* Header */
.background-image {
    background-image: url('/src/img/background-image.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    color: var(--white-color);
}

.header {
    padding: 45px var(--cell-padding-x) 30px var(--cell-padding-x);

    .header-container {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 30px;
        justify-content: space-between;

        .logo {
            svg path {
                fill: var(--white-color) !important;
            }
        }

        nav {
            display: flex;
            justify-content: flex-end;

            ul {
                display: flex;
                justify-content: space-between;
                flex-grow: 1;
                flex-wrap: wrap;
                row-gap: 10px;
                column-gap: 10px;
                padding-left: 0;
                padding-right: 0;
                list-style: none;
                max-width: 520px;
            }

            @media (max-width: 900px) {
                display: none;
            }
        }

        .header-buttons {
            position: relative;
            z-index: 10;
            justify-self: end;

            .open-menu {
                display: none;
            }
        }

        @media (max-width: 1080px) {
            grid-template-columns: 1fr 1fr;
            gap: 10px;

            .logo {
                svg {
                    width: 170px;
                }
            }

            nav {
                display: none;
                order: 3;
            }

            .header-buttons {
                order: 0;
                justify-self: end;
                display: flex;
                gap: 35px;
                align-items: center;

                .button {
                    padding: 8px 26px;
                    font-size: 18px;

                    @media (max-width: 600px) {
                        display: none;
                        font-size: 16px;
                    }
                }

                .open-menu {
                    display: block;
                }
            }
        }
    }
}

.main-title {
    padding: 100px var(--cell-padding-x);

    .main-title-container {
        h1 {
            max-width: 70%;
        }

        img {
            display: block;
            align-items: center;
            margin: 0 auto;
            padding-top: 50px;
        }
    }
}

/* Benefits */
.benefits-section {
    .benefits-container {
        overflow: hidden;
        border: 1px solid var(--background-color);

        .benefit-item-wrapper {
            display: grid;
            grid-template-columns: subgrid;
            grid-column: 1 / -1;

            @media(max-width: 1080px) {
                &:first-child {
                    border-bottom: 1px solid var(--background-color);
                }
            }

            .benefit-item {
                align-self: center;
                overflow: hidden;

                h3, p {
                    padding: 0px 100px;
                }

                p {
                    padding-bottom: 10px;

                    &:last-child {
                        padding-bottom: 0;
                    }
                }

                .cluster {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    grid-template-rows: 310px 310px;
                    border-left: 1px solid var(--background-color);
                    border-bottom: 1px solid var(--background-color);
                    overflow: hidden;

                    .cluster-background {
                        grid-column: 1 / span 2;
                        grid-row: 1 / span 2;
                        background: url(../img/hands.png);
                        background-repeat: no-repeat;
                        background-size: cover;
                        background-position: center top;
                    }

                    .cluster-image {
                        grid-column: 1;
                        grid-row: 1;
                        background-image: url(../img/hello.png);
                        background-repeat: no-repeat;
                        background-size: cover;
                        background-position: center;

                        &.key {
                            background-image: url(../img/key.png);
                        }
                    }

                    .cluster-yellow {
                        grid-column: 2;
                        grid-row: 1;
                        background-color: rgba(245, 194, 54, 0.8);                }

                    .cluster-text {
                        grid-column: 1;
                        grid-row: 2;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        text-align: center;
                        background-color: rgba(126, 80, 206, 0.8);
                        border-top: 1px solid var(--background-color);
                        font-size: 36px;
                        font-weight: 600;
                        color: var(--main-alternative-color);
                    }

                    .cluster-right-bottom {
                        grid-row: 2;
                        grid-column: 2;
                        background: linear-gradient(
                            to right,
                            color-mix(in srgb, var(--second-alternative-color) 90%, transparent),
                            color-mix(in srgb, var(--main-alternative-color) 90%, transparent)
                        );
                        border-top: 1px solid var(--background-color);
                        border-left: 1px solid var(--background-color);
                    }

                    @media(max-width: 1080px) {
                        border-bottom: none;
                        grid-template-columns: 1fr;

                        .cluster-yellow, .cluster-right-bottom {
                            display: none;
                        }
                    }

                    @media(max-width: 768px) {
                        grid-template-columns: repeat(2, 1fr);
                        grid-template-rows: 1fr 1fr;
                        border-bottom: 1px solid var(--background-color);


                        .cluster-yellow, .cluster-right-bottom {
                            display: block;
                        }

                        > * {
                            aspect-ratio: 1 / 1;
                        }
                    }
                }

                &.keys {
                    padding-left: 0;

                    .cluster {
                        border: none;
                        border-top:  solid var(--background-color);
                        border-right: 1px solid var(--background-color);
                    }

                    @media(max-width: 768px) {
                        .cluster {
                            border-top: none;
                            border-bottom: 1px solid var(--background-color);
                        }

                    }
                }

                @media(max-width: 1080px) {
                    &:first-child {
                        grid-column: span 8;
                    }

                    &:last-child {
                        grid-column: span 4;
                    }

                    &.partner-image {
                        grid-column: span 4;
                    }

                    &.partner-text {
                        grid-column: span 8;
                    }
                }
            }
        }
    }

    @media (max-width: 768px) {
        .benefits-container {
            grid-template-columns: 1fr;

            .benefit-item {
                grid-column: span 1;
                padding: 0;

                h3, p {
                    padding: 10px var(--cell-padding-x) !important;
                }

                &:first-child {
                    grid-column: span 1 !important;
                }

                &:nth-child(2) {
                    order: -1;
                }

                &.partner-image {
                    grid-row: 1;
                }

                &.partner-text {
                    grid-row: 2;
                }
            }
        }
    }
}

/* Header features */
.header-features {
    .header-features-container {
        border-top: 1px solid var(--dark-grey-color);
        align-items: stretch;

        .header-feature {
            padding: 25px 25px 50px 25px;
            border-bottom: none;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            &:first-child {
                border-right: 1px solid var(--dark-grey-color);
            }

            &:last-child {
                border-left: 1px solid var(--dark-grey-color);
            }

            p {
                padding: 20px 0 45px 0;
                max-width: 80%;
            }

            .header-feature-button {
                position: relative;
                z-index: 10;
            }
        }

        @media (max-width: 768px) {
            grid-template-columns: repeat(4, 1fr);
            padding-left: var(--cell-padding-x);
            padding-right: var(--cell-padding-x);

            .header-feature {
                padding-right: 0;
                padding-left: 0;
                border-bottom: 1px solid var(--dark-grey-color);

                p {
                    max-width: 100%;
                }

                &:first-child {
                    border-right: none;
                }

                &:nth-child(2) {
                    padding-left: 0;
                }

                &:last-child {
                    border-left: none;
                }
            }
        }
    }
}

/* Architecture section */
.architecture-section {
    background: linear-gradient(90deg, var(--second-alternative-color), var(--main-alternative-color));
    padding: 55px 0;

    .architecture-content {
        color: var(--white-color);
        text-align: center;

        span {
            display: inline-block;
            padding-bottom: 80px;
        }

        img {
            width: 100%;
        }

        @media (max-width: 768px) {
            span {
                font-size: 16px;
                padding-bottom: 40px;
            }
        }
    }
}

/* Feature section */
.feature-section {
    padding: 70px 0;
    align-items: first baseline;
    padding-left: var(--cell-padding-x);

    .feature-section-title {
        display: flex;

        span, p {
            display: inline-block;
            font-size: 56px;
            font-weight: 700;
            line-height: 120%;
        }

        img {
            width: 128px;
            height: 128px;
            padding-right: 25px;
        }

        &:has(img) {
            align-items: center;
        }
    }

    .feature-section-description {
        p {
            font-weight: 700;
            padding: 0px var(--cell-padding-x) 20px 0;

            &:last-child {
                padding-bottom: 0;
            }
        }
    }

    @media (max-width: 768px) {
        padding-left: var(--cell-padding-x);
        padding-right: var(--cell-padding-x);

        .feature-section-title {
            padding-bottom: 20px;

            span, p {
                font-size: 36px;

                &::after {
                    height: 6px;
                }
            }

            img {
                width: 40px;
                height: 40px;
            }
        }

        .feature-section-description {
            padding-left: 0;

            p {
                padding-top: 20px;

                &:last-child {
                    padding-top: 0;
                }
            }
        }
    }
}

/* Logo grid */
.logo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    position: relative;
    border-top: 1px solid var(--dark-grey-color);

    .label {
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
        background-color: #3A3A3A;
        font-size: 14px;
        color: #BEBEBE;
        padding: 2px 8px;
    }

    & > *:not(.label) {
        display: flex;
        justify-content: center;
        align-items: center;
        aspect-ratio: 1;
        border-bottom: 1px solid var(--dark-grey-color);
        border-left: 1px solid var(--dark-grey-color);
    }

    svg {
        max-width: calc(100% - 20px);
    }
}

/* Info block container */
.info-block-container {
    align-items: initial;
    border: 1px solid var(--background-color);

    .label {
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
        background-color: #3A3A3A;
        font-size: 14px;
        color: #BEBEBE;
        padding: 2px 8px;
    }

    .info-block-left {
        background-color: #000;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .info-block-left-title {
            padding: 45px;
            flex-grow: 1;
            border-left: 1px solid var(--dark-grey-color);
        }
    }

    .info-block-left-content {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        position: relative;
        padding: 50px 0;

        & > *:not(.label) {
            height: 56px;
        }
    }

    .info-block-right {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        div {
            border-top: 1px solid var(--background-color);
            padding: var(--cell-padding-x);
            flex: 1;

            &:first-child {
                border-top: none;
            }

            h4 {
                padding-bottom: 40px;
            }
        }
    }

    @media (max-width: 768px) {
        .info-block-left {
            border-right: none;
        }

        .info-block-right {
            div {
                padding: 20px;

                h4 {
                    padding-bottom: 20px;
                }
            }
        }
    }
}

.info-block-wrapper {
    &.black-bg {
        .info-block-container {
            border-top: 1px solid var(--dark-grey-color);
            border-right: 1px solid var(--dark-grey-color);

            .info-block-right {
                div {
                    border-bottom: 1px solid var(--dark-grey-color);
                    border-left: 1px solid var(--dark-grey-color);
                }
            }
        }
    }
}

/* Features grid */
.features-grid-section {
    padding: 60px var(--cell-padding-x) 0 var(--cell-padding-x);

    .features-grid-container {
        .features-grid {
            border-top: 1px solid var(--dark-grey-color);
            align-items: stretch;

            .feature-item {
                padding: 30px 35px 30px 45px;
                border-bottom: 1px solid var(--grey-color);
                border-right: 1px solid var(--grey-color);

                p {
                    padding-bottom: 10px;
                }

                &:nth-child(3n) {
                    border-right: none;
                }

                &:nth-child(3n+1) {
                    padding-left: 0;
                }

                @media(max-width: 768px) {
                    border-right: none;
                    border-left: none;
                    border-top: none;
                    padding-left: 0;
                    padding-right: 0;

                    &:nth-child(3n+1) {
                        padding-left: 0;
                    }
                }
            }
        }
    }

    @media(max-width: 768px) {
        padding-left: var(--cell-padding-x);
        padding-right: var(--cell-padding-x);
    }
}

/* Slider */
.slider-section {
    background-color: var(--light-grey-color);

    .slider {
        .slider-left-section {
            padding: 100px 0 100px 55px;
            border-right: 1px solid var(--middle-grey-color);

            p {
                padding-bottom: 30px;
                width: 80%;
            }
        }

        .slider-right-section {
            justify-self: center;

            .slide {
                img {
                    width: 100%;
                }
            }
        }
    }

    @media (max-width: 768px) {
        padding: 0;

        .slider {
            .slider-left-section {
                padding-top: 80px;
                padding-left: var(--cell-padding-x);
                padding-bottom: 60px;
                border-right: 0;
            }
        }
    }
}

/* Showcase example section */
.showcase-section {
    padding: 125px 0px 65px 0px;

    .showcase-container {
        .showcase-summary {
            padding-left: 55px;

            .showcase-image {
                display: block;
            }

            .summary-title {
                padding-top: 30px;
            }
        }

        .showcase-image {
            justify-self: end;

            img {
                max-width: 100%;
            }
        }
    }

    @media (max-width: 768px) {
        padding-top: 80px;

        .showcase-container {
            .showcase-summary {
                padding-left: 0;

                .showcase-logo {
                    text-align: center;

                    img {
                        width: 120px;
                    }
                }

                .summary-title {
                    text-align: center;
                    font-size: 28px;
                }
            }

            .showcase-image {
                padding: 30px var(--cell-padding-x) 0 var(--cell-padding-x);
            }
        }
    }
}

/* Quote section */
.quote-section {
    padding: 100px 0;

    .quote-section-container {
        max-width: 1200px;
        box-sizing: border-box;
        margin: 0 auto;
        padding: 80px 0 65px 0;
        width: 70%;

        .quote-text {
            font-size: 32px;
            padding-bottom: 40px;
        }

        .quote-author {
            display: flex;
            align-items: center;
            gap: 35px;

            .quote-image {
                img {
                    width: 128px;
                    height: 128px;
                }
            }
        }
    }

    @media (max-width: 768px) {
        padding: 0;

        .quote-section-container {
            width: 100%;
            padding-left: 20px;
            padding-right: 20px;

            .quote-text {
                font-size: 18px;
                line-height: 150%;
            }

            .quote-author {
                gap: 16px;

                .quote-image {
                    img {
                        width: 80px;
                        height: 80px;
                    }
                }

                .quote-title {
                    font-size: 18px;
                    line-height: 150%;
                }
            }
        }
    }
}

/* Call to action section */
.call-to-action-section {
    padding: 60px var(--cell-padding-x);
    border: 1px solid var(--dark-grey-color);

    .call-to-action-container {
        .call-to-action-info {
            text-align: center;

            a {
                font-weight: 500;
            }
        }

        @media (max-width: 768px) {
            padding-left: 20px;
            padding-right: 20px;
        }
    }
}

/* Question section */
.question-section {
    padding: 60px 0;

    h3 {
        padding-left: var(--cell-padding-x);
        padding-right: var(--cell-padding-x);
    }

    .question-section-wrapper {
        span {
            color: var(--second-alternative-color);
        }

        .thoughts {
            display: flex;
            gap: 40px;
            position: relative;
            z-index: 15;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            scroll-padding: 40px;
            overflow-x: scroll;
            scrollbar-width: none;
            padding: 0px var(--cell-padding-x);

            .thought-wrapper {
                position: relative;
                z-index: 15;
                padding: 4px 0px;
                flex-shrink: 0;

                &:first-child {
                    padding-left: 4px;
                }

                div {
                    scroll-snap-align: center;
                    padding: 28px;
                    background-color: var(--white-color);
                    border-radius: 8px;
                    min-width: 345px;
                    color: var(--text-color);
                    font-weight: 700;

                    &::before {
                        margin: -4px;
                    }
                }

                .button--gradient {
                    white-space: normal;
                }
            }

            &::-webkit-scrollbar {
                display: none;
            }
        }

        @media (max-width: 768px) {
            .thoughts {
                gap: 20px;

                .thought-wrapper {
                    div {
                        padding: 20px;
                        font-size: 18px;
                    }
                }
            }
        }
    }
}

/* Footer */
.footer {
    background-position: left;
    padding: 0px var(--cell-padding-x);

    .footer-container {
        .footer-contacts {
            .footer-contact-card {
                border: 1px solid var(--dark-grey-color);
                border-top: none;
                padding: 30px 0 35px 25px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                p {
                    padding-bottom: 75px;
                    max-width: 70%;
                }

                .footer-contact-card-button {
                    position: relative;
                    z-index: 12;
                }

                &:first-child {
                    border-left: none;
                    padding-left: 0;
                }

                &:last-child {
                    border-right: none;
                }
            }
        }

        .footer-info {
            padding: 30px 0;

            .footer-branding {
                color: var(--grey-color);
            }

            .footer-nav {
                justify-self: end;

                a {
                    color: var(--grey-color);
                    padding-right: 55px;

                    &:last-child {
                        padding-right: 0;
                    }
                }
            }
        }

        @media (max-width: 768px) {
            .footer-contacts {
                .footer-contact-card {
                    border: none;
                    border-bottom: 1px solid var(--dark-grey-color);

                    p {
                        max-width: 100%;
                        padding-bottom: 40px;
                    }

                    &:nth-child(2) {
                        padding-left: 0;
                    }

                    &:last-child {
                       border-bottom: 1px solid var(--dark-grey-color);
                       padding-left: 0;
                    }
                }
            }

            .footer-info {
                .footer-branding {
                    font-size: 16px;
                    text-align: center;
                    order: 2;
                }

                .footer-nav {
                    order: 1;
                    padding-bottom: 40px;
                    justify-self: center;

                    a {
                        padding-right: 30px;
                        font-size: 18px;
                    }
                }
            }
        }
    }
}

/* Blog page */
.blog-post {
    padding: 100px var(--cell-padding-x);
    background-image: url('/src/img/background-image.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    color: var(--white-color);

    h1 {
        margin-bottom: 50px;
    }

    p {
        padding-bottom: 50px;
    }

    img {
        width: 70%;
        display: block;
        margin: 0 auto;
        padding: 50px 0;

        @media(max-width: 768px)  {
            width: 100%;
        }
    }

    section {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 100px;
        margin-bottom: 50px;

        h3 {
            text-transform: uppercase;
        }

        h4 {
            font-size: 26px;
        }

        p {
            padding-bottom: 30px;
        }

        img {
            padding: 0 0 20px 0;
        }

        ol {
            padding: 0px var(--cell-padding-x) 30px var(--cell-padding-x);
        }

        ul {
            padding-left: 40px;
        }

        ul li {
            padding-bottom: 20px;
        }

        @media(max-width: 768px) {
            grid-template-columns: 1fr;
            gap: 20px;
            margin-bottom: 20px;

            h3 {
                padding-bottom: 10px;
            }
        }
    }
}

.impressum {
    padding: 100px var(--cell-padding-x);
}

/* Mobile menu */
.mobile-menu {
    position: fixed;
    left: 0;
    right: 0;
    padding-bottom: 70px;
    padding-left: var(--cell-padding-x);
    padding-right: var(--cell-padding-x);
    background-color: var(--main-alternative-color);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.5s ease, opacity 0.5s ease, visibility 0.5s ease;
    z-index: 5001;
    overflow-y: auto;
}

.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 200px;
    z-index: 2000;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;

    &.active {
        display: block;
    }
}

@media (max-width: 1080px) {
    .mobile-menu.menu-active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;

        .content {
            .menu-header {
                display: grid;
                grid-template-columns: 3fr auto auto;
                align-items: center;
                justify-content: space-between;
                padding: 45px 0;

                .logo svg path {
                    fill: var(--background-color);
                }

                .menu-buttons {
                    .button {
                        background: transparent;
                    }

                    .close-button {
                        justify-self: end;
                        background: transparent;
                        border: none;
                        border-top: 2px solid var(--background-color);
                        border-bottom: 2px solid var(--background-color);
                        padding: 10px 0;
                        font-size: 20px;
                        font-weight: 600;
                        margin-left: 35px;
                    }
                }
            }

            .menu-content {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 40px;

                .menu-item {
                    a {
                        padding-bottom: 5px;
                    }
                }
            }
        }
    }
}

@media (max-width: 768px) {
    .mobile-menu.menu-active {
        height: 85vh;

        .content {
            .menu-header {
                padding: 45px 0px;

                .button {
                    display: none;
                }
            }

            .menu-content {
                gap: 16px;
                grid-template-columns: 1fr;
                padding-bottom: 45px;

                .menu-item {
                    h3 {
                        font-size: 25px;
                    }

                    p {
                        font-size: 18px;
                    }

                    &:last-child {
                        padding-bottom: 70px;
                    }
                }
            }
        }
    }
}

/* Mobile menu animation */
.menu-content .menu-item {
    transform: translateY(50px);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.menu-content .menu-item:nth-child(1) { transition-delay: 0.1s; }
.menu-content .menu-item:nth-child(2) { transition-delay: 0.2s; }
.menu-content .menu-item:nth-child(3) { transition-delay: 0.3s; }
.menu-content .menu-item:nth-child(4) { transition-delay: 0.4s; }
.menu-content .menu-item:nth-child(5) { transition-delay: 0.5s; }
.menu-content .menu-item:nth-child(6) { transition-delay: 0.6s; }

.menu-active .menu-content .menu-item {
    transform: translateY(0);
    opacity: 1;
}