* {
   padding: 0px;
   margin: 0px;
   box-sizing: border-box;
}
body {
   scroll-behavior: smooth;
   font-size: 16px;
   user-select: none;
   background-color: rgb(255, 255, 255);
}

@font-face {
   font-family: "Upheaval";
   src: url("./assets/upheavtt.ttf") format("truetype");
   /* Vous pouvez également spécifier les autres formats de police ici, si nécessaire. */
}
@font-face {
   font-family: "VCR OSD Mono";
   src: url("./assets/VCR_OSD_MONO_1.001-1.ttf") format("truetype");
   /* Vous pouvez également spécifier les autres formats de police ici, si nécessaire. */
}
@font-face {
   font-family: "Minecraft";
   src: url("./assets/Minecraft.ttf") format("truetype");
   /* Vous pouvez également spécifier les autres formats de police ici, si nécessaire. */
}

:root {
   --colorA: #02112f;
       --colorHeader: #03122b;
   --colorB: #9f4466;
   --colorC: #d1a617;
   --colorCPlus: #d0bf8a;
   --colorAFade: #021334bb;
   --colorBFade: #9f4465a7;
   --colorD: #678bf6;
}

header {
   /* background-image: url(assets/Capture\ d’écran\ 2023-08-11\ à\ 11.26.00.png); */
   background-color: var(--colorHeader);
   background-repeat: no-repeat;
   background-position: contain;
   position: relative;
   height: 650px;
   height: 100%;
   width: 100vw;
   display: grid;
   overflow: hidden;
   box-shadow: 5px 0px 5px black;
   grid-template-columns: 50% 50%;
   grid-template-rows: 20% 50% 30%;
}
.header-menu-hamburger {
   visibility: hidden;
   position: fixed;
}

.circle {
   position: relative;
   height: 270px;
   width: 270px;
   background-color: rgba(0, 0, 255, 0);
   border-radius: 50%;
   margin-top: 230px;
   margin-left: 110px;
   animation: turn 90s infinite;
}
@keyframes turn {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}

.satelit {
   height: 3em;
   z-index: 9999999999999;
   /* position: absolute; */
}
.header_title {
   grid-column: 1;
   position: absolute;
   display: flex;
   flex-direction: column;
   top: 470px;
   left: 140px;
   z-index: 99999;
   width: 30%;
}
.title {
   padding: 10px;
   font-size: 4em;
   color: white;
   font-family: Tektur;
   text-align: justify;
   font-weight: 900;
   width: 100%;
   line-height: 20px;
   transition: 0.2s ease-in-out;
}

.title span {
   font-size: 0.3em;
   color: #f1f1e6;
   font-family: Agdasima;
   font-weight: 200;
   width: 100%;
   letter-spacing: 3px;
   border-bottom: solid 1px orange;
}
.subtitle {
   font-size: 1em;
   color: #f1f1e6;
   font-family: Kanit;
   letter-spacing: 5px;
   margin-top: -40px;
}

.header_menu {
   grid-column: 1/4;
   grid-row: 1;
   display: flex;
   align-items: center;
   align-content: center;
   justify-content: space-evenly;
   width: 100%;
   height: 150px;
}

/* ++++++++++++++++
++++++++++++++++
MENU .burger
+++++++++++++++++
+++++++++++++++ */

.burger {
   position: fixed;
   top: 20px;
   left: 20px;
   width: 40px;
   height: 40px;
   cursor: pointer;
   z-index: 99999999999;
   visibility: hidden;
   display: flex;
   justify-content: center;
   border-radius: 5%;
}
.burger span {
   display: block;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background-color: white;
   width: 90%;
   height: 2px;
   transition: background-color 0.7s ease-in-out;
}
.burger span::before,
.burger span::after {
   content: "";
   position: absolute;
   background-color: white;
   width: 100%;
   height: 2px;
   transition: 0.7s ease-in-out;
}
.burger span::before {
   transform: translateY(-10px);
}
.burger span::after {
   transform: translateY(10px);
}
.burger.active span {
   background-color: transparent;
}
.burger.active span::before {
   transform: translateY(0px) rotateZ(45deg);
}
.burger.active span::after {
   transform: translateY(0px) rotateZ(-45deg);
}

.menu_title {
   color: rgb(255, 255, 255);
   font-size: 1.3em;
   font-family: Agdasima;
   font-weight: 100;
   transform: translateX(0px);
   text-shadow: 0px 0px 100px white;
   line-height: 60px;
   text-align: center;
   text-decoration: none;
}
.menu_title:hover {
   color: #fddd55;
   border-bottom: #6ffca4 solid 2px;
}
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ELEMENTS HEADER */

.rocket {
   height: 100px;
}

.rocket_wrapper {
   z-index: 999;
   position: absolute;
   top: 86%;
   left: 60%;
   animation: rocketDecollage 10s;
   animation-timing-function: cubic-bezier(0.96, -0.01, 0, 1.3);
}
.rocket_wrapper::after {
   content: "";
   position: absolute;
   height: 50px;
   width: 10px;
   top: 98px;
   left: 29px;
   border-radius: 30%;
   background: linear-gradient(to top, blue, orange, transparent);
   z-index: 990;
   transform: rotate(182deg);
   filter: blur(3px);
}
.stars {
   box-shadow: 0px 0px 20px 1px yellow;
   position: absolute;
   background-color: rgb(255, 255, 26);
   height: 1px;
   border-radius: 50%;
   z-index: O;
}
.desert {
   grid-column: 1/4;
   position: absolute;
   width: 100%;
   height: 20%;
   margin-top: 555px;
   z-index: 3;
}

.moon {
   position: absolute;
   height: 70%;
   z-index: 2;
   left: 0px;
   top: 80%;
   grid-column: 1;
}

/* +++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++
BLOC PROMESSE VALEUR
+++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++ */

.container-promiseValue {
   grid-column: 2;
   grid-row: 2;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   gap: 20px;
   height: 180%;
   width: 100%;
   padding: 20px;
   /* position: relative; */
   z-index: 999999999;
}

.promise {
   color: #f1f1e6;
   font-weight: 100;
   font-size: 2.3em;
   font-family: Kanit;
   line-height: 38px;
   text-transform: uppercase;
   width: 100%;
}
.promise-subTitle {
   color: #f1f1e6;
   font-size: 1em;
   font-family: Kanit;
   width: 100%;
}
.socialPromise {
   color: white;
   font-size: 0.8em;
   font-family: Kanit;
   font-weight: 200;
   background-color: (var--colorB);
   width: 100%;
}
.button-promiseValue {
   cursor: pointer;
   background-color: var(--colorC);
   height: 50px;
   width: 30%;
   color: white;
   font-family: kanit;
   font-weight: 400;
   border: none;
   font-size: 0.9em;
   transition: 0.3s ease-in-out;
}
.button-promiseValue-flash {
   height: 50px;
   width: 30%;
   background-color: rgba(255, 255, 255, 0.714);
   z-index: -1;
   /* opacity: 0; */
   transform: scale(0);
   transition: 0.3s ease-in-out;
   border: none;
   margin-top: -70px;
}
.button-promiseValue:hover + .button-promiseValue-flash {
   animation: flash 0.2s ease-in-out;
}
.button-promiseValue:hover {
   transform: scale(1.1);
}
@keyframes flash {
   0% {
      opacity: 1;
      transform: scale(1);
      box-shadow: 0px 0px 100px white;
   }
   100% {
      opacity: 0.1;
      transform: scale(1.2);
      box-shadow: 0px 0px 100px white;
   }
}

/* ######################################## */
/* ######################################## */
/* SECTION FEATURES AND BENEFITS */
/* ######################################## */
/* ######################################## */

.section-featuresBenefits {
   background-color: var(--colorA);
   margin-top: 5px;
   box-shadow: 3px 0px 5px black;
   display: flex;
   flex-direction: column;
   min-height: 700px;
   overflow: hidden;
   padding: 20px;
   background-image: url(assets/Capture\ d’écran\ 2023-08-11\ à\ 11.26.00.png);
   background-repeat: no-repeat;
   background-position: contain;
}

.featuresBenefits-h2 {
   margin-top: 40px;
   color: white;
   font-family: Kanit;
   font-size: 5em;
   font-weight: 400;
   transform: translateX(2000px);
   background-color: var(--colorBFade);
   text-shadow: 2px 3px 10px #392d06;
   padding: 20px;
}
.featuresBenefits-h3 {
   color: white;
   font-family: Kanit;
   font-size: 2em;
   font-weight: 100;
   transform: translateX(-1000px);
   margin-top: 50px;
   text-transform: uppercase;
}
.featuresBenefits-h4 {
   color: white;
   font-family: Kanit;
   font-size: 3em;
   font-weight: 700;
   transform: translateX(1500px);
   text-transform: capitalize;
}
.container-features {
   display: flex;
   justify-content: center;
   gap: 20px;
   margin-top: 40px;
   padding: 30px;
   align-items: center;
   align-content: center;
}

.wrapper-features1,
.wrapper-features2,
.wrapper-features3 {
   display: flex;
   flex-direction: column;
   align-items: center;
   align-content: center;
   justify-content: center;
   width: 100%;
   border: rgb(101, 99, 99) solid 1px;
}
.feature {
   font-family: Kanit;
   font-weight: 300;
   color: #ffffff;
   font-size: 2.3em;
   text-align: center;
   width: 100%;
}
.benefit {
   font-family: Kanit;
   font-weight: 300;
   width: 100%;
   color: rgb(255, 255, 255);
   margin-bottom: 30px;
   text-align: justify;
   padding: 15px;
}
.wrapper-features-img1 {
   overflow: hidden;
   position: relative;
   height: 150px;
   width: 150px;
   border-radius: 50%;
   z-index: 0;
   transition: 0.5s ease-in-out;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   align-content: center;
   margin-top: 30px;
   margin-bottom: 20px;
   border: var(--colorC) solid 4px;
}
.features-img1 {
   position: absolute;
   background-image: url(./assets/pngegg\ -\ 2023-08-05T212123.499.png);
   background-repeat: no-repeat;
   background-size: 70%;
   background-position: center;
   height: 100px;
   width: 100px;
   transform: rotate(0deg);
   z-index: 99;
}
.backgroundColor-features-img1 {
   position: absolute;
   top: 0px;
   transform: translateX(190px);
   background: linear-gradient(var(--colorA), #614b7b);
   height: 200px;
   width: 200px;
   z-index: 0;
   border-radius: 50%;
}
.wrapper-features-img2 {
   overflow: hidden;
   position: relative;
   height: 150px;
   width: 150px;
   border-radius: 50%;
   z-index: 0;
   transition: 0.5s ease-in-out;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   align-content: center;
   margin-top: 30px;
   margin-bottom: 20px;
   border: var(--colorC) solid 4px;
}

.features-img2 {
   position: absolute;
   background-image: url(assets/pngegg\ -\ 2023-08-03T233538.155.png);
   background-repeat: no-repeat;
   background-size: 100%;
   background-position: center;
   height: 100px;
   width: 100px;
   z-index: 99;
   margin-left: 5px;
   transform: rotate(30deg);
}
.backgroundColor-features-img2 {
   position: absolute;
   top: 0px;
   transform: translateX(190px);
   background: linear-gradient(var(--colorA), #614b7b);
   height: 200px;
   width: 200px;
   z-index: 0;
   border-radius: 50%;
}
.wrapper-features-img3 {
   margin-top: 30px;
   overflow: hidden;
   position: relative;
   height: 150px;
   width: 150px;
   border-radius: 50%;
   z-index: 0;
   transition: 0.5s ease-in-out;
   align-items: center;
   justify-content: center;
   align-content: center;
   margin-bottom: 20px;
   border: var(--colorC) solid 4px;
}
.features-img3 {
   position: absolute;
   background-image: url(./assets/pngegg\ -\ 2023-08-04T085131.593.png);
   background-repeat: no-repeat;
   background-size: 80%;
   background-position: center;
   height: 100px;
   width: 100px;
   border-radius: 50%;
   margin-left: 20px;
   margin-top: 10px;
   z-index: 99;
}
.backgroundColor-features-img3 {
   position: absolute;
   top: 0px;
   transform: translateX(190px);
   background: linear-gradient(var(--colorA), #614b7b);
   height: 200px;
   width: 200px;
   z-index: 0;
   border-radius: 50%;
}
.img-wrapperFeatures2 {
   height: auto;
   width: 100px;
   transform: rotate(20deg);
   border-radius: 50%;
   border: #d1a617 2px solid;
   padding: 20px;
   margin-bottom: 20px;
}
.img-wrapperFeatures3 {
   height: 100px;
   width: 100px;
   border-radius: 50%;
   border: #d1a617 2px solid;
   padding: 20px;
   margin-bottom: 20px;
}

/* ++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++
SECTION CTA
++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++= */

.sectionCTA {
   margin-top: 5px;
   min-height: 500px;
   max-height: 2400px;
   background-image: url("./assets/pngegg\ \(73\).png");
   background-size: 180%;
   background-position: center;
   background-repeat: no-repeat;
   filter: saturate(100%);
   background-color: #021334;
   box-shadow: 3px 0px 5px black;
   width: 100vw;
   overflow: hidden;
}

.marquee_wrapper {
   background-color: transparent;
   display: flex;
   overflow: hidden;
   align-items: center;
   padding: 40px;
   z-index: 99999;
}

.marquee_txt {
   margin-top: 40px;
   font-size: 8em;
   text-transform: uppercase;
   white-space: nowrap;
   font-family: kanit;
   font-weight: 700;
   letter-spacing: 1px;
   color: var(--colorD);
   animation: marquee 8s linear infinite;
   padding: 20px;
   z-index: 99999;
   margin-bottom: 20px;
   transform: translateX(100%);
   background-color: #0213349d;
}

@keyframes marquee {
   0% {
      transform: translateX(0%);
   }
   100% {
      transform: translateX(-100%);
   }
}

.marquee_txt span {
   font-weight: 900;
   color: transparent;
}

.sectionA_container_services {
   display: flex;
   flex-direction: column;
   width: 100%;
   align-items: center;
   align-content: center;
   justify-content: center;
   gap: 10px;
   margin-top: 250px;
   height: 100%;
}
.sectionA-wrapper-services {
   height: 100%;
   width: 70%;
   display: flex;
   flex-direction: column;
   align-items: center;
   box-shadow: 1px 1px 5px rgb(168, 168, 168);
   -webkit-backdrop-filter: blur(5px);
   backdrop-filter: blur(20px);
   padding: 30px;
}

.sectionA_title {
   font-family: Kanit;
   font-size: 3em;
   text-transform: uppercase;
   color: white;
}
.sectionA_title:hover {
   background-color: transparent;
   color: white;
}
.sectionA-titles-p {
   font-family: Kanit;
   font-size: 1em;
   color: white;
   padding: 5%;
}
.sectionA-buttons {
   background-color: var(--colorC);
   width: 20%;
   height: 3em;
   border-radius: 3px;
   transition: 0.2s ease-in-out;
   border: none;
   color: rgb(255, 255, 255);
   font-weight: 600;
   font-size: 0.9em;
   cursor: pointer;
   font-family: Kanit;
}
.sectionA-buttons:hover {
   transform: scale(1.1);
   background-color: var(--colorCPlus);
}
.sectionA-buttons:active {
   box-shadow: 2px 2px 5px inset black;
}

/* SECTION SOCIAL-PROOF */
/* ######################################## */
/* ######################################## */
/* ######################################## */

.section-socialProof {
   background: linear-gradient(to left, rgb(1, 11, 31), rgba(2, 19, 52, 1));
   background-image: url(assets/Capture\ d’écran\ 2023-08-11\ à\ 11.26.00.png);
   min-height: 600px;
   color: #ffffff;
   margin-top: 5px;
   box-shadow: 3px 0px 5px black;
   width: 100vw;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   background-size: cover;
}
.title-sectionSocialProof {
   font-size: 2.7em;
   color: white;
   font-family: Kanit;
   color: white;
   margin: 80px auto auto auto;
}

.title-sectionSocialProof span {
   font-size: 1.6em;
   color: white;
   font-family: Tektur;
   color: white;
}

.auto_text {
   display: flex;
   justify-content: center;
   color: #d1a617;
   font-family: Minecraft;
   text-transform: uppercase;
   font-size: 0.7em;
   animation: autoTxt 10s steps(50);
   overflow: hidden;
   white-space: wrap;
   text-shadow: 0px 0px 60px rgb(158, 158, 251);
   height: 100px;
   line-height: 40px;
   letter-spacing: 5px;
   margin: 30px auto auto auto;
}
.Typewriter__wrapper {
   width: 100%;
}
.Typewriter__cursor {
   color: transparent;
}
.container-socialProof {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-template-rows: 1fr;
   gap: 30px;
   padding: 30px;
   height: 100%;
}
.container-socialProofA,
.container-socialProofB {
   display: flex;
   flex-direction: row;
   padding: 20px;
   gap: 30px;
   transition: 0.3s;
   overflow: hidden;
}
.wrapper-socialProof1,
.wrapper-socialProof2,
.wrapper-socialProof3 {
   display: flex;
   flex-direction: column;
   padding: 20px;
   cursor: pointer;
}
.social-proof {
   font-family: Kanit;
   font-weight: 400;
   color: rgb(255, 252, 252);
   line-height: 10px;
}
.social-proof span {
   font-size: 4ch;
   color: white;
   font-family: Kanit;
}
.full-text {
   font-family: Kanit;
   font-weight: 200;
   display: none;
   color: white;
}
.title-section-socialProof {
   font-family: kanit;
   font-weight: 400;
   text-transform: uppercase;
   color: var(--colorC);
   margin-bottom: 20px;
}

.bloc {
   flex: 1;
   transition: 0.9s ease-in-out;
   background-color: transparent;
}

.bloc:hover {
   flex: 2;
   border-radius: 5px;
   background-color: var(--colorBFade);
   opacity: 1;
   box-shadow: 1px 1px 5px black;
   color: white;
   box-shadow: 2px 2px 5px black;
}
.bloc:hover .title-section-socialProof {
   color: white;
   font-weight: 500;
}

/* FOOTER*/
/* ######################################## */
/* ######################################## */
/* ######################################## */

footer {
   width: 100vw;
   overflow: hidden;
}
.footer-content {
   margin-top: 5px;
   display: flex;
   flex-direction: column;
   padding: 50px;
   gap: 20px;
   align-items: center;
   font-family: Kanit;
   /* color: white; */
   background: linear-gradient(to top, #021334, #010e28);
   box-shadow: 3px 0px 5px black;
}

.footer-title {
   font-size: 3.6em;
   color: #ffffff;
   font-family: Tektur;
   text-align: center;
   font-weight: 900;
   width: 100%;
   text-shadow: 0px 0px 130px white;
}
.footer-title span {
   font-size: 0.5em;
   color: #f1f1e6;
   font-family: Kanit;
   text-align: center;
   font-weight: 100;
   width: 100%;
   text-shadow: 0px 0px 130px white;
   border-bottom: solid 1px orange;
}
.contact-footer {
   cursor: pointer;
   color: white;
}
.contact-footer:hover {
   cursor: pointer;
   color: var(--colorC);
}
.container-footer-title {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   width: 80%;
   align-items: center;
   height: 100%;
   line-height: 30px;
}
.container-footer-title p {
   font-size: 1em;
   color: #f1f1e6;
   font-family: Kanit;
   text-align: center;
   font-weight: 300;
   width: 100%;
   margin-top: 20px;
}
.social-icon {
   font-size: 2em;
   color: var(--colorC);
   padding: 10px;
   transition: 0.2s ease-in-out;
}
.social-icon:hover {
   color: #5951d2;
   padding: 10px;
}
nav {
   display: flex;
   flex-direction: column;
   gap: 10px;
   align-items: center;
   text-align: justify;
   margin-bottom: 20px;
   margin-top: 30px;
}

.footer-link {
   color: white;
   text-decoration: none;
   font-weight: 200;
}
.footer-link:hover {
   color: var(--colorC);
   text-decoration: none;
}

/* #######################################################################################################################################################@####*/
/* ############################################################################################################################################################@ */
/* ############################################################################################################################################################## *
/* #######################################################################################################################################################@####*/
/* ############################################################################################################################################################@ */
/* ############################################################################################################################################################## *
/* #######################################################################################################################################################@####*/
/* ############################################################################################################################################################@ */
/* ############################################################################################################################################################## */
/* #######################################################################################################################################################@####*/
/* ############################################################################################################################################################@ */
/* ############################################################################################################################################################## *
/* #######################################################################################################################################################@####*/
/* ############################################################################################################################################################@ */
/* ############################################################################################################################################################## *
/* #######################################################################################################################################################@####*/
/* ############################################################################################################################################################@ */
/* ############################################################################################################################################################## */

@media screen and (max-width: 770px) {
   header {
      position: relative;
      height: 650px;
      width: 100vw;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 5px 0px 5px black;
      grid-template-columns: 1fr;
      grid-template-rows: 100%;
      background-image: url(./assets/Capture\ d’écran\ 2023-08-11\ à\ 11.26.00.png);
      background-size: cover;
   }
   .header_title {
      grid-row: 1;
      position: absolute;
      display: flex;
      flex-direction: column;
      top: 470px;
      left: 60px;
      z-index: 99999;
      width: 80%;
   }
   .satelit {
      height: 3em;
      z-index: 9999999999999;
   }
   .circle {
      position: relative;
      height: 400px;
      width: 400px;
      background-color: rgba(0, 0, 255, 0);
      border-radius: 50%;
      margin-top: 400px;
      margin-left: 0px;
      animation: turn 80s infinite;
   }

   .moon {
      position: absolute;
      height: 70%;
      z-index: 2;
      left: -50px;
      top: 80%;
      grid-column: 1;
   }
   .desert {
      grid-column: 1/4;
      position: absolute;
      width: 100%;
      height: 20%;
      margin-top: 560px;
      z-index: 3;
   }
   .rocket {
      height: 30px;
   }
   .rocket_wrapper {
      z-index: 999;
      position: absolute;
      top: 619px;
      left: 60%;
      animation: rocketDecollage 10s;
      animation-timing-function: cubic-bezier(0.96, -0.01, 0, 1.3);
   }
   .rocket_wrapper::after {
      content: "";
      position: absolute;
      height: 50px;
      width: 10px;
      top: 30px;
      left: 10px;
      border-radius: 30%;
      background: linear-gradient(to top, blue, orange, transparent);
      z-index: 990;
      transform: rotate(182deg);
      filter: blur(3px);
   }
   .header_menu {
      display: none;
   }
   .burger {
      position: fixed;
      width: 40px;
      height: 40px;
      cursor: pointer;
      z-index: 9999999999999999999999;
      visibility: visible;
      background-color: #522a58;
   }

   .header-menu-hamburger {
      position: fixed;
      display: flex;
      flex-direction: column;
      grid-column: 1/4;
      grid-row: 1;
      align-items: center;
      align-content: center;
      justify-content: space-evenly;
      width: 100%;
      height: 200px;
      background-color: var(--colorB);
      visibility: hidden;
      top: -200px;
      transition: 0.9s ease-in-out;
      z-index: 999999999;
   }
   .header-menu-hamburger-visible {
      position: fixed;
      display: flex;
      flex-direction: column;
      grid-column: 1/4;
      grid-row: 1;
      align-items: center;
      align-content: center;
      width: 100%;
      height: 240px;
      background-color: var(--colorB);
      z-index: 999999999;
      visibility: visible;
      top: 0px;
   }
   .menu_title {
      font-size: 1.1em;
      line-height: 30px;
      gap: 10px;
      padding: 10px;
   }
   .container-promiseValue {
      margin-top: -800px;
      grid-column: 1;
      grid-row: 1 / span 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
      height: 180%;
      width: 100%;
      padding: 20px;
      position: relative;
      z-index: 99999999;
   }

   .promise {
      color: #f1f1e6;
      font-weight: 500;
      font-size: 1.2em;
      font-family: Kanit;
      line-height: 24px;
      text-transform: uppercase;
      text-align: center;
      width: 100%;
   }
   .promise-subTitle {
      color: #f1f1e6;
      font-size: 0.6em;
      font-family: Kanit;
      text-align: center;
      width: 100%;
   }
   .socialPromise {
      color: #dd7062;
      font-size: 0.7em;
      font-family: Kanit;
      text-align: center;
      margin-left: 0px;
      width: 60%;
   }
   .button-promiseValue {
      font-size: 0.7em;
   }

   .featuresBenefits-h2 {
      font-size: 3em;
   }
   .featuresBenefits-h3 {
      font-size: 1em;
      margin-bottom: 20px;
   }
   .featuresBenefits-h4 {
      font-size: 2em;
      width: 80%;
   }
   .container-features {
      display: flex;
      margin-top: 60px;
      width: 100%;
      flex-direction: column;
      height: 100%;
      align-items: center;
      gap: 40px;
   }
   .wrapper-features1,
   .wrapper-features2,
   .wrapper-features3 {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 110%;
      padding: 10px;
   }
   .benefit {
      font-family: Kanit;
      font-weight: 300;
      width: 100%;
      color: rgb(255, 255, 255);
      margin-bottom: 30px;
      text-align: justify;
   }
   .sectionA-buttons {
      width: 70%;
   }
   .auto_text {
      display: flex;
      justify-content: center;
      color: #d1a617;
      font-family: Minecraft;
      text-transform: uppercase;
      font-size: 0.4em;
      animation: autoTxt 10s steps(50);
      overflow: hidden;
      white-space: wrap;
      text-shadow: 0px 0px 60px rgb(158, 158, 251);
      height: 100px;
      line-height: 40px;
      letter-spacing: 5px;
      margin-top: 20px;
      margin-left: 30px;
      display: none;
   }
   .sectionA_title {
      font-size: 2em;
   }
   .sectionA-wrapper-services {
      box-shadow: none;
      border: rgb(30, 29, 29) solid 1px;
      align-content: baseline;
      align-items: baseline;
   }
   .sectionA-titles-p {
      padding: 0px;
      margin-bottom: 10px;
   }
   .sectionCTA {
      margin-top: 5px;
      min-height: 500px;
      max-height: 2400px;
      background-image: url("./assets/pngegg\ \(73\).png");
      background-size: 670%;
      background-position: center;
      background-repeat: no-repeat;
      filter: saturate(100%);
      background-color: #021334;
      box-shadow: 3px 0px 5px black;
      width: 100vw;
      overflow: hidden;
   }
   .marquee_txt {
      margin-top: 40px;
      font-size: 7em;
      text-transform: uppercase;
      white-space: nowrap;
      font-family: Big Shoulders text;
      letter-spacing: 1px;
      color: var(--colorD);
      animation: marquee 8s linear infinite;
      /* padding: 20px; */
      z-index: 99999;
      /* margin-bottom: 20px; */
      transform: translateX(100%);
   }
   .service1,
   .service2,
   .service3,
   .service4,
   .service5 {
      color: white;
   }
   .sectionA_container_services {
      margin: 170px auto auto auto;
      padding: 0px;
   }

   .container-socialProofA,
   .container-socialProofB {
      flex-direction: column;
   }
   .title-sectionSocialProof {
      font-size: 1.6em;
      width: 90%;
      margin: 40px auto auto auto;
   }

   .title-section-socialProof {
      color: var(--colorC);
      text-transform: capitalize;
      font-weight: 600;
      font-size: 2em;
   }
   .bloc {
      flex: 1;
      transition: 1.2s ease-in-out;
      background-color: transparent;
   }
   .footer-link {
      color: white;
      text-decoration: none;
   }
   .footer-link:hover {
      color: orange;
      text-decoration: none;
   }
   nav {
      align-items: center;
      font-weight: 200;
      font-size: 0.8em;
   }

   .Typewriter__wrapper {
      width: 100%;
   }
   .Typewriter__cursor {
      color: transparent;
   }
}