/* screen - dss */

.dss {
  align-items: center;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  
  overflow: hidden;
  width: 1822px;
}






.scrolled-text {
  color: white !important; /* Change la couleur en blanc */
  transition: color 0.3s ease-in-out; /* Ajoute une animation fluide */
}


.scrolled-dropdown {
  background: #19344A !important; /* Change la couleur de fond */
  width: 100vw; /* 🔥 S'assure que la dropdown prend toute la largeur de l’écran */
  left: 0; /* 🔥 Évite tout décalage */
  margin: 0; /* 🔥 Supprime tout espace résiduel */
  padding: 10px 0; /* 🔥 Évite tout espace interne non voulu */
  transition: background-color 0.3s ease-in-out; /* Animation fluide */
  box-sizing: border-box; /* 🔥 Empêche le padding d'affecter la largeur */
}

/* 🔥 Correction pour éviter un débordement horizontal */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}


.scrolled-solution-item {
  color: #DDE0E2 !important; /* Change la couleur du texte */
  transition: color 0.3s ease-in-out; /* Animation fluide */
}



/* 🟢 Animation Fade In avec Scale et Slide */
@keyframes fadeInScaleUp {
    from {
        opacity: 0;
        transform: scale(0.5) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
/* Style de base des logos */
.solution-logo {
  width: 165px;  /* Taille des logos */
  height: auto;
  opacity: 0;
  margin: 5px;
  gap: 0px;
  transform: scale(0.5) translateY(20px); /* Animation initiale */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Ajoute l'animation Fizz */
.solution-logo.show {
  animation: fizzList 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 🟢 Effet d'agrandissement subtil au survol */
.solution-logo:hover {
  transform: scale(1.1) !important;
  transition: transform 0.3s cubic-bezier(0.25, 1.5, 0.5, 1.2);
}



.solution-item {
  padding: 15px 25px;
  font-size: 28px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  line-height: 36px;
  text-align: left;
  cursor: pointer;
  color: #0A192F; /* Couleur par défaut */
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  transition: color 0.3s ease-in-out, background 0.3s ease-in-out;
  background: none !important; /* Supprime toute couleur de fond */
}

/* 🟢 Suppression du fond lors du survol */
.solution-item:hover {
  background: none !important; /* Assure qu'il n'y a pas de fond */
  color: white !important; /* Garde seulement le texte en blanc */
}

/* 🟢 Supprime l'effet d'activation s'il existe */
.solution-item.active {
  background: none !important; /* Supprime tout fond actif */
}


.solution-item:hover .solution-number {
  color: #001E36 !important; /* Numéro devient bleu foncé */
}

/* Changement de couleur lors du scroll */
.scrolled .solution-item {
  color: white !important; /* Texte en blanc */
}

.scrolled .solution-item .solution-number {
  color: white !important; /* Numéro en blanc */
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');



/* 🟢 Animation List Fizz avec rebond fluide */
@keyframes fizzList {
  0% {
      opacity: 0;
      transform: translateY(30px) scale(0.8);
  }
  50% {
      opacity: 1;
      transform: translateY(-5px) scale(1.05);
  }
  100% {
      opacity: 1;
      transform: translateY(0) scale(1);
  }
}
.dss .wwwixoraxcom_cms-desktop-mm-3-2 {
  height: 67px;
  left: 0;
  position: fixed;
  top: -5px;
  width: 2113px;
  z-index: 9;
}

.dss .overlap-group14 {
  height: 1049px;
  margin-top: 62px;
  position: relative;
  width: 1822px;
  z-index: 1;
}

.dss .rectangle-30 {
  background-color: var(--ceramic);
  height: 1045px;
  left: 1061px;
  position: absolute;
  top: 4px;
  width: 761px;
}

.dss .rectangle-30.animate-enter {
  animation: animate-enter-frames 0.20s ease-in-out 0.00s 1 normal forwards;
}

@keyframes animate-enter-frames {
  from{opacity: 1;
}
to{opacity: 0;
}
}

.dss .harness-the-power-of {
  color: var(--black);
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xl);
  font-weight: 300;
  left: 1103px;
  letter-spacing: 0;
  line-height: 23.4px;
  position: absolute;
  top: 458px;
  width: 657px;
}

.dss .optimize-decisions-for-optimal-results {
  color: var(--black);
  font-family: var(--font-family-helvetica_neue_arabic-75bold);
  font-size: var(--font-size-xxxxxl);
  font-weight: 700;
  left: 1103px;
  letter-spacing: 0;
  line-height: 50.4px;
  position: absolute;
  top: 319px;
  width: 642px;
}

.dss .rectangle-22 {
  background-color: var(--red-ribbon);
  border-radius: 8px;
  cursor: pointer;
  height: 55px;
  left: 1106px;
  position: absolute;
  top: 558px;
  width: 210px;
}

.dss .get-started {
  color: var(--white);
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxxl);
  font-weight: 600;
  left: 1155px;
  letter-spacing: 0;
  line-height: 36.7px;
  position: absolute;
  top: 566px;
  white-space: nowrap;
}

.dss .frame-17 {
  align-items: center;
  display: flex;
  height: 930px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 1064px;
  justify-content: center; /* Centre les images */
}

.dss .frame-17 .slides img {
  width: 100%; /* Réduit la taille sans distorsion */
  height: auto;
  object-fit: contain; /* Garde toute l'image visible */
  transform: scale(0.8); /* Dézoome légèrement */
  transition: transform 0.5s ease-in-out;
}


.dss .flex-col {
  align-items: center;
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-left: -31px;
  min-height: 783px;
  width: 1157px;
}

.dss .group-container {
  height: 679px;
  position: relative;
  width: 1157px;
}

.dss .overlap-group7 {
  height: 593px;
  left: 0;
  position: absolute;
  top: 86px;
  width: 1157px;
}

.dss .x1609119_p2-pd3-b1 {
  height: 500px;
  left: 0;
  position: absolute;
  top: 0;
  width: 618px;
}

.dss .mockup {
  height: 550px;
  left: 424px;
  object-fit: cover;
  position: absolute;
  top: 43px;
  width: 733px;
}

.dss .group-176 {
  height: 216px;
  left: 610px;
  position: absolute;
  top: 0;
  width: 358px;
}

.dss .frame-14 {
  align-items: flex-start;
  display: flex;
  height: 93px;
  margin-right: 127.0px;
  padding: 3px 5px;
  width: 886px;
}

.dss .overlap-group4 {
  height: 86px;
  position: relative;
  width: 873px;
}

.dss .group-139 {
  align-items: flex-start;
  background-color: var(--ceramic);
  box-shadow: 0px 0px 4px #00000040;
  display: flex;
  height: 86px;
  left: 0;
  min-width: 873px;
  position: absolute;
  top: 0;
}

.dss .overlap-group-1 {
  height: 86px;
  position: relative;
  width: 349px;
}

.dss .rectangle-26 {
  background-color: var(--ceramic);
  height: 86px;
  left: 175px;
  position: absolute;
  top: 0;
  width: 174px;
}

.dss .rectangle-25 {
  background-color: var(--ceramic);
  height: 86px;
  left: 0;
  position: absolute;
  top: 0;
  width: 175px;
}

.dss .line-8 {
  height: 86px;
  left: 175px;
  position: absolute;
  top: 0;
  width: 1px;
}

.dss .overlap-group2 {
  align-items: flex-start;
  background-color: var(--ceramic);
  display: flex;
  min-width: 174px;
  padding: 0 0.2px;
}

.dss .line {
  height: 86px;
  object-fit: cover;
  width: 1px;
}

.dss .overlap-group1-1 {
  background-color: var(--ceramic);
  gap: 48px;
  margin-left: 1px;
  min-width: 174px;
}

.dss .frame {
  height: 40px;
  margin-top: 0.86px;
  width: 77px;
}

.dss .overlap-group3 {
  align-items: flex-start;
  background-color: var(--ceramic);
  display: flex;
  min-width: 174px;
  padding: 0 0.4px;
}

.dss .line-12 {
  height: 1px;
  left: 0;
  position: absolute;
  top: 84px;
  width: 175px;
}

.dss .pngimgcom-linux_png29 {
  height: 55px;
  left: 382px;
  top: 16px;
  width: 111px;
}

.dss .pngimgcom-windows_logos_png8 {
  height: 34px;
  left: 19px;
  top: 26px;
  width: 134px;
}

.dss .frame-1 {
  height: 55px;
  left: 742px;
  position: absolute;
  top: 16px;
  width: 89px;
}

.dss .kindpng_1724310-1 {
  height: 44px;
  left: 205px;
  position: absolute;
  top: 21px;
  width: 53px;
}

.dss .kindpng_1724310-2 {
  height: 22px;
  left: 253px;
  position: absolute;
  top: 34px;
  width: 65px;
}

.dss .group-container-1 {
  align-self: flex-start;
  background-image: url(../imgdss/r-1.png);
  background-size: 100% 100%;
  height: 740px;
  margin-left: 201px;
  position: relative;
  width: 955px;
}

.dss .group {
  height: 163px;
  left: 150px;
  position: absolute;
  top: 244px;
  width: 165px;
}

.dss .group-178 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 46px;
  margin-bottom: 50.0px;
  margin-left: 158px;
  min-height: 578px;
  width: 876px;
}

.dss .group-container-2 {
  align-items: flex-end;
  display: flex;
  gap: 24px;
  margin-right: 7.66px;
  min-width: 782px;
}

.dss .group-1 {
  height: 124px;
  margin-bottom: 0;
  width: 126px;
}

.dss .group-177 {
  height: 126px;
  width: 632px;
}

.dss .overlap-group8 {
  height: 406px;
  position: relative;
  width: 876px;
}

.dss .x1609119_p2-pd3-b1-1 {
  height: 404px;
  left: 0;
  position: absolute;
  top: 0;
  width: 498px;
}

.dss .mockup-2-1 {
  height: 318px;
  left: 456px;
  position: absolute;
  top: 88px;
  width: 420px;
}

.dss .group-153 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 29px;
  margin-bottom: 25.99px;
  margin-left: 201px;
  min-height: 578px;
  width: 790px;
}

.dss .group-container-3 {
  align-items: flex-start;
  display: flex;
  gap: 23px;
  margin-right: 2.48px;
  min-width: 758px;
}

.dss .group-177-1 {
  height: 122px;
  width: 612px;
}

.dss .group-2 {
  align-self: flex-end;
  height: 120px;
  width: 122px;
}

.dss .mock-container {
  height: 427px;
  position: relative;
  width: 790px;
}

.dss .free_i-pad_-mockup_1-1 {
  height: 419px;
  left: 0;
  position: absolute;
  top: 4px;
  width: 586px;
}

.dss .mobile-mock-up-1-1 {
  height: 427px;
  left: 570px;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 220px;
}

.dss .group-154 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 27px;
  margin-bottom: 75.0px;
  margin-left: 201px;
  min-height: 679px;
  width: 1099px;
}

.dss .group-3 {
  height: 144px;
  margin-left: 236px;
  width: 146px;
}

.dss .overlap-group5 {
  height: 508px;
  margin-left: 0;
  position: relative;
  width: 1099px;
}

.dss .x874089-galaxy-tab-s8-mockup-1 {
  height: 360px;
  left: 0;
  position: absolute;
  top: 114px;
  width: 613px;
}

.dss .smart-phone-mockup-09-1-1 {
  height: 508px;
  left: 338px;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 761px;
}

.dss .group-177-2 {
  height: 86px;
  left: 93px;
  position: absolute;
  top: 0;
  width: 431px;
}

.dss .overlap-group11 {
  height: 806px;
  margin-left: 5.0px;
  position: relative;
  width: 1827px;
  z-index: 3;
}

.dss .group-160 {
  box-shadow: inset -1px 0px 3px #00000040;
  height: 72px;
  left: 567px;
  position: absolute;
  top: 694px;
  width: 72px;
}

.dss .close-up-businessman {
  height: 806px;
  left: 0;
  position: absolute;
  top: 0;
  width: 1827px;
}

.dss .correspondence-manag {
  color: transparent;
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxxxl);
  font-weight: 400;
  left: 69px;
  letter-spacing: 0.48px;
  line-height: 31.2px;
  position: absolute;
  text-align: justify;
  top: 450px; /* Augmenté pour descendre le texte */
  width: 808px;
}


.dss .span0 {
  color: var(--red-ribbon);
  font-weight: 700;
  letter-spacing: 0.12px;
}

.dss .span1 {
  color: var(--white);
  font-weight: 300;
  letter-spacing: 0.12px;
}

.dss .title {
  color: var(--white);
  font-family: var(--font-family-inter);
  font-size: 64px;
  font-weight: 700;
  left: 69px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 191px;
  width: 802px;
}

.dss .exploring-key-featur {
  color: var(--black);
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxxxxl);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 59.5px;
  margin-top: 66px;
  min-height: 120px;
  text-align: center;
  width: 882px;
  z-index: 6;
}

.dss .group-container-4 {
  align-items: flex-start;
  display: flex;
  gap: 60px;
  height: 418px;
  margin-top: 79px;
  min-width: 1516px;
  z-index: 8;
}

.dss .group-157 {
  align-items: flex-end;
  background-color: var(--hint-of-red);
  border-radius: 15px;
  box-shadow: 5px 5px 7.1px 2px #00000014;
  display: flex;
  flex-direction: column;
  gap: 41px;
  min-height: 418px;
  padding: 42px 31px;
  width: 334px;
}

.dss .overlap-group-2 {
  align-self: center;
  height: 68px;
  margin-left: 10.0px;
  margin-top: 6px;
  position: relative;
  width: 81px;
}

.dss .vector {
  height: 56px;
  left: 4px;
  position: absolute;
  top: 0;
  width: 72px;
}

.dss .vector-1 {
  height: 49px;
  left: 9px;
  position: absolute;
  top: 6px;
  width: 62px;
}

.dss .vector-2 {
  height: 19px;
  left: 0;
  position: absolute;
  top: 49px;
  width: 81px;
}

.dss .vector-6 {
  height: 26px;
  left: 16px;
  position: absolute;
  top: 15px;
  width: 42px;
}

.dss .vector-7 {
  height: 6px;
  left: 57px;
  position: absolute;
  top: 17px;
  width: 5px;
}

.dss .text-3 {
  color: #f2eb34;
  font-family: var(--font-family-inter);
  font-size: 4px;
  font-weight: 800;
  left: 63px;
  line-height: normal;
  position: absolute;
  top: 19px;
  width: 3px;
}

.dss .vector-3 {
  height: 7px;
  left: 18px;
  position: absolute;
  top: 23px;
  width: 7px;
}

.dss .vector-4 {
  height: 7px;
  left: 29px;
  position: absolute;
  top: 15px;
  width: 7px;
}

.dss .vector-5 {
  height: 7px;
  left: 47px;
  position: absolute;
  top: 11px;
  width: 7px;
}

.dss .vector-8 {
  height: 7px;
  left: 54px;
  position: absolute;
  top: 24px;
  width: 7px;
}

.dss .group-155 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-height: 219px;
  width: 268px;
}

.dss .interactive-dashboards {
  min-height: 24px;
  min-width: 226px;
  white-space: nowrap;
}

.dss .interactive-dashboar {
  min-height: 180px;
  width: 264px;
}

.dss .group-186 {
  align-items: flex-end;
  background-color: var(--hint-of-red);
  border-radius: 15px;
  box-shadow: 5px 5px 7.1px 2px #00000014;
  display: flex;
  flex-direction: column;
  gap: 35px;
  min-height: 418px;
  padding: 42px 31px;
  width: 334px;
}

.dss .analytics_and_-insights {
  align-self: center;
  height: 79px;
  margin-left: 1.0px;
  margin-top: 1px;
  width: 79px;
}

.dss .predictive-analytics {
  letter-spacing: 0;
  line-height: normal;
  margin-right: 3.0px;
  min-height: 24px;
  min-width: 193px;
  white-space: nowrap;
}

.dss .anticipate-future-ou {
  letter-spacing: 0;
  line-height: normal;
  margin-right: 4.0px;
  min-height: 180px;
  width: 264px;
}

.dss .group-187 {
  align-items: flex-end;
  background-color: var(--hint-of-red);
  border-radius: 15px;
  box-shadow: 5px 5px 7.1px 2px #00000014;
  display: flex;
  flex-direction: column;
  gap: 41px;
  min-height: 418px;
  padding: 48px 31px;
  width: 334px;
}

.dss .group-196 {
  align-self: center;
  height: 68px;
  margin-left: 0.63px;
  width: 97px;
}

.dss .group-155-1 {
  align-items: center;
  min-height: 201px;
  width: 268px;
}

.dss .data-visualization {
  margin-right: 3.0px;
  min-width: 175px;
}

.dss .turn-complex-data-se {
  letter-spacing: 0;
  line-height: normal;
  margin-right: 4.0px;
  min-height: 162px;
  width: 264px;
}

.dss .group-188 {
  align-items: flex-end;
  background-color: var(--hint-of-red);
  border-radius: 15px;
  box-shadow: 5px 5px 7.1px 2px #00000014;
  display: flex;
  flex-direction: column;
  gap: 39px;
  min-height: 418px;
  padding: 46px 31px;
  width: 334px;
}

.dss .magnifying_-glass {
  align-items: flex-end;
  align-self: center;
  box-shadow: inset -2px 2px 3px #00000040;
  display: flex;
  height: 72px;
  padding: 0.9px 0.9px;
  width: 72px;
}

.dss .overlap-group-3 {
  height: 69px;
  margin-left: 1px;
  position: relative;
  width: 69px;
}

.dss .vector-9 {
  height: 12px;
  left: 40px;
  position: absolute;
  top: 40px;
  width: 12px;
}

.dss .vector-10 {
  height: 26px;
  left: 43px;
  position: absolute;
  top: 43px;
  width: 26px;
}

.dss .vector-11 {
  height: 16px;
  left: 48px;
  position: absolute;
  top: 48px;
  width: 16px;
}

.dss .vector-12 {
  height: 52px;
  left: 0;
  position: absolute;
  top: 0;
  width: 52px;
}

.dss .vector-13 {
  height: 40px;
  left: 6px;
  position: absolute;
  top: 6px;
  width: 40px;
}

.dss .vector-7-1 {
  height: 6px;
  left: 22px;
  position: absolute;
  top: 12px;
  width: 5px;
}

.dss .text-4 {
  color: #f2eb34;
  font-family: var(--font-family-inter);
  font-size: 4px;
  font-weight: 800;
  left: 28px;
  line-height: normal;
  position: absolute;
  top: 13px;
  width: 3px;
}

.dss .vector-6-1 {
  height: 13px;
  left: 14px;
  position: absolute;
  top: 20px;
  width: 22px;
}

.dss .what-if-analysis {
  letter-spacing: 0;
  line-height: normal;
  margin-right: 3.0px;
  min-height: 24px;
  min-width: 161px;
  white-space: nowrap;
}

.dss .simulate-scenarios-a {
  letter-spacing: 0;
  line-height: normal;
  margin-right: 4.0px;
  min-height: 162px;
  width: 264px;
}

.dss .group-container-5 {
  align-items: flex-start;
  display: flex;
  gap: 60px;
  height: 418px;
  margin-top: 60px;
  min-width: 1516px;
  z-index: 7;
}

.dss .group-189 {
  align-items: flex-end;
  background-color: var(--hint-of-red);
  border-radius: 15px;
  box-shadow: 5px 5px 7.1px 2px #00000014;
  display: flex;
  flex-direction: column;
  gap: 39px;
  min-height: 418px;
  padding: 49px 22px;
  width: 334px;
}

.dss .conversion_-rate_-optimization_cro_ {
  align-self: center;
  height: 68px;
  margin-right: 4.0px;
  width: 68px;
}

.dss .group-155-2 {
  align-items: center;
  min-height: 201px;
  width: 281px;
}

.dss .decision-optimization {
  letter-spacing: 0;
  line-height: normal;
  margin-right: 4.0px;
  min-height: 24px;
  min-width: 213px;
  white-space: nowrap;
}

.dss .maximize-efficiency {
  letter-spacing: 0;
  line-height: normal;
  margin-right: 4.0px;
  min-height: 162px;
  width: 277px;
}

.dss .group-190 {
  align-items: flex-end;
  background-color: var(--hint-of-red);
  border-radius: 15px;
  box-shadow: 5px 5px 7.1px 2px #00000014;
  display: flex;
  flex-direction: column;
  gap: 36px;
  min-height: 418px;
  padding: 44px 14px;
  width: 334px;
}

.dss .customer_-relationship_-management_crm_ {
  align-self: center;
  height: 77px;
  margin-right: 1.0px;
  width: 77px;
}

.dss .group-155-3 {
  align-items: flex-start;
  min-height: 201px;
  width: 304px;
}

.dss .collaborative-decision-making {
  letter-spacing: 0;
  line-height: normal;
  margin-left: 2px;
  min-height: 24px;
  white-space: nowrap;
}

.dss .encourage-teamwork-a {
  letter-spacing: 0;
  line-height: normal;
  min-height: 162px;
  width: 277px;
}

.dss .group-191 {
  align-items: flex-start;
  background-color: var(--hint-of-red);
  border-radius: 15px;
  box-shadow: 5px 5px 7.1px 2px #00000014;
  display: flex;
  flex-direction: column;
  gap: 38px;
  min-height: 418px;
  padding: 38px 16px;
  width: 334px;
}

.dss .group-197 {
  align-self: center;
  height: 81px;
  width: 72px;
}

.dss .data-security {
  margin-left: 22.0px;
  min-width: 131px;
}

.dss .protect-sensitive-in {
  letter-spacing: 0;
  line-height: normal;
  margin-right: 4.0px;
  min-height: 162px;
  width: 277px;
}

.dss .group-192 {
  align-items: center;
  background-color: var(--hint-of-red);
  border-radius: 15px;
  box-shadow: 5px 5px 7.1px 2px #00000014;
  display: flex;
  flex-direction: column;
  min-height: 418px;
  padding: 43px 16px;
  width: 334px;
}

.dss .transfer_-data {
  height: 78px;
  margin-right: 26.0px;
  width: 78px;
}

.dss .data-integration {
  margin-top: 36px;
  min-width: 156px;
}

.dss .break-down-silos-by {
  letter-spacing: 0;
  line-height: normal;
  margin-right: 25.0px;
  margin-top: 15px;
  min-height: 162px;
  width: 277px;
}

.dss .group-container-6 {
  align-self: flex-start;
  height: 1300px;
  margin-left: -154px;
  margin-top: 60px;
  position: relative;
  width: 1976px;
  z-index: 2;
}

.dss .overlap-group13 {
  height: 1386px;
  left: 0;
  position: absolute;
  top: 0;
  width: 1976px;
}

.dss .rectangle-19 {
  background-color: var(--red-ribbon);
  height: 820px;
  left: 149px;
  position: absolute;
  top: 492px;
  width: 1827px;
}

.dss .ixora-dss {
  color: var(--white);
  font-family: var(--font-family-arial_mt_black-regular);
  font-size: 60px;
  font-weight: 400;
  left: 498px;
  letter-spacing: 0;
  line-height: 110.2px;
  position: absolute;
  top: 611px;
  white-space: nowrap;
}

.dss .group-179 {
  height: 816px;
  left: 1048px;
  position: absolute;
  top: 384px;
  width: 841px;
}

.dss .why-choose {
  color: var(--white);
  font-family: var(--font-family-arial_mt_black-regular);
  font-size: 64px;
  font-weight: 400;
  left: 471px;
  letter-spacing: 0;
  line-height: 117.5px;
  position: absolute;
  top: 544px;
  white-space: nowrap;
}

.dss .rectangle-6 {
  background-color: var(--white);
  border-radius: 3px;
  box-shadow: 4px 4px 15px #00000003;
  height: 191px;
  left: 764px;
  position: absolute;
  top: 722px;
  width: 309px;
}

.dss .inbox-2-1 {
  height: 178px;
  left: 770px;
  object-fit: cover;
  position: absolute;
  top: 731px;
  width: 296px;
}

.dss .make-informed-decisi {
  left: 1154px;
  letter-spacing: 0;
  line-height: 27.0px;
  position: absolute;
  text-align: center;
  top: 602px;
  transform: rotate(-8.73deg);
  width: 247px;
}

.dss .data-driven-insights {
  left: 1152px;
  letter-spacing: 0;
  line-height: 27.0px;
  position: absolute;
  text-align: center;
  top: 543px;
  transform: rotate(-8.73deg);
  width: 247px;
}

.dss .enhanced-collaboration {
  left: 1557px;
  letter-spacing: 0;
  line-height: 27.0px;
  position: absolute;
  text-align: center;
  top: 546px;
  transform: rotate(13.75deg);
  width: 247px;
}

.dss .name {
  left: 1539px;
  letter-spacing: 0;
  line-height: 27.0px;
  position: absolute;
  text-align: center;
  top: 606px;
  transform: rotate(13.75deg);
  width: 247px;
}

.dss .optimize-resources-a {
  left: 1368px;
  letter-spacing: 0;
  line-height: 27.0px;
  position: absolute;
  text-align: center;
  top: 953px;
  transform: rotate(-8.16deg);
  width: 247px;
}

.dss .improved-efficiency {
  left: 1368px;
  letter-spacing: 0;
  line-height: 27.0px;
  position: absolute;
  text-align: center;
  top: 906px;
  transform: rotate(-7.73deg);
  width: 247px;
}

.dss .rectangle-5 {
  background-color: var(--white);
  border-radius: 3px;
  box-shadow: 4px 4px 15px #00000047;
  height: 175px;
  left: 477px;
  position: absolute;
  top: 770px;
  width: 283px;
}

.dss .inbox-1 {
  height: 161px;
  left: 485px;
  object-fit: cover;
  position: absolute;
  top: 776px;
  width: 268px;
}

.dss .group-167 {
  align-items: flex-start;
  background-image: url(../imgdss/rectangle-35-2.svg);
  background-size: 100% 100%;
  display: flex;
  gap: 65px;
  height: 190px;
  left: 246px;
  min-width: 1639px;
  padding: 44px 63px;
  position: absolute;
  top: 1196px;
}

.dss .group-165 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 97px;
  width: 768px;
}

.dss .join-our-weekly-newsletter {
  color: var(--black);
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxxxxl);
  font-weight: 600;
  letter-spacing: 0;
  line-height: normal;
  min-height: 58px;
}

.dss .stay-up-to-date-with {
  color: #858585;
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxxxl);
  font-weight: 500;
  letter-spacing: 0;
  line-height: normal;
  min-height: 29px;
}

.dss .overlap-group-4 {
  align-items: flex-start;
  align-self: center;
  background-color: var(--white);
  border-radius: 9px;
  box-shadow: 0px 0px 2.8px #00000040;
  display: flex;
  gap: 303px;
  height: 70px;
  justify-content: flex-end;
  margin-top: 10.0px;
  min-width: 679px;
  padding: 6px;
}

.dss .email-address {
  align-self: center;
  color: #858585;
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxxxl);
  font-weight: 500;
  letter-spacing: 0;
  line-height: normal;
  margin-top: 1.0px;
  min-height: 29px;
  min-width: 163px;
}

.dss .overlap-group1-2 {
  background-color: #001e36;
  border-radius: 5px;
  height: 56px;
  justify-content: flex-end;
  min-width: 182px;
  padding: 0 42px;
}

.dss .subscribe {
  color: var(--white);
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxxl);
  font-weight: 500;
  letter-spacing: 0;
  line-height: normal;
  min-height: 24px;
  min-width: 97px;
  white-space: nowrap;
}

.dss .group-194 {
  align-items: flex-end;
  background-color: var(--hint-of-red);
  border-radius: 15px;
  box-shadow: 5px 5px 7.1px 2px #00000014;
  display: flex;
  flex-direction: column;
  gap: 34px;
  left: 1095px;
  min-height: 418px;
  padding: 24px;
  position: absolute;
  top: 0;
  width: 334px;
}

.dss .mobile_-marketing {
  align-self: center;
  height: 80px;
  margin-top: 19px;
  width: 58px;
}

.dss .group-155-4 {
  align-items: center;
  min-height: 237px;
  width: 281px;
}

.dss .user-friendly-interface {
  min-height: 24px;
  min-width: 225px;
  white-space: nowrap;
}

.dss .user-friendly-interf {
  min-height: 198px;
  width: 277px;
}

.dss .mockup-4-1 {
  height: 483px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 629px;
  width: 644px;
}

.dss .group-176-1 {
  height: 60px;
  left: 775px;
  position: absolute;
  top: 981px;
  width: 378px;
}

.dss .group-199 {
  align-items: flex-end;
  background-color: var(--hint-of-red);
  border-radius: 15px;
  box-shadow: 5px 5px 7.1px 2px #00000014;
  display: flex;
  flex-direction: column;
  gap: 38px;
  left: 701px;
  min-height: 418px;
  padding: 45px 24px;
  position: absolute;
  top: 0;
  width: 334px;
}

.dss .group-198 {
  align-self: center;
  height: 74px;
  margin-left: 1.0px;
  width: 65px;
}

.dss .reporting-and-alerts {
  letter-spacing: 0;
  line-height: normal;
  margin-right: 4.0px;
  min-height: 24px;
  min-width: 201px;
  white-space: nowrap;
}

.dss .stay-proactive-with {
  letter-spacing: 0;
  line-height: normal;
  margin-right: 4.0px;
  min-height: 162px;
  width: 277px;
}

.dss .overlap-group12 {
  align-items: flex-end;
  background-color: #001e36;
  display: flex;
  flex-direction: column;
  margin-top: 84px;
  min-height: 1406px;
  padding: 99px 224px;
  width: 1822px;
  z-index: 4;
}

.dss .request-for-quote {
  color: var(--alto);
  font-family: var(--font-family-inter);
  font-size: 64px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: normal;
  margin-right: 125px;
  min-height: 77px;
  min-width: 564px;
}

.dss .st-name-container {
  align-items: flex-start;
  align-self: center;
  display: flex;
  gap: 274px;
  height: 18px;
  margin-left: 439.0px;
  margin-top: 58px;
  min-width: 443px;
}

.dss .first-name {
  letter-spacing: 0;
  line-height: 17.8px;
  min-height: 18px;
  min-width: 85px;
  white-space: nowrap;
}

.dss .last-name {
  letter-spacing: 0;
  line-height: 17.8px;
  min-height: 18px;
  white-space: nowrap;
}

.dss .overlap-group-container {
  align-items: flex-start;
  display: flex;
  gap: 29px;
  margin-top: 13px;
  min-width: 689px;
}

.dss .overlap-group1 {
  align-items: flex-start;
  background-color: var(--white-3);
  border: 1px solid;
  border-color: var(--white-2);
  border-radius: 8px;
  display: flex;
  height: 50px;
  min-width: 330px;
  padding: 13px 17px;
}

.dss .first-name-1 {
  letter-spacing: 0;
  line-height: 19.9px;
  min-height: 20px;
  white-space: nowrap;
}

.dss .last-name-1 {
  letter-spacing: 0;
  line-height: 19.9px;
  min-height: 20px;
  white-space: nowrap;
}

.dss .number-of-users {
  align-self: center;
  letter-spacing: 0;
  line-height: 17.8px;
  margin-left: 130.0px;
  margin-top: 34px;
  min-height: 18px;
  min-width: 134px;
  white-space: nowrap;
}

.dss .overlap-group {
  align-items: flex-start;
  background-color: var(--white-3);
  border: 1px solid;
  border-color: var(--white-2);
  border-radius: 8px;
  display: flex;
  height: 50px;
  margin-top: 13px;
  min-width: 689px;
  padding: 13px 18px;
}

.dss .text-1 {
  line-height: 19.9px;
  min-height: 20px;
}

.dss .email-address-1 {
  align-self: center;
  letter-spacing: 0;
  line-height: 17.8px;
  margin-left: 108.0px;
  margin-top: 34px;
  min-height: 18px;
  min-width: 112px;
  white-space: nowrap;
}

.dss .exampleemailcom {
  letter-spacing: 0;
  line-height: 19.9px;
  min-height: 20px;
  white-space: nowrap;
}

.dss .company-name {
  align-self: center;
  margin-left: 125.0px;
  margin-top: 34px;
  min-width: 129px;
}

.dss .example-co {
  letter-spacing: 0;
  line-height: 19.9px;
  min-height: 20px;
  white-space: nowrap;
}

.dss .number-container {
  align-items: flex-start;
  display: flex;
  gap: 242px;
  height: 18px;
  margin-right: 187px;
  margin-top: 34px;
  min-width: 502px;
}

.dss .phone-number {
  line-height: 17.8px;
  min-height: 18px;
  min-width: 117px;
}

.dss .overlap-group17 {
  align-items: center;
  background-color: var(--white-3);
  border: 1px solid;
  border-color: var(--white-2);
  border-radius: 8px;
  display: flex;
  height: 50px;
  min-width: 330px;
  padding: 0 17px;
}

.dss .image-1 {
  height: 18px;
  margin-bottom: 2.0px;
  object-fit: cover;
  width: 27px;
}

.dss .vector-5-1 {
  height: 4px;
  margin-bottom: 2.0px;
  margin-left: 8px;
  width: 8px;
}

.dss .line-13 {
  align-self: flex-start;
  height: 48px;
  margin-left: 12px;
  object-fit: cover;
  width: 1px;
}

.dss .text-2 {
  line-height: 19.9px;
  margin-bottom: 4.0px;
  margin-left: 16px;
  min-height: 20px;
  min-width: 173px;
}

.dss .overlap-group16 {
  align-items: flex-start;
  background-color: var(--white-3);
  border: 1px solid;
  border-color: var(--white-2);
  border-radius: 8px;
  display: flex;
  height: 50px;
  min-width: 330px;
  padding: 13px 16px;
}

.dss .phone {
  line-height: 19.9px;
  min-height: 20px;
}

.dss .message {
  align-self: center;
  letter-spacing: 0;
  line-height: 17.8px;
  margin-left: 69.0px;
  margin-top: 34px;
  min-height: 18px;
  min-width: 73px;
  white-space: nowrap;
}

.dss .overlap-group20 {
  align-items: flex-start;
  background-color: var(--white-3);
  border: 1px solid;
  border-color: var(--white-2);
  border-radius: 8px;
  display: flex;
  height: 191px;
  margin-top: 13px;
  min-width: 689px;
  padding: 13px 18px;
}

.dss .leave-us-a-message {
  letter-spacing: 0;
  line-height: 19.9px;
  min-height: 20px;
  white-space: nowrap;
}

.dss .overlap-group22 {
  align-items: center;
  background-color: #f2f2f2;
  box-shadow: -6px 8px 4px #00000040;
  display: flex;
  height: 97px;
  justify-content: flex-end;
  margin-right: 194px;
  margin-top: 27px;
  min-width: 495px;
  padding: 0 24px;
}

.dss .rectangle-51 {
  background-color: var(--white);
  border: 1px solid;
  border-color: var(--black);
  height: 25px;
  width: 25px;
}

.dss .im-not-robot {
  letter-spacing: 0;
  line-height: 15.7px;
  margin-bottom: 1.0px;
  margin-left: 13px;
  min-height: 16px;
  min-width: 90px;
  white-space: nowrap;
}

.dss .group-172 {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-left: 227px;
  min-height: 61px;
  width: 78px;
}

.dss .group-4 {
  height: 34px;
  margin-right: 4.22px;
  width: 34px;
}

.dss .re-captcha {
  color: #8d8d8d;
  font-family: var(--font-family-inter);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 12.6px;
  margin-right: 3.0px;
  margin-top: 4px;
  min-height: 13px;
  min-width: 69px;
  white-space: nowrap;
}

.dss .privacy-terms {
  color: #8d8d8d;
  font-family: var(--font-family-inter);
  font-size: 10px;
  font-weight: 400;
  line-height: 10.5px;
  margin-right: 4.0px;
  min-width: 74px;
}

.body .flex-row {
  align-items: center;
  display: flex;
  height: 60px; /* 🔥 Ajuste la hauteur si nécessaire */
  min-width: 100vw; /* 🔥 S'assure que la navbar prend toute la largeur */
  margin: 0; /* 🔥 Supprime les marges indésirables */
  padding: 0 20px; /* 🔥 Ajoute un padding latéral pour éviter le débordement */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--white);
  z-index: 1000;
  transition: background-color 0.3s ease-in-out;
  justify-content: space-between; /* 🔥 Assure un bon alignement des éléments */
}

/* 🔥 Correction pour le body afin d’éviter le décalage du contenu */
body {
  margin: 0;
  padding: 0;
}

/* 🔥 Ajout d'un padding-top pour éviter que le contenu ne soit caché par la navbar */
.body {
  padding-top: 60px;
}

/* 🔥 Assurer que les éléments à l’intérieur de la navbar ne dépassent pas */
.body .flex-row > * {
  max-width: 100%;
}



.dss .rectangle-48 {
  background-color: var(--white-3);
  border: 1px solid;
  border-color: var(--white-2);
  border-radius: 3px;
  height: 25px;
  margin-top: 1px;
  width: 25px;
}

.dss .id-like-to-receive {
  color: transparent;
  font-family: var(--font-family-inter);
  font-size: var(--font-size-m);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 15.7px;
  min-height: 32px;
}

.dss .span0-1 {
  color: var(--white);
}

.dss .span1-1 {
  color: #31a8ff;
}

.dss .overlap-group21 {
  align-items: flex-start;
  background-color: #31a8ff;
  border-radius: 5px;
  display: flex;
  height: 55px;
  margin-top: 32px;
  min-width: 689px;
  padding: 17px 304px;
}

.dss .submit {
  color: var(--white);
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxl);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 19.9px;
  min-height: 20px;
  white-space: nowrap;
}

.dss .group-175 {
  align-items: flex-start;
  display: flex;
  margin-left: 1.0px;
  margin-top: 53px;
  min-width: 1377px;
  z-index: 5;
}

.dss .group-container-7 {
  height: 103px;
  position: relative;
  width: 1385px;
}

.dss .group-173 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 9px;
  left: 0;
  min-height: 103px;
  position: absolute;
  top: 0;
  width: 157px;
}

.dss .group-171 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 77px;
  width: 157px;
}

.dss .group-170 {
  height: 36px;
  width: 50px;
}

.dss .copyright {
  color: var(--black);
  font-family: var(--font-family-inter);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: normal;
  min-height: 17px;
}

.dss .infoixoraxcom {
  color: var(--black);
  font-family: var(--font-family-inter);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: normal;
  min-height: 17px;
}

.dss .group-174 {
  align-items: flex-start;
  display: flex;
  height: 37px;
  left: 55px;
  min-width: 1330px;
  position: absolute;
  top: 0;
}

.dss .vector-14 {
  align-self: flex-end;
  height: 24px;
  margin-bottom: 0.58px;
  width: 26px;
}

.dss .vector-15 {
  align-self: flex-end;
  height: 26px;
  margin-bottom: 0;
  margin-left: 3px;
  width: 27px;
}

.dss .vector-16 {
  align-self: flex-end;
  height: 25px;
  margin-bottom: 0.59px;
  margin-left: 7px;
  width: 15px;
}

.dss .vector-17 {
  align-self: flex-end;
  height: 26px;
  margin-bottom: 0;
  margin-left: 4px;
  width: 27px;
}

.dss .place {
  letter-spacing: 0;
  line-height: 21.0px;
  margin-left: 595px;
  min-height: 21px;
  min-width: 57px;
  white-space: nowrap;
}

.dss .about-us {
  letter-spacing: 0;
  line-height: 21.0px;
  margin-left: 59px;
  min-height: 21px;
  min-width: 89px;
  white-space: nowrap;
}

.dss .privacy-policy {
  line-height: 21.0px;
  margin-left: 59px;
  min-height: 21px;
  min-width: 134px;
}

.dss .terms-of-service {
  letter-spacing: 0;
  line-height: 21.0px;
  margin-left: 58px;
  min-height: 21px;
  white-space: nowrap;
}

.dss .company {
  letter-spacing: 0;
  line-height: 17.8px;
  min-height: 18px;
  white-space: nowrap;
}

.dss .data {
  letter-spacing: 0;
  line-height: normal;
  min-height: 24px;
  white-space: nowrap;
}

.dss .group-155-5 {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.dss .interactive {
  letter-spacing: 0;
  line-height: normal;
  margin-right: 4.0px;
}

.dss .overlap-group1-3 {
  align-items: center;
  display: flex;
}

.dss .phone-1 {
  letter-spacing: 0;
  white-space: nowrap;
}

.dss .pngimgcom {
  object-fit: cover;
  position: absolute;
}

.dss .privacy {
  letter-spacing: 0;
  white-space: nowrap;
}

.dss .text {
  letter-spacing: 0;
  white-space: nowrap;
}

.dss .user-friendly {
  letter-spacing: 0;
  line-height: normal;
  margin-right: 4.0px;
}





body {
  zoom: 0.84; /* Dézoom à 80% */

}


/* Navbar Styling */
.navbar {
  background-color: #001F3F;; /* Couleur de fond */
  width: 100%;
  height: 80px; /* Ajuste la hauteur */
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

/* Navbar Container */
.navbar-container {
  display: flex;
  width: 90%;
  max-width: 1400px;
  justify-content: space-between;
  align-items: center;
}

/* Logo */
.navbar-logo img {
  height: 40px; /* Réduction de la taille du logo */
}

/* Navbar Links */
.navbar-links {
  display: flex;
  justify-content: flex-end; /* Aligne les liens à droite */
  gap: 120px; /* Augmenter encore plus l'espace entre "Solutions" et "About Us" */
}

.navbar-links a {
  text-decoration: none;
  color: white; /* Couleur du texte */
  font-family: "Inter", sans-serif; /* Police identique */
  font-weight: 600; /* Épaisseur du texte */
  font-size: 16px; /* Taille du texte */
  letter-spacing: 0.5px; /* Espacement des lettres */
  text-transform: none; /* Pas de majuscules forcées */
  transition: color 0.3s ease-in-out;
}

.navbar-links a:hover {
  color: white; /* Effet hover */
}


.os-logo {
  max-width: 100px;
  height: auto;
}

.progress {
  height: 5px;
  background-color: #ddd;
}

.progress-bar {
  width: 20%;
  background-color: #007bff;
  transition: width 0.5s ease-in-out;
}








/* ✅ Partie principale du footer */
.footer {
  width: 100%;
  padding: 0;

}


/* ✅ Section supérieure du footer (bleue) */
.footer-top {
  background-color: #082A44;
  color: white;
  padding: 50px 0;
  font-family: Arial, sans-serif;
  width: 100%;
}

/* ✅ Conteneur pour formulaire et section contact */
.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 10%;
  max-width: 1200px;
  margin: auto;
}

/* ✅ Section "Contact Us" */
.contact-section h2 {
  font-size: 24px;
  font-weight: 600;
}

/* ✅ Formulaire */
.form-section {
  flex: 1;
  max-width: 500px;
}

/* ✅ Formulaire en 2 colonnes */
.form-group {
  display: flex;
  gap: 20px;
}

.input-box {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.input-box label {
  font-size: 14px;
  margin-bottom: 5px;
}

.input-box input,
.input-box textarea {
  width: 100%;
  padding: 10px;
  border: none;
  border-bottom: 2px solid white;
  background: transparent;
  color: white;
  font-size: 14px;
}

.input-box textarea {
  height: 80px;
  resize: none;
}

.submit-btn {
  background: transparent;
  border: 1px solid white;
  color: white;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
}

.submit-btn:hover {
  background: white;
  color: #082A44;
}

/* ✅ Section inférieure du footer */
.footer-bottom {
  background: #FFFFFF; /* Fond blanc */
  color: #0A2A47; /* Couleur bleue foncée pour le texte */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 5%; /* Ajustement du padding */
  width: 100%;
  border-top: 1px solid #E0E0E0; /* Fine ligne de séparation */
  font-family: 'Montserrat', sans-serif; /* Police élégante */
}

/* ✅ Conteneur du logo et des informations */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ✅ Logo IXORA */
.footer-logo {
  height: 26px; /* Taille ajustée pour correspondre à l’image */
  margin-bottom: 5px;
}

/* ✅ Texte du footer */
.footer-brand p {
  font-size: 14px;
  color: #0A2A47; /* Couleur cohérente */
  margin: 2px 0;
}

/* ✅ Liens du footer */
.footer-links {
  display: flex;
  gap: 15px;
}

.footer-links a {
  color: #0A2A47; /* Même couleur que dans l'image */
  text-decoration: none;
  font-size: 14px;
}

.footer-links a:hover {
  text-decoration: underline;
}




.ixorax-text {
  font-family: 'Montserrat', sans-serif; /* Remplace par la police exacte si différente */
  font-weight: 700; /* Gras */
  font-size: 24px; /* Ajuste si nécessaire */
  color: #0A2A47; /* Même couleur que sur l’image */
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px; /* Espacement entre le texte et le logo */
}


.footer-logo {
  height: 40px; /* Ajuste la hauteur selon ton design */
  display: block;
  margin-bottom: 10px; /* Espacement entre l'image et le texte */
}