@font-face {
  font-family: 'Druk Wide Web';
  src: url('/static/css/fonts/DrukWide-Medium.woff2') format('woff2'),
       url('/static/css/fonts/DrukWide-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ES Klarheit Plakat';
  src: url('/static/css/fonts/ESKlarheitPlakat-Xbd.woff2') format('woff2'),
       url('/static/css/fonts/ESKlarheitPlakat-Xbd.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Haas Grotesk Display Pro';
  src: url('/static/css/fonts/NHaasGroteskDSPro-65Md.woff2') format('woff2'),
       url('/static/css/fonts/NHaasGroteskDSPro-65Md.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Haas Grotesk Display Pro Roman';
  src: url('/static/css/fonts/NHassGroteskDSProRoman.woff2') format('woff2'),
       url('/static/css/fonts/NHassGroteskDSProRoman.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'warnockpro-it';
  src: url('/static/css/fonts/warnockpro-it.woff2') format('woff2'),
       url('/static/css/fonts/warnockpro-it.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --breakpoint-sm: 360px;
  --breakpoint-md: 960px;
  --breakpoint-lg: 1280px;
  --breakpoint-xl: 1520px;

  --color-primary: #11540D;
  --color-secondary-1: #36200D;
  --color-secondary-2: #FBA447;
  --color-secondary-3: #FFF3E1;
  --color-secondary-4: #FFFBF6;
  --color-secondary-4-faded: #FFFBF6;
  --color-error: #B71D1C;
  --color-error-secondary: #FFF5F4;
  --color-links: #007AFF;
  --color-subbrand-amplify: #1F5ABA;
  --color-subbrand-give: #01C65E;
  --color-subbrand-imagine: #83244E;
  --color-subbrand-support-1: #E95D51;
  --color-subbrand-support-2: #03C9D1;
  --color-subbrand-support-3: #D3C3FF;
  --color-primary-disabled: #A0BB9E;
  --color-secondary-disabled: #AFA69E;
  --color-sage: #01C65E;

  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 24px;
  --spacing-6: 32px;
  --spacing-7: 48px;
  --spacing-8: 60px;
  --spacing-9: 64px;
  --spacing-10: 80px;

  --font-druk-wide: "Druk Wide Web";
  --font-es-klarheit-plakat: "ES Klarheit Plakat";
  --font-neue-haas-grotesk-display-pro: "Neue Haas Grotesk Display Pro";
  --font-neue-haas-grotesk-display-pro-roman: "Neue Haas Grotesk Display Pro Roman";
  --font-warnock-pro: "warnockpro-it";

  --fw-100: 100;
  --fw-200: 100;
  --fw-300: 300;
  --fw-400: 400;
  --fw-450: 450;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;

  --letter-spacing-5: 5%;
  --letter-spacing-1: 1%;
  --letter-spacing-minus-1: -1%;

  --no-border-width: 0px;
  --border-width: 1px;

  --border-radius-1: 4px;
  --border-radius-2: 8px;
  --border-radius-pill: 50rem;
  --border-radius-circle: 100%;

  --cllctiv-font-size-h1: 64px;
  --cllctiv-letter-spacing-h1: 5%;

  --cllctiv-font-size-h2: 48px;
  --cllctiv-letters-spacing-h2: 5%;

  --cllctiv-font-size-h3: 40px;
  --cllctiv-letter-spacing-h3: 5%;

  --cllctiv-font-size-h4: 32px;
  --cllctiv-letter-spacing-h4: 5%;

  --cllctiv-font-size-subheader-large: 36px;
  --cllctiv-letter-spacing-subheader-large: 1%;

  --cllctiv-font-size-subheader-medium: 24px;
  --cllctiv-letter-spacing-subheader-medium: 1%;

  --cllctiv-font-size-subheader-small: 20px;
  --cllctiv-letter-spacing-subheader-small: 1%;

  --cllctiv-font-size-p1: 22px;
  --cllctiv-line-height-p1: 28px;
  --cllctiv-letter-spacing-p1: 1%;

  --cllctiv-font-size-p2: 18px;
  --cllctiv-line-height-p2: 23px;
  --cllctiv-letter-spacing-p2: 1%;

  --cllctiv-font-size-p3: 16px;
  --cllctiv-line-height-p3: 21px;
  --cllctiv-letter-spacing-p3: 1%;

  --cllctiv-font-size-p4: 14px;
  --cllctiv-line-height-p4: 21px;
  --cllctiv-letter-spacing-p4: 1%;

  --cllctiv-font-size-p5: 12px;
  --cllctiv-line-height-p5: 16px;
  --cllctiv-letter-spacing-p5: 1%;

  --cllctiv-font-size-p6: 10px;
  --cllctiv-line-height-p6: 13px;
  --cllctiv-letter-spacing-p6: 1%;

  --cllctiv-font-size-accent-1: 16px;
  --cllctiv-font-size-accent-2: 14px;
  --cllctiv-font-size-accent-3: 12px;
  --cllctiv-font-size-accent-4: 10px;

  --bs-body-color: var(--color-secondary-1);
  --bs-body-bg: var(--color-secondary-4);

  --cllctiv-box-shadow: 0px 0px 35px 0px #00000014, 0px 0px 5px 0px #0000000D;
  --cllctiv-box-shadow-top-1: 0px 6px 20px -2px #00000014, -6px 0px 15px -4px #0000000D, 6px 0px 15px -4px #0000000D;

  /* Icon URL fallbacks — overridden at runtime by _icon_vars.html with {{ CDN_URL }} */
  --icon-arrow-left: url("/static/icons/arrow-left.svg");
  --icon-assist: url("/static/icons/assist.svg");
  --icon-breadcrumb-divider: url("/static/icons/breadcrumb-divider.svg");
  --icon-chevron-down-filled: url("/static/icons/chevron-down-filled.svg");
  --icon-chevron-left: url("/static/icons/chevron-left.svg");
  --icon-chevron-right: url("/static/icons/chevron-right.svg");
  --icon-chevron-up-filled: url("/static/icons/chevron-up-filled.svg");
  --icon-cloud-upload: url("/static/icons/cloud_upload.svg");
  --icon-green-tick-circle: url("/static/icons/green-tick-circle.svg");
  --icon-info: url("/static/icons/info.svg");
  --icon-pencil: url("/static/icons/pencil.svg");
  --icon-plus: url("/static/icons/plus.svg");
  --icon-user: url("/static/icons/user.svg");
  --img-hero-bg: url("/static/img/frwrd_blck_futrs/hero_section_bg.png");
}


/* Base Margin and Padding Classes */
.cllctiv-m-0 {
  margin: 0px !important;
}

.cllctiv-p-0 {
  padding: 0px !important;
}

.cllctiv-g-0 {
  gap: 0px !important;
}

.cllctiv-mx-0 {
  margin-inline: 0px !important;
}

.cllctiv-my-0 {
  margin-block: 0px !important;
}

.cllctiv-mt-0 {
  margin-top: 0px !important;
}

.cllctiv-mb-0 {
  margin-bottom: 0px !important;
}

.cllctiv-ms-0 {
  margin-inline-start: 0px !important;
}

.cllctiv-me-0 {
  margin-inline-end: 0px !important;
}

.cllctiv-px-0 {
  padding-inline: 0px !important;
}

.cllctiv-py-0 {
  padding-block: 0px !important;
}

.cllctiv-pt-0 {
  padding-top: 0px !important;
}

.cllctiv-pb-0 {
  padding-bottom: 0px !important;
}

.cllctiv-ps-0 {
  padding-inline-start: 0px !important;
}

.cllctiv-pe-0 {
  padding-inline-end: 0px !important;
}

.cllctiv-m-1 {
  margin: var(--spacing-1) !important;
}

.cllctiv-p-1 {
  padding: var(--spacing-1) !important;
}

.cllctiv-g-1 {
  gap: var(--spacing-1) !important;
}

.cllctiv-m-2 {
  margin: var(--spacing-2) !important;
}

.cllctiv-p-2 {
  padding: var(--spacing-2) !important;
}

.cllctiv-g-2 {
  gap: var(--spacing-2) !important;
}

.cllctiv-m-3 {
  margin: var(--spacing-3) !important;
}

.cllctiv-p-3 {
  padding: var(--spacing-3) !important;
}

.cllctiv-g-3 {
  gap: var(--spacing-3) !important;
}

.cllctiv-m-4 {
  margin: var(--spacing-4) !important;
}

.cllctiv-p-4 {
  padding: var(--spacing-4) !important;
}

.cllctiv-g-4 {
  gap: var(--spacing-4) !important;
}

.cllctiv-m-5 {
  margin: var(--spacing-5) !important;
}

.cllctiv-p-5 {
  padding: var(--spacing-5) !important;
}

.cllctiv-g-5 {
  gap: var(--spacing-5) !important;
}

.cllctiv-m-6 {
  margin: var(--spacing-6) !important;
}

.cllctiv-p-6 {
  padding: var(--spacing-6) !important;
}

.cllctiv-g-6 {
  gap: var(--spacing-6) !important;
}

.cllctiv-m-7 {
  margin: var(--spacing-7) !important;
}

.cllctiv-p-7 {
  padding: var(--spacing-7) !important;
}

.cllctiv-g-7 {
  gap: var(--spacing-7) !important;
}

.cllctiv-m-8 {
  margin: var(--spacing-8) !important;
}

.cllctiv-p-8 {
  padding: var(--spacing-8) !important;
}

.cllctiv-g-8 {
  gap: var(--spacing-8) !important;
}

.cllctiv-m-9 {
  margin: var(--spacing-9) !important;
}

.cllctiv-p-9 {
  padding: var(--spacing-9) !important;
}

.cllctiv-g-9 {
  gap: var(--spacing-9) !important;
}

.cllctiv-m-10 {
  margin: var(--spacing-10) !important;
}

.cllctiv-p-10 {
  padding: var(--spacing-10) !important;
}

.cllctiv-g-10 {
  gap: var(--spacing-10) !important;
}

/* Axis-Specific Margin and Padding Classes */
.cllctiv-mx-0 {
  margin-inline: 0 !important;
}

.cllctiv-my-0 {
  margin-block: 0 !important;
}

.cllctiv-mt-0 {
  margin-top: 0 !important;
}

.cllctiv-mb-0 {
  margin-bottom: 0 !important;
}

.cllctiv-ms-0 {
  margin-inline-start: 0 !important;
}

.cllctiv-me-0 {
  margin-inline-end: 0 !important;
}

.cllctiv-px-0 {
  padding-inline: 0 !important;
}

.cllctiv-py-0 {
  padding-block: 0 !important;
}

.cllctiv-pt-0 {
  padding-top: 0 !important;
}

.cllctiv-pb-0 {
  padding-bottom: 0 !important;
}

.cllctiv-ps-0 {
  padding-inline-start: 0 !important;
}

.cllctiv-pe-0 {
  padding-inline-end: 0 !important;
}

.cllctiv-mx-1 {
  margin-inline: var(--spacing-1) !important;
}

.cllctiv-my-1 {
  margin-block: var(--spacing-1) !important;
}

.cllctiv-mt-1 {
  margin-top: var(--spacing-1) !important;
}

.cllctiv-mb-1 {
  margin-bottom: var(--spacing-1) !important;
}

.cllctiv-ms-1 {
  margin-inline-start: var(--spacing-1) !important;
}

.cllctiv-me-1 {
  margin-inline-end: var(--spacing-1) !important;
}

.cllctiv-px-1 {
  padding-inline: var(--spacing-1) !important;
}

.cllctiv-py-1 {
  padding-block: var(--spacing-1) !important;
}

.cllctiv-pt-1 {
  padding-top: var(--spacing-1) !important;
}

.cllctiv-pb-1 {
  padding-bottom: var(--spacing-1) !important;
}

.cllctiv-ps-1 {
  padding-inline-start: var(--spacing-1) !important;
}

.cllctiv-pe-1 {
  padding-inline-end: var(--spacing-1) !important;
}

.cllctiv-mx-2 {
  margin-inline: var(--spacing-2) !important;
}

.cllctiv-my-2 {
  margin-block: var(--spacing-2) !important;
}

.cllctiv-mt-2 {
  margin-top: var(--spacing-2) !important;
}

.cllctiv-mb-2 {
  margin-bottom: var(--spacing-2) !important;
}

.cllctiv-ms-2 {
  margin-inline-start: var(--spacing-2) !important;
}

.cllctiv-me-2 {
  margin-inline-end: var(--spacing-2) !important;
}

.cllctiv-px-2 {
  padding-inline: var(--spacing-2) !important;
}

.cllctiv-py-2 {
  padding-block: var(--spacing-2) !important;
}

.cllctiv-pt-2 {
  padding-top: var(--spacing-2) !important;
}

.cllctiv-pb-2 {
  padding-bottom: var(--spacing-2) !important;
}

.cllctiv-ps-2 {
  padding-inline-start: var(--spacing-2) !important;
}

.cllctiv-pe-2 {
  padding-inline-end: var(--spacing-2) !important;
}

.cllctiv-mx-3 {
  margin-inline: var(--spacing-3) !important;
}

.cllctiv-my-3 {
  margin-block: var(--spacing-3) !important;
}

.cllctiv-mt-3 {
  margin-top: var(--spacing-3) !important;
}

.cllctiv-mb-3 {
  margin-bottom: var(--spacing-3) !important;
}

.cllctiv-ms-3 {
  margin-inline-start: var(--spacing-3) !important;
}

.cllctiv-me-3 {
  margin-inline-end: var(--spacing-3) !important;
}

.cllctiv-px-3 {
  padding-inline: var(--spacing-3) !important;
}

.cllctiv-py-3 {
  padding-block: var(--spacing-3) !important;
}

.cllctiv-pt-3 {
  padding-top: var(--spacing-3) !important;
}

.cllctiv-pb-3 {
  padding-bottom: var(--spacing-3) !important;
}

.cllctiv-ps-3 {
  padding-inline-start: var(--spacing-3) !important;
}

.cllctiv-pe-3 {
  padding-inline-end: var(--spacing-3) !important;
}

.cllctiv-mx-4 {
  margin-inline: var(--spacing-4) !important;
}

.cllctiv-my-4 {
  margin-block: var(--spacing-4) !important;
}

.cllctiv-mt-4 {
  margin-top: var(--spacing-4) !important;
}

.cllctiv-mb-4 {
  margin-bottom: var(--spacing-4) !important;
}

.cllctiv-ms-4 {
  margin-inline-start: var(--spacing-4) !important;
}

.cllctiv-me-4 {
  margin-inline-end: var(--spacing-4) !important;
}

.cllctiv-px-4 {
  padding-inline: var(--spacing-4) !important;
}

.cllctiv-py-4 {
  padding-block: var(--spacing-4) !important;
}

.cllctiv-pt-4 {
  padding-top: var(--spacing-4) !important;
}

.cllctiv-pb-4 {
  padding-bottom: var(--spacing-4) !important;
}

.cllctiv-ps-4 {
  padding-inline-start: var(--spacing-4) !important;
}

.cllctiv-pe-4 {
  padding-inline-end: var(--spacing-4) !important;
}

.cllctiv-mx-5 {
  margin-inline: var(--spacing-5) !important;
}

.cllctiv-my-5 {
  margin-block: var(--spacing-5) !important;
}

.cllctiv-mt-5 {
  margin-top: var(--spacing-5) !important;
}

.cllctiv-mb-5 {
  margin-bottom: var(--spacing-5) !important;
}

.cllctiv-ms-5 {
  margin-inline-start: var(--spacing-5) !important;
}

.cllctiv-me-5 {
  margin-inline-end: var(--spacing-5) !important;
}

.cllctiv-px-5 {
  padding-inline: var(--spacing-5) !important;
}

.cllctiv-py-5 {
  padding-block: var(--spacing-5) !important;
}

.cllctiv-pt-5 {
  padding-top: var(--spacing-5) !important;
}

.cllctiv-pb-5 {
  padding-bottom: var(--spacing-5) !important;
}

.cllctiv-ps-5 {
  padding-inline-start: var(--spacing-5) !important;
}

.cllctiv-pe-5 {
  padding-inline-end: var(--spacing-5) !important;
}

.cllctiv-mx-6 {
  margin-inline: var(--spacing-6) !important;
}

.cllctiv-my-6 {
  margin-block: var(--spacing-6) !important;
}

.cllctiv-mt-6 {
  margin-top: var(--spacing-6) !important;
}

.cllctiv-mb-6 {
  margin-bottom: var(--spacing-6) !important;
}

.cllctiv-ms-6 {
  margin-inline-start: var(--spacing-6) !important;
}

.cllctiv-me-6 {
  margin-inline-end: var(--spacing-6) !important;
}

.cllctiv-px-6 {
  padding-inline: var(--spacing-6) !important;
}

.cllctiv-py-6 {
  padding-block: var(--spacing-6) !important;
}

.cllctiv-pt-6 {
  padding-top: var(--spacing-6) !important;
}

.cllctiv-pb-6 {
  padding-bottom: var(--spacing-6) !important;
}

.cllctiv-ps-6 {
  padding-inline-start: var(--spacing-6) !important;
}

.cllctiv-pe-6 {
  padding-inline-end: var(--spacing-6) !important;
}

.cllctiv-mx-7 {
  margin-inline: var(--spacing-7) !important;
}

.cllctiv-my-7 {
  margin-block: var(--spacing-7) !important;
}

.cllctiv-mt-7 {
  margin-top: var(--spacing-7) !important;
}

.cllctiv-mb-7 {
  margin-bottom: var(--spacing-7) !important;
}

.cllctiv-ms-7 {
  margin-inline-start: var(--spacing-7) !important;
}

.cllctiv-me-7 {
  margin-inline-end: var(--spacing-7) !important;
}

.cllctiv-px-7 {
  padding-inline: var(--spacing-7) !important;
}

.cllctiv-py-7 {
  padding-block: var(--spacing-7) !important;
}

.cllctiv-pt-7 {
  padding-top: var(--spacing-7) !important;
}

.cllctiv-pb-7 {
  padding-bottom: var(--spacing-7) !important;
}

.cllctiv-ps-7 {
  padding-inline-start: var(--spacing-7) !important;
}

.cllctiv-pe-7 {
  padding-inline-end: var(--spacing-7) !important;
}

.cllctiv-mx-8 {
  margin-inline: var(--spacing-8) !important;
}

.cllctiv-my-8 {
  margin-block: var(--spacing-8) !important;
}

.cllctiv-mt-8 {
  margin-top: var(--spacing-8) !important;
}

.cllctiv-mb-8 {
  margin-bottom: var(--spacing-8) !important;
}

.cllctiv-ms-8 {
  margin-inline-start: var(--spacing-8) !important;
}

.cllctiv-me-8 {
  margin-inline-end: var(--spacing-8) !important;
}

.cllctiv-px-8 {
  padding-inline: var(--spacing-8) !important;
}

.cllctiv-py-8 {
  padding-block: var(--spacing-8) !important;
}

.cllctiv-pt-8 {
  padding-top: var(--spacing-8) !important;
}

.cllctiv-pb-8 {
  padding-bottom: var(--spacing-8) !important;
}

.cllctiv-ps-8 {
  padding-inline-start: var(--spacing-8) !important;
}

.cllctiv-pe-8 {
  padding-inline-end: var(--spacing-8) !important;
}

.cllctiv-mx-9 {
  margin-inline: var(--spacing-9) !important;
}

.cllctiv-my-9 {
  margin-block: var(--spacing-9) !important;
}

.cllctiv-mt-9 {
  margin-top: var(--spacing-9) !important;
}

.cllctiv-mb-9 {
  margin-bottom: var(--spacing-9) !important;
}

.cllctiv-ms-9 {
  margin-inline-start: var(--spacing-9) !important;
}

.cllctiv-me-9 {
  margin-inline-end: var(--spacing-9) !important;
}

.cllctiv-px-9 {
  padding-inline: var(--spacing-9) !important;
}

.cllctiv-py-9 {
  padding-block: var(--spacing-9) !important;
}

.cllctiv-pt-9 {
  padding-top: var(--spacing-9) !important;
}

.cllctiv-pb-9 {
  padding-bottom: var(--spacing-9) !important;
}

.cllctiv-ps-9 {
  padding-inline-start: var(--spacing-9) !important;
}

.cllctiv-pe-9 {
  padding-inline-end: var(--spacing-9) !important;
}

.cllctiv-mx-10 {
  margin-inline: var(--spacing-10) !important;
}

.cllctiv-my-10 {
  margin-block: var(--spacing-10) !important;
}

.cllctiv-mt-10 {
  margin-top: var(--spacing-10) !important;
}

.cllctiv-mb-10 {
  margin-bottom: var(--spacing-10) !important;
}

.cllctiv-ms-10 {
  margin-inline-start: var(--spacing-10) !important;
}

.cllctiv-me-10 {
  margin-inline-end: var(--spacing-10) !important;
}

.cllctiv-px-10 {
  padding-inline: var(--spacing-10) !important;
}

.cllctiv-py-10 {
  padding-block: var(--spacing-10) !important;
}

.cllctiv-pt-10 {
  padding-top: var(--spacing-10) !important;
}

.cllctiv-pb-10 {
  padding-bottom: var(--spacing-10) !important;
}

.cllctiv-ps-10 {
  padding-inline-start: var(--spacing-10) !important;
}

.cllctiv-pe-10 {
  padding-inline-end: var(--spacing-10) !important;
}

@media screen and (min-width: 360px) {

  /* Responsive Axis-Specific Margin and Padding Classes */
  .cllctiv-m-md-0 {
    margin: 0px !important;
  }

  .cllctiv-p-md-0 {
    padding: 0px !important;
  }

  .cllctiv-g-md-0 {
    gap: 0px !important;
  }

  .cllctiv-mx-md-0 {
    margin-inline: 0px !important;
  }

  .cllctiv-my-md-0 {
    margin-block: 0px !important;
  }

  .cllctiv-mt-md-0 {
    margin-top: 0px !important;
  }

  .cllctiv-mb-md-0 {
    margin-bottom: 0px !important;
  }

  .cllctiv-ms-md-0 {
    margin-inline-start: 0px !important;
  }

  .cllctiv-me-md-0 {
    margin-inline-end: 0px !important;
  }

  .cllctiv-px-md-0 {
    padding-inline: 0px !important;
  }

  .cllctiv-py-md-0 {
    padding-block: 0px !important;
  }

  .cllctiv-pt-md-0 {
    padding-top: 0px !important;
  }

  .cllctiv-pb-md-0 {
    padding-bottom: 0px !important;
  }

  .cllctiv-ps-md-0 {
    padding-inline-start: 0px !important;
  }

  .cllctiv-pe-md-0 {
    padding-inline-end: 0px !important;
  }

  .cllctiv-m-sm-1 {
    margin: var(--spacing-1) !important;
  }

  .cllctiv-p-sm-1 {
    padding: var(--spacing-1) !important;
  }

  .cllctiv-g-sm-1 {
    gap: var(--spacing-1) !important;
  }

  .cllctiv-mx-sm-1 {
    margin-inline: var(--spacing-1) !important;
  }

  .cllctiv-my-sm-1 {
    margin-block: var(--spacing-1) !important;
  }

  .cllctiv-mt-sm-1 {
    margin-top: var(--spacing-1) !important;
  }

  .cllctiv-mb-sm-1 {
    margin-bottom: var(--spacing-1) !important;
  }

  .cllctiv-ms-sm-1 {
    margin-inline-start: var(--spacing-1) !important;
  }

  .cllctiv-me-sm-1 {
    margin-inline-end: var(--spacing-1) !important;
  }

  .cllctiv-px-sm-1 {
    padding-inline: var(--spacing-1) !important;
  }

  .cllctiv-py-sm-1 {
    padding-block: var(--spacing-1) !important;
  }

  .cllctiv-pt-sm-1 {
    padding-top: var(--spacing-1) !important;
  }

  .cllctiv-pb-sm-1 {
    padding-bottom: var(--spacing-1) !important;
  }

  .cllctiv-ps-sm-1 {
    padding-inline-start: var(--spacing-1) !important;
  }

  .cllctiv-pe-sm-1 {
    padding-inline-end: var(--spacing-1) !important;
  }

  .cllctiv-m-sm-2 {
    margin: var(--spacing-2) !important;
  }

  .cllctiv-p-sm-2 {
    padding: var(--spacing-2) !important;
  }

  .cllctiv-g-sm-2 {
    gap: var(--spacing-2) !important;
  }

  .cllctiv-mx-sm-2 {
    margin-inline: var(--spacing-2) !important;
  }

  .cllctiv-my-sm-2 {
    margin-block: var(--spacing-2) !important;
  }

  .cllctiv-mt-sm-2 {
    margin-top: var(--spacing-2) !important;
  }

  .cllctiv-mb-sm-2 {
    margin-bottom: var(--spacing-2) !important;
  }

  .cllctiv-ms-sm-2 {
    margin-inline-start: var(--spacing-2) !important;
  }

  .cllctiv-me-sm-2 {
    margin-inline-end: var(--spacing-2) !important;
  }

  .cllctiv-px-sm-2 {
    padding-inline: var(--spacing-2) !important;
  }

  .cllctiv-py-sm-2 {
    padding-block: var(--spacing-2) !important;
  }

  .cllctiv-pt-sm-2 {
    padding-top: var(--spacing-2) !important;
  }

  .cllctiv-pb-sm-2 {
    padding-bottom: var(--spacing-2) !important;
  }

  .cllctiv-ps-sm-2 {
    padding-inline-start: var(--spacing-2) !important;
  }

  .cllctiv-pe-sm-2 {
    padding-inline-end: var(--spacing-2) !important;
  }

  .cllctiv-m-sm-3 {
    margin: var(--spacing-3) !important;
  }

  .cllctiv-p-sm-3 {
    padding: var(--spacing-3) !important;
  }

  .cllctiv-g-sm-3 {
    gap: var(--spacing-3) !important;
  }

  .cllctiv-mx-sm-3 {
    margin-inline: var(--spacing-3) !important;
  }

  .cllctiv-my-sm-3 {
    margin-block: var(--spacing-3) !important;
  }

  .cllctiv-mt-sm-3 {
    margin-top: var(--spacing-3) !important;
  }

  .cllctiv-mb-sm-3 {
    margin-bottom: var(--spacing-3) !important;
  }

  .cllctiv-ms-sm-3 {
    margin-inline-start: var(--spacing-3) !important;
  }

  .cllctiv-me-sm-3 {
    margin-inline-end: var(--spacing-3) !important;
  }

  .cllctiv-px-sm-3 {
    padding-inline: var(--spacing-3) !important;
  }

  .cllctiv-py-sm-3 {
    padding-block: var(--spacing-3) !important;
  }

  .cllctiv-pt-sm-3 {
    padding-top: var(--spacing-3) !important;
  }

  .cllctiv-pb-sm-3 {
    padding-bottom: var(--spacing-3) !important;
  }

  .cllctiv-ps-sm-3 {
    padding-inline-start: var(--spacing-3) !important;
  }

  .cllctiv-pe-sm-3 {
    padding-inline-end: var(--spacing-3) !important;
  }

  .cllctiv-m-sm-4 {
    margin: var(--spacing-4) !important;
  }

  .cllctiv-p-sm-4 {
    padding: var(--spacing-4) !important;
  }

  .cllctiv-g-sm-4 {
    gap: var(--spacing-4) !important;
  }

  .cllctiv-mx-sm-4 {
    margin-inline: var(--spacing-4) !important;
  }

  .cllctiv-my-sm-4 {
    margin-block: var(--spacing-4) !important;
  }

  .cllctiv-mt-sm-4 {
    margin-top: var(--spacing-4) !important;
  }

  .cllctiv-mb-sm-4 {
    margin-bottom: var(--spacing-4) !important;
  }

  .cllctiv-ms-sm-4 {
    margin-inline-start: var(--spacing-4) !important;
  }

  .cllctiv-me-sm-4 {
    margin-inline-end: var(--spacing-4) !important;
  }

  .cllctiv-px-sm-4 {
    padding-inline: var(--spacing-4) !important;
  }

  .cllctiv-py-sm-4 {
    padding-block: var(--spacing-4) !important;
  }

  .cllctiv-pt-sm-4 {
    padding-top: var(--spacing-4) !important;
  }

  .cllctiv-pb-sm-4 {
    padding-bottom: var(--spacing-4) !important;
  }

  .cllctiv-ps-sm-4 {
    padding-inline-start: var(--spacing-4) !important;
  }

  .cllctiv-pe-sm-4 {
    padding-inline-end: var(--spacing-4) !important;
  }

  .cllctiv-m-sm-5 {
    margin: var(--spacing-5) !important;
  }

  .cllctiv-p-sm-5 {
    padding: var(--spacing-5) !important;
  }

  .cllctiv-g-sm-5 {
    gap: var(--spacing-5) !important;
  }

  .cllctiv-mx-sm-5 {
    margin-inline: var(--spacing-5) !important;
  }

  .cllctiv-my-sm-5 {
    margin-block: var(--spacing-5) !important;
  }

  .cllctiv-mt-sm-5 {
    margin-top: var(--spacing-5) !important;
  }

  .cllctiv-mb-sm-5 {
    margin-bottom: var(--spacing-5) !important;
  }

  .cllctiv-ms-sm-5 {
    margin-inline-start: var(--spacing-5) !important;
  }

  .cllctiv-me-sm-5 {
    margin-inline-end: var(--spacing-5) !important;
  }

  .cllctiv-px-sm-5 {
    padding-inline: var(--spacing-5) !important;
  }

  .cllctiv-py-sm-5 {
    padding-block: var(--spacing-5) !important;
  }

  .cllctiv-pt-sm-5 {
    padding-top: var(--spacing-5) !important;
  }

  .cllctiv-pb-sm-5 {
    padding-bottom: var(--spacing-5) !important;
  }

  .cllctiv-ps-sm-5 {
    padding-inline-start: var(--spacing-5) !important;
  }

  .cllctiv-pe-sm-5 {
    padding-inline-end: var(--spacing-5) !important;
  }

  .cllctiv-m-sm-6 {
    margin: var(--spacing-6) !important;
  }

  .cllctiv-p-sm-6 {
    padding: var(--spacing-6) !important;
  }

  .cllctiv-g-sm-6 {
    gap: var(--spacing-6) !important;
  }

  .cllctiv-mx-sm-6 {
    margin-inline: var(--spacing-6) !important;
  }

  .cllctiv-my-sm-6 {
    margin-block: var(--spacing-6) !important;
  }

  .cllctiv-mt-sm-6 {
    margin-top: var(--spacing-6) !important;
  }

  .cllctiv-mb-sm-6 {
    margin-bottom: var(--spacing-6) !important;
  }

  .cllctiv-ms-sm-6 {
    margin-inline-start: var(--spacing-6) !important;
  }

  .cllctiv-me-sm-6 {
    margin-inline-end: var(--spacing-6) !important;
  }

  .cllctiv-px-sm-6 {
    padding-inline: var(--spacing-6) !important;
  }

  .cllctiv-py-sm-6 {
    padding-block: var(--spacing-6) !important;
  }

  .cllctiv-pt-sm-6 {
    padding-top: var(--spacing-6) !important;
  }

  .cllctiv-pb-sm-6 {
    padding-bottom: var(--spacing-6) !important;
  }

  .cllctiv-ps-sm-6 {
    padding-inline-start: var(--spacing-6) !important;
  }

  .cllctiv-pe-sm-6 {
    padding-inline-end: var(--spacing-6) !important;
  }

  .cllctiv-m-sm-7 {
    margin: var(--spacing-7) !important;
  }

  .cllctiv-p-sm-7 {
    padding: var(--spacing-7) !important;
  }

  .cllctiv-g-sm-7 {
    gap: var(--spacing-7) !important;
  }

  .cllctiv-mx-sm-7 {
    margin-inline: var(--spacing-7) !important;
  }

  .cllctiv-my-sm-7 {
    margin-block: var(--spacing-7) !important;
  }

  .cllctiv-mt-sm-7 {
    margin-top: var(--spacing-7) !important;
  }

  .cllctiv-mb-sm-7 {
    margin-bottom: var(--spacing-7) !important;
  }

  .cllctiv-ms-sm-7 {
    margin-inline-start: var(--spacing-7) !important;
  }

  .cllctiv-me-sm-7 {
    margin-inline-end: var(--spacing-7) !important;
  }

  .cllctiv-px-sm-7 {
    padding-inline: var(--spacing-7) !important;
  }

  .cllctiv-py-sm-7 {
    padding-block: var(--spacing-7) !important;
  }

  .cllctiv-pt-sm-7 {
    padding-top: var(--spacing-7) !important;
  }

  .cllctiv-pb-sm-7 {
    padding-bottom: var(--spacing-7) !important;
  }

  .cllctiv-ps-sm-7 {
    padding-inline-start: var(--spacing-7) !important;
  }

  .cllctiv-pe-sm-7 {
    padding-inline-end: var(--spacing-7) !important;
  }

  .cllctiv-m-sm-8 {
    margin: var(--spacing-8) !important;
  }

  .cllctiv-p-sm-8 {
    padding: var(--spacing-8) !important;
  }

  .cllctiv-g-sm-8 {
    gap: var(--spacing-8) !important;
  }

  .cllctiv-mx-sm-8 {
    margin-inline: var(--spacing-8) !important;
  }

  .cllctiv-my-sm-8 {
    margin-block: var(--spacing-8) !important;
  }

  .cllctiv-mt-sm-8 {
    margin-top: var(--spacing-8) !important;
  }

  .cllctiv-mb-sm-8 {
    margin-bottom: var(--spacing-8) !important;
  }

  .cllctiv-ms-sm-8 {
    margin-inline-start: var(--spacing-8) !important;
  }

  .cllctiv-me-sm-8 {
    margin-inline-end: var(--spacing-8) !important;
  }

  .cllctiv-px-sm-8 {
    padding-inline: var(--spacing-8) !important;
  }

  .cllctiv-py-sm-8 {
    padding-block: var(--spacing-8) !important;
  }

  .cllctiv-pt-sm-8 {
    padding-top: var(--spacing-8) !important;
  }

  .cllctiv-pb-sm-8 {
    padding-bottom: var(--spacing-8) !important;
  }

  .cllctiv-ps-sm-8 {
    padding-inline-start: var(--spacing-8) !important;
  }

  .cllctiv-pe-sm-8 {
    padding-inline-end: var(--spacing-8) !important;
  }

  .cllctiv-m-sm-9 {
    margin: var(--spacing-9) !important;
  }

  .cllctiv-p-sm-9 {
    padding: var(--spacing-9) !important;
  }

  .cllctiv-g-sm-9 {
    gap: var(--spacing-9) !important;
  }

  .cllctiv-mx-sm-9 {
    margin-inline: var(--spacing-9) !important;
  }

  .cllctiv-my-sm-9 {
    margin-block: var(--spacing-9) !important;
  }

  .cllctiv-mt-sm-9 {
    margin-top: var(--spacing-9) !important;
  }

  .cllctiv-mb-sm-9 {
    margin-bottom: var(--spacing-9) !important;
  }

  .cllctiv-ms-sm-9 {
    margin-inline-start: var(--spacing-9) !important;
  }

  .cllctiv-me-sm-9 {
    margin-inline-end: var(--spacing-9) !important;
  }

  .cllctiv-px-sm-9 {
    padding-inline: var(--spacing-9) !important;
  }

  .cllctiv-py-sm-9 {
    padding-block: var(--spacing-9) !important;
  }

  .cllctiv-pt-sm-9 {
    padding-top: var(--spacing-9) !important;
  }

  .cllctiv-pb-sm-9 {
    padding-bottom: var(--spacing-9) !important;
  }

  .cllctiv-ps-sm-9 {
    padding-inline-start: var(--spacing-9) !important;
  }

  .cllctiv-pe-sm-9 {
    padding-inline-end: var(--spacing-9) !important;
  }

  .cllctiv-m-sm-10 {
    margin: var(--spacing-10) !important;
  }

  .cllctiv-p-sm-10 {
    padding: var(--spacing-10) !important;
  }

  .cllctiv-g-sm-10 {
    gap: var(--spacing-10) !important;
  }

  .cllctiv-mx-sm-10 {
    margin-inline: var(--spacing-10) !important;
  }

  .cllctiv-my-sm-10 {
    margin-block: var(--spacing-10) !important;
  }

  .cllctiv-mt-sm-10 {
    margin-top: var(--spacing-10) !important;
  }

  .cllctiv-mb-sm-10 {
    margin-bottom: var(--spacing-10) !important;
  }

  .cllctiv-ms-sm-10 {
    margin-inline-start: var(--spacing-10) !important;
  }

  .cllctiv-me-sm-10 {
    margin-inline-end: var(--spacing-10) !important;
  }

  .cllctiv-px-sm-10 {
    padding-inline: var(--spacing-10) !important;
  }

  .cllctiv-py-sm-10 {
    padding-block: var(--spacing-10) !important;
  }

  .cllctiv-pt-sm-10 {
    padding-top: var(--spacing-10) !important;
  }

  .cllctiv-pb-sm-10 {
    padding-bottom: var(--spacing-10) !important;
  }

  .cllctiv-ps-sm-10 {
    padding-inline-start: var(--spacing-10) !important;
  }

  .cllctiv-pe-sm-10 {
    padding-inline-end: var(--spacing-10) !important;
  }
}

@media screen and (min-width: 960px) {

  /* Responsive Axis-Specific Margin and Padding Classes */
  .cllctiv-m-md-0 {
    margin: 0px !important;
  }

  .cllctiv-p-md-0 {
    padding: 0px !important;
  }

  .cllctiv-g-md-0 {
    gap: 0px !important;
  }

  .cllctiv-mx-md-0 {
    margin-inline: 0px !important;
  }

  .cllctiv-my-md-0 {
    margin-block: 0px !important;
  }

  .cllctiv-mt-md-0 {
    margin-top: 0px !important;
  }

  .cllctiv-mb-md-0 {
    margin-bottom: 0px !important;
  }

  .cllctiv-ms-md-0 {
    margin-inline-start: 0px !important;
  }

  .cllctiv-me-md-0 {
    margin-inline-end: 0px !important;
  }

  .cllctiv-px-md-0 {
    padding-inline: 0px !important;
  }

  .cllctiv-py-md-0 {
    padding-block: 0px !important;
  }

  .cllctiv-pt-md-0 {
    padding-top: 0px !important;
  }

  .cllctiv-pb-md-0 {
    padding-bottom: 0px !important;
  }

  .cllctiv-ps-md-0 {
    padding-inline-start: 0px !important;
  }

  .cllctiv-pe-md-0 {
    padding-inline-end: 0px !important;
  }

  .cllctiv-m-md-1 {
    margin: var(--spacing-1) !important;
  }

  .cllctiv-p-md-1 {
    padding: var(--spacing-1) !important;
  }

  .cllctiv-g-md-1 {
    gap: var(--spacing-1) !important;
  }

  .cllctiv-mx-md-1 {
    margin-inline: var(--spacing-1) !important;
  }

  .cllctiv-my-md-1 {
    margin-block: var(--spacing-1) !important;
  }

  .cllctiv-mt-md-1 {
    margin-top: var(--spacing-1) !important;
  }

  .cllctiv-mb-md-1 {
    margin-bottom: var(--spacing-1) !important;
  }

  .cllctiv-ms-md-1 {
    margin-inline-start: var(--spacing-1) !important;
  }

  .cllctiv-me-md-1 {
    margin-inline-end: var(--spacing-1) !important;
  }

  .cllctiv-px-md-1 {
    padding-inline: var(--spacing-1) !important;
  }

  .cllctiv-py-md-1 {
    padding-block: var(--spacing-1) !important;
  }

  .cllctiv-pt-md-1 {
    padding-top: var(--spacing-1) !important;
  }

  .cllctiv-pb-md-1 {
    padding-bottom: var(--spacing-1) !important;
  }

  .cllctiv-ps-md-1 {
    padding-inline-start: var(--spacing-1) !important;
  }

  .cllctiv-pe-md-1 {
    padding-inline-end: var(--spacing-1) !important;
  }

  .cllctiv-m-md-2 {
    margin: var(--spacing-2) !important;
  }

  .cllctiv-p-md-2 {
    padding: var(--spacing-2) !important;
  }

  .cllctiv-g-md-2 {
    gap: var(--spacing-2) !important;
  }

  .cllctiv-mx-md-2 {
    margin-inline: var(--spacing-2) !important;
  }

  .cllctiv-my-md-2 {
    margin-block: var(--spacing-2) !important;
  }

  .cllctiv-mt-md-2 {
    margin-top: var(--spacing-2) !important;
  }

  .cllctiv-mb-md-2 {
    margin-bottom: var(--spacing-2) !important;
  }

  .cllctiv-ms-md-2 {
    margin-inline-start: var(--spacing-2) !important;
  }

  .cllctiv-me-md-2 {
    margin-inline-end: var(--spacing-2) !important;
  }

  .cllctiv-px-md-2 {
    padding-inline: var(--spacing-2) !important;
  }

  .cllctiv-py-md-2 {
    padding-block: var(--spacing-2) !important;
  }

  .cllctiv-pt-md-2 {
    padding-top: var(--spacing-2) !important;
  }

  .cllctiv-pb-md-2 {
    padding-bottom: var(--spacing-2) !important;
  }

  .cllctiv-ps-md-2 {
    padding-inline-start: var(--spacing-2) !important;
  }

  .cllctiv-pe-md-2 {
    padding-inline-end: var(--spacing-2) !important;
  }

  .cllctiv-m-md-3 {
    margin: var(--spacing-3) !important;
  }

  .cllctiv-p-md-3 {
    padding: var(--spacing-3) !important;
  }

  .cllctiv-g-md-3 {
    gap: var(--spacing-3) !important;
  }

  .cllctiv-mx-md-3 {
    margin-inline: var(--spacing-3) !important;
  }

  .cllctiv-my-md-3 {
    margin-block: var(--spacing-3) !important;
  }

  .cllctiv-mt-md-3 {
    margin-top: var(--spacing-3) !important;
  }

  .cllctiv-mb-md-3 {
    margin-bottom: var(--spacing-3) !important;
  }

  .cllctiv-ms-md-3 {
    margin-inline-start: var(--spacing-3) !important;
  }

  .cllctiv-me-md-3 {
    margin-inline-end: var(--spacing-3) !important;
  }

  .cllctiv-px-md-3 {
    padding-inline: var(--spacing-3) !important;
  }

  .cllctiv-py-md-3 {
    padding-block: var(--spacing-3) !important;
  }

  .cllctiv-pt-md-3 {
    padding-top: var(--spacing-3) !important;
  }

  .cllctiv-pb-md-3 {
    padding-bottom: var(--spacing-3) !important;
  }

  .cllctiv-ps-md-3 {
    padding-inline-start: var(--spacing-3) !important;
  }

  .cllctiv-pe-md-3 {
    padding-inline-end: var(--spacing-3) !important;
  }

  .cllctiv-m-md-4 {
    margin: var(--spacing-4) !important;
  }

  .cllctiv-p-md-4 {
    padding: var(--spacing-4) !important;
  }

  .cllctiv-g-md-4 {
    gap: var(--spacing-4) !important;
  }

  .cllctiv-mx-md-4 {
    margin-inline: var(--spacing-4) !important;
  }

  .cllctiv-my-md-4 {
    margin-block: var(--spacing-4) !important;
  }

  .cllctiv-mt-md-4 {
    margin-top: var(--spacing-4) !important;
  }

  .cllctiv-mb-md-4 {
    margin-bottom: var(--spacing-4) !important;
  }

  .cllctiv-ms-md-4 {
    margin-inline-start: var(--spacing-4) !important;
  }

  .cllctiv-me-md-4 {
    margin-inline-end: var(--spacing-4) !important;
  }

  .cllctiv-px-md-4 {
    padding-inline: var(--spacing-4) !important;
  }

  .cllctiv-py-md-4 {
    padding-block: var(--spacing-4) !important;
  }

  .cllctiv-pt-md-4 {
    padding-top: var(--spacing-4) !important;
  }

  .cllctiv-pb-md-4 {
    padding-bottom: var(--spacing-4) !important;
  }

  .cllctiv-ps-md-4 {
    padding-inline-start: var(--spacing-4) !important;
  }

  .cllctiv-pe-md-4 {
    padding-inline-end: var(--spacing-4) !important;
  }

  .cllctiv-m-md-5 {
    margin: var(--spacing-5) !important;
  }

  .cllctiv-p-md-5 {
    padding: var(--spacing-5) !important;
  }

  .cllctiv-g-md-5 {
    gap: var(--spacing-5) !important;
  }

  .cllctiv-mx-md-5 {
    margin-inline: var(--spacing-5) !important;
  }

  .cllctiv-my-md-5 {
    margin-block: var(--spacing-5) !important;
  }

  .cllctiv-mt-md-5 {
    margin-top: var(--spacing-5) !important;
  }

  .cllctiv-mb-md-5 {
    margin-bottom: var(--spacing-5) !important;
  }

  .cllctiv-ms-md-5 {
    margin-inline-start: var(--spacing-5) !important;
  }

  .cllctiv-me-md-5 {
    margin-inline-end: var(--spacing-5) !important;
  }

  .cllctiv-px-md-5 {
    padding-inline: var(--spacing-5) !important;
  }

  .cllctiv-py-md-5 {
    padding-block: var(--spacing-5) !important;
  }

  .cllctiv-pt-md-5 {
    padding-top: var(--spacing-5) !important;
  }

  .cllctiv-pb-md-5 {
    padding-bottom: var(--spacing-5) !important;
  }

  .cllctiv-ps-md-5 {
    padding-inline-start: var(--spacing-5) !important;
  }

  .cllctiv-pe-md-5 {
    padding-inline-end: var(--spacing-5) !important;
  }

  .cllctiv-m-md-6 {
    margin: var(--spacing-6) !important;
  }

  .cllctiv-p-md-6 {
    padding: var(--spacing-6) !important;
  }

  .cllctiv-g-md-6 {
    gap: var(--spacing-6) !important;
  }

  .cllctiv-mx-md-6 {
    margin-inline: var(--spacing-6) !important;
  }

  .cllctiv-my-md-6 {
    margin-block: var(--spacing-6) !important;
  }

  .cllctiv-mt-md-6 {
    margin-top: var(--spacing-6) !important;
  }

  .cllctiv-mb-md-6 {
    margin-bottom: var(--spacing-6) !important;
  }

  .cllctiv-ms-md-6 {
    margin-inline-start: var(--spacing-6) !important;
  }

  .cllctiv-me-md-6 {
    margin-inline-end: var(--spacing-6) !important;
  }

  .cllctiv-px-md-6 {
    padding-inline: var(--spacing-6) !important;
  }

  .cllctiv-py-md-6 {
    padding-block: var(--spacing-6) !important;
  }

  .cllctiv-pt-md-6 {
    padding-top: var(--spacing-6) !important;
  }

  .cllctiv-pb-md-6 {
    padding-bottom: var(--spacing-6) !important;
  }

  .cllctiv-ps-md-6 {
    padding-inline-start: var(--spacing-6) !important;
  }

  .cllctiv-pe-md-6 {
    padding-inline-end: var(--spacing-6) !important;
  }

  .cllctiv-m-md-7 {
    margin: var(--spacing-7) !important;
  }

  .cllctiv-p-md-7 {
    padding: var(--spacing-7) !important;
  }

  .cllctiv-g-md-7 {
    gap: var(--spacing-7) !important;
  }

  .cllctiv-mx-md-7 {
    margin-inline: var(--spacing-7) !important;
  }

  .cllctiv-my-md-7 {
    margin-block: var(--spacing-7) !important;
  }

  .cllctiv-mt-md-7 {
    margin-top: var(--spacing-7) !important;
  }

  .cllctiv-mb-md-7 {
    margin-bottom: var(--spacing-7) !important;
  }

  .cllctiv-ms-md-7 {
    margin-inline-start: var(--spacing-7) !important;
  }

  .cllctiv-me-md-7 {
    margin-inline-end: var(--spacing-7) !important;
  }

  .cllctiv-px-md-7 {
    padding-inline: var(--spacing-7) !important;
  }

  .cllctiv-py-md-7 {
    padding-block: var(--spacing-7) !important;
  }

  .cllctiv-pt-md-7 {
    padding-top: var(--spacing-7) !important;
  }

  .cllctiv-pb-md-7 {
    padding-bottom: var(--spacing-7) !important;
  }

  .cllctiv-ps-md-7 {
    padding-inline-start: var(--spacing-7) !important;
  }

  .cllctiv-pe-md-7 {
    padding-inline-end: var(--spacing-7) !important;
  }

  .cllctiv-m-md-8 {
    margin: var(--spacing-8) !important;
  }

  .cllctiv-p-md-8 {
    padding: var(--spacing-8) !important;
  }

  .cllctiv-g-md-8 {
    gap: var(--spacing-8) !important;
  }

  .cllctiv-mx-md-8 {
    margin-inline: var(--spacing-8) !important;
  }

  .cllctiv-my-md-8 {
    margin-block: var(--spacing-8) !important;
  }

  .cllctiv-mt-md-8 {
    margin-top: var(--spacing-8) !important;
  }

  .cllctiv-mb-md-8 {
    margin-bottom: var(--spacing-8) !important;
  }

  .cllctiv-ms-md-8 {
    margin-inline-start: var(--spacing-8) !important;
  }

  .cllctiv-me-md-8 {
    margin-inline-end: var(--spacing-8) !important;
  }

  .cllctiv-px-md-8 {
    padding-inline: var(--spacing-8) !important;
  }

  .cllctiv-py-md-8 {
    padding-block: var(--spacing-8) !important;
  }

  .cllctiv-pt-md-8 {
    padding-top: var(--spacing-8) !important;
  }

  .cllctiv-pb-md-8 {
    padding-bottom: var(--spacing-8) !important;
  }

  .cllctiv-ps-md-8 {
    padding-inline-start: var(--spacing-8) !important;
  }

  .cllctiv-pe-md-8 {
    padding-inline-end: var(--spacing-8) !important;
  }

  .cllctiv-m-md-9 {
    margin: var(--spacing-9) !important;
  }

  .cllctiv-p-md-9 {
    padding: var(--spacing-9) !important;
  }

  .cllctiv-g-md-9 {
    gap: var(--spacing-9) !important;
  }

  .cllctiv-mx-md-9 {
    margin-inline: var(--spacing-9) !important;
  }

  .cllctiv-my-md-9 {
    margin-block: var(--spacing-9) !important;
  }

  .cllctiv-mt-md-9 {
    margin-top: var(--spacing-9) !important;
  }

  .cllctiv-mb-md-9 {
    margin-bottom: var(--spacing-9) !important;
  }

  .cllctiv-ms-md-9 {
    margin-inline-start: var(--spacing-9) !important;
  }

  .cllctiv-me-md-9 {
    margin-inline-end: var(--spacing-9) !important;
  }

  .cllctiv-px-md-9 {
    padding-inline: var(--spacing-9) !important;
  }

  .cllctiv-py-md-9 {
    padding-block: var(--spacing-9) !important;
  }

  .cllctiv-pt-md-9 {
    padding-top: var(--spacing-9) !important;
  }

  .cllctiv-pb-md-9 {
    padding-bottom: var(--spacing-9) !important;
  }

  .cllctiv-ps-md-9 {
    padding-inline-start: var(--spacing-9) !important;
  }

  .cllctiv-pe-md-9 {
    padding-inline-end: var(--spacing-9) !important;
  }

  .cllctiv-m-md-10 {
    margin: var(--spacing-10) !important;
  }

  .cllctiv-p-md-10 {
    padding: var(--spacing-10) !important;
  }

  .cllctiv-g-md-10 {
    gap: var(--spacing-10) !important;
  }

  .cllctiv-mx-md-10 {
    margin-inline: var(--spacing-10) !important;
  }

  .cllctiv-my-md-10 {
    margin-block: var(--spacing-10) !important;
  }

  .cllctiv-mt-md-10 {
    margin-top: var(--spacing-10) !important;
  }

  .cllctiv-mb-md-10 {
    margin-bottom: var(--spacing-10) !important;
  }

  .cllctiv-ms-md-10 {
    margin-inline-start: var(--spacing-10) !important;
  }

  .cllctiv-me-md-10 {
    margin-inline-end: var(--spacing-10) !important;
  }

  .cllctiv-px-md-10 {
    padding-inline: var(--spacing-10) !important;
  }

  .cllctiv-py-md-10 {
    padding-block: var(--spacing-10) !important;
  }

  .cllctiv-pt-md-10 {
    padding-top: var(--spacing-10) !important;
  }

  .cllctiv-pb-md-10 {
    padding-bottom: var(--spacing-10) !important;
  }

  .cllctiv-ps-md-10 {
    padding-inline-start: var(--spacing-10) !important;
  }

  .cllctiv-pe-md-10 {
    padding-inline-end: var(--spacing-10) !important;
  }
}

@media screen and (min-width: 1280px) {

  /* Responsive Axis-Specific Margin and Padding Classes */
  .cllctiv-m-lg-0 {
    margin: 0px !important;
  }

  .cllctiv-p-lg-0 {
    padding: 0px !important;
  }

  .cllctiv-g-lg-0 {
    gap: 0px !important;
  }

  .cllctiv-mx-lg-0 {
    margin-inline: 0px !important;
  }

  .cllctiv-my-lg-0 {
    margin-block: 0px !important;
  }

  .cllctiv-mt-lg-0 {
    margin-top: 0px !important;
  }

  .cllctiv-mb-lg-0 {
    margin-bottom: 0px !important;
  }

  .cllctiv-ms-lg-0 {
    margin-inline-start: 0px !important;
  }

  .cllctiv-me-lg-0 {
    margin-inline-end: 0px !important;
  }

  .cllctiv-px-lg-0 {
    padding-inline: 0px !important;
  }

  .cllctiv-py-lg-0 {
    padding-block: 0px !important;
  }

  .cllctiv-pt-lg-0 {
    padding-top: 0px !important;
  }

  .cllctiv-pb-lg-0 {
    padding-bottom: 0px !important;
  }

  .cllctiv-ps-lg-0 {
    padding-inline-start: 0px !important;
  }

  .cllctiv-pe-lg-0 {
    padding-inline-end: 0px !important;
  }

  .cllctiv-m-lg-1 {
    margin: var(--spacing-1) !important;
  }

  .cllctiv-p-lg-1 {
    padding: var(--spacing-1) !important;
  }

  .cllctiv-g-lg-1 {
    gap: var(--spacing-1) !important;
  }

  .cllctiv-mx-lg-1 {
    margin-inline: var(--spacing-1) !important;
  }

  .cllctiv-my-lg-1 {
    margin-block: var(--spacing-1) !important;
  }

  .cllctiv-mt-lg-1 {
    margin-top: var(--spacing-1) !important;
  }

  .cllctiv-mb-lg-1 {
    margin-bottom: var(--spacing-1) !important;
  }

  .cllctiv-ms-lg-1 {
    margin-inline-start: var(--spacing-1) !important;
  }

  .cllctiv-me-lg-1 {
    margin-inline-end: var(--spacing-1) !important;
  }

  .cllctiv-px-lg-1 {
    padding-inline: var(--spacing-1) !important;
  }

  .cllctiv-py-lg-1 {
    padding-block: var(--spacing-1) !important;
  }

  .cllctiv-pt-lg-1 {
    padding-top: var(--spacing-1) !important;
  }

  .cllctiv-pb-lg-1 {
    padding-bottom: var(--spacing-1) !important;
  }

  .cllctiv-ps-lg-1 {
    padding-inline-start: var(--spacing-1) !important;
  }

  .cllctiv-pe-lg-1 {
    padding-inline-end: var(--spacing-1) !important;
  }

  .cllctiv-m-lg-2 {
    margin: var(--spacing-2) !important;
  }

  .cllctiv-p-lg-2 {
    padding: var(--spacing-2) !important;
  }

  .cllctiv-g-lg-2 {
    gap: var(--spacing-2) !important;
  }

  .cllctiv-mx-lg-2 {
    margin-inline: var(--spacing-2) !important;
  }

  .cllctiv-my-lg-2 {
    margin-block: var(--spacing-2) !important;
  }

  .cllctiv-mt-lg-2 {
    margin-top: var(--spacing-2) !important;
  }

  .cllctiv-mb-lg-2 {
    margin-bottom: var(--spacing-2) !important;
  }

  .cllctiv-ms-lg-2 {
    margin-inline-start: var(--spacing-2) !important;
  }

  .cllctiv-me-lg-2 {
    margin-inline-end: var(--spacing-2) !important;
  }

  .cllctiv-px-lg-2 {
    padding-inline: var(--spacing-2) !important;
  }

  .cllctiv-py-lg-2 {
    padding-block: var(--spacing-2) !important;
  }

  .cllctiv-pt-lg-2 {
    padding-top: var(--spacing-2) !important;
  }

  .cllctiv-pb-lg-2 {
    padding-bottom: var(--spacing-2) !important;
  }

  .cllctiv-ps-lg-2 {
    padding-inline-start: var(--spacing-2) !important;
  }

  .cllctiv-pe-lg-2 {
    padding-inline-end: var(--spacing-2) !important;
  }

  .cllctiv-m-lg-3 {
    margin: var(--spacing-3) !important;
  }

  .cllctiv-p-lg-3 {
    padding: var(--spacing-3) !important;
  }

  .cllctiv-g-lg-3 {
    gap: var(--spacing-3) !important;
  }

  .cllctiv-mx-lg-3 {
    margin-inline: var(--spacing-3) !important;
  }

  .cllctiv-my-lg-3 {
    margin-block: var(--spacing-3) !important;
  }

  .cllctiv-mt-lg-3 {
    margin-top: var(--spacing-3) !important;
  }

  .cllctiv-mb-lg-3 {
    margin-bottom: var(--spacing-3) !important;
  }

  .cllctiv-ms-lg-3 {
    margin-inline-start: var(--spacing-3) !important;
  }

  .cllctiv-me-lg-3 {
    margin-inline-end: var(--spacing-3) !important;
  }

  .cllctiv-px-lg-3 {
    padding-inline: var(--spacing-3) !important;
  }

  .cllctiv-py-lg-3 {
    padding-block: var(--spacing-3) !important;
  }

  .cllctiv-pt-lg-3 {
    padding-top: var(--spacing-3) !important;
  }

  .cllctiv-pb-lg-3 {
    padding-bottom: var(--spacing-3) !important;
  }

  .cllctiv-ps-lg-3 {
    padding-inline-start: var(--spacing-3) !important;
  }

  .cllctiv-pe-lg-3 {
    padding-inline-end: var(--spacing-3) !important;
  }

  .cllctiv-m-lg-4 {
    margin: var(--spacing-4) !important;
  }

  .cllctiv-p-lg-4 {
    padding: var(--spacing-4) !important;
  }

  .cllctiv-g-lg-4 {
    gap: var(--spacing-4) !important;
  }

  .cllctiv-mx-lg-4 {
    margin-inline: var(--spacing-4) !important;
  }

  .cllctiv-my-lg-4 {
    margin-block: var(--spacing-4) !important;
  }

  .cllctiv-mt-lg-4 {
    margin-top: var(--spacing-4) !important;
  }

  .cllctiv-mb-lg-4 {
    margin-bottom: var(--spacing-4) !important;
  }

  .cllctiv-ms-lg-4 {
    margin-inline-start: var(--spacing-4) !important;
  }

  .cllctiv-me-lg-4 {
    margin-inline-end: var(--spacing-4) !important;
  }

  .cllctiv-px-lg-4 {
    padding-inline: var(--spacing-4) !important;
  }

  .cllctiv-py-lg-4 {
    padding-block: var(--spacing-4) !important;
  }

  .cllctiv-pt-lg-4 {
    padding-top: var(--spacing-4) !important;
  }

  .cllctiv-pb-lg-4 {
    padding-bottom: var(--spacing-4) !important;
  }

  .cllctiv-ps-lg-4 {
    padding-inline-start: var(--spacing-4) !important;
  }

  .cllctiv-pe-lg-4 {
    padding-inline-end: var(--spacing-4) !important;
  }

  .cllctiv-m-lg-5 {
    margin: var(--spacing-5) !important;
  }

  .cllctiv-p-lg-5 {
    padding: var(--spacing-5) !important;
  }

  .cllctiv-g-lg-5 {
    gap: var(--spacing-5) !important;
  }

  .cllctiv-mx-lg-5 {
    margin-inline: var(--spacing-5) !important;
  }

  .cllctiv-my-lg-5 {
    margin-block: var(--spacing-5) !important;
  }

  .cllctiv-mt-lg-5 {
    margin-top: var(--spacing-5) !important;
  }

  .cllctiv-mb-lg-5 {
    margin-bottom: var(--spacing-5) !important;
  }

  .cllctiv-ms-lg-5 {
    margin-inline-start: var(--spacing-5) !important;
  }

  .cllctiv-me-lg-5 {
    margin-inline-end: var(--spacing-5) !important;
  }

  .cllctiv-px-lg-5 {
    padding-inline: var(--spacing-5) !important;
  }

  .cllctiv-py-lg-5 {
    padding-block: var(--spacing-5) !important;
  }

  .cllctiv-pt-lg-5 {
    padding-top: var(--spacing-5) !important;
  }

  .cllctiv-pb-lg-5 {
    padding-bottom: var(--spacing-5) !important;
  }

  .cllctiv-ps-lg-5 {
    padding-inline-start: var(--spacing-5) !important;
  }

  .cllctiv-pe-lg-5 {
    padding-inline-end: var(--spacing-5) !important;
  }

  .cllctiv-m-lg-6 {
    margin: var(--spacing-6) !important;
  }

  .cllctiv-p-lg-6 {
    padding: var(--spacing-6) !important;
  }

  .cllctiv-g-lg-6 {
    gap: var(--spacing-6) !important;
  }

  .cllctiv-mx-lg-6 {
    margin-inline: var(--spacing-6) !important;
  }

  .cllctiv-my-lg-6 {
    margin-block: var(--spacing-6) !important;
  }

  .cllctiv-mt-lg-6 {
    margin-top: var(--spacing-6) !important;
  }

  .cllctiv-mb-lg-6 {
    margin-bottom: var(--spacing-6) !important;
  }

  .cllctiv-ms-lg-6 {
    margin-inline-start: var(--spacing-6) !important;
  }

  .cllctiv-me-lg-6 {
    margin-inline-end: var(--spacing-6) !important;
  }

  .cllctiv-px-lg-6 {
    padding-inline: var(--spacing-6) !important;
  }

  .cllctiv-py-lg-6 {
    padding-block: var(--spacing-6) !important;
  }

  .cllctiv-pt-lg-6 {
    padding-top: var(--spacing-6) !important;
  }

  .cllctiv-pb-lg-6 {
    padding-bottom: var(--spacing-6) !important;
  }

  .cllctiv-ps-lg-6 {
    padding-inline-start: var(--spacing-6) !important;
  }

  .cllctiv-pe-lg-6 {
    padding-inline-end: var(--spacing-6) !important;
  }

  .cllctiv-m-lg-7 {
    margin: var(--spacing-7) !important;
  }

  .cllctiv-p-lg-7 {
    padding: var(--spacing-7) !important;
  }

  .cllctiv-g-lg-7 {
    gap: var(--spacing-7) !important;
  }

  .cllctiv-mx-lg-7 {
    margin-inline: var(--spacing-7) !important;
  }

  .cllctiv-my-lg-7 {
    margin-block: var(--spacing-7) !important;
  }

  .cllctiv-mt-lg-7 {
    margin-top: var(--spacing-7) !important;
  }

  .cllctiv-mb-lg-7 {
    margin-bottom: var(--spacing-7) !important;
  }

  .cllctiv-ms-lg-7 {
    margin-inline-start: var(--spacing-7) !important;
  }

  .cllctiv-me-lg-7 {
    margin-inline-end: var(--spacing-7) !important;
  }

  .cllctiv-px-lg-7 {
    padding-inline: var(--spacing-7) !important;
  }

  .cllctiv-py-lg-7 {
    padding-block: var(--spacing-7) !important;
  }

  .cllctiv-pt-lg-7 {
    padding-top: var(--spacing-7) !important;
  }

  .cllctiv-pb-lg-7 {
    padding-bottom: var(--spacing-7) !important;
  }

  .cllctiv-ps-lg-7 {
    padding-inline-start: var(--spacing-7) !important;
  }

  .cllctiv-pe-lg-7 {
    padding-inline-end: var(--spacing-7) !important;
  }

  .cllctiv-m-lg-8 {
    margin: var(--spacing-8) !important;
  }

  .cllctiv-p-lg-8 {
    padding: var(--spacing-8) !important;
  }

  .cllctiv-g-lg-8 {
    gap: var(--spacing-8) !important;
  }

  .cllctiv-mx-lg-8 {
    margin-inline: var(--spacing-8) !important;
  }

  .cllctiv-my-lg-8 {
    margin-block: var(--spacing-8) !important;
  }

  .cllctiv-mt-lg-8 {
    margin-top: var(--spacing-8) !important;
  }

  .cllctiv-mb-lg-8 {
    margin-bottom: var(--spacing-8) !important;
  }

  .cllctiv-ms-lg-8 {
    margin-inline-start: var(--spacing-8) !important;
  }

  .cllctiv-me-lg-8 {
    margin-inline-end: var(--spacing-8) !important;
  }

  .cllctiv-px-lg-8 {
    padding-inline: var(--spacing-8) !important;
  }

  .cllctiv-py-lg-8 {
    padding-block: var(--spacing-8) !important;
  }

  .cllctiv-pt-lg-8 {
    padding-top: var(--spacing-8) !important;
  }

  .cllctiv-pb-lg-8 {
    padding-bottom: var(--spacing-8) !important;
  }

  .cllctiv-ps-lg-8 {
    padding-inline-start: var(--spacing-8) !important;
  }

  .cllctiv-pe-lg-8 {
    padding-inline-end: var(--spacing-8) !important;
  }

  .cllctiv-m-lg-9 {
    margin: var(--spacing-9) !important;
  }

  .cllctiv-p-lg-9 {
    padding: var(--spacing-9) !important;
  }

  .cllctiv-g-lg-9 {
    gap: var(--spacing-9) !important;
  }

  .cllctiv-mx-lg-9 {
    margin-inline: var(--spacing-9) !important;
  }

  .cllctiv-my-lg-9 {
    margin-block: var(--spacing-9) !important;
  }

  .cllctiv-mt-lg-9 {
    margin-top: var(--spacing-9) !important;
  }

  .cllctiv-mb-lg-9 {
    margin-bottom: var(--spacing-9) !important;
  }

  .cllctiv-ms-lg-9 {
    margin-inline-start: var(--spacing-9) !important;
  }

  .cllctiv-me-lg-9 {
    margin-inline-end: var(--spacing-9) !important;
  }

  .cllctiv-px-lg-9 {
    padding-inline: var(--spacing-9) !important;
  }

  .cllctiv-py-lg-9 {
    padding-block: var(--spacing-9) !important;
  }

  .cllctiv-pt-lg-9 {
    padding-top: var(--spacing-9) !important;
  }

  .cllctiv-pb-lg-9 {
    padding-bottom: var(--spacing-9) !important;
  }

  .cllctiv-ps-lg-9 {
    padding-inline-start: var(--spacing-9) !important;
  }

  .cllctiv-pe-lg-9 {
    padding-inline-end: var(--spacing-9) !important;
  }

  .cllctiv-m-lg-10 {
    margin: var(--spacing-10) !important;
  }

  .cllctiv-p-lg-10 {
    padding: var(--spacing-10) !important;
  }

  .cllctiv-g-lg-10 {
    gap: var(--spacing-10) !important;
  }

  .cllctiv-mx-lg-10 {
    margin-inline: var(--spacing-10) !important;
  }

  .cllctiv-my-lg-10 {
    margin-block: var(--spacing-10) !important;
  }

  .cllctiv-mt-lg-10 {
    margin-top: var(--spacing-10) !important;
  }

  .cllctiv-mb-lg-10 {
    margin-bottom: var(--spacing-10) !important;
  }

  .cllctiv-ms-lg-10 {
    margin-inline-start: var(--spacing-10) !important;
  }

  .cllctiv-me-lg-10 {
    margin-inline-end: var(--spacing-10) !important;
  }

  .cllctiv-px-lg-10 {
    padding-inline: var(--spacing-10) !important;
  }

  .cllctiv-py-lg-10 {
    padding-block: var(--spacing-10) !important;
  }

  .cllctiv-pt-lg-10 {
    padding-top: var(--spacing-10) !important;
  }

  .cllctiv-pb-lg-10 {
    padding-bottom: var(--spacing-10) !important;
  }

  .cllctiv-ps-lg-10 {
    padding-inline-start: var(--spacing-10) !important;
  }

  .cllctiv-pe-lg-10 {
    padding-inline-end: var(--spacing-10) !important;
  }
}

@media screen and (min-width: 1519.98px) {

  /* Responsive Axis-Specific Margin and Padding Classes */
  .cllctiv-m-xl-1 {
    margin: var(--spacing-1) !important;
  }

  .cllctiv-p-xl-1 {
    padding: var(--spacing-1) !important;
  }

  .cllctiv-g-xl-1 {
    gap: var(--spacing-1) !important;
  }

  .cllctiv-mx-xl-1 {
    margin-inline: var(--spacing-1) !important;
  }

  .cllctiv-my-xl-1 {
    margin-block: var(--spacing-1) !important;
  }

  .cllctiv-mt-xl-1 {
    margin-top: var(--spacing-1) !important;
  }

  .cllctiv-mb-xl-1 {
    margin-bottom: var(--spacing-1) !important;
  }

  .cllctiv-ms-xl-1 {
    margin-inline-start: var(--spacing-1) !important;
  }

  .cllctiv-me-xl-1 {
    margin-inline-end: var(--spacing-1) !important;
  }

  .cllctiv-px-xl-1 {
    padding-inline: var(--spacing-1) !important;
  }

  .cllctiv-py-xl-1 {
    padding-block: var(--spacing-1) !important;
  }

  .cllctiv-pt-xl-1 {
    padding-top: var(--spacing-1) !important;
  }

  .cllctiv-pb-xl-1 {
    padding-bottom: var(--spacing-1) !important;
  }

  .cllctiv-ps-xl-1 {
    padding-inline-start: var(--spacing-1) !important;
  }

  .cllctiv-pe-xl-1 {
    padding-inline-end: var(--spacing-1) !important;
  }

  .cllctiv-m-xl-2 {
    margin: var(--spacing-2) !important;
  }

  .cllctiv-p-xl-2 {
    padding: var(--spacing-2) !important;
  }

  .cllctiv-g-xl-2 {
    gap: var(--spacing-2) !important;
  }

  .cllctiv-mx-xl-2 {
    margin-inline: var(--spacing-2) !important;
  }

  .cllctiv-my-xl-2 {
    margin-block: var(--spacing-2) !important;
  }

  .cllctiv-mt-xl-2 {
    margin-top: var(--spacing-2) !important;
  }

  .cllctiv-mb-xl-2 {
    margin-bottom: var(--spacing-2) !important;
  }

  .cllctiv-ms-xl-2 {
    margin-inline-start: var(--spacing-2) !important;
  }

  .cllctiv-me-xl-2 {
    margin-inline-end: var(--spacing-2) !important;
  }

  .cllctiv-px-xl-2 {
    padding-inline: var(--spacing-2) !important;
  }

  .cllctiv-py-xl-2 {
    padding-block: var(--spacing-2) !important;
  }

  .cllctiv-pt-xl-2 {
    padding-top: var(--spacing-2) !important;
  }

  .cllctiv-pb-xl-2 {
    padding-bottom: var(--spacing-2) !important;
  }

  .cllctiv-ps-xl-2 {
    padding-inline-start: var(--spacing-2) !important;
  }

  .cllctiv-pe-xl-2 {
    padding-inline-end: var(--spacing-2) !important;
  }

  .cllctiv-m-xl-3 {
    margin: var(--spacing-3) !important;
  }

  .cllctiv-p-xl-3 {
    padding: var(--spacing-3) !important;
  }

  .cllctiv-g-xl-3 {
    gap: var(--spacing-3) !important;
  }

  .cllctiv-mx-xl-3 {
    margin-inline: var(--spacing-3) !important;
  }

  .cllctiv-my-xl-3 {
    margin-block: var(--spacing-3) !important;
  }

  .cllctiv-mt-xl-3 {
    margin-top: var(--spacing-3) !important;
  }

  .cllctiv-mb-xl-3 {
    margin-bottom: var(--spacing-3) !important;
  }

  .cllctiv-ms-xl-3 {
    margin-inline-start: var(--spacing-3) !important;
  }

  .cllctiv-me-xl-3 {
    margin-inline-end: var(--spacing-3) !important;
  }

  .cllctiv-px-xl-3 {
    padding-inline: var(--spacing-3) !important;
  }

  .cllctiv-py-xl-3 {
    padding-block: var(--spacing-3) !important;
  }

  .cllctiv-pt-xl-3 {
    padding-top: var(--spacing-3) !important;
  }

  .cllctiv-pb-xl-3 {
    padding-bottom: var(--spacing-3) !important;
  }

  .cllctiv-ps-xl-3 {
    padding-inline-start: var(--spacing-3) !important;
  }

  .cllctiv-pe-xl-3 {
    padding-inline-end: var(--spacing-3) !important;
  }

  .cllctiv-m-xl-4 {
    margin: var(--spacing-4) !important;
  }

  .cllctiv-p-xl-4 {
    padding: var(--spacing-4) !important;
  }

  .cllctiv-g-xl-4 {
    gap: var(--spacing-4) !important;
  }

  .cllctiv-mx-xl-4 {
    margin-inline: var(--spacing-4) !important;
  }

  .cllctiv-my-xl-4 {
    margin-block: var(--spacing-4) !important;
  }

  .cllctiv-mt-xl-4 {
    margin-top: var(--spacing-4) !important;
  }

  .cllctiv-mb-xl-4 {
    margin-bottom: var(--spacing-4) !important;
  }

  .cllctiv-ms-xl-4 {
    margin-inline-start: var(--spacing-4) !important;
  }

  .cllctiv-me-xl-4 {
    margin-inline-end: var(--spacing-4) !important;
  }

  .cllctiv-px-xl-4 {
    padding-inline: var(--spacing-4) !important;
  }

  .cllctiv-py-xl-4 {
    padding-block: var(--spacing-4) !important;
  }

  .cllctiv-pt-xl-4 {
    padding-top: var(--spacing-4) !important;
  }

  .cllctiv-pb-xl-4 {
    padding-bottom: var(--spacing-4) !important;
  }

  .cllctiv-ps-xl-4 {
    padding-inline-start: var(--spacing-4) !important;
  }

  .cllctiv-pe-xl-4 {
    padding-inline-end: var(--spacing-4) !important;
  }

  .cllctiv-m-xl-5 {
    margin: var(--spacing-5) !important;
  }

  .cllctiv-p-xl-5 {
    padding: var(--spacing-5) !important;
  }

  .cllctiv-g-xl-5 {
    gap: var(--spacing-5) !important;
  }

  .cllctiv-mx-xl-5 {
    margin-inline: var(--spacing-5) !important;
  }

  .cllctiv-my-xl-5 {
    margin-block: var(--spacing-5) !important;
  }

  .cllctiv-mt-xl-5 {
    margin-top: var(--spacing-5) !important;
  }

  .cllctiv-mb-xl-5 {
    margin-bottom: var(--spacing-5) !important;
  }

  .cllctiv-ms-xl-5 {
    margin-inline-start: var(--spacing-5) !important;
  }

  .cllctiv-me-xl-5 {
    margin-inline-end: var(--spacing-5) !important;
  }

  .cllctiv-px-xl-5 {
    padding-inline: var(--spacing-5) !important;
  }

  .cllctiv-py-xl-5 {
    padding-block: var(--spacing-5) !important;
  }

  .cllctiv-pt-xl-5 {
    padding-top: var(--spacing-5) !important;
  }

  .cllctiv-pb-xl-5 {
    padding-bottom: var(--spacing-5) !important;
  }

  .cllctiv-ps-xl-5 {
    padding-inline-start: var(--spacing-5) !important;
  }

  .cllctiv-pe-xl-5 {
    padding-inline-end: var(--spacing-5) !important;
  }

  .cllctiv-m-xl-6 {
    margin: var(--spacing-6) !important;
  }

  .cllctiv-p-xl-6 {
    padding: var(--spacing-6) !important;
  }

  .cllctiv-g-xl-6 {
    gap: var(--spacing-6) !important;
  }

  .cllctiv-mx-xl-6 {
    margin-inline: var(--spacing-6) !important;
  }

  .cllctiv-my-xl-6 {
    margin-block: var(--spacing-6) !important;
  }

  .cllctiv-mt-xl-6 {
    margin-top: var(--spacing-6) !important;
  }

  .cllctiv-mb-xl-6 {
    margin-bottom: var(--spacing-6) !important;
  }

  .cllctiv-ms-xl-6 {
    margin-inline-start: var(--spacing-6) !important;
  }

  .cllctiv-me-xl-6 {
    margin-inline-end: var(--spacing-6) !important;
  }

  .cllctiv-px-xl-6 {
    padding-inline: var(--spacing-6) !important;
  }

  .cllctiv-py-xl-6 {
    padding-block: var(--spacing-6) !important;
  }

  .cllctiv-pt-xl-6 {
    padding-top: var(--spacing-6) !important;
  }

  .cllctiv-pb-xl-6 {
    padding-bottom: var(--spacing-6) !important;
  }

  .cllctiv-ps-xl-6 {
    padding-inline-start: var(--spacing-6) !important;
  }

  .cllctiv-pe-xl-6 {
    padding-inline-end: var(--spacing-6) !important;
  }

  .cllctiv-m-xl-7 {
    margin: var(--spacing-7) !important;
  }

  .cllctiv-p-xl-7 {
    padding: var(--spacing-7) !important;
  }

  .cllctiv-g-xl-7 {
    gap: var(--spacing-7) !important;
  }

  .cllctiv-mx-xl-7 {
    margin-inline: var(--spacing-7) !important;
  }

  .cllctiv-my-xl-7 {
    margin-block: var(--spacing-7) !important;
  }

  .cllctiv-mt-xl-7 {
    margin-top: var(--spacing-7) !important;
  }

  .cllctiv-mb-xl-7 {
    margin-bottom: var(--spacing-7) !important;
  }

  .cllctiv-ms-xl-7 {
    margin-inline-start: var(--spacing-7) !important;
  }

  .cllctiv-me-xl-7 {
    margin-inline-end: var(--spacing-7) !important;
  }

  .cllctiv-px-xl-7 {
    padding-inline: var(--spacing-7) !important;
  }

  .cllctiv-py-xl-7 {
    padding-block: var(--spacing-7) !important;
  }

  .cllctiv-pt-xl-7 {
    padding-top: var(--spacing-7) !important;
  }

  .cllctiv-pb-xl-7 {
    padding-bottom: var(--spacing-7) !important;
  }

  .cllctiv-ps-xl-7 {
    padding-inline-start: var(--spacing-7) !important;
  }

  .cllctiv-pe-xl-7 {
    padding-inline-end: var(--spacing-7) !important;
  }

  .cllctiv-m-xl-8 {
    margin: var(--spacing-8) !important;
  }

  .cllctiv-p-xl-8 {
    padding: var(--spacing-8) !important;
  }

  .cllctiv-g-xl-8 {
    gap: var(--spacing-8) !important;
  }

  .cllctiv-mx-xl-8 {
    margin-inline: var(--spacing-8) !important;
  }

  .cllctiv-my-xl-8 {
    margin-block: var(--spacing-8) !important;
  }

  .cllctiv-mt-xl-8 {
    margin-top: var(--spacing-8) !important;
  }

  .cllctiv-mb-xl-8 {
    margin-bottom: var(--spacing-8) !important;
  }

  .cllctiv-ms-xl-8 {
    margin-inline-start: var(--spacing-8) !important;
  }

  .cllctiv-me-xl-8 {
    margin-inline-end: var(--spacing-8) !important;
  }

  .cllctiv-px-xl-8 {
    padding-inline: var(--spacing-8) !important;
  }

  .cllctiv-py-xl-8 {
    padding-block: var(--spacing-8) !important;
  }

  .cllctiv-pt-xl-8 {
    padding-top: var(--spacing-8) !important;
  }

  .cllctiv-pb-xl-8 {
    padding-bottom: var(--spacing-8) !important;
  }

  .cllctiv-ps-xl-8 {
    padding-inline-start: var(--spacing-8) !important;
  }

  .cllctiv-pe-xl-8 {
    padding-inline-end: var(--spacing-8) !important;
  }

  .cllctiv-m-xl-9 {
    margin: var(--spacing-9) !important;
  }

  .cllctiv-p-xl-9 {
    padding: var(--spacing-9) !important;
  }

  .cllctiv-g-xl-9 {
    gap: var(--spacing-9) !important;
  }

  .cllctiv-mx-xl-9 {
    margin-inline: var(--spacing-9) !important;
  }

  .cllctiv-my-xl-9 {
    margin-block: var(--spacing-9) !important;
  }

  .cllctiv-mt-xl-9 {
    margin-top: var(--spacing-9) !important;
  }

  .cllctiv-mb-xl-9 {
    margin-bottom: var(--spacing-9) !important;
  }

  .cllctiv-ms-xl-9 {
    margin-inline-start: var(--spacing-9) !important;
  }

  .cllctiv-me-xl-9 {
    margin-inline-end: var(--spacing-9) !important;
  }

  .cllctiv-px-xl-9 {
    padding-inline: var(--spacing-9) !important;
  }

  .cllctiv-py-xl-9 {
    padding-block: var(--spacing-9) !important;
  }

  .cllctiv-pt-xl-9 {
    padding-top: var(--spacing-9) !important;
  }

  .cllctiv-pb-xl-9 {
    padding-bottom: var(--spacing-9) !important;
  }

  .cllctiv-ps-xl-9 {
    padding-inline-start: var(--spacing-9) !important;
  }

  .cllctiv-pe-xl-9 {
    padding-inline-end: var(--spacing-9) !important;
  }

  .cllctiv-m-xl-10 {
    margin: var(--spacing-10) !important;
  }

  .cllctiv-p-xl-10 {
    padding: var(--spacing-10) !important;
  }

  .cllctiv-g-xl-10 {
    gap: var(--spacing-10) !important;
  }

  .cllctiv-mx-xl-10 {
    margin-inline: var(--spacing-10) !important;
  }

  .cllctiv-my-xl-10 {
    margin-block: var(--spacing-10) !important;
  }

  .cllctiv-mt-xl-10 {
    margin-top: var(--spacing-10) !important;
  }

  .cllctiv-mb-xl-10 {
    margin-bottom: var(--spacing-10) !important;
  }

  .cllctiv-ms-xl-10 {
    margin-inline-start: var(--spacing-10) !important;
  }

  .cllctiv-me-xl-10 {
    margin-inline-end: var(--spacing-10) !important;
  }

  .cllctiv-px-xl-10 {
    padding-inline: var(--spacing-10) !important;
  }

  .cllctiv-py-xl-10 {
    padding-block: var(--spacing-10) !important;
  }

  .cllctiv-pt-xl-10 {
    padding-top: var(--spacing-10) !important;
  }

  .cllctiv-pb-xl-10 {
    padding-bottom: var(--spacing-10) !important;
  }

  .cllctiv-ps-xl-10 {
    padding-inline-start: var(--spacing-10) !important;
  }

  .cllctiv-pe-xl-10 {
    padding-inline-end: var(--spacing-10) !important;
  }
}

/* --------------------------------- */


h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0px;
}

.fw-400 {
  font-weight: var(--fw-400) !important;
}

.fw-450 {
  font-weight: var(--fw-450) !important;
}

.fw-500 {
  font-weight: var(--fw-500) !important;
}

.fw-600 {
  font-weight: var(--fw-600) !important;
}

.fw-700 {
  font-weight: var(--fw-700) !important;
}


.font-druk-wide {
  font-family: var(--font-druk-wide) !important;
}

.font-es-klarheit-plakat {
  font-family: var(--font-es-klarheit-plakat) !important;
}

.font-neue-haas-grotesk-display-pro {
  font-family: var(--font-neue-haas-grotesk-display-pro) !important;
}

.font-neue-haas-grotesk-display-pro-roman {
  font-family: var(--font-neue-haas-grotesk-display-pro-roman) !important;
}

.font-warnock-pro {
  font-family: var(--font-warnock-pro) !important;
}


.text-decoration-none {
  text-decoration: none;
}

/* Different header styles */
.cllctiv-h1 {
  font-size: var(--cllctiv-font-size-h1);
  font-weight: var(--fw-700);
  letter-spacing: var(--cllctiv-letter-spacing-h1);
  font-family: var(--font-druk-wide);
}

.cllctiv-h2 {
  font-size: var(--cllctiv-font-size-h2);
  font-weight: var(--fw-700);
  letter-spacing: var(--cllctiv-letter-spacing-h2);
  font-family: var(--font-druk-wide);
}

.cllctiv-h3 {
  font-size: var(--cllctiv-font-size-h3);
  font-weight: var(--fw-700);
  letter-spacing: var(--cllctiv-letter-spacing-h3);
  font-family: var(--font-druk-wide);
}

.cllctiv-h4 {
  font-size: var(--cllctiv-font-size-h4);
  font-weight: var(--fw-700);
  letter-spacing: var(--cllctiv-letter-spacing-h4);
  font-family: var(--font-druk-wide);
}

/* Different subheader styles */
.cllctiv-subheader-large {
  font-size: var(--cllctiv-font-size-subheader-large);
  font-weight: var(--fw-800);
  letter-spacing: var(--cllctiv-letter-spacing-subheader-large);
  font-family: var(--font-es-klarheit-plakat);
}

.cllctiv-subheader-medium {
  font-size: var(--cllctiv-font-size-subheader-medium);
  font-weight: var(--fw-800);
  letter-spacing: var(--cllctiv-letter-spacing-subheader-medium);
  font-family: var(--font-es-klarheit-plakat);
}

.cllctiv-subheader-small {
  font-size: var(--cllctiv-font-size-subheader-small);
  font-weight: var(--fw-800);
  letter-spacing: var(--cllctiv-letter-spacing-subheader-small);
  font-family: var(--font-es-klarheit-plakat);
}

/* Different paragraph styles */
.cllctiv-p1,
.cllctiv-p1-roman {
  font-size: var(--cllctiv-font-size-p1);
  line-height: var(--cllctiv-line-height-p1);
  letter-spacing: var(--cllctiv-letter-spacing-subheader-large);
}

.cllctiv-p2,
.cllctiv-p2-roman {
  font-size: var(--cllctiv-font-size-p2);
  line-height: var(--cllctiv-line-height-p2);
  letter-spacing: var(--cllctiv-letter-spacing-p2);
}

.cllctiv-p3,
.cllctiv-p3-roman {
  font-size: var(--cllctiv-font-size-p3);
  line-height: var(--cllctiv-line-height-p3);
  letter-spacing: var(--cllctiv-letter-spacing-p3);
}

.cllctiv-p4,
.cllctiv-p4-roman {
  font-size: var(--cllctiv-font-size-p4);
  line-height: var(--cllctiv-line-height-p4);
  letter-spacing: var(--cllctiv-letter-spacing-p4);
}

.cllctiv-p5,
.cllctiv-p5-roman {
  font-size: var(--cllctiv-font-size-p5);
  line-height: var(--cllctiv-line-height-p5);
  letter-spacing: var(--cllctiv-letter-spacing-p5);
}

.cllctiv-p6,
.cllctiv-p6-roman {
  font-size: var(--cllctiv-font-size-p6);
  line-height: var(--cllctiv-line-height-p6);
  letter-spacing: var(--cllctiv-letter-spacing-p6);
}

.cllctiv-p1,
.cllctiv-p2,
.cllctiv-p3,
.cllctiv-p4,
.cllctiv-p5,
.cllctiv-p6 {
  font-family: var(--font-neue-haas-grotesk-display-pro);
}

.cllctiv-p1-roman,
.cllctiv-p2-roman,
.cllctiv-p3-roman,
.cllctiv-p4-roman,
.cllctiv-p5-roman,
.cllctiv-p6-roman {
  font-family: var(--font-neue-haas-grotesk-display-pro-roman);
}

/* Different accent styles */
.cllctiv-accent-1 {
  font-size: var(--cllctiv-font-size-accent-1);
  font-family: var(--font-warnock-pro);
}

.cllctiv-accent-2 {
  font-size: var(--cllctiv-font-size-accent-2);
  font-family: var(--font-warnock-pro);
}

.cllctiv-accent-3 {
  font-size: var(--cllctiv-font-size-accent-3);
  font-family: var(--font-warnock-pro);
}

.cllctiv-accent-4 {
  font-size: var(--cllctiv-font-size-accent-4);
  font-family: var(--font-warnock-pro);
}

@media screen and (min-width: 360px) {
  .cllctiv-sm-h1 {
    font-size: var(--cllctiv-font-size-h1);
    letter-spacing: var(--cllctiv-letter-spacing-h1);
    font-weight: var(--fw-700);
    font-family: var(--font-druk-wide);
  }

  .cllctiv-sm-h2 {
    font-size: var(--cllctiv-font-size-h2);
    letter-spacing: var(--cllctiv-letter-spacing-h2);
    font-weight: var(--fw-700);
    font-family: var(--font-druk-wide);
  }

  .cllctiv-sm-h3 {
    font-size: var(--cllctiv-font-size-h3);
    letter-spacing: var(--cllctiv-letter-spacing-h3);
    font-weight: var(--fw-700);
    font-family: var(--font-druk-wide);
  }

  .cllctiv-sm-h4 {
    font-size: var(--cllctiv-font-size-h4);
    letter-spacing: var(--cllctiv-letter-spacing-h4);
    font-weight: var(--fw-700);
    font-family: var(--font-druk-wide);
  }

  .cllctiv-sm-subheader-large {
    font-size: var(--cllctiv-font-size-subheader-large);
    letter-spacing: var(--cllctiv-letter-spacing-subheader-large);
    font-weight: var(--fw-800);
    font-family: var(--font-es-klarheit-plakat);
  }

  .cllctiv-sm-subheader-medium {
    font-size: var(--cllctiv-font-size-subheader-medium);
    letter-spacing: var(--cllctiv-letter-spacing-subheader-medium);
    font-weight: var(--fw-800);
    font-family: var(--font-es-klarheit-plakat);
  }

  .cllctiv-sm-subheader-small {
    font-size: var(--cllctiv-font-size-subheader-small);
    letter-spacing: var(--cllctiv-letter-spacing-subheader-small);
    font-weight: var(--fw-800);
    font-family: var(--font-es-klarheit-plakat);
  }

  .cllctiv-sm-p1,
  .cllctiv-sm-p1-roman {
    font-size: var(--cllctiv-font-size-p1);
    line-height: var(--cllctiv-line-height-p1);
    letter-spacing: var(--cllctiv-letter-spacing-p1);
    font-family: var(--font-neue-haas-grotesk-display-pro);
  }

  .cllctiv-sm-p2,
  .cllctiv-sm-p2-roman {
    font-size: var(--cllctiv-font-size-p2);
    line-height: var(--cllctiv-line-height-p2);
    letter-spacing: var(--cllctiv-letter-spacing-p2);
    font-family: var(--font-neue-haas-grotesk-display-pro);
  }

  .cllctiv-sm-p3,
  .cllctiv-sm-p3-roman {
    font-size: var(--cllctiv-font-size-p3);
    line-height: var(--cllctiv-line-height-p3);
    letter-spacing: var(--cllctiv-letter-spacing-p3);
    font-family: var(--font-neue-haas-grotesk-display-pro);
  }

  .cllctiv-sm-p4,
  .cllctiv-sm-p4-roman {
    font-size: var(--cllctiv-font-size-p4);
    line-height: var(--cllctiv-line-height-p4);
    letter-spacing: var(--cllctiv-letter-spacing-p4);
    font-family: var(--font-neue-haas-grotesk-display-pro);
  }

  .cllctiv-sm-p5,
  .cllctiv-sm-p5-roman {
    font-size: var(--cllctiv-font-size-p5);
    line-height: var(--cllctiv-line-height-p5);
    letter-spacing: var(--cllctiv-letter-spacing-p5);
    font-family: var(--font-neue-haas-grotesk-display-pro);
  }

  .cllctiv-sm-p6,
  .cllctiv-sm-p6-roman {
    font-size: var(--cllctiv-font-size-p6);
    line-height: var(--cllctiv-line-height-p6);
    letter-spacing: var(--cllctiv-letter-spacing-p6);
    font-family: var(--font-neue-haas-grotesk-display-pro);
  }

  .cllctiv-sm-p1,
  .cllctiv-sm-p2,
  .cllctiv-sm-p3,
  .cllctiv-sm-p4,
  .cllctiv-sm-p5,
  .cllctiv-sm-p6 {
    font-family: var(--font-neue-haas-grotesk-display-pro);
  }

  .cllctiv-sm-p1-roman,
  .cllctiv-sm-p2-roman,
  .cllctiv-sm-p3-roman,
  .cllctiv-sm-p4-roman,
  .cllctiv-sm-p5-roman,
  .cllctiv-sm-p6-roman {
    font-family: var(--font-neue-haas-grotesk-display-pro-roman);
  }

  .cllctiv-sm-accent-1 {
    font-size: var(--cllctiv-font-size-accent-1);
    font-family: var(--font-warnock-pro);
  }

  .cllctiv-sm-accent-2 {
    font-size: var(--cllctiv-font-size-accent-2);
    font-family: var(--font-warnock-pro);
  }

  .cllctiv-sm-accent-3 {
    font-size: var(--cllctiv-font-size-accent-3);
    font-family: var(--font-warnock-pro);
  }

  .cllctiv-sm-accent-4 {
    font-size: var(--cllctiv-font-size-accent-4);
    font-family: var(--font-warnock-pro);
  }
}

@media screen and (min-width: 960px) {
  .cllctiv-md-h1 {
    font-size: var(--cllctiv-font-size-h1);
    letter-spacing: var(--cllctiv-letter-spacing-h1);
    font-weight: var(--fw-700);
    font-family: var(--font-druk-wide);
  }

  .cllctiv-md-h2 {
    font-size: var(--cllctiv-font-size-h2);
    letter-spacing: var(--cllctiv-letter-spacing-h2);
    font-weight: var(--fw-700);
    font-family: var(--font-druk-wide);
  }

  .cllctiv-md-h3 {
    font-size: var(--cllctiv-font-size-h3);
    letter-spacing: var(--cllctiv-letter-spacing-h3);
    font-weight: var(--fw-700);
    font-family: var(--font-druk-wide);
  }

  .cllctiv-md-h4 {
    font-size: var(--cllctiv-font-size-h4);
    letter-spacing: var(--cllctiv-letter-spacing-h4);
    font-weight: var(--fw-700);
    font-family: var(--font-druk-wide);
  }

  .cllctiv-md-subheader-large {
    font-size: var(--cllctiv-font-size-subheader-large);
    letter-spacing: var(--cllctiv-letter-spacing-subheader-large);
    font-weight: var(--fw-800);
    font-family: var(--font-es-klarheit-plakat);
  }

  .cllctiv-md-subheader-medium {
    font-size: var(--cllctiv-font-size-subheader-medium);
    letter-spacing: var(--cllctiv-letter-spacing-subheader-medium);
    font-weight: var(--fw-800);
    font-family: var(--font-es-klarheit-plakat);
  }

  .cllctiv-md-subheader-small {
    font-size: var(--cllctiv-font-size-subheader-small);
    letter-spacing: var(--cllctiv-letter-spacing-subheader-small);
    font-weight: var(--fw-800);
    font-family: var(--font-es-klarheit-plakat);
  }

  .cllctiv-md-p1,
  .cllctiv-md-p1-roman {
    font-size: var(--cllctiv-font-size-p1);
    line-height: var(--cllctiv-line-height-p1);
    letter-spacing: var(--cllctiv-letter-spacing-p1);
    font-family: var(--font-neue-haas-grotesk-display-pro);
  }

  .cllctiv-md-p2,
  .cllctiv-md-p2-roman {
    font-size: var(--cllctiv-font-size-p2);
    line-height: var(--cllctiv-line-height-p2);
    letter-spacing: var(--cllctiv-letter-spacing-p2);
    font-family: var(--font-neue-haas-grotesk-display-pro);
  }

  .cllctiv-md-p3,
  .cllctiv-md-p3-roman {
    font-size: var(--cllctiv-font-size-p3);
    line-height: var(--cllctiv-line-height-p3);
    letter-spacing: var(--cllctiv-letter-spacing-p3);
    font-family: var(--font-neue-haas-grotesk-display-pro);
  }

  .cllctiv-md-p4,
  .cllctiv-md-p4-roman {
    font-size: var(--cllctiv-font-size-p4);
    line-height: var(--cllctiv-line-height-p4);
    letter-spacing: var(--cllctiv-letter-spacing-p4);
    font-family: var(--font-neue-haas-grotesk-display-pro);
  }

  .cllctiv-md-p5,
  .cllctiv-md-p5-roman {
    font-size: var(--cllctiv-font-size-p5);
    line-height: var(--cllctiv-line-height-p5);
    letter-spacing: var(--cllctiv-letter-spacing-p5);
    font-family: var(--font-neue-haas-grotesk-display-pro);
  }

  .cllctiv-md-p6,
  .cllctiv-md-p6-roman {
    font-size: var(--cllctiv-font-size-p6);
    line-height: var(--cllctiv-line-height-p6);
    letter-spacing: var(--cllctiv-letter-spacing-p6);
    font-family: var(--font-neue-haas-grotesk-display-pro);
  }

  .cllctiv-md-p1,
  .cllctiv-md-p2,
  .cllctiv-md-p3,
  .cllctiv-md-p4,
  .cllctiv-md-p5,
  .cllctiv-md-p6 {
    font-family: var(--font-neue-haas-grotesk-display-pro);
  }

  .cllctiv-md-p1-roman,
  .cllctiv-md-p2-roman,
  .cllctiv-md-p3-roman,
  .cllctiv-md-p4-roman,
  .cllctiv-md-p5-roman,
  .cllctiv-md-p6-roman {
    font-family: var(--font-neue-haas-grotesk-display-pro-roman);
  }

  .cllctiv-md-accent-1 {
    font-size: var(--cllctiv-font-size-accent-1);
    font-family: var(--font-warnock-pro);
  }

  .cllctiv-md-accent-2 {
    font-size: var(--cllctiv-font-size-accent-2);
    font-family: var(--font-warnock-pro);
  }

  .cllctiv-md-accent-3 {
    font-size: var(--cllctiv-font-size-accent-3);
    font-family: var(--font-warnock-pro);
  }

  .cllctiv-md-accent-4 {
    font-size: var(--cllctiv-font-size-accent-4);
    font-family: var(--font-warnock-pro);
  }
}

/* Styles for different breakpoints */
@media screen and (min-width: 1280px) {
  .cllctiv-lg-h1 {
    font-size: var(--cllctiv-font-size-h1);
    letter-spacing: var(--cllctiv-letter-spacing-h1);
    font-weight: var(--fw-700);
    font-family: var(--font-druk-wide);
  }

  .cllctiv-lg-h2 {
    font-size: var(--cllctiv-font-size-h2);
    font-weight: var(--fw-700);
    letter-spacing: var(--cllctiv-letter-spacing-h2);
    font-family: var(--font-druk-wide);
  }

  .cllctiv-lg-h3 {
    font-size: var(--cllctiv-font-size-h3);
    font-weight: var(--fw-700);
    letter-spacing: var(--cllctiv-letter-spacing-h3);
    font-family: var(--font-druk-wide);
  }

  .cllctiv-lg-h4 {
    font-size: var(--cllctiv-font-size-h4);
    font-weight: var(--fw-700);
    letter-spacing: var(--cllctiv-letter-spacing-h4);
    font-family: var(--font-druk-wide);
  }

  .cllctiv-lg-subheader-large {
    font-size: var(--cllctiv-font-size-subheader-large);
    font-weight: var(--fw-800);
    letter-spacing: var(--cllctiv-letter-spacing-subheader-large);
    font-family: var(--font-es-klarheit-plakat);
  }

  .cllctiv-lg-subheader-medium {
    font-size: var(--cllctiv-font-size-subheader-medium);
    font-weight: var(--fw-800);
    letter-spacing: var(--cllctiv-letter-spacing-subheader-medium);
    font-family: var(--font-es-klarheit-plakat);
  }

  .cllctiv-lg-subheader-small {
    font-size: var(--cllctiv-font-size-subheader-small);
    font-weight: var(--fw-800);
    letter-spacing: var(--cllctiv-letter-spacing-subheader-small);
    font-family: var(--font-es-klarheit-plakat);
  }

  .cllctiv-lg-p1,
  .cllctiv-lg-p1-roman {
    font-size: var(--cllctiv-font-size-p1);
    line-height: var(--cllctiv-line-height-p1);
    letter-spacing: var(--cllctiv-letter-spacing-p1);
  }

  .cllctiv-lg-p2,
  .cllctiv-lg-p2-roman {
    font-size: var(--cllctiv-font-size-p2);
    line-height: var(--cllctiv-line-height-p2);
    letter-spacing: var(--cllctiv-letter-spacing-p2);
  }

  .cllctiv-lg-p3,
  .cllctiv-lg-p3-roman {
    font-size: var(--cllctiv-font-size-p3);
    line-height: var(--cllctiv-line-height-p3);
    letter-spacing: var(--cllctiv-letter-spacing-p3);
  }

  .cllctiv-lg-p4,
  .cllctiv-lg-p4-roman {
    font-size: var(--cllctiv-font-size-p4);
    line-height: var(--cllctiv-line-height-p4);
    letter-spacing: var(--cllctiv-letter-spacing-p4);
  }

  .cllctiv-lg-p5,
  .cllctiv-lg-p5-roman {
    font-size: var(--cllctiv-font-size-p5);
    line-height: var(--cllctiv-line-height-p5);
    letter-spacing: var(--cllctiv-letter-spacing-p5);
  }

  .cllctiv-lg-p6,
  .cllctiv-lg-p6-roman {
    font-size: var(--cllctiv-font-size-p6);
    line-height: var(--cllctiv-line-height-p6);
    letter-spacing: var(--cllctiv-letter-spacing-p6);
  }

  .cllctiv-lg-p1,
  .cllctiv-lg-p2,
  .cllctiv-lg-p3,
  .cllctiv-lg-p4,
  .cllctiv-lg-p5,
  .cllctiv-lg-p6 {
    font-family: var(--font-neue-haas-grotesk-display-pro);
  }

  .cllctiv-lg-p1-roman,
  .cllctiv-lg-p2-roman,
  .cllctiv-lg-p3-roman,
  .cllctiv-lg-p4-roman,
  .cllctiv-lg-p5-roman,
  .cllctiv-lg-p6-roman {
    font-family: var(--font-neue-haas-grotesk-display-pro-roman);
  }

  .cllctiv-lg-accent-1 {
    font-size: var(--cllctiv-font-size-accent-1);
    font-family: var(--font-warnock-pro);
  }

  .cllctiv-lg-accent-2 {
    font-size: var(--cllctiv-font-size-accent-2);
    font-family: var(--font-warnock-pro);
  }

  .cllctiv-lg-accent-3 {
    font-size: var(--cllctiv-font-size-accent-3);
    font-family: var(--font-warnock-pro);
  }

  .cllctiv-lg-accent-4 {
    font-size: var(--cllctiv-font-size-accent-4);
    font-family: var(--font-warnock-pro);
  }
}

ul.cllctiv-list {
  padding-left: 20px;
}

/* Text color styles */
.cllctiv-text-primary {
  color: var(--color-primary) !important;
}

.cllctiv-text-secondary-1 {
  color: var(--color-secondary-1) !important;
}

.cllctiv-text-secondary-2 {
  color: var(--color-secondary-2) !important;
}

.cllctiv-text-secondary-3 {
  color: var(--color-secondary-3) !important;
}

.cllctiv-text-secondary-4 {
  color: var(--color-secondary-4) !important;
}

.cllctiv-text-error {
  color: var(--color-error) !important;
}

.cllctiv-text-error-secondary {
  color: var(--color-error-secondary) !important;
}

.cllctiv-text-links {
  color: var(--color-links) !important;
}

.cllctiv-text-primary-disabled {
  color: var(--color-primary-disabled) !important;
}

.cllctiv-text-secondary-disabled {
  color: var(--color-secondary-disabled) !important;
}

/* Disabled text color styles */
.cllctiv-text-primary:disabled {
  color: var(--color-primary-disabled) !important;
}

.cllctiv-text-secondary:disabled {
  color: var(--color-secondary-disabled) !important;
}

/* Background color styles */
.cllctiv-bg-primary {
  background-color: var(--color-primary) !important;
}

.cllctiv-bg-secondary-1 {
  background-color: var(--color-secondary-1) !important;
}

.cllctiv-bg-secondary-2 {
  background-color: var(--color-secondary-2) !important;
}

.cllctiv-bg-secondary-3 {
  background-color: var(--color-secondary-3) !important;
}

.cllctiv-bg-secondary-4 {
  background-color: var(--color-secondary-4) !important;
}

.cllctiv-bg-error {
  background-color: var(--color-error) !important;
}

.cllctiv-bg-error-secondary {
  background-color: var(--color-error-secondary) !important;
}

.cllctiv-bg-links {
  background-color: var(--color-links) !important;
}

.cllctiv-bg-primary-disabled {
  background-color: var(--color-primary-disabled) !important;
}

.cllctiv-bg-secondary-disabled {
  background-color: var(--color-secondary-disabled) !important;
}

/* Disabled text color styles */
.cllctiv-bg-primary:disabled {
  background-color: var(--color-primary-disabled) !important;
}

.cllctiv-bg-secondary:disabled {
  background-color: var(--color-secondary-disabled) !important;
}

.cllctiv-bg-sage {
  background-color: var(--color-sage) !important;
}


/* Border color styles */
.border {
  border: 1px solid #e0e0e0 !important;
}

.border {
  border: 1px solid #e0e0e0 !important;
}

.cllctiv-border {
  border-width: 1px;
  border-style: solid;
}

.cllctiv-border-primary {
  border-color: var(--color-primary) !important;
}

.cllctiv-border-secondary-1 {
  border-color: var(--color-secondary-1) !important;
}

.cllctiv-border-secondary-2 {
  border-color: var(--color-secondary-2) !important;
}

.cllctiv-border-secondary-3 {
  border-color: var(--color-secondary-3) !important;
}

.cllctiv-border-secondary-4 {
  border-color: var(--color-secondary-4) !important;
}

.cllctiv-outline-0 {
  outline: none;
}

.cllctiv-outline-0:hover {
  outline: none;
}

/* Disabled border color styles */
.cllctiv-border-primary:disabled {
  border-color: var(--color-primary-disabled) !important;
}

.cllctiv-border-secondary:disabled {
  border-color: var(--color-secondary-disabled) !important;
}

.cllctiv-border-primary-disabled {
  border-color: var(--color-primary-disabled) !important;
}

.cllctiv-border-secondary-disabled {
  border-color: var(--color-secondary-disabled) !important;
}



/* Sub brand color styles */
.cllctiv-text-subbrand-amplify {
  color: var(--color-subbrand-amplify) !important;
}

.cllctiv-text-subbrand-give {
  color: var(--color-subbrand-give) !important;
}

.cllctiv-text-subbrand-imagine {
  color: var(--color-subbrand-imagine) !important;
}

.cllctiv-text-subbrand-support-1 {
  color: var(--color-subbrand-support-1) !important;
}

.cllctiv-text-subbrand-support-2 {
  color: var(--color-subbrand-support-2) !important;
}

.cllctiv-text-subbrand-support-3 {
  color: var(--color-subbrand-support-3) !important;
}

.cllctiv-text-sage {
  color: var(--color-sage) !important;
}

/* Hover states for links */
a.cllctiv-text-primary:hover {
  color: var(--color-primary) !important;
}

a.cllctiv-text-secondary-1:hover {
  color: var(--color-secondary-1) !important;
}

a.cllctiv-text-secondary-2:hover {
  color: var(--color-secondary-2) !important;
}

a.cllctiv-text-secondary-3:hover {
  color: var(--color-secondary-3) !important;
}

a.cllctiv-text-secondary-4:hover {
  color: var(--color-secondary-4) !important;
}

a.cllctiv-text-secondary-4-faded:hover {
  color: var(--color-secondary-4-faded) !important;
}

a.cllctiv-text-error:hover {
  color: var(--color-error) !important;
}

a.cllctiv-text-error-secondary:hover {
  color: var(--color-error-secondary) !important;
}

a.cllctiv-text-links:hover {
  color: var(--color-links) !important;
}

a.cllctiv-text-subbrand-amplify:hover {
  color: var(--color-subbrand-amplify) !important;
}

a.cllctiv-text-subbrand-give:hover {
  color: var(--color-subbrand-give) !important;
}

a.cllctiv-text-subbrand-imagine:hover {
  color: var(--color-subbrand-imagine) !important;
}

a.cllctiv-text-subbrand-support-1:hover {
  color: var(--color-subbrand-support-1) !important;
}

a.cllctiv-text-subbrand-support-2:hover {
  color: var(--color-subbrand-support-2) !important;
}

a.cllctiv-text-subbrand-support-3:hover {
  color: var(--color-subbrand-support-3) !important;
}

a.cllctiv-text-sage:hover {
  color: var(--color-sage) !important;
}


/* Border radius */
.cllctiv-border-radius-1 {
  border-radius: var(--border-radius-1) !important;
}

.cllctiv-border-radius-2 {
  border-radius: var(--border-radius-2) !important;
}


/* Border */
.cllctiv-border {
  border: var(--border-width) solid var(--color-secondary-1);
}

.rounded-2 {
  border-radius: var(--spacing-2);
}


/* Main shadow */
.cllctiv-shadow {
  box-shadow: var(--cllctiv-box-shadow) !important;
}

.show-shadow-vertical {
  padding-block: 35px;
  margin-block: -35px;
}

.show-shadow-row {
  padding-inline: calc(35px - (var(--bs-gutter-x) / 2));
  padding-block: 35px;
  margin: -35px;
}

.media-card .icon-play-btn {
  width: 56px;
  height: 56px;
  align-self: end;
}

/* Scroll */

.no-scroll-bars {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.no-scroll-bars::-webkit-scrollbar {
  display: none;
}

/* Blur */
.cllctiv-blur {
  backdrop-filter: blur(25px);
}

.vh-100 {
  height: 100vh;
}


/* Flexbox styles */
.cllctiv-flexbox {
  display: flex;
  gap: var(--spacing-5);
}

@media screen and (max-width: 959.98px) {
  .cllctiv-md-flexbox {
    gap: var(--spacing-2);
  }
}

.cllctiv-page {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-7);
  margin-block: var(--spacing-7);
}

@media screen and (min-width: 960px) {
  .cllctiv-page {
    gap: var(--spacing-6);
    margin-block: var(--spacing-9);
  }
}

@media screen and (min-width: 1280px) {
  .cllctiv-page {
    gap: var(--spacing-7);
  }
}

.cllctiv-list-page {
  padding-block: var(--spacing-5);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-7);
}

@media screen and (min-width: 960px) {
  .cllctiv-list-page {
    padding-block: var(--spacing-9);
  }
}

@media screen and (min-width: 1280px) {
  .cllctiv-list-page {
    gap: var(--spacing-10);
  }
}

.cllctiv-generic-card-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-6);
}

.cllctiv-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
  margin-block: var(--spacing-7);
}

.cllctiv-section.add-padding-no-margin {
  margin-block: 0px;
  padding-block: var(--spacing-7);
}

@media screen and (min-width: 960px) {
  .cllctiv-section {
    gap: var(--spacing-6);
    margin-block: var(--spacing-9);
  }

  .cllctiv-section.add-padding-no-margin {
    padding-block: var(--spacing-9);
  }
}

@media screen and (min-width: 1280px) {
  .cllctiv-section {
    gap: var(--spacing-7);
    margin-block: var(--spacing-10);
  }

  .cllctiv-section.add-padding-no-margin {
    padding-block: var(--spacing-10);
  }
}

.cllctiv-section-card-grid-container {
  display: flex;
  gap: var(--spacing-5);
  overflow-x: scroll;
}
@media screen and (min-width: 960px) {
  .cllctiv-section-card-grid-container {
    display: grid;
    gap: var(--spacing-6);
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.cllctiv-container-xxl-y {
  padding-block: var(--spacing-5);
}

@media screen and (min-width: 960px) {
  .cllctiv-container-xxl-y {
    padding-block: var(--spacing-7);
  }
}

@media screen and (min-width: 1280px) {
  .cllctiv-container-xxl-y {
    padding-block: var(--spacing-9);
  }
}

.cllctiv-section .cllctiv-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-5);
  color: var(--color-primary);
  font-size: var(--cllctiv-font-size-subheader-small);
  line-height: var(--cllctiv-line-height-subheader-small);
  letter-spacing: var(--cllctiv-letter-spacing-subheader-small);
  font-family: var(--font-es-klarheit-plakat);
}

@media screen and (min-width: 960px) {
  .cllctiv-section .cllctiv-section-header {
    font-size: var(--cllctiv-font-size-subheader-large);
    line-height: var(--cllctiv-line-height-subheader-large);
    letter-spacing: var(--cllctiv-letter-spacing-subheader-large);
  }
}

.cllctiv-section-card-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

@media screen and (min-width: 960px) {
  .cllctiv-section-card-container {
    gap: var(--spacing-5);
  }
}

.edit-button {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: none;
  top: 0;
  right: 0;
  cursor: pointer;
  color: var(--color-secondary-1);
}

@media screen and (min-width: 960px) {
  .edit-button {
    display: inline-block;
  }
}

.blurred-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  backdrop-filter: blur(10px);
  /* Blur effect */
  max-width: 100%;
  /* Set a max width */
  margin: 0;
  /* Center the block */
  text-align: center;
}

.row.form-field-divider {
  --bs-gutter-x: var(--spacing-5);
  --bs-gutter-y: var(--spacing-2);
}


/* Button style */
.cllctiv-btn,
.cllctiv-rounded-btn {
  --bs-btn-padding-y: var(--spacing-4);
  --bs-btn-padding-x: var(--spacing-7);
  --bs-btn-border-width: var(--border-width);
  --bs-btn-border-radius: var(--border-radius-2);
  --bs-btn-font-size: 14px;
}

.cllctiv-btn {
  --bs-btn-font-weight: var(--fw-500);
  --bs-btn-font-family: var(--font-neue-haas-grotesk-display-pro);
  --bs-btn-line-height: 100%;
}

.cllctiv-rounded-btn {
  --bs-btn-font-weight: var(--fw-400);
  --bs-btn-font-family: var(--font-warnock-pro);
  --bs-btn-line-height: 100%;
}

.cllctiv-btn-icon {
  --bs-btn-padding-y: var(--spacing-3);
  --bs-btn-padding-x: var(--spacing-3);
  --bs-btn-border-width: 0;
  --bs-btn-border-radius: 50%;
}

.cllctiv-btn-icon.cllctiv-btn-primary {
  background-color: var(--color-secondary-3);
  color: var(--color-secondary-1);
}

.cllctiv-btn-icon.cllctiv-btn-primary-outline {
  background-color: transparent;
  color: var(--color-secondary-1);
  border: 1px solid var(--color-primary);
}

.cllctiv-btn-icon svg {
  height: var(--spacing-5);
  width: var(--spacing-5);
}

.cllctiv-rounded-btn {
  --bs-btn-border-radius: var(--border-radius-pill);
}

@media screen and (max-width: 1279.98px) {

  .cllctiv-btn,
  .cllctiv-rounded-btn {
    --bs-btn-padding-y: var(--spacing-3);
    --bs-btn-padding-x: var(--spacing-6);
  }
}

@media screen and (max-width: 959.98px) {

  .cllctiv-btn,
  .cllctiv-rounded-btn {
    --bs-btn-font-size: 12px;
    --bs-btn-padding-y: var(--spacing-3);
    --bs-btn-padding-x: var(--spacing-5);
  }

  .cllctiv-btn-icon {
    --bs-btn-padding-y: var(--spacing-2);
    --bs-btn-padding-x: var(--spacing-2);
  }
}

/* Button styles */
.cllctiv-btn.cllctiv-btn-primary {
  --bs-btn-color: var(--color-secondary-4) !important;
  --bs-btn-bg: var(--color-secondary-1);
  --bs-btn-border-color: var(--color-secondary-1);
  --bs-btn-hover-color: var(--color-secondary-1);
  --bs-btn-hover-bg: var(--color-secondary-disabled);
  --bs-btn-hover-border-color: var(--color-secondary-disabled);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: var(--color-secondary-1);
  --bs-btn-active-bg: var(--color-secondary-disabled);
  --bs-btn-active-border-color: var(--color-secondary-disabled);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--color-secondary-4);
  --bs-btn-disabled-bg: var(--color-secondary-disabled);
  --bs-btn-disabled-border-color: var(--color-secondary-disabled);
}

.cllctiv-btn.cllctiv-btn-primary.destructive {
  --bs-btn-color: var(--color-error-secondary) !important;
  --bs-btn-bg: var(--color-error);
  --bs-btn-border-color: var(--color-error);
  --bs-btn-hover-color: var(--color-error-secondary);
  --bs-btn-hover-bg: var(--color-error);
  --bs-btn-hover-border-color: var(--color-error);
  --bs-btn-active-color: var(--color-error-secondary);
  --bs-btn-active-bg: var(--color-error);
  --bs-btn-active-border-color: var(--color-error);
}

.cllctiv-btn.cllctiv-btn-secondary {
  --bs-btn-color: var(--color-secondary-1) !important;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--color-secondary-1);
  --bs-btn-hover-color: var(--color-secondary-1);
  --bs-btn-hover-bg: var(--color-secondary-disabled);
  --bs-btn-hover-border-color: var(--color-secondary-1);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: var(--color-secondary-1);
  --bs-btn-active-bg: var(--color-secondary-disabled);
  --bs-btn-active-border-color: var(--color-secondary-1);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--color-secondary-disabled);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--color-secondary-disabled);
}

.cllctiv-btn.cllctiv-btn-secondary.destructive {
  --bs-btn-color: var(--color-error) !important;
  --bs-btn-border-color: var(--color-error);
  --bs-btn-hover-color: var(--color-error);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--color-error);
  --bs-btn-active-color: var(--color-error);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: var(--color-error);
}

.cllctiv-btn.cllctiv-btn-tertiary {
  --bs-btn-color: var(--color-secondary-1) !important;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--color-secondary-1);
  --bs-btn-hover-bg: var(--color-secondary-3);
  --bs-btn-hover-border-color: var(--color-secondary-3);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: var(--color-secondary-1);
  --bs-btn-active-bg: var(--color-secondary-3);
  --bs-btn-active-border-color: var(--color-secondary-3);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--color-secondary-disabled);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: transparent;
}

.cllctiv-btn.cllctiv-btn-tertiary.destructive {
  --bs-btn-color: var(--color-error) !important;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--color-error);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--color-error);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: transparent;
}

.cllctiv-btn.cllctiv-btn-link {
  --bs-btn-color: var(--color-links) !important;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--color-links);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: var(--color-links);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--color-links);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: transparent;
  text-decoration: underline;
}

/* @media (prefers-color-scheme: dark) {
    .cllctiv-btn.cllctiv-btn-primary {
        --bs-btn-color: var(--color-secondary-1) !important;
        --bs-btn-bg: var(--color-secondary-4);
        --bs-btn-border-color: var(--color-secondary-4);
        --bs-btn-hover-color: var(--color-secondary-1);
        --bs-btn-hover-bg: var(--color-secondary-3);
        --bs-btn-hover-border-color: var(--color-secondary-3);
        --bs-btn-focus-shadow-rgb: 49, 132, 253;
        --bs-btn-active-color: var(--color-secondary-1);
        --bs-btn-active-bg: var(--color-secondary-3);
        --bs-btn-active-border-color: var(--color-secondary-3);
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: var(--color-secondary-disabled);
        --bs-btn-disabled-bg: var(--color-secondary-4-faded);
        --bs-btn-disabled-border-color: var(--color-secondary-4-faded);
    }
    .cllctiv-btn.cllctiv-btn-primary.destructive {
        --bs-btn-color: var(--color-error) !important;
        --bs-btn-bg: var(--color-error-secondary);
        --bs-btn-border-color: var(--color-error-secondary);
        --bs-btn-hover-color: var(--color-error);
        --bs-btn-hover-bg: var(--color-error-secondary);
        --bs-btn-hover-border-color: var(--color-error-secondary);
        --bs-btn-active-color: var(--color-error);
        --bs-btn-active-bg: var(--color-error-secondary);
        --bs-btn-active-border-color: var(--color-error-secondary);
    }
    .cllctiv-btn.cllctiv-btn-secondary {
        --bs-btn-color: var(--color-secondary-4) !important;
        --bs-btn-bg: transparent;
        --bs-btn-border-color: var(--color-secondary-4);
        --bs-btn-hover-color: var(--color-secondary-3);
        --bs-btn-hover-bg: var(--color-secondary-4-faded);
        --bs-btn-hover-border-color: var(--color-secondary-3);
        --bs-btn-focus-shadow-rgb: 49, 132, 253;
        --bs-btn-active-color: var(--color-secondary-3);
        --bs-btn-active-bg: var(--color-secondary-4-faded);
        --bs-btn-active-border-color: var(--color-secondary-3);
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: var(--color-secondary-4-faded);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: var(--color-secondary-4-faded);
    }
    .cllctiv-btn.cllctiv-btn-secondary.destructive {
        --bs-btn-color: var(--color-error) !important;
        --bs-btn-border-color: var(--color-error);
        --bs-btn-hover-color: var(--color-error);
        --bs-btn-hover-bg: transparent;
        --bs-btn-hover-border-color: var(--color-error);
        --bs-btn-active-color: var(--color-error);
        --bs-btn-active-bg: transparent;
        --bs-btn-active-border-color: var(--color-error);
    }
    .cllctiv-btn.cllctiv-btn-tertiary {
        --bs-btn-color: var(--color-secondary-4) !important;
        --bs-btn-bg: transparent;
        --bs-btn-border-color: transparent;
        --bs-btn-hover-color: var(--color-secondary-3);
        --bs-btn-hover-bg: var(--color-secondary-4-faded);
        --bs-btn-hover-border-color: var(--color-secondary-4-faded);
        --bs-btn-focus-shadow-rgb: 49, 132, 253;
        --bs-btn-active-color: var(--color-secondary-3);
        --bs-btn-active-bg: var(--color-secondary-4-faded);
        --bs-btn-active-border-color: var(--color-secondary-4-faded);
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: var(--color-secondary-4);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: transparent;
    }
    .cllctiv-btn.cllctiv-btn-tertiary.destructive {
        --bs-btn-color: var(--color-error) !important;
        --bs-btn-border-color: transparent;
        --bs-btn-hover-color: var(--color-error);
        --bs-btn-hover-bg: transparent;
        --bs-btn-hover-border-color: transparent;
        --bs-btn-active-color: var(--color-error);
        --bs-btn-active-bg: transparent;
        --bs-btn-active-border-color: transparent;
    }
} */


/* Rounded button styles */
.cllctiv-rounded-btn.cllctiv-btn-primary {
  --bs-btn-color: var(--color-secondary-4) !important;
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-secondary-1);
  --bs-btn-hover-bg: var(--color-primary-disabled);
  --bs-btn-hover-border-color: var(--color-primary-disabled);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: var(--color-secondary-1);
  --bs-btn-active-bg: var(--color-primary-disabled);
  --bs-btn-active-border-color: var(--color-primary-disabled);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--color-secondary-4);
  --bs-btn-disabled-bg: var(--color-primary-disabled);
  --bs-btn-disabled-border-color: var(--color-primary-disabled);
}

.cllctiv-rounded-btn.cllctiv-btn-secondary {
  --bs-btn-color: var(--color-primary) !important;
  --bs-btn-bg: var(--color-secondary-4);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-secondary-1);
  --bs-btn-hover-bg: var(--color-primary-disabled);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: var(--color-secondary-1);
  --bs-btn-active-bg: var(--color-primary-disabled);
  --bs-btn-active-border-color: var(--color-primary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--color-primary-disabled);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--color-primary-disabled);
}

.cllctiv-btn svg:first-of-type,
.cllctiv-rounded-btn svg:first-of-type {
  margin-left: -8px;
}

.cllctiv-btn svg:last-of-type,
.cllctiv-rounded-btn svg:last-of-type {
  margin-left: -8px;
}

.navigation-btn {
  flex-shrink: 0;
  flex-grow: 0;
  padding: var(--spacing-2);
  color: var(--color-secondary-4);
  background-color: var(--color-primary);
  border-radius: var(--border-radius-circle);
  line-height: 0;
}

.navigation-btn svg {
  width: 24px;
  height: 24px;
}

.navigation-btn:disabled {
  color: var(--color-primary);
  border: var(--border-width) solid var(--color-primary);
  background-color: transparent;
}

@media screen and (min-width: 960px) {
  .navigation-btn svg {
    width: 32px;
    height: 32px;
  }
}


/* Edit button */
.edit-btn {
  width: 48px;
  height: 48px;
  display: none;
  justify-content: center;
  align-items: center;
  border-radius: var(--border-radius-circle);
  color: var(--primary);
  background-color: transparent;
  appearance: none;
  border: none;
  top: 0;
  right: 0;
  cursor: pointer;
}

.edit-btn.disabled,
.edit-btn:disabled {
  opacity: 0.6;
}

.edit-btn::before {
  content: "";
  display: inline-block;
  background-image: var(--icon-pencil);
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  flex-grow: 0;
  flex-shrink: 0;
}

.edit-btn.background {
  background-color: var(--color-secondary-3);
}

.edit-btn.border {
  border: var(--border-width) solid var(--color-primary);
}

@media screen and (min-width: 1280px) {
  .edit-btn {
    display: inline-flex;
  }
}


/* Close button style */
.btn-close.btn-close-style {
  width: 8px;
  height: 8px;
  color: var(--color-primary);
  padding: 0px;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2311540D'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

.btn-close.remove-image {
  position: absolute;
  top: var(--spacing-2);
  right: var(--spacing-2);
  padding: var(--spacing-2);
  border-radius: var(--border-radius-circle);
  background-color: var(--color-secondary-3);
  width: 40px;
  height: 40px;
  background-size: var(--spacing-4);
  box-sizing: border-box;
  opacity: 0.75;
  cursor: pointer;
}

.btn-close.remove-image:hover {
  opacity: 1;
}


/* Checkbox and radio styles */
.checkbox-parent,
.radio-parent {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-inline: var(--spacing-2);
}

.checkbox-parent label,
.radio-parent label {
  font-family: var(--font-neue-haas-grotesk-display-pro-roman);
  font-size: var(--cllctiv-font-size-p4);
  line-height: var(--cllctiv-line-height-p4);
  letter-spacing: var(--cllctiv-letter-spacing-p4);
  color: var(--color-secondary-1);
}

input[type="checkbox"]:checked+label,
input[type="radio"]:checked+label {
  font-family: var(--font-neue-haas-grotesk-display-pro);
}

input[type="checkbox"]:disabled+label,
input[type="radio"]:disabled+label {
  color: var(--color-secondary-disabled);
}

input[type="checkbox"],
input[type="radio"] {
  width: 17px;
  height: 17px;
  border: 2px solid var(--color-primary);
}

.form-check-input {
  margin: 0px;
}

.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.form-check-input:focus {
  outline: none;
  box-shadow: none;
  border-color: var(--color-primary);
}

.switch {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 32px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.switch .switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-secondary-1);
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: var(--border-radius-pill);
}

.switch .switch-slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 4px;
  bottom: 4px;
  background-color: var(--color-secondary-3);
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: var(--border-radius-pill);
}

.switch input:checked+.switch-slider {
  background-color: var(--color-primary);
}

.switch input:checked+.switch-slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
  border-radius: var(--border-radius-pill);
}

.switch input:disabled+.switch-slider {
  background-color: var(--color-secondary-disabled);
}


/* Text input styles */
.text-input,
.search-input,
.select-input {
  --font-size: var(--cllctiv-font-size-p3);
  --line-height: var(--cllctiv-line-height-p3);
  padding-inline: var(--spacing-4);
  padding-block: var(--spacing-2);
  border: none;
  border-bottom: var(--border-width) solid var(--color-secondary-disabled);
  font-family: var(--font-neue-haas-grotesk-display-pro);
  font-size: var(--font-size);
  line-height: var(--line-height);
  transition: border-color 0.2s ease;
  background-color: transparent;
  color: var(--color-secondary-1);
}

.text-input:focus,
.search-input:focus {
  outline: none;
  border-bottom-color: var(--color-secondary-1);
}

.text-input-outline {
  --font-size: var(--cllctiv-font-size-p3);
  --line-height: var(--cllctiv-line-height-p3);
  padding-inline: var(--spacing-4);
  padding-block: var(--spacing-2);
  border: var(--border-width) solid var(--color-secondary-disabled);
  border-radius: var(--spacing-1);
  font-family: var(--font-neue-haas-grotesk-display-pro);
  font-size: var(--font-size);
  line-height: var(--line-height);
  transition: border-color 0.2s ease;
  background-color: transparent;
  color: var(--color-secondary-1);
}

.text-input-outline:focus {
  outline: none;
  border: var(--border-width) solid var(--color-secondary-1);
}

.text-input::placeholder,
.text-input-outline::placeholder {
  font-size: inherit;
  color: var(--color-secondary-disabled);
}


/* Select input style */
.select-input {
  appearance: none;
  background-color: transparent;
  background-image: var(--icon-chevron-down-filled);
  background-repeat: no-repeat;
  background-position: right 0rem center;
  background-size: 24px 24px;
  padding-right: var(--spacing-4);
}

.code-parent {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.code-inputs {
  flex: 0;
  display: flex;
  align-items: center;
}

.code-box {
  width: 80px;
  height: 80px;
  font-size: 36px;
  font-weight: var(--fw-700);
  letter-spacing: var(--letter-spacing-minus-1);
  font-family: var(--font-es-klarheit-plakat);
  border: var(--border-width) solid var(--color-secondary-1);
  outline: none;
  box-sizing: border-box;
  padding: var(--spacing-3);
  text-align: center;
  background-color: transparent;

}

.code-box:first-of-type {
  border-top-left-radius: var(--spacing-2);
  border-bottom-left-radius: var(--spacing-2);
}

.code-box:last-of-type {
  border-top-right-radius: var(--spacing-2);
  border-bottom-right-radius: var(--spacing-2);
}

.code-box:not(:first-of-type):not(:last-of-type) {
  border-left: none;
  border-right: none;
}

.code-box.error {
  border-color: var(--color-error);
}

.error-box,
.help-text {
  display: block;
  margin-top: var(--spacing-1);
  font-family: var(--font-neue-haas-grotesk-display-pro-roman);
  font-size: var(--cllctiv-font-size-p5);
  line-height: var(--cllctiv-line-height-p5);
  letter-spacing: var(--cllctiv-letter-spacing-p5);
  color: var(--color-error);
  padding-inline: var(--spacing-4);
}

.help-text {
  color: var(--color-secondary-1);
}

@media screen and (max-width: 959.98px) {
  .code-parent {
    gap: var(--spacing-2);
  }

  .code-box {
    width: 48px;
    height: 80px;
    font-size: 24px;
  }
}

.input-field {
  display: flex;
  width: 100%;
  padding-inline: var(--spacing-4);
  padding-block: var(--spacing-2);
  font-size: var(--cllctiv-font-size-p3);
  font-weight: var(--fw-500);
  line-height: var(--cllctiv-line-height-p3);
  color: var(--color-secondary-1);
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--color-secondary-1);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  appearance: none;
  align-items: center;
  gap: var(--spacing-1);
  height: 56px;
}

.input-field input {
  background-color: transparent;
  border: 0px solid transparent;
}

.input-field:focus {
  --input-field-border-color: #1a1a1a;
}

.input-field:disabled {
  --input-field-border-color: #b0b0b0;
  --input-field-color: #b0b0b0;
}

.input-field-wrapper {
  display: flex;
  align-items: center;
  padding-inline: var(--spacing-4);
  padding-block: var(--spacing-2);
  border: none;
  border-bottom: var(--border-width) solid var(--color-secondary-disabled);
  font-family: var(--font-neue-haas-grotesk-display-pro);
  font-size: 16px;
  line-height: 21px;
  transition: border-color 0.2s ease;
}

.input-field-icon-box {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.input-field-wrapper:focus-within {
  outline: none;
  border-bottom-color: var(--color-secondary-1);
}

.input-field-wrapper input {
  background-color: transparent;
}


/* This class is for password field */
.password-input,
.wrapped-input-field {
  flex: 1 1 auto;
  border: none;
  outline: none;
  background-color: transparent;
}

.password-input::placeholder,
.wrapped-input-field::placeholder {
  font-size: 16px;
  line-height: 21px;
  color: var(--color-secondary-disabled);
}


/* Alert box styles */
.alert-style {
  --cllctiv-alert-bg-color: var(--color-secondary-4);
  --cllctiv-alert-border-color: var(--color-secondary-disabled);
  --cllctiv-alert-color: var(--color-secondary-1);
  padding-inline: var(--spacing-2);
  padding-block: var(--spacing-3);
  background-color: var(--cllctiv-alert-bg-color);
  border: var(--border-width) solid var(--cllctiv-alert-border-color);
  color: var(--cllctiv-alert-color);
}

.alert-style.alert-icon {
  padding-right: var(--spacing-4);
}

.alert-icon {
  --bs-alert-icon-url: var(--icon-info);
  padding-left: calc(var(--spacing-2) + 48px + 4px);
  background-image: var(--bs-alert-icon-url);
  background-repeat: no-repeat;
  background-position: 20px 9px;
  background-size: 24px;
}

.alert-error {
  --cllctiv-alert-bg-color: var(--color-error-secondary);
  --cllctiv-alert-border-color: var(--color-error);
  --cllctiv-alert-color: var(--color-error);
}

.alert-success {
  --cllctiv-alert-bg-color: var(--color-secondary-4);
  --cllctiv-alert-border-color: var(--color-primary-disabled);
  --cllctiv-alert-color: var(--color-primary);
}

.alert-highlight-dark {
  --cllctiv-alert-bg-color: var(--color-primary);
  --cllctiv-alert-border-color: var(--color-primary-disabled);
  --cllctiv-alert-color: var(--color-secondary-4);
}

.alert-highlight-light {
  --cllctiv-alert-bg-color: var(--color-secondary-3);
  --cllctiv-alert-border-color: var(--color-primary);
  --cllctiv-alert-color: var(--color-primary);
}

/* .alert-error {
    --cllctiv-alert-bg-color: var(--color-secondary-3);
    --cllctiv-alert-border-color: var(--color-primary-disabled);
    --cllctiv-alert-color: var(--color-primary);
} */


/* Tooltip styles */
.tooltip {
  --bs-tooltip-padding-x: var(--spacing-2);
  --bs-tooltip-padding-y: var(--spacing-2);
  --bs-tooltip-border-radius: var(--border-radius-1);
  --bs-tooltip-bg: var(--color-secondary-3);
  --bs-tooltip-color: var(--color-secondary-1);
  --bs-tooltip-max-width: 240px;
  font-family: Neue Haas Grotesk Display Pro;
  font-weight: 450;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: var(--letter-spacing-1);
  text-align: center;
  min-width: 120px;
}


/* Notification */
.notification-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-6);
  padding: var(--spacing-5);
  background-color: var(--color-secondary-4);
  border: var(--border-width) solid var(--color-secondary-disabled);
  border-radius: var(--border-radius-2);
}

.notification-card .notification-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-2);
}

@media screen and (max-width: 959.98px) {
  .notification-card {
    flex-direction: column;
    align-items: start;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
  }

  .notification-card .notification-cta {
    flex-wrap: wrap;
    justify-content: start;
  }
}

.notification-card.full-width-notification {
  padding-inline: 0px;
  padding-block: var(--spacing-5);
  border: 0px;
  border-radius: 0px;
  background-color: transparent;
}

@media screen and (min-width: 960px) {
  .notification-card.full-width-notification {
    padding-block: var(--spacing-7);
  }
}

/* Wizard */
.wizard-parent-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.wizard {
  flex-grow: 1;
  height: 24px;
  text-decoration: none;
}

.wizard-label {
  color: var(--color-secondary-disabled);
  margin-bottom: var(--spacing-1);
  padding-bottom: 3px;
  text-decoration: none;
}

.wizard-line {
  height: 4px;
  border-radius: var(--border-radius-pill);
  background-color: var(--color-secondary-disabled);
}

.wizard.active .wizard-label {
  font-weight: 600;
  color: var(--color-secondary-1);
}

.wizard.active .wizard-line {
  background-color: var(--color-secondary-1);
}


/* Segment styles */
#profileContentContainer {
  position: relative;
}

#progress-container-trigger {
  position: fixed;
  top: calc(100% - 80px);
  left: 0;
  right: 0;
  z-index: 1030;
  padding: 20px;
}

#dynamic-progress {
  background-color: var(--color-primary);
  /* transition: width 0.5s ease-in-out; */
  /* -webkit-mask: linear-gradient(to right, black var(--progress, 0%), transparent 0);
    mask: linear-gradient(to right, black var(--progress, 0%), transparent 0); */
}

.segment-group {
  width: 100%;
  display: flex;
  overflow: hidden;
  background-color: var(--color-secondary-3);
  border-radius: var(--border-radius-pill);
}

.segment {
  height: 40px;
  flex: 1 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  color: rgb(54, 32, 13);
  /* base brown */
  cursor: pointer;
  transition: background-color 0.3s;
  text-decoration: none;
  position: relative;
  /* needed for ::before overlay */
  z-index: 2;
  /* keep text above the bar */
}

.segment::before {
  content: attr(data-text);
  /* duplicate same text */
  position: absolute;
  inset: 0;
  /* top:0; right:0; bottom:0; left:0 */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  white-space: nowrap;
  pointer-events: none;
  /* don’t block clicks */

  /* Reveal only as progress fills */
  -webkit-mask: linear-gradient(to right, black var(--segment-progress, 0%), transparent 0);
  mask: linear-gradient(to right, black var(--segment-progress, 0%), transparent 0);
}

/* .segment.active {
    color: #fff;
    font-weight: 600;
    border-top-right-radius: var(--border-radius-pill);
    border-bottom-right-radius: var(--border-radius-pill);
}
.segment.active:last-child {
    border-top-right-radius: var(--border-radius-pill);
    border-bottom-right-radius: var(--border-radius-pill);
} */

/* Breadcrumb styles */
.breadcrumb {
  --bs-breadcrumb-divider: var(--icon-breadcrumb-divider);
}

.cllctiv-breadcrumb-item {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--color-secondary-disabled);
  font-weight: var(--fw-450);
}

.cllctiv-breadcrumb-item a {
  padding-inline: var(--spacing-2);
  text-decoration: none;
  color: var(--color-secondary-disabled);
  font-size: var(--cllctiv-font-size-p5);
  line-height: var(--cllctiv-line-height-p5);
  letter-spacing: var(--cllctiv-letter-spacing-p5);
  font-family: var(--font-neue-haas-grotesk-display-pro-roman);
  text-wrap: nowrap;
}

.cllctiv-breadcrumb-item:first-child a {
  padding-left: 0px;
}

.cllctiv-breadcrumb-item:last-child a {
  padding-right: 0px;
}

.cllctiv-breadcrumb-item.active {
  font-weight: 600;
  color: var(--color-secondary-1);
}

.cllctiv-breadcrumb-item.active a {
  color: var(--color-secondary-1);
  font-family: var(--font-neue-haas-grotesk-display-pro);
}


/* Tag styles */
.tag {
  display: inline-block;
  padding-inline: var(--spacing-2);
  align-content: center;
  border: var(--border-width) solid #000;
  font-size: 10px;
  line-height: 13px;
  letter-spacing: var(--letter-spacing-minus-1);
  font-family: var(--font-neue-haas-grotesk-display-pro);
  text-align: center;
  font-weight: var(--fw-500);
  height: 20px;
  box-sizing: border-box;
  text-decoration: none;
  text-wrap: nowrap;
}

.tag.disabled,
.tag:disabled {
  opacity: 0.7;
}

.tag.pill {
  border-radius: var(--border-radius-pill);
}

.tag.rectangular {
  border-radius: var(--border-radius-1);
}

.tag-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary-disabled);
}

.tag-outline-destructive {
  color: var(--color-error);
  background-color: var(--color-secondary-4);
  border: var(--no-border-width) solid #000;
}

.tag-filled-primary {
  color: #fff;
  background-color: var(--color-primary);
  border: var(--no-border-width) solid #000;
}

.tag-filled-primary-disabled {
  color: #fff;
  background-color: var(--color-primary-disabled);
  border: var(--no-border-width) solid #000;
}

.tag-filled-secondary {
  color: #000;
  background-color: var(--color-secondary-2);
  border: var(--no-border-width) solid #000;
}

.tag-filled-tertiary {
  color: var(--color-secondary-1);
  background-color: var(--color-secondary-4);
  border-color: var(--color-secondary-1);
}

.tag-filled-destructive {
  color: #fff;
  background-color: var(--color-error);
  border: var(--no-border-width) solid #000;
}


/* Chip styles */
.chip-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  height: 32px;
  padding-inline: var(--spacing-4);
  padding-block: var(--spacing-2);
  border-radius: var(--border-radius-pill);
  border: var(--border-width) solid var(--color-primary-disabled);
  font-size: var(--cllctiv-font-size-p5);
  line-height: var(--cllctiv-line-height-p5);
  letter-spacing: var(--cllctiv-letter-spacing-p5);
  color: var(--color-primary);
  font-family: var(--font-neue-haas-grotesk-display-pro);
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  text-wrap: nowrap;
}

.chip:has(input[type="checkbox"])>.btn-close,
.chip:has(input[type="radio"])>.btn-close {
  display: none;
}

.chip:has(input[type="checkbox"]:checked)>.btn-close,
.chip:has(input[type="radio"]:checked)>.btn-close {
  display: inline-block;
}

input[type="checkbox"]:checked+.chip,
input[type="radio"]:checked+.chip {
  border-color: var(--color-primary);
}
.chip.active {
  border-color: var(--color-primary);
}

.chip:has(input[type="checkbox"]:checked),
.chip:has(input[type="radio"]:checked) {
  border-color: var(--color-primary);
}

.chip.disabled,
.chip:disabled {
  opacity: 0.7;
}

.chip.filter {
  padding-right: var(--spacing-2);
}

.chip.filter::after {
  content: var(--icon-chevron-down-filled);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.chip.input:has(input[type="checkbox"]:checked),
.chip.input:has(input[type="radio"]:checked) {
  padding-right: var(--spacing-2);
}

.chip.input-user {
  padding-inline: var(--spacing-2);
}

.chip.input-user::before {
  content: var(--icon-user);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  width: 16px;
}

.chip.assist {
  padding-left: var(--spacing-2);
}

.chip.assist::before {
  content: var(--icon-assist);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


.cllctiv-badge {
  position: relative;
  display: inline-block;
}

.cllctiv-badge::before {
  --cllctiv-badge-top: 0px;
  --cllctiv-badge-left: 0px;
  --cllctiv-badge-color: var(--color-primary);
  --cllctiv-badge-transform-x: -50%;
  --cllctiv-badge-transform-y: -50%;
  --cllctiv-badge-border-color: var(--color-primary);
  content: '';
  position: absolute;
  top: var(--cllctiv-badge-top);
  left: var(--cllctiv-badge-left);
  width: 8px;
  height: 8px;
  border-radius: var(--border-radius-circle);
  border: var(--border-width) solid var(--cllctiv-badge-border-color);
  background-color: var(--cllctiv-badge-color);
  transform: translate(var(--cllctiv-badge-transform-x), var(--cllctiv-badge-transform-y));
  z-index: 1000;
  text-decoration: none;
}

.cllctiv-badge.dot {
  content: '';
}

.cllctiv-badge.dot.updates::before {
  --cllctiv-badge-border-color: var(--color-error);
  --cllctiv-badge-top: 0px;
  --cllctiv-badge-left: 100%;
  --cllctiv-badge-color: var(--color-error);
}

.cllctiv-badge.dot.offline::before {
  --cllctiv-badge-top: 31px;
  --cllctiv-badge-left: 34px;
  --cllctiv-badge-border-color: var(--color-secondary-disabled);
  --cllctiv-badge-color: var(--color-secondary-4);
}

.cllctiv-badge.dot.online::before {
  --cllctiv-badge-top: 31px;
  --cllctiv-badge-left: 34px;
}

.cllctiv-badge.text {
  padding: 0px;
}

.cllctiv-badge.text::before {
  --cllctiv-badge-border-color: var(--color-error);
  --cllctiv-badge-top: 2px;
  --cllctiv-badge-left: 100%;
  --cllctiv-badge-color: var(--color-error);
  content: attr(data-text);
  min-width: 16px;
  width: auto;
  height: 16px;
  border-radius: var(--border-radius-2);
  padding-inline: 2px;
  font-size: 10px;
  letter-spacing: 2.5%;
  line-height: 120%;
  font-family: var(--font-es-klarheit-plakat);
  text-align: center;
  color: #fff;
}

.cllctiv-badge.hide::before {
  display: none;
}

.cllctiv-badge.icon::before {
  --cllctiv-badge-top: 31px;
  --cllctiv-badge-left: 34px;
  content: var(--icon-green-tick-circle);
  width: 20px;
  height: 20px;
}

.media-uploader {
  --cllctiv-media-uploader-padding-x: 0px;
  --cllctiv-media-uploader-padding-y: 0px;
  --cllctiv-media-uploader-gap: var(--spacing-4);
  --cllctiv-media-uploader-border-radius: var(--border-radius-2);
  --cllctiv-media-uploader-border-color: var(--color-secondary-1);
  --cllctiv-media-uploader-font-size: 16px;
  --cllctiv-media-uploader-color: var(--color-secondary-1);
  --cllctiv-media-uploader-bg-color: var(--color-secondary-3);
  padding-inline: var(--cllctiv-media-uploader-padding-x);
  padding-block: var(--cllctiv-media-uploader-padding-y);
  background-color: var(--cllctiv-media-uploader-bg-color);
  display: inline-flex;
  flex-direction: column;
  gap: var(--cllctiv-media-uploader-gap);
  justify-content: center;
  align-items: center;
  border: var(--border-width) dashed var(--cllctiv-media-uploader-border-color);
  border-radius: var(--cllctiv-media-uploader-border-radius);
  font-size: var(--cllctiv-media-uploader-font-size);
  letter-spacing: 2.5%;
  font-family: var(--font-neue-haas-grotesk-display-pro);
  color: var(--cllctiv-media-uploader-color);
  font-weight: bold;
  text-align: center;
}

.media-uploader.drag {
  --cllctiv-media-uploader-padding-x: var(--spacing-4);
  --cllctiv-media-uploader-padding-y: var(--spacing-7);
}

.media-uploader.drag::before {
  content: var(--icon-cloud-upload);
}

.media-uploader.drag::after {
  content: attr(data-supported-format);
  font-size: 12px;
  font-weight: normal;
}

.media-uploader.browse {
  --cllctiv-media-uploader-padding-x: var(--spacing-5);
  --cllctiv-media-uploader-padding-y: var(--spacing-5);
  --cllctiv-media-uploader-gap: 0px;
  aspect-ratio: 1;
}

.media-uploader.browse::before {
  content: var(--icon-plus);
}


/* Navbar style */
#cllctivNavbarContainer {
  position: sticky;
  top: 0;
  background-color: var(--color-secondary-4);
  font-family: var(--font-neue-haas-grotesk-display-pro);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05), 0px 0px 35px 0px rgba(0, 0, 0, 0.08);
  z-index: 1000;
}

.cllctiv-nav-item {
  display: inline-flex;
  width: 100%;
  height: 48px;
  align-items: center;
  cursor: pointer;
}

.cllctiv-navbar-nav,
.cllctiv-nav-link,
.cllctiv-admin-nav-link {
  --bs-nav-link-padding-x: 0px;
  --bs-nav-link-padding-y: 0px;
  --bs-nav-link-font-weight: var(--fw-800);
  font-size: var(--cllctiv-font-size-subheader-medium);
  line-height: var(--cllctiv-line-height-subheader-medium);
  letter-spacing: var(--cllctiv-letter-spacing-subheader-medium);
  font-weight: var(--fw-500);
  font-family: var(--font-neue-haas-grotesk-display-pro);
}
.cllctiv-navbar-nav,
.cllctiv-nav-link {
  --bs-nav-link-hover-color: var(--color-secondary-2);
  color: var(--color-primary);
}
.cllctiv-nav-link.current {
  color: var(--color-secondary-1);
}
.cllctiv-admin-nav-link {
  color: var(--color-secondary-4);
}

.cllctiv-navbar {
  --bs-navbar-padding-x: var(--spacing-4);
  --bs-navbar-padding-y: 0px;
  padding-top: var(--spacing-4);
  --bs-navbar-color: var(--color-primary);
  align-items: start;
}

.cllctiv-navbar-nav,
.cllctiv-navbar-nav-right {
  font-size: 16px;
  line-height: 21px;
  letter-spacing: var(--letter-spacing-1);
  font-weight: var(--fw-500);
  font-family: var(--font-neue-haas-grotesk-display-pro);
}

.cllctiv-navbar-nav {
  gap: var(--spacing-2);
  padding-block: var(--spacing-5);
}

@media screen and (max-width: 1279.99px) {
  .cllctiv-navbar-nav {
    width: 100vw;
    margin-inline: calc(-50vw + 50%);
    padding-inline: var(--spacing-7);
    background-color: var(--color-secondary-3);
  }
}

@media screen and (max-width: 959.99px) {
  .cllctiv-navbar-nav {
    padding-inline: var(--spacing-4);
  }
}

.cllctiv-navbar-nav-right {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: var(--spacing-4);
  margin-inline-start: auto;
  color: var(--color-secondary-1);
}

.cllctiv-navbar-toggler {
  --bs-border-width: 0px;
  --bs-navbar-toggler-padding-x: 0px;
  --bs-navbar-toggler-padding-y: 0px;
}

.cllctiv-navbar-collapse {
  width: 100vw;
  margin-inline: calc(-1 * var(--spacing-4));
}

@media screen and (min-width: 960px) {
  .cllctiv-navbar-collapse {
    margin-inline: calc(-1 * var(--spacing-7));
  }
}

@media screen and (min-width: 1280px) {
  .cllctiv-navbar-collapse {
    margin-inline: 0px;
  }
}

@media screen and (max-width: 1279.99px) {
  .cllctiv-navbar-collapse.show {
    margin-top: var(--spacing-4);
    margin-bottom: calc(-1 * var(--spacing-4));
  }
}

.cllctiv-navbar-collapse.collapsing {
  margin-top: var(--spacing-4);
  margin-bottom: calc(-1 * var(--spacing-4));
}

/* Sub nav styles */
.cllctiv-sub-nav {
  background-color: var(--color-secondary-3);
  position: absolute;
  width: 100%;
  z-index: 100;
  box-shadow: var(--cllctiv-box-shadow);
}

.cllctiv-sub-nav-row {
  --bs-gutter-x: var(--spacing-5);
  --bs-gutter-y: var(--spacing-5);
}

.cllctiv-sub-nav .cllctiv-sub-nav-content {
  width: 100%;
  padding-inline: var(--spacing-8);
  padding-block: var(--spacing-7);
}

.cllctiv-sub-nav .cllctiv-sub-nav-content.first {
  padding-block: var(--spacing-7) var(--spacing-3);
}

.cllctiv-sub-nav .cllctiv-sub-nav-content.last {
  padding-block: var(--spacing-3) var(--spacing-7);
}

.cllctiv-sub-nav-menu {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  flex-grow: 1;
}

/* Sub nav menu(Engage, and Change maker toolkit) */
.cllctiv-sub-nav-menu .cllctiv-sub-nav-item {
  display: block;
  width: 100%;
  padding: var(--spacing-2);
  margin-inline: calc(-1 * var(--spacing-2));
  font-size: 16px;
  line-height: 21px;
  font-weight: var(--fw-500);
  font-family: var(--font-neue-haas-grotesk-display-pro);
  letter-spacing: 0.16px;
  text-decoration: none;
  color: var(--color-secondary-1);
}

.cllctiv-sub-nav-menu .cllctiv-sub-nav-item:hover {
  background-color: var(--color-secondary-4);
  color: var(--color-primary);
}

.cllctiv-sub-nav-menu .cllctiv-sub-nav-item.no-hover:hover {
  background-color: transparent;
  color: var(--color-secondary-1);
}

/* Navbar dropdown */
.cllctiv-navbar-dropdown {
  background-color: var(--color-secondary-3);
  border: none;
  border-radius: 0px;
  --bs-dropdown-spacer: 20px;
}

@media screen and (min-width: 1280px) {
  .cllctiv-navbar-dropdown {
    width: 280px;
  }
}

.cllctiv-navbar-dropdown-section {
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
}

.cllctiv-navbar-dropdown-main-item {
  padding-inline: 0px;
  padding-block: var(--spacing-2);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--cllctiv-font-size-p3);
  line-height: var(--cllctiv-line-height-p3);
  letter-spacing: var(--cllctiv-letter-spacing-p3);
  font-family: var(--font-neue-haas-grotesk-display-pro);
  font-weight: var(--fw-500);
  border-radius: var(--border-radius-1);
  color: var(--color-secondary-1);
  text-decoration: none;
}

.cllctiv-navbar-dropdown-main-item:hover {
  color: var(--color-secondary-1) !important;
  background-color: transparent !important;
  font-weight: var(--fw-500) !important;
}

.cllctiv-navbar-dropdown-item {
  min-height: 32px;
  padding-inline: var(--spacing-2);
  display: flex;
  gap: var(--spacing-2);
  align-items: center;
  font-size: var(--cllctiv-font-size-p3);
  line-height: var(--cllctiv-line-height-p3);
  letter-spacing: var(--cllctiv-letter-spacing-p3);
  font-family: var(--font-neue-haas-grotesk-display-pro);
  font-weight: var(--fw-500);
  border-radius: var(--border-radius-1);
  color: var(--color-secondary-1);
  text-decoration: none;
}

.cllctiv-navbar-dropdown-item:hover {
  color: var(--color-primary) !important;
  background-color: var(--color-secondary-4) !important;
  font-weight: var(--fw-500) !important;
}

#changemakerModal,
#engageModal {
  --bs-modal-border-radius: 0;
}

#searchModal.show~.modal-backdrop {
  background-color: #fff;
  opacity: 0;
}

@media screen and (min-width: 1280px) {

  #changemakerModal,
  #engageModal {
    display: none;
  }
}


/* Dropdown style */
.dropdown-link {
  display: inline-flex;
  align-items: center;
}

.dropdown-link::after {
  content: "";
  width: 24px;
  height: 24px;
  display: inline-block;
  -webkit-mask-image: var(--icon-chevron-down-filled);
  mask-image: var(--icon-chevron-down-filled);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--color-primary);
  transition: background-color 0.15s ease-in-out;
}

.dropdown-link:hover::after {
  background-color: var(--color-secondary-2);
}

.dropdown-menu {
  padding: 0;
  margin-top: var(--spacing-2);
}

.cllctiv-dropdown,
.cllctiv-select {
  border-radius: var(--border-radius-1);
  border: 0.25px solid var(--color-primary-disabled);
  background-color: var(--color-secondary-4);
  padding: var(--spacing-2);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  margin: 0px;
  max-height: 156px;
  overflow-y: auto;
  font: inherit;
  color: inherit;
}
.autocomplete-dropdown {
  margin-top: var(--spacing-2);
}

.cllctiv-dropdown-no-scroll,
.cllctiv-select-no-scroll {
  border-radius: var(--border-radius-1);
  border: 0.25 solid var(--color-primary-disabled);
  background-color: var(--color-secondary-4);
  padding: var(--spacing-2);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  margin: 0px;
  max-height: 156px;
  font: inherit;
  color: inherit;
}

.cllctiv-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  height: 32px;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--border-radius-1);
  font-size: var(--cllctiv-font-size-p5);
  line-height: var(--cllctiv-line-height-p5);
  letter-spacing: var(--cllctiv-letter-spacing-p5);
  font-family: var(--font-neue-haas-grotesk-display-pro-roman);
  font-weight: var(--fw-500);
  color: var(--color-secondary-1);
  text-wrap: nowrap;
  cursor: pointer;
  text-decoration: none;
}

.cllctiv-option:hover {
  background-color: var(--color-secondary-3);
  color: var(--color-secondary-1);
}

.cllctiv-option:disabled,
.cllctiv-option.disabled {
  color: var(--color-secondary-disabled);
}

.cllctiv-option[selected]:not(:has(input)),
.cllctiv-option.selected:not(:has(input)) {
  background-color: var(--color-primary);
  color: var(--color-secondary-4);
}

.navbar-collapse-content {
  width: 100%;
}

@media screen and (min-width: 960px) {

  .cllctiv-navbar-nav,
  .cllctiv-sub-nav-menu {
    gap: var(--spacing-4);
  }
}

@media screen and (min-width: 1280px) {
  .cllctiv-navbar {
    --bs-navbar-padding-x: var(--spacing-7);
    padding-top: 0px;
    align-items: center;
  }

  .cllctiv-navbar-nav {
    margin-inline-start: var(--spacing-6);
    padding: 0px;
  }

  .cllctiv-nav-item {
    display: inline-block;
    width: auto;
    height: 32px;
    align-content: center;
  }

  .cllctiv-navbar-nav,
  .cllctiv-nav-link,
  .cllctiv-admin-nav-link {
    --bs-nav-link-font-weight: var(--fw-500);
    font-size: 16px;
    letter-spacing: 21px;
    letter-spacing: 0.16px;
    font-family: var(--font-neue-haas-grotesk-display-pro);
  }

  .cllctiv-nav-link,
  .cllctiv-admin-nav-link {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}

.svg-icon-12px {
  width: 12px;
  height: 12px;
}

.svg-icon-24px {
  width: 24px;
  height: 24px;
}

.svg-icon-32px {
  width: 32px;
  height: 32px;
}

.svg-icon-36px {
  width: 36px;
  height: 36px;
}

.svg-icon-40px {
  width: 40px;
  height: 40px;
}

.svg-icon-48px {
  width: 40px;
  height: 40px;
}

.svg-icon-56px {
  width: 56px;
  height: 56px;
}

.svg-icon-80px {
  width: 80px;
  height: 80px;
}

.img-40px {
  width: 40px;
  height: 40px;
}

.img-40px.circle {
  border-radius: 50%;
}

.img-72px {
  width: 72px;
  height: 72px;
}

.img-72px.circle {
  border-radius: 50%;
}

@media screen and (min-width: 960px) {
  .svg-icon-md-24px {
    width: 24px;
    height: 24px;
  }

  .svg-icon-md-32px {
    width: 32px;
    height: 32px;
  }

  .svg-icon-md-36px {
    width: 36px;
    height: 36px;
  }

  .svg-icon-md-40px {
    width: 40px;
    height: 40px;
  }

  .svg-icon-md-56px {
    width: 56px;
    height: 56px;
  }

  .svg-icon-md-80px {
    width: 80px;
    height: 80px;
  }

  .img-md-40px {
    width: 40px;
    height: 40px;
  }

  .img-md-72px {
    width: 72px;
    height: 72px;
  }
}

@media screen and (min-width: 1280px) {
  .svg-icon-lg-24px {
    width: 24px;
    height: 24px;
  }

  .svg-icon-lg-32px {
    width: 32px;
    height: 32px;
  }

  .svg-icon-lg-36px {
    width: 36px;
    height: 36px;
  }

  .svg-icon-lg-40px {
    width: 40px;
    height: 40px;
  }

  .svg-icon-lg-56px {
    width: 56px;
    height: 56px;
  }

  .svg-icon-lg-80px {
    width: 80px;
    height: 80px;
  }

  .img-lg-40px {
    width: 40px;
    height: 40px;
  }

  .img-lg-72px {
    width: 72px;
    height: 72px;
  }
}

.icon-container {
  width: 40px;
  height: 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.svg-container.responsive {
  width: var(--spacing-5);
  height: var(--spacing-5);
}

@media screen and (min-width: 960px) {
  .svg-container.responsive {
    width: 40px;
    height: 40px;
  }
}


/* Go back button style */
.go-back {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding-bottom: var(--spacing-3);
  text-decoration: none;
  color: var(--color-secondary-1);
  font-size: var(--cllctiv-font-size-p5);
  line-height: var(--cllctiv-line-height-p5);
  letter-spacing: var(--cllctiv-letter-spacing-p5);
  font-family: var(--font-neue-haas-grotesk-display-pro);
  cursor: pointer;
}

.go-back::before {
  content: var(--icon-arrow-left);
}


/* Search input style */
.search-input {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  margin-bottom: 0;
}

@media screen and (min-width: 960px) {
  .search-input {
    margin-bottom: var(--spacing-4);
  }
}

.search-input input {
  flex-grow: 1;
  border: none;
  background-color: transparent;
}


/* Filter dropdown container in search and filter */
.filters-container {
  display: none;
  align-items: center;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-2);
  flex-wrap: wrap;
}

@media screen and (min-width: 959.98px) {
  .filters-container {
    display: flex;
  }
}


/* Footer styling */
footer {
  padding-block: var(--spacing-5);
  background-color: var(--color-primary);
}

footer #footer-parent-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}

footer #subscribe_label {
  display: block;
  font-weight: var(--fw-700);
  margin-bottom: var(--spacing-5);
  color: var(--color-secondary-3);
}

#mc_embed_shell {
  padding: 0px;
  max-width: 648px;
  width: 100%;
}

#mc_embed_shell #mc_embed_signup {
  background: transparent;
}

#mc_embed_shell #mc-embedded-subscribe-form {
  margin: 0px;
}

#mc_embed_shell #mce-EMAIL {
  border-radius: 4px;
  background-color: var(--color-secondary-3);
  height: 56px;
  padding-block: var(--spacing-4);
  align-content: center;
  border: 1px solid var(--color-secondary-disabled);
}
#mc_embed_shell #mce-EMAIL::placeholder {
  color: var(--color-secondary-disabled);
}

#mc_embed_signup .mc-field-group {
  display: block;
  width: 100%;
  padding: 0px;
  align-items: stretch;
}

#mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {
    margin: 0px !important;
    padding: 0px !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0px !important;
}

#mc_embed_signup div#mce-responses {
    height: 56px !important;
    width: 100% !important;
    padding: 0px !important;
    margin: 0px !important;
    float: none !important;
    align-content: center !important;
}

#mc_embed_signup div.response {
  width: 100% !important;
  margin: 0px !important;
  padding: 0px !important;
}

#mc_embed_shell .submit-btn {
  display: flex;
  padding-left: var(--spacing-5);
  align-items: center;
  gap: var(--spacing-4);
  color: var(--color-secondary-3);
}


footer .social {
  width: 192px;
  display: inline-flex;
  justify-content: space-between;
}

footer .cllctiv-accordion-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  height: 48px;
}

footer .cllctiv-accordion-button i {
  color: var(--color-secondary-3);
}

footer dt {
  font-size: var(--cllctiv-font-size-subheader-medium);
  letter-spacing: var(--cllctiv-letter-spacing-subheader-medium);
  font-weight: var(--fw-700);
  font-family: var(--font-neue-haas-grotesk-display-pro);
  color: var(--color-secondary-3);
}

footer dl {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 16px;
  padding-bottom: 0px;
  margin: 0px;
}

footer dl dd,
footer dl dd a,
footer dl dd a:hover {
  font-size: var(--cllctiv-font-size-p4);
  line-height: var(--cllctiv-line-height-p4);
  letter-spacing: var(--cllctiv-letter-spacing-p4);
  font-family: var(--font-neue-haas-grotesk-display-pro);
  font-weight: var(--fw-500);
  color: var(--color-secondary-3);
  margin: 0;
  text-decoration: none;
}

footer hr {
  border: none;
  height: 1px;
  width: 100%;
  background-color: var(--color-secondary-3);
}

footer .icons {
  color: white;
  font-size: 24px;
}

#footer-logo {
  width: 178px;
  height: 50px;
  margin-bottom: var(--spacing-4);
}

footer .captions {
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

footer #legal-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

footer #legal-info #legal-links {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

footer #legal-info dl,
footer #legal-info dl>dt,
footer #legal-info dl>dd {
  all: unset;
  /* or reset the specific styles you want to cancel */
}

footer #legal-info dl>dd {
  font-family: var(--font-warnock-pro);
  font-size: var(--cllctiv-font-size-accent-3);
  font-style: italic;
  color: var(--color-secondary-4);
}

@media screen and (min-width: 960px) {
  footer dl {
    padding-top: var(--spacing-5);
    padding-bottom: var(--spacing-2);
  }

  footer {
    padding-block: var(--spacing-9);
  }

  footer #footer-parent-container {
    gap: var(--spacing-7);
  }

  #footer-logo {
    margin-bottom: var(--spacing-5);
  }

  footer #legal-info dl>dd {
    font-size: var(--cllctiv-font-size-accent-1);
  }
}

@media screen and (min-width: 1280px) {
  footer #legal-info {
    flex-direction: row;
    justify-content: space-between;
  }
}


/* Faqs styling */
#faqs-section {
  background-color: var(--color-secondary-4);
  margin-block: var(--spacing-4);
}

#faqs-questions-parent-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}
#faqs-assistance-parent-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}

#faqs-questions-parent-container {
  margin-bottom: var(--spacing-6);
}

@media screen and (min-width: 960px) {
  #faqs-section {
    margin-block: var(--spacing-9);
  }

  #faqs-questions-parent-container {
    gap: var(--spacing-6);
  }

  #faqs-assistance-parent-container {
    flex-direction: row;
    gap: var(--spacing-7);
  }
}

@media screen and (min-width: 1280px) {
  #faqs-section {
    margin-block: var(--spacing-10);
  }

  .faqs-left-section {
    width: 408px;
    flex-shrink: 0;
  }

  #faqs-questions-parent-container,
  #faqs-assistance-parent-container {
    flex-direction: row;
    gap: var(--spacing-7);
  }
}

.accordion.faq-accordion {
  --bs-accordion-active-color: transparent;
  --bs-accordion-border-color: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-bg: transparent;
}

.accordion-button.cllctiv-accordion-button {
  --bs-accordion-btn-padding-x: 0px;
  --bs-accordion-btn-padding-y: 0px;
  color: var(--color-primary);
  font-size: var(--cllctiv-font-size-p3);
  line-height: var(--cllctiv-line-height-p3);
  letter-spacing: var(--cllctiv-letter-spacing-p3);
  font-family: var(--font-neue-haas-grotesk-display-pro);
  background-color: transparent;
  margin-bottom: var(--spacing-2);
}

@media screen and (min-width: 960px) {
  .accordion-button.cllctiv-accordion-button {
    font-size: var(--cllctiv-font-size-subheader-medium);
    line-height: 100%;
    letter-spacing: auto;
    margin-bottom: var(--spacing-4);
  }
}

.accordion-item.cllctiv-accordion-item {
  --bs-accordion-color: var(var(--color-primary));
  --bs-accordion-border-width: 0px;
  --bs-accordion-border-color: transparent;
  margin-bottom: var(--spacing-4);
  padding: 0px;
}

.accordion-item.cllctiv-accordion-item:last-child {
  margin-bottom: 0px;
}

@media screen and (min-width: 960px) {
  .accordion-item.cllctiv-accordion-item {
    margin-bottom: var(--spacing-5);
  }
}


/* Timeline story style */
#orgStoryParent {
  overflow-x: hidden;
  min-height: 300px;
}

@media screen and (min-width: 960px) {
  #orgStoryParent {
    min-height: 425px;
  }
}

.org_story_card {
  flex-shrink: 0;
  width: calc(160px + 48px);
  cursor: pointer;
}

.org_story_content {
  width: 160px;
  margin-top: -25px;
  margin-left: var(--spacing-7);
  color: var(--color-secondary-disabled);
  display: inline-flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.org_story_card.active {
  gap: var(--spacing-5);
}

.org_story_content .img_block {
  display: none;
  border-radius: var(--border-radius-1);
}

.org_story_card .circle_block {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 80px;
}

.org_story_card .circle_block::before {
  content: "";
  height: 2px;
  width: 48px;
  background-color: var(--color-primary);
}

.org_story_card .circle_block::after {
  content: "";
  flex-grow: 1;
  height: 2px;
  background-color: var(--color-primary);
}

.org_story_card .circle_block {
  margin-bottom: var(--spacing-5);
}

.org_story_card.active .circle_block {
  margin-bottom: var(--spacing-6);
}

.org_story_circle {
  margin-left: var(--spacing-7);
  position: absolute;
  width: 24px;
  aspect-ratio: 1;
  background-color: var(--color-secondary-3);
  transform: translateY(-50%);
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.org_story_year {
  visibility: hidden;
  font-family: var(--font-neue-haas-grotesk-display-pro);
}

.org_story_card:hover .org_story_year,
.org_story_card.active .org_story_year {
  visibility: visible;
  color: var(--color-secondary-1, #1A1A1A);
  font-weight: var(--fw-500);
}

.org_story_card:not(.active):hover .org_story_year {
  font-size: var(--cllctiv-font-size-p3);
  line-height: var(--cllctiv-line-height-p3);
}

.org_story_card.active .org_story_year {
  font-size: var(--cllctiv-font-size-p1);
  line-height: var(--cllctiv-line-height-p1);
}

.org_story_card.active .org_story_circle {
  width: 80px;
  background-color: var(--color-secondary-2);
  transition: width 0.3s ease, height 0.3s ease;
}

.org_story_card h4 {
  font-size: var(--cllctiv-font-size-p4);
  line-height: var(--cllctiv-line-height-p4);
  color: inherit;
}

.org_story_card p {
  font-size: var(--cllctiv-font-size-p6);
  line-height: var(--cllctiv-line-height-p6);
  color: inherit;
}

.org_story_card.active .img_block {
  display: block;
}

.org_story_card:last-child {
  flex-grow: 1;
}

.org_story_card:last-child .org_story_content {
  width: 160px;
}

.org_story_card h4,
.org_story_card p {
  color: var(--color-secondary-disabled);
}

.org_story_card.active h4,
.org_story_card.active p,
.org_story_card:hover h4,
.org_story_card:hover p {
  color: var(--color-secondary-1);
}

@media screen and (min-width: 960px) {
  .org_story_card {
    width: calc(200px + 48px);
  }

  .org_story_content {
    width: 200px;
  }

  .org_story_card .circle_block {
    height: 120px;
  }

  .org_story_card.active .org_story_circle {
    width: 120px;
  }

  .org_story_card .org_story_content h4 {
    font-size: var(--cllctiv-font-size-p2);
    line-height: var(--cllctiv-line-height-p2);
    letter-spacing: var(--cllctiv-letter-spacing-p2);
  }

  .org_story_card .org_story_content p {
    font-size: var(--cllctiv-font-size-p4);
    line-height: var(--cllctiv-line-height-p4);
    letter-spacing: var(--cllctiv-letter-spacing-p4);
  }

  .org_story_card.active .org_story_year,
  .org_story_card.active .org_story_content h4 {
    font-size: var(--cllctiv-font-size-p1);
    line-height: var(--cllctiv-line-height-p1);
    letter-spacing: var(--cllctiv-letter-spacing-p1);
  }

  .org_story_card.active .org_story_content p {
    font-size: var(--cllctiv-font-size-p3);
    line-height: var(--cllctiv-line-height-p3);
    letter-spacing: var(--cllctiv-letter-spacing-p3);
  }

  .org_story_card:not(.active):hover .org_story_circle {
    width: 80px;
    font-size: var(--cllctiv-font-size-p1);
    line-height: var(--cllctiv-line-height-p1);
    letter-spacing: var(--cllctiv-letter-spacing-p1);
    transition: width 0.3 ease, height 0.3 ease;
  }

  .org_story_card:not(.active):hover .img_block {
    display: block;
    width: 126px;
    height: 80px;
  }
}


/* Modal style */
.cllctiv-modal {
  --bs-modal-width: 100%;
}

.cllctiv-modal .modal-content {
  padding: var(--spacing-5) var(--spacing-5);
  --bs-modal-border-radius: var(--border-radius-2);
  --bs-modal-border-width: 0px;
  --bs-modal-bg: var(--color-secondary-4);
  gap: var(--spacing-2);
  box-shadow: var(--cllctiv-box-shadow);
}

.cllctiv-modal .modal-header,
.cllctiv-modal .modal-footer,
.cllctiv-modal .modal-body {
  border: none;
  padding: 0px;
  ;
}

.cllctiv-modal .modal-header {
  align-items: start;
}

.cllctiv-navbar.modal-header {
  align-items: center !important;
  background-color: var(--color-secondary-4);
}

.cllctiv-modal .modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
  padding-block: var(--spacing-2);
}

.cllctiv-modal .modal-footer {
  gap: var(--spacing-4);
}

@media screen and (min-width: 960px) {
  .cllctiv-modal {
    gap: var(--spacing-5);
    --bs-modal-width: 920px;
  }

  .cllctiv-modal .modal-content {
    padding: var(--spacing-7) var(--spacing-7);
    gap: var(--spacing-5);
  }

  .cllctiv-modal .modal-body {
    padding-block: var(--spacing-5);
    gap: var(--spacing-6);
  }
}

@media (max-width: 959.98px) {
  .cllctiv-modal .modal-dialog {
    margin: 0;
    height: 100vh;
    --bs-modal-width: 100%;
  }

  .cllctiv-modal .modal-content {
    position: fixed;
    bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .cllctiv-modal .modal-body {
    overflow-y: scroll;
  }

  .cllctiv-modal.fade .modal-dialog {
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
  }

  .cllctiv-modal.fade.show .modal-dialog {
    transform: translateY(0);
  }

  .cllctiv-modal .modal-footer button {
    flex: 1 1 auto;
  }
}


/* Offcanvas style */
.cllctiv-offcanvas {
  --bs-offcanvas-width: 920px;
  --bs-offcanvas-bg: var(--color-secondary-4);
  max-width: 100%;
  gap: var(--spacing-5);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  padding: 0px;
}

.cllctiv-offcanvas.offcanvas-bottom {
  --bs-offcanvas-height: 70vh;
}

.cllctiv-offcanvas .offcanvas-header {
  padding-top: var(--spacing-5);
  padding-bottom: 0;
  padding-inline: var(--spacing-5);
}

@media screen and (min-width: 960px) {
  .cllctiv-offcanvas .offcanvas-header {
    padding-inline: var(--spacing-4);
  }
}

.cllctiv-offcanvas .offcanvas-body {
  overflow-x: hidden;
  padding: 0px var(--spacing-5);
}

@media screen and (min-width: 960px) {
  .cllctiv-offcanvas .offcanvas-body {
    padding: 0px var(--spacing-4);
  }
}

.cllctiv-offcanvas .offcanvas-footer {
  padding: 0px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-2);
  padding-inline: var(--spacing-5);
  padding-block: var(--spacing-4);
}

@media screen and (min-width: 960px) {
  .cllctiv-offcanvas .offcanvas-footer {
    padding-inline: 0px var(--spacing-4);
  }
}

.cllctiv-offcanvas .offcanvas-footer button {
  flex: 1 1 auto;
}

@media screen and (min-width: 1280px) {
  .cllctiv-offcanvas {
    gap: var(--spacing-6);
  }
}

@media screen and (min-width: 960px) {
  .cllctiv-offcanvas {
    gap: var(--spacing-7);
  }

  .cllctiv-offcanvas .offcanvas-header {
    padding: var(--spacing-7);
    padding-bottom: 0px;
  }

  .cllctiv-offcanvas .offcanvas-body {
    padding-inline: var(--spacing-7);
  }

  .cllctiv-offcanvas .offcanvas-footer {
    gap: var(--spacing-5);
    padding-inline: var(--spacing-7);
    padding-block: var(--spacing-5);
  }

  .cllctiv-offcanvas .offcanvas-footer button {
    flex: 0 0 auto;
  }
}


/* Common style for offcanvas and modal */
.cllctiv-modal .modal-title,
.cllctiv-offcanvas .offcanvas-title {
  font-size: var(--cllctiv-font-size-subheader-small);
  line-height: var(--cllctiv-line-height-subheader-small);
  letter-spacing: var(--cllctiv-letter-spacing-subheader-small);
  font-family: var(--font-es-klarheit-plakat);
  color: var(--color-primary);
  font-weight: var(--fw-700);
}

@media screen and (min-width: 960px) {

  .cllctiv-modal .modal-title,
  .cllctiv-offcanvas .offcanvas-title {
    font-size: var(--cllctiv-font-size-subheader-large);
    line-height: var(--cllctiv-line-height-subheader-large);
    letter-spacing: var(--cllctiv-letter-spacing-subheader-large);
    font-family: var(--font-es-klarheit-plakat);
    color: var(--color-primary);
    font-weight: var(--fw-700);
  }
}

.cllctiv-modal .modal-header .btn-close,
.cllctiv-offcanvas .offcanvas-header .btn-close {
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
}


.cllctiv-filter-accordion .accordion-button {
  border: var(--border-width) solid var(--color-primary);
  padding: var(--spacing-2);
  font-size: var(--cllctiv-font-size-p5);
  line-height: var(--cllctiv-line-height-p5);
  letter-spacing: var(--cllctiv-letter-spacing-p5);
  color: var(--color-primary);
  background-color: transparent;
}

.cllctiv-filter-accordion .accordion-button::after {
  --bs-accordion-btn-icon: var(--icon-chevron-down-filled);
}

.cllctiv-filter-accordion .accordion-button:not(.collapsed)::after {
  --bs-accordion-btn-active-icon: var(--icon-chevron-up-filled);
}


/* Table style */
.cllctiv-table {
  --bs-body-color: var(--color-secondary-1);
  --bs-table-bg: var(--color-secondary-4);
  --bs-table-striped-bg: var(--color-secondary-3);
}

.cllctiv-table thead {
  border-bottom: var(--border-width) solid var(--color-secondary-disabled);
}

.cllctiv-table> :not(caption)>*>* {
  padding: var(--spacing-4) var(--spacing-5);
  font-family: var(--font-neue-haas-grotesk-display-pro-roman);
  font-weight: var(--fw-450);
  font-size: var(--cllctiv-font-size-p4);
  line-height: var(--cllctiv-line-height-p4);
  letter-spacing: var(--cllctiv-letter-spacing-p4);
}

.cllctiv-table thead th {
  font-size: var(--cllctiv-font-size-p2);
  line-height: var(--cllctiv-line-height-p2);
  letter-spacing: var(--cllctiv-letter-spacing-p2);
  font-family: var(--font-neue-haas-grotesk-display-pro);
  color: var(--color-secondary-1);
  font-weight: var(--fw-500);
}

.cllctiv-table>tbody>tr>*:first-child {
  font-size: var(--cllctiv-font-size-p3);
  line-height: var(--cllctiv-line-height-p3);
  letter-spacing: var(--cllctiv-letter-spacing-p3);
  font-family: var(--font-neue-haas-grotesk-display-pro);
  font-weight: var(--fw-500);
}

.cllctiv-table img {
  width: 40px;
  aspect-ratio: 1;
}

.cllctiv-table .table-cell td {
  background-color: var(--color-secondary-4);
  border-top: 1px solid var(--color-secondary-1);
  box-shadow: none;
  border-bottom: none;
}

.cllctiv-table .table-cell td .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
}

#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loader-wrapper {
    text-align: center;
}

/* Spinner */
.spinner-border.cllctiv-spinner {
  --bs-spinner-width: 40px;
  --bs-spinner-height: 40px;
  --bs-spinner-border-width: 4px;
  border-right-color: var(--color-primary-disabled);
  color: var(--color-primary);
}


/* Search in the ecosystem */
.search-in-the-ecosystem-container {
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
  background-color: var(--color-secondary-3);
  padding: var(--spacing-4);
  border-bottom-left-radius: var(--border-radius-2);
  border-bottom-right-radius: var(--border-radius-2);
  box-shadow: var(--cllctiv-box-shadow);
}

.search-in-the-ecosystem-container {
  padding: var(--spacing-5);
  gap: var(--spacing-7);
  width: 100%;
}

@media screen and (min-width: 960px) {
  .search-in-the-ecosystem-container {
    position: absolute;
    top: 60px;
    left: 0;
  }
}

@media screen and (min-width: 1280px) {
  .search-in-the-ecosystem-container {
    position: absolute;
    top: 60px;
    left: 0;
  }
}

.search-in-the-ecosystem-container .search-in-the-ecosystem-choice {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  overflow-x: scroll;
  flex-shrink: 0
}

@media screen and (min-width: 960px) {
  .search-in-the-ecosystem-container .search-in-the-ecosystem-choice {
    flex-wrap: wrap;
    overflow-x: hidden;
  }
}

.search-in-the-ecosystem-container .search-in-the-ecosystem-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}

@media screen and (min-width: 960px) {
  .search-in-the-ecosystem-container .search-in-the-ecosystem-body {
    gap: var(--spacing-7);
  }
}

.search-in-the-ecosystem-container .search-in-the-ecosystem-option {
  height: 40px;
  padding: var(--spacing-2) var(--spacing-1);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  cursor: pointer;
}

.search-in-the-ecosystem-container .recent-search {
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
  cursor: pointer;
}

@media screen and (min-width: 960px) {
  .search-in-the-ecosystem-container .recent-search {
    width: 88px;
    height: 130px;
  }
}

.search-in-the-ecosystem-container .most-searched {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-1);
  cursor: pointer;
}

@media screen and (min-width: 960px) {
  .search-in-the-ecosystem-container .most-searched {
    gap: var(--spacing-4);
    padding: var(--spacing-2);
  }
}

.cllctiv-search-container {
  height: 72px;
  display: flex;
  align-items: center;
  padding-inline: var(--spacing-4);
  padding-block: var(--spacing-2);
  background-color: var(--color-secondary-4);
}


/* Directory style */
.directory-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--spacing-7);
  margin-bottom: var(--spacing-7);
  gap: var(--spacing-5);
}

@media screen and (min-width: 960px) {
  .directory-toolbar {
    margin-top: var(--spacing-7);
    margin-bottom: var(--spacing-9);
    gap: var(--spacing-6);
  }
}

@media screen and (min-width: 1280px) {
  .directory-toolbar {
    margin-top: var(--spacing-9);
  }
}

.directory-tab-container {
  background-color: var(--color-secondary-3);
  font-size: var(--cllctiv-font-size-p2);
  line-height: var(--cllctiv-line-height-p2);
  letter-spacing: var(--cllctiv-letter-spacing-p2);
  display: inline-flex;
  border-radius: var(--border-radius-pill);
  overflow: hidden;
  max-width: 100%;
}

.directory-tab {
  padding-inline: var(--spacing-5);
  padding-block: var(--spacing-4);
  width: max-content;
  text-align: center;
  text-decoration: none;
  color: var(--color-secondary-1);
  box-sizing: border-box;
  text-wrap: nowrap;
  font-size: var(--cllctiv-font-size-p2);
  font-weight: var(--fw-450);
  line-height: var(--cllctiv-line-height-p2);
  letter-spacing: var(--cllctiv-letter-spacing-p2);
  font-family: var(--font-neue-haas-grotesk-display-pro-roman);
}
.directory-tab:hover {
  color: var(--color-secondary-1);
}

.directory-tab.active {
  background-color: var(--color-secondary-4);
  color: var(--color-primary);
  font-weight: var(--fw-500);
  border: var(--border-width) solid var(--color-primary);
  border-radius: var(--border-radius-pill);
  font-family: var(--font-neue-haas-grotesk-display-pro);
}


/* Member profile card */
.user-profile {
  padding-inline: var(--spacing-2);
  padding-block: var(--spacing-4);
  background-color: var(--color-secondary-4);
  border-radius: var(--border-radius-2);
  border: var(--border-width) solid var(--color-secondary-3);
  overflow: hidden;
  height: 284px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-5);
  box-shadow: var(--cllctiv-box-shadow);
  box-sizing: border-box;
}

.user-profile:hover {
  color: var(--color-secondary-1);
}

@media screen and (min-width: 960px) {
  .user-profile {
    height: 400px !important;
    padding-inline: var(--spacing-5);
    padding-block: var(--spacing-5);
    gap: var(--spacing-6);
  }
}

.user-profile .image-container {
  width: 96px;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: var(--border-radius-circle);
  flex-shrink: 0;
}

@media screen and (min-width: 960px) {
  .user-profile .image-container {
    width: 136px;
  }
}

.user-profile .engagement {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  flex-grow: 1;
  text-align: center;
}

@media screen and (min-width: 960px) {
  .user-profile .engagement {
    gap: var(--spacing-4);
  }
}

.user-profile .engagement .introduction {
  flex-grow: 1;
}

.user-profile .mission_stmt {
  -webkit-line-clamp: 2;
  font-size: var(--cllctiv-font-size-accent-4);
  font-style: italic;
}

@media screen and (min-width: 960px) {
  .user-profile .mission_stmt {
    font-size: var(--cllctiv-font-size-accent-1);
  }
}

.user-profile button {
  width: 100%;
}


/* Image board/Hero media */
.hero-media-placeholder {
  width: 100%;
  height: 400px;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: var(--color-secondary-3);
}
@media screen and (min-width: 1280px) {
  .hero-media-placeholder {
    display: flex;
  }
}

.hero-media-placeholder .inner {
  width: 388px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
  text-align: center;
  align-items: center;
}

.hero-media {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-7);
}

.hero-media .sub-media {
  display: flex;
  gap: var(--spacing-2);
  overflow-x: scroll;
}

.hero-media .media-block {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
}

.hero-media .sub-media .media-block {
  width: 152px;
  flex-shrink: 0;
}

@media screen and (min-width: 960px) {
  .hero-media {
    display: grid;
    column-gap: var(--spacing-3);
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-media .sub-media {
    display: grid;
    column-gap: var(--spacing-3);
    row-gap: var(--spacing-3);
    grid-template-columns: repeat(2, 1fr);
    overflow-x: hidden;
  }

  .hero-media .sub-media .media-block {
    width: 100%;
  }
}

.uploaded-hero-media {
  display: flex;
  align-self: stretch;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2);
  border-radius: var(--border-radius-1);
  border: var(--border-width) solid var(--color-secondary-disabled);
}

.uploaded-hero-media img,
.uploaded-hero-media video {
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius-1);
}


.awards-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-5);
  overflow-x: scroll;
}

@media screen and (min-width: 960px) {
  .awards-container {
    gap: var(--spacing-6);
  }
}

.award-card {
  width: 280px;
  height: 312px;
  cursor: pointer;
  border-radius: var(--border-radius-2);
  flex-shrink: 0;
  position: relative;
}

.award-card img {
  width: 100%;
  height: 100%;
}

.award-card .overlay {
  position: absolute;
  bottom: 0;
  padding: var(--spacing-5);
  width: 100%;
  background: linear-gradient(181.45deg, rgba(54, 32, 13, 0) 7.42%, rgba(54, 32, 13, 0.35) 32.74%, rgba(54, 32, 13, 0.5) 48.46%, rgba(54, 32, 13, 0.8) 90.57%),
    linear-gradient(181.45deg, rgba(54, 32, 13, 0) 23.45%, rgba(54, 32, 13, 0.035) 50.22%, rgba(54, 32, 13, 0.08) 61.45%);
}

.award-card .overlay .award-caption {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--spacing-2);
}

/* Media Player */
.video-overlay.solid {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #00000014;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-overlay.gradient {
  position: absolute;
  height: auto;
  width: 100%;
  bottom: 0;
  left: 0;
  display: flex;
  padding: var(--spacing-5) var(--spacing-4);
  align-items: end;
  background: linear-gradient(180deg, rgba(54, 32, 13, 0) 7.42%, rgba(54, 32, 13, 0.35) 32.74%, rgba(54, 32, 13, 0.5) 48.46%, rgba(54, 32, 13, 0.8) 90.57%),
    linear-gradient(180deg, rgba(54, 32, 13, 0) 23.45%, rgba(54, 32, 13, 0.035) 50.22%, rgba(54, 32, 13, 0.08) 61.45%);
}

@media screen and (min-width: 960px) {
  .video-overlay.gradient {
    height: 626px;
    padding: var(--spacing-10) var(--spacing-8);
  }
}

/* Testimonial cards */
.testimonial-card-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-5);
  overflow-x: scroll;
}

.testimonial-card {
  width: 220px;
  height: 220px;
  flex-shrink: 0;
  padding: 0px;
  background-color: var(--color-secondary-4);
  display: flex;
  flex-direction: column;
  box-shadow: var(--cllctiv-box-shadow);
  position: relative;
}

.testimonial-card .testimonial-card-content {
  flex-grow: 1;
  font-size: var(--cllctiv-font-size-accent-3);
  position: relative;
}

.testimonial-card .testimonial-card-content .video-overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: end;
  justify-content: end;
  padding: 9px;
  cursor: pointer;
}

.testimonial-card .testimonial-card-content video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.testimonial-card .testimonial-card-content .text {
  padding-inline: var(--spacing-4);
}

@media screen and (min-width: 960px) {
  .testimonial-card .testimonial-card-content .text {
    padding-inline: 0px;
  }
}

.testimonial-card .author-details {
  height: 78px;
  padding: var(--spacing-4);
  display: flex;
  gap: var(--spacing-4);
}

.testimonial-card .author-details img {
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius-circle);
}

.testimonial-card .svg-icon-quotes,
.testimonial-card .svg-icon-quotes-fullscreen {
  position: absolute;
  height: 16px;
  width: 22.67px;
  color: var(--color-secondary-2);
}

.testimonial-card .svg-icon-quotes {
  top: 12px;
  left: 7.33px;
}

.testimonial-card .svg-icon-quotes-fullscreen {
  bottom: 42px;
  left: 7.33px;
}

@media screen and (min-width: 960px) {
  .testimonial-card {
    width: 408px;
    height: 312px;
    padding: var(--spacing-5);
    gap: var(--spacing-4);
  }

  .testimonial-card .testimonial-card-content {
    font-size: var(--cllctiv-font-size-accent-1);
  }

  .testimonial-card .author-details {
    height: 48px;
    padding: 0px;
  }

  .testimonial-card .author-details img {
    width: 48px;
    height: 48px;
  }

  .testimonial-card .svg-icon-quotes {
    top: 20px;
    left: 11.33px;
  }

  .testimonial-card .svg-icon-quotes-fullscreen {
    bottom: 40px;
    left: 8px;
  }
}

/* Journey */
.journey-image-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-top: var(--spacing-5);
}

.journey-image-container img {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  border: var(--border-width) solid var(--color-secondary-3);
}

@media screen and (min-width: 960px) {
  .journey-image-container {
    gap: var(--spacing-5);
    margin-top: var(--spacing-6);
  }

  .journey-image-container img {
    width: 210px;
    height: 210px;
  }
}

/* Passion and Interest card */
.passion-interest-card {
  flex-shrink: 0;
  width: 240px;
  height: 280px;
  border: var(--border-width) solid var(--color-secondary-3);
  background-color: var(--color-secondary-4);
  box-shadow: var(--cllctiv-box-shadow);
  display: flex;
  flex-direction: column;
}

.passion-interest-card img {
  width: 100%;
  height: 171px;
}

.passion-interest-card .caption {
  padding: var(--spacing-4);
  flex-grow: 1;
}

@media screen and (min-width: 960px) {
  .passion-interest-card {
    width: 312px;
    height: 456px;
  }

  .passion-interest-card img {
    height: 288px;
  }

  .passion-interest-card .caption {
    padding: var(--spacing-5);
  }
}


/* Passion and Interest List page */
.passion-interest-page .passion-interest-card {
  flex-shrink: 0;
  width: 306px;
  height: 400px;
  border: var(--border-width) solid var(--color-secondary-3);
  background-color: var(--color-secondary-4);
  box-shadow: var(--cllctiv-box-shadow);
  display: flex;
  flex-direction: column;
}

.passion-interest-page .passion-interest-card img {
  width: 100%;
  height: 242px;
}

.passion-interest-page .passion-interest-card .caption {
  padding: var(--spacing-5);
  flex-grow: 1;
}


/* Edit and delete info buttons style */
.owner-action-card {
  position: relative;
}

.owner-action-card-toolbar {
  width: 100%;
  display: none;
  position: absolute;
  bottom: 0;
}

.owner-action-card:hover .owner-action-card-toolbar {
  display: block;
}

.delete-info-button,
.edit-info-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--cllctiv-font-size-p4);
  line-height: var(--cllctiv-line-height-p4);
  letter-spacing: var(--cllctiv-letter-spacing-p4);
  font-family: var(--font-neue-haas-grotesk-display-pro);
  font-weight: var(--fw-500);
  color: var(--color-secondary-1);
  background-color: var(--color-secondary-3);
  border: none;
}

.delete-info-button {
  border-right: var(--border-width) solid var(--color-secondary-1);
}

/*  Carousel */
.cllctiv-carousel .carousel-item {
  height: 612px;
  position: relative;
}

.cllctiv-carousel .carousel-item img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.cllctiv-carousel .carousel-item .overlay {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(54, 32, 13, 0) 0%, rgba(54, 32, 13, 0.35) 50%, rgba(54, 32, 13, 0.8) 100%),
    linear-gradient(180deg, rgba(54, 32, 13, 0) 0%, rgba(54, 32, 13, 0.01) 50%, rgba(54, 32, 13, 0.07) 75%, rgba(54, 32, 13, 0.16) 100%);
}

.cllctiv-carousel .carousel-caption {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  text-align: left;
  position: absolute;
  left: var(--spacing-4);
  right: var(--spacing-4);
  bottom: var(--spacing-7);
}

.cllctiv-carousel .carousel-indicators {
  margin-left: var(--spacing-4);
  margin-right: var(--spacing-4);
  margin-bottom: var(--spacing-7);
  justify-content: left;
  align-items: center;
}

.cllctiv-carousel .carousel-indicators [data-bs-target] {
  height: var(--spacing-1);
  width: var(--spacing-1);
  background-color: var(--color-secondary-2);
  margin-left: calc(var(--spacing-2) / 2);
  margin-right: calc(var(--spacing-2) / 2);
  border-radius: 50%;
  opacity: 1;
}

.cllctiv-carousel .carousel-indicators .active {
  height: var(--spacing-2);
  width: var(--spacing-2);
  background-color: var(--color-secondary-3);
}

@media screen and (min-width: 960px) {
  .cllctiv-carousel .carousel-item {
    height: 1200px;
  }

  .cllctiv-carousel .carousel-caption {
    left: var(--spacing-7);
    right: var(--spacing-7);
    bottom: calc(var(--spacing-8) + var(--spacing-9) + var(--spacing-1));
  }

  .cllctiv-carousel .carousel-indicators {
    margin-left: var(--spacing-7);
    margin-right: var(--spacing-7);
    margin-bottom: var(--spacing-9);
  }

  .cllctiv-carousel .carousel-indicators [data-bs-target] {
    height: var(--spacing-2);
    width: var(--spacing-2);
    background-color: var(--color-secondary-2);
    margin-left: calc(var(--spacing-3) / 2);
    margin-right: calc(var(--spacing-3) / 2);
  }

  .cllctiv-carousel .carousel-indicators .active {
    height: var(--spacing-3);
    width: var(--spacing-3);
    background-color: var(--color-secondary-3);
  }
}

@media screen and (min-width: 1280px) {
  .cllctiv-carousel .carousel-item {
    height: 742px;
  }

  .cllctiv-carousel .carousel-caption {
    left: var(--spacing-8);
    right: var(--spacing-8);
    bottom: var(--spacing-8);
  }

  .cllctiv-carousel .carousel-indicators {
    margin-left: var(--spacing-8);
    margin-right: var(--spacing-8);
    margin-bottom: var(--spacing-8);
    justify-content: right;
  }
}

/* Featured work */
/* .cllctiv-carousel .carousel-item {
  height: 612px;
  box-shadow: var(--cllctiv-box-shadow);
  border-radius: 0px;
}
@media screen and (min-width: 960px) {
  .cllctiv-carousel .carousel-item {
    height: 1200px;
  }
}
@media screen and (min-width: 1280px) {
  .cllctiv-carousel .carousel-item {
    height: 742px;
  }
}
.cllctiv-carousel .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.cllctiv-carousel .carousel-item .carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding-inline: var(--spacing-4);
  padding-block: var(--spacing-7);
  color: var(--color-secondary-3);
  text-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  background: linear-gradient(180deg, rgba(54, 32, 13, 0) 0%, rgba(54, 32, 13, 0.35) 50%, rgba(54, 32, 13, 0.8) 100%),
    linear-gradient(180deg, rgba(54, 32, 13, 0) 0%, rgba(54, 32, 13, 0.01) 50%, rgba(54, 32, 13, 0.07) 75%, rgba(54, 32, 13, 0.16) 100%);;
}
@media screen and (min-width: 960px) {
  .cllctiv-carousel .carousel-item .carousel-caption {
    padding: var(--spacing-7);
    gap: var(--spacing-7);
  }
}
@media screen and (min-width: 1280px) {
  .cllctiv-carousel .carousel-item .carousel-caption {
    padding: var(--spacing-8);
    flex-direction: row;
    gap: var(--spacing-2);
  }
}
.cllctiv-carousel .carousel-item .carousel-indicators-box {
  display: flex;
  gap: var(--spacing-2);
  align-items: center;
}
@media screen and (min-width: 960px) {
  .cllctiv-carousel .carousel-item .carousel-indicators-box {
    gap: var(--spacing-3);
  }
}
@media screen and (min-width: 1280px) {
  .cllctiv-carousel .carousel-item .carousel-indicators-box {
    gap: var(--spacing-3);
    align-self: flex-end;
  }
}
.cllctiv-carousel .carousel-item .carousel-indicators-box .carousel-indicator {
  width: 4px;
  height: 4px;
  background-color: var(--color-secondary-2);
}
.cllctiv-carousel .carousel-item .carousel-indicators-box .carousel-indicator.active {
  width: 8px;
  height: 8px;
  background-color: var(--color-secondary-3);
}
@media screen and (min-width: 960px) {
  .cllctiv-carousel .carousel-item .carousel-indicators-box .carousel-indicator {
    width: 8px;
    height: 8px;
  }
  .cllctiv-carousel .carousel-item .carousel-indicators-box .carousel-indicator.active {
    width: 16px;
    height: 16px;
  }
} */

.featured-work-card {
  width: 160px;
  height: 280px;
  border: var(--border-width) solid var(--color-secondary-3);
  background-color: var(--color-secondary-4);
  box-shadow: var(--cllctiv-box-shadow);
}

@media screen and (min-width: 960px) {
  .featured-work-card {
    width: 288px;
    height: 456px;
  }
}

.featured-work-card img {
  width: 100%;
  height: 117px;
}

@media screen and (min-width: 960px) {
  .featured-work-card img {
    height: 219px;
  }
}

.featured-work-card .featured-work-card-body {
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  height: 163px;
}

@media screen and (min-width: 960px) {
  .featured-work-card .featured-work-card-body {
    padding: var(--spacing-5);
    gap: var(--spacing-5);
    height: 237px;
  }
}

.card-divider {
  --bs-gutter-x: var(--spacing-4);
  --bs-gutter-y: var(--spacing-4);
}

@media screen and (min-width: 960px) {
  .card-divider {
    --bs-gutter-x: var(--spacing-5);
    --bs-gutter-y: var(--spacing-5);
  }
}

.participant-empty-placeholder-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-9);
  padding: var(--spacing-7);
  background-color: var(--color-secondary-3);
}

.participant-empty-placeholder-body .section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.empty-placeholder-card-divider {
  --bs-gutter-x: var(--spacing-5);
  --bs-gutter-y: var(--spacing-5);
}

.participant-empty-placeholder-card {
  border: 2px solid var(--color-secondary-2);
  border-radius: var(--border-radius-2);
  padding: var(--spacing-5);
  display: flex;
  gap: var(--spacing-5);
  cursor: pointer;
  background-color: var(--color-secondary-4);
  color: var(--color-secondary-1);
  text-decoration: none;
  height: 116px;
}

/* Analytics */
.analytics-section {
  padding: var(--spacing-6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  border-radius: var(--border-radius-2);
  border: var(--border-width) solid var(--color-secondary-3);
  background-color: var(--color-secondary-4);
  box-shadow: var(--cllctiv-box-shadow);
}

.analytics-section .analytics-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
  padding: var(--spacing-5);
  border-radius: var(--border-radius-2);
  border: var(--border-width) solid var(--color-secondary-1);
  height: 100%;
}

.analytics-section .analytics-card .analytics-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  font-size: var(--cllctiv-font-size-p3);
  line-height: var(--cllctiv-line-height-p3);
  letter-spacing: var(--cllctiv-letter-spacing-p3);
  font-family: var(--font-neue-haas-grotesk-display-pro-roman);
}

.analytics-dropdown-card {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: 200px;
  height: 48px;
  padding: 0;
  border: none;
  flex-shrink: 0;
}

.analytics-dropdown-card img {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
}

.analytics-dropdown-card .content {
  flex-grow: 1;
  background-color: var(--color-secondary-3);
  align-content: center;
  height: 100%;
  padding-inline: var(--spacing-2);
}

/* Analytics summary card */
.summary-card {
  width: 100%;
  padding: var(--spacing-5);
  background-color: var(--color-secondary-3);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
  box-shadow: var(--cllctiv-box-shadow);
  border-radius: var(--border-radius-2);
}

/* Collaborators card */
.collaborator-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding-block: var(--spacing-2);
  text-decoration: none;
}

.collaborator-card.speaker {
  width: 100%;
}

.collaborator-card img {
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius-circle);
}

@media screen and (min-width: 960px) {
  .collaborator-card.speaker {
    width: 312px;
  }
}

/* Service modal styles */
.service-area-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

@media screen and (min-width: 960px) {
  .service-area-section {
    gap: var(--spacing-5);
  }
}

.service-area-section .row {
  --bs-gutter-x: var(--spacing-4);
  --bs-gutter-y: var(--spacing-4);
}

@media screen and (min-width: 960px) {
  .service-area-section .row {
    --bs-gutter-x: var(--spacing-5);
    --bs-gutter-y: var(--spacing-5);
  }
}

.service-area-card {
  display: flex;
  align-items: center;
  width: 100%;
  gap: var(--spacing-4);
}

.service-area-card img {
  width: 80px;
  height: 80px;
}

.service-area-card .service-area-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding-block: var(--spacing-2);
}

@media screen and (min-width: 960px) {
  .service-area-card {
    gap: var(--spacing-5);
  }

  .service-area-card img {
    width: 150px;
    height: 96px;
  }
}

@media screen and (max-width: 959.98px) {
  .service-area-alert {
    position: sticky;
    bottom: 0;
  }
}

/* Donate button animation */

.animate-donate {
  position: relative;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  border-radius: 500px;
}

.animate-donate .inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: calc(100% - 4px);
  align-content: center;
  margin: 2px;
  background-color: var(--color-secondary-4);
  border-radius: 500px;
  padding-inline: var(--spacing-3);
}

.animate-donate::before {
  content: "";
  display: block;
  background: linear-gradient(90deg,
      rgb(17, 83, 13, 1) 25%,
      rgb(255, 251, 246, 1) 50%);
  height: 100px;
  width: 100px;
  position: absolute;
  animation: rotate 4s linear infinite;
  z-index: 0;
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Thumbnail Carousel */
.carousel-item {
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 1.5s ease-in-out !important;
  position: relative;
}

.carousel-caption-left-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 10;
  padding: var(--spacing-7) var(--spacing-7);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  background: linear-gradient(180deg, rgba(17, 84, 13, 0) 0%, rgba(17, 84, 13, 0.5) 50.36%, #11540D 100%);
}

@media screen and (min-width: 1280px) {
  .carousel-caption-left-bottom {
    padding: var(--spacing-10) var(--spacing-8);
  }
}

/* People card */
.profile-card {
  display: flex;
  gap: var(--spacing-5);
  margin-bottom: var(--spacing-4);
}

.profile-card .profile-img {
  width: 88px;
  height: 88px;
  border-radius: var(--border-radius-circle);
  align-self: center;
}

@media screen and (min-width: 960px) {
  .profile-card .profile-img {
    width: 184px;
    height: 184px;
  }
}

.profile-card .introduction {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.profile-card .personal-details {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

/* Org card */
.org-card {
  width: 100%;
  padding-block: 0px var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  border-bottom: var(--border-width) solid var(--color-secondary-disabled);
}

@media screen and (min-width: 960px) {
  .org-card {
    padding-block: var(--spacing-5);
    gap: var(--spacing-7);
  }
}

.org-card .org-card-inner {
  display: flex;
  gap: var(--spacing-5);
  height: max-content;
}

@media screen and (min-width: 960px) {
  .org-card .org-card-inner {
    gap: var(--spacing-7);
  }
}

.org-card img {
  width: 66px;
  height: 64px;
}

@media screen and (min-width: 960px) {
  .org-card img {
    width: 108px;
    height: 104px;
  }
}

.org-card .org-card-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

@media screen and (min-width: 960px) {
  .org-card .org-card-body {
    gap: var(--spacing-5);
  }
}

/* Suggested org card */
.suggested-org-card {
  height: 88px;
  flex-shrink: 0;
  width: 100%;
  display: flex;
  box-shadow: var(--cllctiv-box-shadow);
}

@media screen and (min-width: 960px) {
  .suggested-org-card {
    height: 120px;
    width: 408px;
  }
}

.suggested-org-card img {
  width: 88px;
  height: 88px;
}

@media screen and (min-width: 960px) {
  .suggested-org-card img {
    width: 120px;
    height: 120px;
  }
}

.suggested-org-card .content {
  padding: var(--spacing-4);
  align-content: center;
  flex-grow: 1;
  justify-content: end;
}

.suggested-org-card .content .inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

@media screen and (min-width: 960px) {
  .suggested-org-card .content .inner {
    gap: var(--spacing-4);
  }
}

/* your org card style */
.your-org-card {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  background-color: var(--color-secondary-4);
  width: 228px;
  height: 56px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--cllctiv-box-shadow);
}

@media screen and (min-width: 960px) {
  .your-org-card {
    background-color: var(--color-secondary-3);
    box-shadow: none;
    width: 232px;
  }
}

.your-org-card img {
  width: 56px;
  height: 56px;
}

.your-org-card .your-org-card-body {
  padding-block: var(--spacing-2);
  flex-grow: 1;
}

.partnership-card,
.program-and-services-card {
  display: flex;
  height: 112px;
  width: 300px;
  box-shadow: var(--cllctiv-box-shadow);
  flex-shrink: 0;
}

.partnership-card img,
.program-and-services-card img {
  height: 112px;
  width: 112px;
}

.partnership-card .content,
.program-and-services-card .content {
  padding: var(--spacing-4);
  flex-grow: 1;
  height: 100%;
  background-color: var(--color-secondary-4);
  justify-content: space-between;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

@media screen and (min-width: 960px) {

  .partnership-card,
  .program-and-services-card {
    width: 480px;
    height: 200px;
  }

  .partnership-card img,
  .program-and-services-card img {
    width: 200px;
    height: 200px;
  }

  .partnership-card .content,
  .program-and-services-card .content {
    padding: var(--spacing-5);
    gap: var(--spacing-2);
  }
}

/* Org members */
.org-member-card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  width: 160px;
  align-items: center;
}

@media screen and (min-width: 960px) {
  .org-member-card {
    width: 240px;
    gap: var(--spacing-5);
  }
}

.org-member-card img {
  width: 128px;
  height: 128px;
  border-radius: var(--border-radius-circle);
}

@media screen and (min-width: 960px) {
  .org-member-card img {
    width: 200px;
    height: 200px;
  }
}

.org-member-card .content {
  flex-grow: 1;
  text-align: center;
}

.profile-progress-element {
  display: block;
  border: none !important;
  padding: 0px;
  background-color: transparent;
  width: 100%;
}

#progress-show-area {
  z-index: 1040;
}

.add-formset {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding-block: var(--spacing-4);
  font-size: var(--cllctiv-font-size-p4);
  line-height: var(--cllctiv-line-height-p4);
  letter-spacing: var(--cllctiv-letter-spacing-p4);
  cursor: pointer;
}

.add-formset:before {
  content: "";
  width: var(--spacing-5);
  height: var(--spacing-5);
  background-image: var(--icon-pencil);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.cllctiv-donation-hero {
  min-height: 367px;
}

@media screen and (min-width: 960px) {
  .cllctiv-donation-hero {
    min-height: 430px;
  }
}

.cllctiv-donation-hero-logged-in {
  min-height: 728px;
}

@media screen and (min-width: 1280px) {
  .cllctiv-donation-hero-logged-in {
    min-height: 904px;
  }
}

.cllctiv-donation-hero-cards {
  height: 112px;
  min-height: 112px;
  max-height: 240px;
  padding: var(--spacing-5);
  gap: var(--spacing-5);
  background-color: var(--color-secondary-4);
  border: 1px solid var(--color-secondary-3);
  box-shadow: 0px 0px 35px 0px #00000014, 0px 0px 5px 0px #0000000D;
  text-align: center;
}

@media screen and (min-width: 960px) {
  .cllctiv-donation-hero-cards {
    height: 180px;
    max-height: 240px;
    max-width: 640px;
    flex-grow: 1;
    align-content: center;
  }
}

@media screen and (min-width: 1280px) {
  .cllctiv-donation-hero-cards {
    width: 416px;
    height: 224px;
    min-width: 416px;
    max-width: 640px;
    min-height: 224px;
    max-height: 240px;
    flex-grow: 0;
  }
}

.cllctiv-support-card {
  width: 100%;
  height: 207px;
  min-width: 300px;
  max-width: 328px;
  min-height: 128px;
  max-height: 240px;
  padding: var(--spacing-5);
  gap: var(--spacing-4);
  background-color: var(--color-secondary-4);
  box-shadow: 0px 0px 35px 0px #00000014, 0px 0px 5px 0px #0000000D;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media screen and (min-width: 960px) {
  .cllctiv-support-card {
    width: 416px;
    height: 218px;
    min-width: 416px;
    max-width: 640px;
    min-height: 128px;
    max-height: 240px;
    gap: var(--spacing-5);
  }
}

@media screen and (min-width: 1280px) {
  .cllctiv-support-card {
    width: unset;
    height: 200px;
    flex-grow: 1;
  }
}

.cllctiv-philanthropy-card {
  height: 116px;
  min-width: 300px;
  max-width: 328px;
  min-height: 112px;
  max-height: 132px;
  border: 1px solid var(--color-secondary-3);
  background-color: var(--color-secondary-4);
  box-shadow: 0px 0px 35px 0px #00000014, 0px 0px 5px 0px #0000000D;
  display: flex;
  flex-shrink: 0;
}

@media screen and (min-width: 960px) {
  .cllctiv-philanthropy-card {
    width: 648px;
    height: 262px;
    min-width: 480px;
    max-width: 648px;
    min-height: 200px;
    max-height: 262px;
  }
}

.cllctiv-philanthropy-card img {
  height: 100%;
  width: 116px;
  min-width: 104px;
  max-width: 262px;
  min-height: 104px;
  max-height: 262px;
  object-fit: cover;
  object-position: 50% 50%;
  flex-shrink: 0;
}

@media screen and (min-width: 960px) {
  .cllctiv-philanthropy-card img {
    width: 262px;
    min-width: 200px;
    min-height: 200px;
  }
}

.cllctiv-philanthropy-card .content {
  height: 100%;
  flex-grow: 1;
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
}

@media screen and (min-width: 960px) {
  .cllctiv-philanthropy-card .content {
    padding: var(--spacing-5);
    gap: var(--spacing-2);
    justify-content: start;
  }
}

.cllctiv-philanthropy-card .sub-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

@media screen and (min-width: 960px) {
  .cllctiv-philanthropy-card .sub-content {
    margin-bottom: auto;
  }
}

.cllctiv-org-card-donate {
  height: 90px;
  background-color: var(--color-secondary-4);
  box-shadow: 0px 0px 35px 0px #00000014, 0px 0px 5px 0px #0000000D;
  display: flex;
  text-decoration: none;
}

@media screen and (min-width: 960px) {
  .cllctiv-org-card-donate {
    width: 408px;
    height: 120px;
  }
}

@media screen and (min-width: 1280px) {
  .cllctiv-org-card-donate {
    width: 100%;
    height: 120px;
  }
}

.cllctiv-org-card-donate img {
  height: 100%;
  aspect-ratio: 1;
  flex-shrink: 0;
}

.cllctiv-org-card-donate .content {
  height: 100%;
  flex-grow: 1;
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 960px) {
  .cllctiv-org-card-donate .content {
    justify-content: space-evenly;
  }
}

.engage-section img {
  width: 100%;
  height: 477px;
  border: 1px solid var(--color-secondary-3);
  border-radius: var(--spacing-2);
  box-shadow: 0px 0px 35px 0px #00000014, 0px 0px 5px 0px #0000000D;
  order: 1;
}

@media screen and (min-width: 960px) {
  .engage-section img {
    height: 477px;
  }
}

@media screen and (min-width: 1280px) {
  .engage-section img {
    order: 2;
    width: 636px;
    height: 477px;
  }
}

.engage-section .content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  order: 2;
}

@media screen and (min-width: 1280px) {
  .engage-section .content {
    order: 1;
    align-items: start;
  }
}

.story-card.row, .cypher-card.row {
  --bs-gutter-x: var(--spacing-5);
  --bs-gutter-y: var(--spacing-5);
}

@media screen and (min-width: 1280px) {
  .story-card.row, .cypher-card.row {
    --bs-gutter-x: var(--spacing-6);
    --bs-gutter-y: var(--spacing-6);
  }
}

.top-story-card,
.story-card {
  flex: 0 0 auto;
  width: 160px;
  height: 280px;
  background-color: var(--color-secondary-4);
  border: 1px solid var(--color-secondary-3);
  box-shadow: 0px 0px 35px 0px #00000014, 0px 0px 5px 0px #0000000D;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 960px) {
  .story-card {
    width: 412px;
    height: 560px;
    min-width: 272px;
    max-width: 412px;
    min-height: 456px;
    max-height: 560px;
  }

  .top-story-card {
    width: 412px;
    height: 456px;
  }
}

.story-card img {
  width: 100%;
  height: 146px;
}

.top-story-card img {
  width: 100%;
  height: 124px;
}

@media screen and (min-width: 960px) {
  .story-card img {
    height: 309px;
  }

  .top-story-card img {
    height: 260px;
  }
}

.top-story-card .strip,
.story-card .strip {
  width: 100%;
  padding: var(--spacing-1) var(--spacing-4);
  height: 21px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-secondary-2);
}

@media screen and (min-width: 960px) {

  .top-story-card .strip,
  .story-card .strip {
    display: none;
  }
}

.top-story-card .content,
.story-card .content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: var(--spacing-4);
}

@media screen and (min-width: 960px) {

  .top-story-card .content,
  .story-card .content {
    padding: var(--spacing-5);
  }
}

.top-story-card .content .read_time {
  display: none;
}

.story-card .content .tag-section {
  display: none;
}

@media screen and (min-width: 960px) {
  .story-card .content .tag-section {
    display: flex;
  }
}

.org-thumbnail-card img {
  height: 66px;
  aspect-ratio: 1;
  object-fit: cover;
}

@media screen and (min-width: 960px) {
  .org-thumbnail-card img {
    height: 104px;
  }
}


/* Application form style */
.application .header {
  padding-block: var(--spacing-5);
  padding-inline: 0px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  width: 100%;
}

@media screen and (min-width: 960px) {
  .application .header {
    padding-block: var(--spacing-9);
    gap: var(--spacing-5);
  }
}

.application .body {
  padding-inline: 0px;
  padding-block: var(--spacing-5);
  margin-bottom: 108px;
  display: flex;
  justify-content: center;
  width: 100%;
}

@media screen and (min-width: 960px) {
  .application .body {
    margin-bottom: 80px;
    padding-inline: var(--spacing-8);
    padding-block: var(--spacing-9);
  }
}

.application .inner-body {
  width: 868px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}

@media screen and (min-width: 960px) {
  .application .inner-body {
    gap: var(--spacing-7);
  }
}

.application .mcq .row {
  --bs-gutter-x: var(--spacing-4);
  --bs-gutter-y: var(--spacing-4);
}

@media screen and (min-width: 960px) {
  .application .mcq .row {
    --bs-gutter-x: var(--spacing-5);
    --bs-gutter-y: var(--spacing-5);
  }
}

.application .footer {
  background-color: var(--color-secondary-3);
  box-shadow: var(--cllctiv-box-shadow);
  position: fixed;
  bottom: 0;
  width: 100%;
}

.footer-content {
  padding-block: var(--spacing-4);
  padding-inline: var(--spacing-4);
  display: flex;
  align-items: start;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-4);
}

.application .footer button {
  flex-grow: 1;
}

@media screen and (min-width: 960px) {
  .footer-content {
    padding-inline: var(--spacing-8);
    display: flex;
    flex-direction: row;
    align-items: center;
    width: auto;
  }
}

.banner {
  background-color: var(--color-secondary-3);
}

.banner .banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--spacing-7);
}

.banner .banner-content .cta {
  display: flex;
  align-items: center;
  gap: var(--spacing-5);
}


/* Fundraiser page */
.fundraiser-page {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
  padding-block: var(--spacing-5);
}

@media screen and (min-width: 960px) {
  .fundraiser-page {
    gap: var(--spacing-10);
    padding-block: var(--spacing-10);
  }
}

/* About Fundraiser card */
.about-fundraiser-card {
  display: flex;
  gap: var(--spacing-4);
}

.about-fundraiser-card img {
  width: 88px;
  height: 88px;
  border-radius: var(--border-radius-circle);
}
.about-fundraiser-card.org img {
  border-radius: 0px;
}

.about-fundraiser-card .caption {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}


/* Initiative participant cards */
.initiative-participant-card {
  /* height: 240px; */
  flex-shrink: 0;
  position: relative;
  width: 160px;
  box-shadow: var(--cllctiv-box-shadow);
  border: var(--border-width) solid var(--color-secondary-3);
}

@media screen and (min-width: 960px) {
  .initiative-participant-card {
    /* height: 456px; */
    width: 412px;
  }
}

.initiative-participant-card img,
.initiative-participant-card video {
  /* height: 160px; */
  aspect-ratio: 4/3;
  width: 100%;
  object-fit: cover;
}

@media screen and (min-width: 960px) {
  /* .initiative-participant-card img, .initiative-participant-card video {
    height: 352px;
  } */
}

.initiative-participant-card .content {
  background-color: var(--color-secondary-4);
  padding: var(--spacing-4);
}

@media screen and (min-width: 960px) {
  .initiative-participant-card .content {
    padding: var(--spacing-5)
  }
}

.initiative-participant-card .content .inner-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding-block: var(--spacing-2);
}

.initiative-participant-card .content .inner-content img {
  width: 40px;
  height: 40px;
}

.initiative-participant-card .content .inner-content .text {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.initiative-participant-card .feature {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: var(--spacing-2);
  background-color: var(--color-secondary-3);
  border-radius: var(--border-radius-pill);
  width: 40px;
  height: 40px;
  text-align: center;
  cursor: pointer;
}

.initiative-participant-card .label-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-secondary-2);
  padding: var(--spacing-2) var(--spacing-5);
}


/* Initiative card */
.initiative-card {
  width: 240px;
  max-width: 100%;
  height: 320px;
  border: var(--border-width) solid var(--color-secondary-3);
  box-shadow: var(--cllctiv-box-shadow);
  flex-shrink: 0;
}

@media screen and (min-width: 960px) {
  .initiative-card {
    width: 312px;
    height: 456px;
  }
}

.initiative-card img {
  width: 100%;
  height: 160px;
}

@media screen and (min-width: 960px) {
  .initiative-card img {
    height: 228px;
  }
}

.initiative-card .body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--spacing-4);
  background-color: var(--color-secondary-4);
  height: calc(320px - 160px);
}

@media screen and (min-width: 960px) {
  .initiative-card .body {
    padding: var(--spacing-5);
    height: calc(456px - 228px);
  }
}

.initiative-card .body .text-detail {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

@media screen and (min-width: 960px) {
  .initiative-card .body .text-detail {
    gap: var(--spacing-2);
  }
}

.media-card {
  position: relative;
  width: 100%;
  min-width: 280px;
  max-width: 418px;
  height: 312px;
  flex-shrink: 0;
}

.media-card.why-giving-matters,
.media-card.updates {
  width: 280px;
}

.media-card img,
.media-card video,
.media-card button[data-status="stopped"] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-card .overlay {
  display: flex;
  height: 100%;
  width: 100%;
  position: absolute;
  bottom: 0;
  padding: var(--spacing-5);
  background: linear-gradient(180deg, rgba(54, 32, 13, 0) 28.78%, rgba(54, 32, 13, 0.35) 48.26%, rgba(54, 32, 13, 0.5) 60.35%, rgba(54, 32, 13, 0.8) 92.75%), linear-gradient(180deg, rgba(54, 32, 13, 0) 41.12%, rgba(54, 32, 13, 0.035) 61.77%, rgba(54, 32, 13, 0.08) 70.35%);
  align-items: end;
}

.media-card .body {
  height: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: var(--spacing-2);
}

.media-card .icon-link {
  width: 24px;
  height: 24px;
  display: none;
}

.media-card .icon-play-btn {
  height: 56px;
  width: 56px;
}

@media screen and (min-width: 960px) {

  .media-card .icon-play-btn,
  .media-card .icon-link {
    display: block;
  }

  .media-card.why-giving-matters,
  .media-card.updates {
    width: 418px;
  }
}

.intro-video {
  width: 100%;
}
.intro-video video {
  min-height: calc(100vh - 72px);
}
@media screen and (min-width: 1401px) {
  .full-width .intro-video {
    margin-block: var(--spacing-10);
  }
  .full-width .intro-video video {
    min-height: calc(100vh - 72px - 2*var(--spacing-10));
  }
}

.cllctiv-h-7 {
  height: var(--spacing-7);
}

/* Membership benefits page */
.cllctiv-pitch-hero-container {
  height: 672px;
  display: flex;
  flex-direction: column;
  background-color: var(--color-secondary-2);
  padding-block: var(--spacing-7);
  gap: var(--spacing-4);
  justify-content: start;
  position: relative;
}

.cllctiv-pitch-hero-container .title {
  height: 34px;
  overflow: hidden;
  position: relative;
}

.cllctiv-pitch-hero-container img {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 90%;
  width: auto;
  object-fit: cover;
  object-position: 100% 100%;
}

@media screen and (min-width: 960px) {
  .cllctiv-pitch-hero-container {
    height: 1272px;
    padding-block: var(--spacing-10);
    gap: var(--spacing-5);
  }

  .cllctiv-pitch-hero-container .title {
    height: 58px;
    width: 800px;
  }

  .cllctiv-pitch-hero-container .sub-title {
    margin-top: var(--spacing-10);
  }
}

@media screen and (min-width: 1280px) {
  .cllctiv-pitch-hero-container {
    height: 848px;
    padding-block: var(--spacing-10);
    gap: var(--spacing-6);
    justify-content: center;
  }

  .cllctiv-pitch-hero-container .title {
    width: 800px;
  }

  .cllctiv-pitch-hero-container .sub-title {
    width: 800px;
    margin-top: 0px;
  }

  .cllctiv-pitch-hero-container .content {
    width: 800px;
  }
}

/* .cllctiv-membership-row {

} */
@media screen and (min-width: 1280px) {
  .cllctiv-membership-row {
    --bs-gutter-x: var(--spacing-7) !important;
    --bs-gutter-y: var(--spacing-7) !important;
  }
}

.scroll-animate .scroll-animate-item {
  position: absolute;
  width: 100%;
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.5s ease;
}

.scroll-animate .scroll-animate-item.active {
  opacity: 1;
  transform: translateY(0);
}

.scroll-animate .scroll-animate-item.deactive {
  opacity: 0;
  transform: translateY(-100%);
}

/* who it's for cards */
.cllctiv-who-for-card {
  height: 312px;
  width: 280px;
  background-color: var(--color-secondary-3);
  box-shadow: var(--cllctiv-box-shadow);
  flex-shrink: 0;
}

.cllctiv-who-for-card img {
  height: 232px;
  width: 100%;
  object-fit: cover;
}

.cllctiv-who-for-card .content {
  height: 80px;
  padding: var(--spacing-2) var(--spacing-4);
  align-content: center;
}

@media screen and (min-width: 960px) {
  .cllctiv-who-for-card {
    height: 420px;
    width: 416px;
  }

  .cllctiv-who-for-card img {
    height: 312px;
  }

  .cllctiv-who-for-card .content {
    height: 108px;
    padding: var(--spacing-4) var(--spacing-5);
  }
}

.participation-benefits-section {
  display: grid;
  align-items: center;
  gap: var(--spacing-4);
  grid-template-columns: 1fr;
}

@media screen and (min-width: 960px) {
  .participation-benefits-section {
    gap: var(--spacing-6);
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (min-width: 1280px) {
  .participation-benefits-section {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.participation-benefit-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-5);
  gap: var(--spacing-4);
  height: 104px;
  width: 100%;
  text-decoration: none;
  background-color: var(--color-secondary-3);
  box-shadow: var(--cllctiv-box-shadow);
}

@media screen and (min-width: 960px) {
  .participation-benefit-card {
    gap: var(--spacing-5);
    height: 192px;
  }
}

.participation-benefit-card svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

@media screen and (min-width: 960px) {
  .participation-benefit-card svg {
    width: 32px;
    height: 32px;
  }
}


/* Events */
.event-registered-card {
  height: 104px;
  width: 272px;
  background-color: var(--color-primary);
  display: flex;
  text-decoration: none;
  flex: 0 0 auto;
}

.event-registered-card .time {
  width: 107px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-1);
  justify-content: center;
}

.event-registered-card .right {
  flex-grow: 1;
  height: 100%;
  position: relative;
}

.event-registered-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 70%;
}

.event-registered-card .content {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 1;
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  background:
    linear-gradient(181.45deg,
      rgba(54, 32, 13, 0) 7.42%,
      rgba(54, 32, 13, 0.35) 32.74%,
      rgba(54, 32, 13, 0.5) 48.46%,
      rgba(54, 32, 13, 0.8) 90.57%),
    linear-gradient(181.45deg,
      rgba(54, 32, 13, 0) 23.45%,
      rgba(54, 32, 13, 0.035) 50.22%,
      rgba(54, 32, 13, 0.08) 61.45%);
}

@media screen and (min-width: 1280px) {
  .event-registered-card {
    width: 336px;
  }
}

/* Attendee stack */
.attendee-stack,
.collaborator-stack {
  width: 56px;
  aspect-ratio: 1/1;
  overflow: hidden;
  margin-left: -14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.collaborator-stack {
  width: 32px;
}

@media screen and (min-width: 960px) {
  .collaborator-stack {
    width: 40px;
  }
}

.attendee-stack:first-child,
.collaborator-stack:first-child {
  margin-left: 0;
}

.attendee-stack,
.collaborator-stack {
  z-index: calc(100 - var(--i));
  /* dynamically set via inline style or loop */
}

.attendee-stack img,
.collaborator-stack img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius-circle);
}

/* Event register card */
.event-register-card {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-4);
  gap: var(--spacing-4);
  background-color: var(--color-secondary-3);
  width: 100%;
}

@media screen and (min-width: 960px) {
  .event-register-card {
    padding: var(--spacing-5);
    gap: var(--spacing-5);
  }
}

@media screen and (min-width: 1280px) {
  .event-register-card {
    max-width: 100%;
    width: 596px;
  }
}

.event-register-card .event-details {
  display: flex;
  gap: var(--spacing-5);
}

@media screen and (min-width: 960px) {
  .event-register-card .event-details {
    gap: var(--spacing-7);
  }
}

.event-register-card .event-details #eventImg {
  flex: 0 0 auto;
  width: 124px;
  height: 124px;
  border-radius: var(--border-radius-1);
  border: 0.25 solid var(--color-secondary-3);
}

@media screen and (min-width: 960px) {
  .event-register-card .event-details #eventImg {
    width: 160px;
    height: 160px;
  }
}

.event-register-card .event-details .content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-2);
}

@media screen and (min-width: 960px) {
  .event-register-card .event-details .content {
    justify-content: start;
    gap: var(--spacing-6);
  }
}

.registration-details-summary-box,
.registration-details-summary-box {
  padding: var(--spacing-5);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  border: var(--border-width) solid var(--color-secondary-1);
  border-radius: var(--border-radius-1);
}

.registration-details-summary-box .row,
.registration-details-summary-box .row {
  --bs-gutter-x: var(--spacing-4);
}

/* Minimizable carousel */
.minimizable-carousel-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
}

@media screen and (min-width: 960px) {
  .minimizable-carousel-container {
    gap: var(--spacing-5);
  }
}

@media screen and (min-width: 1280px) {
  .minimizable-carousel-container {
    flex-direction: row;
  }
}

.minimizable-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  height: 56px;
  width: 100%;
  transition: width 0.5s ease, height 0.5s ease, box-shadow 0.5s ease;
  cursor: pointer;
}

@media screen and (min-width: 960px) {
  .minimizable-carousel {
    height: 241px;
  }
}

@media screen and (min-width: 1280px) {
  .minimizable-carousel {
    height: 615px;
    width: 88px;
  }
}

.minimizable-carousel.active {
  flex-grow: 1;
  height: 352px;
}

@media screen and (min-width: 960px) {
  .minimizable-carousel.active {
    height: 480px;
  }
}

@media screen and (min-width: 1280px) {
  .minimizable-carousel.active {
    height: 615px;
    width: 100%;
  }
}

.minimizable-carousel img, .minimizable-carousel video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.minimizable-carousel .icon-play-btn {
  width: 56px;
  height: 56px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.minimizable-carousel .content {
  display: none;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  padding: var(--spacing-4);
  background: linear-gradient(181deg, rgba(54, 32, 13, 0.00) 52.84%, rgba(54, 32, 13, 0.35) 65.47%, rgba(54, 32, 13, 0.50) 73.31%, rgba(54, 32, 13, 0.80) 94.31%);
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--spacing-3);
  color: var(--color-secondary-4);
  opacity: 0;
}

.minimizable-carousel.active .content {
  display: flex;
  opacity: 1;
}

@media screen and (min-width: 960px) {
  .minimizable-carousel .content {
    padding: var(--spacing-5);
  }
}

/* vertical card */
.vertical-card {
  min-height: 280px;
  max-height: 320px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--cllctiv-box-shadow);
  overflow: auto;
}

.vertical-card .media-wrapper {
  min-height: 0;
  position: relative;
  flex-shrink: 0;
}

.vertical-card .media-wrapper img,
.vertical-card .media-wrapper video,
.vertical-card .media-wrapper iframe {
  height: 100%;
  min-height: 0;
  width: 100%;
  object-fit: cover;
}

.vertical-card .media-wrapper .video-overlay {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.vertical-card .band-section {
  width: 100%;
  display: flex;
  align-items: center;
  padding: var(--spacing-1) var(--spacing-4);
  gap: var(--spacing-1);
  background-color: var(--color-secondary-2);
  z-index: 2;
}

.vertical-card .band-section svg {
  margin-left: auto;
}

.vertical-card .media-wrapper .edit-btn {
  position: absolute;
  top: var(--spacing-2);
  right: var(--spacing-2);
  z-index: 3;
}

.vertical-card .content-wrapper {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-4);
  gap: var(--spacing-4);
  background-color: var(--color-secondary-4);
  position: relative;
  flex-grow: 1;
  overflow: hidden;
}

.vertical-card .content-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  flex-grow: 1;
}

.vertical-card .author-section {
  display: flex;
  gap: var(--spacing-4);
  align-items: center;
}

.vertical-card .author-section .author-images {
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vertical-card .author-section .author-images img {
  border-radius: 50%;
  margin-left: -14px;
  z-index: 1;
  height: 24px;
  width: 24px;
}

.vertical-card .user-section {
  display: flex;
  gap: var(--spacing-2);
  align-items: center;
}

.vertical-card .user-section img {
  height: 40px;
  width: 40px;
  border: 1px solid var(--color-secondary-4);
  border-radius: 100px;
  object-fit: cover;
}

.vertical-card .user-section img.org {
  border-radius: 0;
}

.vertical-card .user-section .content {
  margin-right: auto;
}

.vertical-card .concise-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.vertical-card .edit-section {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 44px;
  width: 100%;
  background-color: var(--color-secondary-3);
}

.vertical-card .edit-section div {
  display: flex;
  height: 100%;
  width: 50%;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
}

.vertical-card .edit-section div:last-child {
  border-left: 1px solid var(--color-secondary-1);
}

.vertical-card:hover .edit-section {
  display: flex;
}

.vertical-card.story-col {
  width: 100%;
}

.vertical-card.story-col .media-wrapper {
  height: 146px;
}

.vertical-card.story-col .title {
  -webkit-line-clamp: 3;
}

.vertical-card.story-col .author-section,
.vertical-card.story-col .pills {
  display: none;
}

.vertical-card.story-col .band-section .band-subtext {
  margin-left: auto;
}

.vertical-card.story {
  width: 240px;
  flex-shrink: 0;
}

.vertical-card.story .media-wrapper {
  aspect-ratio: 16/10.8667;
}

.vertical-card.application {
  width: 240px;
  height: 280px;
}

.vertical-card.application .media-wrapper {
  height: 176px;
}

.vertical-card.event {
  width: 240px;
  max-height: 580px;
}

.vertical-card.event .media-wrapper {
  aspect-ratio: 240/145;
}

.vertical-card.event .title {
  -webkit-line-clamp: 2;
}

.vertical-card.event-highlight {
  width: 185px;
}

.vertical-card.event-highlight .media-wrapper {
  aspect-ratio: 185/163;
}

.vertical-card.event-highlight .title {
  -webkit-line-clamp: 2;
}

.vertical-card.passion-and-interest {
  width: 240px;
}

.vertical-card.passion-and-interest .media-wrapper {
  aspect-ratio: 240/171;
}

.vertical-card.passion-and-interest .title {
  -webkit-line-clamp: 1;
}

.vertical-card.passion-and-interest .content {
  -webkit-line-clamp: 4;
}

.vertical-card.initiative {
  width: 240px;
}

.vertical-card.initiative .media-wrapper {
  aspect-ratio: 1.5;
}

.vertical-card.initiative .title {
  -webkit-line-clamp: 2;
}

.vertical-card.initiative .content {
  -webkit-line-clamp: 2;
}
@media screen and (min-width: 960px) {
  .vertical-card.initiative .content {
    -webkit-line-clamp: 4;
  }
}

.vertical-card.top-story {
  min-width: 160px;
  width: 160px;
}

.vertical-card.top-story .media-wrapper {
  height: 124px;
}

.vertical-card.top-story .title {
  -webkit-line-clamp: 3;
}

.vertical-card.top-story .author-text,
.vertical-card.top-story .author-subtext {
  display: none;
}

.vertical-card.top-story .band-section .band-subtext {
  margin-left: auto;
}

.vertical-card.initiative-participant {
  width: 240px;
}

.vertical-card.initiative-participant .media-wrapper {
  height: 168px;
}

.vertical-card.initiative-participant.no-band .media-wrapper {
  height: 189px;
}

.vertical-card.initiative-participant .band-section {
  background-color: var(--color-sage);
}

.vertical-card.initiative-participant .content-wrapper {
  justify-content: center;
}

.vertical-card.featured-work {
  width: 160px;
}

.vertical-card.featured-work .media-wrapper {
  aspect-ratio: 160/117;
}

.vertical-card.featured-work .title {
  -webkit-line-clamp: 2;
}


@media screen and (min-width: 960px) {
  .vertical-card {
    min-height: 456px;
    max-height: 560px;
  }

  .vertical-card .band {
    padding: var(--spacing-2) var(--spacing-5);
  }

  .vertical-card .content-wrapper {
    padding: var(--spacing-5);
    gap: var(--spacing-5);
  }

  .vertical-card .content-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
  }

  .vertical-card .author-section .author-images img {
    height: 40px;
    width: 40px;
  }

  .vertical-card.story {
    width: 412px;
  }

  .vertical-card.story .media-wrapper {
    aspect-ratio: 4/3;
  }

  .vertical-card.event {
    width: 272px;
  }

  .vertical-card.event .media-wrapper {
    aspect-ratio: 272/184;
  }

  .vertical-card.event .title {
    -webkit-line-clamp: 3;
  }

  .vertical-card.event-highlight {
    width: 412px;
  }

  .vertical-card.event-highlight .media-wrapper {
    aspect-ratio: 412/357;
  }

  .vertical-card.event-highlight .title {
    -webkit-line-clamp: 3;
  }

  .vertical-card.initiative {
    width: 312px;
  }

  .vertical-card.initiative .media-wrapper {
    aspect-ratio: 312/228;
  }

  .vertical-card.top-story {
    min-width: 412px;
    overflow: hidden;
  }

  .vertical-card.top-story .media-wrapper {
    height: 260px;
  }

  .vertical-card.top-story .author-text,
  .vertical-card.top-story .author-subtext {
    display: block;
  }

  .vertical-card.top-story .band-section {
    display: none;
  }

  .vertical-card.story-col .media-wrapper {
    height: 309px;
  }

  .vertical-card.story-col .author-section {
    display: flex;
  }

  .vertical-card.story-col .pills {
    display: block;
  }

  .vertical-card.story-col .band-section {
    display: none;
  }

  .vertical-card.passion-and-interest {
    width: 312px;
  }

  .vertical-card.passion-and-interest .media-wrapper {
    aspect-ratio: 312/288;
  }

  .vertical-card.initiative-participant {
    width: 412px;
  }

  .vertical-card.initiative-participant .media-wrapper {
    height: 317px;
  }

  .vertical-card.initiative-participant.no-band .media-wrapper {
    height: 349px;
  }

  .vertical-card.initiative-participant .band-section {
    padding: var(--spacing-2) var(--spacing-5);
  }

  .vertical-card.featured-work {
    width: 288px;
  }

  .vertical-card.featured-work .media-wrapper {
    aspect-ratio: 288/219;
  }
}

.vertical-card.highlight,
.vertical-card.event-for-you {
  width: 185px;
  flex-shrink: 0;
}

.vertical-card.highlight .media-wrapper {
  aspect-ratio: 185/163;
}

.vertical-card.event-for-you .media-wrapper {
  aspect-ratio: 1.4546201664;
}

.vertical-card.highlight .content-section .title,
.vertical-card.event-for-you .content-section .title {
  -webkit-line-clamp: 2;
}

.vertical-card.highlight .content-section .content {
  -webkit-line-clamp: 3;
}

@media screen and (min-width: 960px) {

  .vertical-card.highlight,
  .vertical-card.event-for-you {
    width: 272px;
  }

  .vertical-card.highlight .media-wrapper {
    aspect-ratio: 272/232;
  }

  .vertical-card.event-for-you .media-wrapper {
    aspect-ratio: 1.4081626114;
  }

  .vertical-card.highlight .content-section .title,
  .vertical-card.event-for-you .content-section .title {
    -webkit-line-clamp: 3;
  }

  .vertical-card.highlight .content-section .content {
    -webkit-line-clamp: 4;
  }
}

@media screen and (min-width: 1280px) {

  .vertical-card.highlight,
  .vertical-card.event-for-you {
    width: 412px;
  }

  .vertical-card.highlight .media-wrapper {
    aspect-ratio: 412/357;
  }

  .vertical-card.event-for-you .media-wrapper {
    aspect-ratio: 412/288;
  }

  .vertical-card.highlight .content-section .content {
    -webkit-line-clamp: 3;
  }

  .vertical-card.top-story {
    height: 456px;
  }

  .vertical-card.top-story .media-wrapper {
    height: 100%;
    transition: height 0.5s ease-in-out;
  }

  .vertical-card.top-story:hover .media-wrapper {
    height: 260px;
  }

  .vertical-card.top-story .content-wrapper {
    height: 0px;
    transition: height 0.5s ease-in-out;
  }

  .vertical-card.top-story:hover .content-wrapper {
    height: auto;
  }
}

.vertical-card.waitlist-event {
  width: 160px;
}

.vertical-card.waitlist-event .media-wrapper {
  aspect-ratio: 1;
}

.vertical-card.waitlist-event .content-section .title {
  -webkit-line-clamp: 1;
}

.vertical-card.waitlist-event .content-section .content {
  -webkit-line-clamp: 3;
}

@media screen and (min-width: 960px) {
  .vertical-card.waitlist-event {
    width: 312px;
  }

  .vertical-card.waitlist-event .media-wrapper {
    aspect-ratio: 312/228;
  }

  .vertical-card.waitlist-event .content-section .content {
    -webkit-line-clamp: 2;
  }

  .vertical-card.application {
    width: 412px;
    height: 456px;
  }

  .vertical-card.application .media-wrapper {
    height: 320px;
  }
}

.vertical-card.become-member {
  width: 240px;
  flex-shrink: 0;
}

.vertical-card.become-member .media-wrapper {
  aspect-ratio: 240/203;
}

.vertical-card.become-member .title {
  -webkit-line-clamp: 2;
}

.vertical-card.become-member .content {
  -webkit-line-clamp: 3;
}

@media screen and (min-width: 960px) {
  .vertical-card.become-member {
    width: 412px;
  }

  .vertical-card.become-member .media-wrapper {
    aspect-ratio: 412/324;
  }
}

@media screen and (min-width: 1280px) {
  .vertical-card.event {
    width: 412px;
  }

  .vertical-card.event .media-wrapper {
    aspect-ratio: 412/288;
  }
}

/* Horizontal Card */
.horizontal-card {
  display: flex;
  height: 200px;
  width: 480px;
  box-shadow: var(--cllctiv-box-shadow);
  background-color: var(--color-secondary-4);
  position: relative;
  overflow: hidden;
}

.horizontal-card img {
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  flex-shrink: 0;
}

.horizontal-card .content-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--spacing-5);
  gap: var(--spacing-5);
}

.horizontal-card .content-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.horizontal-card .edit-btn {
  position: absolute;
  top: var(--spacing-2);
  right: var(--spacing-2);
  z-index: 3;
}

.horizontal-card .edit-section {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 44px;
  width: 100%;
  background-color: var(--color-secondary-3);
}

.horizontal-card .edit-section div {
  display: flex;
  height: 100%;
  width: 50%;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
}

.horizontal-card .edit-section div:last-child {
  border-left: 1px solid var(--color-secondary-1);
}

.horizontal-card:hover .edit-section {
  display: flex;
}

.horizontal-card.program-and-services {
  width: 328px;
  height: 112px;
}

.horizontal-card.program-and-services img {
  width: 112px;
  aspect-ratio: 1;
}

.horizontal-card.partnership {
  width: 300px;
  height: 112px;
}

.horizontal-card.partnership img {
  width: 112px;
  aspect-ratio: 1;
}

.horizontal-card.suggested-story {
  width: 100%px;
  height: 112;
}

.horizontal-card.suggested-story img {
  width: 112;
  aspect-ratio: 1;
}

@media screen and (min-width: 960px) {
  .horizontal-card {
    height: 262px;
    width: 648px;
  }

  .horizontal-card.program-and-services {
    width: 480px;
    height: 200px;
  }

  .horizontal-card.program-and-services img {
    width: 200px;
    aspect-ratio: 1;
  }

  .horizontal-card.partnership {
    width: 480px;
    height: 200px;
  }

  .horizontal-card.partnership img {
    width: 200px;
    aspect-ratio: 1;
  }

  .horizontal-card.suggested-story {
    width: 648px;
    height: 262px;
  }

  .horizontal-card.suggested-story img {
    width: 262px;
    aspect-ratio: 1;
  }
}

.min-100vh {
  min-height: 100vh;
}

/* Membership Card */
.membership-card {
  padding-block: var(--spacing-5);
  padding-inline: var(--spacing-4);
  box-shadow: var(--cllctiv-box-shadow);
  width: 100%;
  height: 506px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}
@media screen and (min-width: 960px) {
  .membership-card {
    padding-block: var(--spacing-7);
    padding-inline: var(--spacing-5);
    flex-direction: row;
    gap: var(--spacing-7);
    height: 376px;
  }
}
.membership-card > .title {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  width: 325px;
}
@media screen and (min-width: 960px) {
  .membership-card > .title {
    width: auto;
    gap: var(--spacing-7);
    flex: 1;
  }
}
.membership-card > .content {
  flex: 1;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

/* Your Membership Card */
.your-membership-card {
  width: 100%;
  height: 506px;
  border: 1px solid var(--color-secondary-3);
  box-shadow: var(--cllctiv-box-shadow);
  display: flex;
  flex-direction: column;
}

.your-membership-card .content {
  height: fit-content;
  padding: var(--spacing-5) var(--spacing-4);
}

.your-membership-card img {
  flex: 1;
  object-fit: cover;
  min-width: none;
}

@media screen and (min-width: 960px) {
  .your-membership-card {
    height: 320px;
    flex-direction: row;
  }

  .your-membership-card .content {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: start;
    padding-block: var(--spacing-6);
    padding-inline: var(--spacing-6);
  }
}

@media screen and (min-width: 1280px) {
  .your-membership-card {
    height: 455px;
  }

  .your-membership-card .content {
    min-width: 394px;
    flex: 0;
  }
}

/* Microgrants timer style */

.micro-grants .time-metrics {
  display: flex;
  flex-direction: column;
  align-content: center;
  text-align: center;
  gap: var(--spacing-2);
  flex-grow: 1;
}

@media screen and (min-width: 960px) {
  .micro-grants .time-metrics {
    text-align: start;
    flex: 0 0 auto;
    width: 80px;
  }
}


/* Icon Card */

.icon-card {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-5);
  background-color: var(--color-secondary-4);
  min-width: 300px;
  min-height: 200px;
  box-shadow: var(--cllctiv-box-shadow);
  justify-content: space-between;
}

@media screen and (min-width: 960px) {
  .icon-card {
    min-width: 416px;
    max-width: 640px;
    justify-content: start;
  }
}

.icon-card.benefit {
  width: 300px;
  height: 200px;
  max-width: 300px;
}

@media screen and (min-width: 960px) {
  .icon-card.benefit {
    width: 100%;
    height: 240px;
  }
}

/* Initiatives Benefits section */

.cllctiv-giving-benefits-row {
  --bs-gutter-x: 8px;
  --bs-gutter-y: 8px;
  flex-wrap: nowrap;
  overflow: auto;
}

.cllctiv-giving-benefits-row .cllctiv-giving-benefits-col {
  min-width: 300px;
}

@media screen and (min-width: 960px) {
  .cllctiv-giving-benefits-row {
    --bs-gutter-x: 32px;
    --bs-gutter-y: 32px;
    flex-wrap: wrap;
  }

  .cllctiv-giving-benefits-row .cllctiv-giving-benefits-col {
    min-width: unset;
  }
}

/* giving circle hero section */
.giving-circle-hero-container {
  height: 1000px;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: var(--spacing-5);
  gap: var(--spacing-5);
}

.giving-circle-hero-container .header {
  flex: 0;
}

.giving-circle-hero-section {
  position: relative;
  flex: 1;
  align-content: end;
  background-position: 50% 50%;
  background-size: cover;
}

.giving-circle-hero-section .content-wrapper {
  width: 100%;
  height: 100%;
  padding-block: var(--spacing-4);
  background-color: #36200D33;
  align-content: end;
}

.giving-circle-hero-section .band {
  background-color: var(--color-secondary-2);
  padding: var(--spacing-4) var(--spacing-2);
  text-align: center !important;
}

.giving-circle-hero-section .content {
  background-color: var(--color-secondary-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-4);
  gap: var(--spacing-4);
}

@media screen and (min-width: 960px) {
  .giving-circle-hero-container {
    height: 1230px;
    padding-top: var(--spacing-9);
    gap: var(--spacing-6);
  }

  .giving-circle-hero-section .content-wrapper {
    padding-block: var(--spacing-7);
  }

  .giving-circle-hero-section .content {
    padding: var(--spacing-7);
    gap: var(--spacing-7);
  }
}

@media screen and (min-width: 1280px) {
  .giving-circle-hero-container {
    height: 1081px;
  }

  .giving-circle-hero-section .content-wrapper {
    padding-block: var(--spacing-7);
  }

  .giving-circle-hero-section .content {
    padding: var(--spacing-7);
    gap: var(--spacing-7);
  }
}

.giving-circle-hero-container-member {
  height: 800px;
  display: flex;
  flex-direction: column;
}

.giving-circle-hero-container-member .notification-section {
  height: auto;
}

.giving-circle-hero-container-member .content-section {
  flex-grow: 1;
  align-content: end;
  background-size: cover;
  background-position: 50% 50%;
}

.giving-circle-hero-container-member .content-section img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.giving-circle-hero-container-member .content-wrapper {
  width: 100%;
  height: 100%;
  padding-block: var(--spacing-5);
  align-content: end;
  background-color: #36200D33;
}

.giving-circle-hero-container-member .content {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-4);
  gap: var(--spacing-5);
  background-color: var(--color-secondary-3);
}

@media screen and (min-width: 960px) {
  .giving-circle-hero-container-member {
    height: 1000px;
  }

  .giving-circle-hero-container-member .content-wrapper {
    padding: 0px;
  }

  .giving-circle-hero-container-member .content {
    padding: var(--spacing-7) var(--spacing-8);
    gap: var(--spacing-7);
  }
}

@media screen and (min-width: 1280px) {
  .giving-circle-hero-container-member {
    height: 958px;
  }
}

/* History Card */

.history-img {
  height: 120px;
  width: 120px;
  flex-shrink: 0;
}

@media (min-width: 960px) {
  .history-img {
    height: 210px;
    width: 210px;
  }
}

.history-icon-container {
  width: 32px;
}

@media (min-width:960px) {
  .history-icon-container {
    width: 128px;
  }
}

.history-circle {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: var(--color-secondary-2);
}

@media (min-width: 960px) {
  .history-circle {
    height: 24px;
    width: 24px;
  }
}

.history-line {
  background-color: var(--color-secondary-1);
  width: 1px;
}

/* Event card calender */
.event-card-calender {
  display: flex;
  flex-wrap: nowrap;
  background-color: var(--color-primary);
  position: relative;
  overflow: hidden;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.event-card-calender .left-section {
  height: 104px;
  width: 107px;
  padding: var(--spacing-4);
  flex: 0 0 104px;
  text-align: center;
}

.event-card-calender .right-section {
  height: 100%;
  flex: 1;
  align-content: end;
  background-position: 50% 50%;
  background-size: cover;
}

.event-card-calender .right-section .content {
  align-content: end;
  padding: var(--spacing-2) var(--spacing-4) var(--spacing-4) var(--spacing-4);
  height: 80px;
  background: linear-gradient(180deg, rgba(54, 32, 13, 0) 7.42%, rgba(54, 32, 13, 0.35) 32.74%, rgba(54, 32, 13, 0.5) 48.46%, rgba(54, 32, 13, 0.8) 90.57%),
    linear-gradient(180deg, rgba(54, 32, 13, 0) 23.45%, rgba(54, 32, 13, 0.035) 50.22%, rgba(54, 32, 13, 0.08) 61.45%);
}

.event-card-calender.giving-circle {
  width: 100%;
}

@media screen and (min-width: 960px) {
  .event-card-calender.giving-circle {
    width: 336px;
  }
}

/* Sustainer circle */

.sustainer-hero-video {
  height: 800px;
}

@media screen and (min-width: 960px) {
  .sustainer-hero-video {
    height: 1200px;
  }
}

@media screen and (min-width: 1280px) {
  .sustainer-hero-video {
    height: 810px;
  }
}

/* Chat */
.chat-sidebar {
  width: 100%;
}

@media screen and (min-width: 960px) {
  .chat-sidebar {
    width: 272px;
  }
}

@media screen and (min-width: 1280px) {
  .chat-sidebar {
    width: 312px;
  }
}

.chat-profile-img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}

.chat-profile-img-active {
  height: 48px;
  width: 48px;
  border-radius: 50%;
}

.chat-selector.active {
  border-left: 2.5px solid var(--color-secondary-1);
}

.chat-selector {
  background-color: transparent;
}

.chat-selector:hover {
  background-color: var(--color-secondary-3);
}

.chat-header {
  border-bottom: 1px solid var(--color-secondary-1);
}

.chat {
  height: calc(100vh - 66px);
  max-height: calc(100vh - 66px);
}

.send-btn {
  height: 48px;
  width: 48px;
  align-content: center;
  justify-content: center;
  background-color: transparent;
  border-color: transparent;
}

.chat-filter-btn {
  border-width: 1px;
  border-style: solid;
  border-radius: 100px;
  background-color: transparent;
  padding: 6px 12px;
  font-weight: 400;
  border-color: #E0E0E0;
}

.chat-filter-btn.active {
  border-width: 1px;
  border-style: solid;
  border-radius: 100px;
  background-color: transparent;
  padding: 6px 12px;
  font-weight: 600;
  border-color: #1A1A1A;
}

.search-bar {
  border-bottom: 1px solid var(--color-secondary-1);
}

.search-field {
  padding: 0px;
  border: none;
  background-color: transparent;
}

.bg-support-2 {
  background-color: #F0FDF4;
}

.message-bubble {
  max-width: 318px;
  border: 1px solid var(--color-secondary-1);
}

.message-bubble.sent {
  border-radius: 8px 0 8px 8px;
  background-color: var(--color-secondary-4);
}

.message-bubble.received {
  border-radius: 0 8px 8px 8px;
  background-color: var(--color-secondary-3);
}

.chat-back-btn {
  min-width: 0;
  padding: 0;
  border: none;
  background-color: transparent;
}

@media screen and (max-width: 959.98px) {
  #chatAbout {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
  }
}

.message-container {
  transition: height 0.25s ease-in-out;
  height: auto;
  overflow: hidden;
}

.message-container.hidden {
  height: 0px;
}

#chat-messages {
  scroll-behavior: smooth;
}

.profile-list-container {
  --bs-gutter-x: 8px;
  --bs-gutter-y: 32px
}

@media screen and (min-width: 960px) {
  .profile-list-container {
    --bs-gutter-x: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .profile-list-container {
    --bs-gutter-x: 42px;
  }
}

/* suggested story card */

.suggested-story {
  height: 112px;
  width: 100%;
  box-shadow: var(--cllctiv-box-shadow);
  border: 1px solid var(--color-secondary-3);
  flex-shrink: 0;
}

.suggested-story img {
  height: 100%;
  aspect-ratio: 1;
  flex: 0 0;
}

.suggested-story .text {
  -webkit-line-clamp: 2;
}

@media screen and (min-width: 960px) {
  .suggested-story {
    height: 262px;
    width: 648px;
  }

  .suggested-story .text {
    -webkit-line-clamp: 4;
  }
}

.cllctiv-100vh {
  height: calc(100vh - 72px);
}

.this-week-for-you {
  width: 300px;
  height: 112px;
  display: flex;
  text-decoration: none;
  flex-shrink: 0;
  background-color: var(--color-secondary-4);
  border: var(--border-width) solid var(--color-secondary-3);
  box-shadow: var(--cllctiv-box-shadow);
}

@media screen and (min-width: 960px) {
  .this-week-for-you {
    width: 480px;
    height: 200px;
  }
}

.this-week-for-you img {
  width: 112px;
  height: 112px;
  flex-shrink: 0;
}

@media screen and (min-width: 960px) {
  .this-week-for-you img {
    width: 200px;
    height: 200px;
  }
}

.this-week-for-you .content {
  padding: var(--spacing-4);
  flex-grow: 1;
}

@media screen and (min-width: 960px) {
  .this-week-for-you .content {
    padding: var(--spacing-5);
  }
}

/* Org detail profile card css style */
.org-profile-md-card {
  display: flex;
  gap: var(--spacing-5);
  width: 100%;
}

@media screen and (min-width: 960px) {
  .org-profile-md-card {
    gap: var(--spacing-6);
  }
}

.org-profile-md-card img {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
}

@media screen and (min-width: 960px) {
  .org-profile-md-card img {
    width: 184px;
    height: 184px;
  }
}

#orgServiceArea .row {
  --bs-gutter-x: var(--spacing-4);
  --bs-gutter-y: var(--spacing-4);
}

@media screen and (min-width: 960px) {
  #orgServiceArea .row {
    --bs-gutter-x: var(--spacing-5);
    --bs-gutter-y: var(--spacing-5);
  }
}

main:has(.directory-page),
main:has(.analytics-page),
main:has(.empty-full-page) {
  min-height: calc(100vh - 72px);
}

.notify-card {
  padding-block: var(--spacing-2);
  padding-inline: var(--spacing-3);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  background-color: var(--color-secondary-4);
  box-shadow: var(--cllctiv-box-shadow);
  text-decoration: none;
  border: 1px solid #AFA69E80;
  border-radius: var(--border-radius-1);
  min-width: 240px;
  max-width: 360px;
}
@media screen and (min-width: 960px) {
  .notify-card {
    padding-block: var(--spacing-3);
  }
}
.notify-card:hover {
  background-color: var(--color-secondary-3);
}

.full-width > * > .video-overlay.gradient > div {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-inline: var(--spacing-4);
  box-sizing: border-box;
}
.full-width > * > .video-overlay.gradient {
  padding-inline: 0px;
}
@media (min-width: 960px) {
  .full-width > * > .video-overlay.gradient > div {
    max-width: 960px;
  }
}
@media (min-width: 1280px) {
  .full-width > * > .video-overlay.gradient > div {
    max-width: 1280px;
    padding-inline: var(--spacing-7);
  }
}
@media (min-width: 1440px) {
  .full-width > * > .video-overlay.gradient > div {
    max-width: 1440px;
    padding-inline: var(--spacing-8);
  }
}
@media (min-width: 1520px) {
  .full-width > * > .video-overlay.gradient > div {
    max-width: 1520px;
  }
}

/* Auth carousel styles */
#authCarousel.carousel, #authCarousel .carousel-inner {
  height: 100%;
}
#authCarousel .indicators {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  justify-content: start;
}
#authCarousel .indicator-button {
  width: 8px;
  height: 8px;
  background-color: var(--color-secondary-3);
  border-radius: var(--border-radius-circle);
}
#authCarousel .indicator-button.active {
  width: 12px;
  height: 12px;
  background-color: var(--color-secondary-2);
}

/* Media File Preview Style */
.multi-media-uploader-drag .media-name-preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 400px;
  cursor: pointer;
  color: var(--color-links);
  font-size: var(--cllctiv-font-size-p4);
  line-height: var(--cllctiv-line-height-p4);
  letter-spacing: var(--cllctiv-letter-spacing-p4);
  font-family: var(--font-neue-haas-grotesk-display-pro);
  height: 40px;
}
#showMediaOffcanvas .media-preview {
  width: 100%;
  height: 100%;
}
.add-more-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  height: 40px;
  font-size: var(--cllctiv-font-size-p2);
  line-height: var(--cllctiv-line-height-p2);
  letter-spacing: var(--cllctiv-letter-spacing-p2);
  font-family: var(--font-neue-haas-grotesk-display-pro);
  cursor: pointer;
}
.add-more-btn svg {
  width: 24px;
  height: 24px;
}

.frwrd-blck-futrs-hero-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  padding-block: var(--spacing-8);
  flex-shrink: 0;
  background-image: var(--img-hero-bg);
  background-position: 50% 50%;
  background-size: cover;
  min-height: calc(100vh - 72px);
}
@media screen and (min-width: 960px) {
  .frwrd-blck-futrs-hero-section {
    padding-block: 120px;
  }
}
@media screen and (min-width: 1280px) {
  .frwrd-blck-futrs-hero-section {
    flex-direction: row;
    gap: var(--spacing-8);
    height: 819px;
    padding-block: var(--spacing-7);
  }
}
.frwrd-blck-futrs-hero-section .content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 24px;
  flex-shrink: 0;
  color: var(--color-secondary-4);
  max-width: 600px;
}
.frwrd-blck-futrs-hero-section #logo {
  width: 70%;
  max-width: 500px;
  aspect-ratio: 125/52;
}
@media screen and (min-width: 960px) {
  .frwrd-blck-futrs-hero-section #logo {
    width: 500px;
  }
}
.frwrd-blck-futrs-hero-section #heroImage {
  max-width: 85%;
  text-align: end;
}
@media screen and (min-width: 960px) {
  .frwrd-blck-futrs-hero-section #heroImage {
    max-width: 70%;
  }
}
@media screen and (min-width: 1280px) {
  .frwrd-blck-futrs-hero-section #heroImage {
    max-width: 100%;
  }
}

/* Metric section */
#metricSection {
    padding-block: 96px;
    gap: var(--spacing-6);
    text-align: center;
    background-color: var(--color-secondary-3);
}
@media screen and (min-width: 960px) {
    #metricSection {
        padding-block: 136px;
        gap: var(--spacing-9);
    }
}
@media screen and (min-width: 1280px) {
    #metricSection {
        padding-block: 168px;
        gap: var(--spacing-7);
    }
}
#metricSection .cllctiv-section-header {
    color: var(--color-secondary-1);
}
#metricSection .metric-card {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-4);
}
@media screen and (min-width: 960px) {
    #metricSection .metric-card {
        gap: var(--spacing-5);
    }
}
#metricSection .metric-card {
    align-content: end;
}
#metricSection .metric-card svg {
    width: 40px;
    height: 40px;
}
@media screen and (min-width: 960px) {
    #metricSection .metric-card svg {
        width: 62px;
        height: 62px;
    }
}


/* Error page related styles */
.error-section {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.error-card {
  text-align: center;
  max-width: 600px;
}


/* Video embedding */
.embed-video {
  width: 100%;
  aspect-ratio: 16/9;
}
.embed-video iframe {
  width: 100%;
  height: 100%;
}

/* Manage Card */

.manage-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-secondary-4);
  border: 1px var(--color-secondary-3) solid;
  box-shadow: var(--cllctiv-box-shadow);
}
.manage-card.people {
  min-height: 0px;
}
.manage-card.org {
  min-height: 136px;
}

.manage-card img {
  display: block;
  height: 48px;
  aspect-ratio: 1;
  border: 1px var(--color-secondary-3) solid;
}

.manage-card img.circle {
  border-radius: 50%;
}

/* Manage Card Large */

.manage-card-lg {
  background-color: var(--color-secondary-4);
  border: 1px var(--color-secondary-3) solid;
  box-shadow: var(--cllctiv-box-shadow);
}

/* Stacked Bar Chart */
.stacked-bar-chart {
  height: 350px;
  width: 100%;
}

/* Multi Toggle Switch */

.cllctiv-multi-toggle-switch {
  display: flex;
  width: max-content;
  background-color: var(--color-secondary-3);
  border-radius: 100px;
  box-shadow: var(--cllctiv-box-shadow);
}
.cllctiv-multi-toggle-switch .option {
  font-family: var(--font-neue-haas-grotesk-display-pro-roman);
  font-size: var(--cllctiv-font-size-p3);
  line-height: var(--cllctiv-line-height-p3);
  letter-spacing: var(--cllctiv-letter-spacing-p3);
  color: var(--color-secondary-1);
  min-width: 120px;
  padding: var(--spacing-2) var(--spacing-4);
  text-align: center;
}
.cllctiv-multi-toggle-switch .option.active {
  font-family: var(--font-neue-haas-grotesk-display-pro);
  color: var(--color-primary);
  background-color: var(--color-secondary-4);
  border: 1px var(--color-primary) solid;
  border-radius: 100px;
}

/* Overview Collapse */

.cllctiv-overview-collapse #collapseOverviewTrigger svg {
  transition: transform 0.25s ease;
  transform: rotate(0deg);
}
.cllctiv-overview-collapse #collapseOverviewTrigger.collapsed svg {
  transform: rotate(180deg);
}

/* User Admin Page */

.cllctiv-section#cllctivUserAdminHeader {
  margin-top: var(--spacing-5);
  margin-bottom: var(--spacing-7);
}

.cllctiv-section#cllctivUserAdminHeader img.user {
  display: block;
  height: 168px;
  width: 168px;
  border: 1px var(--color-secondary-4) solid;
  border-radius: 50%;
  flex-shrink: 0;
}
.cllctiv-section#cllctivUserAdminHeader img.org {
  display: block;
  height: 40px;
  width: 40px;
  flex-shrink: 0;
}
.cllctiv-section#cllctivUserAdminHeader .underline {
  width: 100%;
  height: 4px;
  background-color: var(--color-secondary-1);
  border-radius: 100px;
}