/**
 * MySTI Custom CSS
 * This file includes Design Tokens, Utilities, and Custom Styles
 * All in one file for optimal performance
 */

/* ========== DESIGN TOKENS ========== */
/**
 * MySTI Design Tokens
 * Generated from Figma Design Tokens
 *
 * These CSS custom properties can be used throughout the entire project
 * independently from the theme's built-in SCSS variables.
 *
 * Usage: var(--token-name)
 * Example: color: var(--color-primary-500);
 */

:root {
  --alert-100: #ffedd4;
  --alert-200: #ffd6a7;
  --alert-300: #ffb86a;
  --alert-400: #ff8904;
  --alert-50: #fff7ed;
  --alert-600: #f54900;
  --alert-700: #ca3500;
  --alert-800: #9f2d00;
  --alert-default: #ff6900;
  --blue-100: #dbeafe;
  --blue-200: #b8e6fe;
  --blue-300: #8ec5ff;
  --blue-400: #51a2ff;
  --blue-50: #eff6ff;
  --blue-500: #2b7fff;
  --blue-600: #155dfc;
  --blue-700: #1447e6;
  --blue-800: #193cb8;
  --border-action: #bd0f16;
  --border-action-hover: #8a0000;
  --border-button-primary: #bd0f16;
  --border-button-tertiary: #4847eb;
  --border-disabled: #b2b2b2;
  --border-on-action: #ffffff;
  --border-on-disabled: #303947;
  --border-primary: #bd0f16;
  --border-primary-weak: #4b5563;
  --border-quaternary: #e5e7eb;
  --border-radius-lg: 24px;
  --border-radius-md: 16px;
  --border-radius-none: 0px;
  --border-radius-round: 999px;
  --border-radius-sm: 10px;
  --border-radius-xl: 48px;
  --border-radius-xl-2: 80px;
  --border-radius-xs: 4px;
  --border-radius-xs-2: 6px;
  --border-secondary: #9ca3af;
  --border-tertiary: #d1d5db;
  --border-width-lg: 4px;
  --border-width-md: 2px;
  --border-width-none: 0px;
  --border-width-sm: 1px;
  --btn: 0px 2px 6px 0px #2d233d26;
  --card: 0px 4px 20px 0px #fafafa;
  --card-small: undefinedpx undefinedpx undefinedpx undefinedpx undefined;
  --card-strong: 0px 4px 12px 0px #0000001a;
  --card-strong-2: 0px 18px 50px 0px #454e5f33;
  --color-blue-bendera-my-100: #e9eef7;
  --color-blue-bendera-my-200: #ccd5e7;
  --color-blue-bendera-my-300: #b3c0db;
  --color-blue-bendera-my-350: #9bacce;
  --color-blue-bendera-my-380: #5771a9;
  --color-blue-bendera-my-400: #415d9c;
  --color-blue-bendera-my-420: #2c4a8f;
  --color-blue-bendera-my-450: #183581;
  --color-blue-bendera-my-480: #062074;
  --color-blue-bendera-my-50: #f2f7ff;
  --color-blue-bendera-my-500-primary--4-saturation: #030264;
  --color-blue-bendera-my-600: #050459;
  --color-blue-bendera-my-650: #04044e;
  --color-blue-bendera-my-700: #040443;
  --color-blue-bendera-my-800: #040438;
  --color-blue-muted-100: #d2d6e0;
  --color-blue-muted-200: #bcc1d1;
  --color-blue-muted-25: #f4f9ff;
  --color-blue-muted-300: #a5acc2;
  --color-blue-muted-400: #324993;
  --color-blue-muted-50: #e1e5f0;
  --color-blue-muted-500-primary: #1f3066;
  --color-blue-muted-600: #192652;
  --color-blue-muted-700: #131d3d;
  --color-blue-muted-800: #0c1329;
  --color-blue-mysti-100: #d0d8ff;
  --color-blue-mysti-200: #b9c4ff;
  --color-blue-mysti-300: #8c9ffd;
  --color-blue-mysti-400: #5461f4;
  --color-blue-mysti-50: #e8ebff;
  --color-blue-mysti-500: #4847eb;
  --color-blue-mysti-600: #3a39ae;
  --color-blue-mysti-700: #353491;
  --color-blue-mysti-800: #302f75;
  --color-error-100: #ffe2e2;
  --color-error-200: #ffc9c9;
  --color-error-300: #e77e82;
  --color-error-400: #df5359;
  --color-error-50: #fef2f2;
  --color-error-500: #bd0f16;
  --color-error-600: #8a0000;
  --color-error-700: #580000;
  --color-error-800: #3e0000;
  --color-error-default: #bd0f16;
  --color-green-100: #dcfce7;
  --color-green-200: #b9f8cf;
  --color-green-300: #7bf1a8;
  --color-green-400: #05df72;
  --color-green-50: #f0fdf4;
  --color-green-500: #00c950;
  --color-green-600: #00a63e;
  --color-green-700: #008236;
  --color-green-800: #016630;
  --color-grey-disabled-100: #dfdfdf;
  --color-grey-disabled-200: #c9c9c9;
  --color-grey-disabled-300: #b2b2b2;
  --color-grey-disabled-400: #9c9c9c;
  --color-grey-disabled-500: #868686;
  --color-grey-disabled-600: #707070;
  --color-grey-disabled-700: #595959;
  --color-grey-disabled-800: #434343;
  --color-information-100: #d0d8ff;
  --color-information-200: #b9c4ff;
  --color-information-300: #8c9ffd;
  --color-information-400: #5461f4;
  --color-information-50: #e8ebff;
  --color-information-500: #4847eb;
  --color-information-600: #3a39ae;
  --color-information-700: #353491;
  --color-information-800: #302f75;
  --color-information-default: #4847eb;
  --color-neutral-0: #ffffff;
  --color-neutral-100: #f3f4f6;
  --color-neutral-1000: #030712;
  --color-neutral-200: #e5e7eb;
  --color-neutral-25: #fafafa;
  --color-neutral-300: #d1d5db;
  --color-neutral-400: #9ca3af;
  --color-neutral-50: #f9fafb;
  --color-neutral-500: #6b7280;
  --color-neutral-600: #4b5563;
  --color-neutral-700: #303947;
  --color-neutral-900: #222222;
  --color-orange-100: #ffedd4;
  --color-orange-200: #ffd6a7;
  --color-orange-300: #ffb86a;
  --color-orange-400: #ff8904;
  --color-orange-50: #fff7ed;
  --color-orange-500: #ff6900;
  --color-orange-600: #f54900;
  --color-orange-700: #ca3500;
  --color-orange-800: #9f2d00;
  --color-primary-100: #ffe2e2;
  --color-primary-200: #ffc9c9;
  --color-primary-300: #e77e82;
  --color-primary-400: #df5359;
  --color-primary-50: #fef2f2;
  --color-primary-500: #bd0f16;
  --color-primary-600: #8a0000;
  --color-primary-700: #580000;
  --color-primary-800: #3e0000;
  --color-primary-default: #bd0f16;
  --color-red-100: #ffe2e2;
  --color-red-200: #ffc9c9;
  --color-red-300: #e77e82;
  --color-red-400: #df5359;
  --color-red-50: #fef2f2;
  --color-red-500: #bd0f16;
  --color-red-600: #8a0000;
  --color-red-700: #580000;
  --color-red-800: #3e0000;
  --color-success-100: #dcfce7;
  --color-success-200: #b9f8cf;
  --color-success-300: #7bf1a8;
  --color-success-400: #05df72;
  --color-success-50: #f0fdf4;
  --color-success-500: #00c950;
  --color-success-600: #00a63e;
  --color-success-700: #008236;
  --color-success-800: #016630;
  --color-success-default: #00c950;
  --color-tailwind-mostly-blue-100: #dbeafe;
  --color-tailwind-mostly-blue-200: #b8e6fe;
  --color-tailwind-mostly-blue-300: #8ec5ff;
  --color-tailwind-mostly-blue-400: #51a2ff;
  --color-tailwind-mostly-blue-50: #eff6ff;
  --color-tailwind-mostly-blue-500: #2b7fff;
  --color-tailwind-mostly-blue-600: #155dfc;
  --color-tailwind-mostly-blue-700: #1447e6;
  --color-tailwind-mostly-blue-800: #193cb8;
  --color-tailwind-mostly-green-100: #dcfce7;
  --color-tailwind-mostly-green-200: #b9f8cf;
  --color-tailwind-mostly-green-300: #7bf1a8;
  --color-tailwind-mostly-green-400: #05df72;
  --color-tailwind-mostly-green-50: #f0fdf4;
  --color-tailwind-mostly-green-500: #00c950;
  --color-tailwind-mostly-green-600: #00a63e;
  --color-tailwind-mostly-green-700: #008236;
  --color-tailwind-mostly-green-800: #016630;
  --color-tailwind-mostly-grey-0: #ffffff;
  --color-tailwind-mostly-grey-100: #f3f4f6;
  --color-tailwind-mostly-grey-1000: #030712;
  --color-tailwind-mostly-grey-200: #e5e7eb;
  --color-tailwind-mostly-grey-25: #fafafa;
  --color-tailwind-mostly-grey-300: #d1d5db;
  --color-tailwind-mostly-grey-400: #9ca3af;
  --color-tailwind-mostly-grey-50: #f9fafb;
  --color-tailwind-mostly-grey-500: #6b7280;
  --color-tailwind-mostly-grey-600: #4b5563;
  --color-tailwind-mostly-grey-700: #374151;
  --color-tailwind-mostly-grey-800: #1f2937;
  --color-tailwind-mostly-grey-900: #111827;
  --color-tailwind-mostly-grey-black: #030712;
  --color-tailwind-mostly-grey-disabled-100: #dfdfdf;
  --color-tailwind-mostly-grey-disabled-200: #c9c9c9;
  --color-tailwind-mostly-grey-disabled-300: #b2b2b2;
  --color-tailwind-mostly-grey-disabled-400: #9c9c9c;
  --color-tailwind-mostly-grey-disabled-500: #868686;
  --color-tailwind-mostly-grey-disabled-600: #707070;
  --color-tailwind-mostly-grey-disabled-700: #595959;
  --color-tailwind-mostly-grey-disabled-800: #434343;
  --color-tailwind-mostly-red-100: #ffe2e2;
  --color-tailwind-mostly-red-200: #ffc9c9;
  --color-tailwind-mostly-red-300: #ffa2a2;
  --color-tailwind-mostly-red-400: #ff6467;
  --color-tailwind-mostly-red-50: #fef2f2;
  --color-tailwind-mostly-red-500: #fb2c36;
  --color-tailwind-mostly-red-600: #e7000b;
  --color-tailwind-mostly-red-700: #c10007;
  --color-tailwind-mostly-red-800: #9f0712;
  --color-tailwind-mostly-violet-100: #efe8ff;
  --color-tailwind-mostly-violet-200: #c5b8e2;
  --color-tailwind-mostly-violet-300: #a795d4;
  --color-tailwind-mostly-violet-400: #8a71c5;
  --color-tailwind-mostly-violet-50: #f5f3ff;
  --color-tailwind-mostly-violet-500: #6d4eb7;
  --color-tailwind-mostly-violet-600: #573e92;
  --color-tailwind-mostly-violet-700: #412f6e;
  --color-tailwind-mostly-violet-800: #2c1f49;
  --color-tailwind-mostly-yellow-100: #fef9c2;
  --color-tailwind-mostly-yellow-200: #fff085;
  --color-tailwind-mostly-yellow-300: #ffdf20;
  --color-tailwind-mostly-yellow-400: #fdc700;
  --color-tailwind-mostly-yellow-50: #fefce8;
  --color-tailwind-mostly-yellow-500: #f0b100;
  --color-tailwind-mostly-yellow-600: #d08700;
  --color-tailwind-mostly-yellow-700: #a65f00;
  --color-tailwind-mostly-yellow-800: #894b00;
  --color-warning-100: #fef3ce;
  --color-warning-200: #fddb6d;
  --color-warning-300: #fccf3c;
  --color-warning-400: #fbc30b;
  --color-warning-50: #fefce8;
  --color-warning-500: #fbc30b;
  --color-warning-600: #e1a900;
  --color-warning-700: #491100;
  --color-warning-800: #2f0000;
  --color-warning-default: #fbc30b;
  --color-yellow-100: #fef3ce;
  --color-yellow-200: #fddb6d;
  --color-yellow-300: #fccf3c;
  --color-yellow-400: #fbc30b;
  --color-yellow-50: #fefce8;
  --color-yellow-500: #fbc30b;
  --color-yellow-600: #e1a900;
  --color-yellow-700: #491100;
  --color-yellow-800: #2f0000;
  --disabled-100: #dfdfdf;
  --disabled-200: #c9c9c9;
  --disabled-300: #b2b2b2;
  --disabled-400: #9c9c9c;
  --disabled-600: #707070;
  --disabled-700: #595959;
  --disabled-800: #434343;
  --disabled-default: #868686;
  --error-100: #ffe2e2;
  --error-200: #ffc9c9;
  --error-300: #e77e82;
  --error-400: #df5359;
  --error-50: #fef2f2;
  --error-600: #8a0000;
  --error-700: #580000;
  --error-800: #3e0000;
  --error-default: #bd0f16;
  --font-family-primary: 'Poppins', sans-serif;
  --font-family-secondary: 'Open Sans', sans-serif;
  --font-size-body-l: 16px;
  --font-size-body-m: 14px;
  --font-size-body-xl: 18px;
  --font-size-caption: 13px;
  --font-size-copyright: 10px;
  --font-size-h1: 60px;
  --font-size-h2: 52px;
  --font-size-h3: 40px;
  --font-size-h4: 28px;
  --font-size-h5: 24px;
  --font-size-h6: 20px;
  --font-weight-bold: 700;
  --font-weight-light: 300;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --fontfamilies-roboto-flex: Roboto Flex;
  --fontsize-0: 10px;
  --fontsize-1: 12px;
  --fontsize-12: 14px;
  --fontsize-15: 14px;
  --fontsize-17: 12px;
  --fontsize-2: 13px;
  --fontsize-3: 14px;
  --fontsize-4: 16px;
  --fontsize-5: 18px;
  --fontsize-6: 20px;
  --fontsize-7: 24px;
  --fontsize-8: 28px;
  --fontsize-9: 32px;
  --fontsize-body-body-l: 16px;
  --fontsize-body-body-m: 14px;
  --fontsize-body-body-xl: 18px;
  --fontsize-body-body-xxl: 20px;
  --fontsize-body-caption: 13px;
  --fontsize-body-copyright: 10px;
  --fontsize-body-input-label: 12px;
  --fontsize-heading-display: 80px;
  --fontsize-heading-h1: 60px;
  --fontsize-heading-h2: 52px;
  --fontsize-heading-h3: 40px;
  --fontsize-heading-h4: 28px;
  --fontsize-heading-h5: 24px;
  --fontsize-heading-h6: 20px;
  --green-100: #dcfce7;
  --green-200: #b9f8cf;
  --green-300: #7bf1a8;
  --green-400: #05df72;
  --green-50: #f0fdf4;
  --green-500: #00c950;
  --green-600: #00a63e;
  --green-700: #008236;
  --green-800: #016630;
  --grey-0: #ffffff;
  --grey-100: #f3f4f6;
  --grey-1000: #030712;
  --grey-200: #e5e7eb;
  --grey-25: #fafafa;
  --grey-300: #d1d5db;
  --grey-400: #9ca3af;
  --grey-50: #f9fafb;
  --grey-500: #6b7280;
  --grey-600: #4b5563;
  --grey-700: #374151;
  --grey-800: #1f2937;
  --grey-900: #111827;
  --grey-black: #030712;
  --grey-disabled-100: #dfdfdf;
  --grey-disabled-200: #c9c9c9;
  --grey-disabled-300: #b2b2b2;
  --grey-disabled-400: #9c9c9c;
  --grey-disabled-500: #868686;
  --grey-disabled-600: #707070;
  --grey-disabled-700: #595959;
  --grey-disabled-800: #434343;
  --icon-action: #bd0f16;
  --icon-action-hover: #8a0000;
  --icon-body-secondary: #4b5563;
  --icon-body-tertiary: #9ca3af;
  --icon-disabled: #595959;
  --icon-error: #bd0f16;
  --icon-headings: #222222;
  --icon-information: #4847eb;
  --icon-on-action: #ffffff;
  --icon-on-disabled: #9c9c9c;
  --icon-primary: #222222;
  --icon-success: #00c950;
  --icon-warning: #fbc30b;
  --information-100: #d0d8ff;
  --information-200: #b9c4ff;
  --information-300: #8c9ffd;
  --information-400: #5461f4;
  --information-50: #e8ebff;
  --information-600: #3a39ae;
  --information-700: #353491;
  --information-800: #302f75;
  --information-default: #4847eb;
  --letterspacing-0: 2%;
  --letterspacing-1: 0%;
  --letterspacing-10: 0%;
  --letterspacing-11: 0%;
  --letterspacing-12: 0%;
  --letterspacing-13: 0%;
  --letterspacing-14: 0%;
  --letterspacing-15: 0%;
  --letterspacing-16: 0%;
  --letterspacing-17: 0%;
  --letterspacing-18: 0%;
  --letterspacing-2: 0%;
  --letterspacing-3: 0%;
  --letterspacing-4: 0%;
  --letterspacing-5: 0%;
  --letterspacing-6: 0%;
  --letterspacing-7: 0%;
  --letterspacing-8: 0%;
  --letterspacing-9: 0%;
  --line-height-body-caption: 16px;
  --line-height-body-copyright: 16px;
  --line-height-body-input-label: 19px;
  --line-height-body-l: 24px;
  --line-height-body-m: 22px;
  --line-height-body-xl: 28px;
  --line-height-body-xxl: 32px;
  --line-height-caption: 16px;
  --line-height-h1: 62px;
  --line-height-h2: 63px;
  --line-height-h3: 44px;
  --line-height-h4: 34px;
  --line-height-h5: 32px;
  --line-height-h6: 32px;
  --line-height-heading-h1: 62px;
  --line-height-heading-h2: 63px;
  --line-height-heading-h3: 44px;
  --line-height-heading-h4: 34px;
  --line-height-heading-h5: 32px;
  --line-height-heading-h6: 32px;
  --neutral-0: #ffffff;
  --neutral-100: #f3f4f6;
  --neutral-1000: #030712;
  --neutral-200: #e5e7eb;
  --neutral-25: #fafafa;
  --neutral-300: #d1d5db;
  --neutral-400: #9ca3af;
  --neutral-50: #f9fafb;
  --neutral-500: #6b7280;
  --neutral-600: #4b5563;
  --neutral-700: #303947;
  --neutral-800: {color.neutral.800};
  --neutral-900: #222222;
  --neutral-black: {color.grey tailwind.black};
  --neutral-color: #ffffff;
  --paragraph-spacing-body-body-l: 20px;
  --paragraph-spacing-body-body-m: 16px;
  --paragraph-spacing-body-button: 40px;
  --paragraph-spacing-body-caption: 19px;
  --paragraph-spacing-body-copyright: 16px;
  --paragraph-spacing-body-input-label: 16px;
  --paragraph-spacing-body-inside-section: 24px;
  --paragraph-spacing-body-l: 20px;
  --paragraph-spacing-body-m: 16px;
  --paragraph-spacing-caption: 19px;
  --paragraph-spacing-copyright: 16px;
  --paragraph-spacing-h1: 72px;
  --paragraph-spacing-h2: 62px;
  --paragraph-spacing-h3: 48px;
  --paragraph-spacing-h4: 38px;
  --paragraph-spacing-h5: 32px;
  --paragraph-spacing-h6: 24px;
  --paragraph-spacing-heading-h1: 48px;
  --paragraph-spacing-heading-h2: 40px;
  --paragraph-spacing-heading-h3: 36px;
  --paragraph-spacing-heading-h4: 32px;
  --paragraph-spacing-heading-h5: 28px;
  --paragraph-spacing-heading-h6: 24px;
  --paragraph-spacing-input-label: 19px;
  --paragraph-spacing-l-2: 24px;
  --paragraph-spacing-m-2: 20px;
  --paragraphindent-0: 0px;
  --paragraphspacing-0: 0;
  --paragraphspacing-1: 0;
  --paragraphspacing-10: 0;
  --paragraphspacing-11: 0;
  --paragraphspacing-12: 0;
  --paragraphspacing-13: 0;
  --paragraphspacing-14: 0;
  --paragraphspacing-15: 0;
  --paragraphspacing-16: 0;
  --paragraphspacing-17: 0;
  --paragraphspacing-18: 0;
  --paragraphspacing-2: 0;
  --paragraphspacing-3: 0;
  --paragraphspacing-4: 0;
  --paragraphspacing-5: 0;
  --paragraphspacing-6: 0;
  --paragraphspacing-7: 0;
  --paragraphspacing-8: 0;
  --paragraphspacing-9: 0;
  --primary-100: #ffe2e2;
  --primary-200: #ffc9c9;
  --primary-300: #e77e82;
  --primary-400: #df5359;
  --primary-50: #fef2f2;
  --primary-600: #8a0000;
  --primary-700: #580000;
  --primary-800: #3e0000;
  --primary-color: #ffffff;
  --primary-default: #bd0f16;
  --primary-weak-100: #d0d8ff;
  --primary-weak-200: #b9c4ff;
  --primary-weak-300: #8c9ffd;
  --primary-weak-400: #5461f4;
  --primary-weak-50: #e8ebff;
  --primary-weak-600: #3a39ae;
  --primary-weak-700: #353491;
  --primary-weak-800: #302f75;
  --primary-weak-default: #4847eb;
  --red-100: #ffe2e2;
  --red-200: #ffc9c9;
  --red-300: #ffa2a2;
  --red-400: #ff6467;
  --red-50: #fef2f2;
  --red-500: #fb2c36;
  --red-600: #e7000b;
  --red-700: #c10007;
  --red-800: #9f0712;
  --scale-0: 0px;
  --scale-100: 4px;
  --scale-1000: 40px;
  --scale-1100: 44px;
  --scale-1200: 48px;
  --scale-1300: 52px;
  --scale-1400: 60px;
  --scale-150: 6px;
  --scale-1500: 68px;
  --scale-1600: 76px;
  --scale-1700: 92px;
  --scale-1800: 116px;
  --scale-1900: 132px;
  --scale-200: 8px;
  --scale-2000: 156px;
  --scale-2100: 224px;
  --scale-2200: 256px;
  --scale-25: 1px;
  --scale-250: 10px;
  --scale-300: 12px;
  --scale-400: 16px;
  --scale-50: 2px;
  --scale-500: 20px;
  --scale-600: 24px;
  --scale-700: 28px;
  --scale-800: 32px;
  --scale-900: 36px;
  --secondary-disabled: #dfdfdf;
  --secondary-error: #fef2f2;
  --secondary-information: #e8ebff;
  --secondary-success: #f0fdf4;
  --secondary-warning: #fefce8;
  --shadow-btn: 0px 2px 6px 0px #2d233d26;
  --sizing-1xl: 36px;
  --sizing-2xl: 40px;
  --sizing-2xs: 4px;
  --sizing-3xl: 48px;
  --sizing-3xs: 2px;
  --sizing-4xl: 60px;
  --sizing-5xl: 68px;
  --sizing-component-1xl: 36px;
  --sizing-component-2xl: 40px;
  --sizing-component-2xs: 4px;
  --sizing-component-3xl: 48px;
  --sizing-component-3xs: 2px;
  --sizing-component-4xl: 60px;
  --sizing-component-5xl: 68px;
  --sizing-component-lg: 20px;
  --sizing-component-md: 16px;
  --sizing-component-sm: 12px;
  --sizing-component-xl: 24px;
  --sizing-component-xs: 8px;
  --sizing-lg: 20px;
  --sizing-md: 16px;
  --sizing-sm: 12px;
  --sizing-xl: 24px;
  --sizing-xs: 8px;
  --spacing-1xl: 48px;
  --spacing-2xl: 68px;
  --spacing-2xs: 6px;
  --spacing-3xl: 92px;
  --spacing-3xs: 4px;
  --spacing-4xl: 116px;
  --spacing-4xs: 2px;
  --spacing-5xl: 156px;
  --spacing-6xl: 224px;
  --spacing-7xl: 256px;
  --spacing-lg: 24px;
  --spacing-margin-spacing: 48px;
  --spacing-md: 20px;
  --spacing-sm: 16px;
  --spacing-x: 12px;
  --spacing-x2: 16px;
  --spacing-xl: 32px;
  --spacing-xs: 8px;
  --success-100: #dcfce7;
  --success-200: #b9f8cf;
  --success-300: #7bf1a8;
  --success-400: #05df72;
  --success-50: #f0fdf4;
  --success-600: #00a63e;
  --success-700: #008236;
  --success-800: #016630;
  --success-default: #00c950;
  --surface-action: #bd0f16;
  --surface-action-hover: #8a0000;
  --surface-action-hover-weak: #fef2f2;
  --surface-button-b-surface-50: #e8ebff;
  --surface-disabled: #dfdfdf;
  --surface-error: #e7000b;
  --surface-hover-on-primary: #0000001a;
  --surface-hover-on-secondary: #fef2f2;
  --surface-hover-on-secondary-weak: #f9fafb;
  --surface-information: #3a39ae;
  --surface-page: #fafafa;
  --surface-page-hover: #f3f4f6;
  --surface-primary: #ffffff;
  --surface-primary-hover: #f9fafb;
  --surface-primary-on-dark: #fbc30b;
  --surface-primary-on-light: #bd0f16;
  --surface-primary-weak: #ffe2e2;
  --surface-secondary: #f9fafb;
  --surface-secondary-error: #fef2f2;
  --surface-secondary-information: #e8ebff;
  --surface-secondary-success: #f0fdf4;
  --surface-secondary-warning: #fefce8;
  --surface-success: #00a63e;
  --surface-surface-100: #d2d6e0;
  --surface-surface-200: #bcc1d1;
  --surface-surface-25: #f4f9ff;
  --surface-surface-400: #324993;
  --surface-surface-50: #e1e5f0;
  --surface-surface-700: #1f3066;
  --surface-tertiary: #4847eb;
  --surface-warning: #e1a900;
  --text-action: #bd0f16;
  --text-action-hover: #8a0000;
  --text-action-weak: #4847eb;
  --text-alert: #9f2d00;
  --text-body-primary: #222222;
  --text-body-primary-weak: #4b5563;
  --text-body-secondary: #6b7280;
  --text-body-tertiary: #9ca3af;
  --text-button-primary-on-dark: #fbc30b;
  --text-button-primary-on-light: #bd0f16;
  --text-button-tertiary: #4847eb;
  --text-disabled: #595959;
  --text-error: #8a0000;
  --text-headings: #030264;
  --text-headings-decor: #580000;
  --text-information: #3a39ae;
  --text-on-action: #ffffff;
  --text-on-dark: #ffffff;
  --text-on-disabled: #9c9c9c;
  --text-success: #00a63e;
  --text-warning: #491100;
  --textcase-none: none;
  --textdecoration-none: none;
  --textdecoration-underline: underline;
  --type-font-family-font-family-1: 'Poppins', sans-serif;
  --type-font-family-font-family-2: 'Open Sans', sans-serif;
  --type-font-weight-bold: Bold;
  --type-font-weight-italic: Italic;
  --type-font-weight-light: Light;
  --type-font-weight-medium: Medium;
  --type-font-weight-regular: Regular;
  --type-font-weight-semibold: SemiBold;
  --violet-100: #efe8ff;
  --violet-200: #c5b8e2;
  --violet-300: #a795d4;
  --violet-400: #8a71c5;
  --violet-50: #f5f3ff;
  --violet-500: #6d4eb7;
  --violet-600: #573e92;
  --violet-700: #412f6e;
  --violet-800: #2c1f49;
  --warning-100: #fef3ce;
  --warning-200: #fddb6d;
  --warning-300: #fccf3c;
  --warning-400: #fbc30b;
  --warning-50: #fefce8;
  --warning-600: #e1a900;
  --warning-700: #491100;
  --warning-800: #2f0000;
  --warning-default: #fbc30b;
  --yellow-100: #fef9c2;
  --yellow-200: #fff085;
  --yellow-300: #ffdf20;
  --yellow-400: #fdc700;
  --yellow-50: #fefce8;
  --yellow-500: #f0b100;
  --yellow-600: #d08700;
  --yellow-700: #a65f00;
  --yellow-800: #894b00;
}


/* ========== UTILITY CLASSES ========== */
/**
 * MySTI Utility Classes
 * Generated from Design Tokens to avoid duplication
 */

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

/* Font Families */
.font-primary { font-family: var(--type-font-family-font-family-1, Poppins); }
.font-secondary { font-family: var(--type-font-family-font-family-2, 'Open Sans'); }

/* Font Weights */
.fw-light { font-weight: var(--font-weight-light, 300); }
.fw-regular { font-weight: var(--font-weight-regular, 400); }
.fw-medium { font-weight: var(--font-weight-medium, 500); }
.fw-semibold { font-weight: var(--font-weight-semibold, 600); }
.fw-bold { font-weight: var(--font-weight-bold, 700); }

/* Headings Sizes */
.text-h1 { 
    font-size: var(--fontsize-heading-h1, 60px);
    line-height: var(--line-height-heading-h1, 62px);
}
.text-h2 { 
    font-size: var(--fontsize-heading-h2, 52px);
    line-height: var(--line-height-heading-h2, 63px);
}
.text-h3 { 
    font-size: var(--fontsize-heading-h3, 40px);
    line-height: var(--line-height-heading-h3, 44px);
}
.text-h4 { 
    font-size: var(--fontsize-heading-h4, 28px);
    line-height: var(--line-height-heading-h4, 34px);
}
.text-h5 { 
    font-size: var(--fontsize-heading-h5, 24px);
    line-height: var(--line-height-heading-h5, 32px);
}
.text-h6 { 
    font-size: var(--fontsize-heading-h6, 20px);
    line-height: var(--line-height-heading-h6, 32px);
}

/* Body Sizes */
.text-body-xl { 
    font-size: var(--fontsize-body-body-xl, 18px);
    line-height: var(--line-height-body-xl, 24px);
}
.text-body-l { 
    font-size: var(--fontsize-body-body-l, 16px);
    line-height: var(--line-height-body-l, 24px);
}
.text-body-m { 
    font-size: var(--fontsize-body-body-m, 14px);
    line-height: var(--line-height-body-m, 22px);
}
.text-caption { 
    font-size: var(--fontsize-body-caption, 13px);
    line-height: var(--line-height-body-caption, 16px);
}

/* ==========================================================================
   COLORS
   ========================================================================== */

/* Text Colors */
.text-primary { color: var(--text-body-primary, #222222) !important; }
.text-secondary { color: var(--text-body-secondary, #6b7280) !important; }
.text-tertiary { color: var(--text-body-tertiary, #9ca3af) !important; }
.text-action { color: var(--text-action, #bd0f16) !important; }
.text-error { color: var(--text-error, #8a0000) !important; }
.text-success { color: var(--text-success, #00a63e) !important; }
.text-warning { color: var(--text-warning, #491100) !important; }
.text-on-dark { color: var(--text-on-dark, #ffffff) !important; }
.text-headings { color: var(--text-headings, #030264) !important; }

/* Background Colors */
.bg-primary { background-color: var(--surface-primary, #ffffff) !important; }
.bg-secondary { background-color: var(--surface-secondary, #f9fafb) !important; }
.bg-action { background-color: var(--surface-action, #bd0f16) !important; }
.bg-error { background-color: var(--surface-error, #e7000b) !important; }
.bg-success { background-color: var(--surface-success, #00a63e) !important; }
.bg-warning { background-color: var(--surface-warning, #e1a900) !important; }
.bg-info { background-color: var(--surface-information, #3a39ae) !important; }

/* Border Colors */
.border-primary { border-color: var(--border-primary, #bd0f16); }
.border-secondary { border-color: var(--border-secondary, #9ca3af); }
.border-tertiary { border-color: var(--border-tertiary, #d1d5db); }
.border-action { border-color: var(--border-action, #bd0f16); }

/* ==========================================================================
   SPACING & LAYOUT
   ========================================================================== */

/* Padding */
.p-xs { padding: var(--spacing-xs, 8px); }
.p-sm { padding: var(--spacing-sm, 16px); }
.p-md { padding: var(--spacing-md, 20px); }
.p-lg { padding: var(--spacing-lg, 24px); }
.p-xl { padding: var(--spacing-xl, 32px); }
.p-1xl { padding: var(--spacing-1xl, 48px); }
.p-2xl { padding: var(--spacing-2xl, 68px); }
.p-3xl { padding: var(--spacing-3xl, 92px); }

/* Padding X-Axis */
.px-xs { padding-left: var(--spacing-xs, 8px); padding-right: var(--spacing-xs, 8px); }
.px-sm { padding-left: var(--spacing-sm, 16px); padding-right: var(--spacing-sm, 16px); }
.px-md { padding-left: var(--spacing-md, 20px); padding-right: var(--spacing-md, 20px); }
.px-lg { padding-left: var(--spacing-lg, 24px); padding-right: var(--spacing-lg, 24px); }
.px-xl { padding-left: var(--spacing-xl, 32px); padding-right: var(--spacing-xl, 32px); }

/* Padding Y-Axis */
.py-2xs { padding-top: var(--spacing-2xs, 6px); padding-bottom: var(--spacing-2xs, 6px); }
.py-xs { padding-top: var(--spacing-xs, 8px); padding-bottom: var(--spacing-xs, 8px); }
.py-sm { padding-top: var(--spacing-sm, 16px); padding-bottom: var(--spacing-sm, 16px); }
.py-md { padding-top: var(--spacing-md, 20px); padding-bottom: var(--spacing-md, 20px); }
.py-lg { padding-top: var(--spacing-lg, 24px); padding-bottom: var(--spacing-lg, 24px); }
.py-xl { padding-top: var(--spacing-xl, 32px); padding-bottom: var(--spacing-xl, 32px); }

/* Margin */
.m-xs { margin: var(--spacing-xs, 8px); }
.m-sm { margin: var(--spacing-sm, 16px); }
.m-md { margin: var(--spacing-md, 20px); }
.m-lg { margin: var(--spacing-lg, 24px); }
.m-xl { margin: var(--spacing-xl, 32px); }
.m-1xl { margin: var(--spacing-1xl, 48px); }

/* Gap */
.gap-3xs { gap: var(--spacing-3xs, 4px); }
.gap-xs { gap: var(--spacing-xs, 8px); }
.gap-sm { gap: var(--spacing-sm, 16px); }
.gap-md { gap: var(--spacing-md, 20px); }
.gap-lg { gap: var(--spacing-lg, 24px); }

.gap-y-xs { row-gap: var(--spacing-xs, 8px); }
.gap-y-sm { row-gap: var(--spacing-sm, 16px); }
.gap-y-md { row-gap: var(--spacing-md, 20px); }
.gap-y-lg { row-gap: var(--spacing-lg, 24px); } 

/* Flex Utilities */
.flex-1 { flex: 1 0 0; }
.align-self-stretch { align-self: stretch; }

/* ==========================================================================
   BORDERS & EFFECTS
   ========================================================================== */

/* Border Radius */
.rounded-xs { border-radius: var(--border-radius-xs, 4px); }
.rounded-sm { border-radius: var(--border-radius-sm, 10px); }
.rounded-md { border-radius: var(--border-radius-md, 16px); }
.rounded-lg { border-radius: var(--border-radius-lg, 24px); }
.rounded-xl { border-radius: var(--border-radius-xl, 48px); }
.rounded-full { border-radius: var(--border-radius-round, 999px); }

/* Shadows */
.shadow-card { box-shadow: var(--card, 0px 4px 20px 0px #fafafa); }
.shadow-strong { box-shadow: var(--card-strong, 0px 4px 12px 0px #0000001a); }

/* Components */
.card-glass-blue {
    background-color: rgba(88, 101, 166, 0.8);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius-md, 16px);
}

.btn-cta-yellow {
    background-color: var(--surface-primary-on-dark, #FBC30B);
    border: none;
    color: var(--text-body-primary, #222);
    border-radius: var(--border-radius-round, 999px);
    display: flex;
    height: 42px;
    min-width: 80px;
    padding: 0 var(--sizing-component-lg, 20px);
    justify-content: center;
    align-items: center;
    text-align: center;

    /* Body L bold */
    font-family: var(--type-font-family-font-family-2, "Open Sans");
    font-size: var(--fontsize-body-body-l, 16px);
    font-style: normal;
    line-height: var(--line-height-body-l, 24px);
}

.accordion-item-custom {
    display: flex;
    padding: 16px 0 0 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border: none;
    border-bottom: 1px solid var(--border-tertiary, #d1d5db);
}

.accordion-item-custom:last-of-type {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.faq-title-wrapper {
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

.accordion-button-custom {
  display: flex;
  padding: 10px 0;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  background-color: transparent;
  box-shadow: none;
  color: var(--text-body-tertiary, #9ca3af);
  font-family: var(--type-font-family-font-family-2, 'Open Sans');
  font-size: var(--fontsize-body-body-l, 16px);
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--line-height-body-l, 24px);
  text-align: left;
}

.accordion-button::after {
    content: '';
    background-image: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.25C6.624 2.25 2.25 6.624 2.25 12C2.25 17.376 6.624 21.75 12 21.75C17.376 21.75 21.75 17.376 21.75 12C21.75 6.624 17.376 2.25 12 2.25ZM12 3.75C16.5653 3.75 20.25 7.43475 20.25 12C20.25 16.5653 16.5653 20.25 12 20.25C7.43475 20.25 3.75 16.5653 3.75 12C3.75 7.43475 7.43475 3.75 12 3.75ZM11.25 7.5V11.25H7.5V12.75H11.25V16.5H12.75V12.75H16.5V11.25H12.75V7.5H11.25Z" fill="%239CA3AF"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-left: auto;
}

.accordion-button:not(.collapsed)::after {
    background-image: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 20C7.34784 20 4.8043 18.9464 2.92893 17.0711C1.05357 15.1957 0 12.6522 0 10C0 7.34784 1.05357 4.8043 2.92893 2.92893C4.8043 1.05357 7.34784 0 10 0C12.6522 0 15.1957 1.05357 17.0711 2.92893C18.9464 4.8043 20 7.34784 20 10C20 12.6522 18.9464 15.1957 17.0711 17.0711C15.1957 18.9464 12.6522 20 10 20ZM10 18C12.1217 18 14.1566 17.1571 15.6569 15.6569C17.1571 14.1566 18 12.1217 18 10C18 7.87827 17.1571 5.84344 15.6569 4.34315C14.1566 2.84285 12.1217 2 10 2C7.87827 2 5.84344 2.84285 4.34315 4.34315C2.84285 5.84344 2 7.87827 2 10C2 12.1217 2.84285 14.1566 4.34315 15.6569C5.84344 17.1571 7.87827 18 10 18ZM15 9V11H5V9H15Z" fill="%234847EB"/></svg>');
    width: 20px;
    height: 20px;
    transform: none;
}

.accordion-button:not(.collapsed) {
  background-color: transparent;
  box-shadow: none;
  color: var(--text-button-tertiary, #4847eb);
  border-bottom: 1px solid;
}

.accordion-body-custom {
    flex: 1 0 0;
    color: var(--text-body-primary, #222);
    font-family: var(--type-font-family-font-family-2, 'Open Sans');
    font-size: var(--fontsize-body-body-l, 16px);
    font-weight: var(--font-weight-regular, 400);
    line-height: var(--line-height-body-l, 24px);
    padding: 0;
}

/* ==========================================================================
   RESPONSIVE OVERRIDES
   ========================================================================== */

/* Tablet (max-width: 991px) */
@media (max-width: 991px) {
  :root {
    /* Headings */
    --fontsize-heading-h1: var(--tablet-fontsize-heading-h1, 48px);
    --line-height-heading-h1: var(--tablet-line-height-heading-h1, 58px);
    --fontsize-heading-h2: var(--tablet-fontsize-heading-h2, 40px);
    --line-height-heading-h2: var(--tablet-line-height-heading-h2, 48px);
    --fontsize-heading-h3: var(--tablet-fontsize-heading-h3, 32px);
    --line-height-heading-h3: var(--tablet-line-height-heading-h3, 38px);
    --fontsize-heading-h4: var(--tablet-fontsize-heading-h4, 28px);
    --line-height-heading-h4: var(--tablet-line-height-heading-h4, 34px);
    --fontsize-heading-h5: var(--tablet-fontsize-heading-h5, 24px);
    --line-height-heading-h5: var(--tablet-line-height-heading-h5, 30px);
    --fontsize-heading-h6: var(--tablet-fontsize-heading-h6, 20px);
    --line-height-heading-h6: var(--tablet-line-height-heading-h6, 32px);

    /* Body */
    --fontsize-body-xl: var(--tablet-fontsize-body-xl, 18px);
    --line-height-body-xl: var(--tablet-line-height-body-xl, 32px);
    --fontsize-body-xxl: var(--tablet-fontsize-body-xxl, 18px);
    --line-height-body-xxl: var(--tablet-line-height-body-xxl, 29px);

    /* Caption & Copyright */
    --fontsize-body-caption: var(--tablet-fontsize-body-caption, 13px);
    --line-height-body-caption: var(--tablet-line-height-body-caption, 16px);
    --line-height-body-copyright: var(--tablet-line-height-body-copyright, 16px);

    /* Paragraph Spacings */
    --paragraph-spacing-body-l: var(--tablet-paragraph-spacing-body-l, 20px);
    --paragraph-spacing-body-m: var(--tablet-paragraph-spacing-body-m, 16px);
    --paragraph-spacing-body-caption: var(--tablet-paragraph-spacing-body-caption, 19px);
    --paragraph-spacing-body-copyright: var(--tablet-paragraph-spacing-body-copyright, 16px);
    --paragraph-spacing-heading-h1: var(--tablet-paragraph-spacing-heading-h1, 48px);
    --paragraph-spacing-heading-h2: var(--tablet-paragraph-spacing-heading-h2, 40px);
    --paragraph-spacing-heading-h3: var(--tablet-paragraph-spacing-heading-h3, 36px);
    --paragraph-spacing-heading-h4: var(--tablet-paragraph-spacing-heading-h4, 32px);
    --paragraph-spacing-heading-h5: var(--tablet-paragraph-spacing-heading-h5, 28px);
    --paragraph-spacing-heading-h6: var(--tablet-paragraph-spacing-heading-h6, 24px);

    /* Spacing Scale */
    --spacing-4xs: var(--tablet-spacing-4xs, 2px);
    --spacing-3xs: var(--tablet-spacing-3xs, 4px);
    --spacing-2xs: var(--tablet-spacing-2xs, 8px);
    --spacing-xs: var(--tablet-spacing-xs, 8px);
    --spacing-x: var(--tablet-spacing-x, 12px);
    --spacing-sm: var(--tablet-spacing-sm, 16px);
    --spacing-x2: var(--tablet-spacing-x2, 16px);
    --spacing-md: var(--tablet-spacing-md, 20px);
    --spacing-lg: var(--tablet-spacing-lg, 24px);
    --spacing-xl: var(--tablet-spacing-xl, 32px);
    --spacing-1xl: var(--tablet-spacing-1xl, 40px);
    --spacing-2xl: var(--tablet-spacing-2xl, 48px);
    --spacing-3xl: var(--tablet-spacing-3xl, 60px);
    --spacing-4xl: var(--tablet-spacing-4xl, 116px);
    --spacing-5xl: var(--tablet-spacing-5xl, 132px);
    --spacing-6xl: var(--tablet-spacing-6xl, 224px);
    --spacing-7xl: var(--tablet-spacing-7xl, 256px);

    /* Margins */
    --spacing-margin-spacing: var(--tablet-spacing-margin-spacing, 32px);
  }

  /* Spacing utilities */
  .p-sm   { padding: 16px; }
  .p-md   { padding: 20px; }
  .p-lg   { padding: 24px; }
  .p-xl   { padding: 32px; }
  .p-1xl  { padding: 40px; }
  .p-2xl  { padding: 48px; }
  .p-3xl  { padding: 60px; }
  .m-sm   { margin: 16px; }
  .m-md   { margin: 20px; }
  .m-lg   { margin: 24px; }
  .m-xl   { margin: 32px; }
  .m-1xl  { margin: 40px; }
}

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
  :root {
    /* Headings */
    --fontsize-heading-h1: 32px;
    --line-height-heading-h1: 38px;
    --fontsize-heading-h2: 28px;
    --line-height-heading-h2: 33px;
    --fontsize-heading-h3: 24px;
    --line-height-heading-h3: 32px;
    --fontsize-heading-h4: 20px;
    --line-height-heading-h4: 25px;
    --fontsize-heading-h5: 18px;
    --line-height-heading-h5: 26px;
    --fontsize-heading-h6: 16px;
    --line-height-heading-h6: 26px;

    /* Body */
    --fontsize-body-m: 14px;
    --fontsize-body-l: 16px;
    --fontsize-body-xl: 16px;
    --fontsize-body-xxl: 18px;
    --line-height-body-m: 22px;
    --line-height-body-l: 24px;
    --line-height-body-xl: 24px;
    --line-height-body-xxl: 29px;

    /* Caption, Copyright, Input */
    --fontsize-body-caption: 13px;
    --line-height-body-caption: 16px;
    --fontsize-body-copyright: 10px;
    --line-height-body-copyright: 16px;
    --fontsize-body-input-label: 12px;
    --line-height-body-input-label: 19px;

    /* Paragraph Spacings */
    --paragraph-spacing-body-l: 20px;
    --paragraph-spacing-body-m: 16px;
    --paragraph-spacing-body-caption: 16px;
    --paragraph-spacing-body-copyright: 16px;
    --paragraph-spacing-heading-h1: 48px;
    --paragraph-spacing-heading-h2: 40px;
    --paragraph-spacing-heading-h3: 36px;
    --paragraph-spacing-heading-h4: 32px;
    --paragraph-spacing-heading-h5: 32px;
    --paragraph-spacing-heading-h6: 32px;

    /* Spacing Scale */
    --spacing-4xs: 2px;
    --spacing-3xs: 4px;
    --spacing-2xs: 6px;
    --spacing-xs: 8px;
    --spacing-x: 12px;
    --spacing-sm: 20px;
    --spacing-x2: 16px;
    --spacing-md: 24px;
    --spacing-lg: 28px;
    --spacing-xl: 32px;
    --spacing-1xl: 40px;
    --spacing-2xl: 48px;
    --spacing-3xl: 60px;
    --spacing-4xl: 68px;
    --spacing-5xl: 76px;
    --spacing-6xl: 92px;
    --spacing-7xl: 116px;

    /* Margins */
    --spacing-margin-spacing: 16px;
  }

  /* Spacing utilities */
  .p-sm   { padding: 20px; } /* larger for touch */
  .p-md   { padding: 24px; }
  .p-lg   { padding: 28px; }
  .p-xl   { padding: 32px; }
  .p-1xl  { padding: 40px; }
  .p-2xl  { padding: 48px; }
  .p-3xl  { padding: 60px; }
  .m-sm   { margin: 20px; }
  .m-md   { margin: 24px; }
  .m-lg   { margin: 28px; }
  .m-xl   { margin: 32px; }
  .m-1xl  { margin: 40px; }
}


/* ========== CUSTOM STYLES ========== */
/**
 * Custom CSS for MySTI Template
 * This file loads automatically without needing SCSS compilation
 */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

/* Global Overflow Fix - Prevent horizontal scrolling on all screen sizes */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}

/* Base Font Family */
body {
  font-family: var(--type-font-family-font-family-2, 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading-font {
  font-family: var(--type-font-family-font-family-1, 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

/* Responsive Typography - Override CSS Variables for Mobile/Tablet */
@media (max-width: 768px) {
  :root {
    --fontsize-heading-h2: 28px;
    --line-height-heading-h2: 33px;
  }
}

/* HEADER BLOCK */
.header-wrap {
  max-width: 1344px;
  margin: 0 auto;
}

@media (max-width: 1439px) and (min-width: 1300px) {
  .header-wrap {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 1299px) {
  .header-wrap {
    padding: 6px 10px 8px 10px;
  }
}

/* HERO BLOCK */
.hero-block {
  display: flex;
  height: 700px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  position: relative;
  overflow: visible; /* Changed from hidden to allow autocomplete dropdown to extend beyond */
}

.hero-block .hero-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.hero-block .hero-content.container-fluid {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-lg, 24px);
  padding: var(--spacing-xl, 48px) var(--spacing-lg, 32px) !important;
}

@media (max-width: 991px) {
  .hero-block .hero-content.container-fluid {
    padding: var(--spacing-lg, 32px) var(--spacing-md, 24px) !important;
  }
}

@media (max-width: 767px) {
  .hero-block .hero-content.container-fluid {
    padding: var(--spacing-md, 24px) var(--spacing-sm, 16px) !important;
  }
}

.hero-content>*:last-child:not(.hero-search) {
  margin-bottom: 0;
}

.hero-content .hero-description+.hero-search {
  margin-top: var(--spacing-1xl, 48px);
}

.hero-heading {
  align-self: stretch;
  color: #FFF;
  text-align: center;
  font-family: var(--type-font-family-font-family-1, Poppins);
  font-size: var(--fontsize-heading-h1, 52px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-heading-h1, 62px);
  /* 119.231% */
  letter-spacing: 1.04px;
  margin: 0;
  padding-bottom: 20px;
}

.hero-description {
  color: var(--color-white, #FFF);
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-xl, 18px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-xl, 24px);
  /* 177.778% */
  margin: 0;
  text-align: center;
}

.hero-search {
  display: flex;
  width: 100%;
  height: 80px;
  max-width: 1000px;
  padding: var(--spacing-xs, 8px) var(--spacing-xs, 8px) var(--spacing-xs, 8px) var(--spacing-sm, 16px);
  align-items: center;
  border-radius: var(--border-radius-round, 999px);
  background: #FFF;
  position: relative; /* Ensure dropdown positioning works correctly */
  margin: 0 auto;
}

.hero-search-input-wrapper {
  flex: 1 0 0;
}

.hero-search-placeholder {
  color: var(--text-body-tertiary, #9CA3AF);
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-l, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-l, 24px);
  /* 150% */
  display: flex;
  align-items: center;
  pointer-events: none;
}

.hero-search-input {
  display: flex;
  height: 56px;
  padding: var(--spacing-sm, 12px);
  align-items: center;
  align-self: stretch;
  border: none;
  outline: none;
  flex: 1 0 0;
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-l, 16px);
  color: var(--text-body-primary, #222);
  width: 100%;
}

.hero-search-input::placeholder {
  color: var(--text-body-tertiary, #9CA3AF);
}

.hero-search-button {
  display: flex;
  width: 140px;
  height: 64px;
  min-width: 140px;
  padding: 10px var(--spacing-lg, 20px) 10px var(--spacing-md, 16px);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs, 8px);
  flex-shrink: 0;
  border: none;
  border-radius: var(--border-radius-round, 999px);
  background: var(--surface-primary-on-light, #BD0F16);
  box-shadow: 0 2px 6px 0 rgba(45, 35, 61, 0.15);
  cursor: pointer;
  transition: all 0.3s ease;
}

.hero-search-text {
  color: var(--text-on-dark, #FFF);
  text-align: center;
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-l, 16px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-body-l, 24px);
  /* 150% */
}

.hero-search-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  object-fit: contain;
}

.hero-search-button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px 0 rgba(45, 35, 61, 0.2);
}

/* Autocomplete Dropdown Styles */
.hero-search-input-wrapper {
  position: relative;
}

.search-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 9999;
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    min-width: 100%;
    width: auto;
}

.search-autocomplete-dropdown.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.search-autocomplete-dropdown::-webkit-scrollbar {
    width: 6px;
}

.search-autocomplete-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.search-autocomplete-dropdown::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 3px;
}

.search-autocomplete-dropdown::-webkit-scrollbar-thumb:hover {
    background: #9CA3AF;
}

.autocomplete-item {
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #F3F4F6;
    transition: background-color 0.15s ease;
    text-decoration: none;
    color: inherit;
    position: relative;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item:focus {
    background-color: #F3F4F6;
    text-decoration: none;
    outline: none;
}

.autocomplete-item-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6B7280;
    background: #F9FAFB;
    border-radius: 6px;
    padding: 4px;
    overflow: hidden;
    position: relative;
}

.autocomplete-item:hover .autocomplete-item-icon {
    background: #E5E7EB;
    color: #4847EB;
}

/* Product image styles */
.autocomplete-item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

.autocomplete-item-icon-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.autocomplete-item-icon-fallback svg {
    width: 16px;
    height: 16px;
}

.autocomplete-item-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.autocomplete-item-text {
    font-family: var(--type-font-family-font-family-2, "Open Sans");
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #1E2939;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.autocomplete-item-text .autocomplete-highlight {
    background-color: transparent;
    color: inherit;
    font-weight: 700;
}

.autocomplete-item-category {
    font-family: var(--type-font-family-font-family-2, "Open Sans");
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: #6B7280;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.autocomplete-item[data-type="product"] .autocomplete-item-category {
    color: #4847EB;
}

.autocomplete-item[data-type="category"] .autocomplete-item-text {
    color: #059669;
}

.autocomplete-item[data-type="company"] .autocomplete-item-text {
    color: #DC2626;
}

/* Section headers and dividers */
.autocomplete-section-header {
    padding: 8px 16px 6px 16px;
    font-family: var(--type-font-family-font-family-2, "Open Sans");
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #F9FAFB;
    border-bottom: 1px solid #F3F4F6;
}

.autocomplete-divider {
    height: 1px;
    background: #E5E7EB;
    margin: 4px 0;
}

.autocomplete-item-meta {
    flex-shrink: 0;
    font-family: var(--type-font-family-font-family-2, "Open Sans");
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #9CA3AF;
}

.autocomplete-no-results {
    padding: 20px 16px;
    text-align: center;
    color: #6B7280;
    font-family: var(--type-font-family-font-family-2, "Open Sans");
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.autocomplete-loading {
    padding: 20px 16px;
    text-align: center;
    color: #6B7280;
    font-family: var(--type-font-family-font-family-2, "Open Sans");
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.autocomplete-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #E5E7EB;
    border-top-color: #4847EB;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Responsive adjustments for autocomplete */
@media (max-width: 768px) {
    .search-autocomplete-dropdown {
        max-height: 300px;
    }

    .autocomplete-item {
        padding: 10px 14px;
    }

    .autocomplete-item-text {
        font-size: 13px;
    }

    .autocomplete-item-category,
    .autocomplete-item-meta {
        font-size: 11px;
    }
}

/* Mobile Responsive Styles for Hero Search */
@media (max-width: 767px) {
  .hero-search-button {
    display: flex;
    width: 56px;
    height: 56px;
    padding: 10px 0;
    justify-content: center;
    align-items: center;
    gap: 8px;
    aspect-ratio: 1/1;
    min-width: 56px;
  }

  .hero-search-text {
    display: none;
  }

  .hero-search-input {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Ellipsis only appears if the text is wider than the input */
  }

  .hero-search-input::placeholder {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
  }
}

@media (max-width: 991px) {
  .hero-block {
    height: var(--hero-height-tablet);
  }
}

@media (max-width: 767px) {
  .hero-block {
    height: var(--hero-height-mobile);
  }
}

/* FEATURES BLOCK */
.features-block {
  padding: var(--spacing-1xl, 48px) var(--spacing-margin-spacing, 48px);
  background: var(--color-blue-bendera-MY-450, #183581);
}

.row-max-width-1320 {
  max-width: 1344px;
}

.feature-item {
  gap: 19px;
  padding: var(--spacing-md, 20px);
  border-radius: var(--border-radius-sm, 10px);
  background: rgba(255, 255, 255, 0.12);
}

.feature-icon {
  padding: var(--spacing-xs, 8px) 0;
}

.feature-icon img {
  max-width: 80px;
}

.feature-title {
  color: var(--color-white);
  font-family: var(--type-font-family-font-family-2, 'Open Sans', sans-serif);
  font-size: var(--fontsize-body-body-xl, 18px);
  font-weight: 700;
  line-height: var(--line-height-body-xl, 24px);
}

.feature-description {
  text-align: left;
  color: var(--text-on-dark, #FFF);
  font-size: var(--fontsize-body-body-l, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-l, 24px);
  /* 150% */
}

/* Features Carousel Styles */
.features-carousel-slider .owl-stage-outer {
  overflow: hidden;
}

.feature-slide {
  padding: 0 8px;
}

.feature-slide .feature-item {
  margin: 0 auto;
  max-width: 100%;
}

/* Dots Navigation Styling */
#features-carousel .owl-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 0;
}

#features-carousel .owl-dots .owl-dot {
  width: 8px;
  height: 8px;
  min-height: 8px;
  max-height: 8px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  fill: var(--text-on-dark, #FFF);
  opacity: 0.3;
  border: none;
  padding: 0;
  margin: 0;
  transition: all 0.3s ease;
  cursor: pointer;
  background: transparent;
}

#features-carousel .owl-dots .owl-dot.active {
  width: 32px;
  height: 8px;
  min-height: 8px;
  max-height: 8px;
  border-radius: var(--border-radius-xl, 48px);
  background: #FFF;
  opacity: 1;
}

#features-carousel .owl-dots .owl-dot:hover {
  opacity: 0.5;
}

#features-carousel .owl-dots .owl-dot.active:hover {
  opacity: 1;
  background: #FFF;
}

/* Owl Carousel Dots Span Styling */
.t4-wrapper .owl-carousel .owl-dots .owl-dot span {
  background: #E5E7EB;
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  width: 8px;
}

.t4-wrapper .owl-carousel .owl-dots .owl-dot.active span {
  background: white;
}

@media (max-width: 767px) {
  .feature-item {
    width: 100%;
    max-width: 429px;
    margin-bottom: var(--spacing-md, 24px);
  }
}

/* FEATURES ANIMATIONS */
.feature-item.will-animate {
  opacity: 0;
  transform: translateY(30px);
}

.feature-item.animate-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Staggered animation delay */
.feature-item.animate-in:nth-child(1) {
  transition-delay: 0s;
}

.feature-item.animate-in:nth-child(2) {
  transition-delay: 0.1s;
}

.feature-item.animate-in:nth-child(3) {
  transition-delay: 0.2s;
}

/* Focus styles for accessibility */
.feature-item:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 4px;
}

/* PRODUCTS BLOCK */
.categories-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg, 24px);
  align-self: stretch;
  padding: var(--spacing-3xl, 92px) var(--spacing-margin-spacing, 48px);
  min-height: 400px;
  position: relative;
  overflow: hidden;
}

.categories-block .categories-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/templates/mysti_default/images/products-bg.jpg');
  background-position: -470.901px -720.908px;
  background-size: 156.014% 164.802%;
  background-repeat: no-repeat;
  z-index: 0;
  opacity: 0.5;
}

.categories-block .categories-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(242, 247, 255, 0.7);
  z-index: 1;
}

.categories-content {
  width: 100%;
  position: relative;
  z-index: 2;
}

.categories-title {
  color: var(--text-body-primary, #222);
  font-family: var(--type-font-family-font-family-1, Poppins);
  font-size: var(--fontsize-heading-h2, 52px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-heading-h2, 58px);
  /* 120.833% */
  margin: 0;
}

.categories-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: var(--spacing-md, 24px);
  margin: 0;
  padding: 0;
}

.stat-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md, 20px);
  align-self: stretch;
}

.stat-item:nth-child(1) {
  grid-row: 1;
  grid-column: 1;
}

.stat-item:nth-child(2) {
  grid-row: 1;
  grid-column: 2;
}

.stat-item:nth-child(3) {
  grid-row: 2;
  grid-column: 1;
}

.stat-item:nth-child(4) {
  grid-row: 2;
  grid-column: 2;
}

.stat-bar {
  width: 4px;
  height: 70px;
  background: var(--surface-primary-on-light, #BD0F16);
  border-radius: var(--border-radius-md, 16px);
  flex-shrink: 0;
}


.stat-text {
  display: flex;
  width: fit-content;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-4xs, 2px);
}

.stat-text-number {
  background: linear-gradient(180deg, var(--color-blue-mysti-200, #B9C4FF) 0%, var(--color-blue-bendera-MY-500-primary--4-saturation, #030264) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  font-family: var(--type-font-family-font-family-1, Poppins);
  font-size: var(--fontsize-heading-h3, 36px);
  font-style: normal;
  font-weight: 700;
  margin: 0;
  line-height: var(--line-height-heading-h3, 44px);
  /* 122.222% */
}

.stat-text-label {
  align-self: stretch;
  color: var(--text-body-primary, #222);

  /* Body L */
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-l, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-l, 24px);
  /* 150% */
}

.categories-carousel {
  position: relative;
  width: 100%;
  z-index: 2;
  overflow-x: hidden;
}

.categories-carousel-inner {
  position: relative;
  min-height: 340px;
  z-index: 2;
}

.categories-grid.owl-carousel {
  display: block;
  position: relative;
  z-index: 2;
}

/* Navigation buttons positioned outside max-width container */
#categories-carousel .owl-nav {
  position: absolute;
  top: calc(116px + var(--spacing-md, 20px) / 2);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1344px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 10;
  padding: 0;
  margin: 0;
  height: 0;
}

#categories-carousel .owl-nav button {
  display: flex;
  padding: 11px;
  justify-content: center;
  align-items: center;
  gap: 18.333px;
  border-radius: 44px;
  background: #FFF;
  /* btn */
  box-shadow: 0 2px 6px 0 rgba(45, 35, 61, 0.15);
  pointer-events: all;
  position: relative;
  margin: 0;
  transition: all 0.3s ease;
}

#categories-carousel .owl-nav button > * {
  display: flex;
  width: 33px;
  height: 33px;
  padding: 2.333px 1.833px 1.333px 1.833px;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
}

#categories-carousel .owl-nav button:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#categories-carousel .owl-nav button.owl-prev {
  position: absolute;
  left: 0px;
  visibility: hidden;
}

#categories-carousel .owl-nav button.owl-prev:not(.disabled) {
  visibility: visible;
}

#categories-carousel .owl-nav button.owl-next {
  position: absolute;
  right: 0px;
}

@media (max-width: 1400px) {
  #categories-carousel .owl-nav {
    max-width: 1200px;
  }
}

@media (max-width: 1200px) {
  #categories-carousel .owl-nav {
    max-width: 960px;
  }
}

@media (max-width: 992px) {
  #categories-carousel .owl-nav {
    max-width: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 20px;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .categories-carousel-inner {
    padding-bottom: 60px;
  }

  #categories-carousel .owl-nav button {
    width: 40px;
    height: 40px;
  }

  #categories-carousel .owl-nav {
    padding: 0 10px;
    top: unset;
    bottom: 0;
    transform: none;
    justify-content: start;
    gap: 16px;
    left: 0;
    height: fit-content;
    margin-bottom: -50px;
  }

  #categories-carousel .owl-nav button.owl-prev.disabled {
    display: flex !important;
    opacity: 0.5;
    cursor: not-allowed;
  }
  #categories-carousel .owl-nav button.owl-next.disabled {
    display: flex !important;
    opacity: 0.5;
    cursor: not-allowed;
  }

  #categories-carousel .owl-nav button.owl-prev {
    position: relative;
    left: auto;
    visibility: visible;
  }

  #categories-carousel .owl-nav button.owl-next {
    position: relative;
    right: auto;
  }
}

.categories-grid .owl-stage {
  display: flex;
  align-items: flex-start;
}

.categories-grid .owl-item {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

/* Hide the original container - JavaScript will create slides */
.products-all-items {
  display: none;
}

.product-slide {
  display: none;
}

/* Product column - contains 2 items stacked vertically */
.categories-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md, 20px);
  width: 100%;
  min-width: 0;
}

.categories-item {
  border-radius: 100px;
  background: #FFF;
  display: flex;
  width: 140px;
  height: 140px;
  padding: var(--spacing-lg, 28px) var(--spacing-md, 24px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs, 8px);
  flex-shrink: 0;
  aspect-ratio: 1/1;
}

.categories-item:hover {
  border: 1.2px solid var(--border-action, #BD0F16);
}

/* 5 columns */
@media (max-width: 1200px) {
  .categories-slide {
    gap: var(--spacing-md, 20px) var(--spacing-lg, 32px);
  }
}

/* 4 columns */
@media (max-width: 992px) {
  .categories-slide {
    gap: var(--spacing-md, 20px) var(--spacing-md, 24px);
  }
}

/* 3 columns */
@media (max-width: 768px) {
  .categories-slide {
    gap: var(--spacing-sm, 16px) var(--spacing-md, 20px);
  }
}

/* 2 columns */
@media (max-width: 576px) {
  .categories-slide {
    gap: var(--spacing-sm, 16px);
  }
}

.categories-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.categories-icon img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.categories-label {
  align-self: stretch;
  word-wrap: break-word;
  color: var(--text-body-primary, #222);
  text-align: center;
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-Caption, 13px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-Caption, 16px);
  /* 123.077% */
  margin: 0;
}

@media (max-width: 767px) {
  .categories-stats {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 16px;
  }

  .categories-icon {
    width: 40px;
    height: 40px;
  }
}

/* TRENDING PRODUCTS AND FEATURED PRODUCTS BLOCK */
.trending-products-block, .featured-products-block {
  padding: var(--spacing-2xl, 68px) 48px var(--spacing-2xl, 68px) 48px;
}

@media (max-width: 1439px) and (min-width: 1020px) {
  .trending-products-block, .featured-products-block {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 1019px) {
  .trending-products-block, .featured-products-block {
    padding-left: 0;
    padding-right: 0;
  }

  .trending-products-content {
    padding: 0 var(--spacing-md, 24px);
  }
}

@media (max-width: 991px) {
  .trending-products-block, .featured-products-block {
    padding: var(--spacing-3xl, 60px) 0 var(--spacing-2xl, 48px) var(--spacing-margin-spacing, 16px);
  }
}

.trending-products-content, .featured-products-content {
  width: 100%;
}

.trending-products-header, .featured-products-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-margin-spacing, 48px);
  gap: var(--spacing-lg, 24px);
}

.trending-products-title-section, .featured-products-title-section {
  flex: 1;
}

.trending-products-title, .featured-products-title {
  color: var(--text-body-primary, #222);
  text-align: left;
  font-family: var(--type-font-family-font-family-1, Poppins);
  font-size: var(--fontsize-heading-h2, 52px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-heading-h2, 58px);
  /* 120.833% */
  margin: 0;
}

.trending-products-description, .featured-products-description {
  align-self: stretch;
  color: var(--text-body-primary, #222);
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-xl, 18px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-xl, 24px);
  /* 177.778% */
  margin: var(--spacing-sm, 16px) 0 0 0;
}

.trending-products-view-all, .featured-products-view-all {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.trending-products-view-all-text, .featured-products-view-all-text {
  color: var(--text-body-primary, #222);
  text-align: center;
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-xl, 18px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-body-xl, 24px);
  /* 177.778% */
}

.trending-products-view-all-icon, .featured-products-view-all-icon {
  border-radius: var(--border-radius-lg, 24px);
  background: var(--color-blue-mysti-400, #5461F4);
  display: flex;
  padding: var(--border-radius-xs-2, 6px);
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.trending-products-view-all-icon img, .featured-products-view-all-icon img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  object-fit: contain;
  display: block;
}

.trending-products-view-all:hover .trending-products-view-all-icon, .featured-products-view-all:hover .featured-products-view-all-icon {
  opacity: 0.9;
  transform: translateX(2px);
}

.trending-products-carousel, .featured-products-carousel {
  position: relative;
  width: 100%;
  z-index: 1;
}

.trending-products-carousel-inner, .featured-products-carousel-inner {
  position: relative;
}

.trending-products-grid.owl-carousel, .featured-products-grid.owl-carousel {
  display: block;
}

.trending-product-card, .featured-product-card {
  display: flex;
  padding: var(--sizing-component-md, 16px) 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm, 16px);
  align-self: stretch;
  border-radius: 0 0 var(--border-radius-md, 16px) var(--border-radius-md, 16px);
}

.trending-product-image, .featured-product-image {
  width: 100%;
  overflow: hidden;
  background: #F3F4F6;
}

.trending-product-image img, .featured-product-image img {
  border-radius: var(--border-radius-sm, 10px);
  background: lightgray 50% / cover no-repeat;
  height: 277px;
  flex-shrink: 0;
  align-self: stretch;
  object-fit: cover;
}

.trending-product-info, .featured-product-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xs, 8px);
  align-self: stretch;
}

.trending-product-title, .featured-product-title {
  align-self: stretch;
  color: var(--text-headings, #030264);

  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-m, 14px);
  font-style: normal;
  font-weight: 600;
  line-height: var(--line-height-body-m, 22px);
}

.trending-product-company, .featured-product-company {
  color: var(--text-body-secondary, #6B7280);
  align-self: stretch;
  /* Body M */
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontSize-12, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-M, 22px); /* 157.143% */
}

.trending-product-location, .featured-product-location {
  display: flex;
  align-items: center;
  color: var(--text-body-secondary, #6B7280);
  /* Body M */
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontSize-12, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-M, 22px); /* 157.143% */
}

.trending-product-location-icon, .featured-product-location-icon {
  display: flex;
  width: 18px;
  height: 18px;
  padding: 1px;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
  flex-shrink: 0;
}

.trending-product-location-icon img, .featured-product-location-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Navigation buttons for trending products carousel */
#trending-products-carousel .owl-nav, #featured-products-carousel .owl-nav {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1344px;
  display: flex !important;
  justify-content: space-between;
  pointer-events: none;
  z-index: 10;
  padding: 0;
  margin: 0;
}

#trending-products-carousel .owl-nav button, #featured-products-carousel .owl-nav button {
  pointer-events: all;
  position: relative;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin: 0;
  cursor: pointer;
  opacity: 1;
  visibility: visible;
}

#trending-products-carousel .owl-nav button.disabled, #featured-products-carousel .owl-nav button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#trending-products-carousel .owl-nav button.owl-prev, #featured-products-carousel .owl-nav button.owl-prev {
  left: -20px;
  display: none;
}

#trending-products-carousel .owl-nav button.owl-prev:not(.disabled), #featured-products-carousel .owl-nav button.owl-prev:not(.disabled) {
  display: flex !important;
}

#trending-products-carousel .owl-nav button:hover, #featured-products-carousel .owl-nav button:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#trending-products-carousel .owl-nav button.owl-next, #featured-products-carousel .owl-nav button.owl-next {
  right: -20px;
}

@media (max-width: 1400px) {
  #trending-products-carousel .owl-nav, #featured-products-carousel .owl-nav {
    max-width: 1200px;
  }
}

@media (max-width: 1200px) {
  #trending-products-carousel .owl-nav, #featured-products-carousel .owl-nav {
    max-width: 960px;
  }
}

@media (max-width: 992px) {
  .trending-products-header, .featured-products-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .trending-products-title, .featured-products-title {
    font-size: 2rem;
  }

  #trending-products-carousel .owl-nav, #featured-products-carousel .owl-nav {
    max-width: 100%;
    left: 0;
    transform: translateY(-50%);
    padding: 0 20px;
  }

  #trending-products-carousel .owl-nav button.owl-prev, #featured-products-carousel .owl-nav button.owl-prev {
    left: -10px;
    position: absolute;
  }

  #trending-products-carousel .owl-nav button.owl-next, #featured-products-carousel .owl-nav button.owl-next {
    right: -10px;
    position: absolute;
  }
}

@media (max-width: 768px) {
  .trending-products-block {
    padding: var(--spacing-xl, 48px) 0 var(--spacing-lg, 32px) 0;
  }

  #trending-products-carousel .owl-nav button, #featured-products-carousel .owl-nav button {
    width: 40px;
    height: 40px;
  }

  #trending-products-carousel .owl-nav, #featured-products-carousel .owl-nav {
    padding: 0 10px;
  }

  .trending-product-image, .featured-product-image {
    height: 277px;
  }
}

.featured-products-block {
  padding: var(--spacing-2xl, 68px) var(--spacing-margin-spacing, 48px) var(--spacing-4xl, 116px) var(--spacing-margin-spacing, 48px);
}

.featured-products-content {
  width: 100%;
}

/* Navigation buttons for featured products carousel */
#featured-products-carousel .owl-nav, #trending-products-carousel .owl-nav {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1344px;
  display: flex !important;
  justify-content: space-between;
  pointer-events: none;
  z-index: 10;
  padding: 0;
  margin: 0;
}

/* GATEWAY BLOCK */
.gateway-block {
  min-height: 500px;
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}

.gateway-block .gateway-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.gateway-block .gateway-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(44, 47, 58, 0.70);
  z-index: 1;
}

@media (max-width: 1199px) {
  .gateway-block {
    min-height: 450px;
    padding: 80px 0;
  }
}

@media (max-width: 991px) {
  .gateway-block {
    min-height: 400px;
    padding: 64px 0;
  }
}

@media (max-width: 767px) {
  .gateway-block {
    min-height: 350px;
    padding: 48px 0;
  }
}

.gateway-content {
  position: relative;
  z-index: 2;
}

.gateway-wrap {
  max-width: 1344px;
  margin: 0 auto;
  padding: 0 var(--spacing-margin-spacing, 48px);
  width: 100%;
}

.gateway-heading {
  max-width: 900px;
  align-self: stretch;
  color: var(--color-blue-bendera-my-50, #F2F7FF);
  text-align: center;
  max-width: 900px;
  /* H2 */
  font-family: var(--type-font-family-font-family-1, Poppins);
  font-size: var(--fontsize-heading-h2, 52px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-heading-h2, 63px);
  /* 121.154% */
}

.gateway-pillars {
  margin-top: 48px;
}

@media (max-width: 991px) {
  .gateway-pillars {
    margin-top: 32px;
  }
}

.gateway-pillar-card {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  display: flex;
  padding: var(--spacing-md, 20px) var(--spacing-1xl, 48px);
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  flex: 1 0 0;
  height: 100%;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  transition: none;
  position: relative;
  overflow: hidden;
}

.gateway-pillar-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, #5461F4, #ffd98b);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

@media (max-width: 991px) {
  .gateway-pillar-card {
    min-height: 140px;
    padding: 24px;
  }
}

@media (max-width: 767px) {
  .gateway-pillar-card {
    min-height: 120px;
    padding: 16px;
  }
}


.gateway-pillar-content {
  text-align: center;
}

.gateway-pillar-text {
  color: var(--border-on-action, #FFF);
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-xl, 18px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-xl, 28px); /* 155.556% */
  margin: 0;
}

@media (max-width: 991px) {
  .gateway-pillar-text {
    font-size: var(--fontsize-body-body-xl, 16px);
  }
}

/* Gateway Pillars Carousel Styles */
.gateway-pillars-carousel {
  padding: 0 var(--spacing-md, 24px);
  max-width: 1344px;
  margin: 0 auto;
}

.gateway-pillars-slider .owl-stage-outer {
  overflow: hidden;
}

.gateway-pillar-slide {
  padding: 0 8px;
}

.gateway-pillar-slide .gateway-pillar-card {
  margin: 0 auto;
  max-width: 100%;
}

/* Gateway Pillars Dots Navigation Styling */
#gateway-pillars-carousel .owl-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 0;
}

#gateway-pillars-carousel .owl-dots .owl-dot {
  width: 8px;
  height: 8px;
  min-height: 8px;
  max-height: 8px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  fill: var(--text-on-dark, #FFF);
  opacity: 0.3;
  border: none;
  padding: 0;
  margin: 0;
  transition: all 0.3s ease;
  cursor: pointer;
  background: transparent;
}

#gateway-pillars-carousel .owl-dots .owl-dot.active {
  width: 32px;
  height: 8px;
  min-height: 8px;
  max-height: 8px;
  border-radius: var(--border-radius-xl, 48px);
  background: #FFF;
  opacity: 1;
}

#gateway-pillars-carousel .owl-dots .owl-dot:hover {
  opacity: 0.5;
}

#gateway-pillars-carousel .owl-dots .owl-dot.active:hover {
  opacity: 1;
  background: #FFF;
}

/* HOW TO APPLY BLOCK */
.how-to-apply-block {
  display: flex;
  padding: var(--spacing-4xl, 116px) 0;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2xl, 68px);
  align-self: stretch;
}

.how-to-apply-content {
  width: 100%;
  max-width: 1344px;
  margin: 0 auto;
  padding: 0 var(--spacing-margin-spacing, 48px);
}

.how-to-apply-title {
  color: var(--text-body-primary, #222);
  text-align: center;
  font-family: var(--type-font-family-font-family-1, Poppins);
  font-size: var(--fontsize-heading-h2, 52px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-heading-h2, 58px);
  margin: 0 0 var(--spacing-2xl, 68px) 0;
}

.how-to-apply-steps {
  width: 100%;
  margin: 0;
}

.how-to-apply-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm, 16px);
  text-align: center;
  height: 100%;
}

.step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-icon img {
  width: 165px;
  height: 100px;
  max-width: 100%;
  object-fit: contain;
}

.step-text {
  text-align: left;
  color: var(--text-body-primary, #222);
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-l, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-l, 24px);
  margin: 0;
}

@media (max-width: 991px) {
  .how-to-apply-block {
    padding: var(--spacing-3xl, 92px) 0;
    gap: var(--spacing-xl, 48px);
  }

  .how-to-apply-title {
    font-size: var(--fontsize-heading-h2, 28px);
    margin-bottom: var(--spacing-xl, 48px);
  }
}

@media (max-width: 767px) {
  .how-to-apply-block {
    padding: var(--spacing-2xl, 64px) 0;
    gap: var(--spacing-lg, 32px);
  }
}

/* GLOBAL GROWTH BLOCK */
.global-growth-block {
  padding: var(--spacing-3xl, 92px) 0;
  padding: 0 48px;
  background: #FFF;
}

@media (max-width: 1439px) and (min-width: 1020px) {
  .global-growth-block {
    padding: 0 40px;
  }
}

.global-growth-content {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

.global-growth-text {
  border-radius: var(--border-radius-xl-2, 80px);
  background: linear-gradient(90deg, var(--color-blue-bendera-my-480, #062074) 25.96%, var(--color-blue-bendera-my-400, #415D9C) 100%);
  display: flex;
  width: 100%;
  padding: 60px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.global-growth-title {
  color: var(--text-on-dark, #FFF);
  /* H4 */
  font-family: var(--type-font-family-font-family-1, Poppins);
  font-size: var(--fontsize-heading-h4, 28px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-heading-h4, 34px); /* 121.429% */
  margin: 0 0 16px 0;
}


.global-growth-description {
  color: var(--text-on-dark, #FFF);
  /* Body L */
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-l, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-l, 24px); /* 150% */
  margin: 0 0 var(--spacing-xl, 32px) 0;
}

.global-growth-button {
  border-radius: var(--border-radius-round, 999px);
  background: #FBCA70;
  /* btn */
  box-shadow: 0 2px 6px 0 rgba(45, 35, 61, 0.15);
  display: flex;
  height: 42px;
  min-width: 100px;
  padding: 10px var(--sizing-component-lg, 20px);
  justify-content: center;
  align-items: center;
  color: var(--text-headings, #030264);
  text-align: center;
  /* Body L bold */
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-l, 16px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-body-l, 24px);
  /* 150% */
  text-decoration: none;
  transition: all 0.3s ease;
  align-self: flex-start;
}

.global-growth-button:hover {
  background: #FFC933;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 184, 0, 0.3);
  color: var(--text-headings, #030264);
  text-decoration: none;
}

.global-growth-image-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-left: -10%;
  z-index: 1;
}

.global-growth-image {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}

@media (max-width: 767px) {
  .global-growth-block {
    padding: var(--sizing-component-1xl, 32px);
  }
  
  .global-growth-content {
    flex-direction: column;
    align-items: stretch;
  }

  .global-growth-image-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    order: 1;
    border-radius: var(--border-radius-xl-2, 80px) 80px 0 0;
    overflow: hidden;
  }

  .global-growth-image-wrapper .global-growth-image {
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: inherit;
    object-fit: contain;
  }

  .global-growth-text {
    order: 2;
    width: 100%;
    height: auto;
    padding: var(--sizing-component-1xl, 32px);
    border-radius: var(--border-radius-xl, 48px);
    margin-top: -35px;
    align-items: flex-start;
    gap: 12px;
  }
  
  .global-growth-title {
    font-size: var(--fontsize-heading-h3, 24px);
    line-height: var(--line-height-heading-h3, 32px);
  }

  .global-growth-description {
    font-size: var(--fontsize-body-body-l, 16px);
    line-height: var(--line-height-body-l, 24px);
    margin-bottom: 20px;
  }

  .global-growth-button {
    width: 100%;
    height: auto;
    justify-content: center;
  }
}

/* ABOUT MYSTI BLOCK */
.about-mysti-block {
  padding: var(--spacing-3xl, 92px) 0;
  background-color: #FAFAFA !important;
}

.about-mysti-content {
  max-width: 1344px;
  margin: 0 auto;
  padding: 0 var(--spacing-margin-spacing, 48px);
  width: 100%;
}

.about-mysti-section {
  margin-bottom: var(--spacing-2xl, 68px);
}

.about-mysti-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  cursor: pointer;
}

.about-mysti-title {
  color: var(--text-body-primary, #222);
  /* Body M bold */
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-m, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-body-m, 22px);
  /* 157.143% */
  margin: 0;
}

.about-mysti-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-body-primary, #222);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.about-mysti-toggle svg {
  width: 100%;
  height: 100%;
}

.about-mysti-toggle[aria-expanded="false"] {
  transform: rotate(-90deg);
}

.about-mysti-body {
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.about-mysti-text {
  color: var(--text-body-primary, #222);
  /* Body M */
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontSize-12, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-m, 22px);
  /* 157.143% */
  margin: 0;
}

.explore-categories-section {
  margin-top: 20px;
}

.explore-categories-title {
  color: var(--text-body-primary, #222);
  /* Body M bold */
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-m, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-body-m, 22px);
  /* 157.143% */
  margin: 0 0 20px 0;
}

.categories-list {
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  gap: 12px var(--spacing-x, 12px);
  align-self: stretch;
  flex-wrap: wrap;
}

.category-item {
  color: var(--text-body-primary, #222);
  /* Body M Link */
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontSize-12, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-m, 22px);
  /* 157.143% */
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  transition: color 0.3s ease;
}

.category-item:hover {
  color: var(--color-primary, #183581);
  text-decoration: none;
}

@media (max-width: 991px) {
  .about-mysti-block {
    padding: var(--spacing-2xl, 64px) 0;
  }

  .about-mysti-title,
  .explore-categories-title {
    font-size: var(--fontsize-body-body-m, 14px);
  }

}

@media (max-width: 767px) {
  .about-mysti-block {
    padding: var(--spacing-xl, 48px) 0;
  }

  .about-mysti-title,
  .explore-categories-title {
    font-size: var(--fontsize-body-body-m, 14px);
  }

  .about-mysti-section {
    margin-bottom: var(--spacing-xl, 48px);
  }

  .explore-categories-section {
    margin-top: var(--spacing-xl, 48px);
  }
}

/* FOOTER BLOCK */
.footer-block {
  width: 100%;
}

.footer-main {
  display: flex;
  padding: var(--spacing-1xl, 48px) var(--spacing-margin-spacing, 48px);
  flex-direction: column;
  align-items: center;
  max-width: 1344px;
  margin: 0 auto;
  width: 100%;
}

.footer-grid {
  display: grid;
  height: 280px;
  row-gap: 8px;
  column-gap: 16px;
  flex-shrink: 0;
  align-self: stretch;
  grid-template-rows: repeat(8, minmax(0, 1fr));
  grid-template-columns: 385.00px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  width: 100%;
}

/* Logo Section */
.footer-logo-wrapper {
  grid-column: 1 / span 1;
  grid-row: 1 / span 3;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 198px;
  height: 60px;
  flex-shrink: 0;
  aspect-ratio: 33/10;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.footer-logo img {
  display: block;
  height: auto;
}

.footer-logo img.footer-logo-image {
  height: 63.5px;
  width: auto;
  flex: 1 0 0;
}

.footer-logo img.footer-logo-name {
  height: 26px;
  width: auto;
  flex: 1 0 0;
}

.footer-copyright {
  position: absolute;
  top: 76px;
  left: 0;
  color: var(--text-body-primary, #222);
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontSize-12, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-m, 22px);
  margin: 0;
}

/* Footer Sections */
.footer-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-section:nth-child(3) {
  grid-column: 3 / span 1;
  grid-row: 1 / span 8;
}

.footer-section:nth-child(4) {
  grid-column: 4 / span 1;
  grid-row: 1 / span 8;
}

.footer-section-title {
  color: var(--text-body-primary, #222);
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-m, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-body-m, 22px);
  margin: 0 0 var(--spacing-sm, 16px) 0;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 8px);
}

.footer-link {
  color: var(--text-body-primary, #222);
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontSize-12, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-m, 22px);
  text-decoration: none;
  transition: var(--transition-base, all 0.3s ease);
}

.footer-link:hover {
  color: var(--color-primary, #183581);
  text-decoration: underline;
}

/* Social Media Links */
.footer-social {
  display: flex;
  gap: var(--spacing-sm, 16px);
  margin-top: var(--spacing-xs, 8px);
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  aspect-ratio: 1/1;
  transition: var(--transition-base, all 0.3s ease);
}

.footer-social-link:hover {
  opacity: 0.8;
}

.footer-social-link img {
  width: 32px;
  height: 32px;
  aspect-ratio: 1/1;
  object-fit: contain;
  display: block;
}

@media (max-width: 991px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    height: auto;
    gap: var(--spacing-lg, 32px) var(--spacing-md, 24px);
  }

  .footer-logo-wrapper {
    grid-column: 1 / span 2;
    grid-row: auto;
    position: relative;
  }

  .footer-logo {
    position: relative;
    width: 198px;
    height: 60px;
  }

  .footer-copyright {
    position: relative;
    top: auto;
    left: auto;
    margin-top: 16px;
  }

  .footer-section:nth-child(2),
  .footer-section:nth-child(3),
  .footer-section:nth-child(4) {
    grid-column: auto;
    grid-row: auto;
  }

  .footer-section:nth-child(2) {
    grid-column: 1;
  }

  .footer-section:nth-child(3) {
    grid-column: 2;
  }

  .footer-section:nth-child(4) {
    grid-column: 3;
  }
}

@media (max-width: 767px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: var(--spacing-lg, 32px) var(--spacing-md, 24px);
  }

  .footer-logo-wrapper {
    grid-column: 1 / span 2;
  }

  /* Quick Links and Support sections side by side on mobile */
  .footer-section:nth-child(2) {
    grid-column: 1;
  }

  .footer-section:nth-child(3) {
    grid-column: 2;
  }

  /* Connect section full width below */
  .footer-section:nth-child(4) {
    grid-column: 1 / span 2;
  }

  .footer-links{
    gap: 20px;
  }

  .footer-social{
    gap: var(--spacing-md, 24px);
  }
}

@media (max-width: 575px) {
  .footer-grid {
    gap: var(--spacing-md, 24px);
  }
}

/* Navbar Logo Wrapper */
.navbar-logo-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs, 8px);
}

/* MySTI Logo Responsive Styles */
@media (max-width: 991px) {
  .mysti-logo-link img {
    width: 56px;
    height: 52px;
    max-width: 56px !important;
    aspect-ratio: 14/13;
  }
}

/* Header Responsive Padding */
@media (max-width: 991px) {
  .header-wrap {
    padding: 6px 10px 8px 10px;
  }
}

/* GATEWAY CAROUSEL STYLES */
.gateway-carousel {
  padding: var(--spacing-lg, 32px) var(--spacing-md, 24px);
  max-width: 100%;
}

.gateway-slide .gateway-pillar-card {
  margin: 0 auto;
  max-width: 100%;
}

/* Gateway Carousel Dots Navigation - Same style as features */
#gateway-carousel .owl-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 0;
}

#gateway-carousel .owl-dots .owl-dot {
  width: 8px;
  height: 8px;
  min-height: 8px;
  max-height: 8px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  fill: var(--text-on-dark, #FFF);
  opacity: 0.3;
  border: none;
  padding: 0;
  margin: 0;
  transition: all 0.3s ease;
  cursor: pointer;
  background: transparent;
}

#gateway-carousel .owl-dots .owl-dot.active {
  width: 32px;
  height: 8px;
  min-height: 8px;
  max-height: 8px;
  border-radius: var(--border-radius-xl, 48px);
  background: #FFF;
  opacity: 1;
}

#gateway-carousel .owl-dots .owl-dot:hover {
  opacity: 0.5;
}

#gateway-carousel .owl-dots .owl-dot.active:hover {
  opacity: 1;
  background: #FFF;
}

/* Gateway Carousel Dots Span Styling */
#gateway-carousel .owl-dots .owl-dot span {
  background: #E5E7EB;
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  width: 8px;
}

#gateway-carousel .owl-dots .owl-dot.active span {
  background: white;
}

/* Gateway Heading Mobile Specific Styles */
.gateway-heading-mobile {
  color: var(--color-blue-bendera-MY-50, #F2F7FF);
  font-family: var(--type-font-family-font-family-1, Poppins);
  font-size: var(--fontsize-heading-h2, 28px);
  font-style: normal;
  line-height: var(--line-height-heading-h2, 33px);
}

/* ABOUT HERO BLOCK */
.about-hero-block {
  background: #FFF;
}

.about-hero-content {
  display: flex;
  max-width: 1416px;
  padding: 0 var(--spacing-margin-spacing, 48px);
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  width: 100%;
  margin: 0 auto;
}

.about-hero-header {
  display: flex;
  padding: var(--spacing-1xl, 48px) 0;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}

.about-hero-title {
  color: var(--text-body-primary, #222);
  /* H1 */
  font-family: var(--type-font-family-font-family-1, Poppins);
  font-size: var(--fontsize-heading-h1, 60px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-heading-h1, 62px);
  /* 103.333% */
  letter-spacing: 1.2px;
  margin: 0;
  text-align: center;
}

.about-hero-image {
  border-radius: var(--border-radius-round, 999px);
  background: url('/templates/mysti_default/images/about-mysti.jpg') lightgray 50% / cover no-repeat;
  height: 550px;
  width: 100%;
  align-self: stretch;
  overflow: hidden;
}

.about-hero-info {
  display: flex;
  max-width: 1320px;
  padding: var(--spacing-2xl, 68px) 113px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  align-self: stretch;
}

.about-hero-info-inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  gap: var(--spacing-2xl, 68px);
}

.about-hero-logo-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  background: #fff;
  padding: var(--spacing-xl, 48px);
  gap: var(--spacing-1xl, 48px);
}

.about-hero-logo-left {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.about-hero-logo-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  margin-top: 15px;
}

.about-hero-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-hero-logo-item img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border: none;
}

.about-hero-logo-mosti {
  justify-content: flex-start;
  align-items: flex-start;
}

.about-hero-logo-mosti img {
  width: 180px;
  height: 180px;
  aspect-ratio: 1/1;
  object-fit: contain;
  border: none;
  flex-shrink: 0;
}

.about-hero-logo-mranti {
  justify-content: flex-end;
}

.about-hero-logo-mranti img {
  width: 163px;
  height: 66px;
  aspect-ratio: 163/66;
  object-fit: contain;
  border: none;
  flex-shrink: 0;
}

.about-hero-logo-mtdc {
  justify-content: flex-end;
}

.about-hero-logo-mtdc img {
  width: 163px;
  height: 66px;
  aspect-ratio: 163/66;
  object-fit: contain;
  border: none;
  flex-shrink: 0;
}

.about-hero-description {
  color: var(--text-body-primary, #222);
  /* Body XL */
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-xl, 18px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-xl, 24px);
}

.about-hero-description p {
  margin: 0 0 var(--spacing-md, 20px) 0;
}

.about-hero-description p:last-child {
  margin-bottom: 0;
}

@media (max-width: 1200px) {
  .about-hero-logo-wrapper {
    padding-left: 0px;
    padding-right: 0px;
    gap: 24px;
  }
}

@media (max-width: 320px) {
  .about-hero-logo-wrapper {
    flex-direction: column;
    gap: 32px;
  }
}

@media (max-width: 991px) {
  .about-hero-header {
    padding: var(--spacing-xl, 32px) 0;
  }

  .about-hero-title {
    font-size: var(--fontsize-heading-h2, 52px);
    line-height: var(--line-height-heading-h2, 63px);
  }

  .about-hero-image {
    height: 400px;
  }

  .about-hero-info {
    padding: var(--spacing-xl, 48px) var(--spacing-lg, 24px);
  }

  .about-hero-info-inner {
    gap: var(--spacing-lg, 32px);
  }

  .about-hero-logo-wrapper {
    width: 100%;
    padding: var(--spacing-lg, 32px);
  }

  .about-hero-description {
    width: 100%;
  }

  .about-hero-logo-grid {
    gap: var(--spacing-lg, 32px) var(--spacing-xl, 48px);
  }

  .about-hero-description {
    font-size: var(--fontsize-body-body-l, 16px);
    line-height: var(--line-height-body-l, 24px);
  }
}

@media (max-width: 767px) {
  .about-hero-header {
    padding: var(--spacing-lg, 24px) 0;
  }

  .about-hero-title {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: 0.8px;
  }

  .about-hero-image {
    border-radius: var(--border-radius-xl-2, 80px);
  }

  .about-hero-info {
    padding: var(--spacing-lg, 32px) var(--spacing-sm, 16px);
  }

  .about-hero-description {
    font-size: var(--fontsize-body-body-m, 14px);
    line-height: var(--line-height-body-m, 22px);
  }

  .about-hero-info-inner {
    flex-direction: column;
    gap: var(--spacing-lg, 32px);
  }
}

@media (max-width: 480px) {
  .about-hero-logo-wrapper {
    padding: 0px;
    gap: 20px;
    align-items: center;
  }
}
@media (max-width: 450px) {
  .hero-guidelines-tabs { align-items: flex-start !important; }
}

/* Our Mission Block */
.our-mission-block {
  background: linear-gradient(0deg, var(--color-blue-bendera-my-400, #415D9C) 0%, var(--color-blue-bendera-my-480, #062074) 100%);
  padding: var(--spacing-3xl, 92px) 0;
  color: #fff;
  overflow: hidden;
}

.our-mission-container {
  max-width: 1344px;
  margin: 0 auto;
  padding: 0 24px;
}

.our-mission-header {
  text-align: center;
  margin-bottom: 60px;
}

.our-mission-title {
  color: var(--text-on-dark, #FFF);
  text-align: center;
  font-family: var(--type-font-family-font-family-1, Poppins);
  font-size: var(--fontsize-heading-h2, 52px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-heading-h2, 63px); /* 121.154% */
  margin: 0;
}

.our-mission-wrapper {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-bottom: 60px;
  flex-wrap: wrap;
}

.our-mission-item {
  flex: 1;
  max-width: 500px;
  min-width: 300px;
}

.our-mission-item-title {
  font-family: var(--type-font-family-font-family-1, Poppins);
  font-size: var(--fontsize-heading-h6, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-heading-h6, 32px); /* 160% */
  margin-bottom: 20px;
  color: var(--text-on-dark, #FFF);
}

.our-mission-content-row {
  display: flex;
  gap: 20px;
}

.our-mission-vertical-line {
  flex-shrink: 0;
  border-radius: var(--border-radius-md, 16px);
  background: linear-gradient(180deg, #FFE18D 0%, #84ABFF 68.27%);
  width: 8px;
  height: 107px;
}

.our-mission-description {
  color: var(--text-on-dark, #FFF);
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-xl, 18px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-xl, 28px); /* 155.556% */
  margin: 0;
}

/* Carousel Images */
.our-mission-carousel {
  margin-top: 40px;
  padding-bottom: 40px;
}

.our-mission-slide {
  transition: transform 0.3s ease;
}

.center .our-mission-slide {
  opacity: 1;
  transform: scale(1);
}

.our-mission-image {
  width: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 999px;
  aspect-ratio: 56/31;
  /* Pill shape */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Real Images */
.our-mission-image-1 {
  background-image: url('/templates/mysti_default/images/about-mysti1.jpg');
}

.our-mission-image-2 {
  background-image: url('/templates/mysti_default/images/about-mysti2.jpg');
}

.our-mission-image-3 {
  background-image: url('/templates/mysti_default/images/about-mysti3.jpg');
}

.our-mission-image-4 {
  background-image: url('/templates/mysti_default/images/about-mysti4.jpg');
}

/* Our Mission Carousel Dots Navigation */
#our-mission-carousel .owl-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 0;
}

#our-mission-carousel .owl-dots .owl-dot {
  width: 8px;
  height: 8px;
  min-height: 8px;
  max-height: 8px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  fill: var(--text-on-dark, #FFF);
  opacity: 0.3;
  border: none;
  padding: 0;
  margin: 0;
  transition: all 0.3s ease;
  cursor: pointer;
  background: transparent;
}

#our-mission-carousel .owl-dots .owl-dot.active {
  width: 32px;
  height: 8px;
  min-height: 8px;
  max-height: 8px;
  border-radius: var(--border-radius-xl, 48px);
  background: #FFF;
  opacity: 1;
}

#our-mission-carousel .owl-dots .owl-dot:hover {
  opacity: 0.5;
}

#our-mission-carousel .owl-dots .owl-dot.active:hover {
  opacity: 1;
  background: #FFF;
}

#our-mission-carousel .owl-dots .owl-dot span {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  width: 8px;
}

#our-mission-carousel .owl-dots .owl-dot.active span {
  background: white;
}

/* Responsive */
@media (max-width: 991px) {
  .our-mission-wrapper {
    gap: 40px;
    flex-direction: column;
  }

  .about-hero-title {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: 0.8px;
  }

  .about-hero-image {
    height: 300px;
  }

  .about-hero-info {
    padding: var(--spacing-lg, 32px) var(--spacing-sm, 16px);
  }

  .about-hero-description {
    font-size: var(--fontsize-body-body-m, 14px);
    line-height: var(--line-height-body-m, 22px);
  }
}

/* APPLY MYSTI CERTIFICATION BLOCK */
.apply-mysti-wrapper {
  display: flex;
  max-width: 1416px;
  padding: var(--spacing-1xl, 48px) var(--spacing-margin-spacing, 48px);
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
  margin: 0 auto;
}

.apply-mysti-content {
  display: flex;
  padding: var(--spacing-1xl, 48px) 0;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-xl, 32px);
  flex: 1 0 0;
  align-self: stretch;
}

.apply-mysti-image {
  height: 456px;
  max-width: 600px;
  max-height: 550px;
  flex: 1 0 0;
  align-self: stretch;
  background: url('/templates/mysti_default/images/apply-mysti-certificate.png') 50% / contain no-repeat;
  min-height: 400px;
}

@media (max-width: 991px) {
  .apply-mysti-wrapper {
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-lg, 32px) var(--spacing-md, 24px);
  }

  .apply-mysti-content {
    padding: var(--spacing-lg, 24px) 0;
    align-items: center;
    text-align: center;
  }

  .apply-mysti-image {
    width: 100%;
    max-width: 100%;
    min-height: 300px;
  }
}

/* Apply MySTI Certification Typography & Buttons */
.apply-mysti-title {
  color: var(--text-body-primary, #222);
  font-family: var(--type-font-family-font-family-1, Poppins);
  font-size: var(--fontsize-heading-h1, 60px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-heading-h1, 62px);
  letter-spacing: 1.2px;
  margin: 0;
}

.apply-mysti-desc {
  color: var(--text-body-primary, #222);
  font-family: var(--type-font-family-font-family-2, 'Open Sans');
  font-size: var(--fontsize-body-body-xl, 18px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-xl, 24px);
  margin: 0;
}

.apply-mysti-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.apply-mysti-btn-primary {
  display: flex;
  height: 56px;
  min-width: 100px;
  padding: 10px var(--sizing-component-lg, 20px);
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: var(--border-radius-round, 999px);
  background: var(--surface-primary-on-light, #BD0F16);
  box-shadow: 0 2px 6px 0 rgba(45, 35, 61, 0.15);
  color: #FFF;
  font-family: var(--type-font-family-font-family-2, 'Open Sans');
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
}

.apply-mysti-btn-primary:hover {
  background: #a00d13;
  color: #FFF;
}

/* Remove default click/focus blue effect for Apply Now primary button */
.apply-mysti-btn-primary:focus,
.apply-mysti-btn-primary:active,
.apply-mysti-btn-primary:focus-visible {
  outline: none;
  box-shadow: none;
  background: var(--surface-primary-on-light, #BD0F16);
  color: #FFF;
}

.apply-mysti-btn-outline {
  display: flex;
  height: 56px;
  min-width: 80px;
  padding: 0 var(--sizing-component-lg, 20px);
  justify-content: center;
  align-items: center;
  border-radius: var(--border-radius-round, 999px);
  border: var(--border-width-sm, 1px) solid var(--border-action, #BD0F16);
  color: var(--surface-primary-on-light, #BD0F16);
  font-family: var(--type-font-family-font-family-2, 'Open Sans');
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  background: transparent;
}

.apply-mysti-btn-outline:hover,
.apply-mysti-btn-outline:focus,
.apply-mysti-btn-outline:active {
  background: transparent;
  color: var(--surface-primary-on-light, #BD0F16);
  transform: none;
  outline: none;
}

@media (max-width: 767px) {
  .apply-mysti-title,
  .apply-mysti-desc,
  .mysti-benefits-title ,
  .mysti-benefits-desc{
    text-align: left;
  }

  .apply-mysti-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .apply-mysti-btn-primary,
  .apply-mysti-btn-outline {
    width: 100%;
  }
}

/* MySTI Benefits Block */
.mysti-benefits-wrapper {
  display: flex;
  max-width: 1416px;
  padding: var(--spacing-1xl, 48px) var(--spacing-margin-spacing, 48px) var(--spacing-2xl, 68px) var(--spacing-margin-spacing, 48px);
  justify-content: center;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  margin: 0 auto;
}

.mysti-benefits-image {
  height: 498.438px;
  align-self: stretch;
  aspect-ratio: 550.00/498.44;
  object-fit: contain;
  padding: 46px;
}

.mysti-benefits-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mysti-benefits-title {
  color: var(--text-body-primary, #222);
  font-family: var(--type-font-family-font-family-1, Poppins);
  font-size: var(--fontsize-heading-h2, 52px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-heading-h2, 63px);
  margin: 0;
}

.mysti-benefits-desc {
  color: var(--text-body-primary, #222);
  font-family: var(--type-font-family-font-family-2, 'Open Sans');
  font-size: var(--fontsize-body-body-xl, 18px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-xl, 24px);
  margin: 0;
}

/* Responsive */
@media (max-width: 991px) {
  .mysti-benefits-wrapper {
    flex-direction: column-reverse;
    padding: var(--spacing-lg, 32px) var(--spacing-md, 24px);
    text-align: center;
  }

  .mysti-benefits-image {
    width: 100%;
    height: auto;
    max-width: 550px;
    margin: 0 auto;
  }
}

/* Eligibility Criteria Block */
.eligibility-criteria-wrapper {
  position: relative;
  display: flex;
  padding: var(--spacing-3xl, 92px) var(--spacing-margin-spacing, 48px);
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2xl, 68px);
  align-self: stretch;
  background: rgba(242, 247, 255, 0.7);
}

.eligibility-criteria-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1500px;
  max-height: 100%;
  background-image: url('/templates/mysti_default/images/products-bg.jpg');
  background-position: center -337.346px;
  background-size: 169.014% 140.721%;
  background-repeat: no-repeat;
  z-index: 0;
}

.eligibility-criteria-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(242, 247, 255, 0.7);
  z-index: 1;
}

.eligibility-criteria-wrapper>*:not(.eligibility-criteria-bg-image):not(.eligibility-criteria-overlay) {
  position: relative;
  z-index: 2;
}

.eligibility-main-title {
  color: var(--text-body-primary, #222);
  text-align: center;
  font-family: var(--type-font-family-font-family-1, Poppins);
  font-size: var(--fontsize-heading-h2, 52px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-heading-h2, 63px);
  margin: 0;
}

.eligibility-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  align-self: stretch;
}

.eligibility-card {
  display: flex;
  padding: var(--spacing-md, 20px) var(--spacing-xl, 32px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-lg, 24px);
  align-self: stretch;
  border-radius: var(--border-radius-lg, 16px);
  background: #183581;
  /* Matching the dark blue theme */
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}

.eligibility-list {
  padding: var(--spacing-xs, 8px) var(--spacing-xl, 32px) var(--spacing-xl, 32px) var(--spacing-xl, 32px);
  padding-inline-start: 0px !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md, 20px);
  align-self: stretch;
}

.eligibility-card-header-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  padding: 0;
  margin: 0;
  list-style: none;
}

.eligibility-card-title {
  color: #FFF;
  font-family: var(--type-font-family-font-family-1, Poppins);
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
  margin: 0;
}

.eligibility-item {
  display: flex;
  align-items: center;
  gap: 16px;
  align-self: stretch;
}

.eligibility-text {
  flex: 1 0 0;
  color: #FFF;
  font-family: var(--type-font-family-font-family-2, 'Open Sans');
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

#eligibilityAccordion {
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
  padding: 0px;
}

#eligibilityAccordion .documents-accordion {
  border: none;
  border-radius: var(--border-radius-lg, 16px);
  background: #FFF;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
  margin-bottom: 16px;
}

#eligibilityAccordion .documents-accordion:last-child {
  margin-bottom: 0;
}

#eligibilityAccordion .accordion-header {
  margin-bottom: 0;
  border-bottom: none;
}

#eligibilityAccordion .accordion-button {
  padding: var(--spacing-md, 20px) var(--spacing-xl, 32px);
  background: transparent;
  border: none;
  box-shadow: none;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#eligibilityAccordion .accordion-button:not(.collapsed) {
  background: transparent;
  box-shadow: none;
}

#eligibilityAccordion .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23222'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  width: 24px;
  height: 24px;
  margin-left: auto;
}

#eligibilityAccordion .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}

#eligibilityAccordion .additional-info {
  border-radius: var(--border-radius-md, 16px);
  background: #fff;
}

#eligibilityAccordion .additional-info .accordion-header {
  display: flex;
  padding: var(--spacing-md, 20px) var(--spacing-xl, 32px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md, 20px);
  align-self: stretch;
}

@media screen and (max-width: 992px) {
  .how-to-apply-step {
    padding-bottom: 40px;
  }
}

.accordion-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.doc-icon-wrapper {
  color: #222;
}

.accordion-title {
  color: var(--text-body-primary, #222);
  font-family: var(--type-font-family-font-family-1, Poppins);
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
  margin: 0;
}

#eligibilityAccordion .accordion-body {
  padding: 0 var(--spacing-xl, 32px) var(--spacing-md, 20px) var(--spacing-xl, 32px);
}

.documents-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl, 32px);
}

.document-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.document-number {
  display: flex;
  width: 40px;
  height: 40px;
  padding: 0 var(--spacing-3xs, 4px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  aspect-ratio: 1/1;
  background: linear-gradient(180deg, var(--color-blue-mysti-400, #5461F4) 0%, #EACF84 100%);
  border-radius: 50%;
  color: #FFF;
  font-family: var(--type-font-family-font-family-1, Poppins);
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.document-text {
  flex: 1;
  color: var(--text-body-primary, #222);
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-l, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-l, 24px);
}

.document-text strong,
.document-text b {
  color: var(--text-body-primary, #222);
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-l, 16px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-body-l, 24px);
}

.additional-info-card {
  display: flex;
  padding: var(--spacing-md, 20px) var(--spacing-xl, 32px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md, 20px);
  align-self: stretch;
  max-width: 1000px;
  border-radius: var(--border-radius-lg, 16px);
  background: #FFF !important;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}

.info-title {
  color: var(--text-body-primary, #222);
  font-family: var(--type-font-family-font-family-1, Poppins);
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
  margin: 0;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl, 32px);
  padding-left: 20px;
  margin: 0;
  list-style: disc;
}

.info-item {
  color: var(--text-body-secondary, #6B7280);
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-l, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-l, 24px);
}

.info-item strong,
.info-item b {
  color: var(--text-body-secondary, #6B7280);
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-l, 16px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-body-l, 24px);
}

.btn-eligibility-apply {
  display: flex;
  width: 180px;
  height: 56px;
  min-width: 100px;
  padding: 10px var(--sizing-component-lg, 20px);
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: var(--border-radius-round, 999px);
  background: var(--surface-primary-on-light, #BD0F16);
  box-shadow: 0 2px 6px 0 rgba(45, 35, 61, 0.15);
  color: #FFF;
  font-family: var(--type-font-family-font-family-2, 'Open Sans');
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-eligibility-apply:hover {
  background: #a00d13;
  color: #FFF;
}

/* Remove default click/focus blue effect for eligibility Apply button */
.btn-eligibility-apply:focus,
.btn-eligibility-apply:active,
.btn-eligibility-apply:focus-visible {
  outline: none;
  box-shadow: none;
  background: var(--surface-primary-on-light, #BD0F16);
  color: #FFF;
}

@media (max-width: 767px) {
  .eligibility-criteria-wrapper {
    padding: var(--spacing-xl, 48px) var(--spacing-md, 24px);
    gap: 32px;
  }

  .eligibility-main-title {
    font-size: 32px;
    line-height: 40px;
  }

  .eligibility-card,
  .documents-accordion,
  .additional-info-card {
    padding: 20px;
  }
}

@media screen and (max-width: 480px) {
  .eligibility-list{
    padding: 0px;
  }
}

/* Hero Guidelines Styles */
.hero-guidelines-container {
  display: flex;
  max-width: 1440px;
  padding: var(--spacing-1xl, 48px) 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xl, 32px);
  margin: 0 auto;
}

.hero-guidelines-content {
  display: flex;
  max-width: 800px;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md, 20px);
  align-self: center;
}

.hero-guidelines-title {
  color: var(--text-body-primary, #222);
  font-family: var(--type-font-family-font-family-1, Poppins);
  font-size: var(--fontsize-heading-h1, 60px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-heading-h1, 62px);
  letter-spacing: 1.2px;
}

.hero-guidelines-description {
  color: var(--text-body-primary, #222);
  text-align: center;
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-xxl, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-xxl, 32px);
}

.hero-guidelines-tabs {
  position: sticky;
  top: 0;
  display: flex;
  width: 100%;
  height: 54px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xl, 32px);
  flex-shrink: 0;
  background-color: #fff;
  z-index: 10;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
  margin: 0 auto;
}

.hero-guidelines-tabs::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

.hero-guidelines-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  min-width: max-content;
  border-bottom: 1px solid var(--border-quaternary, #E5E7EB);
}

.hero-guidelines-nav-link {
  color: #999;
  text-decoration: none;
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: 16px;
  font-weight: 400;
  padding: 8px 0;
  position: relative;
  transition: color 0.3s ease;
  border: none;
  background: none;
  cursor: pointer;
  padding: var(--spacing-xs, 8px) var(--spacing-x2, 24px) var(--spacing-xs, 12px) var(--spacing-x2, 25px)
}

.hero-guidelines-nav-link:hover {
  color: #4847EB;
}

.hero-guidelines-nav-link.active {
  color: #4847EB;
  border-color: #4847EB;
  border-bottom: 2px solid;
}

.hero-guidelines-logos-section {
  display: flex;
  max-width: 1320px;
  margin: 0 auto;
  padding-top: var(--spacing-1xl, 48px);
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xl, 32px);
  align-self: stretch;

}

.hero-guidelines-logos-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-1xl, 48px);
  align-self: stretch;
}

.hero-guidelines-logo {
  max-width: 100%;
  height: auto;
}

.hero-guidelines-logo-mranti {
  width: 142px;
  height: 142px;
  aspect-ratio: 1/1;
}

.hero-guidelines-logo-mranti-name {
  width: 188.5px;
  height: 66px;
  aspect-ratio: 188.50/66.00;
}

.hero-guidelines-logo-mtdc {
  width: 172px;
  height: 60px;
  aspect-ratio: 43/15;
}

.hero-guidelines-introduction-section {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--spacing-1xl, 48px) 0;
  position: relative;
  overflow: visible;
}

.hero-guidelines-introduction-image-wrapper {
  position: relative;
  z-index: 1;
  align-self: stretch;
}

.hero-guidelines-introduction-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 999px;
  box-shadow: 0 var(--shadow-card-strong-2-y-posi, 18px) var(--shadow-card-strong-2-blur, 50px) 0 rgba(69, 78, 95, 0.20);
}

.hero-guidelines-introduction-image-wrapper::before {
  content: '';
  display: block;
  width: 350px;
  height: 424px;
  max-width: 40vw;
  opacity: 0.6;
  background-image: url(/templates/mysti_default/images/pattern-lines-left.png);
  background-position: 50%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: calc((100vw - 100%) / -2);
  top: -250px;
  z-index: -1;
  pointer-events: none;
}

.hero-guidelines-introduction-image-wrapper::after {
  content: '';
  display: block;
  width: 350px;
  height: 424px;
  max-width: 40vw;
  aspect-ratio: 487/424;
  opacity: 0.6;
  background-image: url(/templates/mysti_default/images/pattern-lines-right.png);
  background-position: 50%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  right: calc((100vw - 100%) / -2);
  top: -250px;
  z-index: -1;
  pointer-events: none;
}

/* Responsive: Adjust decorative pattern images for mobile/tablet */
@media (max-width: 1500px) {
  .hero-guidelines-introduction-section {
    padding: var(--spacing-1xl, 48px) var(--spacing-margin-spacing, 48px) 0 var(--spacing-margin-spacing, 48px);
  }

  .hero-guidelines-benefits-section{
    padding: var(--spacing-1xl, 48px) var(--spacing-margin-spacing, 48px) 0 var(--spacing-margin-spacing, 48px) !important;
  }

  .features-block{
    /* padding: var(--spacing-1xl, 48px) var(--spacing-margin-spacing, 48px) 0 var(--spacing-margin-spacing, 48px); */
  }
}

@media (max-width: 1200px) {
  .hero-guidelines-introduction-image-wrapper::before {
    left: calc((100vw - 100%) / -2);
    top: -150px;
    width: 230px;
    height: 261px;
  }

  .hero-guidelines-introduction-image-wrapper::after {
    right: calc((100vw - 100%) / -2);
    top: -150px;
    width: 230px;
    height: 261px;
  }
}

@media (max-width: 768px) {
  .hero-guidelines-introduction-image-wrapper::before {
    left: calc((100vw - 100%) / -2);
    top: -100px;
    width: 200px;
    height: 174px;
  }

  .hero-guidelines-introduction-image-wrapper::after {
    right: calc((100vw - 100%) / -2);
    top: -100px;
    width: 200px;
    height: 174px;
  }
}

.hero-guidelines-introduction-content-wrapper {
  display: flex;
  padding: var(--spacing-2xl, 68px) var(--spacing-margin-spacing, 48px);
  flex-direction: column;
  align-items: center;
  gap: 10px;
  align-self: stretch;
}

.hero-guidelines-introduction-content {
  display: flex;
  max-width: 1091px;
  margin: 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-lg, 24px);
  align-self: stretch;
}

.hero-guidelines-introduction-heading {
  color: var(--text-body-primary, #222);
  text-align: center;
  font-family: var(--type-font-family-font-family-1, Poppins);
  font-size: var(--fontsize-heading-h2, 52px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-heading-h2, 63px);
  align-self: center;
  width: 100%;
}

.hero-guidelines-introduction-text {
  color: var(--text-body-primary, #222);
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-Body-XL, 18px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-xl, 24px);
}

.hero-guidelines-benefits-section {
  display: flex;
  padding: 66px 0;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
}

.hero-guidelines-benefits-image {
  width: 50%;
  min-height: 500px;
  background: url(/templates/mysti_default/images/mysti-building.png) 50% / contain no-repeat;
  flex-shrink: 0;
}

.hero-guidelines-benefits-box {
  border-radius: var(--border-radius-xl-2, 80px);
  background: linear-gradient(90deg, var(--color-blue-bendera-my-480, #062074) 25.96%, var(--color-blue-bendera-my-400, #415D9C) 100%);
  box-shadow: 0 18px 50px 0 rgba(69, 78, 95, 0.20);
  display: inline-flex;
  padding: var(--sizing-component-4xl, 60px);
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 60%;
  flex-shrink: 0;
  margin-left: -10%;
  z-index: 1;
}

.hero-guidelines-benefits-text {
  color: var(--text-on-dark, #FFF);
  font-family: var(--type-font-family-font-family-1, Poppins);
  font-size: var(--fontsize-heading-h4, 28px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-heading-h4, 34px);
  margin: 0;
}

.hero-guidelines-benefits-highlight {
  color: var(--text-button-primary-on-dark, #FBC30B);
}

.hero-guidelines-features-section {
  display: flex;
  max-width: 1416px;
  padding: var(--spacing-2xl, 68px) var(--spacing-margin-spacing, 48px);
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
  width: 100%;
  margin: 0 auto;
}

.hero-guidelines-feature-card {
  display: flex;
  flex: 1;
  gap: 20px;
  align-items: flex-start;
}

.hero-guidelines-feature-line {
  width: 4px;
  height: 70px;
  border-radius: var(--border-radius-md, 16px);
  background: var(--surface-primary-on-light, #BD0F16);
  flex-shrink: 0;
  align-self: stretch;
}


.hero-guidelines-feature-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.hero-guidelines-feature-title {
  background: linear-gradient(180deg, var(--color-blue-mysti-200, #B9C4FF) 0%, var(--color-blue-bendera-MY-500-primary--4-saturation, #030264) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  font-family: var(--type-font-family-font-family-1, Poppins);
  font-size: var(--fontsize-heading-h3, 40px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-heading-h3, 44px);
  /* 110% */
  margin: 0;
}

.hero-guidelines-feature-description {
  color: var(--text-body-primary, #222);

  /* Body L */
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-l, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-l, 24px);
  /* 150% */
  margin: 0;
}

/* Responsive Styles for Hero Guidelines */
@media (max-width: 767px) {
  .hero-guidelines-container {
    display: flex;
    padding: var(--spacing-1xl, 40px) var(--spacing-margin-spacing, 16px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md, 24px);
  }

  .hero-guidelines-title {
    color: var(--text-body-primary, #222);
    text-align: center;
    font-family: var(--type-font-family-font-family-1, Poppins);
    font-size: var(--fontsize-heading-h1, 32px);
    font-style: normal;
    font-weight: 700;
    line-height: var(--line-height-heading-h1, 38px);
    letter-spacing: 0.64px;
  }

  .hero-guidelines-description {
    color: var(--text-body-primary, #222);
    text-align: center;
    font-family: var(--type-font-family-font-family-2, "Open Sans");
    font-size: var(--fontsize-body-body-xxl, 18px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-body-xxl, 29px);
  }

  .hero-guidelines-logos-container {
    flex-direction: column;
    gap: var(--spacing-lg, 24px);
  }

  .hero-guidelines-benefits-section {
    flex-direction: column;
    padding: var(--spacing-xl, 48px) var(--spacing-margin-spacing, 16px);
    gap: 0px;
  }

  .hero-guidelines-benefits-image {
    min-height: 300px;
    width: 100%;
  }

  .hero-guidelines-benefits-box {
    width: 100%;
    padding: var(--spacing-xl, 32px);
    margin-left: 0;
    margin-top: -40px;
  }

  .hero-guidelines-benefits-text {
    font-size: var(--fontsize-heading-h5, 20px);
    line-height: var(--line-height-heading-h5, 26px);
  }

  .hero-guidelines-features-section {
    flex-direction: column;
    padding: var(--spacing-xl, 48px) var(--spacing-margin-spacing, 16px);
    gap: var(--spacing-lg, 24px);
  }

  .hero-guidelines-feature-card {
    flex-direction: row;
    gap: var(--spacing-md, 16px);
  }

  .hero-guidelines-feature-line {
    width: 4px;
    height: 70px;
  }

  .hero-guidelines-feature-title {
    font-size: var(--fontsize-heading-h4, 28px);
    line-height: var(--line-height-heading-h4, 34px);
  }
}

/* Inventory MySTI Section */
.inventory-mysti-section {
  overflow: hidden;
}

.inventory-mysti-container {
  display: flex;
  max-width: 1416px;
  margin: 0 auto;
  padding: 108px var(--spacing-margin-spacing, 48px);
  justify-content: space-between;
  align-items: flex-start;
  gap: 80px;
  align-self: stretch;
}

.inventory-mysti-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg, 24px);
  width: 30%;
  flex-shrink: 0;
}

.inventory-mysti-heading {
  color: var(--text-body-primary, #222);
  font-family: var(--type-font-family-font-family-1, Poppins);
  font-size: var(--fontsize-heading-h2, 52px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-heading-h2, 63px);
  margin: 0;
}

.inventory-mysti-text {
  color: var(--text-body-primary, #222);
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-xl, 18px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-xl, 24px);
  margin: 0;
}

.inventory-mysti-image {
  background: url(/templates/mysti_default/images/inventory.png) lightgray 50% / cover no-repeat;
  box-shadow: 0 var(--shadow-card-strong-2-y-posi, 18px) var(--shadow-card-strong-2-blur, 50px) 0 rgba(69, 78, 95, 0.20);
  width: 60%;
  height: 499.266px;
  flex-shrink: 0;
  border-radius: var(--border-radius-round, 999px);
}

/* Responsive Styles for Inventory MySTI */
@media (max-width: 1200px) {
  .inventory-mysti-container {
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-2xl, 68px) var(--spacing-margin-spacing, 48px);
  }

  .inventory-mysti-content {
    width: 100%;
    max-width: 100%;
    text-align: center;
  }

  .inventory-mysti-image {
    width: 100%;
    height: auto;
    aspect-ratio: 800 / 499.266;
    margin-right: 0;
    margin-left: 0;
  }
}

@media (max-width: 767px) {
  .inventory-mysti-container {
    padding: var(--spacing-xl, 48px) var(--spacing-margin-spacing, 16px);
    gap: var(--spacing-xl, 32px);
  }

  .inventory-mysti-heading {
    font-size: var(--fontsize-heading-h3, 40px);
    line-height: var(--line-height-heading-h3, 44px);
  }

  .inventory-mysti-text {
    font-size: var(--fontsize-body-body-l, 16px);
    line-height: var(--line-height-body-l, 24px);
  }

  .inventory-mysti-image {
    width: 100%;
    height: auto;
  }
}

/* Privacy Policy Page Styles */
.gray-hero-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
  background: #D9E7F7;
  height: 200px;
  justify-content: center;
}

.gray-hero-section .inner-div {
  display: flex;
  width: 95%;
  height: 200px;
  align-items: center;
  gap: 16px;
  border-radius: 0 999px 999px 0;
  background: #EEF5FD;
  position: absolute;
}

.hero-title {
  color: var(--text-body-primary, #222);
  font-family: var(--type-font-family-font-family-1, Poppins);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 1.2px;
  max-width: 1320px;
  z-index: 1;
  margin: 0 auto;
  padding: 0 16px;
}

.privacy-content-section,
.glossary-content-section {
  display: flex;
  max-width: 1320px;
  padding: var(--spacing-2xl, 68px) var(--spacing-sm, 16px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}

.privacy-content {
  color: var(--text-body-primary, #222);

  /* Body L */
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-l, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-l, 24px);
  /* 150% */
}

.privacy-section-title {
  color: var(--text-body-primary, #222);

  /* Body L bold */
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-l, 16px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-body-l, 24px);
}

/* Glossary Content Styles */
.glossary-header .hero-title {
  margin: 0;
  padding: 0;
}
.glossary-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  z-index: 1;
  margin: 0 auto;
  padding: 0 16px;
  width: 100%;
  max-width: 1320px;
}

.glossary-header span {
  color: var(--text-body-primary, #222);
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-xxl, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-xxl, 32px);
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Responsive for glossary-header span */
@media (max-width: 767px) {
  .glossary-header span {
    font-size: var(--fontsize-body-body-l, 16px);
    line-height: var(--line-height-body-l, 24px);
  }
}

@media (max-width: 991px) and (min-width: 768px) {
  .glossary-header span {
    font-size: var(--fontsize-body-body-xl, 18px);
    line-height: var(--line-height-body-xl, 28px);
  }
}

@media (max-width: 1130px) and (min-width: 992px) {
  .menu-item-title {
    font-size: 13px !important;
  }
  .mranti-logo-link img {
    width: 85px;
  }
  .mosti-logo-link img {
    width: 48px;
  }
  .mysti-logo-link img {
    width: 48px;
  }
  .nav-item .item-caret {
    width: 12px !important;
  }
}

.glossary-header-row {
  border-bottom: 1px solid var(--border-quaternary, #E5E7EB);
  background: var(--grey-25, #FAFAFA);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  padding: var(--spacing-sm, 16px);

}

.glossary-row {
  display: flex;
  padding: var(--spacing-lg, 24px) 0;
  align-items: center;
  align-self: stretch;
  border-bottom: 1px solid var(--border-quaternary, #E5E7EB);
  background: var(--grey-0, #FFF);
  padding: var(--spacing-lg, 24px) var(--spacing-sm, 16px);
}

/* Odd Rows with Grey Background */
.glossary-row:nth-child(odd):not(.glossary-header-row) {
  background: var(--grey-25, #FAFAFA);
}

.glossary-header-term {
  display: flex;
  width: 300px;
  /* Body XL-bold */
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-xl, 18px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-body-xl, 28px); /* 155.556% */
}

.glossary-header-definition {
  flex: 1;
  color: var(--text-body-primary, #222);

  /* Body XL-bold */
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-xl, 18px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-body-xl, 28px); /* 155.556% */
}

.glossary-term {
  align-self: stretch;
  color: var(--text-body-primary, #222);
  display: flex;
  width: 300px;
  /* Body L bold */
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-l, 16px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-body-l, 24px); /* 150% */
  padding-right: 16px;
}

.glossary-definition {
  flex: 1;
  align-self: stretch;
  color: var(--text-body-primary, #222);

  /* Body L */
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-l, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-l, 24px); /* 150% */
}

/* Responsive Design for Mobile */
@media (max-width: 767px) {
  .glossary-row {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--spacing-md, 16px) 16px;
  }

  .glossary-header-row {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--spacing-md, 16px) 16px;
  }

  .glossary-term {
    flex: none;
    width: 100%;
    padding-right: 0;
    padding-bottom: var(--spacing-sm, 8px);
  }

  .glossary-definition {
    width: 100%;
  }
}

/* Tablet View */
@media (max-width: 991px) and (min-width: 768px) {
  .glossary-term {
    flex: 0 0 180px;
  }
}

#t4-section-1 {
  padding: unset;
}

.inner-div-help-center {
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(0deg, var(--color-blue-bendera-my-480, #062074) 0%, var(--color-blue-bendera-my-480, #062074) 100%), #FFF;
  width: calc(100% - 60px);
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.help-center-header {
  background-color: #183581;
  color: #ffffff;
}

.help-center-content {
  z-index: 2;
  padding-top: 60px;
  padding-bottom: 80px;
}



/* Mobile Header Actions Fix */
/* Show header actions in offcanvas mobile menu */
@media (max-width: 991px) {
  .header-nav>.jax-modules:has(.header-actions) {
    display: none !important;
  }

  .t4-offcanvas .mobile-header-actions,
  .offcanvas .mobile-header-actions {
    display: block !important;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1rem;
  }

  .mobile-header-actions .header-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .mobile-header-actions .header-actions .btn,
  .mobile-header-actions .header-actions a {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}


/* Additional Mobile Header Actions Styles */
.mobile-header-actions-clone {
  display: block !important;
  padding: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 1rem;
  background: rgba(0, 0, 0, 0.02);
}

.mobile-header-actions-clone .header-actions,
.mobile-header-actions-clone>div {
  display: flex !important;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.mobile-header-actions-clone .btn,
.mobile-header-actions-clone a.btn {
  width: 100%;
  text-align: center;
  justify-content: center;
  margin: 0.25rem 0;
}

.mobile-header-actions-clone .language-selector {
  width: 100%;
  margin: 0.5rem 0;
}

/* Hero Consultation Section */
.hero-consultation-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
  background: var(--color-blue-mysti-200, #B9C4FF);
}

.hero-consultation-section .inner-div {
  display: flex;
  width: 95%;
  height: 200px;
  align-items: center;
  gap: 16px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(0deg, #E8EBFF 0%, #E8EBFF 100%), #FFF;
  position: absolute;
  height: 380px;
}

.hero-consultation-header {
  z-index: 1;
  display: flex;
  gap: 16px;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 380px;
  margin: 0 auto;
  padding: 0 16px;
}

.hero-consultation-section .calendar-icon {
  width: 132px;
  height: 36px;
  aspect-ratio: 11/3;
  object-fit: contain;
}

.consultation-content {
  padding: var(--spacing-2xl, 68px) 0;
  background-color: #f8f9fa;
}

/* Info Header Section - Row on Desktop, Column on Mobile */
.info-header-section {
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 20px;
}

@media (min-width: 992px) {
  .mobile-only {
    display: none !important;
  }
  .no-caret ~ .sub-menu-toggle { display: none !important; }
}

@media (max-width: 991px) {
  .mobile-only {
    display: block !important;
  }
  .sub-menu-back { padding-inline: 24px !important;}
}
/* Info Header Section - Row on Desktop, Column on Mobile */
.info-header-section {
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 20px;
}

@media (min-width: 992px) {
  .mobile-only {
    display: none !important;
  }
}

@media (max-width: 991px) {
  .mobile-only {
    display: block !important;
  }
}
/* ========== OFFCANVAS FULL WIDTH ========== */
.t4-offcanvas {
  width: 100% !important;
  max-width: 100% !important;
  z-index: 15;
}

/* Override st-menu width if using old style */
.st-menu {
  width: 100% !important;
  max-width: 100% !important;
}

/* Fix offcanvas background overlay */
.c-offcanvas-bg.is-open,
.c-offcanvas-bg.c-offcanvas-bg--push.c-offcanvas-bg--right.is-open,
.c-offcanvas-bg.c-offcanvas-bg--push.c-offcanvas-bg--left.is-open {
  transform: translate3d(0, 0, 0) !important;
  visibility: hidden !important;
  background-color: transparent !important;
}

.c-offcanvas-bg.is-animating {
  visibility: hidden !important;
  background-color: transparent !important;
}

.t4-offcanvas .t4-off-canvas-header {
  background-color: unset !important;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 16px 20px;
  height: 72px;
}

.t4-offcanvas .t4-off-canvas-header .close:hover,
.t4-offcanvas .t4-off-canvas-header .close,
.t4-offcanvas .t4-off-canvas-header .close:focus,
.t4-offcanvas .t4-off-canvas-header .close:active {
  transition: none !important;
  background: #fff !important;
  background-color: #fff !important;
  animation: none !important;
}

.t4-offcanvas .t4-off-canvas-header .close:hover, .t4-offcanvas .t4-off-canvas-header .close:focus, .t4-offcanvas .t4-off-canvas-header .close:active {
  background-color: #fff !important;
}

.t4-offcanvas-toggle {
  background: transparent !important;
  color: #222 !important;
  height: 28px !important;
}

.t4-offcanvas-toggle i {
  font-size: 24px;
}

/* Offcanvas close button styles */
.offcanvas-close-btn {
  display: flex;
  width: 24px;
  height: 24px;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
  padding: 0;
  border: none;
  cursor: pointer;
}

.offcanvas-close-btn .close-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* Offcanvas logo wrapper and logos */
.offcanvas-logo-wrapper {
  display: flex;
  height: 80px;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-x, 12px);
}

.t4-off-canvas-body .offcanvas-logo-wrapper {
  padding: 20px;
  margin-bottom: 16px;
}

.offcanvas-mosti-logo-link {
  display: flex;
  height: 80px;
  align-items: center;
  gap: var(--spacing-x, 12px);
}

.offcanvas-mosti-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  flex-shrink: 0;
  max-height: 56px !important;
}

.offcanvas-mranti-logo-link {
  display: flex;
  align-items: center;
}

.offcanvas-mranti-logo {
  height: 31.583px;
  flex: 1 0 0;
  aspect-ratio: 78.00/31.58;
  object-fit: contain;
  flex-shrink: 0;
  max-height: 56px !important;
}

.c-offcanvas-content-wrap--push.c-offcanvas-content-wrap--right.is-open {
  transform: none !important;
  transition: none !important;
}
.c-offcanvas-content-wrap--push.c-offcanvas-content-wrap--left.is-open {
  transform: none !important;
  transition: none !important;
}
.c-offcanvas--right {
  transform: translate3d(100%, 0, 0);
  width: 100%;
  transition: none;
}

/* ========== OFFCANVAS MODULE STYLING ========== */
.menu-item-title {
  color: var(--text-body-primary, #222);
  text-align: center;
  
  /* Body M Sm-bold */
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-m, 14px);
  font-style: normal;
  font-weight: 600;
  line-height: var(--line-height-body-m, 22px); /* 157.143% */
}

.t4-off-canvas-body .nav-link,
.t4-off-canvas-body .menu-item a {
  color: var(--text-body-primary, #222222);
  font-size: var(--fontsize-body-body-l, 16px);
  font-weight: var(--font-weight-regular, 400);
  text-decoration: none !important;
}
/* Toggle button white background */
.t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle {
  background: #FFFFFF !important;
}

.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .navbar-nav .btn-toggle {
  background: #FFFFFF !important;
}

.offcanvas-divider{
  height: 1px;
  background-color: #e5e7eb;
  margin-bottom: 16px;
}

.offcanvas-lang-switcher {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}

.offcanvas-lang-switcher .lang-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.offcanvas-lang-switcher .lang-item .lang-text {
  color: var(--text-body-primary, #222);
  text-align: center;

  /* Bold L Sm-bold */
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-l, 16px);
  font-style: normal;
  font-weight: 600;
  line-height: var(--line-height-body-l, 24px);
  /* 150% */
}

.offcanvas-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs, 8px);
  align-self: stretch;
}

.btn.btn-login{
  height: 42px;
  min-width: 80px;
  padding: 0px !important;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  background: #FFF;
  color: var(--text-body-primary-weak, #4B5563) !important;
  text-align: center;
  /* Body M bold */
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-m, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-body-m, 22px); /* 157.143% */
}

@media (max-width: 991px) {
  .btn.btn-login{
    margin-bottom: 12px;
    margin-right: 0px;
  }
}

.btn.btn-apply{
  height: 42px;
  min-width: 80px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  padding: 0 !important;
  color: var(--text-body-primary-weak, #4B5563) !important;
  text-align: center;
  
  /* Body M bold */
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-m, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-body-m, 22px); /* 157.143% */
}

.btn.btn-login > span,
.btn.btn-apply > span {
  height: 42px;
  justify-content: center;
  display: flex;
  align-items: center;
  padding: 0 var(--sizing-component-lg, 20px) !important;
}

.btn.btn-apply > span {
  border-radius: var(--border-radius-round, 999px) !important;
  border: var(--border-width-sm, 1px) solid var(--border-action, #BD0F16) !important;
}

.btn.btn-login > span {
  border-radius: var(--border-radius-round, 999px) !important;
  border: var(--border-width-sm, 1px) solid var(--border-primary-weak, #4B5563) !important;
}

@media screen and (max-width: 991px) {
  .btn.btn-login > span,
  .btn.btn-apply > span {
    width: 100%;
  }
}
/* ========== OFFCANVAS BOTTOM CONTENT ========== */

.header-nav .btn:not(.js-offcanvas-trigger), .header-nav .blog-list .item-readmore a:not(.js-offcanvas-trigger), .blog-list .item-readmore .header-nav a:not(.js-offcanvas-trigger), .header-nav .acym_module_form input.btn:not(.js-offcanvas-trigger), .acym_module_form .header-nav input.btn:not(.js-offcanvas-trigger), .header-nav #acym_wrapper .acym__front__archive #acym__front__archive__search button:not(.js-offcanvas-trigger), #acym_wrapper .acym__front__archive #acym__front__archive__search .header-nav button:not(.js-offcanvas-trigger) {
  padding: 0px !important;
}

.offcanvas-bottom-content {
  padding: 0 20px 20px;
  margin-top: auto;
}

.btn.btn-apply .menu-item-title {
  color: var(--text-button-primary-on-light, #BD0F16) !important;
}

.offcanvas-divider {
  height: 1px;
  background-color: var(--border-quaternary, #e5e7eb);
  margin: 8px 0;
}

/* Language Switcher */
.offcanvas-lang-switcher {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}

.lang-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  color: var(--text-body-primary, #222222);
  font-size: var(--fontsize-body-body-l, 16px);
  font-weight: var(--font-weight-regular, 400);
  text-decoration: none !important;
}

.lang-item:hover {
  color: var(--text-action, #bd0f16);
}

.lang-item.active {
  font-weight: var(--font-weight-semibold, 600);
}

.lang-check-icon {
  width: 20px;
  height: 20px;
  stroke: var(--color-information-default, #4847eb);
}
/* Sub-menu back styling */
.sub-menu-back {
  display: flex;
  height: 48px;
  padding: var(--sizing-component-2xs, 4px) var(--spacing-x, 12px);
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border: none;
  color: var(--text-body-primary, #222);
  text-align: center;
}

/* Remove border from drilldown-effect sub-menu-back */
.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .sub-menu-back {
  border: none;
  text-transform: none;
  /* Body XL-bold */
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-xl, 18px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-body-xl, 28px); /* 155.556% */
  margin: 0px;
}

/* Hide the chevron-left icon */
.sub-menu-back > i {
  display: none;
}

/* Create the circular button on the right side */
.sub-menu-back::after {
  content: "";
  display: flex;
  width: 30px;
  height: 30px;
  padding: 1px;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
  border-radius: var(--border-radius-lg, 24px);
  background-color: var(--text-action-weak, #4847EB);
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.0728 4.40002L8.66016 6.81269L16.497 14.6667L8.66016 22.5207L11.0728 24.9334L21.3395 14.6667L11.0728 4.40002Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  flex-shrink: 0;
  transform: rotate(180deg);
}

.nav-category-name > span {
  display: flex !important;
  height: 40px !important;
  justify-content: center;
  align-items: center;
  gap: var(--sizing-component-xs, 8px) !important;
}

.nav-category-name img {
  width: 28px;
  height: 28px;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
}

.nav-category-name .image-title{
  color: var(--text-body-primary, #222);
  text-align: center;

  /* Bold L Sm-bold */
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: var(--line-height-body-l, 24px); /* 150% */
}

.t4-megamenu .navbar-nav > li > a, .t4-megamenu .navbar-nav > li > .nav-link {
  padding: 7px !important;
}

.language-check > span {
  width: 100%;
  justify-content: space-between;
  align-items: center;
  display: flex;
  flex-direction: row-reverse;
}

/* HR separator above language-check nav-link */
.nav-item .language-check.ms-my {
  position: relative;
}

.nav-item .language-check.ms-my::before {
  content: '';
  display: block;
  background: var(--border-quaternary, #E5E7EB);
  width: 100%;
  height: 1px;
  margin-bottom: 10px;
}

/* Vertical separator on left for desktop (width > 991px) */
@media (min-width: 992px) {
  .nav-item .language-check.ms-my::before {
    width: 1px;
    height: 24px;
    margin-bottom: 0;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
  }
}

/* ========== COOKIE CONSENT BANNER ========== */
.cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-blue-muted-600, #192652);
  display: flex;
  width: 100%;
  padding: var(--spacing-md, 24px) 60px;
  justify-content: center;
  align-items: center;
  gap: 60px;
  z-index: 10000;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
  margin: 0 auto;
}

.cookie-consent-content {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.cookie-consent-text {
  color: var(--text-on-dark, #FFF);
  margin: 0;
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-l, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-l, 24px); /* 150% */
  min-width: 200px;
}

.cookie-consent-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.cookie-consent-agree-btn {
  background: var(--surface-primary-on-light, #BD0F16);
  color: var(--text-on-dark, #FFF);
  border: none;
  border-radius: var(--border-radius-round, 999px);
  box-shadow: 0 2px 6px 0 rgba(45, 35, 61, 0.15);
  display: flex;
  height: 36px;
  min-width: 100px;
  padding: 10px var(--sizing-component-lg, 20px);
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-m, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-body-m, 22px); /* 157.143% */
  cursor: pointer;
  transition: background-color 0.3s ease;
  white-space: nowrap;
}

.cookie-consent-agree-btn:hover {
  background-color: #8a0000; /* Darker red on hover */
}

.cookie-consent-agree-btn:focus {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.cookie-consent-privacy-link {
  display: flex;
  height: 40px;
  padding: 10px 0;
  justify-content: center;
  align-items: center;
  gap: 4px;
  color: var(--color-blue-mysti-100, #D0D8FF);
  text-align: center;
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-l, 16px);
  font-weight: 600;
  line-height: var(--line-height-body-l, 24px);
  text-decoration: none;
}

.cookie-consent-privacy-link:hover {
  color: #ffffff;
  text-decoration: underline;
}

.cookie-consent-close {
  display: flex;
  width: 24px;
  height: 24px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.3s ease;
}

.cookie-consent-close:hover {
  opacity: 0.7;
}

.cookie-close-icon {
  width: 24px;
  height: 24px;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* Responsive styles */
@media (max-width: 768px) {
  .cookie-consent-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .cookie-consent-text {
    width: 100%;
  }

  .cookie-consent-agree-btn {
    flex: 1;
    min-width: 100px;
  }
}

@media (max-width: 480px) {
  .cookie-consent-content {
    gap: 10px;
  }
  .about-hero-logo-mosti img { flex-shrink: 1; }
  .about-hero-logo-mranti img { flex-shrink: 1; }
  .about-hero-logo-mtdc img { flex-shrink: 1; }
}
/* // COOKIE CONSENT BANNER */

.language-menu .menu-item-title::before {
  content: '';
  display: inline-block;
  height: 24px;
  width: 1px;
  background-color: var(--border-quaternary, #E5E7EB);
  margin-right: 10px;
  vertical-align: middle;
}

.card-wrapper {
  display: flex;
  max-width: 860px;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-x2, 16px);
  align-self: stretch;
  margin: 0 auto;
}
.card-item {
  display: flex;
  padding: var(--spacing-md, 20px) var(--spacing-x2, 16px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md, 20px);
  flex: 1 0 0;
  border-radius: var(--border-radius-md, 16px);
  background: #384D90;
}
.card-item-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
  color: #fff;
}
.card-item-title {
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-Body-XL, 18px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-body-XL, 28px); /* 155.556% */
}
.card-item-text {
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-Body-L, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-L, 24px); /* 150% */
}

/* Help Center Carousel Styles */
#helpCenterCarousel.owl-theme .owl-dots {
  margin-top: 20px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

#helpCenterCarousel.owl-theme .owl-dots .owl-dot {
  display: inline-block;
  padding: 0;
  margin: 0;
}

#helpCenterCarousel.owl-theme .owl-dots .owl-dot span {
  width: 8px;
  height: 8px;
  margin: 0;
  background: rgba(255, 255, 255, 0.4);
  display: block;
  border-radius: 50%;
  transition: all 0.3s ease;
}

#helpCenterCarousel.owl-theme .owl-dots .owl-dot.active span {
  width: 32px;
  height: 8px;
  border-radius: var(--border-radius-xl, 48px);
  background: #FFF;
  opacity: 1;
}

#helpCenterCarousel.owl-theme .owl-dots .owl-dot:hover span { background: rgba(255, 255, 255, 0.7); }

/* Desktop - hide carousel dots and show as flex */
@media (min-width: 768px) {
  .card-wrapper.owl-carousel { display: flex !important; }
  .card-wrapper.owl-carousel .owl-stage-outer,
  .card-wrapper.owl-carousel .owl-stage,
  .card-wrapper.owl-carousel .owl-item { display: contents; }
  
  #helpCenterCarousel.owl-theme .owl-dots { display: none; }
}

.w-fit { width: fit-content; }
.no-caret .item-caret { display: none !important; }

/* Inventory Menu show 2 columns */
/* When inventory-menu is a sibling of dropdown-menu */
.inventory-menu ~ .dropdown-menu.level1 .dropdown-menu-inner ul,
.inventory-menu + .dropdown-menu.level1 .dropdown-menu-inner ul {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 8px 16px; /* row gap | column gap */
  padding: 0;
  margin: 0;
}

.inventory-menu ~ .dropdown-menu.level1 .dropdown-menu-inner ul li,
.inventory-menu + .dropdown-menu.level1 .dropdown-menu-inner ul li {
  list-style: none;
  min-width: 304px;
}

.inventory-menu ~ .dropdown-menu.level1 .dropdown-item,
.inventory-menu + .dropdown-menu.level1 .dropdown-item {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* left align */
  white-space: nowrap;
}

@media (max-width: 991px) {
  .inventory-menu ~ .dropdown-menu.level1 .dropdown-menu-inner ul,
  .inventory-menu + .dropdown-menu.level1 .dropdown-menu-inner ul {
    grid-template-columns: 1fr;
  }
}

.contact-send-btn {
  border-radius: var(--border-radius-round, 999px);
  background: var(--surface-primary-on-light, #BD0F16) !important;
  box-shadow: 0 2px 6px 0 rgba(45, 35, 61, 0.15);
  display: flex;
  height: 56px;
  min-width: 100px;
  padding: 10px var(--sizing-component-lg, 20px);
  justify-content: center;
  align-items: center;
  gap: 4px;
  color: var(--text-on-dark, #FFF) !important;
  text-align: center;

  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-body-l, 16px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-body-l, 24px);
}

joomla-hidden-mail a { color: #FFF;}

#contact-form .control-label {
  color: var(--text-body-primary-weak, #4B5563);

  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontSize-12, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body-m, 22px); /* 157.143% */
}

#contact-form .control-btn { margin-top: 32px; }
.contact-form-title {
  color: var(--text-body-primary, #222);

  font-family: var(--type-font-family-font-family-1, Poppins);
  font-size: var(--fontsize-heading-h5, 24px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-heading-h5, 32px); /* 133.333% */
  margin-bottom: 16px;
}
#contact-form .form-control { 
  border-radius: var(--radius-xs, 6px);
  border: 1px solid var(--border-tertiary, #D1D5DB);
  background: var(--grey-0, #FFF);
  display: flex;
  height: 56px;
  padding: var(--general-sm-6, 12px);
  align-items: center;
  align-self: stretch;
}

.hero-guidelines-nav {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
  scrollbar-width: none; /* Firefox */
}

.hero-guidelines-nav::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.hero-guidelines-nav-link {
  flex: 0 0 auto; /* prevent shrinking */
}

#back-to-top { display: none !important;}

img.widget-button-icon {
    width: 60px;
    height: 60px;
    border-radius: 100%;
}

.learn > span > img { margin-right: 8px; }
.learn > span > span { 
  color: var(--text-body-primary, #222);
  text-align: center;

  /* Body XL-bold */
  font-family: var(--type-font-family-font-family-2, "Open Sans");
  font-size: var(--fontsize-body-Body-XL, 16px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-body-XL, 24px); /* 150% */
}

.navbar-nav .dropdown-menu .nav-item { border: none !important; }
.t4-off-canvas-header .back-button { 
  border: none;
  background: transparent;  
}

.layout-default #t4-custom-footer .t4-module { padding: 0;}