@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%;
}
/* a blue color as a generic focus style */
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}
a {
  text-decoration: none;
}

/* ==========  Main Desktop  ========== */

.desktop {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* instead of center */
  width: 100vw;
  margin: 0;
  background-color: var(--backgroundbackground-4);
}

@media (max-width: 950px) {

    .desktop {
    display: flex;
    flex-direction: column;
    width: 100vw;
    align-items: center;
    position: relative;
    background-color: var(--backgroundbackground-4);
  }
}
/*==========  Navigation Bar ==========*/

.desktop .nav {
  height: 101px;
  justify-content: space-between;
  padding: 9px;
  align-self: flex;
  width: 100%;
  background-color: var(--backgroundbackground-3);
  display: flex;
  align-items: center;
  position: relative;
}

.desktop .logo {
  flex: 1;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  position: relative;
}

.desktop .vector {
  position: relative;
  width: 214px;
  height: 37px;
}

.desktop .nav-labels {
  justify-content: flex-end;
  gap: 30px;
  flex: 1;
  flex-grow: 1;
  margin-top: -2.50px;
  margin-bottom: -2.50px;
  display: flex;
  align-items: center;
  position: relative;
}

.desktop .text-wrapper {
  position: relative;
  width: fit-content;
  font-family: var(--label-1-font-family);
  font-weight: var(--label-1-font-weight);
  color: var(--dividertextparagraph);
  font-size: var(--label-1-font-size);
  letter-spacing: var(--label-1-letter-spacing);
  line-height: var(--label-1-line-height);
  white-space: nowrap;
  font-style: var(--label-1-font-style);
}

.desktop .button-on-dark {
  display: inline-flex;
  background-color: var(--dividertextparagraph);
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 51.57px;
}

.desktop .connect-with-our {
  position: relative;
  width: fit-content;
  margin-top: -0.39px;
  font-family: var(--label-1-font-family);
  font-weight: var(--label-1-font-weight);
  color: var(--dividertexton-accent-1);
  font-size: var(--label-1-font-size);
  letter-spacing: var(--label-1-letter-spacing);
  line-height: var(--label-1-line-height);
  white-space: nowrap;
  font-style: var(--label-1-font-style);
}

  .desktop .nav {
  display: flex;
  height: 69px;
  gap: 24px;
  padding: 16px;
  align-self: stretch;
  width: 100%;
  background-color: var(--backgroundbackground-3);
  align-items: center;
  position: relative;
}

  .desktop .vector {
    width: 173px;
    height: 30px;
  }

  .desktop .nav-labels {
  display: inline-flex;
  justify-content: flex-end;
  gap: 24px;
  flex: 0 0 auto;
  margin-top: -1.00px;
  margin-bottom: -1.00px;
  align-items: center;
  position: relative;
}
@media (max-width: 950px) {
    .desktop .nav {
      display: flex;
      height: 69px;
      gap: 24px;
      padding: 16px;
      align-self: stretch;
      max-width: 100%;
      background-color: var(--backgroundbackground-3);
      align-items: center;
      position: relative;
  }

    .desktop .vector {
      width: 173px;
      height: 30px;
    }

    .desktop .nav-labels {
    display: inline-flex;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    margin-top: -1.00px;
    margin-bottom: -1.00px;
    align-items: center;
    position: relative;
  }
}
/*==========  Footer Styling ==========*/
.desktop .footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 32px 40px;
  position: re;
  align-self: stretch;
  width: 100%;
  height: 520px;
  background-color: var(--backgroundbackground-1);
}

.desktop .left-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
}

.desktop .vector-wrapper {
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  position: relative;
}

.desktop .img {
  position: relative;
  width: 115.32px;
  height: 19.97px;
}

.desktop .contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.desktop .text-wrapper-10 {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: "Lexend-Medium", Helvetica;
  font-weight: 500;
  color: var(--dividertexton-accent-1);
  font-size: 15px;
  letter-spacing: 0;
  line-height: 22.5px;
}

.desktop .text-5 {
  gap: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.desktop .text-wrapper-11 {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: "Lexend-Medium", Helvetica;
  font-weight: 500;
  color: var(--dividertexton-accent-1);
  font-size: 12px;
  letter-spacing: 0;
  line-height: 18px;
  text-decoration: underline;
}

.desktop .text-wrapper-12 {
  position: relative;
  align-self: stretch;
  font-family: "Lexend-Medium", Helvetica;
  font-weight: 500;
  color: var(--dividertexton-accent-1);
  font-size: 12px;
  letter-spacing: 0;
  line-height: 18px;
  text-decoration: underline;
}

.desktop .custom-fit-solutions-2 {
  position: relative;
  align-self: stretch;
  font-family: "Lexend-Medium", Helvetica;
  font-weight: 500;
  color: transparent;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 18px;
}

.desktop .span {
  color: #ffffff;
}

.desktop .text-wrapper-13 {
  color: #c1c7fd;
}

.desktop .right-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 232px;
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
}

.desktop .content-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 35px;
  align-self: stretch;
  width: 100%;
  position: relative;
  flex: 0 0 auto;
}

.desktop .content-6 {
  align-items: center;
  gap: 11px;
  flex: 1;
  flex-grow: 1;
  display: flex;
  position: relative;
}

.desktop .text-wrapper-14 {
  position: relative;
  width: fit-content;
  font-family: var(--label-1-font-family);
  font-weight: var(--label-1-font-weight);
  color: var(--dividertexton-accent-3);
  font-size: var(--label-1-font-size);
  letter-spacing: var(--label-1-letter-spacing);
  line-height: var(--label-1-line-height);
  white-space: nowrap;
  font-style: var(--label-1-font-style);
}

.desktop .button-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--backgroundbackground-4);
  border-radius: 51.57px;
}

.desktop .learn-more {
  position: relative;
  width: fit-content;
  margin-top: -0.39px;
  font-family: var(--label-1-font-family);
  font-weight: var(--label-1-font-weight);
  color: var(--dividertextparagraph);
  font-size: var(--label-1-font-size);
  letter-spacing: var(--label-1-letter-spacing);
  line-height: var(--label-1-line-height);
  white-space: nowrap;
  font-style: var(--label-1-font-style);
}

.desktop .text-wrapper-15 {
  position: relative;
  align-self: stretch;
  margin-bottom: -9.00px;
  font-family: "Lexend-Medium", Helvetica;
  font-weight: 500;
  color: var(--dividertexton-accent-3);
  font-size: 12px;
  letter-spacing: 0;
  line-height: 18px;
}

/* ───────────────────────── FOOTER – Mobile (≤ 950 px) ───────────────────────── */
/* ───────────────────────── FOOTER mobile layout fix ───────────── */
@media (max-width: 950px) {

  /* ①  make footer a simple column                       */
  .desktop .footer {
    display: flex;
    flex-direction: column;
    gap: 64px;                 /* vertical spacing between blocks */
    height: fit-content;
    width: 100vw;
    padding: 32px 24px;
    box-sizing: border-box;
    background: var(--backgroundbackground-1);
  }

  /* ②  reorder columns: right-column (nav) first, left-column second */
  .desktop .right-column { order: 2; width: 100%; gap: 48px; }
  .desktop .left-column  { order: 1; width: 100%; gap: 48px; }

  /* ③  logo keeps its margin-top but no big white gap      */
  .desktop .vector-wrapper { margin-bottom: 48px; }

  /* ④  horizontal nav + CTA button                        */
  .desktop .content-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 32px;
  }

  .desktop .content-6 { 
    display: flex; 
    gap: 32px; 
    justify-self: center;
  }
  .desktop .text-wrapper-14 { text-decoration: none; }

  /* ⑤  CTA pill – let it keep its existing white styling  */
  .desktop .button-white { margin-left: auto; }

  /* ⑥  contact block lines up under “Contact” header      */
  .desktop .contact h3 { margin-bottom: 16px; }

  /* ⑦  copyright centered at the very bottom              */
  .desktop .text-wrapper-15 {
    text-align: left;
    width: 100%;
    margin: 0;
  }
}

/* desktop view keeps using .desktop .footer; hide the mobile one */
@media (min-width: 951px) {
  .footer-mobile { display: none; }
  .label-mobile { display: none;}
}



/* Show correct button label depending on screen size */
.label-mobile {
  width: 100%;
  height: 100%;


}
.label-desktop {
  display: inline;
}

@media (max-width: 950px) {
  .label-mobile {
    display: inline;
  }
  .label-desktop,
  .desktop .content-wrapper,
  .desktop .text-wrapper-15 {
    display: none;
  }
}