/* screen - cms */




.cms {
  background-color: var(--white);
  min-height: 100vh;
  position: relative;
  width: 100%;
}



.cms .overlap-group14 {
  height: 1045px;
  left: 0;
  position: absolute;
  top: 66px;
  width: 829px;
}

.cms .rectangle-30 {
  background-color: var(--ceramic);
  height: 1045px;
  left: 0;
  position: absolute;
  top: 0;
  width: 829px;
}

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

.cms .revolutionize-how-yo {
  left: 110px;
  letter-spacing: 0;
  line-height: 23.4px;
  position: absolute;
  top: 504px;
  width: 657px;
}

.cms .simplify-your-workfl {
  left: 110px;
  letter-spacing: 0;
  line-height: 50.4px;
  position: absolute;
  top: 315px;
  width: 642px;
}

.cms .rectangle-22 {
  background-color: var(--dodger-blue);
  border-radius: 8px;
  cursor: pointer;
  height: 55px;
  left: 113px;
  position: absolute;
  top: 604px;
  width: 210px;
}


.cms .overlap-group-container-1 {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  left: -151px;
 
  position: absolute;
  top: 1111px;
  width: 1973px;
}

.cms .overlap-group12 {
  align-items: center;
  background-color: #f6f6f6;
  display: flex;
  flex-direction: column;
  min-height: 782px;
  padding: 52px 146px;
  width: 1822px;
}

.cms .overlap-group16 {
  height: 132px;
  margin-left: 14.0px;
  position: relative;
  width: 842px;
}

.cms .overview {
  color: #545454;
  font-family: var(--font-family-inter);
  font-size: 30px;
  font-weight: 600;
  left: 345px;
  letter-spacing: 0;
  line-height: 55.1px;
  position: absolute;
  top: 0;
  white-space: nowrap;
}

.cms .efficient-communication-simplified {
  left: 0;
  letter-spacing: 0;
  line-height: 88.1px;
  position: absolute;
  top: 44px;
  white-space: nowrap;
}

.cms .correspondence-manag {
  letter-spacing: 0;
  line-height: 23.4px;
  margin-top: 9px;
  min-height: 69px;
  text-align: center;
  width: 1284px;
}

.cms .overlap-group-container-2 {
  align-items: flex-start;
  align-self: flex-end;
  display: flex;
  gap: 55px;
  height: 372px;
  margin-top: 67px;
  min-width: 1529px;
}

.cms .overlap-group {
  align-items: center;
  background-color: var(--white);
  border-radius: 26px;
  box-shadow: 0px 0px 3.8px 2px #0000001f;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 372px;
  padding: 13px 0;
  width: 341px;
}

.cms .email-marketing-news {
  height: 161px;
  object-fit: cover;
  width: 315px;
}

.cms .automated-processes {
  letter-spacing: 0;
  line-height: normal;
  margin-left: 1.0px;
  min-height: 24px;
  min-width: 214px;
  white-space: nowrap;
}

.cms .streamline-approvals {
  letter-spacing: 0;
  line-height: normal;
  min-height: 54px;
  text-align: center;
  width: 315px;
}

.cms .messages-floating-laptop {
  height: 161px;
  object-fit: cover;
  width: 315px;
}

.cms .centralized-access {
  letter-spacing: 0;
  line-height: normal;
  margin-left: 1.0px;
  min-height: 24px;
  min-width: 188px;
  white-space: nowrap;
}

.cms .consolidate-all-comm {
  letter-spacing: 0;
  line-height: normal;
  min-height: 54px;
  text-align: center;
  width: 315px;
}

.cms .business-people-plan {
  height: 161px;
  object-fit: cover;
  width: 315px;
}

.cms .tracking-and-metrics {
  letter-spacing: 0;
  line-height: normal;
  margin-left: 1.0px;
  min-height: 24px;
  min-width: 204px;
  white-space: nowrap;
}

.cms .monitor-communicatio {
  letter-spacing: 0;
  line-height: normal;
  min-height: 54px;
  text-align: center;
  width: 315px;
}

.cms .dictionary-definition-word {
  height: 161px;
  object-fit: cover;
  width: 315px;
}

.cms .x-and-tra {
  letter-spacing: 0;
  line-height: normal;
  min-height: 24px;
  min-width: 297px;
  white-space: nowrap;
}

.cms .ensure-accountabilit {
  min-height: 72px;
  width: 315px;
}

.cms .overlap-group15 {
  align-self: center;
  height: 119px;
  margin-right: 146.0px;
  margin-top: 45px;
  position: relative;
  width: 1199px;
}

.cms .surname {
  color: #737373;
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxxxl);
  font-weight: 600;
  left: 0;
  letter-spacing: 0;
  line-height: 44.1px;
  position: absolute;
  top: 0;
  white-space: nowrap;
}

.cms .streamline-communica {
  left: 0;
  letter-spacing: 0;
  line-height: 88.1px;
  position: absolute;
  top: 31px;
  white-space: nowrap;
}

.cms .overlap-group13 {
  height: 2510px;
  margin-top: 3px;
  position: relative;
  width: 1973px;
}

.cms .rectangle-21 {
  background-color: #f6f6f6;
  height: 1179px;
  left: 151px;
  position: absolute;
  top: 758px;
  width: 1822px;
}

.cms .rectangle-19 {
  background-color: var(--dodger-blue);
  height: 620px;
  left: 146px;
  position: absolute;
  top: 1937px;
  width: 1827px;
}

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

.cms .frame-13 {
  align-items: flex-start;
  display: flex;
  gap: 73px;
  height: 981px;
  left: 352px;
  min-width: 1475px;
  padding: 85px 0;
  position: absolute;
  top: 0;
}

.cms .flex-col {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  margin-top: 24px;
  min-height: 557px;
  width: 409px;
}

.cms .frame-1 {
  align-items: center;
  display: flex;
  gap: 27px;
  height: 275px;
  overflow: hidden;
  padding: 0 1px;
  width: 409px;
}

.cms .line-6 {
  height: 268px;
  margin-left: 3px;
  width: 1px;
}

.cms .flex-col-1 {
  align-items: flex-start;
  align-self: flex-end;
  margin-bottom: -1px;
  min-height: 240px;
  width: 376px;
}

.cms .flex-row {
  align-items: center;
  display: flex;
  gap: 16px;
  height: 24px;
  min-width: 283px;
}

.cms .ment {
  letter-spacing: 0;
  line-height: normal;
  min-height: 24px;
  min-width: 258px;
  white-space: nowrap;
}

.cms .vector {
  height: 5px;
  margin-top: 3.0px;
  width: 9px;
}

.cms .efficiently-send-and {
  letter-spacing: 0;
  line-height: normal;
  margin-top: 38px;
  min-height: 72px;
  width: 376px;
}

.cms .line-1-1 {
  height: 1px;
  margin-top: 39px;
  width: 376px;
}

.cms .frame-container {
  height: 282px;
  position: relative;
  width: 409px;
}

.cms .frame-2 {
  align-items: flex-end;
  display: flex;
  gap: 27px;
  height: 95px;
  left: 0;
  overflow: hidden;
  padding: 0 1px;
  position: absolute;
  top: 0;
  width: 409px;
}

.cms .line-7 {
  height: 1px;
  margin-bottom: -47px;
  margin-left: 3px;
  width: 1px;
}

.cms .flex-col-2 {
  align-items: flex-start;
  margin-bottom: -157px;
  min-height: 218px;
  width: 376px;
}

.cms .flex-row-1 {
  align-items: center;
  display: flex;
  gap: 16px;
  height: 24px;
  min-width: 335px;
}

.cms .request-and-approval-workflow {
  letter-spacing: 0;
  line-height: normal;
  min-height: 24px;
  min-width: 310px;
  white-space: nowrap;
}

.cms .line {
  height: 1px;
  margin-top: 36px;
  width: 376px;
}

.cms .automate-the-process {
  letter-spacing: 0;
  line-height: normal;
  margin-top: 1px;
  min-height: 90px;
  width: 376px;
}

.cms .frame-3 {
  align-items: flex-end;
  display: flex;
  gap: 27px;
  height: 95px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 94px;
  width: 409px;
}

.cms .line-6-1 {
  margin-left: 4px;
}

.cms .flex-col-3 {
  align-items: flex-start;
  margin-bottom: -139px;
  min-height: 200px;
  width: 377px;
}

.cms .flex-row-2 {
  align-items: center;
  display: flex;
  gap: 16px;
  height: 24px;
  min-width: 322px;
}

.cms .enhance-collaboratio {
  letter-spacing: 0;
  line-height: normal;
  margin-left: 1px;
  margin-top: 1px;
  min-height: 72px;
  width: 376px;
}

.cms .learn-more-1 {
  margin-left: 1px;
  margin-top: 51px;
}

.cms .frame-4 {
  align-items: flex-end;
  display: flex;
  gap: 27px;
  height: 95px;
  left: 0;
  overflow: hidden;
  padding: 0 1px;
  position: absolute;
  top: 187px;
  width: 409px;
}

.cms .line-6-2 {
  margin-left: 3px;
}

.cms .flex-col-4 {
  align-items: flex-start;
  margin-bottom: -139px;
  min-height: 200px;
  width: 376px;
}

.cms .name {
  letter-spacing: 0;
  line-height: normal;
  margin-top: 1px;
  min-height: 90px;
  width: 376px;
}

.cms .learn-more-2 {
  margin-top: 33px;
}

.cms .overlap-group5 {
  height: 632px;
  position: relative;
  width: 993px;
}

.cms .inbox-2-8 {
  border: 10px solid;
  border-color: var(--dodger-blue);
  height: 596px;
  left: 131px;
  position: absolute;
  top: 0;
  width: 862px;
}

.cms .frame-11 {
  align-items: flex-start;
  display: flex;
  gap: 15px;
  height: 629px;
  left: 0;
  overflow: hidden;
  padding: 17px 0;
  position: absolute;
  top: 3px;
  width: 980px;
}

.cms .x1 {
  box-shadow: -19px 19px 26.5px 2px #00000054;
  margin-left: 49px;
  margin-top: 1px;
}

.cms .rectangle-17 {
  height: 556px;
  margin-top: -1px;
  object-fit: cover;
  width: 924px;
}

.cms .overlap-group4 {
  background-image: url(../imgcms/rectangle-18.png);
  background-size: 100% 100%;
  height: 556px;
  position: relative;
  width: 924px;
}

.cms .overlap-group4-item {
  align-items: flex-start;
  display: flex;
  height: 554px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 1px;
  width: 924px;
}

.cms .overlap-group-1 {
  align-items: center;
  background-image: url(../imgcms/rectangle-18.png);
  background-size: 100% 100%;
  display: flex;
  height: 556px;
  margin-top: -1px;
  min-width: 924px;
}

.cms .exclude {
  height: 554px;
  width: 924px;
}

.cms .overlap-group-2 {
  align-items: flex-start;
  background-image: url(../imgcms/rectangle-18-2.png);
  background-position: 50% 50%;
  background-size: cover;
  display: flex;
  margin-top: -1px;
  min-width: 924px;
}

.cms .exclude-1 {
  height: 556px;
  width: 924px;
}

.cms .x1-1 {
  left: 0;
  position: absolute;
  top: 1px;
}

.cms .rectangle-18 {
  height: 556px;
  left: 0;
  position: absolute;
  top: 0;
  width: 924px;
}

.cms .explore-more-feature {
  left: 621px;
  letter-spacing: 0;
  line-height: 59.5px;
  position: absolute;
  text-align: center;
  top: 829px;
  width: 882px;
}

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

.cms .overlap-group7 {
  align-items: center;
  background-color: var(--white);
  border-radius: 15px;
  box-shadow: 5px 5px 7.1px 2px #00000014;
  display: flex;
  flex-direction: column;
  left: 598px;
  min-height: 386px;
  padding: 11px 0;
  position: absolute;
  top: 1471px;
  width: 334px;
}

.cms .overlap-group-5 {
  height: 67px;
  margin-left: 0.01px;
  margin-top: 35px;
  position: relative;
  width: 68px;
}

.cms .vector-1 {
  height: 8px;
  left: 4px;
  position: absolute;
  top: 16px;
  width: 45px;
}

.cms .vector-2 {
  height: 8px;
  left: 4px;
  position: absolute;
  top: 37px;
  width: 45px;
}

.cms .vector-3 {
  height: 18px;
  left: 0;
  position: absolute;
  top: 0;
  width: 54px;
}

.cms .group {
  height: 2px;
  left: 7px;
  position: absolute;
  top: 8px;
  width: 40px;
}

.cms .vector-4 {
  height: 18px;
  left: 0;
  position: absolute;
  top: 21px;
  width: 54px;
}

.cms .vector-5 {
  height: 2px;
  left: 7px;
  position: absolute;
  top: 29px;
  width: 4px;
}

.cms .vector-6 {
  height: 2px;
  left: 15px;
  position: absolute;
  top: 29px;
  width: 4px;
}

.cms .vector-7 {
  height: 2px;
  left: 22px;
  position: absolute;
  top: 29px;
  width: 25px;
}

.cms .vector-8 {
  height: 18px;
  left: 0;
  position: absolute;
  top: 43px;
  width: 54px;
}

.cms .vector-9 {
  height: 2px;
  left: 7px;
  position: absolute;
  top: 51px;
  width: 4px;
}

.cms .vector-10 {
  height: 2px;
  left: 15px;
  position: absolute;
  top: 51px;
  width: 4px;
}

.cms .vector-11 {
  height: 2px;
  left: 22px;
  position: absolute;
  top: 51px;
  width: 25px;
}

.cms .vector-12 {
  height: 25px;
  left: 40px;
  position: absolute;
  top: 36px;
  width: 20px;
}

.cms .vector-13 {
  height: 38px;
  left: 34px;
  position: absolute;
  top: 29px;
  width: 34px;
}

.cms .vector-14 {
  height: 29px;
  left: 38px;
  position: absolute;
  top: 34px;
  width: 25px;
}

.cms .vector-15 {
  height: 10px;
  left: 44px;
  position: absolute;
  top: 43px;
  width: 13px;
}

.cms .security-and-access-controls {
  letter-spacing: 0;
  line-height: normal;
  margin-top: 43px;
  min-height: 24px;
  min-width: 286px;
  white-space: nowrap;
}

.cms .protect-sensitive-or {
  letter-spacing: 0;
  line-height: normal;
  margin-top: 14px;
  min-height: 180px;
  width: 286px;
}

.cms .script {
  height: 67px;
  left: 1206px;
  position: absolute;
  top: 1455px;
  width: 67px;
}

.cms .overlap-group8 {
  align-items: center;
  background-color: var(--white);
  border-radius: 15px;
  box-shadow: 5px 5px 7.1px 2px #00000014;
  display: flex;
  flex-direction: column;
  left: 1193px;
  min-height: 386px;
  padding: 49.1px 23px;
  position: absolute;
  top: 1471px;
  width: 334px;
}

.cms .vector-container {
  height: 63px;
  margin-left: 1.0px;
  position: relative;
  width: 54px;
}

.cms .vector-16 {
  height: 52px;
  left: 0;
  position: absolute;
  top: 10px;
  width: 44px;
}

.cms .vector-17 {
  height: 52px;
  left: 5px;
  position: absolute;
  top: 5px;
  width: 44px;
}

.cms .vector-18 {
  height: 52px;
  left: 10px;
  position: absolute;
  top: 0;
  width: 44px;
}

.cms .vector-19 {
  height: 2px;
  left: 23px;
  position: absolute;
  top: 25px;
  width: 24px;
}

.cms .vector-20 {
  height: 2px;
  left: 23px;
  position: absolute;
  top: 29px;
  width: 13px;
}

.cms .vector-21 {
  height: 2px;
  left: 23px;
  position: absolute;
  top: 35px;
  width: 24px;
}

.cms .vector-22 {
  height: 2px;
  left: 23px;
  position: absolute;
  top: 39px;
  width: 24px;
}

.cms .vector-23 {
  height: 2px;
  left: 16px;
  position: absolute;
  top: 35px;
  width: 4px;
}

.cms .vector-24 {
  height: 2px;
  left: 23px;
  position: absolute;
  top: 43px;
  width: 13px;
}

.cms .customization-and-scalability {
  align-self: flex-end;
  letter-spacing: 0;
  line-height: normal;
  margin-top: 45px;
  min-height: 24px;
  min-width: 287px;
  white-space: nowrap;
}

.cms .tailor-ixora-cms-to-m {
  letter-spacing: 0;
  line-height: normal;
  margin-top: 14px;
  min-height: 90px;
  text-align: center;
  width: 280px;
}

.cms .title {
  color: var(--white);
  font-family: var(--font-family-arial_mt_black-regular);
  font-size: 64px;
  font-weight: 400;
  left: 468px;
  letter-spacing: 0;
  line-height: 117.5px;
  position: absolute;
  top: 1989px;
  white-space: nowrap;
}

.cms .group-164 {
  align-items: flex-start;
  display: flex;
  gap: 261px;
  height: 356px;
  left: 300px;
  min-width: 929px;
  position: absolute;
  top: 1034px;
}

.cms .group-157 {
  align-items: center;
  background-color: var(--white);
  border-radius: 15px;
  box-shadow: 5px 5px 7.1px 2px #00000014;
  display: flex;
  flex-direction: column;
  min-height: 356px;
  padding: 42px 0;
  width: 334px;
}

.cms .transfer_-data {
  height: 78px;
  width: 78px;
}

.cms .document-exchange {
  letter-spacing: 0;
  line-height: normal;
  margin-top: 36px;
  min-height: 24px;
  min-width: 200px;
  white-space: nowrap;
}

.cms .securely-share-docum {
  letter-spacing: 0;
  line-height: normal;
  margin-top: 15px;
  min-height: 90px;
  text-align: center;
  width: 264px;
}

.cms .overlap-group1 {
  align-items: flex-end;
  background-color: var(--white);
  border-radius: 15px;
  box-shadow: 5px 5px 7.1px 2px #00000014;
  display: flex;
  flex-direction: column;
  min-height: 356px;
  padding: 42px 24px;
  width: 334px;
}

.cms .phishing_-alert {
  align-items: flex-start;
  align-self: center;
  display: flex;
  height: 76px;
  margin-left: 12.0px;
  padding: 2.4px 2.4px;
  width: 76px;
}

.cms .overlap-group-6 {
  height: 71px;
  position: relative;
  width: 71px;
}

.cms .vector-25 {
  height: 46px;
  left: 5px;
  position: absolute;
  top: 17px;
  width: 62px;
}

.cms .vector-26 {
  height: 14px;
  left: 0;
  position: absolute;
  top: 57px;
  width: 71px;
}

.cms .group-1 {
  height: 17px;
  left: 14px;
  position: absolute;
  top: 36px;
  width: 43px;
}

.cms .ellipse-2 {
  background-color: #45e0d0;
  border-radius: 15.44px;
  height: 31px;
  left: 20px;
  position: absolute;
  top: 0;
  width: 31px;
}

.cms .vector-27 {
  height: 12px;
  left: 34px;
  position: absolute;
  top: 6px;
  width: 2px;
}

.cms .vector-28 {
  height: 4px;
  left: 34px;
  position: absolute;
  top: 20px;
  width: 2px;
}

.cms .notifications-and-reminders {
  letter-spacing: 0;
  line-height: normal;
  margin-top: 44px;
  min-height: 24px;
  min-width: 274px;
  white-space: nowrap;
}

.cms .stay-informed-with-r {
  letter-spacing: 0;
  line-height: normal;
  margin-right: 6px;
  margin-top: 9px;
  min-height: 90px;
  text-align: center;
  width: 261px;
}

.cms .overlap-group9 {
  align-items: center;
  background-color: var(--white);
  border-radius: 15px;
  box-shadow: 5px 5px 7.1px 2px #00000014;
  display: flex;
  flex-direction: column;
  left: 1490px;
  min-height: 356px;
  padding: 44px 24px;
  position: absolute;
  top: 1034px;
  width: 334px;
}

.cms .data_-exploration {
  height: 73px;
  margin-left: 23.0px;
  width: 73px;
}

.cms .audit-trail-and-history {
  letter-spacing: 0;
  line-height: normal;
  margin-top: 45px;
  min-height: 24px;
  min-width: 216px;
  white-space: nowrap;
}

.cms .ensure-transparency {
  align-self: flex-end;
  margin-top: 9px;
  min-height: 90px;
  width: 285px;
}

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

.cms .inbox-2-1 {
  height: 178px;
  left: 767px;
  object-fit: cover;
  position: absolute;
  top: 2176px;
  width: 296px;
}

.cms .group-39 {
  height: 65px;
  left: 847px;
  position: absolute;
  top: 2390px;
  width: 61px;
}

.cms .group-120 {
  height: 37px;
  left: 779px;
  position: absolute;
  top: 2461px;
  width: 197px;
}

.cms .rb_19878-1 {
  height: 841px;
  left: 1045px;
  object-fit: cover;
  position: absolute;
  top: 1829px;
  width: 841px;
}

.cms .user-friendly-interf {
  left: 1141px;
  letter-spacing: 0;
  line-height: 27.0px;
  position: absolute;
  text-align: center;
  top: 2005px;
  transform: rotate(-8.73deg);
  width: 247px;
}

.cms .scalable-solutions-t {
  left: 1551px;
  letter-spacing: 0;
  line-height: 27.0px;
  position: absolute;
  text-align: center;
  top: 2016px;
  transform: rotate(13.75deg);
  width: 247px;
}

.cms .reliable-security-fe {
  left: 1164px;
  letter-spacing: 0;
  line-height: 27.0px;
  position: absolute;
  text-align: center;
  top: 2395px;
  transform: rotate(-7.73deg);
  width: 247px;
}

.cms .responsive-support-t {
  left: 1544px;
  letter-spacing: 0;
  line-height: 27.0px;
  position: absolute;
  text-align: center;
  top: 2368px;
  width: 247px;
}

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

.cms .inbox-1 {
  height: 161px;
  left: 482px;
  object-fit: cover;
  position: absolute;
  top: 2221px;
  width: 268px;
}

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

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

.cms .overlap-group1-1 {
  align-items: center;
  background-color: var(--midnight);
  border-radius: 5px;
  display: flex;
  height: 56px;
  justify-content: flex-end;
  min-width: 182px;
  padding: 0 42px;
}

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

.cms .overlap-group11 {
  align-items: flex-end;
  background-color: var(--midnight);
  display: flex;
  flex-direction: column;
  margin-top: 84px;
  min-height: 1406px;
  padding: 99px 224px;
  width: 1822px;
}

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

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

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

.cms .overlap-group20 {
  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;
}

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

.cms .overlap-group24 {
  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;
}

.cms .overlap-group26 {
  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;
}

.cms .overlap-group19 {
  align-items: center;
  background-color: var(--concrete);
  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;
}

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

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

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

.cms .re-captcha {
  letter-spacing: 0;
  line-height: 12.6px;
  margin-right: 3.0px;
  margin-top: 4px;
  min-height: 13px;
  min-width: 69px;
  white-space: nowrap;
}

.cms .privacy-terms {
  line-height: 10.5px;
  margin-right: 4.0px;
  min-width: 74px;
}

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

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

.cms .overlap-group25 {
  align-items: flex-start;
  background-color: var(--dodger-blue);
  border-radius: 5px;
  display: flex;
  height: 55px;
  margin-top: 32px;
  min-width: 689px;
  padding: 17px 304px;
}

.cms .group-container {
  align-self: center;
  height: 103px;
  margin-left: 160.0px;
  margin-top: 53px;
  position: relative;
  width: 1385px;
}

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

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

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

.cms .copyright {
  letter-spacing: 0;
  line-height: normal;
  min-height: 17px;
}

.cms .infoixoraxcom {
  letter-spacing: 0;
  line-height: normal;
  min-height: 17px;
}

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

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

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

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

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

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

.cms .frame-15 {
  align-items: center;
  display: flex;
  height: 938px;
  left: 830px;
  overflow: hidden;
  position: absolute;
  top: 34px;
  width: 1064px;
}

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

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

.cms .group-142 {
  height: 129px;
  left: 738px;
  position: absolute;
  top: 0;
  width: 121px;
}



.cms .group-120-1 {
  height: 71px;
  left: 610px;
  position: absolute;
  top: 59px;
  width: 380px;
}

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

.cms .overlap-group-8 {
  height: 86px;
  position: relative;
  width: 349px;
}

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

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

.cms .overlap-group3 {
  align-items: center;
  background-color: var(--ceramic);
  display: flex;
  gap: 48px;
  margin-left: 1px;
  min-width: 174px;
}

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

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

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

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

.cms .r {
  align-self: flex-start;
  height: 737px;
  margin-left: 201px;
  width: 955px;
}

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

.cms .group-container-2 {
  align-items: flex-start;
  display: flex;
  gap: 29px;
  margin-right: 9.0px;
  min-width: 815px;
}

.cms .group-148 {
  height: 125px;
  width: 117px;
}

.cms .group-149 {
  height: 126px;
  width: 669px;
}

.cms .overlap-group5-1 {
  height: 406px;
  position: relative;
  width: 876px;
}

.cms .group-153 {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-bottom: 37.99px;
  margin-left: 201px;
  min-height: 590px;
  width: 790px;
}

.cms .group-container-3 {
  align-items: flex-start;
  display: flex;
  gap: 20px;
  height: 138px;
  margin-right: 0;
  min-width: 775px;
}

.cms .group-144 {
  height: 122px;
  width: 649px;
}

.cms .group-143 {
  align-self: flex-end;
  height: 113px;
  width: 106px;
}

.cms .mock-container {
  height: 427px;
  margin-right: 0;
  position: relative;
  width: 790px;
}

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

.cms .group-146 {
  height: 144px;
  margin-right: 376.47px;
  width: 135px;
}

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

.cms .group-147 {
  height: 87px;
  left: 93px;
  position: absolute;
  top: 0;
  width: 465px;
}

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

.cms .ensure {
  letter-spacing: 0;
  line-height: normal;
  text-align: center;
}

.cms .flex-col-6 {
  display: flex;
  flex-direction: column;
}

.cms .learn-more-3 {
  letter-spacing: 0;
  line-height: normal;
  min-height: 15px;
  text-decoration: underline;
}

.cms .line-6-3 {
  height: 1px;
  margin-bottom: -41px;
  width: 1px;
}

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

.cms .x1-2 {
  align-items: flex-start;
  display: flex;
  height: 554px;
  overflow: hidden;
  width: 916px;
}








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


#custom-image-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-mockup {
  max-width: 100%; /* Assure que l'image ne dépasse pas son conteneur */
  height: auto; /* Garde le ratio de l'image */
  display: block; /* Supprime tout espace supplémentaire */
  object-fit: contain; /* Assure que l'image est entièrement visible */
}

.overlap-group8-1 {
  overflow: visible; /* Permet d'afficher toute l'image */
  display: flex; /* Centrer si besoin */
  justify-content: center; /* Centrer horizontalement */
  align-items: center; /* Centrer verticalement */
  height: auto;
  min-height: 100%;
}

.frame-15, .group-container-1 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.group-container-1 {
  overflow: visible;
}

#custom-image-container, .frame-15, .group-container-1 {
  overflow: visible !important;
}



#custom-image-container {
  min-height: 70%;
  height: auto;
}
.platforms-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* Permet aux éléments de passer à la ligne si besoin */
  overflow: visible;
  height: auto;
}





.rectangle-checkbox {
  width: 24px;  /* Taille augmentée */
  height: 24px;
  cursor: pointer;
  accent-color: #007bff; /* Changer la couleur de la case cochée */
}

.rectangle-label {
  display: flex;
  align-items: center;
  gap: 10px; /* Espacement entre la case et le texte */
}


.rectangle-checkbox {
  width: 24px;  /* Agrandissement de la case */
  height: 24px;
  cursor: pointer;
  accent-color: #007bff; /* Couleur bleue comme Google reCAPTCHA */
}

.checkbox-label {
  display: flex;
  align-items: center;
  
}


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



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

/* 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-2010 {
  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%;
}







/* ✅ Partie principale du footer */
.footer {
  width: 100%;
  padding: 0;
  transform: translateY(30px); /* Décale de 50px vers le bas */
}


/* ✅ 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: 20px 10%;  /* 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;
}