:root, :host {
  --color-weclapp-mint: #12DA9D;
  --color-weclapp-cta-green: #00a369;
  --color-weclapp-green: #12DA9D;
  --color-weclapp-hover-green: #00C489;
  --color-weclapp-black: #1D1D1B;
  --color-weclapp-glacier: #B0FEF7;
  --color-weclapp-cypress: #1B4942;
  --color-weclapp-laventure: #B0CCFB;
  --color-weclapp-mauve: #AFCCFB;
  --color-weclapp-lila: #6455A0;
  --color-weclapp-old-nav: #20296f;
  --color-weclapp-old-nav-hover: #257cff;
  --color-weclapp-darkbluegrey: #1f7d9a;
  --color-weclapp-grey-100: #343430;
  --color-weclapp-grey-90: #676E77;
  --color-weclapp-grey-80: #878E97;
  --color-weclapp-grey-60: #A5AAB1;
  --color-weclapp-grey-40: #C3C7CB;
  --color-weclapp-grey-20: #E1E3E5;
  --color-weclapp-grey-10: #F8F5F3;
  --color-weclapp-grey-5: #F7F8F8;
  --color-weclapp-grey-2: #FCFCFC;
  --color-weclapp-white: #FFFFFF;
  --color-weclapp-grey: #f5f5f5;
  --color-weclapp-error: #FF4C00;
  --color-weclapp-input: #FCFCFC;
  --color-bronze: #c08b73;
  --color-silver: #93939f;
  --color-gold: #E5B80B;
  --color-lightblue: #b0ccfb;
  --color-linkedin: #0a66c2;
  --color-light-powder-blue-color: #d9edf7;
  --color-harbour-blue: #43728f;
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
  @font-face {
    font-family: 'weclappIcons';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: Thunder;
    src: url('/src/assets/fonts/Thunder-BoldLC.woff') format('woff'), url('/src/assets/fonts/Thunder-BoldLC.woff2') format('woff2'), url('/src/assets/fonts/Thunder-BoldLC.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  .thunder-hero-small {
    font-size: 64px;
    line-height: 80%;
    letter-spacing: 0;
  }
  .thunder-hero-large {
    font-size: 140px;
    line-height: 80%;
    letter-spacing: 0;
  }
  .weclapp-icon {
    font-family: weclappIcons, serif;
    font-style: normal;
    font-weight: 400;
    text-indent: 0;
  }
  html {
    font-family: 'Open Sans Variable', sans-serif;
    color: #060606;
    overflow: scroll;
  }
  @media screen and (min-width: 200px) {
    h1 {
      font-size: 36px;
      line-height: 120%;
      font-weight: bold;
    }
    h2 {
      font-size: 26px;
      line-height: 140%;
      font-weight: bold;
    }
    h3 {
      font-size: 22px;
      line-height: 140%;
    }
    h4 {
      font-size: 16px;
      line-height: 150%;
    }
    .h1 {
      font-size: 36px;
      line-height: 120%;
      font-weight: bold;
    }
    .h2 {
      font-size: 26px;
      line-height: 140%;
      font-weight: normal;
    }
    .h3 {
      font-size: 22px;
      line-height: 140%;
      font-weight: normal;
    }
    .h4 {
      font-size: 16px;
      line-height: 150%;
      font-weight: normal;
    }
    .h1-bold {
      font-size: 34px;
      line-height: 120%;
      font-weight: bolder;
    }
    .h2-bold {
      font-size: 26px;
      line-height: 140%;
      font-weight: bolder;
    }
    .h3-bold {
      font-size: 22px;
      line-height: 140%;
      font-weight: bolder;
    }
    .h4-bold {
      font-size: 16px;
      line-height: 150%;
      font-weight: bolder;
    }
    .text-overline {
      font-size: 14px;
      line-height: 100%;
      font-weight: bolder;
      padding: 0;
      gap: 24px;
    }
    .p1 {
      font-size: 18px;
      line-height: 150%;
      font-weight: normal;
    }
    .p1-bold {
      font-size: 18px;
      line-height: 150%;
      font-weight: bolder;
    }
    .p2 {
      font-size: 16px;
      line-height: 150%;
      font-weight: normal;
    }
    .p2-bold {
      font-size: 16px;
      line-height: 150%;
      font-weight: bolder;
    }
    .p3 {
      font-size: 14px;
      line-height: 150%;
      font-weight: normal;
    }
    .p3-bold {
      font-size: 14px;
      line-height: 150%;
      font-weight: bolder;
    }
    .p4 {
      font-size: 14px;
      line-height: 150%;
      font-weight: normal;
    }
    .p4-bold {
      font-size: 14px;
      line-height: 150%;
      font-weight: bolder;
    }
    .p5 {
      font-size: 14px;
      line-height: 140%;
      font-weight: normal;
    }
    .p5-bold {
      font-size: 14px;
      line-height: 140%;
      font-weight: bolder;
    }
    p {
      font-size: 18px;
      line-height: 150%;
    }
    .caption {
      font-size: 14px;
      line-height: 130%;
      color: var(--color-weclapp-black);
    }
    .quote-s {
      font-size: 20px;
      line-height: 120%;
      font-weight: bolder;
    }
    .quote-m {
      font-size: 26px;
      line-height: 130%;
      font-weight: bolder;
    }
    .quote-l {
      font-size: 28px;
      line-height: 130%;
      font-weight: bolder;
    }
    .button-text {
      font-size: 18px;
      line-height: 120%;
      font-weight: 700;
      padding-right: 48px;
      padding-left: 48px;
      cursor: pointer;
    }
  }
  @media screen and (min-width: 1024px) {
    h1 {
      font-size: 64px;
      line-height: 120%;
      font-weight: bold;
    }
    h2 {
      font-size: 36px;
      line-height: 140%;
      font-weight: bold;
    }
    h3 {
      font-size: 26px;
      line-height: 140%;
    }
    h4 {
      font-size: 20px;
      line-height: 150%;
    }
    .h1 {
      font-size: 64px;
      line-height: 120%;
      font-weight: bold;
    }
    .h2 {
      font-size: 36px;
      line-height: 140%;
      font-weight: normal;
    }
    .h3 {
      font-size: 26px;
      line-height: 140%;
      font-weight: normal;
    }
    .h4 {
      font-size: 20px;
      line-height: 150%;
      font-weight: normal;
    }
    .h1-bold {
      font-size: 64px;
      line-height: 120%;
      font-weight: bolder;
    }
    .h2-bold {
      font-size: 36px;
      line-height: 140%;
      font-weight: bolder;
    }
    .h3-bold {
      font-size: 26px;
      line-height: 140%;
      font-weight: bolder;
    }
    .h4-bold {
      font-size: 20px;
      line-height: 150%;
      font-weight: bolder;
    }
    .text-overline {
      font-size: 14px;
      line-height: 100%;
      font-weight: bolder;
      padding: 0;
      gap: 24px;
    }
    .p1 {
      font-size: 18px;
      line-height: 150%;
      font-weight: normal;
    }
    .p1-bold {
      font-size: 18px;
      line-height: 150%;
      font-weight: bolder;
    }
    .p2 {
      font-size: 16px;
      line-height: 150%;
      font-weight: normal;
    }
    .p2-bold {
      font-size: 16px;
      line-height: 150%;
      font-weight: bolder;
    }
    .p3 {
      font-size: 14px;
      line-height: 150%;
      font-weight: normal;
    }
    .p3-bold {
      font-size: 14px;
      line-height: 150%;
      font-weight: bolder;
    }
    .p4 {
      font-size: 16px;
      line-height: 150%;
      font-weight: normal;
    }
    .p4-bold {
      font-size: 16px;
      line-height: 150%;
      font-weight: bolder;
    }
    .p5 {
      font-size: 14px;
      line-height: 140%;
      font-weight: normal;
    }
    .p5-bold {
      font-size: 14px;
      line-height: 140%;
      font-weight: bolder;
    }
    p {
      font-size: 18px;
      line-height: 150%;
    }
    .caption {
      font-size: 14px;
      line-height: 130%;
      color: var(--color-weclapp-black);
    }
    .quote-s {
      font-size: 20px;
      line-height: 120%;
      font-weight: bolder;
    }
    .quote-m {
      font-size: 26px;
      line-height: 130%;
      font-weight: normal;
    }
    .quote-l {
      font-size: 28px;
      line-height: 130%;
      font-weight: bolder;
    }
    .button-text {
      font-size: 18px;
      line-height: 120%;
      font-weight: 700;
      padding-right: 48px;
      padding-left: 48px;
      cursor: pointer;
    }
  }
  .imgRotateY {
    transform: rotateY(180deg);
  }
}
@layer components {
  .weclapp-gradient-primary {
    background: #12DA9D;
  }
}
.grecaptcha-badge {
  visibility: hidden;
}
.scrollbar-custom {
  scrollbar-width: thin;
  &.black {
    scrollbar-color: black #f1f1f1;
  }
}
.scrollbar-custom::-webkit-scrollbar {
  width: 8px;
}
.scrollbar-custom::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.scrollbar-custom::-webkit-scrollbar-thumb {
  background-color: black;
  border-radius: 6px;
  border: 2px solid #f1f1f1;
}
.text-weclapp-mint {
  color: var(--color-weclapp-mint);
}
.bg-weclapp-mint {
  background-color: var(--color-weclapp-mint);
}
.text-weclapp-cta-green {
  color: var(--color-weclapp-cta-green);
}
.bg-weclapp-cta-green {
  background-color: var(--color-weclapp-cta-green);
}
.text-weclapp-green {
  color: var(--color-weclapp-green);
}
.bg-weclapp-green {
  background-color: var(--color-weclapp-green);
}
.text-weclapp-hover-green {
  color: var(--color-weclapp-hover-green);
}
.bg-weclapp-hover-green {
  background-color: var(--color-weclapp-hover-green);
}
.text-weclapp-black {
  color: var(--color-weclapp-black);
}
.bg-weclapp-black {
  background-color: var(--color-weclapp-black);
}
.text-weclapp-glacier {
  color: var(--color-weclapp-glacier);
}
.bg-weclapp-glacier {
  background-color: var(--color-weclapp-glacier);
}
.text-weclapp-cypress {
  color: var(--color-weclapp-cypress);
}
.bg-weclapp-cypress {
  background-color: var(--color-weclapp-cypress);
}
.text-weclapp-laventure {
  color: var(--color-weclapp-laventure);
}
.bg-weclapp-laventure {
  background-color: var(--color-weclapp-laventure);
}
.text-weclapp-mauve {
  color: var(--color-weclapp-mauve);
}
.bg-weclapp-mauve {
  background-color: var(--color-weclapp-mauve);
}
.text-weclapp-lila {
  color: var(--color-weclapp-lila);
}
.bg-weclapp-lila {
  background-color: var(--color-weclapp-lila);
}
.text-weclapp-old-nav {
  color: var(--color-weclapp-old-nav);
}
.bg-weclapp-old-nav {
  background-color: var(--color-weclapp-old-nav);
}
.text-weclapp-old-nav-hover {
  color: var(--color-weclapp-old-nav-hover);
}
.bg-weclapp-old-nav-hover {
  background-color: var(--color-weclapp-old-nav-hover);
}
.text-weclapp-darkbluegrey {
  color: var(--color-weclapp-darkbluegrey);
}
.bg-weclapp-darkbluegrey {
  background-color: var(--color-weclapp-darkbluegrey);
}
.text-weclapp-grey-100 {
  color: var(--color-weclapp-grey-100);
}
.bg-weclapp-grey-100 {
  background-color: var(--color-weclapp-grey-100);
}
.text-weclapp-grey-90 {
  color: var(--color-weclapp-grey-90);
}
.bg-weclapp-grey-90 {
  background-color: var(--color-weclapp-grey-90);
}
.text-weclapp-grey-80 {
  color: var(--color-weclapp-grey-80);
}
.bg-weclapp-grey-80 {
  background-color: var(--color-weclapp-grey-80);
}
.text-weclapp-grey-60 {
  color: var(--color-weclapp-grey-60);
}
.bg-weclapp-grey-60 {
  background-color: var(--color-weclapp-grey-60);
}
.text-weclapp-grey-40 {
  color: var(--color-weclapp-grey-40);
}
.bg-weclapp-grey-40 {
  background-color: var(--color-weclapp-grey-40);
}
.text-weclapp-grey-20 {
  color: var(--color-weclapp-grey-20);
}
.bg-weclapp-grey-20 {
  background-color: var(--color-weclapp-grey-20);
}
.text-weclapp-grey-10 {
  color: var(--color-weclapp-grey-10);
}
.bg-weclapp-grey-10 {
  background-color: var(--color-weclapp-grey-10);
}
.text-weclapp-grey-5 {
  color: var(--color-weclapp-grey-5);
}
.bg-weclapp-grey-5 {
  background-color: var(--color-weclapp-grey-5);
}
.text-weclapp-grey-2 {
  color: var(--color-weclapp-grey-2);
}
.bg-weclapp-grey-2 {
  background-color: var(--color-weclapp-grey-2);
}
.text-weclapp-white {
  color: var(--color-weclapp-white);
}
.bg-weclapp-white {
  background-color: var(--color-weclapp-white);
}
.text-weclapp-grey {
  color: var(--color-weclapp-grey);
}
.bg-weclapp-grey {
  background-color: var(--color-weclapp-grey);
}
.text-weclapp-error {
  color: var(--color-weclapp-error);
}
.bg-weclapp-error {
  background-color: var(--color-weclapp-error);
}
.text-weclapp-input {
  color: var(--color-weclapp-input);
}
.bg-weclapp-input {
  background-color: var(--color-weclapp-input);
}
.text-bronze {
  color: var(--color-bronze);
}
.bg-bronze {
  background-color: var(--color-bronze);
}
.text-silver {
  color: var(--color-silver);
}
.bg-silver {
  background-color: var(--color-silver);
}
.text-gold {
  color: var(--color-gold);
}
.bg-gold {
  background-color: var(--color-gold);
}
.text-lightblue {
  color: var(--color-lightblue);
}
.bg-lightblue {
  background-color: var(--color-lightblue);
}
.text-linkedin {
  color: var(--color-linkedin);
}
.bg-linkedin {
  background-color: var(--color-linkedin);
}
.text-light-powder-blue-color {
  color: var(--color-light-powder-blue-color);
}
.bg-light-powder-blue-color {
  background-color: var(--color-light-powder-blue-color);
}
.text-harbour-blue {
  color: var(--color-harbour-blue);
}
.bg-harbour-blue {
  background-color: var(--color-harbour-blue);
}