/* Fonts */
@import url('assets/css/fonts/InstrumentSans/instrument-sans.css');
@import url('assets/css/fonts/IvyOraDisplay/ivy-ora-display.css');
@import url('assets/css/fonts/IvarDisplay/ivar-display.css');

/* Bootstrap */
@import url('assets/css/bootstrap.min.css');

body {
    font-family: "Instrument Sans", sans-serif !important;
    font-size: 16px;
}

#screen-size-check::after {
    content: "desktop";
}

.full-page {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.container {
    max-width: 1220px !important;
}

.svg {
    .header-logo {
        max-width: 223px;
        width: 100%;
    }

    .illustration {
        max-width: 400px;
        width: 100%;
    }
}

:root {
    --header-offset: 100px;
}

html {
    scroll-behavior: smooth;
}

.anchor-target {
    scroll-margin-top: var(--header-offset);
}

#precomy.anchor-target {
    scroll-margin-top: calc(var(--header-offset) + 70px);
}

header {
    border-bottom: 1px solid #DCDCDC !important;
    position: sticky;
    top: 0;
    z-index: 9999;

    .row {
        width: max-content !important;
    }

    .header-logo-compact {
        display: none;
    }

    .mobile-menu-logo {
        display: none;
    }

    .mobile-spacer {
        display: none;
    }

    .container {
        .navbar-collapse {
            flex-grow: 0;
        }
    }

}

.smaller-bottom-pad {
    padding-bottom: 52px !important;
    border-top: unset !important;
}

.nav-link {
    color: black !important;
    font-weight: 400 !important;
}

.nav-link.active {
    font-weight: bold !important;
}


.btn-success {
    background-color: #ccef89 !important;
    color: black !important;
    font-size: 18px;
    padding: 6px 36px 6px 36px !important;
    font-weight: 500 !important;
    font-family: "IvyOra Display", sans-serif !important;
    border: none;
}

.btn-success:hover {
    background-color: #000000 !important;
    color: #ccef89 !important;
}

.section {
    border-top: 1px solid #DCDCDC !important;
    padding: 72px 0 72px 0 !important;
}

.no-border {
    border-top: unset !important;
}

h1 {
    font-family: "IvyOra Display", sans-serif;
    font-size: 47px;
    font-weight: 500;
    line-height: 60px;
}

.section-nio-animation {
    .left {
        align-content: center;

        span {
            font-family: "IvyOra Display", sans-serif !important;
            font-size: 95px !important;
            margin-bottom: 0 !important;
            line-height: 95px !important;
            font-weight: 500 !important;
        }

        #nio-keywords {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            overflow: hidden;
            padding-top: 88px;
            padding-bottom: 64px;
        }

        .kw {
            margin: 0;
            font-family: "Ivar Display", serif;
            font-weight: 600;
            font-size: clamp(36px, 8vw, 64px);
            line-height: 1.1
        }

        #kw-n {
            color: #DCDCDC
        }

        #kw-i {
            color: #000000
        }

        #kw-o {
            color: #DCDCDC
        }


        #nio-keywords.nio-ghost .kw {
            position: relative;
            color: #DCDCDC;
        }

        #nio-keywords.nio-ghost .kw::after {
            content: attr(data-reveal);
            position: absolute;
            left: 0;
            top: 0;
            color: #000;
            white-space: inherit;
            pointer-events: none;
        }

        p {
            font-family: "Instrument Sans", sans-serif !important;
            font-weight: 400 !important;
            color: #696A6A !important;
            line-height: 26px !important;
            font-size: 18px !important;
            padding: 0 144px 48px 0 !important;
        }
    }

    .right {
        text-align: center;
    }
}

.section-poradenstvo {
    .right {

        p {
            font-family: "Instrument Sans", sans-serif !important;
            font-weight: 400 !important;
            font-size: 20px !important;
            line-height: 28px !important;
            padding: 40px 60px 0 0 !important;
            color: #474747 !important;
        }
    }

    .left {
        text-align: center;

        .mockup-s-tabletom {
            width: 30rem;
            height: auto;
            clip-path: polygon(64px 0, 100% 0, 100% 100%, 0 100%, 0 64px);
        }

        .img-deco {
            position: relative;
            display: inline-block;
        }

        .img-deco img {
            display: block;
        }

        .img-deco .br {
            display: block;
            position: absolute;
            right: 0;
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            pointer-events: none;
        }

        .img-deco .br--bot {
            width: 22.35%;
            height: 8.1%;
            bottom: 0;
            background: #fff;
        }

        .img-deco .br--mid {
            width: 22.35%;
            height: 15.5%;
            bottom: 0;
            background: #CCEF89;
        }

        .img-deco .br--top {
            width: 14.1%;
            height: 5.3%;
            right: 22.35%;
            bottom: 15.5%;
            background: #E7F5C7;
        }

    }
}

.section-card {
    display: flex;

    .nio-card-column {
        display: flex;
        flex-direction: column;
        gap: 16px;
        height: 500px;

        nio-card {
            flex: 1 1 0;
            min-height: 0;
        }
    }

    .nio-card-column,
    .nio-card-column nio-card {
        overflow-anchor: none;
    }

    .section-title {

        margin-bottom: 60px;
        margin-top: 60px;
        text-align: center;

        h2 {
            font-family: "IvyOra Display", sans-serif !important;
            font-weight: 400;
            line-height: 50px;
            font-size: 31px;
        }
    }
}

.section-sap-hana {
    display: flex;
    align-content: space-between;

    .left {

        h1 {
            margin-bottom: 0 !important;
        }

        p {
            font-family: "Instrument Sans", sans-serif !important;
            font-weight: 400 !important;
            line-height: 28px !important;
            font-size: 20px !important;
            padding: 40px 0 0 0 !important;
            color: #474747 !important;
        }
    }

}

.section-graph {
    .neo__timeline-wrapper {
        display: flex;
        position: relative;
        align-items: stretch;
    }

    nio-timeline-graph {
        width: 200px;
        flex-shrink: 0;
        position: relative;
        height: auto;
        overflow: visible;
    }

    .nio__timeline-content {
        flex-grow: 1;
        padding-left: 44px;
    }
}

.section-ces {
    display: flex;
    align-items: center;
    position: relative;

    .bg-split {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 0;

        .black-bg {
            background-color: black;
            height: 100%;
        }

        .green-bg {
            background-color: #CCEF89;
            height: 100%;
        }

        .row {
            height: 100%;
        }
    }

    .content-layer {
        position: relative;
        z-index: 1;
    }

    .left {
        color: white;
        padding-top: 60px;
        padding-right: 60px;
        padding-bottom: 30px;
        display: flex;
        flex-direction: column;
        gap: 24px;

        p {
            font-family: "Instrument Sans", sans-serif;
            font-size: 18px;
            line-height: 26px;
            font-weight: 400;
        }

        .alt-title {
            color: #D2DDC5 !important;
            line-height: 23px;
        }

        .ces-listing {
            height: 100%;
            display: flex;
            align-items: center;

            h2 {
                font-family: "Instrument Sans", sans-serif;
                font-size: clamp(18px, 5.5vw, 22px);
                color: #CCEF89;
                font-weight: 200;
            }

            ul {
                display: flex;
                flex-direction: column;
                gap: 2rem;
                margin: 0;
                padding-left: 0;

                li {
                    list-style: none;
                    position: relative;
                    padding-left: 1.5rem;
                }

                li::before {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 0.35em;
                    width: 0.8rem;
                    height: 0.8rem;
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: contain;
                }

                .rhombus-marker::before {
                    background-image: url("./assets/svg/rhombus.svg");
                }

                .circle-marker::before {
                    background-image: url("./assets/svg/circle.svg");
                }

                .empty-square-marker::before {
                    background-image: url("./assets/svg/empty-sqaure.svg");
                }

                .filled-square-marker::before {
                    background-image: url("./assets/svg/filled-square.svg");
                }
            }
        }
    }

    .right {
        padding: 60px;

        #illustracia2mobil {
            display: none;
        }

        #illustracia2 {
            width: 30rem;
            height: auto;
        }
    }
}

.section-preco-my {
    padding-bottom: 60px;

    h1 {
        padding-bottom: 30px;
    }

    nio-accordion:last-of-type::part(root) {
        border-bottom: 0 !important;
    }
}

.section-contact-us {

    .left {

        h1 {
            padding-bottom: 42px;
        }

        p {
            font-family: "Instrument Sans", sans-serif;
            font-size: 18px;
            color: #474747;
            line-height: 24px;
            font-weight: 400;
        }
    }

    .right {

        form {
            padding-top: 92px;
        }

        label {
            font-family: "Instrument Sans", sans-serif;
            font-size: 12px;
            line-height: 24px;
            font-weight: 400;
            color: #474747;
        }

        input, textarea {
            border-top: unset;
            border-right: unset;
            border-left: unset;

            border-radius: 0;

            border-bottom: 1px solid black;
        }

        input:focus, textarea:focus {
            box-shadow: none;
        }

        button {
            margin-top: 24px;
        }

        textarea {
            height: 200px;
            resize: none;
        }
    }
}

.section-footer {
    display: flex;
    align-items: center;
    position: relative;
    padding: 48px;
    font-family: "Instrument Sans", sans-serif;
    font-weight: 500;

    .row {
        align-content: flex-end;
    }

    .footer-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        background-color: #56727A;
    }

    .footer-green-text {
        color: #CCEF89
    }

    .content-layer {
        position: relative;
        z-index: 1;


        .middle {
            text-align: center;
            margin-top: auto;

            p {
                line-height: 8px;
                font-size: 12px;
            }

            img {
                padding-bottom: 12px;
            }
        }

        .right {
            display: flex;
            justify-content: right;

            .right-text-wrapper {
                padding-top: 12px;
                text-align: left;

                p {
                    line-height: 12px;
                    font-size: 12px;
                    margin-bottom: 0.5rem;
                }

                .footer-green-text {
                    margin-bottom: 1rem;
                }
            }


        }

    }

    .content-layer {
        display: flex;
        justify-content: center;
    }

    .footer-grid {
        display: flex;
        align-items: baseline;
        justify-content: center;
        padding: 24px 0;
    }

    .footer-cell {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 16px;
        width: 20rem;
        max-width: 100%;
    }

    .footer-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
    }

    .footer-text {
        font-size: 12px;
        line-height: 1.6;
        font-family: "Instrument Sans", sans-serif;
        font-weight: 500;
        color: #CCEF89;
        text-align: center;
    }

    .footer-logo-cell {
        p {
            margin-top: 0.7rem;
        }
    }

    .footer-text a {
        text-decoration: none;
        color: #CCEF89;
    }

    .footer-divider {
        align-self: stretch;
        width: 1px;
        background: rgba(0, 0, 0, 1);
        margin: -2rem 0;
    }

    .footer-icon img, .footer-icon svg {
        display: block;
        width: 20px !important;
        height: 20px !important;
    }

}