body {background-color: var(--white);}

header{
    height: fit-content;
    position: relative;
    overflow: hidden;
    padding: 2.5rem 5rem;
}

.header_content {display: flex; gap: 4rem; width: var(--width-wide); margin: 10rem auto 2rem auto;}
.header_content p {color: var(--gris--60);}
.header_text {display: flex; flex-direction: column; flex: 1 1 0; gap: 2rem; padding: 2rem 0;}
.header_img {width: 100%; height: 60vh ; border-radius: 2rem; object-fit: fill; flex: 1 1 0; overflow: hidden;}
.header_img img{width: 100%; height: 100%; object-fit: cover;}

@media (max-width: 900px) {
    header {padding: 2.5rem 0;}
    .header_content {display: flex; width: 92%; flex-direction: column-reverse; gap: 2rem;}
    .header_img {height: 40vh; flex: auto;}
    .header_text {padding: 0;}
}

.about-history {padding: 6rem 0; background-color: #000C29; position: relative; background-image: url(/ressources/photo/background/background-gradient2.png); background-size: cover;}
.history-container {display: flex; gap: 4rem; width: var(--width-narrow); margin: auto;}
.history-content {display: flex; flex-direction: column; flex: 1 1 0; padding: 2rem 0; justify-content: space-between; gap: 4rem;}
.history-text {display: flex; flex-direction: column; gap: 2rem;}
.about-history h3 {color: var(--white); border-left: 1px solid var(--white--20); padding: 1rem 2rem; }
.about-history h3 svg {height: 4rem; width: 4rem; color: var(--blue);}

.history-number {display: flex; gap: 4rem; margin: auto; width: 100%; border-radius: 2rem; text-align: left;}
.history-number .item-number {flex: 1 0 0; color: var(--white);}
.history-number .item-number p {color: var(--white--40);}

@media (max-width: 900px) {
    .about-history {padding: 4rem 0;}
    .history-container {width: 92%;}
    .history-content {padding: 0;}
    .history-number {flex-direction: column; gap: 4rem; text-align: center; align-items: center; max-width: 52%;}
}

.about-mission {display: flex; gap: 4rem; width: var(--width-content); margin: auto; padding: 4rem 0;}
.mission-text {flex: 3 0 0; display: flex; flex-direction: column; gap: 1rem; padding: 2rem 0;}
.about-mission p {color: var(--gris--60);}
.history-img {width: 100%; height: 60vh ; border-radius: 2rem; object-fit: fill; flex: 2 0 0; overflow: hidden; border: 1px solid var(--gris--20);}
.history-img img {width: 100%; height: 100%; object-fit: cover;}

@media (max-width: 900px) {
    .about-mission {flex-direction: column; padding: 4rem 0; width: 92%; gap: 2rem;}
    .history-img {flex: auto; height: 28vh;}
}

.about-difference {display: flex; flex-direction: column; align-items: center; gap: 1rem; width: var(--width-content); margin: auto; padding: 4rem 0 8rem 0;}
.about-difference .card {background-color: #fff; border: 1px solid var(--gris--20); border-radius: 2rem; padding: 2rem; display: flex; flex-direction: column; gap: 2rem; align-items: center;}
.about-difference .card svg {fill: var(--gris--40); background-color: var(--gris--10); border: 1px solid var(--gris--20); border-radius: 1rem; padding: .5rem; height: 2.5rem; width: 2.5rem;}
.about-difference .card p { color: var(--gris--80); text-align: center;}

.about-difference .container-card {display: flex; gap: 1rem; margin-top: 2rem;}

@media (max-width: 900px) {
    .about-difference {width: 92%; gap: 2rem; align-items: flex-start;}
    .about-difference .container-card  {margin-top: 0; flex-direction: column;}
}

main hr {
    border: none;
    height: 1px;
    width: var(--width-narrow); 
    margin: auto;
    background-color: var(--gris--10);
}

@media (max-width: 900px) {
    main hr {width: 92%;}
}

/* -------------------- Section clients -------------------- */
.clients {
    position: relative;
    width: 100vw;
}

.container-clients {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 2rem 0;
    border-radius: 2rem;
    width: 100%;
}

.clients-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 120%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    background-color: #0E0E52;
    mix-blend-mode: color;
}

.clients h2 span {
    font-size: 3rem;
    text-decoration: underline;
    text-decoration-color: var(--blue--20);
    text-underline-offset: .5rem;
    text-decoration-thickness: 2px;
}

.logo-row {
    width: 100%;
}

.logo-track {
    display: flex;
    width: fit-content;
}

.logo-group {
    display: flex;
    gap: 4vw;
    background-color: var(--white);
}

.logo-group img {
    width: clamp(120px, 10vw, 220px);
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: .8s;
}

.logo-group img:hover {
    scale: .96;
    z-index: 2;
}

.logo-group img:last-child {
    margin-right: 4vw;
}

.scroll-left .logo-track {
    animation: scroll-left 40s linear infinite;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

@media (max-width: 900px) {
    .clients {
        width: 100% !important;
    }

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

/* -------------------- Section CTA -------------------- */
.section-cta {
    background: linear-gradient(0deg, var(--blue) 0%, var(--white) 100%);
    width: 100vw !important;
    border-bottom: none;
}

.section-cta h1 {
    width: var(--width-narrow);
}

.cta-container {
    width: var(--width-wide);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    text-align: center;
    border-bottom: 1px solid var(--white--20);
    padding-bottom: 4rem;
    margin: auto;
}

.section-cta .icon {
    background-color: var(--blue--20);
    width: 3.75rem;
    height: 3.75rem;
    border: 1px solid var(--gris--20);
    display: flex;
    border-radius: 1rem;
}

.section-cta .icon svg {
    fill: var(--blue);
    width: 2rem;
    height: 2rem;
    margin: auto;
}

footer {
    background: var(--blue) !important;
}

@media (max-width: 900px) {
    .section-cta h1 {
        width: 100%;
    }
    .section-cta .icon {display: none;}
}