:root {
    --main-color: #000000;
    --second-color: #F36F21;
    --third-color: #E0EAF3;
    --btn-hover-idle: black;
    --btn-hover-color: rgb(26, 26, 26);
}

::-webkit-scrollbar {
    width: 1vw;
}

::-webkit-scrollbar-track {
    background-color: #ffffff;
}

::-webkit-scrollbar-thumb {
    background-color: #b3b3b3;
    border: 0.3vw solid #ffffff;
    border-radius: 5vw;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

/* Global style */
body {
    max-width: 100vw;
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    -webkit-text-size-adjust: none;
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 0;
    background-color: var(--third-color);
}

button {
    cursor: pointer;
}

.roundedButton {
    display: block;
    border-radius: 50%;
    border: 3px solid var(--main-color);
}

h1 {
    font-size: 50px;
    font-weight: 700;
}

h1 span {
    font-weight: 700;
}

h2 {
    font-weight: 700;
}

h3 {
    font-weight: bold;
}

.text {
    font-size: 15px;
}

.filterSecondColor {
    filter: invert(45%) sepia(51%) saturate(837%) hue-rotate(340deg) brightness(105%) contrast(97%);
}

.centerText {
    text-align: center;
}

.whiteText {
    color: white;
}

.blackText {
    color: black;
}

.importantText {
    color: var(--second-color);
}

.image-placeholder {
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.widthFitContent {
    width: fit-content;
}

.globalVerticalPadding {
    padding: 80px 0;
}

.navigation * {
    pointer-events: none;
}

/* END Global style */

.headerDesktopTopDiv {
    display: flex;
    gap: 100px;
    margin-bottom: 100px;
}

.headerMobileTopDiv {
    display: none;
    z-index: 2;
}

.headerMiddleMainDiv {
    width: 100%;
}

.headerMiddleDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 100px;
    margin-top: 100px;
}

.headerMiddleDivContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: -185px 0;
}

.header-image-placeholder {
    width: 60px;
    height: auto;
}

.header-illustration-placeholder {
    width: 80%;
    height: auto;
}

.menuButton {
    font-weight: 700;
    border: none;
    background-color: transparent;
    text-transform: uppercase;
}

.menuButton:hover {
    border-bottom: 2px solid var(--second-color)
}

.importantButton {
    height: 60px;
    padding: 6px 30px;
    font-weight: 700;
    background-color: var(--second-color);
    color: whitesmoke;
    border: none;
    border-radius: 30px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    z-index: 1;
}

.importantButton:hover {
    color: var(--second-color);
    background-color: var(--main-color);
}

.references {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--main-color);

}

.pageContent {
    margin: 0 15%;
}

.formations {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.carouselView {
    width: 100%;
}

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

.carouselDesktopNavButton {
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--second-color);
}

.carouselMobileNavButton {
    display: none;
}

.formationItem {
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    cursor: pointer;
}

.formationItemTopDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.formationItemNumberContainer {
    height: 60px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--second-color);
}

.formationItemNumber {
    font-size: 35px;
    font-weight: bold;
}

.formationItemTitle {
    font-weight: bold;
}

.formationItemText {
    padding-left: 20px;
    display: flex;
    flex-direction: column;
}

.formationItemText span::first-letter {
    font-size: 24px;
    font-weight: bold;
    color: var(--second-color);
}

.formationItemText span {
    color: var(--main-color);
    font-size: 20px;
    font-weight: bold;
}

.carousel {
    position: relative;
    width: 100%;
    margin: 20px 0;
    display: flex;
    align-items: center;
}

.gallery {
    position: relative;
    width: 100%;
    padding: 20px;
    display: flex;
    overflow: hidden;
}

.gallery ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    transition: transform 250ms;
    font-size: 0;
}

.gallery li {
    display: inline-block;
}

.presentation {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.presentationContainer {
    display: flex;
    align-items: center;
}

.presentationText {
    display: flex;
    flex-direction: column;
}

.presentation-image-placeholder {
    width: 350px;
    height: auto;
}

.presentation-image-placeholder img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
}

footer {
    display: flex;
    padding: 85px;
    align-items: center;
    justify-content: space-around;
    background-color: var(--main-color);
}

footer .text {
    font-size: 13px;
    font-weight: 300;
}

.footer_company {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-image-placeholder {
    width: 150px;
    height: auto;
}

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

.footermenuButton {
    font-weight: 700;
    border: none;
    background-color: transparent;
    text-transform: uppercase;
}

.footermenuButton:hover {
    border-bottom: 2px solid var(--second-color)
}

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

.footer_contactItem {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.footer-phone-image-placeholder {
    width: 20px;
    height: auto;
}

.footer-mail-image-placeholder {
    width: 20px;
    height: auto;
}

.footer-linkedin-image-placeholder {
    width: 20px;
    height: auto;
}

@media screen and (max-width: 1024px) {

    h1 {
        font-weight: 700;
    }

    h1 span {
        font-weight: 700;
    }

    h2 {
        font-weight: 700;
    }

    h3 {
        font-weight: bold;
    }

    .pageContent {
        margin: 0 12%;
    }

    .globalVerticalPadding {
        padding: 35px 0;
    }

    footer {
        flex-direction: column;
        gap: 30px;
        padding: 45px;
    }

    footer .text {
        font-size: 12px;
    }

    .headerDesktopTopDiv {
        display: none;
    }

    .headerMobileTopDiv {
        position: fixed;
        right: 40px;
        display: flex;
    }

    .headerMiddleDivContent {
        margin: -125px 0;
    }

    .menuMobilePanel {
        position: absolute;
        height: fit-content;
        width: 95vw;
        top: 30px;
        right: -40px;
        padding: 12px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        border-radius: 20px 0 0 20px;
        background: #d8d8d8fa;
        transform: translateX(0vw);
        transition: transform 0.2s ease-in-out;
    }

    .menuMobilePanelHide {
        transform: translateX(100%);
    }

    .menuMobilePanel button {
        margin: 10px;
    }

    .subMenuButtonContainer {
        display: flex;
        flex-direction: column;
        margin: 0;
        padding-inline-start: 0;
        align-items: flex-start;
    }

    .subMenuButtonContainer li {
        list-style: none;
    }

    .subMenuButton {
        text-align: left;
    }

    .galleryView {
        overflow-x: scroll;
    }

    .carouselMobileNavButton {
        display: block;
    }

    .carouselDesktopNavButton {
        display: none;
    }

    .formationItem {
        width: 160px;
    }

    .formationItemNumberContainer {
        height: 30px;
        width: 30px;
    }

    .formationItemNumber {
        font-size: 15px;
        font-weight: bold;
    }

    .formationItemText span::first-letter {
        font-size: 16px;
    }

    .formationItemText span {
        font-size: 15px;
    }

    .presentationContainer {
        flex-direction: column;
    }

    .presentation-image-placeholder {
        width: 168px;
        height: auto;
    }

    .footer-image-placeholder {
        width: 180px;
    }

    .footer_contactItem {
        display: flex;
        align-items: center;
        gap: 5px;
        cursor: pointer;
    }

    .footer-phone-image-placeholder {
        width: 25px;
    }

    .footer-mail-image-placeholder {
        width: 25px;
    }

    .footer-linkedin-image-placeholder {
        width: 25px;
    }
}