@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
html,
body {
  margin: 0px;
  height: 100%;
  background-color: var(--dark-background);
}
body{
  background-image:url(/orange-wave-image.jpeg);
  background-repeat:no-repeat;
  background-size:100% auto;
  background-position: center;
}
/* a blue color as a generic focus style */
button:focus-visible {
  outline: var(--button-outline-size) solid var(--focus-colour) !important;
  outline: -webkit-focus-ring-color auto var(--button-outline-size) !important;
}
a {
  text-decoration: none;
}
.desktop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 100px;
  position: relative;
  height: 100%;
  padding: 5% 0 0 0;
}

.desktop .desktop-HEADER {
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.desktop .dark-FEATURE {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--second-headline-line-height) / 6);
  padding: var(--second-headline-line-height) var(--second-headline-font-size);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.desktop .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--headline-line-height);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.desktop .heading {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--paragraphe-line-height);
  position: relative;
  flex: 0 0 auto;
}

.desktop .div-wrapper {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--paragraphe-line-height) / 2);
  position: relative;
  flex: 0 0 auto;
}

.desktop .text-wrapper,.desktop .text-wrapper-small {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--second-headline-font-family);
  font-weight: var(--second-headline-font-weight);
  color: var(--light-text);
  font-size: var(--second-headline-font-size);
  letter-spacing: var(--second-headline-letter-spacing);
  line-height: var(--second-headline-line-height);
  white-space: nowrap;
  font-style: var(--second-headline-font-style);
  font-weight: 800;
  text-shadow: 1px 1px 6px black;
}
.desktop .text-wrapper-small {
  font-size: 16px;
}
.desktop .div {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--paragraphe-line-height) / 2);
  padding: 0px calc(var(--paragraphe-line-height) / 2);
  position: relative;
  flex: 0 0 auto;
}

.desktop .p {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--sub-heading-font-family);
  font-weight: var(--sub-heading-font-weight);
  color: var(--light-text);
  font-size: var(--sub-heading-font-size);
  text-align: center;
  letter-spacing: var(--sub-heading-letter-spacing);
  line-height: var(--sub-heading-line-height);
  font-style: var(--sub-heading-font-style);
  text-shadow: 1px 1px 4px black;
}

.desktop .frame {
  display: inline-flex;
  align-items: center;
  gap: var(--paragraphe-line-height);
  position: relative;
  flex: 0 0 auto;
}

.desktop .overlap-group-wrapper {
  position: relative;
  width: 752px;
  height: 759px;
}

.desktop .overlap-group {
  position: relative;
  width: 783px;
  height: 759px;
}

.desktop .chat-bot {
  position: absolute;
  width: 755px;
  height: 694px;
  top: 0;
  left: 0;
}

.desktop .line-chart {
  position: absolute;
  width: 462px;
  height: 302px;
  top: 456px;
  left: 321px;
  object-fit: cover;
}

.desktop .content-rows {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
  padding: 20px;
  position: relative;
  flex: 0 0 auto;
}

.desktop .text-block {
  display: flex;
  flex-direction: column;
  width: 269px;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
}

.desktop .HEADLINE {
  display: inline-flex;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
}

.desktop .img {
  position: relative;
  flex: 0 0 auto;
}

.desktop .div-wrapper-2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  position: relative;
  flex: 0 0 auto;
}

.desktop .text-wrapper-2 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--title-font-family);
  font-weight: var(--title-font-weight);
  color: var(--light-text);
  font-size: var(--title-font-size);
  letter-spacing: var(--title-letter-spacing);
  line-height: var(--title-line-height);
  font-style: var(--title-font-style);
}

.desktop .div-2 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--paragraphe-font-family);
  font-weight: var(--paragraphe-font-weight);
  color: var(--light-text);
  font-size: var(--paragraphe-font-size);
  letter-spacing: var(--paragraphe-letter-spacing);
  line-height: var(--paragraphe-line-height);
  font-style: var(--paragraphe-font-style);
}

.desktop .text-wrapper-3 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--title-font-family);
  font-weight: var(--title-font-weight);
  color: var(--light-text);
  font-size: var(--title-font-size);
  letter-spacing: var(--title-letter-spacing);
  line-height: var(--title-line-height);
  white-space: nowrap;
  font-style: var(--title-font-style);
}

.desktop .dark-CONTENT {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 35px;
  padding: 50px 199px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--dark-background);
}

.desktop .content-2 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
  position: relative;
  flex: 0 0 auto;
}

.desktop .text-content {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.desktop .cards {
  display: inline-flex;
  align-items: center;
  gap: 33px;
  position: relative;
  flex: 0 0 auto;
}

.desktop .card {
  display: flex;
  flex-direction: column;
  width: 476px;
  gap: 57px;
  padding: 40px 0px;
  background-color: var(--light-background);
  border-radius: 10px;
  border: 1px solid;
  border-color: #d3d3d3;
  align-items: center;
  position: relative;
  box-shadow: var(--shadow);
}

.desktop .heading-2 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  flex: 0 0 auto;
}

.desktop .text-wrapper-4 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--title-font-family);
  font-weight: var(--title-font-weight);
  color: var(--first-text);
  font-size: var(--title-font-size);
  text-align: center;
  letter-spacing: var(--title-letter-spacing);
  line-height: var(--title-line-height);
  white-space: nowrap;
  font-style: var(--title-font-style);
}

.desktop .ever-wondered-if-you {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--paragraphe-font-family);
  font-weight: var(--paragraphe-font-weight);
  color: var(--second-text);
  font-size: var(--paragraphe-font-size);
  text-align: center;
  letter-spacing: var(--paragraphe-letter-spacing);
  line-height: var(--paragraphe-line-height);
  font-style: var(--paragraphe-font-style);
}

.desktop .button {
  display: inline-flex;
  height: 52px;
  align-items: center;
  padding: 20px 36px;
  position: relative;
  background-color: var(--primary);
  box-shadow: var(--shadow);
  all: unset;
  box-sizing: border-box;
}

.desktop .text {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  position: relative;
  flex: 0 0 auto;
  margin-top: -16.5px;
  margin-bottom: -16.5px;
}

.desktop .text-wrapper-5 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--button-font-family);
  font-weight: var(--button-font-weight);
  color: var(--light-text);
  font-size: var(--button-font-size);
  letter-spacing: var(--button-letter-spacing);
  line-height: var(--button-line-height);
  white-space: nowrap;
  font-style: var(--button-font-style);
}

.desktop .macbook-pro {
  position: relative;
  width: 405.12px;
  height: 226.52px;
}

.desktop .card-2 {
  display: flex;
  flex-direction: column;
  width: 476px;
  gap: 30px;
  padding: 40px 0px;
  background-color: var(--light-background);
  border-radius: 10px;
  border: 1px solid;
  border-color: #d3d3d3;
  align-items: center;
  position: relative;
  box-shadow: var(--shadow);
}

.desktop .boards-notifications {
  position: relative;
  width: 441px;
  height: 338px;
  margin-bottom: -35px;
  object-fit: cover;
}

.desktop .rectangle-wrapper {
  display: inline-flex;
  flex: 0 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background-image: url(https://c.animaapp.com/MlIHIGNz/img/card-6.svg);
  background-size: cover;
  background-position: 50% 50%;
  align-items: center;
  position: relative;
  box-shadow: var(--shadow);
}

.desktop .rectangle {
  position: relative;
  width: 225px;
  height: 285px;
  object-fit: cover;
}

.desktop .img-wrapper {
  display: inline-flex;
  flex: 0 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background-image: url(https://c.animaapp.com/MlIHIGNz/img/card-5.svg);
  background-size: cover;
  background-position: 50% 50%;
  align-items: center;
  position: relative;
  box-shadow: var(--shadow);
}

.desktop .card-3 {
  display: inline-flex;
  flex: 0 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background-image: url(https://c.animaapp.com/MlIHIGNz/img/card-4.svg);
  background-size: cover;
  background-position: 50% 50%;
  align-items: center;
  position: relative;
  box-shadow: var(--shadow);
}

.desktop .card-4 {
  display: inline-flex;
  flex: 0 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background-image: url(https://c.animaapp.com/MlIHIGNz/img/card-3.svg);
  background-size: cover;
  background-position: 50% 50%;
  align-items: center;
  position: relative;
  box-shadow: var(--shadow);
}

.desktop .card-5 {
  display: inline-flex;
  flex: 0 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background-image: url(https://c.animaapp.com/MlIHIGNz/img/card-2.svg);
  background-size: cover;
  background-position: 50% 50%;
  align-items: center;
  position: relative;
  box-shadow: var(--shadow);
}

.desktop .rectangle-2 {
  width: 395px;
  position: relative;
  height: 285px;
  object-fit: cover;
}

.desktop .card-6 {
  display: inline-flex;
  flex: 0 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background-image: url(https://c.animaapp.com/MlIHIGNz/img/card-1.svg);
  background-size: cover;
  background-position: 50% 50%;
  align-items: center;
  position: relative;
  box-shadow: var(--shadow);
}

.desktop .card-7 {
  display: inline-flex;
  flex: 0 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background-image: url(https://c.animaapp.com/MlIHIGNz/img/card.svg);
  background-size: cover;
  background-position: 50% 50%;
  align-items: center;
  position: relative;
  box-shadow: var(--shadow);
}

.desktop .rectangle-3 {
  width: 401px;
  position: relative;
  height: 285px;
  object-fit: cover;
}

.desktop .button-2 {
  display: inline-flex;
  height: 52px;
  align-items: center;
  padding: 10px 30px;
  position: relative;
  border: 1px solid;
  border-color: var(--light-text);
  box-shadow: 0px 4px 31px #00000026;
  all: unset;
  box-sizing: border-box;
}

.desktop .text-2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin-top: -6.5px;
  margin-bottom: -6.5px;
  position: relative;
  flex: 0 0 auto;
}

.desktop .div-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  padding: 50px 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--dark-background);
}

.desktop .content-3 {
  display: inline-flex;
  align-items: flex-start;
  gap: 23px;
  position: relative;
  flex: 0 0 auto;
}

.desktop .testimonial-items {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
  flex: 0 0 auto;
}

.desktop .card-8 {
  display: flex;
  flex-direction: column;
  width: 430px;
  align-items: flex-start;
  gap: 30px;
  padding: 40px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--dark-background);
  border-radius: 10px;
  border: 1px solid;
  border-color: #dedede;
}

.desktop .client {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  position: relative;
  flex: 0 0 auto;
}

.desktop .avatar {
  position: relative;
  width: 50px;
  height: 50px;
  background-image: url(https://c.animaapp.com/MlIHIGNz/img/ellipse-2-4@2x.png);
  background-size: cover;
  background-position: 50% 50%;
}

.desktop .text-content-2 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
}

.desktop .link {
  display: inline-flex;
  align-items: center;
  padding: 0px 10px;
  position: relative;
  flex: 0 0 auto;
}

.desktop .text-wrapper-6 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--link-font-family);
  font-weight: var(--link-font-weight);
  color: var(--light-text);
  font-size: var(--link-font-size);
  letter-spacing: var(--link-letter-spacing);
  line-height: var(--link-line-height);
  white-space: nowrap;
  font-style: var(--link-font-style);
}

.desktop .text-wrapper-7 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--subtitle-font-family);
  font-weight: var(--subtitle-font-weight);
  color: var(--light-text);
  font-size: var(--subtitle-font-size);
  letter-spacing: var(--subtitle-letter-spacing);
  line-height: var(--subtitle-line-height);
  white-space: nowrap;
  font-style: var(--subtitle-font-style);
}

.desktop .div-4 {
  display: inline-flex;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.desktop .span {
  font-family: var(--paragraphe-font-family);
  font-weight: var(--paragraphe-font-weight);
  color: #ffffff;
  font-size: var(--paragraphe-font-size);
  letter-spacing: var(--paragraphe-letter-spacing);
  line-height: var(--paragraphe-line-height);
  font-style: var(--paragraphe-font-style);
}

.desktop .text-wrapper-8 {
  font-family: var(--paragraphe-font-family);
  font-style: var(--paragraphe-font-style);
  font-weight: var(--paragraphe-font-weight);
  letter-spacing: var(--paragraphe-letter-spacing);
  line-height: var(--paragraphe-line-height);
  font-size: var(--paragraphe-font-size);
}

.desktop .avatar-2 {
  background-image: url(https://c.animaapp.com/MlIHIGNz/img/ellipse-2-3@2x.png);
  position: relative;
  width: 50px;
  height: 50px;
  background-size: cover;
  background-position: 50% 50%;
}

.desktop .avatar-3 {
  background-image: url(https://c.animaapp.com/MlIHIGNz/img/ellipse-2-2@2x.png);
  position: relative;
  width: 50px;
  height: 50px;
  background-size: cover;
  background-position: 50% 50%;
}

.desktop .avatar-4 {
  background-image: url(https://c.animaapp.com/MlIHIGNz/img/ellipse-2-1@2x.png);
  position: relative;
  width: 50px;
  height: 50px;
  background-size: cover;
  background-position: 50% 50%;
}

.desktop .dark-CTA {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--dark-background);
}

.desktop .content-4 {
  display: inline-flex;
  height: 370px;
  align-items: center;
  gap: 86px;
  position: relative;
  background-color: #343434;
  border-radius: 33px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.desktop .left-content {
  display: flex;
  flex-direction: column;
  width: 544px;
  align-items: flex-start;
  gap: 37px;
  padding: 17px 94px;
  position: relative;
  overflow: hidden;
}

.desktop .second-headline {
  padding: 0px 10px;
  margin-right: -143px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  flex: 0 0 auto;
}

.desktop .opentype-features {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--second-headline-font-family);
  font-weight: var(--second-headline-font-weight);
  color: var(--light-text);
  font-size: var(--second-headline-font-size);
  letter-spacing: var(--second-headline-letter-spacing);
  line-height: var(--second-headline-line-height);
  font-style: var(--second-headline-font-style);
}

.desktop .text-3 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 31px;
  margin-top: -16.5px;
  margin-bottom: -16.5px;
  position: relative;
  flex: 0 0 auto;
}

.desktop .media-content {
  display: inline-flex;
  height: 364px;
  align-items: center;
  padding: 0px 2px;
  position: relative;
  flex: 0 0 auto;
}

.desktop .line-chart-2 {
  position: relative;
  width: 585px;
  height: 364px;
}

.desktop .light-FOOTER {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 107px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--dark-background);
}

.desktop .content-5 {
  display: inline-flex;
  align-items: flex-start;
  gap: 199px;
  position: relative;
  flex: 0 0 auto;
}

.desktop .column {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 56px;
  position: relative;
  flex: 0 0 auto;
}

.desktop .row {
  display: inline-flex;
  align-items: flex-start;
  gap: 75px;
  position: relative;
  flex: 0 0 auto;
}

.desktop .list {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  flex: 0 0 auto;
}

.desktop .links {
  display: flex;
  flex-direction: column;
  width: 121px;
  align-items: flex-start;
  gap: 19px;
  position: relative;
  flex: 0 0 auto;
}

.desktop .row-2 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
}

.desktop .bx-bx-map {
  position: relative;
  width: 46px;
  height: 46px;
}

.desktop .adress {
  display: inline-flex;
  align-items: center;
  padding: 0px 8px;
  position: relative;
  flex: 0 0 auto;
}

.desktop .ic-baseline-phone {
  position: relative;
  width: 35px;
  height: 35px;
}