#concept #banner {
        background-image: url("../images/concept/concept-banner-i3UE6Y_.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        height: 750px;
        background-position: center;
    }

#concept #banner .content {
        height: 100%;
        text-align: right;
        align-content: center;
        margin-right: var(--t-space-12);
        color: var(--t-color-white);
    }

#concept #intro {
        margin: var(--t-space-8) 0;
    }

#concept #manual h3{
        margin-bottom: var(--t-space-5);
    }

#concept #manual .img-container {
        text-align: center;
    }

#concept #manual img {
        max-height: 420px;
    }

#concept #conception {
        border: var(--t-border-width-1) solid var(--t-color-red);
        padding: var(--t-space-4) var(--t-space-7);
        color: var(--t-color-white) !important;
        cursor: pointer;
        font-size: var(--t-text-2xl);
        font-family: var(--t-font-base);
        font-weight: var(--t-weight-regular);
        transition: all var(--t-duration-slow);
        background-color: var(--t-color-red);
        text-decoration: none;
        text-transform: uppercase;
        display: inline-block;
        margin-bottom: 6px;
    }

#concept #conception:hover {
        background-color: var(--t-color-white);
        color: var(--t-color-red) !important;
    }

#concept .img-container {
        margin-top: var(--t-space-7);
    }
/* SCROLLER */

#concept :root {
        --cards: 4;
        --cardHeight: 60vh;
        --cardTopPadding: 5.5em;
        --cardMargin: 8vw;
    }

@media (max-width: 1200px) {

        #concept :root {
            --cardHeight: 90vh;
        }

        #concept .cards-container {
            margin-bottom: 0!important;
        }

        #concept .cards-indicators {
            margin-bottom: 50%!important;
        }
    }

#concept .cards-container {
        position: relative;
        margin-bottom: 200px;
    }

#concept .cards-indicators {
        text-align: end;
        position: sticky;
        display: none;
        float: right;
        top: 38%;
        margin-bottom: 15%;
        padding-left: 0;
        transform: translateY(-50%);
        z-index: var(--t-z-dropdown);
    }

#concept .cards-indicators .circle{
        cursor: pointer;
        height: 8px;
        width: 8px;
        border-radius: var(--t-radius-full);
        background: var(--t-color-black);
        margin-bottom: 7px;
        transition: background-color var(--t-duration-fast) var(--t-ease-in-out);
    }

#concept .cards-indicators .circle.active{
        background-color: var(--t-color-red);
    }

#concept .cards-indicators li:hover {
        transition: background-color var(--t-duration-fast) var(--t-ease-in-out);
        background-color: var(--t-color-red);
    }

#concept #cards {
        list-style: none;
        position: relative;
        padding-left: 0;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(var(--cards), var(--cardHeight));
        gap: var(--cardMargin);
    }

#concept #card1 {
        --index: 1;
    }

#concept #card2 {
        --index: 2;
    }

#concept #card3 {
        --index: 3;
    }

#concept #card4 {
        --index: 4;
    }

#concept .card-manual {
        position: sticky;
        top: 0;
        padding-top: var(--cardTopPadding);
    }

#concept .card-manual .row {
        box-sizing: border-box;
        padding: var(--t-space-7);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all var(--t-duration-slow);
        background: var(--t-color-white);
    }