@import url("https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,400;0,500;0,600;1,300;1,400;1,900&display=swap");
:root {
  --background: #ffff;
  --text: #252f36;
  --text-light: #000000bf;
  --accent1: #0C85A8;
  --accent2: #103C6D;
  --accent3: #0C85A8E6;
  --dark: #1c2229;
  --dark2: #11151A;
  --grey: #efefef;
  --grey2: #00000029;
}

* {
  font-family: "Libre Franklin", "sans-serif";
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.container {
  max-width: 1680px;
  /* padding: 0px 140px; */
}

html {
  scroll-behavior: smooth;
}

#about {
  padding: 0 0 8% 0;
  background-color: var(--accent3);
}
#about .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#about .container #about-row {
  min-height: 450px;
}
#about .container h2 {
  font-size: 23px;
  font-weight: 400;
  margin-bottom: 20px;
}
#about .container .about-section:not(:first-of-type) {
  padding-left: 8%;
  padding-top: 2%;
}
#about .container .about-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#about .container .about-section .section-title {
  width: 100%;
  padding-left: 2%;
}
#about .container .about-section .section-title h3 {
  font-size: 57px;
  font-weight: 500;
}
#about .container .about-section .content {
  font-size: 20px;
  font-weight: 400;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
#about .container .about-section .content div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#about .container .about-section .content #arrow-section {
  padding: 0;
  display: block;
}

#team {
  padding: 8% 0;
}
#team .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#team .team-col {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#team .team-col .pic {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#team .team-col .pic img {
  max-width: 100%;
  height: auto;
}
#team .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#team .title {
  color: var(--accent1);
  font-size: 46px;
  font-weight: 500;
  margin-bottom: 25px;
}
#team .text {
  color: var(--background);
  font-size: 20px;
  font-weight: 400;
}

#svg-template > svg {
  background: var(--accent2);
}

#round-border {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1920' height='691' viewBox='0 0 1920 691'%3E%3Cdefs%3E%3Cstyle%3E .cls-1  .cls-3 %7B fill: %23fff%3B %7D .cls-1 %7B stroke: %23707070%3B %7D .cls-2 %7B clip-path: url(%23clip-path)%3B %7D %3C/style%3E%3CclipPath id='clip-path'%3E%3Crect id='Rectangle_97' data-name='Rectangle 97' class='cls-1' width='1920' height='691' transform='translate(0 1568)'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Groupe_de_masques_3' data-name='Groupe de masques 3' class='cls-2' transform='translate(0 -1568)'%3E%3Cg id='Groupe_532' data-name='Groupe 532' transform='translate(4903.043 5633.601) rotate(128)'%3E%3Cpath id='Trac%C3%A9_187' data-name='Trac%C3%A9 187' class='cls-3' d='M5534.482 4625.636l-94.731 85.771c-531.045 477.177-1212.907 718.016-1931.43 681.615-714.533-37.888-1371.221-351.029-1848.41-881.568C1182.473 3980.916 940.4 3294.8 978.284 2580.271c37.651-715.029 350.792-1371.221 881.331-1848.906L1954.6 646.1 1111.42-291.317l-94.741 85.771c-1614.052 1452-1746.185 3946.628-294.434 5560.681 776.6 863.119 1851.148 1302.409 2929.681 1302.409 938.41 0 1880.314-333.088 2631.248-1008.719l94.988-85.275Z' transform='translate(-1283 485)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  min-height: 200px;
  margin-top: -9%;
  -webkit-filter: invert(1);
          filter: invert(1);
  background-repeat: no-repeat;
  background-size: cover;
}

#history {
  padding: 100px 0;
  margin-bottom: 4%;
}
#history .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#history .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 674px;
}
#history .pic {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#history .pic img {
  max-width: 75%;
  height: auto;
}
#history .title {
  color: var(--accent1);
  font-size: 46px;
  font-weight: 500;
  margin-bottom: 25px;
}
#history .text {
  font-size: 20px;
  font-weight: 400;
}

@media (max-width: 575.98px) {
  #about {
    padding: 10% 0;
  }
  #about .container {
    display: block;
  }
  #about .container h2 {
    font-size: 1.5rem;
  }
  #about .container .section-title {
    width: 100%;
  }
  #about .container .section-title h3 {
    font-size: 130%;
  }
  #about .container .content {
    width: 100%;
    font-size: 100%;
  }
  #about #arrow-section #history-arrow {
    text-align: center;
  }

  #team .content {
    width: 100%;
  }
  #team .content .title {
    font-size: 200%;
  }
  #team .content .text {
    font-size: 100%;
  }

  #history {
    padding: 5% 0;
  }
  #history .container {
    display: block;
  }
  #history .container .title {
    font-size: 200%;
    margin-bottom: 5%;
  }
  #history .container .content {
    width: 100%;
  }
  #history .container .content .text {
    font-size: 100%;
  }
}
@media screen and (min-width: 576px) and (max-width: 767.98px) {
  #about {
    padding: 10% 0;
  }
  #about .container {
    display: block;
  }
  #about .container h2 {
    font-size: 1.8rem;
  }
  #about .container .section-title {
    width: 100%;
  }
  #about .container .section-title h3 {
    font-size: 150%;
  }
  #about .container .content {
    width: 100%;
    font-size: 110%;
  }
  #about #arrow-section #history-arrow {
    text-align: center;
  }

  #team .content {
    width: 100%;
  }
  #team .content .title {
    font-size: 215%;
  }
  #team .content .text {
    font-size: 115%;
  }

  #history {
    padding: 5% 0;
  }
  #history .container {
    display: block;
  }
  #history .container .title {
    font-size: 215%;
    margin-bottom: 5%;
  }
  #history .container .content {
    width: 100%;
  }
  #history .container .content .text {
    font-size: 115%;
  }
}
@media screen and (min-width: 768px) and (max-width: 991.98px) {
  #about {
    padding: 5% 0;
  }
  #about .container {
    display: block;
  }
  #about .container #about-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  #about .container .about-section {
    max-width: 100%;
  }
  #about .container h2 {
    font-size: 1.8rem;
  }
  #about .container .section-title {
    width: 100%;
  }
  #about .container .section-title h3 {
    font-size: 220%;
  }
  #about .container .content {
    width: 100%;
    font-size: 150%;
  }
  #about #arrow-section #history-arrow {
    text-align: center;
    margin-top: 3%;
  }

  #team #team-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  #team #team-row .team-col {
    max-width: 100%;
  }
  #team .content {
    width: 100%;
  }
  #team .content .title {
    font-size: 250%;
  }
  #team .content .text {
    font-size: 150%;
  }

  #history {
    padding: 5% 0;
  }
  #history .container {
    display: block;
  }
  #history .container #history-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  #history .container #history-row .history-col {
    max-width: 100%;
  }
  #history .container .title {
    font-size: 250%;
    margin-bottom: 5%;
  }
  #history .container .content {
    width: 100%;
  }
  #history .container .content .text {
    font-size: 150%;
  }
}
@media screen and (max-width: 1199.98px) {
  #team .team-col .pic img {
    max-width: 100%;
    height: auto;
  }
}
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
  #about {
    padding: 0 0 5% 0;
  }
  #about .container {
    padding: 5% 5% 0 5%;
  }
  #about .container h2 {
    font-size: 2rem;
  }
  #about .container .section-title {
    width: 85%;
  }
  #about .container .section-title h3 {
    font-size: 250%;
  }
  #about .container .content {
    width: 100%;
    font-size: 110%;
  }
  #about #arrow-section {
    padding: 0;
  }
  #about #arrow-section #history-arrow {
    text-align: center;
    margin-top: 3%;
  }

  #team .content {
    padding: 3% 3% 0 3%;
    width: 100%;
  }
  #team .content .title {
    font-size: 200%;
    margin: 2% 0;
  }
  #team .content .text {
    font-size: 105%;
  }

  #history {
    padding: 1% 0;
  }
  #history .title {
    font-size: 200%;
    margin: 2% 0;
  }
  #history .history-col:first-of-type {
    padding: 3% 3% 0 3%;
  }
  #history .history-col:not(:first-of-type) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #history .content {
    width: 100%;
  }
  #history .content .text {
    font-size: 105%;
  }
}
@media screen and (min-width: 1200px) {
  #about .container {
    padding-top: 10%;
  }
  #about .container #title-row {
    padding-left: 1%;
  }

  #team {
    padding: 5% 0 4% 0;
  }
  #team .team-col .pic img {
    width: 815px;
    height: 465px;
    padding-left: 2%;
  }
  #team .team-col .content {
    padding: 0% 0% 0 17%;
    width: 100%;
  }
  #team .team-col .content .title {
    margin: 2% 0;
  }

  #history {
    padding: 0;
  }
  #history .title {
    margin: 2% 0;
  }
  #history .history-col:first-of-type {
    padding: 0 0% 3% 2%;
  }
  #history .history-col:not(:first-of-type) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-left: 4%;
  }
  #history .content {
    width: 100%;
  }
}
.carousel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.carousel .carousel-outer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.carousel .carousel-wrapper {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  scroll-snap-align: center;
  overflow: scroll;
  max-width: 100%;
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.carousel .carousel-wrapper::-webkit-scrollbar {
  display: none;
}
.carousel .carousel-wrapper > div {
  scroll-snap-align: center;
}
.carousel .carousel-wrapper > * {
  margin: 25px 100px;
}
.carousel .chevron {
  cursor: pointer;
}
.carousel .chevron img {
  max-height: 200px;
}
.carousel img {
  max-width: 200px;
  max-height: 75px;
  width: auto;
  height: auto;
}

#contact-wrap {
  background-image: url("../img/device_sofutech.svg");
  background-repeat: no-repeat;
  background-position: -1100px;
}
#contact-wrap .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
#contact-wrap .container #contactInfo {
  padding-left: 17%;
}
#contact-wrap .container #contact {
  font-weight: 400;
}
#contact-wrap .container h1 {
  font-size: 65px;
  font-weight: 500;
  margin-bottom: 1rem;
}
#contact-wrap .container h2 {
  color: var(--accent1);
  font-weight: 300;
  font-size: 23px;
  margin-bottom: 32px;
  font-weight: 400;
  margin-bottom: 0.5rem;
  margin-top: 2.5rem;
}
#contact-wrap .container p {
  font-size: 26px;
  font-weight: 500;
}
#contact-wrap .container p a {
  color: black;
  font-size: 26px;
  font-weight: 500;
}
#contact-wrap .container #contactMap > p {
  font-weight: 400;
  font-size: 20px;
  margin-top: 3%;
}

@media (max-width: 575.98px) {
  #contact-wrap .container p {
    font-size: 100%;
  }
}
@media (max-width: 767.98px) {
  #contact-wrap {
    padding: 0;
    background-image: none;
  }
  #contact-wrap .container #contactInfo {
    padding-left: 15px !important;
  }
}
@media (max-width: 991.98px) {
  #contact-wrap {
    background-position: -1140px;
  }
  #contact-wrap .container #contactInfo {
    padding-left: 23%;
  }
  #contact-wrap .container p:not(:first-of-type) {
    font-size: 130%;
  }
  #contact-wrap .container h1 {
    font-size: 150%;
  }
}
@media (max-width: 1199.98px) {
  #contact-wrap .container #contactMap {
    padding-right: 15px;
  }
}
.Flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  list-style: none;
  padding: 0 1%;
  /** Optional for OPs exact layout */
}
.Flex .Flex-item {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  position: relative;
  text-align: center;
  line-height: 9rem;
  padding: 0 3%;
  margin-bottom: 4%;
  width: 20rem;
  max-width: 20rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.Flex .Flex-item img {
  max-width: 251px;
  max-height: 98px;
  width: auto;
  height: auto;
}
.Flex li:nth-child(2) {
  border-left: none !important;
}
.Flex .Flex-item {
  border-left: solid 1px black;
}
.Flex .Flex-item:last-child {
  text-align: right;
}

/* #region clients */
.client-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}
.client-list .client .icon {
  width: 75px;
  height: 75px;
  background-color: var(--accent2);
}

.client-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.client-icon img {
  max-width: 200px;
  max-height: 75px;
  width: auto;
  height: auto;
}

.clients-list {
  /* 
  TODO: add line between flex items try out
  https://stackoverflow.com/questions/41631136/add-dividing-line-between-flex-items-with-equal-space-distribution

  */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* display: inline-flex; */
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 12px;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
}
.clients-list .lead {
  width: 40rem;
  font-weight: 500;
  font-size: 75px;
  line-height: 1;
}
.clients-list .client-icon {
  margin: 3% 5%;
  min-width: 200px;
  min-height: 100px;
}

@media (max-width: 575.98px) {
  #confiance {
    padding-bottom: 5%;
  }
  #confiance .clients-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  #confiance .clients-list .lead {
    text-align: center;
    width: 100%;
    font-size: 200%;
    margin: 0;
  }
}
@media screen and (min-width: 576px) and (max-width: 767.98px) {
  #confiance {
    padding-bottom: 10%;
  }
  #confiance .clients-list .lead {
    text-align: center;
    width: 100%;
    font-size: 250%;
    margin-right: 0;
  }
}
@media screen and (max-width: 991.98px) {
  #confiance {
    padding-top: 0;
  }

  #last-client {
    display: none;
  }
}
@media screen and (min-width: 768px) and (max-width: 991.98px) {
  #confiance .clients-list .lead {
    width: 50%;
    font-size: 300%;
  }
}
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
  #confiance .clients-list .lead {
    font-size: 350%;
  }
}
footer {
  background-color: var(--dark2);
  padding: 0 3.7%;
  padding-top: 1.4%;
  color: white;
  min-height: 19.5rem;
}
footer .footer-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-top: 1%;
}
footer .footer-block .block-title {
  color: var(--accent1);
  font-size: 19px;
  font-weight: 400;
  margin-bottom: 2%;
}
footer .footer-block .block-content {
  font-size: 26px;
  font-weight: 500;
}
footer .footer-block .block-content p {
  margin-bottom: 0;
  line-height: 1.3;
}
footer .footer-block .block-content p a {
  color: white;
}
footer .footer-block .block-content p a:hover {
  color: white;
}
footer .contact-line {
  color: var(--accent1);
  font-size: 26px;
  margin-top: 16%;
  font-weight: 900;
  padding-bottom: 16px;
}
footer .contact-line a:hover {
  color: unset;
  text-decoration: none !important;
}
footer .contact-line a {
  color: unset;
}
footer .contact-line a p {
  border-bottom: 1px solid var(--accent1);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding-bottom: 5%;
}
footer .copyright-line {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: var(--accent1);
  font-size: 12px;
  font-weight: 400;
  padding-top: 2.5%;
}
footer .privacy-policy a p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: var(--accent1);
  font-size: 12px;
  font-weight: 400;
}
footer .socials {
  font-size: 1.5rem;
  padding-top: 1%;
}
footer .socials img {
  width: 54px;
  height: 54px;
}

@media (max-width: 767.98px) {
  footer {
    padding-top: unset;
    padding: 3.7%;
  }
  footer #footer-row {
    text-align: center;
  }
  footer #footer-row .footer-block {
    padding: 3.7% 0 0 0;
  }
  footer #footer-row .footer-block .contact-line {
    margin-top: 3.7%;
    text-align: -webkit-center;
    padding-bottom: unset;
  }
}
@media (max-width: 991.98px) {
  footer #footer-logo {
    padding: unset;
  }
  footer .footer-block:nth-child(2) {
    padding-left: unset;
  }
  footer .footer-block {
    padding: 1% 0 0 0;
  }
  footer .footer-block .block-content {
    font-size: 100%;
  }
  footer .contact-line {
    font-size: 110%;
  }
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
  footer .footer-block .block-content {
    font-size: 115%;
  }
  footer .contact-line {
    font-size: 110%;
  }
}
@media (max-width: 1199.98px) {
  footer #footer-logo img {
    max-width: 100%;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1400px) {
  footer .footer-block .block-content {
    font-size: 125%;
  }
  footer .contact-line {
    font-size: 125%;
  }
}
@media (max-width: 1399.98px) {
  footer {
    min-height: unset;
  }
  footer .footer-block:nth-child(2) {
    padding-left: 3%;
  }
  footer .footer-block {
    padding-left: unset;
  }
}
header {
  background-color: var(--dark2);
  padding: 0 3.7%;
}
header .site-header {
  height: 114px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
header .site-header h1 {
  font-size: 2em;
}
header .site-header nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
}
header .site-header nav ul li {
  list-style: none;
}
header .site-header nav ul li a {
  text-decoration: none;
}
header .site-header nav .navbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
header .site-header nav .nav-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0;
}
header .site-header nav .nav-menu .nav-item .nav-link {
  color: white;
  padding: 0%;
}
header .site-header nav a {
  -webkit-transition: ease-in-out color 0.15s;
  transition: ease-in-out color 0.15s;
  margin: 0 0 0 3rem;
  font-size: 21px;
  font-weight: 500;
}
header .site-header nav a:hover {
  color: var(--accent1);
  text-decoration: none;
}
header .site-header nav a.active {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--accent1);
}
header .site-header nav a.locale {
  color: var(--accent1);
}
header .site-header nav .hamburger {
  display: none;
}
header .site-header nav .bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: white;
}

@media (max-width: 991.98px) {
  header .site-header .navbar {
    padding: 0.5rem 1rem;
  }
  header .site-header nav .nav-menu {
    position: fixed;
    padding: 0;
    left: -100%;
    z-index: 999;
    top: 7rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background-color: #fff;
    width: 100%;
    text-align: center;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    -webkit-box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
            box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
  }
  header .site-header nav .nav-menu .nav-item {
    margin: 0 !important;
  }
  header .site-header nav .nav-menu .nav-item .nav-link {
    color: black;
  }
  header .site-header nav .nav-menu .nav-item a:hover {
    color: var(--accent1);
    text-decoration: none;
  }
  header .site-header nav .nav-menu .nav-item a.active {
    padding-bottom: unset;
    border-bottom: 1px solid var(--accent1);
  }
  header .site-header nav .nav-menu.active {
    left: 0;
    z-index: 999;
    padding: 0;
  }

  .hamburger {
    display: block !important;
    cursor: pointer;
  }

  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active .bar:nth-child(1) {
    -webkit-transform: translateY(8px) rotate(45deg);
            transform: translateY(8px) rotate(45deg);
  }

  .hamburger.active .bar:nth-child(3) {
    -webkit-transform: translateY(-8px) rotate(-45deg);
            transform: translateY(-8px) rotate(-45deg);
  }
}
.landing-hero {
  max-height: 947px;
  height: 60rem;
  background-image: url("../img/Stocksy_txpd46924fbDfP300_Medium_1331730_Crop.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.landing-hero .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-image: url("../img/visuel_cover.svg");
  background-repeat: no-repeat;
  background-position: right;
  width: 100%;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.landing-hero .content p {
  width: 500px;
  margin-right: 200px;
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 74px;
  font-weight: 700;
  color: white;
  line-height: 1.2;
}
.landing-hero .content a {
  display: block;
  padding-top: 5%;
}
.landing-hero .content img {
  -ms-flex-item-align: center;
      align-self: center;
  -webkit-filter: grayscale(1) invert(1);
          filter: grayscale(1) invert(1);
}

@media (max-width: 575.98px) {
  .landing-hero {
    min-height: 20rem;
    max-height: 20rem;
  }
  .landing-hero .content p {
    width: 10rem;
    font-size: 160%;
    margin-right: 4rem;
  }
  .landing-hero .content a {
    width: 40%;
  }
  .landing-hero .content a img {
    max-width: 100%;
  }
}
@media screen and (min-width: 576px) and (max-width: 767.98px) {
  .landing-hero {
    min-height: 30rem;
    max-height: 30rem;
  }
  .landing-hero .content p {
    width: 18rem;
    font-size: 230%;
    margin-right: 3rem;
  }
  .landing-hero .content a {
    width: 40%;
  }
  .landing-hero .content a img {
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 991.98px) {
  .landing-hero {
    min-height: 35rem;
    max-height: 35rem;
  }
  .landing-hero .content p {
    width: 20rem;
    font-size: 300%;
    margin-right: 6rem;
  }
  .landing-hero .content a {
    width: 40%;
  }
  .landing-hero .content a img {
    max-width: 100%;
  }
}
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
  .landing-hero {
    min-height: 38rem;
    max-height: 38rem;
  }
  .landing-hero .content p {
    width: 20rem;
    font-size: 320%;
    margin-right: 8rem;
  }
  .landing-hero .content a {
    width: 40%;
  }
  .landing-hero .content a img {
    max-width: 100%;
  }
}
@media (max-width: 1399.98px) {
  .landing-hero {
    width: 100%;
  }
  .landing-hero .content {
    background-size: contain;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .landing-hero {
    min-height: 38rem;
    max-height: 44.4rem;
  }
  .landing-hero .content p {
    width: 21rem;
    font-size: 380%;
  }
}
.plus-link {
  font-weight: 100;
  border: 1px solid var(--accent1);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  border-radius: 100%;
  width: 34px;
  height: 34px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 35px;
  color: var(--accent1);
}
.plus-link.white {
  color: var(--background);
  border: 1px solid var(--background);
}
.plus-link a {
  color: inherit;
}
.plus-link a:hover {
  color: inherit;
  text-decoration: none;
}

#products {
  background-image: url("../img/visuel_page2.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 0;
  padding-bottom: 12%;
}
#products .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
}
#products .landing {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-bottom: 5%;
  padding-top: 5%;
}
#products.section .section-title {
  padding-top: 5%;
}
#products.section .section-title h2 {
  color: var(--accent1);
  font-size: 23px;
  margin-bottom: 32px;
  font-weight: 400;
  margin-bottom: 16px;
}
#products.section .section-title h3 {
  font-size: 65px;
  line-height: 1;
  font-weight: 500;
  width: 90%;
}

#confiance {
  background-color: #F7F7F7;
  padding-top: 5%;
  padding-bottom: 3%;
}

.products-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.products-list .product:first-of-type {
  margin-bottom: 3%;
}
.products-list .product {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding-right: 6%;
}
.products-list .product .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.products-list .product .lead {
  color: var(--accent1);
  font-size: 46px;
  font-weight: 500;
  line-height: 1;
  margin-top: 46px;
  margin-bottom: 25px;
}
.products-list .product .product-icon {
  width: 7.6rem;
  height: 7.6rem;
}
.products-list .product .content {
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
}
.products-list .product:nth-child(3) .lead {
  max-width: 75%;
}

@media (max-width: 575.98px) {
  .products-list .product .content {
    font-size: 100%;
  }

  #products.section .section-title h3 {
    font-size: 150%;
  }
}
@media screen and (max-width: 767.98px) {
  .products-list .product .lead {
    font-size: 150%;
  }
  .products-list .product .product-icon {
    width: 5rem;
    height: 5rem;
  }
}
@media screen and (min-width: 576px) and (max-width: 767.98px) {
  #products.section .section-title h3 {
    font-size: 175%;
  }
}
@media screen and (min-width: 768px) and (max-width: 991.98px) {
  .products-list .product .lead {
    font-size: 175%;
  }
  .products-list .product .product-icon {
    width: 5.5rem;
    height: 5.5rem;
  }

  #products.section .section-title h3 {
    font-size: 200%;
  }
}
@media screen and (max-width: 1199.98px) {
  .products-list .product .lead {
    margin-top: 3%;
    margin-bottom: 3%;
  }
}
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
  .products-list .product .lead {
    font-size: 200%;
  }
  .products-list .product .product-icon {
    width: 6rem;
    height: 6rem;
  }

  #products.section .section-title h3 {
    font-size: 250%;
  }
}
#blueBackground {
  background-color: var(--accent3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' transform='rotate(-90)' width='600' height='600' viewBox='900 0 220 450'%3E%3Cg data-name='Groupe 514'%3E%3Cg data-name='Groupe 449'%3E%3Cpath data-name='Trac%C3%A9 111' d='M94.44 16.37 78.679-1.083l-50.8 45.864 15.68 17.453c77.482 86.055 116.755 197.411 110.647 313.425S97.308 598.225 11.2 675.74l-17.448 15.68 45.671 50.88 17.5-15.761C263.069 541.065 279.878 222.548 94.44 16.37' transform='rotate(57 -74.186 1493.946)' style='fill:%230c85a8'/%3E%3C/g%3E%3Cg data-name='Groupe 450'%3E%3Cpath data-name='Trac%C3%A9 112' d='M720.618 163.824C626.456 59.172 497.019-2.582 356.059-10.059 215.1-17.633 79.861 30.213-24.775 124.406l-22.9 20.627 79.287 87.957 22.851-20.482C222.271 61.589 481.581 75.287 632.5 243.03l20.563 22.819 88.15-79.142Z' transform='rotate(57 380.756 1016.487)' style='fill:%231a4c7d'/%3E%3C/g%3E%3Cpath data-name='Trac%C3%A9 113' d='m773.568 653.521-13.424 12.151c-75.258 67.619-171.869 101.751-273.7 96.595-101.236-5.383-194.3-49.748-261.9-124.925-67.668-75.177-101.961-172.4-96.595-273.652 5.334-101.316 49.7-194.3 124.893-262l13.44-12.07L146.8-43.236l-13.425 12.151C-95.332 174.674-114.058 528.177 91.669 756.884 201.7 879.2 353.96 941.451 506.8 941.451c132.983 0 266.449-47.2 372.858-142.942l13.456-12.086Z' transform='rotate(57 347.27 785.756)' style='fill:%231c2229'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  position: relative;
  background-position: bottom right;
  background-size: 25%;
}

.section {
  padding: 3.7%;
}
.section .section-header {
  color: var(--accent1);
  font-size: 23px;
  margin-bottom: 32px;
  font-weight: 400;
}
.section.grey {
  background-color: var(--grey);
}
.section.blue .section-header {
  color: var(--background);
  font-size: 23px;
  font-weight: 400;
}
.section.blue .img-wrapper > img {
  max-width: 100%;
  width: 1088px;
  height: auto;
}
.section .content-blue {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.section .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.section .main-text {
  font-size: 38px;
  line-height: 1.2;
  width: 484px;
  font-weight: 500;
}
.section .main-text p {
  margin-bottom: 10%;
}
.section .block-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: 52px;
}
.section .block-list .block {
  background-color: var(--background);
  width: 100%;
  max-width: 260px;
  height: 363px;
  margin-left: 16px;
  padding: 21px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-shadow: 0 0 26px var(--grey2);
          box-shadow: 0 0 26px var(--grey2);
}
.section .block-list .block .text {
  color: var(--accent1);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.3;
}
.section .block-list .block img {
  width: 92px;
  height: 92px;
}
.section.bg-accent1 {
  background-color: var(--accent1);
}
.section.bg-accent1 .section-title h2 {
  color: var(--foreground);
  font-size: 23px;
}
.section.bg-accent1 .section-title h3 {
  color: var(--background);
  font-size: 65px;
  font-weight: 500;
  width: auto;
}
.section.bg-accent2 {
  background-color: var(--accent2);
}

@media (max-width: 767.98px) {
  .section .content .block-list {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .section .content .block-list .block:first-of-type {
    margin-left: 1%;
  }
  .section .content .block-list .block {
    margin: 0;
    -webkit-box-flex: 40%;
        -ms-flex: 40%;
            flex: 40%;
    margin: 1%;
    height: 15rem;
  }
}
@media (max-width: 991.98px) {
  .section .content .main-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    width: 100%;
  }
  .section .content .block-list {
    margin-left: 0;
  }
  .section .content .block-list .block .text {
    font-size: 120%;
  }
  .section.blue .main-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .section.blue .main-text p {
    margin-bottom: 3%;
  }
}
@media (max-width: 1199.98px) {
  .section .block-list .block {
    width: 100%;
    padding: 2%;
  }
  .section.blue .main-text {
    font-size: 160%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1400px) {
  .section .content .block-list .block:first-of-type {
    margin-left: 0;
  }
  .section .content .block-list .block {
    margin-left: 1.3%;
  }
}
@media (max-width: 1399.98px) {
  .section .content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .section .content .main-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    width: 100%;
  }
  .section .content .main-text p {
    margin-bottom: 3%;
  }
  .section .content .block-list {
    margin-left: 0;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .section.blue .main-text {
    width: 100%;
    font-size: 200%;
  }
}