@media screen and (min-height: 780px) {

    #home-wave-1 {
        bottom: -42vh;
    }

}

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

    #project-card {
        right: 100px;
    }

    #customers-slide, #agencies-slide, #apps {
        padding-left: 100px;
        padding-right: 100px;
    }

    #arnaud-slide, #our-team-avatars {
        margin-left: 100px;
        margin-right: 100px;
    }

    #home-logo-and-title {
        left: 480px;
    }

}

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

    #home-slide-left-part {
        padding-left: 6vw;
    }

    #home-slide-title-1 {
        font-size: 40px;
        width: 620px;
    }

    #home-slide-title-2 {
        font-size: 52px;
    }

    #project-card {
        right: 80px;
        width: 780px;
    }

    #customers-slide, #agencies-slide, #apps {
        padding-left: 80px;
        padding-right: 80px;
    }

    #arnaud-slide, #our-team-avatars {
        margin-left: 80px;
        margin-right: 80px;
    }

    #skills > div svg {
        height: 35px;
    }

}

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

    #project-card {
        right: 50px;
        width: 750px;
    }

    #customers-slide, #agencies-slide, #apps {
        padding-left: 50px;
        padding-right: 50px;
    }

    #arnaud-slide, #our-team-avatars {
        margin-left: 50px;
        margin-right: 50px;
    }

}

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

    #home-slide-left-part {
        padding-left: 5vw;
    }

    #home-slide-title-1 {
        font-size: 38px;
        width: 590px;
    }

    #home-slide-title-2 {
        font-size: 48px;
    }

    #home-slide-logo-waigeo {
        width: 310px;
    }

    #made-in-artois {
        left: 380px;
    }

    #home-waigeo-logo {
        margin-top: 20px;
        width: 230px;
    }

    #home-title {
        font-size: 34px;
        max-width: 300px;
        line-height: 40px;
    }

    #home-slide {
        min-height: 740px;
    }

    #applications-dropdown {
        gap: 60px;
    }

    #home-logo-and-title {
        left: 420px;
    }

    #discover {
        left: 525px;
    }

}

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

    .service {
        max-width: 620px;
    }

    .service-carousel-article-image {
        width: 140px;
    }

    .service-carousel-article-title > div:first-child {
        font-size: 20px;
    }

    .service-carousel-article-title > div:last-child {
        font-size: 15px;
    }

    .avatar-group {
        width: 1040px;
    }

    .avatar {
        width: 260px;
    }

    .avatar-message {
        left: calc(100% - 72px);
    }

    #skills > div span {
        font-size: 14px;
        margin-top: 8px;
    }

    #skills > div svg {
        height: 32px;
    }

    #project-card {
        width: 700px;
    }

    .project-card-message {
        font-size: 13px;
    }

    #app-last-card .project-card-contact-us-btn {
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        font-size: 14px;
    }

}

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

    #home-slide-left-part {
        padding-left: 60px;
        transform: scale(0.9);
    }

    #navbar {
        height: 65px;
        font-size: 13px;
    }

    .navbar-link, #navbar-contact div {
        padding-top: 5px;
    }

    #applications-dropdown {
        gap: 50px;
    }

    #home-logo-and-title {
        left: 400px;
    }

    #discover {
        left: 505px;
    }

    #apps {
        gap: 40px;
    }

    #skills > a svg:not(.mobile-only) {
        height: 34px;
    }

    #skills > a span {
        margin-top: 8px;
    }

    .avatar {
        margin-bottom: 30px;
    }

    .avatar-photo {
        width: 140px;
        height: 140px;
    }

    .avatar-photo img {
        height: 370px;
        margin-top: -48px;
    }

    #our-team-avatars {
        margin-bottom: 100px;
        padding: 50px 0 10px 0;
    }

    #arnaud-slide {
        margin-bottom: 60px;
    }

    #partner-container {
        padding-bottom: 40px;
    }

    #applications-slide {
        padding-bottom: 0;
    }

    #smartphone-area {
        left: 130px;
    }

}

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

    .avatar-group {
        width: 1000px;
    }

    .avatar {
        width: 250px;
    }

    .avatar-message {
        left: calc(100% - 70px);
    }

    #home-slide-title-1 {
        font-size: 36px;
        width: 560px;
    }

    #latest-news-dropdown {
        gap: 0;
        justify-content: space-between;
    }

    #project-card {
        width: 650px;
    }

    #skills > a span {
        font-size: 14px;
    }

}

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

    #home-slide-left-part {
        padding-left: 50px;
        transform: scale(0.8);
    }

    .avatar-group {
        width: 960px;
    }

    .avatar {
        width: 240px;
    }

    .avatar-message {
        left: calc(100% - 66px);
    }

    .avatar-job {
        font-size: 16px;
    }

    #agencies-right-part {
        margin-left: 70px;
    }

    #home-wave-1 {
        width: 420px;
    }

    #home-logo-and-title {
        left: 380px;
    }

    #discover {
        left: 465px;
    }

    #project-card {
        width: 640px;
    }

    #agencies-france-container {
        margin-left: 20px;
    }

    #apps {
        gap: 30px;
    }

    #smartphone-area {
        left: 110px;
    }

}

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

    #made-in-artois {
        top: 40px;
        left: 340px;
    }

    #agencies-right-part {
        margin-left: 40px;
    }

    #home-logo-and-title {
        left: 360px;
    }

    #project-card {
        width: 600px;
    }

    #services-card, #number-of-customers-card {
        width: 370px;
    }

    #customers-slide, #agencies-slide {
        gap: 40px;
    }

    #smartphone-area {
        left: 90px;
    }

}

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

    .service {
        max-width: 560px;
    }

    .service-carousel-article-image {
        width: 100px;
    }

    .service-carousel-article-title > div:first-child {
        font-size: 20px;
    }

    .service-carousel-article-title > div:last-child {
        font-size: 14px;
    }

    #arnaud-text {
        font-size: 14px;
    }

    #arnaud-title {
        font-size: 38px;
    }

    #arnaud-text > svg:nth-child(1) {
        width: 28px;
        height: 28px;
        left: -46px;
    }

    #arnaud-text > svg:nth-child(2) {
        width: 28px;
        height: 28px;
        right: -46px;
    }

    #made-in-artois {
        top: 30px;
        left: 310px;
    }

    #home-slide-title-1 {
        font-size: 34px;
        width: 530px;
    }

    #agencies-france-container {
        width: 580px;
        height: 580px;
    }

    .agency > div:last-child > h2:nth-child(1) {
        font-size: 20px;
    }

    .agency {
        width: 530px;
    }

    #home-title {
        font-size: 32px;
        max-width: 260px;
        line-height: 38px;
    }

    #project-card-contact-us-btn {
        font-size: 20px;
    }

    #home-waigeo-logo {
        margin-top: 20px;
        width: 210px;
    }

    .article {
        width: 180px;
    }
    
    .article-name {
        font-size: 13px;
        line-height: 18px;
    }
}

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

    #agencies-right-part {
        margin-left: 30px;
    }

    #agencies-france-container {
        width: 560px;
        height: 560px;
    }

    #home-wave-1 {
        width: 400px;
    }

    #home-logo-and-title {
        left: 340px;
    }

    #discover {
        left: 450px;
    }

    #applications-dropdown {
        gap: 40px;
    }

    #project-card {
        width: 560px;
    }

    #customers-card {
        padding: 40px;
    }

    #services-card, #number-of-customers-card {
        width: 350px;
        padding: 40px;
    }

    #skills > a span {
        font-size: 13px;
        margin-top: 6px;
    }

    #agencies-france-container {
        margin-left: 30px;
    }

    #apps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #app-last-card {
        grid-column: 2 / 4;
        grid-row: auto;
    }

    #app-last-card .project-card-contact-us-btn {
        width: -moz-fit-content;
        width: fit-content;
        font-size: 16px;
        padding-left: 30px;
        padding-right: 30px;
    }
    
}

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

    #home-slide-logo-waigeo {
        width: 280px;
    }

    #home-slide-title-2 {
        font-size: 40px;
    }

    #footer-top-part img {
        width: 145px;
    }

    #made-in-artois {
        left: 300px;
    }

    #home-slide-title-1 {
        font-size: 32px;
        width: 500px;
    }

    #agencies-france-container {
        width: 540px;
        height: 540px;
    }

    .agency > div:first-child {
        width: 55px;
        height: 55px;
        margin-right: 20px;
    }

    #agencies-right-part {
        margin-left: 25px;
    }

    .agency > div:last-child > div:nth-child(2) {
        font-size: 15px;
    }

    .agency > div:last-child > div:nth-child(3) {
        font-size: 15px;
    }

    .agency {
        width: 500px;
    }

    .article-title {
        padding: 0 30px;
    }

    #navbar-links, #navbar-contact {
        gap: 45px;
        font-size: 12px;
    }

    #applications-dropdown {
        gap: 30px;
    }

    #home-title {
        font-size: 30px;
        line-height: 36px;
    }

    #skills > div span {
        font-size: 13px;
    }

    #project-card {
        width: 540px;
    }

    #project-card-contact-us-btn {
        font-size: 18px;
    }

    #customers-slide {
        height: 700px;
    }

    #customers-images {
        height: 460px;
    }

    #customers-names h1 {
        font-size: 26px;
        line-height: 34px;
    }

    #arnaud-container {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
        margin-bottom: 30px;
    }

    .avatar-job {
        font-size: 14px;
        line-height: 18px;
    }

    .avatar-group {
        width: 800px;
    }

    .avatar {
        width: 200px;
    }

    .avatar-message {
        bottom: calc(100% - 16px);
        left: calc(100% - 60px);
    }

}

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

    .service {
        max-width: 520px;
    }

    #home-slide-title-1 {
        font-size: 30px;
        width: 470px;
    }

    #agencies-right-part {
        margin-left: 20px;
    }

    #agencies-france-container {
        width: 520px;
        height: 520px;
    }

    .application {
        width: 190px;
    }

    .application-message {
        font-size: 12px;
        line-height: 16px;
    }

    #home-logo-and-title {
        left: 320px;
    }

    #skills, #skills-lines {
        gap: 15px;
        padding: 40px;
    }

    #project-card {
        width: 500px;
    }

    #customers-images {
        height: 420px;
    }

    #handshake, #number-of-customers-card-image {
        width: 160px;
        height: 160px;
    }

    #services-card, #number-of-customers-card {
        width: 330px;
    }

    #services-card-title {
        line-height: 24px;
    }

    #services-card-title::after {
        bottom: -15px;
    }

    #customers-slide, #agencies-slide {
        gap: 30px;
    }

    #skills > a span {
        font-size: 12px;
    }

    #smartphone-area {
        left: 70px;
    }

}

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

    #home-slide-title-2 {
        font-size: 37px;
    }

    #svg-rectangle {
        width: 702px;
        left: 101px;
    }

    #svg-rectangle rect {
        width: 700px;
    }

    #made-in-artois {
        top: 40px;
        left: 280px;
    }

    #agencies-france-container {
        width: 500px;
        height: 500px;
    }

    .article-title {
        font-size: 14px;
        line-height: 20px;
    }

    #home-title {
        max-width: 250px;
        font-size: 28px;
        line-height: 34px;
    }

    #home-wave-1 {
        width: 380px;
    }

    #home-logo-and-title {
        left: 300px;
    }

    #navbar-links, #navbar-contact {
        gap: 40px;
    }

    #discover {
        left: 430px;
    }

    #customers-images {
        height: 380px;
    }

    #customers-names {
        margin-bottom: 25px;
    }

    #customers-messages, #services-card-message, .service-description {
        font-size: 13px;
        line-height: 18px;
    }

    #applications-slide-title, #partner-title, #team-title, #pdg-title {
        font-size: 30px;
        line-height: 42px;
        padding: 0 50px;
        box-sizing: border-box;
        max-width: 100vw;
    }

    .app-name {
        font-size: 21px;
    }

}

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

    #articles {
        width: 500px;
        height: 500px;
        top: 0px;
        left: 0px;
    }

    #home-slide-left-part {
        width: 100%;
        margin: 50px auto;
        padding: 0;
        height: auto;
    }

    #home-slide-contact {
        position: relative;
        top: 0;
        padding: 30px 0 25px 0;
        margin: 0 auto;
        justify-content: center;
        right: 0 !important;
    }

    #home-slide-title-1 {
        margin-top: 50px;
    }

    .service {
        max-width: 490px;
    }

    #home-slide-title-1 {
        font-size: 34px;
        width: 530px;
    }

    #agencies-right-part {
        margin-left: 15px;
    }

    .agency > div:first-child {
        width: 50px;
        height: 50px;
    }

    .agency {
        width: 480px;
    }

    .application {
        width: 170px;
    }

    .application-message {
        font-size: 11px;
        line-height: 14px;
    }

    #skills > div span {
        font-size: 12px;
    }

    #skills, #skills-lines {
        padding: 30px;
    }

    #project-card {
        width: 460px;
    }

    .app-name {
        font-size: 20px;
    }

}

@media screen and (min-width: 1101px) {

    #mobile-menu {
        display: none !important;
    }

    #apps > *:not(:last-child):hover {
        transform: perspective(1000px) rotateY(15deg) rotateX(5deg) translateY(-3px);
    }
    
    #apps > *:not(:last-child):hover .app-logo {
        transform: translateZ(30px);
        box-shadow: -20px 15px 10px rgba(0, 20, 40, 0.2);
    }

}

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

    .service {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: initial;
        width: calc(100% - 120px);
    }

    .service-carousel-article-image {
        width: 160px;
    }

    .service-carousel-article-title > div:first-child {
        font-size: 24px;
    }

    .service-carousel-article-title > div:last-child {
        font-size: 16px;
    }

    #avatar-7, #avatar-8 {
        display: none;
    }

    .avatar-group {
        width: 600px;
    }

    .avatar-message {
        left: calc(100% - 62px);
    }

    #arnaud-slide {
        flex-direction: column;
    }

    #arnaud-infos-container {
        text-align: center;
    }

    #our-team-title svg {
        height: 68px;
    }

    #footer-top-part {
        flex-direction: column;
    }

    #footer-top-part img {
        margin-right: 0;
        margin-bottom: 20px;
        width: 150px;
    }

    #made-in-artois {
        top: 30px;
        left: 280px;
        right: 0;
        margin: 0 auto;
    }

    #agencies-right-part {
        margin-left: 0;
        margin-top: 50px;
    }

    #agencies-title {
        display: none;
    }

    #agencies-france-container {
        width: 550px;
        height: 550px;
        margin-left: 50px;
    }

    .agency > div:last-child > h2:nth-child(1) {
        font-size: 22px;
    }

    .agency > div:last-child > div:nth-child(2) {
        font-size: 16px;
    }

    .agency > div:last-child > div:nth-child(3) {
        font-size: 16px;
    }

    .agency {
        width: 530px;
    }

    .agency > div:first-child {
        width: 60px;
        height: 60px;
        margin-right: 30px;
    }

    #home-slide {
        height: initial;
        min-height: initial;
        background: transparent;
        padding-bottom: 0;
    }

    #home-slide-white-background {
        display: none;
    }

    .article-title {
        font-size: 16px;
        line-height: 22px;
    }

    #home-logo-and-title {
        position: relative;
        top: 0;
        left: 0;
        padding-left: 30px;
    }

    #navbar {
        display: none;
    }

    #home-left-part {
        display: flex;
        justify-content: center;
        align-items: center;
        height: initial;
        padding-top: 30px;
    }

    #home-waigeo-logo {
        margin-top: 0;
    }

    #home-wave-1, #home-wave-2 {
        display: none;
    }

    #mobile-menu-btn, #contact-mobile {
        display: flex;
    }

    #home-wave-mobile-1 {
        display: block;
    }

    #discover {
        display: none;
    }

    #under-applications-dropdown, #applications-dropdown, #under-latest-news-dropdown, #latest-news-dropdown {
        display: none !important;
    }

    #project-card {
        position: relative;
        top: 0;
        right: 0;
        bottom: 0;
        height: 600px;
        width: 600px;
        margin: 50px auto 30px auto;
    }

    #project-card-message {
        padding: 0 30px 30px 30px;
    }

    #customers-slide {
        flex-direction: column;
        height: auto;
        padding: 0 0 30px 0;
        background: transparent;
    }

    #customers-card {
        width: 600px;
        height: 680px;
        margin: 0 auto;
        flex: initial;
    }

    #services-card, #number-of-customers-card, #france-container {
        width: 600px;
        margin: 0 auto;
    }

    #home-slide-colored-background-1, #home-slide-colored-background-2 {
        display: none;
    }

    #project-card .project-card-message {
        order: 1;
        padding: 30px;
    }

    #project-card .project-card-contact-us-btn {
        order: 2;
        margin-bottom: 10px;
    }

    #skills {
        padding-top: 20px;
    }

    #skills-container {
        order: 4;
    }

    #fields-of-expertise-title {
        display: block;
    }

    #skills > div span {
        font-size: 14px;
    }

    #skills > a span {
        font-size: 14px;
    }

    #services-card {
        padding-bottom: 20px !important;
    }

    #agencies-slide {
        flex-direction: column;
        padding-left: 0;
        padding-right: 0;
    }

    #number-of-customers-card-message {
        margin-bottom: 0;
    }

    .app-logo {
        width: 140px;
        height: 140px;
    }

    #applications-slide-title {
        margin-top: 30px;
    }

    #arnaud-title, #arnaud-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    #arnaud-photo {
        margin-right: 0;
        margin-bottom: 20px;
    }

    #arnaud-slide {
        padding: 50px;
    }

    #partner-container {
        padding-bottom: 30px;
    }

    #footer-logo-container {
        margin-right: 0;
    }

    #footer-contact-us-btn {
        margin-left: 0;
        margin-top: 30px;
    }

    #our-team-avatars {
        margin-bottom: 30px;
    }

    #smartphone-area {
        position: relative;
        top: 0;
        left: 0;
    }

    #smartphone-black-screen img, #smartphone-images img {
        height: 460px;
        min-height: initial;
    }

}

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

    .service {
        width: calc(100% - 100px);
    }

    #partner-title-left-line, #partner-title-right-line {
        flex: 1;
        width: initial !important;
    }

    #partner-title-left-line {
        margin-right: 25px;
        background: linear-gradient(90deg, #04afff00 20%, #04afffff 90%);
    }

    #partner-title-right-line {
        margin-left: 25px;
        background: linear-gradient(90deg, #04afffff 10%, #04afff00 80%);
    }

    .avatar-message {
        left: calc(100% - 66px);
    }

    #home-slide-title-1 {
        font-size: 32px;
        width: 500px;
    }

    #app-last-card {
        grid-column: 2 / 3;
        grid-row: auto;
    }

    #apps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-left: 30px;
        padding-right: 30px;
    }

    #arnaud-slide, #our-team-avatars {
        margin-left: 30px;
        margin-right: 30px;
    }

}

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

    .service {
        width: calc(100% - 80px);
    }

    #svg-rectangle {
        display: none;
    }

    #partner-title-left-line {
        margin-right: 20px;
    }

    #partner-title-right-line {
        margin-left: 20px;
    }

    #partner-title > h2 {
        font-size: 36px;
    }

    #footer-bottom-part {
        flex-direction: column;
        gap: 4px;
    }

    .avatar {
        width: 240px;
        margin-bottom: 15px;
    }

    .avatar-group {
        width: 480px;
    }

    .avatar-message {
        left: calc(100% - 76px);
    }

    #apps .project-card-contact-us-btn {
        font-size: 14px;
    }

    #apps {
        display: flex;
        flex-direction: column;
    }

    #apps .project-card-contact-us-btn {
        font-size: 16px;
    }

}

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

    #articles {
        width: calc(100vw - 130px);
        height: calc(100vw - 130px);
        top: 0px;
        left: 0px;
    }

    .service {
        width: calc(100% - 60px);
    }

    .service-carousel-article-image {
        width: 140px;
    }

    .service-carousel-article-title > div:first-child {
        font-size: 22px;
    }

    .service-carousel-article-title > div:last-child {
        font-size: 15px;
    }

    #partner-title > h2 {
        font-size: 34px;
    }

    #arnaud-text > svg {
        width: 18px !important;
        height: 18px !important;
    }

    #arnaud-text > svg:nth-child(1) {
        left: 12px;
    }

    #arnaud-text > svg:nth-child(2) {
        right: 12px;
    }

    #home-slide-title-1 {
        font-size: 30px;
        width: 470px;
    }

    #lights {
        transform: scale(0.9);
    }

    #home-logo-and-title {
        padding-left: 10px;
    }

    #project-card, #customers-card, #services-card, #number-of-customers-card, #france-container {
        width: calc(100vw - 60px);
    }

    #customers-card {
        padding: 30px;
    }

    #arnaud-slide {
        padding: 50px 30px;
    }

    #arnaud-photo {
        width: 240px;
        height: 240px;
    }

    .avatar {
        width: 200px;
    }

    .avatar-group {
        width: 400px;
    }

    .avatar-message {
        left: calc(100% - 56px);
    }

}

@media screen and (min-width: 651px) {

    #skills > a:nth-child(1):hover {
        background-color: #E02074;
    }
    
    #skills > a:nth-child(2):hover {
        background-color: #E6583D;
    }
    
    #skills > a:nth-child(3):hover {
        background-color: #EB8B06;
    }
    
    #skills > a:nth-child(4):hover {
        background-color: #c8c601;
    }
    
    #skills > a:nth-child(5):hover {
        background-color: #78b52e;
    }
    
    #skills > a:nth-child(6):hover {
        background-color: #27B7B9;
    }
    
    #skills > a:nth-child(7):hover {
        background-color: #39A1D9;
    }
    
    #skills > a:nth-child(8):hover {
        background-color: #5673dd;
    }
    
    #skills > a:nth-child(9):hover {
        background-color: #9b5cbc;
    }
    
    #skills > a:hover {
        transform: scale(1.08) !important;
        z-index: 2;
    }
    
    #skills > a:hover span {
        color: white;
    }
    
    #skills > a:hover svg:not(.mobile-only) {
        fill: white !important;
    }

}

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

    #partner-title > h2 {
        font-size: 33px;
    }

    .avatar-group {
        width: 400px;
    }

    #agencies-france-container {
        width: calc(100vw - 100px);
        height: calc(100vw - 100px);
        margin-left: 50px;
    }

    #north-of-france-img {
        width: 130%;
        animation: northOfFranceAnimationMobile 18s infinite alternate linear;
    }

    .agency {
        width: calc(100vw - 40px);
        flex-direction: column;
        text-align: center;
    }

    .agency > div:first-child {
        width: 40px;
        height: 40px;
        margin-right: 0;
        margin-bottom: 10px;
    }

    #agencies-right-part {
        margin-top: 40px;
    }

    #home-title {
        max-width: 210px;
        font-size: 26px;
        line-height: 32px;
    }

    #home-waigeo-logo {
        width: 200px;
    }

    #skills {
        display: flex;
        flex-direction: column;
        padding: 15px 0 0 0;
        gap: 0;
    }

    #skills > a {
        flex-direction: row;
        box-shadow: none;
        border-top: 1px solid rgb(230, 235, 240);
        border-radius: 0;
        justify-content: flex-start;
        padding: 12px 20px;
    }

    #skills > a svg:not(.mobile-only) {
        height: 26px;
        width: 40px;
        margin-right: 14px;
    }

    #skills > a span {
        margin-top: 0;
    }

    #skills > a svg.mobile-only {
        display: block;
    }

    #project-card {
        height: auto;
    }

    #customers-images {
        height: 280px;
        margin: 0;
    }

    #customers-card {
        height: 560px;
    }

    #customers-names {
        margin-bottom: 20px;
    }

    #customers-names h1 {
        font-size: 22px;
        line-height: 28px;
    }

    #customers-messages, #services-card-message, .service-description {
        font-size: 13px;
        line-height: 17px;
    }

    #customers-buttons {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 52px;
        margin: 0 auto;
        width: 100%;
    }

    #customers-points {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 30px;
        margin: 0 auto;
        width: 100%;
    }

    #customers-card {
        gap: 35px;
    }

    #services-card, #number-of-customers-card {
        padding: 30px;
    }

    #number-of-customers-card-message {
        font-size: 13px;
        line-height: 17px;
    }

    #home-wave-mobile-1 {
        top: -10px;
    }

    #smartphone-black-screen img, #smartphone-images img {
        height: 400px;
    }

    #home-logo-and-title {
        padding-left: 0;
    }

}

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

    #home-slide-contact {
        flex-direction: column-reverse;
        align-items: center;
        font-size: 16px;
    }

    #home-slide-contact-info {
        margin-top: 8px;
    }

    #home-slide-contact-info > div:first-child {
        margin-right: 20px;
    }

    .contact-vertical-bar {
        display: none;
    }

    #social-networks-btn a svg {
        width: 26px;
        height: 26px;
    }

    #social-networks-btn a:not(:last-child) {
        margin-right: 12px;
    }

    #home-slide-left-part {
        margin: 30px auto 20px auto;
    }

    #home-slide-title-1 {
        text-align: center;
        padding: 0 10px;
    }

    #home-slide-title-2 {
        text-align: center;
        font-size: 40px;
    }

    .article-title > span:first-child {
        font-size: 14px;
        margin-top: 12px;
        margin-bottom: 8px;
    }

    .article-title > span:last-child {
        font-size: 13px;
    }

    #article-title-background {
        height: 100px !important;
    }

    #home-slide-title-2 {
        padding: 0 12px;
    }

    #home-slide-contact {
        border-bottom: 1px solid #04afff25;
    }

    .service-carousel-article {
        padding: 10px 20px;
    }

    .service-carousel-article-title > div:first-child {
        font-size: 20px;
    }

    .service-carousel-article-title > div:last-child {
        font-size: 14px;
    }

    .service-carousel-left-arrow svg, .service-carousel-right-arrow svg {
        height: 38px;
        width: 14px;
    }

    .service-carousel-article-title {
        margin-left: 20px;
    }

    .service-carousel-article-image {
        width: 120px;
    }

    #partner-title > h2 {
        font-size: 32px;
    }

    #our-team-title svg {
        height: 64px;
    }

    .footer-vertical-bar {
        display: none;
    }

    #footer-contact-text {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #footer-contact-text > div:not(.footer-vertical-bar) {
        top: 0;
    }

    #footer-contact-text > div:not(:last-child) {
        margin-bottom: 8px;
    }

    footer hr {
        width: calc(100% - 60px);
    }

    #home-slide-title-1 {
        font-size: 28px;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }

    #home-title {
        max-width: 190px;
        font-size: 24px;
        line-height: 32px;
        margin: 25px 0;
    }

    #home-waigeo-logo {
        width: 180px;
    }

    #project-card-contact-us-btn {
        font-size: 18px;
    }

    #project-card {
        margin-top: 30px;
    }

    .article-title {
        font-size: 15px;
    }

    #customers-images {
        height: 240px;
    }

    #customers-card {
        gap: 30px;
    }

    #project-card, #customers-card, #services-card, #number-of-customers-card, #france-container {
        width: calc(100vw - 40px);
        border-radius: 30px;
    }

    #home-wave-mobile-1 {
        top: -10px;
    }

    #apps {
        padding-left: 20px;
        padding-right: 20px;
        gap: 20px;
    }

    #apps > * {
        padding: 30px 20px;
    }

    #agencies-france-container {
        width: calc(100vw - 80px);
        height: calc(100vw - 80px);
    }

    #arnaud-slide, #our-team-avatars {
        margin-left: 20px;
        margin-right: 20px;
    }

    #avatar-left-arrow, #avatar-right-arrow {
        width: 45px;
        height: 45px;
    }

    #avatar-left-arrow svg, #avatar-right-arrow svg {
        width: 18px;
        height: 18px;
    }

    .avatar-message {
        padding: 18px 12px;
        left: calc(100% - 62px);
        bottom: calc(100% - 4px);
    }

    .avatar-group {
        width: 360px;
    }

    .avatar {
        width: 180px;
    }

    .avatar-name {
        font-size: 20px;
    }

    #applications-slide-title, #partner-title {
        margin-bottom: 30px;
    }

}

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

    .service-carousel-article {
        flex-direction: column;
        padding: 0;
    }

    .service-subtitle {
        font-size: 14px;
    }

    .service-title {
        margin-bottom: 10px;
        font-size: 20px;
    }

    .service {
        padding: 25px;
    }

    .service hr {
        width: calc(100% + 50px);
    }

    .service-carousel-article-image {
        width: 100%;
        height: 80px;
        margin-bottom: 10px;
    }

    .service-carousel-article-title {
        margin-left: 0;
    }

    .service-carousel-article-title > div:first-child {
        text-align: center;
        font-size: 20px;
    }

    .service-carousel-article-title > div:last-child {
        text-align: center;
    }

    .service-icon {
        margin-bottom: 3px;
    }

    #wifi {
        position: absolute;
        top: -15px;
        left: 64px;
        right: initial;
    }

    #wifi-1, #wifi-2, #wifi-3 {
        width: 20px;
        height: 20px;
    }

    #partner-title > h2 {
        font-size: 30px;
    }

    #partner-title-left-line {
        margin-right: 15px;
    }

    #partner-title-right-line {
        margin-left: 15px;
    }

    #logo-modal-demo {
        height: 100px;
    }

    #lights {
        transform: scale(0.8);
    }

    #home-title {
        margin: 25px 0;
    }

    #project-card-contact-us-btn {
        font-size: 18px;
        padding: 14px 26px;
    }

    #project-card, #customers-card, #services-card, #number-of-customers-card, #france-container {
        width: calc(100vw - 30px);
    }

    #customers-card {
        padding: 20px;
        gap: 25px;
    }

    #customers-card-title {
        font-size: 18px;
    }

    #customers-names {
        margin-bottom: 15px;
    }

    #customers-images {
        height: 230px;
    }

    #home-wave-mobile-1 {
        top: -10px;
        max-width: 53vw;
    }

    #agencies-france-container {
        width: calc(100vw - 60px);
        height: calc(100vw - 60px);
    }

    #apps {
        padding-left: 15px;
        padding-right: 15px;
        gap: 15px;
    }

    #applications-slide-title, #partner-title, #team-title, #pdg-title {
        font-size: 28px;
        line-height: 40px;
        padding: 0 30px;
    }

    #arnaud-slide, #our-team-avatars {
        margin-left: 15px;
        margin-right: 15px;
    }

    .avatar-photo img {
        height: 345px;
        margin-top: -44px;
    }

    .avatar-photo {
        width: 130px;
        height: 130px;
    }

    #avatar-left-arrow, #avatar-right-arrow {
        width: 40px;
        height: 40px;
    }

    #avatar-left-arrow svg, #avatar-right-arrow svg {
        width: 16px;
        height: 16px;
    }

    .avatar-message {
        font-size: 10px;
        line-height: 14px;
    }

    #home-logo-and-title {
        margin-left: -10px;
    }

}

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

    #home-slide-title-2 {
        font-size: 35px;
    }

    #home-slide-logo-waigeo {
        width: 260px;
    }

    #partner-title > h2 {
        font-size: 28px;
    }

    #home-slide-title-1 {
        font-size: 26px;
    }

    #home-title {
        max-width: 170px;
        font-size: 21px;
        line-height: 26px;
    }

    #home-waigeo-logo {
        width: 160px;
    }

    #mobile-menu-btn {
        top: 20px;
        right: 20px;
    }

    #project-card-contact-us-btn {
        font-size: 16px;
        padding: 12px 26px;
    }

    .contact-mobile-icon {
        width: 38px;
        height: 38px;
    }

    #contact-mobile {
        font-size: 13px;
        margin-top: 110px;
    }

    .article-title {
        font-size: 14px;
        line-height: 18px;
        margin-top: 15px;
        height: 50px;
    }

    #mobile-applications, #mobile-latest-news {
        gap: 20px;
        align-items: flex-start;
    }

    .mobile-menu-section-title, .mobile-menu-link {
        text-align: left;
    }

    #mobile-menu-waigeo-logo {
        margin: initial;
    }

    #project-card-message {
        line-height: 18px;
        font-size: 13px;
    }

    #customers-messages {
        font-size: 11px;
        line-height: 15px;
    }

    #customers-images {
        height: 200px;
    }

    #customers-card {
        height: 530px;
    }

    #home-wave-mobile-1 {
        top: -60px;
        max-width: 52vw;
    }

    .project-card-contact-us-btn {
        font-size: 16px;
    }

    #app-last-card .project-card-contact-us-btn {
        font-size: 16px;
    }

    #project-card .project-card-contact-us-btn {
        margin-bottom: 10px;
    }

    #project-card .project-card-message {
        padding: 20px;
    }

    #skills-lines {
        display: none;
    }

    #agencies-france-container {
        width: calc(100vw - 40px);
        height: calc(100vw - 40px);
        margin-left: 40px;
    }

    .france-popup {
        font-size: 12px;
        padding: 10px 16px;
    }

    #applications-slide-title, #partner-title, #team-title, #pdg-title {
        font-size: 26px;
        line-height: 36px;
        padding-left: 15px;
        padding-right: 15px;
        padding: 0 15px;
    }

    #arnaud-title {
        width: 100%;
    }

    #avatar-left-arrow {
        position: absolute;
        top: 30px;
        right: calc(50% + 5px);
    }

    #avatar-right-arrow {
        position: absolute;
        top: 30px;
        left: calc(50% + 5px);
    }

    #our-team-avatars {
        padding-top: 90px;
    }

    .avatar-message {
        left: calc(100% - 92px);
        bottom: calc(100% + 12px);
    }

    #arnaud-slide {
        margin-bottom: 50px;
    }

    #smartphone-black-screen img, #smartphone-images img {
        height: 380px;
    }

    .smartphone-app-text {
        font-size: 10px;
        line-height: 14px;
    }

    .smartphone-app-name {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 6px;
    }

    #smartphone-apps {
        height: 80px;
        width: 180px;
    }

    #home-logo-and-title {
        margin-left: 0;
    }

}

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

    .article-title > span:first-child {
        font-size: 12px;
        margin-top: 10px;
        margin-bottom: 6px;
    }

    .article-title > span:last-child {
        font-size: 12px;
    }

    #article-title-background {
        height: 80px !important;
    }

    #articles {
        width: calc(100vw - 60px);
        height: calc(100vw - 60px);
    }

    #home-slide-title-2 {
        font-size: 28px;
        padding: 0;
        color: white;
        margin-top: 15px;
    }

    #home-slide-logo-waigeo {
        width: 240px;
    }

    #home-slide-contact {
        padding: 22px 0;
    }

    #home-slide-title-1 {
        margin-top: 30px;
    }

    .article-title > span:last-child {
        color: #04afff;
    }

    #partner-title > h2 {
        font-size: 26px;
    }

    #arnaud-title {
        font-size: 36px;
    }

    #our-team-title svg {
        height: 62px;
    }

    #made-in-artois {
        width: 95px;
        height: 95px;
        top: 20px;
        left: 245px;
    }

    #home-waigeo-logo {
        width: 150px;
    }

    #home-title {
        margin: 20px 0;
    }

    #home-title {
        max-width: 155px;
        font-size: 19px;
        line-height: 24px;
    }

    .contact-mobile-icon {
        width: 34px;
        height: 34px;
    }

    #contact-mobile {
        gap: 12px;
        margin-top: 90px;
    }

    .contact-mobile-icon svg {
        width: 16px;
        height: 16px;
    }

    #contact-mobile > div {
        padding-right: 12px;
    }

    #customers-card {
        gap: 20px;
    }

    #customers-images img {
        border-radius: 15px;
    }

    #customers-images {
        height: 180px;
    }

    #customers-card {
        height: 560px;
    }

    #handshake, #number-of-customers-card-image {
        width: 140px;
        height: 140px;
    }

    #home-wave-mobile-1 {
        top: -80px;
        mask-image: linear-gradient(black 50%, transparent 56%);
    }

    #applications-slide-title, #partner-title, #team-title, #pdg-title {
        font-size: 24px;
        line-height: 34px;
    }

    #arnaud-subtitle {
        padding: 6px 16px;
    }

    #arnaud-slide {
        padding: 40px 20px;
    }

    #smartphone-black-screen img, #smartphone-images img {
        height: 340px;
    }

    #home-logo-and-title {
        margin-left: -10px;
    }

}

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

    #home-slide-title-2 {
        display: block;
        padding: 0 15px;
    }

    #home-slide-logo-waigeo {
        width: 220px;
    }

    .service {
        width: calc(100% - 40px);
    }

    #partner-title > h2 {
        font-size: 23px;
    }

    #arnaud-title {
        font-size: 34px;
    }

    #our-team-title svg {
        height: 60px;
    }

    footer hr {
        width: calc(100% - 40px);
    }

    #made-in-artois {
        width: 90px;
        height: 90px;
        top: 25px;
        left: 240px;
    }

    #contact-mobile {
        gap: 10px;
    }

    .contact-mobile-icon {
        width: 32px;
        height: 32px;
        margin-right: 8px;
    }

    .contact-mobile-icon svg {
        width: 14px;
        height: 14px;
    }

    #project-card, #customers-card, #services-card, #number-of-customers-card, #france-container {
        width: calc(100vw - 20px);
    }

    #customers-names h1 {
        font-size: 20px;
        line-height: 26px;
    }

    #customers-messages ul {
        margin-block-start: 15px;
        margin-block-end: 15px;
        gap: 12px;
    }

    #customers-card-title {
        margin-bottom: 5px;
    }

    #agencies-france-container {
        margin-left: 35px;
    }

    #apps {
        padding-left: 10px;
        padding-right: 10px;
    }

    #applications-slide-title, #partner-title, #team-title, #pdg-title {
        font-size: 23px;
        line-height: 32px;
    }

    #arnaud-slide, #our-team-avatars {
        margin-left: 10px;
        margin-right: 10px;
    }

    #arnaud-subtitle {
        font-size: 17px;
    }

    .avatar-group {
        width: 320px;
    }

    .avatar {
        width: 160px;
    }

    .avatar-job {
        padding: 0 10px;
    }

    .avatar-message {
        left: calc(100% - 100px);
        bottom: calc(100% + 14px);
    }

    .avatar-message::before {
        bottom: -12px;
        transform: rotate(-20deg);
    }

    #smartphone-black-screen img, #smartphone-images img {
        height: 320px;
    }

    #home-wave-mobile-1 {
        top: -100px;
    }

    #home-logo-and-title {
        margin-left: -20px;
    }

}

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

    #home-waigeo-logo {
        width: 135px;
    }

    #home-title {
        max-width: 150px;
        font-size: 18px;
        line-height: 22px;
    }

    #project-card-contact-us-btn {
        font-size: 15px;
        padding: 10px 20px;
    }

    #customers-card {
        height: 575px;
    }

    #home-wave-mobile-1 {
        top: -100px;
    }

}

/* iPhone 12 Mini : 375px en width */

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

    #customers-messages {
        font-size: 10px;
        line-height: 14px;
    }

    #customers-card {
        height: 550px;
    }

    #contact-mobile {
        font-size: 12px;
    }

}

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

    #partner-title > h2 {
        font-size: 21px;
    }

    #arnaud-title {
        font-size: 30px;
    }

    #made-in-artois {
        width: 80px;
        height: 80px;
        top: 30px;
        left: 240px;
    }

    :root {
        --bookScale: 0.75;
    }

    #scolariz-logo {
        width: 145px;
    }

    #contact-mobile {
        font-size: 11px;
    }

    #home-title {
        max-width: 135px;
        font-size: 16px;
        line-height: 20px;
    }

    #home-waigeo-logo {
        width: 130px;
    }

    #skills > div span {
        font-size: 12px;
    }

    #agencies-france-container {
        margin-left: 30px;
    }

    #arnaud-subtitle {
        font-size: 16px;
    }

}