:root {
  /* ========================================
   Color System - UI Colors
   ======================================== */

  --color-primary: #2e2a94;
  --color-secondary: #faad19;
  --color-white: #fff;
  --color-black: #000;
  --color-mo-light-blue: #f7f9ff;
  --color-market-bearish: #ee212e;
  --color-market-bullish: #00a850;
  --color-background-light-blue: #e6f1f9;
  --color-border-light-blue: #c4dbef;
  --color-black-overlay: rgb(0 0 0 / 60%);
  --color-background-mo-black: rgb(255 255 255 / 7%);
  --color-background-mo-blue: #edf1ff;
  --color-accent-primary: #2c2383; /* deep primary accent */
  --color-accent-primary-faint-bg: rgb(44 35 131 / 5%);
  --color-background-faint: rgb(224 223 251 / 57%);
  --button-primary-bg: #004080;
  --capsule-border: #382ad7;
  --color-background-placeholder: #d9d9d9;
  --color-info-panel-description: #2b2e8c;
  --color-info-panel-button-hover: #052f60;
  --color-bg-blue: #dee5ff;
  --color-light-bullish-white: #bdcbff;
  --color-light-blue: #d5deff;
  --color-medium-blue: #edf1ff;
  --color-background-light-gray: #f4f4f4;
  --color-dark-text: #333;
  --color-charcoal: #424242;
  --color-grey-border: #bdbdbd;
  --color-dark-border: #424242;
  --color-light-blue-1: #edf1ff;
  --color-light-grey-border: #757575;
  --color-border-light-grey: #ddd;
  --color-border-filter: #9e9e9e;
  --color-light-grey: #f9f9fc;
  --color-border-milestone-gray: rgb(46 42 148 / 20%);
  --color-progress-bar-bg: rgb(255 255 255 / 30%);
  --color-milestone-year-item: 0 1px 0 0 rgb(0 0 0 / 15%);
  --color-dark-blue-new: #2e3085;
  --color-gray-new: #9e9e9e;
  --color-bg-light-grey: #fafafa;
  --color-line-gray-color: #dfdfdf;
  --color-background-mo-light-blue: #f5f7ff;
  --color-green: #068c46;
  --color-text-accordion: rgb(46 42 148 / 2%);
  --color-bg-label: #f7f7fb;
  --color-bg-section-overlay: rgb(242 242 249 / 60%);
  --color-subtitle-new: #d1d5db;
  --color-background-card-new: #f9f9fc;
  --color-border-chip-new: rgb(46 42 148 / 20%);
  --color-chip-active-bg-new: #f5f7ff;
  --color-placeholder-text-new: #6b7280;
  --color-placeholder-bg-new: #f9fafb;
  --color-placeholder-border-new: #e5e7eb;
  --color-border-dropdown-new: rgb(57 57 57 / 50%);
  --color-card-shadow-new: rgb(0 0 0 / 7%);
  --color-market-bullish-alt: #00a580;
  --color-border-gray: #e0e0e0;
  --nav-height: 78px;
  --color-light-black-2: rgb(0 0 0 / 10%);
  --color-gray-22: #252b37;
  --color-light-gray-15: #f7f7f7;

     /* box shadow */
    --primary-boxshadow: 4px 4px 12px 0 rgb(30 51 72 / 15%),
        0 16px 48px 0 rgb(112 144 176 / 30%);

   /* Neutral colours */
   --color-neutral-25: #fafbfc;
    --color-neutral-50: #f4f5f7;
    --color-neutral-100: #ebecf0;
    --color-neutral-200: #dfe1e5;
    --color-neutral-300: #d3d7dd;
    --color-neutral-400: #b6bcc7;
    --color-neutral-500: #99a1b0;
    --color-neutral-600: #6d798e;
    --color-neutral-700: #42526e;
    --color-neutral-800: #182a4e;
    --color-neutral-900: #111d37;
    --color-neutral-1200: #f3f6f8;
    --color-silver-mist: #ddd;
    --color-dark-green: #009b00;
    --color-gray-10: #c6c6c6;
    --color-dark-gray-1: #2e3238;
    --color-gray-23: #414651;
    --color-light-gray-16: #e9eaeb;

     /* Primary Colors */
    --page-bg-color: #fff;

   /* common */
    --color-text-primary: #2e2a94;
    --color-text-secondary: #2e2a94;

     /* text */
    --hero-secondary-color: var(--color-neutral-900);
    --text-title-color: var(--color-neutral-800);
    --text-color: var(--color-text-primary);
    --text-light: var(--color-text-secondary);
    --link-color: var(--brand-sky-blue-color-500);
    --text-seaction-heading: var(--brand-primary-600);
    --tabs-bg-active-color: var(--brand-sky-blue-color-500);
    --tabs-bg-color: var(--color-neutral-50);
    --tabs-color: var(--color-neutral-600);

     /** Brand Blue **/
    --brand-primary-600: #2b2e8c;
    --brand-blue-dark: #0a1f50;
    --brand-sky-blue-color-500: #006eb9;
    --brand-sky-blue-color-600: #005dac;
    --brand-sky-blue-color-800: #012d94;
    --brand-color-25: #f7f9ff;
    --brand-color-lightblue: #d5d7ff;

       /* Error Colors */
    --color-error-dark: #e52f2f;
    --color-error-medium: #e03131;
    --color-error-light: #ffebeb;
    --color-negative-light: #f06d70;
    --color-focused-border: #d24d57;

  /* ========================================
   Gradient System
   ======================================== */

  --gradient-card-border-primary: linear-gradient(
    137.21deg,
    #2e2a94 -4.46%,
    #fff 35.85%,
    #fff 70.47%,
    #faad19 103.02%
  );
  --gradient-card-border-secondary: linear-gradient(
    135deg,
    #faad19 -8.31%,
    #fff 41.75%,
    #fff 85.62%,
    #2e2a94 120.23%
  );
  --gradient-card-border-tertiary: linear-gradient(white, white) padding-box,
    linear-gradient(to bottom right, #2e2a94 0%, #fff 55%, #faad19 100%)
      border-box;
  --gradient-card-border-quaternary: linear-gradient(white, white) padding-box,
    linear-gradient(to bottom, #2e2a94 0%, #fff 55%, #faad19 100%) border-box;
  --gradient-banner-dark: linear-gradient(270deg, #2e2a94 0%, #0e0d2e 177.41%);
  --gradient-banner-light: linear-gradient(
    273.48deg,
    rgb(0 93 172 / 17.1%) -29.01%,
    rgb(255 255 255 / 30%) 42.62%
  );
  --gradient-image-border: linear-gradient(
    148.47deg,
    #fecf08 14.15%,
    #faad1b 88.46%
  );
  --gradient-overlay: linear-gradient(
    270deg,
    rgb(46 42 148 / 0%) -21.84%,
    #2e2a94 111.19%,
    #1c1a5c 125.97%
  );
  --overlay-primary-50: rgb(46 42 148 / 50%);
  --gradient-overlay-primary-50: linear-gradient(
    0deg,
    rgb(46 42 148 / 50%) 0%,
    rgb(46 42 148 / 50%) 100%
  );
  --gradient-overlay-dark: linear-gradient(
    180deg,
    rgb(0 0 0 / 70%) 9.84%,
    rgb(0 0 0 / 0%) 58.75%
  );
  --gradient-banner-overlay: linear-gradient(
    270deg,
    rgb(0 0 0 / 0%) -43.26%,
    rgb(0 0 0 / 20%) 50%
  );
  --gradient-card-background: linear-gradient(
    135deg,
    #b9bbff 0%,
    #e8e9ff 50%,
    #b9bbff 100%
  );
  --gradient-overlaycard-background: linear-gradient(
    154deg,
    #2e2a94 0%,
    #fff 47.14%,
    #fb8c00 100.07%
  );
  --gradient-overlaycard: linear-gradient(
    to bottom,
    rgb(46 42 148 / 0%) -21.84%,
    #2e2a94 111.19%,
    #1c1a5c 125.97%
  );
  --gradient-overlay-primary-65: rgb(46 42 148 / 65%);
  --gradient-icon-text-image-card-hover: linear-gradient(
    192deg,
    #2e2a94 0.41%,
    #332ab5 91.26%
  );
  --gradient-overlay-light-blue: linear-gradient(180deg, #edf1ff 0%, #fff 100%);
  --gradient-whiteblue: linear-gradient(180deg, #edf1ff 0%, #fff 100%);
  --gradient-black-fade: linear-gradient(
    180deg,
    rgb(0 0 0 / 0%) 34.77%,
    #000 95.81%
  );
  --gradient-milestone-blur-effect: linear-gradient(
    to bottom,
    rgb(247 249 255 / 100%),
    rgb(247 249 255 / 0%)
  );
  --gradient-milestone-prenext: linear-gradient(0deg, #2e2a94 0%, #2e2a94 100%),
    linear-gradient(144deg, #ffd200 40.85%, #f7971e 98.66%);
  --gradient-investor-highlight-accordion-bg: linear-gradient(
    286deg,
    #dae1f8 -56.46%,
    #fff 52.87%
  );
  --gradient-vertical-slider: linear-gradient(
    178deg,
    rgb(217 217 217 / 0%) -214.5%,
    #fff 86.09%
  );
  --gradient-equity-cards-border: linear-gradient(90deg, #2e2a94, #faad19);

  /* ========================================
   Background Patterns
   ======================================== */

  --pattern-1: url("/images/wave-bg.svg");
  --pattern-2: url("/images/curve.svg");
  --pattern-3: url("/images/swoosh-about.svg");
  --pattern-4: url("/images/swoosh-small.svg");
  --pattern-5: url("/images/strips-circle.svg");
  --pattern-6: url("/images/circular-center-stripe.svg");
  --pattern-7: url("/images/wave_blue.svg");

  /* ========================================
   Shadow System
   ======================================== */

  --shadow-card: -10.56px 5.28px 20px 0px #00000014;
  --shadow-media-card: 0px 0px 8px 0px #0000000f;
  --contact-us-form-shadow: 0 0.25rem 1.25rem 0 #00000014;
  --shadow-highlight-cards: 0 0 34px 0 #2e2a9419;
  --text-carousel-shadow: 0 8px 24px 0 rgb(115 96 0 / 15%);
  --shadow-accordion: 0 0 9.031px 0 rgb(46 42 148 / 10%);

  /* ========================================
   Spacing System
   ======================================== */

  --section-tob-btm-gap: 0;
  --layout-width: 79rem; /* 1232px + padding 32px */
  --layout-padding-mobile: 1rem; /* 16px */
  --layout-padding-tablet: 2.5rem; /* 40px */
  --layout-padding-desktop: 5rem; /* 80px */
  --header-height: 6rem; /* 96px */

  /* ========================================
   Typography System
   ======================================== */

  /* Font Families */
  --body-font-family: inter, sans-serif;
  --heading-font-family: inter, sans-serif;
  --font-primary: "Poppins", -apple-system, blinkmacsystemfont, "Segoe UI",
        roboto, "Helvetica Neue", arial, sans-serif;
  --font-secondary: "Butler", -apple-system, blinkmacsystemfont, "Segoe UI",
        roboto, "Helvetica Neue", arial, sans-serif;

  /* Font Feature Settings */
  --font-feature-settings: "ss01" on, "ss04" on, "cv01" on, "cv02" on, "cv03" on,
    "cv04" on, "cv06" on, "cv09" on, "cv10" on, "cv11" on;

  /* Font Sizes - Mobile */
  --font-size-display-xl: 2rem; /* 32px */
  --font-size-display-lg: 1.5rem; /* 24px */
  --font-size-heading-1: 1.5rem; /* 24px */
  --font-size-heading-2: 1.25rem; /* 20px */
  --font-size-heading-3: 1.125rem; /* 18px */
  --font-size-heading-4: 1rem; /* 16px */
  --font-size-heading-5: 0.875rem; /* 14px */
  --font-size-heading-6: 0.75rem; /* 12px */
  --font-size-body-xxl: 0.875rem; /* 14px */
  --font-size-body-xl: 1rem; /* 16px */
  --font-size-body-xl-alt: 0.875rem; /* 14px */
  --font-size-body-lg: 0.875rem; /* 14px */
  --font-size-body-lg-alt: 0.75rem; /* 12px */
  --font-size-body-base: 0.875rem; /* 14px */
  --font-size-body-sm: 0.625rem; /* 10px */
  --font-size-body-xs: 0.625rem; /* 10px */
  --font-size-fixed-xs: 0.625rem; /* 10px */
  --font-size-body-xs-alt: 0.75rem; /* 12px */
  --font-size-fixed-sm: 0.75rem; /* 12px */
  --font-size-fixed-md: 0.875rem; /* 14px */
  --font-size-fixed-lg: 1rem; /* 16px */
  --font-size-fixed-xl: 1.125rem; /* 18px */
  --font-size-fixed-2xl: 1.25rem; /* 20px */
  --font-size-fixed-4xl: 2.25rem; /* 36px */
  --font-size-fixed-heading-6: 0.75rem; /* 12px */
  --font-size-fixed-heading-1: 1.5rem; /* 24px */
  --font-size-fixed-display-xl: 2rem; /* 32px */
  --font-size-fixed-h3: 1.75rem; /* 28px */
   --f-s-body: 16px;

  /* Line Heights - Mobile */
  --line-height-heading-1: 2.375rem; /* 38px */
  --line-height-heading-2: 2rem; /* 32px */
  --line-height-heading-3: 1.75rem; /* 28px */
  --line-height-heading-4: 1.625rem; /* 26px */
  --line-height-heading-5: 1.5rem; /* 24px */
  --line-height-heading-6: 1rem; /* 16px */
  --line-height-fixed-ml: 0.875rem; /* 14px */
  --line-height-fixed-heading-5: 1.5rem; /* 24px */
  --line-height-fixed-heading-6: 1rem; /* 16px */
  --line-height-fixed-heading-3: 1.75rem; /* 28px */
  --line-height-fixed-heading-4: 1.625rem; /* 26px */
  --line-height-fixed-sm: 1.25rem; /* 20px */
  --line-height-fixed-l: 2.5rem; /* 40px */
  --line-height-fixed-heading-2: 2rem; /* 32px */

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* ========================================
   Z-Index System
   ======================================== */

  --z-index-1: 1;
  --z-index-2: 5;
  --z-index-3: 10;
  --z-index-4: 15;
  --z-index-5: 20;
  --z-index-header: 30;
  --z-index-overlay: 40;
  --z-index-modal: 50;

  /* ========================================
  Box Shadow Styles
   ======================================== */
  --info-card-item-shadow: -10.56px 5.28px 20px 0px rgb(0 0 0 / 8%);
  --info-card-shadow: 0 10px 30px rgb(0 0 0 / 8%);
  --listing-card-shadow: 0px 0px 8px 0px rgb(0 0 0 / 6%);
  --color-boxshadow: 0 0 64px 0 rgb(46 42 148 / 6%);
  --color-boxshadow-white: 0 0 18.859px 0 rgb(46 42 148 / 7%);
  --color-boxshadow-textcard: 0 0 74px 0 rgb(46 42 148 / 7%);
  --color-boxshadow-prenext-milestone: 0 8px 24px 0 rgb(115 96 0 / 15%);
  --color-accordion-item: 0 4px 40px rgb(0 0 0 / 7%);
  --color-boxshadow-equity-card: 0 4px 40px 0 rgb(6 29 148 / 2%);
}

.space-btw {
    justify-content: space-between;
}

@media (width > 768px) {
  :root {
    --font-size-display-xl: 10.25rem; /* 164px */
    --font-size-display-lg: 4rem; /* 64px */
    --font-size-heading-1: 3rem; /* 48px */
    --font-size-heading-2: 2.5rem; /* 40px */
    --font-size-heading-3: 2.25rem; /* 36px */
    --font-size-heading-4: 2rem; /* 32px */
    --font-size-heading-5: 1.75rem; /* 28px */
    --font-size-heading-6: 1.5rem; /* 24px */
    --font-size-heading-xxl: 1.5rem; /* 24px */
    --font-size-body-xxl: 1.5rem; /* 24px */
    --font-size-body-xl: 1.25rem; /* 20px */
    --font-size-body-xl-alt: 1.25rem; /* 20px */
    --font-size-body-lg: 1.125rem; /* 18px */
    --font-size-body-lg-alt: 1.125rem; /* 18px */
    --font-size-body-base: 1rem; /* 16px */
    --font-size-body-sm: 0.875rem; /* 14px */
    --font-size-body-xs: 0.75rem; /* 12px */
    --font-size-body-xs-alt: 1rem; /* 16px */
    --font-size-fixed-body-xs-alt: 1rem; /* 16px */
    --font-size-fixed-heading-4: 2rem; /* 32px */
    --font-size-fixed-body-xl: 1.25rem; /* 20px */
    --font-size-fixed-heading-6: 1.5rem; /* 24px */
    --font-size-fixed-sm-2: 0.9375rem; /* 15px */
    --font-size-fixed-heading-1: 3rem; /* 48px */
    --font-size-fixed-heading-2: 2.5rem; /* 40px */
    --font-size-fixed-heading-5: 1.75rem; /* 28px */
    --font-size-fixed-heading-36: 2.25rem; /* 36px */
    --font-size-fixed-body-sm: 0.875rem; /* 14px */
    --font-size-fixed-display-lg: 4rem; /* 64px */
    --font-size-fixed-body-lg-alt: 1.125rem; /* 18px */

    /* Line Heights - Desktop */
    --line-height-heading-1: 4.5rem; /* 72px */
    --line-height-heading-2: 3.5rem; /* 56px */
    --line-height-heading-3: 3rem; /* 48px */
    --line-height-heading-4: 2.75rem; /* 44px */
    --line-height-heading-5: 2.5rem; /* 40px */
    --line-height-heading-6: 2rem; /* 32px */
    --line-height-fixed-heading-4: 2.75rem; /* 44px */
    --line-height-fixed-l: 1.75rem; /* 28px */
    --line-height-fixed-md: 1.25rem; /* 20px */
    --line-height-fixed-sm: 1rem; /* 16px */
    --line-height-fixed-heading-3: 3rem; /* 48px */
    --line-height-fixed-md-2: 1.5rem; /* 24px */
    --line-height-fixed-heading-2: 3.5rem; /* 56px */
    --line-height-fixed-heading-6: 2rem; /* 32px */
    --line-height-fixed-heading-5: 2.5rem; /* 40px */
    --line-height-fixed-display-lg: 4.75rem; /* 76px */
  }
}

@media (width > 1024px) {
    :root {
        --nav-height: 120px;
    }
}

/* ========================================
   Box-sizing
   ======================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

header {
    height: var(--nav-height);
}

header .header,
footer .footer {
    visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
    visibility: visible;
}

a {
    color: var(--link-color);
    text-decoration: none;
    font-size: var(--f-s-body);
    line-height: var(--line-height-sm);
    font-family: inherit;
    font-style: normal;
    font-weight: normal;
    cursor: pointer;
}

/* body {
  display: none;
  margin: 0;
  background-color: var(--color-white);
  color: var(--color-primary);
  font-family: var(--body-font-family);
  font-size: var(--font-size-body-base);
  line-height: 1.2;
}

@media screen and (-webkit-min-device-pixel-ratio: 1.4) and (-webkit-max-device-pixel-ratio: 1.7) {
  body {
    zoom: 0.8;
  }
} */

body {
    display: block;
    margin: 0;
    background: url("/images/common-bg.webp") top right / 100% auto no-repeat;
    background-color: var(--page-bg-color);
    color: var(--text-color);
    font-family: var(--font-primary);
    font-size: var(--f-s-body);
    line-height: 1.5;
    min-height: 100vh;
}

body.appear {
  display: block;
}

/* ========================================
   Typography Elements
   ======================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-primary);
  font-family: var(--heading-font-family);
  font-weight: var(--font-weight-semibold);
  scroll-margin: 40px;
  margin-block: 0;
}

h1 {
  font-size: var(--font-size-heading-1);
  line-height: var(--line-height-heading-1);
}

h2 {
  font-size: var(--font-size-heading-2);
  line-height: var(--line-height-heading-2);
}

h3 {
  font-size: var(--font-size-heading-3);
  line-height: var(--line-height-heading-3);
}

h4 {
  font-size: var(--font-size-heading-4);
  line-height: var(--line-height-heading-4);
}

h5 {
  font-size: var(--font-size-heading-5);
  line-height: var(--line-height-heading-5);
}

h6 {
  font-size: var(--font-size-heading-6);
  line-height: var(--line-height-heading-6);
}

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: 0;
  margin-bottom: 1rem;
  font-family: var(--body-font-family);
}

code,
pre {
  font-size: var(--font-size-body-base);
}

pre {
  padding: 1rem;
  border-radius: 8px;
  background-color: var(--color-white);
  overflow-x: auto;
  white-space: pre;
}

/* ========================================
   Text Highlight Classes
   ======================================== */

/* ========================================
   Text Alignment Classes
   ======================================== */

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

/* ========================================
   Text Highlight Classes
   ======================================== */

.custom-text.secondary-highlight strong {
  color: var(--color-secondary);
}

/* ========================================
   Custom Text Block - Text Color Overrides
   ======================================== */

.custom-text .text-primary,
.custom-text .text-primary h1,
.custom-text .text-primary h2,
.custom-text .text-primary h3,
.custom-text .text-primary h4,
.custom-text .text-primary h5,
.custom-text .text-primary h6 {
  color: var(--color-primary);
}

.custom-text .text-secondary,
.custom-text .text-secondary h1,
.custom-text .text-secondary h2,
.custom-text .text-secondary h3,
.custom-text .text-secondary h4,
.custom-text .text-secondary h5,
.custom-text .text-secondary h6 {
  color: var(--color-secondary);
}

.custom-text .text-white,
.custom-text .text-white h1,
.custom-text .text-white h2,
.custom-text .text-white h3,
.custom-text .text-white h4,
.custom-text .text-white h5,
.custom-text .text-white h6 {
  color: var(--color-white);
}

.custom-text .text-red,
.custom-text .text-red h1,
.custom-text .text-red h2,
.custom-text .text-red h3,
.custom-text .text-red h4,
.custom-text .text-red h5,
.custom-text .text-red h6 {
  color: var(--color-market-bearish);
}

.custom-text .text-green,
.custom-text .text-green h1,
.custom-text .text-green h2,
.custom-text .text-green h3,
.custom-text .text-green h4,
.custom-text .text-green h5,
.custom-text .text-green h6 {
  color: var(--color-market-bullish);
}

/* ========================================
   Text Font Size Classes
   ======================================== */

.text-h1 {
  font-size: var(--font-size-heading-1);
  line-height: var(--line-height-heading-1);
  font-family: var(--heading-font-family);
  font-weight: 600;
}

.text-h2 {
  font-size: var(--font-size-heading-2);
  line-height: var(--line-height-heading-2);
  font-family: var(--heading-font-family);
  font-weight: 600;
}

.text-h3 {
  font-size: var(--font-size-heading-3);
  line-height: var(--line-height-heading-3);
  font-family: var(--heading-font-family);
  font-weight: 600;
}

.text-h4 {
  font-size: var(--font-size-heading-4);
  line-height: var(--line-height-heading-4);
  font-family: var(--heading-font-family);
  font-weight: 600;
}

.text-h5 {
  font-size: var(--font-size-heading-5);
  line-height: var(--line-height-heading-5);
  font-family: var(--heading-font-family);
  font-weight: 600;
}

.text-h6 {
  font-size: var(--font-size-heading-6);
  line-height: var(--line-height-heading-6);
  font-family: var(--heading-font-family);
  font-weight: 600;
}

.text-body-xl {
  font-size: var(--font-size-body-xl);
  font-family: var(--body-font-family);
}

.text-body-lg {
  font-size: var(--font-size-body-lg);
  font-family: var(--body-font-family);
}

.text-body-base {
  font-size: var(--font-size-body-base);
  font-family: var(--body-font-family);
}

.text-body-sm {
  font-size: var(--font-size-body-sm);
  font-family: var(--body-font-family);
}

.text-body-xs {
  font-size: var(--font-size-body-xs);
  font-family: var(--body-font-family);
}

/* ========================================
   Button System
   ======================================== */

/* Base Button Styles */
.button,
a.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.9375rem 1.125rem;
  font-family: inter, sans-serif;
  font-size: 1.125rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.25rem;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.button:active,
a.button:active {
  transform: translateY(1px);
}

/* Button Icon Pseudo-element */
.button::before,
a.button::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease, filter 0.3s ease;
  order: 1; /* Places icon after text by default */
}

/* ========================================
   Button Variations
   ======================================== */

/* Default Button (No Background) */
.button.default,
a.button.default {
  background-color: transparent;
  color: var(--color-primary);
  padding: 0;
}

.button.default::before,
a.button.default::before {
  background-image: url("../icons/arrow-right-blue.svg");
}

/* Primary Button (With Arrow Icon) */
.button.primary,
a.button.primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.button.primary::before,
a.button.primary::before {
  background-image: url("../icons/arrow-right.svg");
}

.button.primary::after,
a.button.primary::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--color-secondary);
  transform: translateX(-100%);
  transition: transform 0.4s ease;
}

.button.primary:hover::after,
a.button.primary:hover::after {
  transform: translateX(0);
}

.button.primary:focus,
a.button.primary:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Secondary Button (With Play Icon) */
.button.secondary,
a.button.secondary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.button.secondary::before,
a.button.secondary::before {
  background-image: url("../icons/play-circle.svg");
}

.button.secondary::after,
a.button.secondary::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--color-secondary);
  transform: translateX(-100%);
  transition: transform 0.4s ease;
}

.button.secondary:hover::after,
a.button.secondary:hover::after {
  transform: translateX(0);
}

.button.secondary:focus,
a.button.secondary:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Icon before text */
.button.icon-left::before,
a.button.icon-left::before {
  order: -1;
}

/**
  * ========================================
    Section layout
    ========================================
  */

/* stylelint-disable-next-line media-feature-name-no-vendor-prefix */
@media screen and (-webkit-min-device-pixel-ratio: 1.4) and (-webkit-max-device-pixel-ratio: 1.7) {
    .group-page main{
        zoom: 0.8;
    }
} 


main > .section {
  padding: 1.875rem 0; /* 30px top and bottom */
  margin: 0;
}

main > .section > div {
  max-width: var(--layout-width);
  margin: auto;
  padding: 0 16px;
}

main > .section.section-full-width > div {
  max-width: 100%;
  padding: 0;
}

@media (width > 768px) {
  main > .section {
    padding: 5.625rem 0; /* 90px top and bottom */
  }
}


/* ========================================
   Section Background Colors
   ======================================== */

main .section.white-bg {
  background-color: var(--color-white);
}

main .section.grey-bg {
  background-color: var(--color-background-grey);
}

main .section.light-blue-bg {
  background-color: var(--color-background-light-blue);
}

main .section.mo-blue-bg {
  background-color: var(--color-background-mo-blue);
}

main .section.mo-blue-pg {
  background-color: var(--color-background-mo-blue);
  padding-top: 2.5rem;
}

main .section.mo-primary-bg {
  background-color: var(--color-primary);
}

main .section.section-bg {
  background-color: var(--color-background-grey-dark);
}

/* ========================================
   Section Background Gradients
   ======================================== */

main .section.banner-dark-gradient {
  background: var(--gradient-banner-dark);
}

main .section.banner-light-gradient {
  background: var(--gradient-banner-light);
}

main .section.overlay-gradient {
  background: var(--gradient-overlay);
}

main .section.overlay-dark-gradient {
  background: var(--gradient-overlay-dark);
}

main .section.banner-overlay-gradient {
  background: var(--gradient-banner-overlay);
}

main .section.overlay-light-blue-gradient {
  background: var(--gradient-overlay-light-blue);
}

main .section.banner-whiteblue {
  background: var(--gradient-whiteblue);
}

/* ========================================
   Section Bottom Borders
   ======================================== */

main .section.border-bottom-blue {
  border-bottom: 0.625rem solid var(--color-primary);
}

@media (width >= 769px) {
  main .section.border-bottom-blue {
    border-bottom: 1.25rem solid var(--color-primary);
  }
}

/* ========================================
   Section Background Patterns
   ======================================== */

main .section.wave-pattern {
  background-image: var(--pattern-1);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

main .section.curve-pattern {
  background-image: var(--pattern-2);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

main .section.swoosh-pattern {
  background-image: var(--pattern-3);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
}

main .section.swoosh-small-pattern {
  background-image: var(--pattern-4);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

main .section.strips-circle-pattern {
  background-image: var(--pattern-5);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: auto;
}

main .section.wave-blue-pattern {
  background-image: var(--pattern-7);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

/* ========================================
   Section Background Combinations
   ======================================== */

main .section.dark-blue-stripes {
  background-image: var(--pattern-5), var(--gradient-banner-dark);
  background-repeat: no-repeat, no-repeat;
  background-position: top right, center center;
  background-size: 25%, cover;
}

@media (width > 768px) {
  main .section.dark-blue-stripes {
    background-size: auto, cover;
  }
}

/* ========================================
   Display Utilities
   ======================================== */

/* Hide on Mobile */
main .section.hide-mobile {
  display: none;
}

@media (width > 768px) {
  main .section.hide-mobile {
    display: block;
  }
}

/* Hide on Desktop */
main .section.hide-desktop {
  display: block;
}

@media (width > 768px) {
  main .section.hide-desktop {
    display: none;
  }
}

/* ========================================
   Section Spacing - Mobile First
   ======================================== */

/* Padding Top - Mobile */
main > .section.pt-0 {
  padding-top: 0;
}

main > .section.pt-xs {
  padding-top: 1.875rem; /* 30px */
}

main > .section.pt-sm {
  padding-top: 2.5rem; /* 40px */
}

main > .section.pt-md {
  padding-top: 3.125rem; /* 50px */
}

main > .section.pt-lg {
  padding-top: 3.75rem; /* 60px */
}

/* Padding Bottom - Mobile */
main > .section.pb-0 {
  padding-bottom: 0;
}

main > .section.pb-xs {
  padding-bottom: 1.875rem; /* 30px */
}

main > .section.pb-sm {
  padding-bottom: 2.5rem; /* 40px */
}

main > .section.pb-sm-fixed {
  padding-bottom: 2.5rem; /* 40px */
}

main > .section.pb-md {
  padding-bottom: 3.125rem; /* 50px */
}

main > .section.pb-lg {
  padding-bottom: 3.75rem; /* 60px */
}

/* Padding Y (py) - Mobile */
main > .section.py-xxs-f {
  padding-top: 1.25rem; /* 20px */
  padding-bottom: 1.25rem; /* 20px */
}

main > .section.py-sm-f {
  padding-top: 2.5rem; /* 40px */
  padding-bottom: 2.5rem; /* 40px */
}

main > .section.py-xs {
  padding-top: 1.875rem; /* 30px */
  padding-bottom: 1.875rem; /* 30px */
}

main > .section.py-sm {
  padding-top: 2.5rem; /* 40px */
  padding-bottom: 2.5rem; /* 40px */
}

main > .section.py-md {
  padding-top: 3.125rem; /* 50px */
  padding-bottom: 3.125rem; /* 50px */
}

main > .section.py-lg {
  padding-top: 3.75rem; /* 60px */
  padding-bottom: 3.75rem; /* 60px */
}

/* Margin Top - Mobile */
main > .section.mt-0 {
  margin-top: 0;
}

main > .section.mt-xxs {
  margin-top: 0.438rem; /* 7xpx */
}

main > .section.mt-xs {
  margin-top: 1.25rem; /* 20px */
}

main > .section.mt-sm {
  margin-top: 1.875rem; /* 30px */
}

main > .section.mt-md {
  margin-top: 2.5rem; /* 40px */
}

/* Margin Bottom - Mobile */
main > .section.mb-0 {
  margin-bottom: 0;
}

main > .section.mb-xs {
  margin-bottom: 1.25rem; /* 20px */
}

main > .section.mb-sm {
  margin-bottom: 1.875rem; /* 30px */
}

main > .section.mb-md {
  margin-bottom: 2.5rem; /* 40px */
}

/* Margin Y (my) - Mobile */
main > .section.my-xs {
  margin-top: 1.25rem; /* 20px */
  margin-bottom: 1.25rem; /* 20px */
}

main > .section.my-sm {
  margin-top: 1.875rem; /* 30px */
  margin-bottom: 1.875rem; /* 30px */
}

main > .section.my-md {
  margin-top: 2.5rem; /* 40px */
  margin-bottom: 2.5rem; /* 40px */
}

@media (width > 768px) {
  /* Padding Top - Desktop */
  main > .section.mt-xxs {
    margin-top: 0.188rem; /* 3xpx */
  }

  main > .section.pt-xs {
    padding-top: 4.375rem; /* 70px */
  }

  main > .section.pt-sm {
    padding-top: 5rem; /* 80px */
  }

  main > .section.pt-md {
    padding-top: 5.625rem; /* 90px */
  }

  main > .section.pt-lg {
    padding-top: 6.25rem; /* 100px */
  }

  main > .section.pt-xl {
    padding-top: 6.875rem; /* 110px */
  }

  /* Padding Bottom - Desktop */
  main > .section.pb-xs {
    padding-bottom: 4.375rem; /* 70px */
  }

  main > .section.pb-sm {
    padding-bottom: 5rem; /* 80px */
  }

  main > .section.pb-md {
    padding-bottom: 5.625rem; /* 90px */
  }

  main > .section.pb-lg {
    padding-bottom: 6.25rem; /* 100px */
  }

  main > .section.pb-xl {
    padding-bottom: 6.875rem; /* 110px */
  }

  /* Padding Y (py) - Desktop */
  main > .section.py-xs {
    padding-top: 4.375rem; /* 70px */
    padding-bottom: 4.375rem; /* 70px */
  }

  main > .section.py-sm {
    padding-top: 5rem; /* 80px */
    padding-bottom: 5rem; /* 80px */
  }

  main > .section.py-md {
    padding-top: 5.625rem; /* 90px */
    padding-bottom: 5.625rem; /* 90px */
  }

  main > .section.py-lg {
    padding-top: 6.25rem; /* 100px */
    padding-bottom: 6.25rem; /* 100px */
  }

  main > .section.py-xl {
    padding-top: 6.875rem; /* 110px */
    padding-bottom: 6.875rem; /* 110px */
  }

  /* Margin Top - Desktop */
  main > .section.mt-xs {
    margin-top: 1.875rem; /* 30px */
  }

  main > .section.mt-sm {
    margin-top: 2.5rem; /* 40px */
  }

  main > .section.mt-md {
    margin-top: 3.125rem; /* 50px */
  }

  main > .section.mt-lg {
    margin-top: 3.75rem; /* 60px */
  }

  /* Margin Bottom - Desktop */
  main > .section.mb-xs {
    margin-bottom: 1.875rem; /* 30px */
  }

  main > .section.mb-sm {
    margin-bottom: 2.5rem; /* 40px */
  }

  main > .section.mb-md {
    margin-bottom: 3.125rem; /* 50px */
  }

  main > .section.mb-lg {
    margin-bottom: 3.75rem; /* 60px */
  }

  /* Margin Y (my) - Desktop */
  main > .section.my-xs {
    margin-top: 1.875rem; /* 30px */
    margin-bottom: 1.875rem; /* 30px */
  }

  main > .section.my-sm {
    margin-top: 2.5rem; /* 40px */
    margin-bottom: 2.5rem; /* 40px */
  }

  main > .section.my-md {
    margin-top: 3.125rem; /* 50px */
    margin-bottom: 3.125rem; /* 50px */
  }

  main > .section.my-lg {
    margin-top: 3.75rem; /* 60px */
    margin-bottom: 3.75rem; /* 60px */
  }
}

/* ========================================
   Flexbox Utilities
   ======================================== */

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.align-start {
  align-items: flex-start;
}

.align-center {
  align-items: center;
}

.align-end {
  align-items: flex-end;
}

.align-stretch {
  align-items: stretch;
}

/** Breadcrumb **/

/* .breadcrumb-wrapper {
    margin: 24px 0 0;
} */

.breadcrumb-wrapper ol,
.breadcrumb-nav .breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    gap: 8px;
}

.breadcrumb-wrapper a,
.breadcrumb-link,
.breadcrumb-nav .breadcrumb-link {
    color: var(--color-faq-body-txt);
    font-size: var(--fs-xs);
    font-weight: normal;
    text-decoration: none;
}

.breadcrumb-wrapper a:hover,
.breadcrumb-link:hover,
.breadcrumb-nav .breadcrumb-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.breadcrumb-wrapper li,
.breadcrumb-wrapper li:first-child a,
.breadcrumb-wrapper nav li,
.breadcrumb-nav .breadcrumb-item {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 8px;
}

.breadcrumb-wrapper li:last-child,
.breadcrumb-nav .breadcrumb-current {
    font-weight: var(--font-weight-medium);
    font-size: var(--fs-xs);
    color: var(--color-gray-4);
}

.breadcrumb-wrapper .breadcrumb-icon {
    background: url("/icons/home.png") no-repeat;
    height: 20px;
    width: 20px;
    display: inline-block;
}

/* .breadcrumb-separator {
    color: var(--color-faq-body-txt);
    font-size: 10px;
    margin: 0 4px;
} */

.breadcrumb-wrapper nav,
.breadcrumb-nav {
    margin: 0 auto;
    max-width: var(--layout-width);
    padding: 0 16px;
}

/* Hide duplicate breadcrumb from utility function */

/* .breadcrumb-nav {
    display: none !important;
} */

.breadcrumb-wrapper {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-index-3);
  background: transparent;
  padding: 0 1rem;
  margin: auto;
  max-width: var(--layout-width);
}

.breadcrumb-wrapper-dark {
  color: var(--color-primary);
  position: static;
}

.breadcrumb-wrapper-dark-abs {
  color: var(--color-primary);
}

.breadcrumb-wrapper-light,
.breadcrumb-wrapper-background-abs {
  color: var(--color-white);
}

.breadcrumb-wrapper nav {
  margin: 0 auto;
  max-width: var(--layout-width);

  /* border-bottom: 1px solid #2e2a9433; */
  padding: 1.25rem 0 0.75rem;
}

/* .breadcrumb-wrapper-light nav {
  border-bottom: 1px solid #fff3;
} */

.breadcrumb-wrapper-background-abs {
  background-color: #17171780;
  width: 100%;
  margin: 0 !important;
}

.breadcrumb-wrapper-background-abs nav {
  border-bottom: none;
  padding-bottom: 1.5rem;
}

.breadcrumb-wrapper nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  font-family: var(--body-font-family);
  font-size: var(--font-size-body-base);
  line-height: var(--line-height-fixed-md);
  flex-wrap: wrap;
}

.breadcrumb-wrapper,
.breadcrumb-wrapper * {
  font-family: var(--body-font-family);
}

.breadcrumb-text {
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.02em;
}

.breadcrumb-current .breadcrumb-text {
  font-weight: var(--font-weight-semibold);
}

.breadcrumb-link:hover .breadcrumb-text {
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

.breadcrumb-separator {
  margin: 0 0.25rem;
  opacity: 0.6;
  font-weight: var(--font-weight-light);
  pointer-events: none;
  user-select: none;
}

main {
  position: relative;
}

@media (width < 600px) {
    .breadcrumb-wrapper {
        display: none;
    }
}

body.stock-page.breadcrumb
    > main
    .sticky-block
    > div[class*="-wrapper"]
    > .block {
    top: 200px;
}

.breadcrumb-wrapper #breadcrumb-current-page-title:not(:last-child) {
    font-weight: var(--font-weight-medium);
    font-size: var(--fs-xs);
    color: var(--color-gray-4);
}

/* UTILITY CLASSES */
iframe.video-embed-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Global Pagination Styles */

.pagination-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2.5rem;
}

.pagination-item,
.pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  font-size: var(--font-size-fixed-heading-6);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-fixed-ml);
  color: var(--color-primary);
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.pagination-item.active {
  background-color: var(--color-primary);
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
}

.pagination-item:disabled {
  opacity: 0.7;
  cursor: default;
  pointer-events: none;
}

.pagination-prev,
.pagination-next,
.pagination-ellipsis {
  background-repeat: no-repeat;
  background-position: center;
}

.pagination-prev {
  background-image: url("../icons/pag_l.svg");
  background-size: 1.125rem 1.125rem;
}

.pagination-next {
  background-image: url("../icons/pag_r.svg");
  background-size: 1.125rem 1.125rem;
}

.pagination-ellipsis {
  background-image: url("../icons/pag_e.svg");
}

/* DESKTOP STYLES */
@media (width >= 768px) {
  .pagination-wrapper {
    margin-top: 3.75rem;
    gap: 2.3125rem;
  }

  .pagination-prev,
  .pagination-next {
    width: auto;
    height: auto;
    background-image: none;
    display: inline-flex;
    align-items: center;
    gap: 0.8125rem;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-fixed-body-xs-alt);
    line-height: var(--line-height-fixed-md);
  }

  .pagination-prev::before {
    content: "";
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    background: url("../icons/pag_l.svg") no-repeat center / contain;
  }

  .pagination-prev::after {
    content: "Previous";
  }

  .pagination-next::before {
    content: "Next";
  }

  .pagination-next::after {
    content: "";
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    background: url("../icons/pag_r.svg") no-repeat center / contain;
  }

  .pagination-item {
    font-size: var(--font-size-fixed-body-xl);
    line-height: var(--line-height-fixed-md-2);
  }

  .pagination-prev {
    margin-right: 2.0625rem;
  }

  .pagination-next {
    margin-left: 2.0625rem;
  }
}

/* --- Global Video Modal --- */

.video-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 85%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.video-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.video-modal-container {
  position: relative;
  width: 100%;
  background: var(--color-white);
  border-radius: 1rem;
  padding: 0.5rem;
  transition: transform 0.3s ease;
  max-width: 74.375rem;
  margin: 0 1rem;
  box-sizing: border-box;
}

.video-modal-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 85vh;
  background: var(--color-black);
  overflow: hidden;
  box-shadow: 0 0.25rem 1rem 0 rgb(46 42 148 / 15%);
  border-radius: 1rem;
}

.video-modal-player {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

.video-play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(255 255 255 / 70%);
  cursor: pointer;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 3;
}

.video-play-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.video-play-button {
  width: 3.25rem;
  height: 3.25rem;
  background-image: url("/icons/play_ic.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.video-modal-player-paused {
  filter: blur(4px);
  transition: filter 0.3s ease-in-out;
}

header .login-button .button-container a {
  gap: 0.25rem;
}

/* --- Desktop Overrides --- */
@media (width >= 769px) {
  .video-modal-container {
    border-radius: 1.5rem;
    padding: 1rem;
    margin: 0 1rem;
  }

  .video-modal-wrapper {
    border-radius: 1.5rem;
  }

  .video-play-button {
    width: 5.875rem;
    height: 5.875rem;
  }
}