/* screen - law */

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

.law .wwwixoraxcom_cms-desktop-mm-3-2 {
  height: 67px;
  left: 0;
  position: fixed;
  top: -5px;
  width: 2113px;
  z-index: 10;
}

.law .flex-row {
  align-items: center;
  align-self: flex-start;
  display: flex;
  gap: 88px;
  margin-left: -72.33px;
  margin-top: 186px;
  min-width: 1832px;
  z-index: 1;






  
}

.law .overlap-group9 {
  height: 800px;
  position: relative;
  width: 1087px;
}

.law .x8966201_3992181-3-1 {
  height: 739px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 985px;
}

.law .group {
  height: 199px;
  left: 886px;
  position: absolute;
  top: 470px;
  width: 201px;
}

.law .group-1 {
  height: 120px;
  left: 467px;
  position: absolute;
  top: 680px;
  width: 619px;
}

.law .flex-col {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  margin-bottom: 89.0px;
  min-height: 321px;
  width: 657px;
}

.law .simplifying-legal-ma {
  color: var(--black);
  font-family: var(--font-family-helvetica_neue_arabic-75bold);
  font-size: var(--font-size-xxxxxl);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 50.4px;
  min-height: 150px;
  width: 657px;
}

.law .streamlining-legal-p {
  color: var(--black);
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xl);
  font-weight: 300;
  letter-spacing: 0;
  line-height: 23.4px;
  margin-top: 39px;
  min-height: 46px;
  width: 657px;
}

.law .overlap-group8 {
  align-items: flex-start;
  background-color: #c7aa7e;
  border-radius: 8px;
  display: flex;
  height: 55px;
  justify-content: flex-end;
  margin-top: 31px;
  min-width: 210px;
  padding: 8px 48px;
}

.law .get-started {
  color: var(--white);
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxxl);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 36.7px;
  min-height: 37px;
  white-space: nowrap;
}

.law .overlap-group6 {
  height: 806px;
  margin-left: 5.0px;
  margin-top: 125px;
  position: relative;
  width: 1827px;
  z-index: 2;
}

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

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

.law .at-ixora-law-we-simp {
  color: var(--white);
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxxxl);
  font-weight: 300;
  left: 69px;
  letter-spacing: 0.48px;
  line-height: 31.2px;
  position: absolute;
  text-align: justify;
  top: 396px;
  width: 757px;
}

.law .empowering-lawyers-w {
  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: 1018px;
}

.law .exploring-key-features-of-ixora-law {
  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;
}

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

.law .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: 37px;
  min-height: 418px;
  padding: 44px 31px;
  width: 334px;
}

.law .medical_-report {
  align-self: center;
  height: 76px;
  width: 76px;
}

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

.law .surname {
  margin-right: 6.0px;
  min-height: 24px;
  min-width: 132px;
  text-align: center;
  white-space: nowrap;
}

.law .gain-a-comprehensive {
  letter-spacing: 0;
  line-height: normal;
  margin-right: 4.0px;
  min-height: 126px;
  width: 264px;
}

.law .group-container-1 {
  border-radius: 15px;
  height: 418px;
  position: relative;
  width: 334px;
}

.law .group-186 {
  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;
  gap: 15px;
  left: 0;
  min-height: 418px;
  padding: 114px 0;
  position: absolute;
  top: 0;
  width: 334px;
}

.law .opposition-management {
  letter-spacing: 0;
  line-height: normal;
  margin-right: 1.0px;
  margin-top: 43px;
  min-height: 24px;
  min-width: 239px;
  text-align: center;
  white-space: nowrap;
}

.law .stay-ahead-of-legal {
  letter-spacing: 0;
  line-height: normal;
  min-height: 108px;
  width: 264px;
}

.law .group-223 {
  height: 76px;
  left: 129px;
  position: absolute;
  top: 44px;
  width: 76px;
}

.law .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: 35px;
  min-height: 418px;
  padding: 42px 31px;
  width: 334px;
}

.law .mobile_-marketing {
  align-self: center;
  height: 80px;
  margin-right: 1.0px;
  width: 73px;
}

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

.law .acts-and-articles-repository {
  letter-spacing: 0;
  line-height: normal;
  margin-right: 5.0px;
  min-height: 48px;
  text-align: center;
  width: 235px;
}

.law .access-a-vast-up-to {
  letter-spacing: 0;
  line-height: normal;
  margin-right: 4.0px;
  min-height: 126px;
  width: 264px;
}

.law .group-188 {
  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: 37px;
  min-height: 418px;
  padding: 44px 35px;
  width: 334px;
}

.law .email_-marketing {
  align-self: center;
  height: 76px;
  width: 76px;
}

.law .group-155-2 {
  align-items: center;
  min-height: 165px;
  width: 262px;
}

.law .client-communication {
  letter-spacing: 0;
  line-height: normal;
  margin-left: 2.0px;
  min-height: 24px;
  text-align: center;
  width: 248px;
}

.law .effortlessly-connect {
  letter-spacing: 0;
  line-height: normal;
  margin-right: 4.0px;
  min-height: 126px;
  width: 258px;
}

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

.law .group-189 {
  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: 27px;
  min-height: 418px;
  padding: 43px 20px;
  width: 334px;
}

.law .layer_1 {
  align-self: center;
  height: 86px;
  margin-left: 12.0px;
  width: 74px;
}

.law .group-155-3 {
  align-items: flex-start;
  min-height: 183px;
  width: 292px;
}

.law .trail-management {
  letter-spacing: 0;
  line-height: normal;
  min-height: 24px;
  text-align: center;
  width: 248px;
}

.law .track-and-manage-cas {
  align-self: flex-end;
  letter-spacing: 0;
  line-height: normal;
  margin-right: 4px;
  min-height: 144px;
  width: 277px;
}

.law .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: 39px;
  min-height: 418px;
  padding: 42px 25px;
  width: 334px;
}

.law .customer_-segmentation {
  align-self: center;
  height: 76px;
  width: 74px;
}

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

.law .evidence-management {
  letter-spacing: 0;
  line-height: normal;
  margin-right: 3.0px;
  min-height: 48px;
  text-align: center;
  width: 220px;
}

.law .simplify-the-managem {
  letter-spacing: 0;
  line-height: normal;
  margin-right: 4.0px;
  min-height: 144px;
  width: 277px;
}

.law .overlap-group7 {
  background-color: #00000096;
  height: 1048px;
  margin-top: 67px;
  position: relative;
  width: 1822px;
  z-index: 9;
}

.law .frame-24 {
  align-items: flex-start;
  display: flex;
  height: 700px;
  left: 0;
  min-width: 1822px;
  position: absolute;
  top: 0;
}

.law .overlap-group3 {
  height: 1048px;
  position: relative;
  width: 1824px;
}

.law .vector-8 {
  height: 316px;
  left: 608px;
  position: absolute;
  top: 366px;
  width: 1px;
}

.law .vector-9 {
  height: 316px;
  left: 1215px;
  position: absolute;
  top: 366px;
  width: 1px;
}

.law .group-217 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 52px;
  left: 0;
  min-height: 1048px;
  padding: 458px 55px;
  position: absolute;
  top: 0;
  width: 612px;
}

.law .x01 {
  height: 50px;
  margin-left: 2.91px;
  width: 77px;
}

.law .individuals {
  letter-spacing: 0;
  line-height: normal;
  min-height: 29px;
  opacity: 0.61;
  width: 238px;
}

.law .group-216 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 52px;
  left: 608px;
  min-height: 1048px;
  padding: 458px 51px;
  position: absolute;
  top: 0;
  width: 609px;
}

.law .x02 {
  height: 50px;
  margin-left: 2.91px;
  width: 91px;
}

.law .surname-1 {
  min-height: 29px;
  opacity: 0.61;
  width: 360px;
}

.law .group-215 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 52px;
  left: 1215px;
  min-height: 1048px;
  padding: 458px 50px;
  position: absolute;
  top: 0;
  width: 609px;
}

.law .x03 {
  height: 50px;
  margin-left: 2.91px;
  width: 93px;
}

.law .large-corporations {
  letter-spacing: 0;
  line-height: normal;
  min-height: 29px;
  opacity: 0.61;
  width: 224px;
}

.law .who-can-benefit-from-ixora-law {
  color: var(--white);
  font-family: var(--font-family-inter);
  font-size: 32px;
  font-weight: 500;
  left: 55px;
  letter-spacing: 0.64px;
  line-height: 41.6px;
  position: absolute;
  text-align: justify;
  top: 147px;
  white-space: nowrap;
}

.law .ixora-law-is-designed-to-cater-to {
  color: var(--white);
  font-family: var(--font-family-inter);
  font-size: 23px;
  font-weight: 500;
  left: 55px;
  letter-spacing: 0.46px;
  line-height: 29.9px;
  opacity: 0.6;
  position: absolute;
  text-align: justify;
  top: 203px;
  white-space: nowrap;
}

.law .no-matter-the-size-o {
  color: var(--white);
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxxl);
  font-weight: 500;
  left: 55px;
  letter-spacing: 0.40px;
  line-height: 26.0px;
  opacity: 0.6;
  position: absolute;
  text-align: justify;
  top: 797px;
  white-space: nowrap;
}

.law .group-167 {
  align-items: flex-start;
  background-image: url(../imglaw/rectangle-35.svg);
  background-size: 100% 100%;
  display: flex;
  gap: 65px;
  height: 190px;
  margin-left: 1.0px;
  margin-top: 61px;
  min-width: 1639px;
  padding: 44px 63px;
  z-index: 3;
}

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

.law .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;
}

.law .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;
}

.law .overlap-group {
  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;
}

.law .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;
}

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

.law .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;
}

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

.law .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;
}

.law .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;
}

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

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

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

.law .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;
}

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

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

.law .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;
}

.law .overlap-group1-1 {
  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;
}

.law .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;
}

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

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

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

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

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

.law .overlap-group12 {
  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;
}

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

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

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

.law .text-2 {
  margin-bottom: 4.0px;
  margin-left: 16px;
  min-width: 173px;
}

.law .overlap-group18 {
  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;
}

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

.law .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;
}

.law .overlap-group14 {
  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;
}

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

.law .overlap-group10 {
  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;
}

.law .rectangle-51 {
  background-color: var(--white);
  border-color: var(--black);
}

.law .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;
}

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

.law .group-2 {
  height: 34px;
  margin-right: 4.22px;
  width: 34px;
}

.law .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;
}

.law .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;
}

.law .flex-row-1 {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  height: 32px;
  margin-right: 198px;
  margin-top: 26px;
  min-width: 491px;
}

.law .rectangle-48 {
  background-color: var(--white-3);
  border-color: var(--white-2);
  border-radius: 3px;
  margin-top: 1px;
}

.law .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;
}

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

.law .span1 {
  color: #31a8ff;
}

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

.law .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;
}

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

.law .group-container-3 {
  height: 103px;
  position: relative;
  width: 1385px;
}

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

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

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

.law .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;
}

.law .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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.law .rectangle {
  border: 1px solid;
  height: 25px;
  width: 25px;
}

.law .surname-2 {
  letter-spacing: 0;
  line-height: normal;
}

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









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 */
}




/* Assurez-vous que la vidéo n'est pas grisée */
.background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Permet d'ajuster la vidéo au conteneur */
  z-index: -1; /* Met la vidéo derrière le contenu */
  opacity: 1; /* Assurez-vous que l'opacité est à 1 (pas de transparence) */
  filter: none; /* Supprime tout filtre appliqué à la vidéo */
  background: none !important; /* Supprime tout arrière-plan gris éventuel */
}
.rectangle-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* Masquer l'input checkbox natif */
.rectangle-checkbox {
  display: none;
}

.rectangle-51 {
  width: 22px;
    height: 22px;
    border: 2px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.rectangle-checkbox {
  display: none; /* Cache l'input checkbox natif */
}

.rectangle-51:has(.rectangle-checkbox:checked)::after {
  content: "✔"; /* Ajoute la coche */
  font-size: 24px; /* Taille de la coche */
  color: #007bff; /* Couleur bleue de la coche */
  font-weight: bold;
  position: absolute;
}



.flex-row-1 {
  display: flex;
  align-items: center;
  gap: 10px; /* Espacement entre la checkbox et le texte */
}

/* Style du label pour rendre la case clickable */
.rectangle-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* Masquer l'input checkbox natif */
.rectangle-checkbox {
  display: none;
}

/* Style par défaut du rectangle (checkbox personnalisée) */
.rectangle-48 {
  width: 20px;
  height: 20px;
  border: 2px solid #000; /* Bordure pour simuler une checkbox */
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.2s;
}

/* Ajouter une coche (✔) lorsque la case est cochée */
.rectangle-checkbox:checked + .rectangle-48::after {
  content: "✔";  /* Symbole de coche */
  font-size: 14px;
  color: black; /* Couleur de la coche */
}

/* Style du texte */
.id-like-to-receive {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}





.flex-col-6 {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border-radius: 12px; /* Arrondi légèrement plus marqué */
  width: 100%;
  min-width: 200px;
  
  
  white-space: normal;
  overflow: visible;
  transition: box-shadow 0.4s ease-in-out, transform 0.4s ease-in-out;
}

/* Effet de survol : légère élévation et glow */
.flex-col-6:hover {
  transform: scale(1.08); /* Zoom subtil */
  box-shadow: 0px 15px 40px rgba(255, 255, 255, 0.90), 
              0px 5px 15px rgba(255, 255, 255, 0.90);
}

/* Effet lumineux amélioré */
.flex-col-6::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250%;
  height: 250%;
  
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0) 80%);
  transform: translate(-50%, -50%) scale(0.7);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease, filter 0.5s ease;
  filter: blur(20px);
}

/* Halo lumineux dynamique au survol */
.flex-col-6:hover::before {
  transform: translate(-50%, -50%) scale(1.3);
  opacity: 1;
  filter: blur(10px);
}



.task-description {
  font-family: 'Inter', sans-serif; /* Police Inter */
  font-weight: 500; /* Medium */
  font-size: 12px; /* Taille 12px */
  color: white; /* Couleur blanche */
  opacity: 0; /* Caché par défaut */
  overflow: hidden;
  margin-top: 5px; /* Espacement sous le titre */
  display: flex;
  flex-direction: column;
  gap: 2px; /* Espacement entre les lignes */
}

.task-description span {
  opacity: 0;
  transform: translateY(5px); /* Décalage initial */
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Animation progressive */
.flex-col-6:hover .task-description {
  opacity: 1; /* Rend visible */
}

.flex-col-6:hover .task-description .line1 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.flex-col-6:hover .task-description .line2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

.flex-col-6:hover .task-description .line3 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

.flex-col-6:hover .task-description .line4 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s;
}

.file-sharing-description {
  font-family: 'Inter', sans-serif; /* Police Inter */
  font-weight: 500; /* Medium */
  font-size: 12px; /* Taille 12px */
  color: white; /* Couleur blanche */
  opacity: 0; /* Caché par défaut */
  overflow: hidden;
  margin-top: 5px; /* Espacement sous le titre */
  display: flex;
  flex-direction: column;
  gap: 2px; /* Espacement entre les lignes */
}

.file-sharing-description span {
  opacity: 0;
  transform: translateY(5px); /* Décalage initial */
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Animation progressive */
.flex-col-6:hover .file-sharing-description {
  opacity: 1; /* Rend visible */
}

.flex-col-6:hover .file-sharing-description .line1 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.flex-col-6:hover .file-sharing-description .line2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

.flex-col-6:hover .file-sharing-description .line3 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

.flex-col-6:hover .file-sharing-description .line4 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s;
}

.flex-col-6:hover .file-sharing-description .line5 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.9s;
}


.reminders-description {
  font-family: 'Inter', sans-serif; /* Police Inter */
  font-weight: 500; /* Medium */
  font-size: 12px; /* Taille 12px */
  color: white; /* Couleur blanche */
  opacity: 0; /* Caché par défaut */
  overflow: hidden;
  margin-top: 5px; /* Espacement sous le titre */
  display: flex;
  flex-direction: column;
  gap: 2px; /* Espacement entre les lignes */
}

.reminders-description span {
  opacity: 0;
  transform: translateY(5px); /* Décalage initial */
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Animation progressive */
.flex-col-6:hover .reminders-description {
  opacity: 1; /* Rend visible */
}

.flex-col-6:hover .reminders-description .line1 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.flex-col-6:hover .reminders-description .line2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

.flex-col-6:hover .reminders-description .line3 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

.flex-col-6:hover .reminders-description .line4 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s;
}

.flex-col-6:hover .reminders-description .line5 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.9s;
}


.reporting-description {
  font-family: 'Inter', sans-serif; /* Police Inter */
  font-weight: 500; /* Medium */
  font-size: 12px; /* Taille 12px */
  color: white; /* Couleur blanche */
  opacity: 0; /* Caché par défaut */
  overflow: hidden;
  margin-top: 5px; /* Espacement sous le titre */
  display: flex;
  flex-direction: column;
  gap: 2px; /* Espacement entre les lignes */
}

.reporting-description span {
  opacity: 0;
  transform: translateY(5px); /* Décalage initial */
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Animation progressive */
.flex-col-6:hover .reporting-description {
  opacity: 1; /* Rend visible */
}

.flex-col-6:hover .reporting-description .line1 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.flex-col-6:hover .reporting-description .line2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

.flex-col-6:hover .reporting-description .line3 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

.flex-col-6:hover .reporting-description .line4 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s;
}

.flex-col-6:hover .reporting-description .line5 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.9s;
}

.mobile-description {
  font-family: 'Inter', sans-serif; /* Police Inter */
  font-weight: 500; /* Medium */
  font-size: 12px; /* Taille 12px */
  color: white; /* Couleur blanche */
  opacity: 0; /* Caché par défaut */
  overflow: hidden;
  margin-top: 5px; /* Espacement sous le titre */
  display: flex;
  flex-direction: column;
  gap: 2px; /* Espacement entre les lignes */
}

.mobile-description span {
  opacity: 0;
  transform: translateY(5px); /* Décalage initial */
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Animation progressive */
.flex-col-6:hover .mobile-description {
  opacity: 1; /* Rend visible */
}

.flex-col-6:hover .mobile-description .line1 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.flex-col-6:hover .mobile-description .line2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

.flex-col-6:hover .mobile-description .line3 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

.flex-col-6:hover .mobile-description .line4 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s;
}

.flex-col-6:hover .mobile-description .line5 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.9s;
}
.hms .frame-24 {
  align-items: center;
  display: flex;
  height: 1048px;
  left: 0;
  min-width: 1822px;
  padding: 366px 31.2px;
  position: absolute;
  top: 0;
}



.hms .flex-col-1 {
  margin-bottom: 59.15px;
  width: 179px;
}

.hms .x01 {
  height: 40px;
  margin-left: 2.82px;
  width: 62px;
}

.hms .task-dependencies {
  min-height: 17px;
  opacity: 0.61;
  width: 179px;
}

.hms .vector-8 {
  align-self: flex-start;
  height: 316px;
  margin-left: 156px;
  width: 1px;
  transform: translateY(-90px); /* Déplace l'image 10px vers le haut */
  transition: transform 0.3s ease;
}

.hms .flex-col-2 {
  margin-bottom: 59.15px;
  margin-left: 31px;
  width: 186px;
}

.hms .x02 {
  height: 40px;
  margin-left: 2.0px;
  width: 73px;
}

.hms .file-sharing {
  letter-spacing: 0;
  line-height: normal;
  min-height: 17px;
  opacity: 0.61;
  width: 186px;
}

.hms .vector-9 {
  align-self: flex-start;
  height: 316px;
  margin-left: 146px;
  width: 1px;
  transform: translateY(-90px); /* Déplace l'image 10px vers le haut */
  transition: transform 0.3s ease;
}

.hms .flex-col-3 {
  margin-bottom: 58.85px;
  margin-left: 28px;
  width: 206px;
}

.hms .x03 {
  height: 40px;
  margin-left: 3.0px;
  width: 74px;
}

.hms .reminders-and-notifications {
  letter-spacing: 0;
  line-height: normal;
  min-height: 17px;
  opacity: 0.61;
  width: 206px;
}

.hms .vector-10 {
  align-self: flex-start;
  height: 316px;
  margin-left: 129px;
  width: 1px;
  transform: translateY(-90px); /* Déplace l'image 10px vers le haut */
  transition: transform 0.3s ease;
}

.hms .flex-col-4 {
  margin-bottom: 58.85px;
  margin-left: 30px;
  width: 169px;
}

.hms .x04 {
  height: 40px;
  margin-left: 3.0px;
  width: 76px;
}

.hms .reporting-and-analytics {
  letter-spacing: 0;
  line-height: normal;
  min-height: 17px;
  opacity: 0.61;
  width: 169px;
}

.hms .vector-11 {
  align-self: flex-start;
  height: 316px;
  margin-left: 164px;
  width: 1px;
  transform: translateY(-90px); /* Déplace l'image 10px vers le haut */
  transition: transform 0.3s ease;
}

.hms .flex-col-5 {
  margin-bottom: 58.85px;
  margin-left: 30px;
  width: 144px;
}

.hms .x05 {
  height: 40px;
  margin-left: 3.18px;
  width: 73px;
}

.hms .mobile-accessibility {
  letter-spacing: 0;
  line-height: normal;
  min-height: 17px;
  opacity: 0.61;
  width: 144px;
}

.hms .additional-features {
  color: var(--white);
  font-family: var(--font-family-inter);
  font-size: 32px;
  font-weight: 500;
  left: 55px;
  letter-spacing: 0.64px;
  line-height: 41.6px;
  position: absolute;
  text-align: justify;
  top: 147px;
  white-space: nowrap;
}
.line1 {
  line-height: 1.5;
}
.line1, .line2, .line3 {
  line-height: 1.5; /* Ajuste l'interligne selon ton besoin */
}
.feature-list {
  font-family: 'Inter', sans-serif;
  font-weight: 500; /* Medium */
  font-size: 12px;
  color: #FFFFFF; /* Blanc */
  text-align: left;
  max-width: 220px;
  list-style-type: disc; /* Affiche les puces • */
  margin-top: 5px;
  padding-left: 15px; /* Ajoute une indentation pour les puces */
  line-height: 1.5; /* Ajuste l'espacement entre les lignes */
}
.line1, .line2, .line3 {
  display: block;
  line-height: 1.5; /* Applique une interligne de 1.5 */
}

.line1, .line2, .line3, .line4 {
  display: block;
  line-height: 1.5; /* Interligne améliorée */
}
.x03 {
  transform: translateY(-22px); /* Déplace l'image 10px vers le haut */
}
.x01 {
  transform: translateY(-22px); /* Déplace l'image 10px vers le haut */
}


.x04 {
  transform: translateY(-4px); /* Déplace l'image 10px vers le haut */
}
.x05 {
  transform: translateY(4px); /* Déplace l'image 10px vers le haut */
}

.file-sharing {
  transform: translateY(20px); /* Déplace le texte 10px vers le bas */
}


.reporting-and-analytics {
  transform: translateY(20px); /* Déplace le texte 10px vers le bas */
}

.mobile-accessibility {
  transform: translateY(30px); /* Déplace le texte 10px vers le bas */
}
.file-sharing-description {
  margin-top: 15px; /* Ajuste cette valeur selon ton besoin */
  display: block;
  transform: translateY(10px); /* Translation vers le bas */
}
.reporting-description {
  margin-top: 15px; /* Ajuste cette valeur pour plus d’espace */
  display: block;
  transform: translateY(10px); /* Translation vers le bas */
}
.mobile-description {
  margin-top: 15px; /* Ajuste cette valeur pour plus ou moins d’espace */
  display: block;
  transform: translateY(20px); /* Translation vers le bas */
}
.flex-col-3.flex-col-6 {
  width: 250px; /* Augmente la largeur */
  max-width: 300px; /* Permet un agrandissement fluide */
}
.overlap-group10 {
  display: flex;
  align-items: center; /* Alignement vertical */
  gap: 10px; /* Espacement entre la case et le texte */
}

.rectangle-51 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;  /* Taille ajustée */
  height: 24px;
  border: 2px solid #ccc; /* Bordure pour ressembler à un reCAPTCHA */
  background-color: white;
  cursor: pointer;
}

.rectangle-checkbox {
  width: 100%;
  height: 100%;
  opacity: 0; /* Cache l'input mais garde sa fonctionnalité */
  position: absolute;
  cursor: pointer;
}







/* Ajouter une coche (✔) lorsque la case est cochée */
/* Style du rectangle cliquable */
.rectangle-48 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px; /* Taille du carré */
  height: 20px;
  border: 2px solid #ccc; /* Bordure par défaut */
  background-color: transparent; /* Pas de fond */
  cursor: pointer;
}

/* Input checkbox caché */
.rectangle-checkbox {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* Élément où la coche va s'afficher */
.rectangle-51 {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* Ajout de la coche quand coché */
.rectangle-checkbox:checked + .rectangle-51::after {
  content: "✔";
  font-size: 14px;
  font-weight: bold;
  color: black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Effet lumineux gris */
.group-217,
.group-216,
.group-215 {
    position: relative;
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Correction de l'effet glow pour un survol plus rapide */
.group-217:hover,
.group-216:hover,
.group-215:hover {
   
    transform: scale(1.02); /* Réduction du zoom */
    transition: all 0.15s ease-out; /* Réduction de la durée de transition */
}


/* Ajout d'une lueur plus douce */
.group-217:hover::before,
.group-216:hover::before,
.group-215:hover::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(200, 200, 200, 0.3) 0%, rgba(0, 0, 0, 0) 80%);
    transform: translate(-50%, -50%);
    opacity: 0.6;
    filter: blur(20px);
    transition: opacity 0.3s ease-in-out;
}

/* Texte caché par défaut */
.text-description {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    
    font-family: 'Inter', sans-serif; /* Police Inter */
    font-weight: 600; /* Semi-Bold */
    font-size: 20px; /* Taille 20px */
    color: white; /* Texte blanc */
    text-align: left;
    max-width: 280px;
    line-height: 1.5;
}

/* Affichage progressif du texte au survol */
.group-217:hover .text-description,
.group-216:hover .text-description,
.group-215:hover .text-description {
    opacity: 1;
    transform: translateY(0);
}


/* Effet actif sur "Solution" */
.solution:focus,
.solution:active {
    outline: none; /* Supprime la bordure par défaut */
    box-shadow: none; /* Supprime l'effet de surbrillance */
    background-color: inherit; /* Garde la couleur d'origine */
    color: inherit; /* Garde la couleur d'origine */
}

/* Liste déroulante */


/* Style des options de la liste */





/* Conteneur des détails (ligne + logo) */
.details-container {
  display: none; /* Caché par défaut */
  flex-direction: row;
  align-items: center;
  gap: 20px;
}





/* Effet actif sur l'élément sélectionné */
.solution-item.active {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 7px;
}




/* Effet au survol */
.solutions-list div:hover {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 5px;
}

/* Conteneur des détails dans la liste */
.details-container {
  display: none; /* Caché par défaut */
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
}









.body .component-14 {
  align-items: flex-start;
  align-self: center;
  background-color: var(--white-2);
  border: 1px solid;
  border-color: var(--celeste);
  border-radius: 500px;
  box-shadow: 0px 4px 5px #58559440;
  display: flex;
  gap: 100px;
  height: 48px;
  margin-left: 41px;
  margin-top: 4.82px;
  min-width: 754px;
  padding: 50 100px;
  width: 90%;
  max-width: 1200px;
}

/* Navbar principale */
/* Navbar principale */
.component-14 {
  display: flex;
  justify-content: center;
  gap: 50px;
  font-size: 20px;
  font-weight: normal; /* Correction : suppression du gras */
  font-family: "Arial", sans-serif;
  padding: 20px 60px; /* Augmentation du padding pour agrandir le rectangle */
  border-radius: 30px;
  background: white;
  box-shadow: none !important; /* Supprime toute ombre */
  white-space: nowrap;
  align-items: center;
  align-self: center;
  background-color: transparent !important; /* Supprime la couleur de fond */
  border: none !important; /* Supprime la bordure */
  transition: all 0.3s ease-in-out;
  height: 60px; /* Augmentation de la hauteur */
  margin-left: 41px;
  margin-top: 4.82px;
  min-width: 900px; /* Augmentation de la largeur */
  padding: 0 50px;
  color: #0A192F;
}




.body .flex-row {
  align-items: center;
  display: flex;
  height: 63px;
  margin-top: 0; /* Suppression de l'espace au-dessus */
  min-width: 100vw; /* Largeur 100% de la fenêtre */
  position: fixed; /* Fixe la navbar en haut */
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--white); /* Couleur de base */
  z-index: 1000; /* Assure qu'elle est au-dessus du contenu */
  transition: background-color 0.3s ease-in-out; /* Animation douce */
  padding: 0; /* Suppression du padding */
  justify-content: center;
}


/* Suppression d'un éventuel résidu d'ombre */
.body .flex-row::after {
  content: "";
  display: none !important;
}


.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 */
  transition: background-color 0.3s ease-in-out; /* Animation fluide */
}


.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);
    }
}



/* Correction du bouton de langue */
.overlap-group3 {
  align-self: center;
  height: 48px;
  margin-left: 77px;
  position: relative;
  width: 97px;
}

.rectangle-4 {
  -webkit-backdrop-filter: blur(35px) brightness(100%);
  backdrop-filter: blur(35px) brightness(100%);
  background-color: var(--white-2);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 500px;
  height: 48px;
  left: 0;
  position: absolute;
  top: 0;
  width: 97px;
}

.rectangle-5 {
  background-color: #ffffff80;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 500px;
  height: 42px;
  left: 2px;
  position: absolute;
  top: 3px;
  width: 58px;
}

.en {
  color: var(--black);
  font-family: "Arial", sans-serif;
  font-size: 16px;
  font-weight: normal;
  left: 18px;
  letter-spacing: 0;
  line-height: 43.7px;
  position: absolute;
  top: 2px;
  white-space: nowrap;
  width: 26px;
}

/* Effet au survol */
.body .place:hover, .body .solution:hover, .body .about-us:hover {
  color: #585594;
  cursor: pointer;
}



.body .group-165 {
  height: 48px;
  width: 201px;
}

.body .place {
  letter-spacing: 0;
  line-height: 43.7px;
  margin-top: -1px;
  min-height: 44px;
  width: 76px;
}

.body .solution {
  letter-spacing: 0;
  line-height: 43.7px;
  min-height: 44px;
  width: 101px;
}

.body .about-us {
  letter-spacing: 0;
  line-height: 43.7px;
  min-height: 44px;
  width: 110px;
}

.body .overlap-group3 {
  align-self: flex-end;
  height: 53px;
  margin-left: 77px;
  position: relative;
  width: 97px;
}




/* Ligne de séparation avec image - Cachée au début */
.vertical-line-img {
  width: 3px;
  height: 100%; /* Prend toute la hauteur disponible */
  object-fit: contain; /* Ajuste l'image pour qu'elle s'affiche proprement */
  display: none; /* Cachée par défaut */
}


/* Contenu principal de la liste */
.solutions-content {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Alignement au centre */
  width: 100%;
  gap: 50px; /* Ajoute un espace entre la liste et le logo */
}

/* Conteneur des éléments de la liste */
.solution-items {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px; /* Espacement entre les solutions */
}

/* Chaque élément de la liste - Taille réduite */
.solution-item {
  padding: 15px 25px; /* Diminue la hauteur */
  font-size: 28px; /* Réduit la taille de la police */
  font-family: "Inter", sans-serif;
  font-weight: 500;
  line-height: 36px;
  text-align: left;
  cursor: pointer;
  color: #0A192F;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  transition: background 0.3s;
}

/* Supprime la bordure du dernier élément */
.solution-item:last-child {
  border-bottom: none;
}

/* Effet survol */
.solution-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Élément actif */
.solution-item.active {
  font-weight: bold;
  background: rgba(0, 0, 0, 0.1);
}

/* Ligne verticale de séparation */
.vertical-line {
  width: 2px;
  background: #0A192F;
  height: 100%;
}






/* Classe pour déclencher l'animation */
.solution-logo.show {
  animation: fadeInScaleUp 0.8s ease-out forwards;
}

/* 🟢 Effet d'agrandissement au survol */
.solution-logo:hover {
  transform: scale(1.1) !important;
}
/* 🟢 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);
  }
}



/* 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');






/* ✅ 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 */
}








/* Conteneur du logo IXORA et des logos des solutions */
.ixorax-container {
  display: none; /* Caché au début */
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  min-width: 350px;
  height: 350px;
  border-radius: 15px;
  overflow: hidden;
  opacity: 0; /* Invisible au début */
  transform: scale(0.8); /* Réduit au début */
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}


/* Animation d’apparition */
.ixorax-container.show {
  opacity: 1;
  transform: scale(1);
}

/* Le logo IXORA en arrière-plan */
.ixorax-logo {
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.5;
  z-index: 0;
}

/* Conteneur des logos des solutions */
.ixorax-logo-container {
  
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px 20px;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-items: center;

  border: none !important; 
  box-shadow: none !important; 
  
}


.ixorax-logo-container hr {
  display: none !important;
}
.ixorax-logo-container::after,
.ixorax-logo-container::before {
  display: none !important;
  content: none !important;
}


/* Correction pour que le 3e logo soit centré si seulement 3 logos */
.ixorax-logo-container img:nth-child(3):nth-last-child(1) {
  grid-column: span 2;
  justify-self: center;
}

/* Ajustement pour 5 logos (2 en haut, 2 au milieu, 1 en bas centré) */
.ixorax-logo-container img:nth-child(5):nth-last-child(1) {
  grid-column: span 2;
  justify-self: center;
}








/* Style des logos avec animation de base */
.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;
}

.solutions-list div { 
  padding: 20px 25px; 
  font-size: 20px; 
  font-family: "Inter", sans-serif; 
  font-weight: 500; /* Medium correspond à font-weight: 500 */
  color: #0A192F; 
  cursor: pointer; 
  border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
  line-height: 40px; 
  text-align: left; 
  text-underline-position: from-font; 
  text-decoration-skip-ink: none; 
}






/* Liste déroulante */
/* Liste déroulante */
.solutions-list {
  position: absolute;
  top: 80px;
  left: 0;
  width: 100%; /* Largeur totale */
  background: rgba(0, 0, 11, 0.1); /* Ajustement du fond */
  border-radius: 0 0 7px 7px; /* Coins inférieurs arrondis */
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
  padding: 0;
  display: none;
  z-index: 200;
  backdrop-filter: blur(35px); /* Flou pour effet verre */
}



.solution-item.highlight {
  font-weight: bold;
  color: #001E36;
}