/** -- Begin of textWithImageOnRight ------------------------------------------------------------------------------- **/
#textWithImageOnRight .row > div {
    flex-direction: row;
    column-gap: 30px;
}

#textWithImageOnRightDivText {
    padding-bottom: 0;
}
/** -- End of textWithImageOnRight --------------------------------------------------------------------------------- **/

/** -- Begin of logosSlider ---------------------------------------------------------------------------------------- **/
#logosSlider li {
    flex: 1 1 calc(50% - 10px);
    min-width: calc(50% - 10px);
    max-width: calc(50% - 10px);
}

#logosSlider ul:has(> :nth-child(2)):not(:has(> :nth-child(3))) li {
    animation: none;
}
#logosSlider ul:has(> :nth-child(3)):not(:has(> :nth-child(4))) li {
    animation: logosSlider2 8s infinite;
}
#logosSlider ul:has(> :nth-child(4)):not(:has(> :nth-child(5))) li {
    animation: logosSlider3 12s infinite;
}
#logosSlider ul:has(> :nth-child(5)) li {
    animation: logosSlider4 16s infinite;
}
/** -- End of logosSlider ------------------------------------------------------------------------------------------ **/

/** -- Begin of bootstrap ------------------------------------------------------------------------------------------ **/
/** ---- Header ---------------------------------------------------------------------------------------------------- **/
#toggleHamburger {
    display: none;
}

header nav {
    display: block;
    max-height: revert;
    width: fit-content;
    position: revert;
    top: revert;
    right: revert;
}

header li,
header li:last-child {
    display: inline-block;
    border: none;
}

/** ---- footer ---------------------------------------------------------------------------------------------------- **/
footer ul.topLevel {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: flex-start;
}

footer ul.topLevel > li,
footer ul.topLevel > li > div,
footer ul.secondLevel {
    width: fit-content;
}
/** -- End of bootstrap -------------------------------------------------------------------------------------------- **/

/** -- Begin of introduction --------------------------------------------------------------------------------------- **/
#intro.container {
    height: calc(100vh - 58px);
}

#intro h1 {
    font-size: 50px;
}

/** -- Begin of introduction specific ----------------------------------------------------------------------------- **/
#intro.container {
    position: relative;
    padding: 0;
    height: auto;
}

#intro .row > div {
    padding: 55px 20% 25px 55px;
}
/** -- End of introduction ----------------------------------------------------------------------------------------- **/

/** -- Begin of products ------------------------------------------------------------------------------------------- **/
#products ul {
    flex-direction: row;
    gap: 15px 16px;
}

#products li {
    flex: 1 1 calc(50% - 8px);
    max-width: calc(50% - 8px);
}
/** -- End of products --------------------------------------------------------------------------------------------- **/

body {
    background-image: url(/scf_assets/project/img/hero_bg.webp);
    background-repeat: no-repeat;
    background-size: 129%;
    background-position: 35% 0;
}

#toggleHamburger {
    display: inline;
}

header nav {
    position: absolute;
    width: 100vw;
    top: 0;
    right: 0;
    max-height: 0;
}

header li,
header li:last-child {
    display: block;
}