/** -- Begin of scfWorkflow ---------------------------------------------------------------------------------------- **/
#scfWorkflow #illustrationContainer {
    width: 820px;
    margin: 0 auto;
}

#scfWorkflow #illustration {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

#scfWorkflow li:nth-child(1) {
    padding: 0 22px 0 0;
}

#scfWorkflow li:nth-child(2) {
    padding: 0 11px 0;
}

#scfWorkflow li:nth-child(3) {
    padding: 0 0 0 22px;
}

#scfWorkflow li p {
    letter-spacing: -0.1px;
}
/** -- End of scfWorkflow ------------------------------------------------------------------------------------------ **/

/** -- Begin of ourCustomers --------------------------------------------------------------------------------------- **/
#ourCustomers li {
    --width: calc(calc(100% / 3) - 12px);
    flex: 1 1 var(--width);
    max-width: var(--width);
}
/** -- End of ourCustomers ----------------------------------------------------------------------------------------- **/

/** -- Begin of askForQuote ---------------------------------------------------------------------------------------- **/
#askForQuote form {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 20px;
}

#askForQuote form > div {
    flex: 1 1 calc(50% - 20px);
}

#askForQuote form > div:has(textarea) {
    flex: 1 1 100%;
}
/** -- End of askForQuote ------------------------------------------------------------------------------------------ **/

/** -- Begin of scfImgLeftSocialShareRight ------------------------------------------------------------------------- **/
#scfImgLeftSocialShareRight .row {
    gap: 30px;
}

#scfImgLeftSocialShareRight .row > div:has(> img) {
    flex: 1 1 65%;
}

#scfImgLeftSocialShareRight .row > div:not(:has(> img)) {
    flex: 1 1 calc(35% - 30px);
    text-align: center;
}
/** -- End of scfImgLeftSocialShareRight --------------------------------------------------------------------------- **/

/** -- Begin of contact -------------------------------------------------------------------------------------------- **/
#contact form {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 20px;
}

#contact form > div {
    flex: 1 1 calc(33% - 20px);
}

#contact form > div:has(textarea) {
    flex: 1 1 100%;
}
/** -- End of contact ---------------------------------------------------------------------------------------------- **/

/** -- Begin of scfcta --------------------------------------------------------------------------------------------- **/
#scfcta {
    display: flex;
}
#scfcta .textContainer,
#scfcta .buttonsContainer {
    font-size: var(--font-size);
    width: 50%;
    height: 100%;
    float: left;
    display: inline-block;
    vertical-align: middle;
}

#scfcta .buttonsContainer,
#scfcta .textContainer {
    padding-right: 15px;
}

#scfcta .buttonsContainer {
    padding-top: 32px;
}

#scfcta .buttonsContainer .btn {
    margin: 5px 0;
}
/** -- End of scfcta ----------------------------------------------------------------------------------------------- **/

/** -- Begin of scfslider ------------------------------------------------------------------------------------------ **/
#scfslider h3 {
    top: calc(50% - 27px);
    left: calc(25% + 22.5px);
    transform: translate(-50%, -50%);
    font-size: 37px;
    width: calc(50% - 45px);
}

#scfslider p {
    top: calc(50% + 130px);
    left: calc(25% + 22.5px);
    transform: translate(-50%, -50%);
    width: calc(50% - 45px);
}

#scfslider .illustration {
    left: calc(75% - 22.5px);
    width: calc(50% - 45px);
    height: auto;
    top: 50%;
    transform: translate(-50%, -50%);
}
/** -- End of scfslider -------------------------------------------------------------------------------------------- **/

#toggleHamburger {
    display: none;
}

header nav {
    max-height: initial;
    width: fit-content;
    position: initial;
}

footer .row > div {
    flex: 0 0 420px;
}

header li a {
    color: var(--color-black);
    font-size: 14px;
    text-transform: uppercase;
    padding: 17px;
}

footer ul.topLevel {
    flex: 1;
}

footer ul.topLevel > li:first-child {
    flex: 1 1 50%;
    padding-left: 50px;
}

footer ul.topLevel > li:last-child {
    flex: 0 0 50%;
    width: fit-content;
    max-width: fit-content;
    padding-right: 50px;
}

#FormForQuote .form-group:has(.btn) {
    float: left;
}
