:root { --white: #FFFFFF; --black: #000000; --green: #0f6133; --lightGreen: #659D41; --yellowGreen: #9DB73B; --teal: #447189; --native_Blue: #1D4154; --lightGrey: #E3E3E3; --lightGray: #F2F2F2; --darkTxtColor: #272727; --Low_opacity_white: rgba(255, 255, 255, 0.6); --Low_opacity_black: #rgba(0, 0, 0, 0.8); --darkGrey: #272727; --yellow: #D4B42F; --avenirMedium: "Avenir-Medium"; --ibmRegular: "ibm Regular"; --ibmBold: "IBM Bold"; --ibmlight: "IBM Light"; --ibmmedium: "IBM Medium"; --ibmregular: "IBM Regular"; --ibmsemibold: "IBM SemiBold"; --transition: all .3s ease-in-out; --appTitleFontSizeMob: 1.5rem; --appTitleFontSizeTablet: 2.25rem; --appTitleFontSizeDesk: 2.25rem; --scale-factor: 1; --appTitleFontFam: "IBM Bold"; --spacing-none: 0rem; /* 0rem */ --spacing-xxs: 0.125rem; /* 0.125rem */ --spacing-xs: 0.25rem; /* 0.25rem */ --spacing-sm: 0.375rem; /* 0.375rem */ --spacing-md: 0.5rem; /* 0.5rem */ --spacing-ig: 0.75rem; /* 0.75rem */ --spacing-xl: 1rem; /* 1rem */ --spacing-2xl: 1.25rem; /* 1.25rem */ --spacing-3xl: 1.5rem; /* 1.5rem */ --spacing-4xl: 2rem; /* 2rem */ --spacing-5xl: 2.5rem; /* 2.5rem */ --spacing-6xl: 3rem; /* 3rem */ --spacing-7xl: 4rem; /* 4rem */ --spacing-8xl: 5rem; /* 5rem */ --spacing-9xl: 6rem; /* 6rem */ --spacing-10xl: 8rem; /* 8rem */ --spacing-11xl: 10rem; /* 10rem */ /* --- Width Tokens (Source: Spacing.jpg) --- */ /* These map to the Widths table for wrapping content */ --width-xxs: 20rem; /* 20rem */ --width-xs: 24rem; /* 24rem */ --width-sm: 30rem; /* 30rem */ --width-md: 35rem; /* 35rem */ --width-lg: 40rem; /* 40rem */ --width-xl: 48rem; /* 48rem */ --width-2xl: 64rem; /* 64rem */ --width-3xl: 80rem; /* 80rem */ --width-4xl: 90rem; /* 90rem */ --width-5xl: 100rem; /* 100rem */ --width-6xl: 120rem; /* 120rem */ /* --- Containers & Layout (Source: Spacing.jpg) --- */ --container-padding-mobile: 1rem; /* 1rem */ --container-padding-desktop: 2rem; /* 2rem */ --container-max-width-desktop: 80rem; /* 80rem */ --paragraph-max-width: 20rem; /* 20rem (Note: Sheet lists 720px for readability) */ /* --- Radius Tokens (Source: Section.jpg) --- */ /* Based on the predefined radius system */ --radius-none: 0rem; /* 0rem */ --radius-xs: 0.125rem; /* 0.125rem */ --radius-sm: 0.25rem; /* 0.25rem */ --radius-md: 0.5rem; /* 0.5rem */ --radius-lg: 1rem; /* 1rem */ --radius-xl: 1.5rem; /* 1.5rem */ --radius-full: 9999px; /* Infinite */ /* --- Display Styles (Major Headings) --- */ /* Display 2xl: 72px / 90px / -2% */ --font-display-2xl-size: 4.5rem; --font-display-2xl-lh: 5.625rem; --font-display-2xl-spacing: -0.02em; /* Display xl: 60px / 72px / -2% */ --font-display-xl-size: 3.75rem; --font-display-xl-lh: 4.5rem; --font-display-xl-spacing: -0.02em; /* Display lg: 48px / 60px / -2% */ --font-display-lg-size: 3rem; --font-display-lg-lh: 3.75rem; --font-display-lg-spacing: -0.02em; /* Display md: 36px / 44px / -2% */ --font-display-md-size: 2.25rem; --font-display-md-lh: 2.75rem; --font-display-md-spacing: -0.02em; /* Display sm: 30px / 38px / -2% */ --font-display-sm-size: 1.875rem; --font-display-sm-lh: 2.375rem; --font-display-sm-spacing: -0.02em; /* Display xs: 24px / 32px / 0% */ --font-display-xs-size: 1.5rem; --font-display-xs-lh: 2rem; --font-display-xs-spacing: 0; /* --- Text Styles (Body & UI Elements) --- */ /* Text xl: 20px / 30px */ --font-text-xl-size: 1.25rem; --font-text-xl-lh: 1.875rem; /* Text lg: 18px / 28px */ --font-text-lg-size: 1.125rem; --font-text-lg-lh: 1.75rem; /* Text md: 16px / 24px (The Global Standard) */ --font-text-md-size: 1rem; --font-text-md-lh: 1.5rem; /* Text sm: 14px / 20px */ --font-text-sm-size: 0.875rem; --font-text-sm-lh: 1.25rem; /* Text xs: 12px / 18px */ --font-text-xs-size: 0.75rem; --font-text-xs-lh: 1.125rem; /* --- Neutral Colors (Source: Frame 1000007919.png) --- */ /* Used for surfaces, text, and layout elements */ --color-gray-25: #FCFCFD; --color-gray-50: #F9FAFB; --color-gray-100: #F3F4F6; --color-gray-200: #E5E7EB; --color-gray-300: #D2D6DB; --color-gray-400: #9DA4AE; --color-gray-500: #6C737F; --color-gray-600: #4D5761; --color-gray-700: #384250; --color-gray-800: #1F2A37; --color-gray-900: #111927; --color-gray-950: #0D121C; /* --- Primary Colors (Source: Frame 1000007919.png) --- */ /* Distinctive Saudi Identity hues for brand reinforcement */ --color-sa-25: #F7FDF9; --color-sa-50: #F3FCF6; --color-sa-100: #DFF6E7; --color-sa-200: #B8EACB; --color-sa-300: #88D8AD; --color-sa-400: #54C08A; --color-sa-500: #25935F; --color-sa-600: #1B8354; --color-sa-700: #166A45; --color-sa-800: #14573A; --color-sa-900: #104631; --color-sa-950: #092A1E; /* --- Semantic: Success (Source: Frame 1000007917.png) --- */ --color-success-500: #17B26A; --color-success-600: #079455; --color-success-700: #067647; /* --- Semantic: Error (Source: Frame 1000007917.png) --- */ --color-error-500: #F04438; --color-error-600: #D92D20; --color-error-700: #B42318; /* --- Semantic: Warning (Source: Frame 1000007917.png) --- */ --color-warning-500: #F79009; --color-warning-600: #DC6803; /* --- Semantic: Info (Source: Frame 1000007917.png) --- */ --color-info-500: #2E90FA; --color-info-600: #1570EF; /* --- Secondary: Gold (Source: Frame 1000007918.png) --- */ /* Used to emphasize exclusivity and luxury */ --color-gold-500: #F5BD02; --color-gold-600: #DBA102; /* Primary 600 in sheet */ /* --- Secondary: Lavender (Source: Frame 1000007918.png) --- */ /* Used for a touch of softness and serenity */ --color-lavender-500: #80519F; /* Primary 500 in sheet */ } /* new root - updated one to be used */ :root { --text-default: #161616; --link-neutral: #384250; --colors-base-white: #ffffff; --colors-base-black: #000000; --colors-alpha-white: 0deg 0% 100%; --colors-alpha-black: 0deg 0% 0%; /* Text size */ --display-2xl:4.5rem; --display-xl:3.75rem; --display-lg:3rem; --display-md:2.25rem; --display-sm:1.875rem; --display-xs:1.5rem; --text-xl:1.25rem; --text-lg:1.125rem; --text-md:1rem; --text-sm:0.875rem; --text-xs:0.75rem; --text-2xs:0.75rem; /* font weight */ --regular:400; --medium:500; --semibold:600; --bold:700; /* Neutral Colors - gray*/ --colors-gray-25: #fcfcfd; --colors-gray-50: #f9fafb; --colors-gray-100: #F3F4F6; --colors-gray-200: #E5E7EB; --colors-gray-300: #D2D6DB; --colors-gray-400: #9DA4AE; /* link disabled */ --colors-gray-500: #6C737F; --colors-gray-600: #4D5761; --colors-gray-700: #384250; --colors-gray-800: #1F2A37; --colors-gray-900: #111927; --colors-gray-950: #0D121C; /* Primary Colors - green*/ --colors-brand-25: #f7fdf9; --colors-brand-50: #f3fcf6; --colors-brand-100: #dff6e7; --colors-brand-200: #b8eacb; --colors-brand-300: #88d8ad; /* link pressed*/ --colors-brand-400: #54c08a; /* link hover */ --colors-brand-500: #25935f; --colors-brand-600: #1b8354; /* link primary + link focus */ --colors-brand-700: #166a45; --colors-brand-800: #14573a; /* link visited */ --colors-brand-900: #104631; --colors-brand-950: #092a1e; /* Error Colors - red*/ --colors-error-25: #fffbfa; --colors-error-50: #fef3f2; --colors-error-100: #fee4e2; --colors-error-200: #fecdca; --colors-error-300: #fda29b; --colors-error-400: #f97066; --colors-error-500: #f04438; --colors-error-600: #d92d20; --colors-error-700: #b42318; --colors-error-800: #912018; --colors-error-900: #7a271a; --colors-error-950: #55160c; /* Warning Colors*/ --colors-warning-25: #fffcf5; --colors-warning-50: #fffaeb; --colors-warning-100: #fef0c7; --colors-warning-200: #fedf89; --colors-warning-300: #fec84b; --colors-warning-400: #fdb022; --colors-warning-500: #f79009; --colors-warning-600: #dc6803; --colors-warning-700: #b54708; --colors-warning-800: #93370d; --colors-warning-900: #7a2e0e; --colors-warning-950: #4e1d09; /* Info Colors*/ --colors-info-25: #f5faff; --colors-info-50: #eff8ff; --colors-info-100: #d1e9ff; --colors-info-200: #b2ddff; --colors-info-300: #84caff; --colors-info-400: #53b1fd; --colors-info-500: #2e90fa; --colors-info-600: #1570ef; --colors-info-700: #175cd3; --colors-info-800: #1849a9; --colors-info-900: #194185; --colors-info-950: #102a56; /* Sucess Colors*/ --colors-success-25: #f6fef9; --colors-success-50: #ecfdf3; --colors-success-100: #dcfae6; --colors-success-200: #abefc6; --colors-success-300: #75e0a7; --colors-success-400: #47cd89; --colors-success-500: #17b26a; --colors-success-600: #079455; --colors-success-700: #067647; --colors-success-800: #085d3a; --colors-success-900: #074d31; --colors-success-950: #053321; /* below Note validated yet */ --gradient-gray-600-500-90deg: linear-gradient(90deg,var(--colors-gray-600) 0%,var(--colors-gray-500) 100%); --gradient-gray-700-600-45deg: linear-gradient(45deg,var(--colors-gray-700) 0%,var(--colors-gray-600) 100%); --gradient-gray-800-600-45deg: linear-gradient(45deg,var(--colors-gray-800) 0%,var(--colors-gray-600) 100%); --gradient-gray-800-600-90deg: linear-gradient(90deg,var(--colors-gray-800) 0%,var(--colors-gray-600) 100%); --gradient-gray-800-700-26-5deg: linear-gradient(26.5deg,var(--colors-gray-600) 0%,var(--colors-gray-700) 100%); --gradient-gray-900-600-45deg: linear-gradient(45deg,var(--colors-gray-900) 0%,var(--colors-gray-600) 100%); --gradient-brand-600-500-90deg: linear-gradient(90deg,var(--colors-brand-600) 0%,var(--colors-brand-500) 100%); --gradient-brand-700-600-45deg: linear-gradient(45deg,var(--colors-brand-700) 0%,var(--colors-brand-600) 100%); --gradient-brand-800-600-45deg: linear-gradient(45deg,var(--colors-brand-800) 0%,var(--colors-brand-600) 100%); --gradient-brand-800-600-90deg: linear-gradient(90deg,var(--colors-brand-800) 0%,var(--colors-brand-600) 100%); --gradient-brand-800-700-26-5deg: linear-gradient(26.5deg,var(--colors-brand-600) 0%,var(--colors-brand-700) 100%); --gradient-brand-900-600-45deg: linear-gradient(45deg,var(--colors-brand-900) 0%,var(--colors-brand-600) 100%); --colors-text-primary: var(--colors-gray-950); --colors-text-primary_on-brand: var(--colors-base-white); --colors-text-secondary: var(--colors-gray-700); --colors-text-secondary_on-brand: hsla(var(--colors-alpha-white)/70%); --colors-text-tertiary: var(--colors-gray-600); --colors-text-quarterary: var(--colors-gray-500); --colors-text-white: var(--colors-base-white); --colors-text-disabled: var(--colors-gray-500); --colors-text-placeholder: var(--colors-gray-500); --colors-text-brand-primary: var(--colors-brand-800); --colors-text-brand-secondary: var(--colors-brand-700); --colors-text-error-primary: var(--colors-error-600); --colors-border-primary: var(--colors-gray-300); --colors-border-secondary: var(--colors-gray-200); --colors-border-disabled: var(--colors-gray-300); --colors-border-disabled_subtle: var(--colors-gray-200); --colors-border-brand: var(--colors-brand-300); --colors-border-error: var(--colors-error-300); --colors-fg-primary: var(--colors-gray-900); --colors-fg-quinary-400: var(--colors-gray-400); --colors-fg-tertiary-600: var(--colors-gray-600); -xs: 0 1px 2px 0 rgba(16,24,40,.05); --shadow-sm: 0px 1px 2px 0px rgba(16,24,40,0.06),0px 1px 3px 0px rgba(16,24,40,0.1); --shadow-md: 0px 2px 4px -2px rgba(16,24,40,0.06),0px 4px 8px -2px rgba(16,24,40,0.1); --shadow-lg: 0px 4px 6px -2px rgba(16,24,40,0.03),0px 12px 16px -4px rgba(16,24,40,0.08); --shadow-xl: 0px 8px 8px -4px rgba(16,24,40,0.03),0px 20px 24px -4px rgba(16,24,40,0.08); --shadow-2xl: 0px 24px 48px -12px rgba(16,24,40,0.18); --shadow-3xl: 0px 32px 64px -12px rgba(16,24,40,0.14); --radius-none: 0; --radius-xxs: 2px; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 16px; --radius-3xl: 20px; --radius-4xl: 24px; --radius-full: 9999px; --spacing-0: 0px; --spacing-0․5: 2px; --spacing-1: 4px; --spacing-1․5: 6px; --spacing-2: 8px; --spacing-3: 12px; --spacing-4: 16px; --spacing-5: 20px; --spacing-6: 24px; --spacing-8: 32px; --spacing-10: 40px; --spacing-12: 48px; --spacing-16: 64px; --spacing-20: 80px; --spacing-24: 96px; --spacing-32: 128px; --spacing-40: 160px; --spacing-48: 192px; --spacing-56: 224px; --spacing-64: 256px; --spacing-80: 320px; --spacing-96: 384px; --spacing-120: 480px; --spacing-140: 560px; --spacing-160: 640px; --spacing-180: 720px; --spacing-192: 768px; --spacing-256: 1024px; --spacing-320: 1280px; --spacing-360: 1440px; --spacing-400: 1600px; --spacing-480: 1920px; --spacing-none: var(--spacing-0); --spacing-xxs: var(--spacing-0․5); --spacing-xs: var(--spacing-1); --spacing-sm: var(--spacing-1․5); --spacing-md: var(--spacing-2); --spacing-lg: var(--spacing-3); --spacing-xl: var(--spacing-4); --spacing-2xl: var(--spacing-5); --spacing-3xl: var(--spacing-6); --spacing-4xl: var(--spacing-8); --spacing-5xl: var(--spacing-10); --spacing-6xl: var(--spacing-12); --spacing-7xl: var(--spacing-16); --spacing-8xl: var(--spacing-20); --spacing-9xl: var(--spacing-24); --spacing-10xl: var(--spacing-32); --spacing-11xl: var(--spacing-40); --width-xxs: var(--spacing-80); --width-xs: var(--spacing-96); --width-sm: var(--spacing-120); --width-md: var(--spacing-140); --width-lg: var(--spacing-160); --width-xl: var(--spacing-192); --width-2xl: var(--spacing-256); --width-3xl: var(--spacing-320); --width-4xl: var(--spacing-360); --width-5xl: var(--spacing-400); --width-6xl: var(--spacing-480); --paragraph-max-width: var(--spacing-180); --container-padding-mobile: var(--spacing-4); --container-padding-desktop: var(--spacing-8); --container-max-width-desktop: var(--spacing-320); --border-width: 3px; --border-radius: 17px; --br-lg: 28px; --border-radius-large: 32px; --border-radius-xlarge: 48px; --border-radius-full: 50%; /**/ --spacing-0: 0px; --spacing-0․5: 2px; --spacing-1: 4px; --spacing-1․5: 6px; --spacing-2: 8px; --spacing-3: 12px; --spacing-4: 16px; --spacing-5: 20px; --spacing-6: 24px; --spacing-8: 32px; --spacing-10: 40px; --spacing-12: 48px; --spacing-16: 64px; --spacing-20: 80px; --spacing-24: 96px; --spacing-32: 128px; --spacing-40: 160px; --spacing-48: 192px; --spacing-56: 224px; --spacing-64: 256px; --spacing-80: 320px; --spacing-96: 384px; --spacing-120: 480px; --spacing-140: 560px; --spacing-160: 640px; --spacing-180: 720px; --spacing-192: 768px; --spacing-256: 1024px; --spacing-320: 1280px; --spacing-360: 1440px; --spacing-400: 1600px; --spacing-480: 1920px; --spacing-none: var(--spacing-0); --spacing-xxs: var(--spacing-0․5); --spacing-xs: var(--spacing-1); --spacing-sm: var(--spacing-1․5); --spacing-md: var(--spacing-2); --spacing-lg: var(--spacing-3); --spacing-xl: var(--spacing-4); --spacing-2xl: var(--spacing-5); --spacing-3xl: var(--spacing-6); --spacing-4xl: var(--spacing-8); --spacing-5xl: var(--spacing-10); --spacing-6xl: var(--spacing-12); --spacing-7xl: var(--spacing-16); --spacing-8xl: var(--spacing-20); --spacing-9xl: var(--spacing-24); --spacing-10xl: var(--spacing-32); --spacing-11xl: var(--spacing-40); --width-xxs: var(--spacing-80); --width-xs: var(--spacing-96); --width-sm: var(--spacing-120); --width-md: var(--spacing-140); --width-lg: var(--spacing-160); --width-xl: var(--spacing-192); --width-2xl: var(--spacing-256); --width-3xl: var(--spacing-320); --width-4xl: var(--spacing-360); --width-5xl: var(--spacing-400); --width-6xl: var(--spacing-480); --paragraph-max-width: var(--spacing-180); --container-padding-mobile: var(--spacing-4); --container-padding-desktop: var(--spacing-8); --container-max-width-desktop: var(--spacing-320); --radius-none: 0; --radius-xxs: 2px; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 16px; --radius-3xl: 20px; --radius-4xl: 24px; --radius-full: 9999px; --colors-base-white: #ffffff; --colors-base-black: #000000; --colors-alpha-white: 0deg 0% 100%; --colors-alpha-black: 0deg 0% 0%; --colors-gray-25: #FCFCFD; --colors-gray-50: #F9FAFB; --colors-gray-100: #F2F4F7; --colors-gray-200: #EAECF0; --colors-gray-300: #D0D5DD; --colors-gray-400: #98A2B3; --colors-gray-500: #667085; --colors-gray-600: #475467; --colors-gray-800: #182230; --colors-gray-900: #101828; --colors-gray-25: #FAFAFA; --colors-gray-50: #F5F5F6; --colors-gray-100: #F0F1F1; --colors-gray-200: #ECECED; --colors-gray-300: #CECFD2; --colors-gray-400: #94969C; --colors-gray-500: #85888E; --colors-gray-600: #61646C; --colors-gray-700: #333741; --colors-gray-800: #1F242F; --colors-gray-900: #161B26; --colors-gray-950: #0C111D; --colors-brand-25: #F7FDF9; --colors-brand-50: #F3FCF6; --colors-brand-100: #DFF6E7; --colors-brand-200: #B8EACB; --colors-brand-300: #88D8AD; --colors-brand-400: #54C08A; --colors-brand-500: #25935F; --colors-brand-600: #1B8354; --colors-brand-700: #166A45; --colors-brand-800: #14573A; --colors-brand-900: #104631; --colors-brand-950: #092A1E; --colors-error-25: #FFFBFA; --colors-error-50: #FEF3F2; --colors-error-100: #FEE4E2; --colors-error-200: #FECDCA; --colors-error-300: #FDA29B; --colors-error-400: #F97066; --colors-error-500: #F04438; --colors-error-600: #D92D20; --colors-error-700: #B42318; --colors-error-800: #912018; --colors-error-900: #7A271A; --colors-error-950: #55160C; --colors-warning-25: #FFFCF5; --colors-warning-50: #FFFAEB; --colors-warning-100: #FEF0C7; --colors-warning-200: #FEDF89; --colors-warning-300: #FEC84B; --colors-warning-400: #FDB022; --colors-warning-500: #F79009; --colors-warning-600: #DC6803; --colors-warning-700: #B54708; --colors-warning-800: #93370D; --colors-warning-900: #7A2E0E; --colors-warning-950: #4E1D09; --colors-success-25: #F6FEF9; --colors-success-50: #ECFDF3; --colors-success-100: #DCFAE6; --colors-success-200: #ABEFC6; --colors-success-300: #75E0A7; --colors-success-400: #47CD89; --colors-success-500: #17B26A; --colors-success-600: #079455; --colors-success-700: #067647; --colors-success-800: #085D3A; --colors-success-900: #074D31; --colors-success-950: #053321; --colors-info-25: #F5FAFF; --colors-info-50: #EFF8FF; --colors-info-100: #D1E9FF; --colors-info-200: #B2DDFF; --colors-info-300: #84CAFF; --colors-info-400: #53B1FD; --colors-info-500: #2E90FA; --colors-info-600: #1570EF; --colors-info-700: #175CD3; --colors-info-800: #1849A9; --colors-info-900: #194185; --colors-info-950: #102A56; --colors-gray-blue-25: #FCFCFD; --colors-gray-blue-50: #F8F9FC; --colors-gray-blue-100: #EAECF5; --colors-gray-blue-200: #D5D9EB; --colors-gray-blue-300: #B3B8DB; --colors-gray-blue-400: #717BBC; --colors-gray-blue-500: #4E5BA6; --colors-gray-blue-600: #3E4784; --colors-gray-blue-700: #363F72; --colors-gray-blue-800: #293056; --colors-gray-blue-900: #101323; --colors-gray-blue-950: #0D0F1C; --colors-gray-cool-25: #FCFCFD; --colors-gray-cool-50: #F9F9FB; --colors-gray-cool-100: #EFF1F5; --colors-gray-cool-200: #DCDFEA; --colors-gray-cool-300: #B9C0D4; --colors-gray-cool-400: #7D89B0; --colors-gray-cool-500: #5D6B98; --colors-gray-cool-600: #4A5578; --colors-gray-cool-700: #404968; --colors-gray-cool-800: #30374F; --colors-gray-cool-900: #111322; --colors-gray-cool-950: #0E101B; --colors-gray-modern-25: #FCFCFD; --colors-gray-modern-50: #F8FAFC; --colors-gray-modern-100: #EEF2F6; --colors-gray-modern-200: #E3E8EF; --colors-gray-modern-300: #CDD5DF; --colors-gray-modern-400: #9AA4B2; --colors-gray-modern-500: #697586; --colors-gray-modern-600: #4B5565; --colors-gray-modern-700: #364152; --colors-gray-modern-800: #202939; --colors-gray-modern-900: #121926; --colors-gray-modern-950: #0D121C; --colors-gray-neutral-25: #FCFCFD; --colors-gray-neutral-50: #F9FAFB; --colors-gray-neutral-100: #F3F4F6; --colors-gray-neutral-200: #E5E7EB; --colors-gray-neutral-300: #D2D6DB; --colors-gray-neutral-400: #9DA4AE; --colors-gray-neutral-500: #6C737F; --colors-gray-neutral-600: #4D5761; --colors-gray-neutral-700: #384250; --colors-gray-neutral-800: #1F2A37; --colors-gray-neutral-900: #111927; --colors-gray-neutral-950: #0D121C; --colors-gray-iron-25: #FCFCFC; --colors-gray-iron-50: #FAFAFA; --colors-gray-iron-100: #F4F4F5; --colors-gray-iron-200: #E4E4E7; --colors-gray-iron-300: #D1D1D6; --colors-gray-iron-400: #A0A0AB; --colors-gray-iron-500: #70707B; --colors-gray-iron-600: #51525C; --colors-gray-iron-700: #3F3F46; --colors-gray-iron-800: #26272B; --colors-gray-iron-900: #1A1A1E; --colors-gray-iron-950: #131316; --colors-gray-true-25: #FCFCFC; --colors-gray-true-50: #FAFAFA; --colors-gray-true-100: #F5F5F5; --colors-gray-true-200: #E5E5E5; --colors-gray-true-300: #D6D6D6; --colors-gray-true-400: #A3A3A3; --colors-gray-true-500: #737373; --colors-gray-true-600: #525252; --colors-gray-true-700: #424242; --colors-gray-true-800: #292929; --colors-gray-true-900: #141414; --colors-gray-true-950: #0F0F0F; --colors-gray-warm-25: #FDFDFC; --colors-gray-warm-50: #FAFAF9; --colors-gray-warm-100: #F5F5F4; --colors-gray-warm-200: #E7E5E4; --colors-gray-warm-300: #D7D3D0; --colors-gray-warm-400: #A9A29D; --colors-gray-warm-500: #79716B; --colors-gray-warm-600: #57534E; --colors-gray-warm-700: #44403C; --colors-gray-warm-800: #292524; --colors-gray-warm-900: #1C1917; --colors-gray-warm-950: #171412; --colors-moss-25: #FAFDF7; --colors-moss-50: #F5FBEE; --colors-moss-100: #E6F4D7; --colors-moss-200: #CEEAB0; --colors-moss-300: #ACDC79; --colors-moss-400: #86CB3C; --colors-moss-500: #669F2A; --colors-moss-600: #4F7A21; --colors-moss-700: #3F621A; --colors-moss-800: #335015; --colors-moss-900: #2B4212; --colors-moss-950: #1A280B; --colors-green-light-25: #FAFEF5; --colors-green-light-50: #F3FEE7; --colors-green-light-100: #E3FBCC; --colors-green-light-200: #D0F8AB; --colors-green-light-300: #A6EF67; --colors-green-light-400: #85E13A; --colors-green-light-500: #66C61C; --colors-green-light-600: #4CA30D; --colors-green-light-700: #3B7C0F; --colors-green-light-800: #326212; --colors-green-light-900: #2B5314; --colors-green-light-950: #15290A; --colors-green-25: #F6FEF9; --colors-green-50: #EDFCF2; --colors-green-100: #D3F8DF; --colors-green-200: #AAF0C4; --colors-green-300: #73E2A3; --colors-green-400: #3CCB7F; --colors-green-500: #16B364; --colors-green-600: #099250; --colors-green-700: #087443; --colors-green-800: #095C37; --colors-green-900: #084C2E; --colors-green-950: #052E1C; --colors-Teal-25: #F6FEFC; --colors-Teal-50: #F0FDF9; --colors-Teal-100: #CCFBEF; --colors-Teal-200: #99F6E0; --colors-Teal-300: #5FE9D0; --colors-Teal-400: #2ED3B7; --colors-Teal-500: #15B79E; --colors-Teal-600: #0E9384; --colors-Teal-700: #107569; --colors-Teal-800: #125D56; --colors-Teal-900: #134E48; --colors-Teal-950: #0A2926; --colors-cyan-25: #F5FEFF; --colors-cyan-50: #ECFDFF; --colors-cyan-100: #CFF9FE; --colors-cyan-200: #A5F0FC; --colors-cyan-300: #67E3F9; --colors-cyan-400: #22CCEE; --colors-cyan-500: #06AED4; --colors-cyan-600: #088AB2; --colors-cyan-700: #0E7090; --colors-cyan-800: #155B75; --colors-cyan-900: #164C63; --colors-cyan-950: #0D2D3A; --colors-blue-light-25: #F5FBFF; --colors-blue-light-50: #F0F9FF; --colors-blue-light-100: #E0F2FE; --colors-blue-light-200: #B9E6FE; --colors-blue-light-300: #7CD4FD; --colors-blue-light-400: #36BFFA; --colors-blue-light-500: #0BA5EC; --colors-blue-light-600: #0086C9; --colors-blue-light-700: #026AA2; --colors-blue-light-800: #065986; --colors-blue-light-900: #0B4A6F; --colors-blue-light-950: #062C41; --colors-blue-dark-25: #F5F8FF; --colors-blue-dark-50: #EFF4FF; --colors-blue-dark-100: #D1E0FF; --colors-blue-dark-200: #B2CCFF; --colors-blue-dark-300: #84ADFF; --colors-blue-dark-400: #528BFF; --colors-blue-dark-500: #2970FF; --colors-blue-dark-600: #155EEF; --colors-blue-dark-700: #004EEB; --colors-blue-dark-800: #0040C1; --colors-blue-dark-900: #00359E; --colors-blue-dark-950: #002266; --colors-indigo-25: #F5F8FF; --colors-indigo-50: #EEF4FF; --colors-indigo-100: #E0EAFF; --colors-indigo-200: #C7D7FE; --colors-indigo-300: #A4BCFD; --colors-indigo-400: #8098F9; --colors-indigo-500: #6172F3; --colors-indigo-600: #444CE7; --colors-indigo-700: #3538CD; --colors-indigo-800: #2D31A6; --colors-indigo-900: #2D3282; --colors-indigo-950: #1F235B; --colors-violet-25: #FBFAFF; --colors-violet-50: #F5F3FF; --colors-violet-100: #ECE9FE; --colors-violet-200: #DDD6FE; --colors-violet-300: #C3B5FD; --colors-violet-400: #A48AFB; --colors-violet-500: #875BF7; --colors-violet-600: #7839EE; --colors-violet-700: #6927DA; --colors-violet-800: #5720B7; --colors-violet-900: #491C96; --colors-violet-950: #2E125E; --colors-purple-25: #FAFAFF; --colors-purple-50: #F4F3FF; --colors-purple-100: #EBE9FE; --colors-purple-200: #D9D6FE; --colors-purple-300: #BDB4FE; --colors-purple-400: #9B8AFB; --colors-purple-500: #7A5AF8; --colors-purple-600: #6938EF; --colors-purple-700: #5925DC; --colors-purple-800: #4A1FB8; --colors-purple-900: #3E1C96; --colors-purple-950: #27115F; --colors-fuchsia-25: #FEFAFF; --colors-fuchsia-50: #FDF4FF; --colors-fuchsia-100: #FBE8FF; --colors-fuchsia-200: #F6D0FE; --colors-fuchsia-300: #EEAAFD; --colors-fuchsia-400: #E478FA; --colors-fuchsia-500: #D444F1; --colors-fuchsia-600: #BA24D5; --colors-fuchsia-700: #9F1AB1; --colors-fuchsia-800: #821890; --colors-fuchsia-900: #6F1877; --colors-fuchsia-950: #47104C; --colors-pink-25: #FEF6FB; --colors-pink-50: #FDF2FA; --colors-pink-100: #FCE7F6; --colors-pink-200: #FCCEEE; --colors-pink-300: #FAA7E0; --colors-pink-400: #F670C7; --colors-pink-500: #EE46BC; --colors-pink-600: #DD2590; --colors-pink-700: #C11574; --colors-pink-800: #9E165F; --colors-pink-900: #851651; --colors-pink-950: #4E0D30; --colors-rosé-25: #FFF5F6; --colors-rosé-50: #FFF1F3; --colors-rosé-100: #FFE4E8; --colors-rosé-200: #FECDD6; --colors-rosé-300: #FEA3B4; --colors-rosé-400: #FD6F8E; --colors-rosé-500: #F63D68; --colors-rosé-600: #E31B54; --colors-rosé-700: #C01048; --colors-rosé-800: #A11043; --colors-rosé-900: #89123E; --colors-rosé-950: #510B24; --colors-orange-dark-25: #FFF9F5; --colors-orange-dark-50: #FFF4ED; --colors-orange-dark-100: #FFE6D5; --colors-orange-dark-200: #FFD6AE; --colors-orange-dark-300: #FF9C66; --colors-orange-dark-400: #FF692E; --colors-orange-dark-500: #FF4405; --colors-orange-dark-600: #E62E05; --colors-orange-dark-700: #BC1B06; --colors-orange-dark-800: #97180C; --colors-orange-dark-900: #771A0D; --colors-orange-dark-950: #57130A; --colors-orange-25: #FEFAF5; --colors-orange-50: #FEF6EE; --colors-orange-100: #FDEAD7; --colors-orange-200: #F9DBAF; --colors-orange-300: #F7B27A; --colors-orange-400: #F38744; --colors-orange-500: #EF6820; --colors-orange-600: #E04F16; --colors-orange-700: #B93815; --colors-orange-800: #932F19; --colors-orange-900: #772917; --colors-orange-950: #511C10; --colors-yellow-25: #FEFDF0; --colors-yellow-50: #FEFBE8; --colors-yellow-100: #FEF7C3; --colors-yellow-200: #FEEE95; --colors-yellow-300: #FDE272; --colors-yellow-400: #FAC515; --colors-yellow-500: #EAAA08; --colors-yellow-600: #CA8504; --colors-yellow-700: #A15C07; --colors-yellow-800: #854A0E; --colors-yellow-900: #713B12; --colors-yellow-950: #542C0D; --radius-0: 0; --radius-2: 2px; --radius-4: 4px; --radius-8: 8px; --radius-16: 16px; --radius-24: 24px; --radius-9999: 9999px; --components-card-radius: var(--spacing-4); --radius-none: var(--radius-0); --radius-xs: var(--radius-2); --radius-sm: var(--radius-4); --radius-md: var(--radius-8); --radius-lg: var(--radius-16); --radius-xl: var(--radius-24); --radius-full: var(--radius-9999); --colors-base-white: #ffffff; --colors-base-black: #161616; --colors-primary-sa-flag-25: #f7fdf9; --colors-primary-sa-flag-50: #f3fcf6; --colors-primary-sa-flag-100: #dff6e7; --colors-primary-sa-flag-200: #b8eacb; --colors-primary-sa-flag-300: #88d8ad; --colors-primary-sa-flag-400: #54c08a; --colors-primary-sa-flag-500-alpha-10: #25935f19; --colors-primary-sa-flag-500: #25935f; --colors-primary-sa-flag-600-primary: #1b8354; --colors-primary-sa-flag-700: #166a45; --colors-primary-sa-flag-800: #14573a; --colors-primary-sa-flag-900: #104631; --colors-primary-sa-flag-950: #092a1e; --colors-secondary-gold-25: #fffef7; --colors-secondary-gold-50: #fffef2; --colors-secondary-gold-100: #fffce6; --colors-secondary-gold-200: #fcf3bd; --colors-secondary-gold-300: #fae996; --colors-secondary-gold-400: #f7d54d; --colors-secondary-gold-500: #f5bd02; --colors-secondary-gold-600-primary: #dba102; --colors-secondary-gold-700: #b87b02; --colors-secondary-gold-800: #945c01; --colors-secondary-gold-900: #6e3c00; --colors-secondary-gold-950: #472400; --colors-tertiary-lavendar-25: #fefcff; --colors-tertiary-lavendar-50: #f9f5fa; --colors-tertiary-lavendar-100: #f2e9f5; --colors-tertiary-lavendar-200: #e1cce8; --colors-tertiary-lavendar-300: #ccadd9; --colors-tertiary-lavendar-400: #a57bba; --colors-tertiary-lavendar-500-primary: #80519f; --colors-tertiary-lavendar-600: #6d428f; --colors-tertiary-lavendar-700: #532d75; --colors-tertiary-lavendar-800: #3d1d5e; --colors-tertiary-lavendar-900: #281047; --colors-tertiary-lavendar-950: #16072e; --colors-neutral-25: #fcfcfd; --colors-neutral-50: #f9fafb; --colors-neutral-100: #f3f4f6; --colors-neutral-200: #e5e7eb; --colors-neutral-300: #d2d6db; --colors-neutral-400: #9da4ae; --colors-neutral-500: #6c727e; --colors-neutral-600: #4d5761; --colors-neutral-700: #384250; --colors-neutral-800: #1f2a37; --colors-neutral-900: #111927; --colors-neutral-950: #0c111b; --colors-blue-25: #f5faff; --colors-blue-50: #eff8ff; --colors-blue-100: #d1e9ff; --colors-blue-200: #b2ddff; --colors-blue-300: #84caff; --colors-blue-400: #53b0fd; --colors-blue-500: #2e90fa; --colors-blue-600: #156fee; --colors-blue-700: #175cd3; --colors-blue-800: #1849a9; --colors-blue-900: #194084; --colors-blue-950: #102a56; --colors-green-25: #f6fef9; --colors-green-50: #ecfdf3; --colors-green-100: #dcfae6; --colors-green-200: #abefc6; --colors-green-300: #75dfa6; --colors-green-400: #47cd89; --colors-green-500: #17b169; --colors-green-600: #069454; --colors-green-700: #067647; --colors-green-800: #085d3a; --colors-green-900: #074c30; --colors-green-950: #053321; --colors-yellow-25: #fffcf5; --colors-yellow-50: #fffaeb; --colors-yellow-100: #fef0c7; --colors-yellow-200: #fedf89; --colors-yellow-300: #fec84b; --colors-yellow-400: #fdb022; --colors-yellow-500: #f79009; --colors-yellow-600: #dc6803; --colors-yellow-700: #b54707; --colors-yellow-800: #93370c; --colors-yellow-900: #7a2e0e; --colors-yellow-950: #4e1d09; --colors-red-25: #fffbfa; --colors-red-50: #fef3f2; --colors-red-100: #fee4e2; --colors-red-200: #fecdca; --colors-red-300: #fca19b; --colors-red-400: #f97066; --colors-red-500: #f04437; --colors-red-600: #d92c20; --colors-red-700: #b42318; --colors-red-800: #912018; --colors-red-900: #7a2619; --colors-red-950: #54150c; --colors-alpha-alpha-white-0: #ffffff00; --colors-alpha-alpha-white-10: #ffffff19; --colors-alpha-alpha-white-20: #ffffff33; --colors-alpha-alpha-white-30: #ffffff4c; --colors-alpha-alpha-white-40: #ffffff66; --colors-alpha-alpha-white-50: #ffffff7f; --colors-alpha-alpha-white-60: #ffffff99; --colors-alpha-alpha-white-70: #ffffffb2; --colors-alpha-alpha-white-80: #ffffffcc; --colors-alpha-alpha-white-90: #ffffffe5; --colors-alpha-alpha-white-100: #ffffff; --colors-alpha-alpha-black-0: #16161600; --colors-alpha-alpha-black-10: #16161619; --colors-alpha-alpha-black-20: #16161633; --colors-alpha-alpha-black-30: #1616164c; --colors-alpha-alpha-black-40: #16161666; --colors-alpha-alpha-black-50: #1616167f; --colors-alpha-alpha-black-60: #16161699; --colors-alpha-alpha-black-70: #161616b2; --colors-alpha-alpha-black-80: #161616cc; --colors-alpha-alpha-black-90: #161616e5; --colors-alpha-alpha-black-100: #161616; --colors-alpha-alpha-green-10: #1b835419; --colors-alpha-alpha-green-20: #1b835433; --colors-alpha-alpha-green-30: #1b83544c; --colors-alpha-alpha-green-40: #1b835466; --colors-alpha-alpha-green-50: #1b83547f; --colors-alpha-alpha-green-60: #1b835499; --colors-alpha-alpha-green-70: #1b8354b2; --colors-alpha-alpha-green-80: #1b8354cc; --colors-alpha-alpha-green-90: #1b8354e5; --gradient-gray-600-500-90deg: linear-gradient(90deg, var(--colors-gray-600) 0%, var(--colors-gray-500) 100%); --gradient-gray-700-600-45deg: linear-gradient(45deg, var(--colors-gray-700) 0%, var(--colors-gray-600) 100%); --gradient-gray-800-600-45deg: linear-gradient(45deg, var(--colors-gray-800) 0%, var(--colors-gray-600) 100%); --gradient-gray-800-600-90deg: linear-gradient(90deg, var(--colors-gray-800) 0%, var(--colors-gray-600) 100%); --gradient-gray-800-700-26-5deg: linear-gradient(26.5deg, var(--colors-gray-600) 0%, var(--colors-gray-700) 100%); --gradient-gray-900-600-45deg: linear-gradient(45deg, var(--colors-gray-900) 0%, var(--colors-gray-600) 100%); --gradient-brand-600-500-90deg: linear-gradient(90deg, var(--colors-brand-600) 0%, var(--colors-brand-500) 100%); --gradient-brand-700-600-45deg: linear-gradient(45deg, var(--colors-brand-700) 0%, var(--colors-brand-600) 100%); --gradient-brand-800-600-45deg: linear-gradient(45deg, var(--colors-brand-800) 0%, var(--colors-brand-600) 100%); --gradient-brand-800-600-90deg: linear-gradient(90deg, var(--colors-brand-800) 0%, var(--colors-brand-600) 100%); --gradient-brand-800-700-26-5deg: linear-gradient(26.5deg, var(--colors-brand-600) 0%, var(--colors-brand-700) 100%); --gradient-brand-900-600-45deg: linear-gradient(45deg, var(--colors-brand-900) 0%, var(--colors-brand-600) 100%); --colors-text-primary: var(--colors-gray-900); --colors-text-primary_on-brand: var(--colors-base-white); --colors-text-secondary: var(--colors-gray-700); --colors-text-secondary_on-brand: hsla(var(--colors-alpha-white)/70%); --colors-text-tertiary: var(--colors-gray-600); --colors-text-quarterary: var(--colors-gray-500); --colors-text-white: var(--colors-base-white); --colors-text-disabled: var(--colors-gray-500); --colors-text-placeholder: var(--colors-gray-500); --colors-text-brand-primary: var(--colors-brand-800); --colors-text-brand-secondary: var(--colors-brand-700); --colors-text-error-primary: var(--colors-error-600); --colors-border-primary: var(--colors-gray-300); --colors-border-secondary: var(--colors-gray-200); --colors-border-disabled: var(--colors-gray-300); --colors-border-disabled_subtle: var(--colors-gray-200); --colors-border-brand: var(--colors-brand-300); --colors-border-error: var(--colors-error-300); --colors-fg-primary: var(--colors-gray-900); --colors-fg-quinary-400: var(--colors-gray-400); --colors-fg-tertiary-600: var(--colors-gray-600); --background-white: var(--colors-base-white); --background-body: var(--colors-neutral-50); --background-menu: var(--colors-base-white); --background-card: var(--colors-base-white); --background-surface-oncolor: var(--colors-base-white); --background-black: var(--colors-base-black); --background-brand-light: var(--colors-primary-sa-flag-50); --background-neutral-800: var(--colors-neutral-800); --background-neutral-400: var(--colors-neutral-400); --background-neutral-300: var(--colors-neutral-300); --background-neutral-200: var(--colors-neutral-200); --background-neutral-100: var(--colors-neutral-100); --background-neutral-50: var(--colors-neutral-50); --background-neutral-25: var(--colors-neutral-25); --background-primary: var(--colors-primary-sa-flag-600-primary); --background-primary-400: var(--colors-primary-sa-flag-400); --background-primary-200: var(--colors-primary-sa-flag-200); --background-primary-50: var(--colors-primary-sa-flag-50); --background-primary-25: var(--colors-primary-sa-flag-25); --background-secondary: var(--colors-secondary-gold-600-primary); --background-secondary-50: var(--colors-secondary-gold-50); --background-secondary-25: var(--colors-secondary-gold-25); --background-tertiary: var(--colors-tertiary-lavendar-600); --background-tertiary-50: var(--colors-tertiary-lavendar-50); --background-tertiary-25: var(--colors-tertiary-lavendar-25); --background-success: var(--colors-green-600); --background-success-light: var(--colors-green-50); --background-success-50: var(--colors-green-50); --background-success-25: var(--colors-green-25); --background-info: var(--colors-blue-600); --background-info-light: var(--colors-blue-50); --background-info-50: var(--colors-blue-50); --background-info-25: var(--colors-blue-25); --background-warning: var(--colors-yellow-600); --background-warning-light: var(--colors-yellow-50); --background-warning-50: var(--colors-yellow-50); --background-warning-25: var(--colors-yellow-25); --background-error: var(--colors-red-600); --background-error-light: var(--colors-red-50); --background-error-50: var(--colors-red-50); --background-error-25: var(--colors-red-25); --background-sa-flag: var(--colors-green-900); --background-sa-flag-50: var(--colors-green-50); --background-sa-flag-25: var(--colors-green-25); --background-notification-white: var(--colors-base-white); --text-default: var(--colors-base-black); --text-primary: var(--colors-primary-sa-flag-600-primary); --text-secondary: var(--colors-secondary-gold-600-primary); --text-tertiary: var(--colors-tertiary-lavendar-500-primary); --text-primary-sa-flag: var(--colors-primary-sa-flag-800); --text-display: var(--colors-neutral-800); --text-primary-paragraph: var(--colors-neutral-700); --text-secondary-paragraph: var(--colors-neutral-500); --text-oncolor-primary: var(--colors-base-white); --text-oncolor-secondary: var(--alpha-white-80); --text-oncolor-tertiary: var(--alpha-white-70); --text-success: var(--colors-green-700); --text-info: var(--colors-blue-700); --text-warning: var(--colors-yellow-700); --text-error: var(--colors-red-700); --text-primary-light: var(--colors-primary-sa-flag-300); --text-secondary-light: var(--colors-secondary-gold-300); --text-tertiary-light: var(--colors-tertiary-lavendar-300); --text-default-disabled: var(--colors-neutral-400); --text-default-oncolor-disabled: var(--alpha-white-40); --border-white: var(--colors-base-white); --border-white-40: var(--alpha-white-40); --button-background-black-default: var(--colors-neutral-950); --button-background-black-hovered: var(--colors-neutral-800); --button-background-black-pressed: var(--colors-neutral-600); --button-background-black-selected: var(--colors-neutral-700); --button-background-black-focused: var(--colors-neutral-950); --button-background-primary-default: var(--colors-primary-sa-flag-600-primary); --button-background-primary-hovered: var(--colors-primary-sa-flag-700); --button-background-primary-pressed: var(--colors-primary-sa-flag-900); --button-background-primary-selected: var(--colors-primary-sa-flag-800); --button-background-primary-focused: var(--colors-primary-sa-flag-600-primary); --button-background-neutral-default: var(--colors-neutral-100); --button-background-neutral-hovered: var(--colors-neutral-100); --button-background-neutral-pressed: var(--colors-neutral-200); --button-background-neutral-selected: var(--colors-neutral-200); --button-background-neutral-focused: var(--colors-neutral-100); --button-background-danger-primary-default: var(--colors-red-600); --button-background-danger-primary-hovered: var(--colors-red-700); --button-background-danger-primary-pressed: var(--colors-red-900); --button-background-danger-primary-selected: var(--colors-red-800); --button-background-danger-primary-focused: var(--colors-red-600); --button-label-danger-primary-default-oncolor: var(--colors-red-200); --button-label-danger-primary-hovered-oncolor: var(--colors-red-300); --button-label-danger-primary-pressed-oncolor: var(--colors-red-400); --button-background-danger-secondary-default: var(--colors-red-50); --button-background-danger-secondary-hovered: var(--colors-red-100); --button-background-danger-secondary-pressed: var(--colors-red-200); --button-background-danger-secondary-selected: var(--colors-red-50); --button-background-danger-secondary-focused: var(--colors-red-50); --button-background-oncolor-default: var(--colors-base-white); --button-background-oncolor-hovered: var(--alpha-white-80); --button-background-oncolor-pressed: var(--alpha-white-60); --button-background-oncolor-selected: var(--alpha-white-70); --button-background-oncolor-focused: var(--alpha-white-100); --button-background-transparent-default: var(--alpha-white-0); --button-background-transparent-hovered: var(--alpha-white-20); --button-background-transparent-pressed: var(--alpha-white-40); --button-background-transparent-selected: var(--alpha-white-30); --button-background-transparent-focused: var(--alpha-white-0); --button-background-disabled-on-color: var(--alpha-white-20); --button-label-transparent-hovered-on-color: var(--colors-primary-sa-flag-400); --border-black: var(--colors-base-black); --border-primary: var(--colors-primary-sa-flag-600-primary); --border-primary-light: var(--colors-primary-sa-flag-200); --border-secondary: var(--colors-secondary-gold-600-primary); --border-secondary-light: var(--colors-secondary-gold-200); --border-tertiary: var(--colors-tertiary-lavendar-500-primary); --border-tertiary-light: var(--colors-tertiary-lavendar-200); --border-neutral-primary: var(--colors-neutral-300); --border-neutral-secondary: var(--colors-neutral-200); --border-neutral-tertiary: var(--colors-neutral-100); --border-background-white: var(--colors-neutral-100); --border-background-neutral: var(--colors-neutral-300); --border-transparent-10: var(--alpha-white-10); --border-oncolor-transparent-30: var(--colors-alpha-alpha-white-30); --border-success: var(--colors-green-700); --button-label-transparent-pressed-on-color: var(--colors-primary-sa-flag-300); --border-success-light: var(--colors-green-200); --border-info: var(--colors-blue-700); --button-label-transparent-selected-on-color: var(--colors-primary-sa-flag-400); --border-info-light: var(--colors-blue-200); --button-icon-transparent-hovered-on-color: var(--background-primary-400); --border-warning: var(--colors-yellow-700); --border-warning-light: var(--colors-yellow-200); --border-error: var(--colors-red-700); --button-icon-transparent-pressed-on-color: var(--colors-primary-sa-flag-300); --border-error-light: var(--colors-red-200); --button-icon-transparent-selected-on-color: var(--colors-primary-sa-flag-400); --border-disabled: var(--colors-neutral-400); --link-primary: var(--colors-primary-sa-flag-600-primary); --link-primary-hovered: var(--colors-primary-sa-flag-400); --link-primary-pressed: var(--colors-primary-sa-flag-300); --link-primary-focused: var(--colors-primary-sa-flag-600-primary); --link-primary-visited: var(--colors-primary-sa-flag-800); --link-icon-primary-hovered: var(--colors-primary-sa-flag-400); --link-icon-primary-pressed: var(--colors-primary-sa-flag-300); --link-icon-primary-focused: var(--colors-primary-sa-flag-600-primary); --link-icon-primary-visited: var(--colors-primary-sa-flag-800); --link-secondary: var(--colors-secondary-gold-600-primary); --link-secondary-hovered: var(--colors-secondary-gold-400); --link-secondary-pressed: var(--colors-secondary-gold-300); --link-secondary-focused: var(--colors-secondary-gold-600-primary); --link-secondary-visited: var(--colors-secondary-gold-900); --link-tertiary: var(--colors-tertiary-lavendar-500-primary); --link-tertiary-hovered: var(--colors-tertiary-lavendar-400); --link-tertiary-pressed: var(--colors-tertiary-lavendar-300); --link-tertiary-focused: var(--colors-tertiary-lavendar-500-primary); --link-tertiary-visited: var(--colors-tertiary-lavendar-800); --link-neutral: var(--colors-neutral-700); --link-neutral-hovered: var(--colors-neutral-500); --link-icon-neutral-hovered: var(--colors-neutral-500); --link-neutral-pressed: var(--colors-neutral-400); --link-icon-neutral-pressed: var(--colors-neutral-400); --link-neutral-focused: var(--colors-neutral-700); --link-icon-neutral-focused: var(--colors-neutral-700); --link-neutral-visited: var(--colors-neutral-600); --link-icon-neutral-visited: var(--colors-neutral-600); --link-danger: var(--colors-red-600); --link-danger-hovered: var(--colors-red-700); --link-icon-danger-hovered: var(--colors-red-700); --link-danger-pressed: var(--colors-red-900); --link-icon-danger-pressed: var(--colors-red-900); --link-danger-focused: var(--colors-red-600); --link-icon-danger-focused: var(--colors-red-600); --link-danger-visited: var(--colors-red-800); --link-icon-danger-visited: var(--colors-red-800); --link-oncolor: var(--colors-base-white); --link-oncolor-hovered: var(--colors-alpha-alpha-white-80); --link-icon-oncolor-hovered: var(--alpha-white-80); --link-oncolor-pressed: var(--colors-alpha-alpha-white-60); --link-icon-oncolor-pressed: var(--alpha-white-60); --link-oncolor-focused: var(--colors-base-white); --link-link-oncolor-focused: var(--colors-base-white); --link-oncolor-visited: var(--colors-alpha-alpha-white-90); --link-icon-oncolor-visited: var(--alpha-white-90); --link-oncolor-disabled: var(--colors-alpha-alpha-white-30); --link-icon-oncolor-disabled: var(--alpha-white-30); --icon-oncolor: var(--colors-base-white); --tag-background-neutral: var(--colors-neutral-600); --tag-background-neutral-light: var(--colors-neutral-50); --tag-background-on-color: var(--colors-alpha-alpha-white-20); --tag-text-neutral: var(--colors-neutral-800); --tag-text-success: var(--colors-green-800); --tag-text-info: var(--colors-blue-800); --tag-text-warning: var(--colors-yellow-800); --tag-text-error: var(--colors-red-800); --tag-icon-neutral: var(--colors-neutral-800); --tag-icon-success: var(--colors-green-800); --tag-icon-info: var(--colors-blue-800); --tag-icon-warning: var(--colors-yellow-800); --tag-icon-error: var(--colors-red-800); --tag-background-success: var(--colors-green-700); --tag-background-success-light: var(--colors-green-50); --tag-background-info: var(--colors-blue-600); --tag-background-info-light: var(--colors-blue-50); --tag-background-warning: var(--colors-yellow-700); --tag-background-warning-light: var(--colors-yellow-50); --tag-background-error: var(--colors-red-600); --tag-background-error-light: var(--colors-red-50); --tag-border-neutral: var(--colors-neutral-600); --tag-border-neutral-light: var(--colors-neutral-50); --tag-border-on-color: var(--colors-alpha-alpha-white-60); --tag-border-success: var(--colors-green-700); --tag-border-success-light: var(--colors-green-200); --tag-border-info: var(--colors-blue-700); --tag-border-info-light: var(--colors-blue-200); --tag-border-warning: var(--colors-yellow-700); --tag-border-warning-light: var(--colors-yellow-200); --tag-border-error: var(--colors-red-700); --tag-border-error-light: var(--colors-red-200); --tag-dot: var(--colors-alpha-alpha-white-60); --form-text-form-title: var(--text-default); --controls-control-primary: var(--alpha-white-0); --table-cell-border: var(--colors-neutral-300); --table-cell-border-inverse: var(--border-black); --table-text-head: var(--colors-neutral-700); --table-text-body: var(--text-default); --table-background-disabled: var(--background-disabled); --table-background-hover-selected: var(--colors-neutral-50); --table-background-header: var(--colors-neutral-100); --table-background-row: var(--colors-neutral-50); --controls-control-primary-checked: var(--colors-primary-sa-flag-600-primary); --controls-control-primary-hovered: var(--colors-primary-sa-flag-800); --controls-control-primary-pressed: var(--colors-primary-sa-flag-800); --controls-control-primary-focused: var(--colors-primary-sa-flag-600-primary); --controls-control-neutral-checked: var(--colors-neutral-950); --controls-control-neutral-hovered: var(--colors-neutral-600); --controls-control-neutral-pressed: var(--colors-neutral-600); --controls-control-neutral-focused: var(--colors-neutral-950); --controls-control-primary--readonly: var(--alpha-white-0); --controls-control-pressed: var(--colors-neutral-300); --controls-control-ripple-effect: var(--colors-neutral-200); --controls-control-border: var(--colors-neutral-500); --form-text-form-paragraph: var(--text-secondary-paragraph); --form-field-text-label: var(--text-default); --form-field-text-placeholder: var(--text-secondary-paragraph); --form-field-text-hovered: var(--text-default); --stepper-button-completed: var(--colors-primary-sa-flag-600-primary); --tooltip-background-light: var(--colors-base-white); --tooltip-text-heading-light: var(--text-display); --tooltip-text-paragraph-light: var(--text-primary-paragraph); --tooltip-background-dark: var(--colors-neutral-800); --tooltip-text-heading-dark: var(--colors-neutral-50); --tooltip-text-paragraph-dark: var(--colors-neutral-100); --alpha-white-0: var(--colors-alpha-alpha-white-0); --alpha-white-10: var(--colors-alpha-alpha-white-10); --alpha-white-20: var(--colors-alpha-alpha-white-20); --alpha-white-30: var(--colors-alpha-alpha-white-30); --alpha-white-40: var(--colors-alpha-alpha-white-40); --alpha-white-50: var(--colors-alpha-alpha-white-50); --alpha-white-60: var(--colors-alpha-alpha-white-60); --alpha-white-70: var(--colors-alpha-alpha-white-70); --alpha-white-80: var(--colors-alpha-alpha-white-80); --alpha-white-90: var(--colors-alpha-alpha-white-90); --alpha-white-100: var(--colors-alpha-alpha-white-100); --alpha-black-0: var(--colors-alpha-alpha-black-0); --alpha-black-10: var(--colors-alpha-alpha-black-10); --alpha-black-20: var(--colors-alpha-alpha-black-20); --alpha-black-30: var(--colors-alpha-alpha-black-30); --alpha-black-40: var(--colors-alpha-alpha-black-40); --alpha-black-50: var(--colors-alpha-alpha-black-50); --alpha-black-60: var(--colors-alpha-alpha-black-60); --alpha-black-70: var(--colors-alpha-alpha-black-70); --alpha-black-80: var(--colors-alpha-alpha-black-80); --alpha-black-90: var(--colors-alpha-alpha-black-90); --alpha-black-100: var(--colors-alpha-alpha-black-100); --background-disabled: var(--colors-neutral-200); --background-disabled-primary: var(--colors-primary-sa-flag-200); --background-inverse-disabled: var(--colors-neutral-100); --stepper-button-completed-hovered: var(--colors-primary-sa-flag-700); --stepper-button-current: var(--colors-primary-sa-flag-600-primary); --stepper-button-current-hovered: var(--colors-primary-sa-flag-700); --stepper-button-upcomming: var(--colors-neutral-300); --stepper-button-upcomming-hovered: var(--colors-neutral-400); --stepper-button-background: var(--colors-base-white); --stepper-text-primary: var(--text-display); --stepper-text-secondary: var(--text-primary-paragraph); --stepper-text-tertiary: var(--text-secondary-paragraph); --stepper-line-completed: var(--colors-primary-sa-flag-600-primary); --stepper-line-completed-hovered: var(--colors-primary-sa-flag-700); --stepper-line-current: var(--colors-neutral-300); --stepper-line-upcomming: var(--colors-neutral-300); --stepper-line-upcomming-hovered: var(--colors-neutral-400); --form-field-text-focused: var(--text-primary-paragraph); --form-field-text-pressed: var(--text-primary-paragraph); --form-field-text-filled: var(--text-default); --form-field-text-readonly: var(--text-default); --form-field-text-helper: var(--text-secondary-paragraph); --form-field-background-default: var(--background-card); --form-field-background-lighter: var(--colors-neutral-25); --form-field-background-darker: var(--colors-neutral-100); --form-field-background-pressed: var(--colors-neutral-100); --form-field-border-default: var(--colors-neutral-400); --form-field-border-hovered: var(--colors-neutral-700); --form-field-border-pressed: var(--colors-neutral-950); --form-field-border-error: var(--border-error); --form-option-background-hover: var(--colors-neutral-100); --form-option-background-pressed: var(--colors-neutral-200); --form-datecell-background-default: var(--colors-primary-sa-flag-600-primary); --form-datecell-background-hovered: var(--colors-primary-sa-flag-700); --icon-default: var(--colors-base-black); --form-datecell-background-pressed: var(--colors-primary-sa-flag-900); --form-datecell-background-focused: var(--colors-primary-sa-flag-600-primary); --form-datecell-today-background-default: var(--alpha-white-0); --form-datecell-today-background-hovered: var(--colors-neutral-200); --form-datecell-today-background-pressed: var(--colors-neutral-300); --icon-default-500: var(--colors-neutral-500); --form-datecell-today-background-focused: var(--alpha-white-0); --form-datecell-background-disabled: #ffffff; --form-datecell-background-600: var(--colors-primary-sa-flag-600-primary); --form-datecell-background-300: var(--colors-primary-sa-flag-300); --form-datecell-background-200: var(--colors-primary-sa-flag-200); --form-datecell-background-100: var(--colors-primary-sa-flag-100); --controls-control-icon-hovered: var(--icon-oncolor); --alpha-primary-10: #1b835419; --icon-default-400: var(--colors-neutral-400); --icon-primary: var(--colors-primary-sa-flag-600-primary); --alpha-primary-20: #1b835433; --icon-primary-light: var(--colors-primary-sa-flag-50); --alpha-warning-10: #dc680319; --icon-primary-400: var(--colors-primary-sa-flag-400); --alpha-warning-20: #dc680333; --alpha-error-10: #d92c2019; --alpha-error-20: #d92c2033; --alpha-info-10: #156fee19; --alpha-info-20: #156fee33; --alpha-success-10: #06945419; --alpha-success-20: #06945433; --icon-neutral: var(--colors-neutral-700); --icon-neutral-light: var(--colors-neutral-50); --icon-secondary: var(--colors-secondary-gold-600-primary); --icon-secondary-light: var(--colors-secondary-gold-50); --icon-tertiary: var(--colors-tertiary-lavendar-500-primary); --icon-tertiary-light: var(--colors-tertiary-lavendar-50); --icon-success: var(--colors-green-700); --icon-success-light: var(--colors-green-50); --icon-info: var(--colors-blue-700); --icon-info-light: var(--colors-blue-50); --icon-warning: var(--colors-yellow-700); --icon-warning-light: var(--colors-yellow-50); --icon-error: var(--colors-red-700); --icon-error-light: var(--colors-red-50); --icon-default-disabled: var(--colors-neutral-400); --icon-default-oncolor-disabled: var(--colors-alpha-alpha-white-40); --control-disabled: var(--colors-neutral-400); --featuredicons-icon-oncolor: var(--colors-base-white); --featuredicons-icon-success: var(--colors-green-700); --featuredicons-icon-default: var(--colors-base-black); --featuredicons-icon-error: var(--colors-red-700); --featuredicons-icon-secondary: var(--colors-secondary-gold-600-primary); --featuredicons-icon-default-500: var(--colors-neutral-500); --featuredicons-background-error-light: var(--colors-red-50); --featuredicons-background-info-light: var(--colors-blue-50); --featuredicons-background-warning-light: var(--colors-yellow-50); --featuredicons-background-success-light: var(--colors-green-50); --featuredicons-background-brand-light: var(--colors-primary-sa-flag-50); --featuredicons-background-default-light: var(--colors-neutral-50); --featuredicons-icon-default-400: var(--colors-neutral-400); --featuredicons-icon-primary: var(--colors-primary-sa-flag-600-primary); --featuredicons-icon-primary-light: var(--colors-primary-sa-flag-50); --featuredicons-icon-primary-400: var(--colors-primary-sa-flag-400); --featuredicons-icon-neutral: var(--colors-neutral-700); --featuredicons-icon-neutral-light: var(--colors-neutral-50); --featuredicons-icon-secondary-light: var(--colors-secondary-gold-50); --featuredicons-icon-tertiary: var(--colors-tertiary-lavendar-500-primary); --featuredicons-icon-tertiary-light: var(--colors-tertiary-lavendar-50); --featuredicons-icon-success-light: var(--colors-green-50); --featuredicons-icon-info: var(--colors-blue-700); --featuredicons-icon-info-light: var(--colors-blue-50); --featuredicons-icon-warning: var(--colors-yellow-700); --featuredicons-bg-icon-warning-light: var(--background-warning-50); --featuredicons-bg-icon-error-light: var(--background-error-50); --featuredicons-bg-icon-brand-light: var(--colors-primary-sa-flag-50); --featuredicons-bg-icon-info-light: var(--background-info-50); --featuredicons-bg-icon-success-light: var(--background-success-50); --controls-control-icon-pressed: var(--icon-oncolor); --controls-control-icon-disabled: var(--colors-base-white); --notification-background-error-light: var(--colors-red-50); --notification-background-info-light: var(--colors-blue-50); --notification-background-warning-light: var(--colors-yellow-50); --notification-background-success-light: var(--colors-green-50); --notification-background-brand-light: var(--colors-primary-sa-flag-50); --notification-background-default-light: var(--colors-neutral-50); --notification-background-default-50: var(--background-neutral-50); --notification-background-success-50: var(--background-success-50); --notification-background-warning-50: var(--background-warning-50); --notification-background-error-50: var(--background-error-50); --notification-background-brand-50: var(--colors-primary-sa-flag-50); --notification-background-info-50: var(--background-info-50); --notification-background-default-25: var(--background-neutral-25); --notification-background-success-25: var(--background-success-25); --notification-background-warning-25: var(--background-warning-25); --notification-background-error-25: var(--background-error-25); --notification-background-brand-25: var(--background-primary-25); --notification-background-info-25: var(--background-info-25); --notification-text-success: var(--text-success); --notification-text-error: var(--text-error); --notification-text-info: var(--text-info); --notification-text-warning: var(--text-warning); --notification-text-brand: var(--text-primary); --controls-control-text-error: var(--text-error) --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, .05); --shadow-sm: 0px 1px 2px 0px rgba(16, 24, 40, .06), 0px 1px 3px 0px rgba(16, 24, 40, .1); --shadow-md: 0px 2px 4px -2px rgba(16, 24, 40, .06), 0px 4px 8px -2px rgba(16, 24, 40, .1); --shadow-lg: 0px 4px 6px -2px rgba(16, 24, 40, .03), 0px 12px 16px -4px rgba(16, 24, 40, .08); --shadow-xl: 0px 8px 8px -4px rgba(16, 24, 40, .03), 0px 20px 24px -4px rgba(16, 24, 40, .08); --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, .18); --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, .14); --spacing-0: 0px; --spacing-0-5: 2px; --spacing-1: 4px; --spacing-1-5: 6px; --spacing-2: 8px; --spacing-3: 12px; --spacing-4: 16px; --spacing-5: 20px; --spacing-6: 24px; --spacing-8: 32px; --spacing-10: 40px; --spacing-12: 48px; --spacing-16: 64px; --spacing-20: 80px; --spacing-24: 96px; --spacing-32: 128px; --spacing-40: 160px; --spacing-48: 192px; --spacing-56: 224px; --spacing-64: 256px; --spacing-96: 384px; --spacing-80: 320px; --spacing-120: 480px; --spacing-140: 560px; --spacing-160: 640px; --spacing-180: 720px; --spacing-192: 768px; --spacing-256: 1024px; --spacing-320: 1280px; --spacing-360: 1440px; --spacing-400: 1600px; --spacing-480: 1920px; --width-xxs: var(--spacing-80); --width-xs: var(--spacing-96); --width-sm: var(--spacing-120); --width-md: var(--spacing-140); --width-lg: var(--spacing-160); --width-xl: var(--spacing-192); --width-2xl: var(--spacing-256); --width-3xl: var(--spacing-320); --width-4xl: var(--spacing-360); --width-5xl: var(--spacing-400); --width-6xl: var(--spacing-480); --maxwidth-paragraph-max-width: var(--spacing-180); --ibmBold: "IBM Bold"; --ibmlight: "IBM Light"; --ibmmedium: "IBM Medium"; } .node--type-nbu-page.node--view-mode-full .menu--main .menu-item a { position: relative; padding: var(--spacing-sm) var(--spacing-xl) var(--spacing-md); display: block; color: var(--text-primary-paragraph); } .menu--main li.menu-item.Menu-item--expanded >a { background-color: var(--button-background-neutral-pressed); } .menu--main li.menu-item.menu-item--expanded .menu_link_content.menu-link-contentmain ul { padding: 0 var(--spacing-xl) 0 var(--spacing-md) !important; } .node--type-nbu-page.node--view-mode-full .menu--main li.menu-item.menu-item--expanded .menu_link_content.menu-link-contentmain ul li a { border-right: 2px solid var(--background-neutral-300); } .node--type-nbu-page.node--view-mode-full .menu--main li.menu-item.menu-item--expanded .menu_link_content.menu-link-contentmain ul li:hover:before { background: var(--background-neutral-400); content: ''; position: absolute; height: 100%; width: 3px; right: 0; } .node--type-nbu-page.node--view-mode-full .menu--main li.menu-item.menu-item--expanded .menu_link_content.menu-link-contentmain ul li:hover:before { background: var(--background-neutral-400); content: ''; position: absolute; height: 100%; width: 3px; right: 0; border-radius: var(--radius-full); } .node--type-nbu-page.node--view-mode-full .menu--main li.menu-item.menu-item--expanded .menu_link_content.menu-link-contentmain ul li:hover { background-color: var(--button-background-neutral-hovered);} .block-views-blocksub-site-media-subsite-latest-news { position: relative; } h1, h2, h3, h4, h5, h6{ margin: unset; } .regular{ font-family: var(--ibmregular); } .semibold{ font-family: var(--ibmsemibold); } .bold{ font-family: var(--ibmBold); } html body{ color:var(--text-default); font-size: 16px; line-height: 30px; font-family: var(--ibmregular); text-align: right; } table thead tr th:last-child { border-left: none; } .has-page-tabs.use-banner { background-image: url("/themes/custom/nbu/images/headerbg.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; width: 100%; padding: var(--spacing-5xl) 0 var(--spacing-3xl); } .has-page-tabs.use-banner .title, .has-page-tabs.use-banner .subsite{ color: var(--text-default); font-size: var(--display-sm); font-family: var(--ibmsemibold); } .blazy .media--blazy img.b-blur, .blazy .media--blazy img.media__element, .blazy .grid figure{ object-fit: cover!important; } .taxonomy-term--type-magazines.taxonomy-term--view-mode-teaser .field--type-entity-reference img{ width:100%; border-radius: var(--radius-md); } .node--type-news .info-wrapper .field--name-node-link{ padding: var(--spacing-md) var(--spacing-xl); background-color: var(--button-background-neutral-default); width: fit-content; border-radius: var(--radius-4); color: var(--text-default); } .node--type-news .info-wrapper .field--name-node-link a{ color: var(--text-default); } .node--type-news .info-wrapper .field--type-text-with-summary{ display: -webkit-box; --webkit-line-clamp: 2; --webkit-box-orient: vertical; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .node--type-news .info-wrapper .field--name-node-link:hover { background-color: var(--button-background-neutral-pressed); } /* new root - updated one to be used end */ body:not(.path-frontpage) .has-page-tabs.use-banner .content .title{ display:block; } .has-page-tabs.use-banner .block-page-accessories-block > .content{ display: none; } .custom-container, .custom-container-1260 { max-width: 1376px; display: flex; margin-inline: auto; width: 100%; } .rightSectionTools{ display:none; } .subsitebanner img { width: 13rem; } .digital-stamp-card { /* padding: .5rem 2rem; */ padding-top: 0.25rem; padding-bottom: 0.25rem; background: #F3F4F6; z-index: 100; position: relative; width: 100%; } .digital-stamp-card .digital-stamp-header { display: flex; align-items: center; gap: 10px; } .digital-stamp-card .digital-stamp-header h6 { margin: 0px; color: #161616; font-size: 14px; } .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card { cursor: pointer; } .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card span { color: #1B8354; font-size: var(--font-text-md-size); } .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card svg, .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card img { transition: 0.3s; } .digital-stamp-card .digital-stamp-header.open .btn-digital-stamp-card svg, .digital-stamp-card .digital-stamp-header.open .btn-digital-stamp-card img { transform: rotate(180deg); } .btn-digital-stamp-card img { margin-right: 4px; margin-left: 4px; } .digital-stamp-card .digital-stamp-body { padding-top: 40px; padding-bottom: 32px; display: none; max-width: 1376px; margin: auto; } .digital-stamp-card .digital-stamp-body .digital-stamp-container { margin-bottom: 32px; display: flex; gap: 32px; justify-content: space-between; } .digital-stamp-card .digital-stamp-body .digital-stamp-container .box { display: flex; align-items: flex-start; gap: 18px; } .digital-stamp-card .digital-stamp-body .digital-stamp-container .box .img-border-rounded { padding: 14px 16px; display: flex; align-items: center; justify-content: center; border: 1px solid #067647; border-radius: 100%; } .digital-stamp-card .digital-stamp-body .digital-stamp-container .box h6 { margin-top: 0px; margin-bottom: 12px; color: #161616; font-size: 18px; } .digital-stamp-card .digital-stamp-body .digital-stamp-container .box .green-text { color: #1B8354; } .digital-stamp-card .digital-stamp-body .digital-stamp-container .box p { margin: 0px; color: #384250; font-size: 16px; } .digital-stamp-card .digital-stamp-body .stamp-link-box { padding: 8px 28px; display: flex; align-items: center; gap: 12px; border-radius: 8px; background: #FFF; } .digital-stamp-card .digital-stamp-body .stamp-link-box p { margin: 0px; color: #161616; font-size: 16px; } .digital-stamp-card .digital-stamp-body .stamp-link-box a { color: #1B8354; font-size: 16px; text-decoration: underline; } .stamp-ar { direction: rtl; } .stamp-en { direction: ltr; } @media (max-width: 768px) { .digital-stamp-card { padding: 8px 16px; } .digital-stamp-card .digital-stamp-header { flex-wrap: wrap; } .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card { flex: 100%; } .digital-stamp-card .digital-stamp-body .digital-stamp-container { flex-direction: column; } [dir="ltr"] .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card { margin-right: 0px; } } @media(min-width:992px){ header li.nav-item.dropdown button.dropdown-toggle { padding: 0!important; } .path-frontpage .searchbox-container { top: 6.9rem!important; } .rightSectionTools{ display:flex; } .searchbox-container .search-box{ border-bottom-left-radius:2rem; border-bottom-right-radius:2rem; } .rightSectionTools ul{margin:0;display: flex;align-items: center;} header .navbar-collapse .navbar-nav .topSectionMenu{ align-items:center; display: flex; } .digital-stamp-card { position: relative; top:0; } } .subsitebanner { padding: 2rem 7rem; border-bottom: 1px solid #EAEAEA; background: url(/themes/custom/nbu/images/logoPattern.jpg); background-size: cover; background-repeat: no-repeat; } .bg-pattern-transparent{ background:none!important; } .row.region-footer-updated{ --bs-gutter-x:0; } footer .copyrightSection .stamps a:not(.visionLink) img { width: 11rem; margin-right: 1rem; } span.call-us { color: white; margin-bottom: 1rem; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; } span.call-us a, span.call-us a:visited{ color:white; margin:0 1rem; border-bottom:1px solid white; } footer .text-increase.active svg path:first-child{ display:none; height:0; width:0; } footer .text-increase.active svg:last-child{ position: relative; left: 0.2rem; } @font-face { font-family: "IBM Bold"; src: url("/themes/custom/nbu/fonts/ibmplex/IBMPlexSansArabic-Bold.ttf"); } @font-face { font-family: "IBM ExtraLight"; src: url("/themes/custom/nbu/fonts/ibmplex/IBMPlexSansArabic-ExtraLight"); } @font-face { font-family: "IBM Light"; src: url("/themes/custom/nbu/fonts/ibmplex/IBMPlexSansArabic-Light.ttf"); } @font-face { font-family: "IBM Medium"; src: url("/themes/custom/nbu/fonts/ibmplex/IBMPlexSansArabic-Medium.ttf"); } @font-face { font-family: "IBM Regular"; src: url("/themes/custom/nbu/fonts/ibmplex/IBMPlexSansArabic-Regular.ttf"); } @font-face { font-family: "IBM SemiBold"; src: url("/themes/custom/nbu/fonts/ibmplex/IBMPlexSansArabic-SemiBold.ttf"); } @font-face { font-family: "IBM Thin"; src: url("/themes/custom/nbu/fonts/ibmplex/IBMPlexSansArabic-Thin.ttf"); } body:not(.path-frontpage) .navbar-toggler svg path { stroke: #333; } .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: 1rem; } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: 1rem; } button,.btn:focus { box-shadow: none !important; } a.mobile-log-in { padding: 0.8rem 1rem; margin: 2rem auto 1rem; display: flex; align-items: center; width: 90%; border-radius: 1rem; border: 1px solid rgb(235, 235, 235); transition: 0.3s; background-image: url("/themes/custom/nbu/images/rectangle 1715.png"); background-repeat: no-repeat; background-size: 100%; cursor: pointer; color: inherit; } a.mobile-log-in .icon { height: 2.5rem; width: 2.5rem; border-radius: 100%; padding: 0.6rem; margin-left: 0.7rem; display: flex; align-items: center; justify-content: center; } header li.nav-item.dropdown .dropdown-menu { position: relative; /* top: 0rem; */ /* height: calc(100vh - 14rem); */ border: none; border-radius: 0; text-align: inherit; margin: 0; width: 100%; background-color: white; transition: var(--transition); overflow: hidden auto; padding: 0; z-index: 37; /* left: -200%; */ } header li.nav-item.dropdown .dropdown-menu.show { /* left: 0; */ } .closeMenu svg path { stroke: var(--icon-default); } header li.nav-item.dropdown { border-bottom: 1px solid rgb(0 0 0 / 15%); } .closeMenu { height: 40px; width: 40px; border: none; padding: 0.8rem; position: absolute; left: 1rem; top: 1rem; background-color: var(--background-neutral-50); display: flex; align-items: center; justify-content: center; z-index: 99; } header li.nav-item.dropdown.mega-menu .dropdown-menu .dpMenuContainer { display: flex; flex-wrap: wrap; width: 100%; } .headElement { display: flex; align-items: center; padding: 1.7rem 1rem; /* background-color: rgb(247, 247, 247); */ } .dpMenuContainer .headElement {display: none;} .headElement.active .menuHeader { transform: translateX(-1.5rem); } header li.nav-item.dropdown.mega-menu .dropdown-menu .dpMenuContainer .subMenu { position: absolute; background-color: white; height: calc(100vh - 15rem); width: 100vw; top: 0; left: -200%; overflow: hidden scroll; z-index: 6; } header li.nav-item.dropdown.mega-menu .dropdown-menu .dpMenuContainer .subMenu.show { left: 0; } header .back { height: 1.1rem; width: 1.1rem; transition: var(--transition); margin-left: 1rem; transform: translateY(-0.5rem); } header .navbar-nav>.topSectionMenu>.headElement .back { display: none; } header .back svg { height: 100%; width: 100%; object-fit: contain; } header li.nav-item.dropdown .dropdown-menu .dpMenuContainer { display: flex; flex-direction: column; padding: 0; } header li.nav-item.dropdown .dropdown-menu .dpMenuContainer li a { font-size: var(--text-sm); color: var(--text-default); font-family: var(--ibmRegular); padding: var(--spacing-md) var(--spacing-5xl) var(--spacing-md) var(--spacing-xl); border: none; width: 100%; display: block; /* border-bottom: 1px solid rgb(0 0 0 / 25%); */ position: relative; line-height: 24px; transition: none!important; } header li.nav-item.dropdown .subMenu li:last-child a { border: none; } header li.nav-item.dropdown .dropdown-menu .dpMenuContainer li a:hover { background-color: var(--button-background-neutral-hovered); } header li.nav-item.dropdown button.dropdown-toggle { width: 100%; text-align: inherit; padding: 0; font-family: var(--ibmsemibold); font-size: var(--text-sm); color: var(--text-default); padding: var(--spacing-md) var(--spacing-xl) var(--spacing-md) var(--spacing-5xl); } header li.nav-item.dropdown button.dropdown-toggle::after, header li.nav-item.dropdown.mega-menu .dropdown-menu .dpMenuContainer li a.dropdown-item::after { content: ""; border: 0; background-image: url("/themes/custom/nbu/images/header-chevron-black.svg"); height: 1rem; width: 1rem; background-repeat: no-repeat; background-size: 100%; background-position: left center; top: 50%; left: 1rem; position: absolute; transform: translateY(-50%); } header li.nav-item.dropdown.active button.dropdown-toggle::after, header li.nav-item.dropdown.mega-menu .dropdown-menu .dpMenuContainer li a.dropdown-item.active::after{ top:1.2rem; } header .navbar-collapse .navbar-nav { height: calc(1dvh* 92); width: 95%; left: 0; top: -5.5rem; bottom: 0; background-color: #ffffff; position: fixed; overflow: hidden auto; transition: .4s ease-in-out; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-8xl); transform: translateX(200%); opacity: 0; } header .navbar-collapse.show .navbar-nav{ transform: translateX(0%); opacity:1; } header .navbar-collapse .navbar-nav .topSectionMenu { top: 0; } .navbar-toggler { padding: 0rem; display: flex; align-items: center; justify-content: center; position: relative; z-index: 0; transition: none; } .navbar-toggler svg { height: 1.5rem; } .search-open .navbar-toggler svg path { stroke: rgb(137, 137, 137)!important; } .navbar-toggler svg path { stroke: rgb(137, 137, 137)!important; } .menuHeader .icon { transform: rotate(-90deg); position: absolute; left: 1rem; } .menuHeader { position: relative; transition: var(--transition); margin: 0; display: none; } .menuHeader h5 { width: 80%; } html { font-size: calc(1rem * var(--scale-factor)); } body:not(.path-frontpage) .nbuToolbar { background-color: var(--green); top: 0rem; left: 0; right: 0; height: 3.5rem; } body:not(.path-frontpage) .container.z-5 { max-width: 100%; margin: 0; padding-left: 1rem; padding-right: 1rem; } .region-mega-menu-updated { margin: 0 !important; --bs-gutter-x: 0; } .z-5 { z-index: 5; margin: auto; } .hearingaccessibility h5 { margin-bottom: 0 !important; } .hearingaccessibility { margin-bottom: 2rem; } .startFeature { border-radius: 1rem; transition: var(--transition); color: var(--green); border: 1px solid var(--green); padding: .3rem 1rem; } .startFeature:hover { border-color: var(--green); background-color: var(--green); color: white !important; } /* NEW FOOTER UPDATES START */ footer .special-toggles div.toggled, footer .special-toggles div.toggled:hover{ background-color: white; } footer .special-toggles .text-increase.toggled svg path:first-child, footer .special-toggles .sound.toggled svg path{ stroke: var(--green); } footer .special-toggles .text-increase.toggled svg path:last-child, footer .special-toggles .sign.toggled svg path, footer .special-toggles .color-filters.toggled svg path{ fill: var(--green); } footer .special-toggles .sign.toggled span{ color: black; } footer .special-toggles, footer .socialIcons-footer, footer .Apps{ display: flex !important; } footer .special-toggles div:not(:last-child), footer .socialIcons-footer a:not(:last-child), footer .Apps a:not(:last-child){ margin-left: .6rem; } footer .special-toggles div:hover, footer .socialIcons-footer a:hover{ background-color: rgba(255,255,255,.2); } footer .text-increase, footer .sound, footer .color-filters, footer .socialIcons-footer a{ width: 2.8rem; height: 2.8rem; padding: .7rem; outline: 1px solid #466F57; border-radius: 50%; cursor: pointer; display: flex; justify-content:center; transition: .3s all ease; } footer .sign{ width: auto; height: 2.8rem; display: flex; align-items: center; padding: .8rem .8rem .8rem 1rem; outline: 1px solid #466F57; border-radius: 2rem; cursor: pointer; transition: .3s all ease; } footer .sign svg{ height: 1.5rem; width: auto; } footer .sign span{ color: white; font-size: .9rem; margin-right: .6rem; min-width: max-content; display: none; } footer .special-toggles div:not(:last-child) svg, footer .socialIcons-footer svg, footer .Apps a img{ width: auto; height: auto; } footer .socialIcons-footer svg, footer .Apps a img{ width: 100%; height: 100%; object-fit: contain; } footer .quickLinks:last-child .accessibility, footer .quickLinks:last-child .contacts-us, footer .quickLinks:last-child .DownloadApp{ margin-bottom: .8rem; } footer .quickLinks .DownloadApp a:hover{ filter: brightness(1.5); } /* NEW FOOTER UPDATES END */ .footerQuicklinks { flex-direction: column; align-items: center; flex-wrap: wrap; justify-content: center; width: 100%; opacity: 0; transform: translateX(-100%); } .footerQuicklinks a:first-child { padding-right: 0; } .footerQuicklinks a { padding: 0 .5rem; font-size: .8rem; color: white; border-left: 2px solid rgb(255 255 255 / 46%); } .footerQuicklinks a:last-child { border-left: none; } .footerQuicklinks a:hover { color: rgb(255 255 255 / 70%) !important; } @font-face { font-family: Avenir-Medium; src: url("/themes/custom/nbu/fonts/alfont_com_AlFont_com_Avenir-Medium.otf"); font-display: swap; } @font-face { font-family: "Neo Regular"; src: url("/themes/custom/nbu/fonts/Neo-Sans-Regular.ttf"); font-display: swap; } @font-face { font-family: "Neo Bold"; src: url("/themes/custom/nbu/fonts/Neo-Sans-Bold.ttf"); font-display: swap; } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 1; transform: translateY(0%); } } @keyframes fadeUp { 0% { opacity: 0; transform: translateY(100%); } 100% { opacity: 1; transform: translateY(0%); } } @keyframes fadeupFirstWave { 0% { opacity: 0; transform: translateY(100%); } 100% { opacity: 0.6; transform: translateY(0px); } } @keyframes fadeupSecondWave { 0% { opacity: 0; transform: translateY(100%); } 100% { opacity: 0.8; transform: translateY(0px); } } @keyframes fadeupThirdWave { 0% { opacity: 0; transform: translateY(100%); } 100% { opacity: 0.8; transform: translateY(0px); } } @keyframes fadeupFourthWave { 0% { opacity: 0; transform: translateY(100%); } 100% { opacity: 0.4; transform: translateY(0px); } } @keyframes fadeup { 0% { opacity: 0; transform: translateY(100%); } 100% { opacity: 1; transform: translateY(0%); } } @keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes moveUpAndDown { 0% { transform: translateY(0px); } 50% { transform: translateY(-50px); } 100% { transform: translateY(0px); } } @keyframes moveUpAndDownOpposite { 0% { transform: translateY(0px); } 50% { transform: translateY(50px); } 100% { transform: translateY(0px); } } @keyframes fadeRight { 0% { opacity: 0; transform: translateX(100%); } 100% { opacity: 1; transform: translateX(0px); } } @keyframes fadeLeft { 0% { opacity: 0; transform: translateX(-100%); } 100% { opacity: 1; transform: translateX(0px); } } @keyframes dropdown-menu-anim { 0% { transform: translateY(-3rem); opacity: 0; } 100% { transform: translateY(0px); opacity: 1; } } a, a:hover { text-decoration: none; } .overlayShadow { position: fixed; height: 100%; width: 100%; /* background-color: rgba(0, 0, 0, 0.7); */ z-index: 5; display: none; } .mobileOverlay { position: fixed; height: calc(100% - 4rem); width: 100%; background-color: rgba(0, 0, 0, 0.63); z-index: 7; display: none; } .achromatopia.color { filter: grayscale(1); } html.protanopia { filter: url("#protanopia"); } html.deuteranopia { filter: url("#deuteranopia"); } html.tritanopia { filter: url("#tritanopia"); } html.achromatopia { filter: grayscale(100%); } .nbuToolbar { background-color: transparent; border-top: none; position: absolute; opacity: 0; transform: translateY(-100%); z-index: 5; top: 3rem; justify-content: space-between !important; width: 100%; left: 0; right: 0; transition: var(--transition); animation: 1s fadeInDown forwards; } .nbuToolbar>.container { border: 1px solid rgb(255 255 255 / 25%); padding: 0; border-top: none; } #page .header { position: relative; box-shadow: rgba(25, 25, 25, 0.05) 0px 10px 15px; z-index: 2; background-color: white; } header.scroll, body:not(.path-frontpage) #page header.scroll { position: fixed; z-index: 3; background-color: white; animation: 0.7s ease 0s 1 normal forwards running fadeInDown; box-shadow: rgba(25, 25, 25, 0.05) 0px 10px 15px; top: 0rem; } body:not(.path-frontpage) #page header { position: relative; top: 0; background-color: white; } header .navbar{ flex-wrap:nowrap; } header.search-open { background-color: white; /* z-index: 7; */ } .nbuToolbar.search-open { z-index: 8; background-color: var(--green); } .nbuToolbar .tools .language { cursor: pointer; color: #ffffff; padding: 1rem; background-color: transparent; transition: var(--transition); } .nbuToolbar .tools .accessibility { border-left: 1px solid rgb(255 255 255 / 25%); } .nbuToolbar .tools .accessibility, .nbuToolbar .user { cursor: pointer; color: #FFFFFF; background-color: transparent; padding: 0.7rem 0px; transition: var(--transition); height: 100%; width: 3.1rem; border-top: none; border-bottom: none; border-right: 1px solid rgb(255 255 255 / 25%); border-left: none; } .nbuToolbar .user { width: fit-content; padding: 0.7rem 1rem; } .nbuToolbar .user .icon { color: #FFFFFF; width: unset; } .nbuToolbar .user .dropdown-toggle { display: flex; align-items: center; padding: 0; } .nbuToolbar .user .dropdown-toggle .icon { height: 2.5rem; width: 2.5rem; border-radius: 100%; } .nbuToolbar .user .dropdown-toggle .icon img { border-radius: 100%; height: 100%; width: 100%; object-fit: cover; } .nbuToolbar .tools .accessibility img { padding: 0rem 1rem; } .nbuToolbar .tools .accessibility:hover img { border-right: 1.7px solid transparent; } .nbuToolbar .tools .language:hover, .nbuToolbar .tools .accessibility:hover, .nbuToolbar .user:hover { background-color: var(--lightGreen); } .nbuToolbar .tools .language .icon { height: 1rem; width: 1rem; } .nbuToolbar .tools .language span, .nbuToolbar .user span { color: var(--white); margin-right: 0.5rem; } .nbuToolbar .user img { height: 2rem; width: 2rem; } header { position: relative; width: 100%; z-index: 101; top: 0rem; left: 0; right: 0; background-color: transparent; /* opacity: 0; transform: translateY(-100%); */ border-bottom: 1px solid rgb(255 255 255 / 25%); transition: var(--transition); background-color: white; padding: 0.5rem 1rem; } header .navbar .navbar-brand { width: 13.2rem; margin: 0px; padding: 0; margin-left: 0rem; } header.scroll .universityLogo, header.scroll .navbar .navbar-brand img.accreditedLogo, header.search-open .universityLogo, header.search-open .navbar .navbar-brand img.accreditedLogo, body:not(.path-frontpage) #page header .universityLogo, body:not(.path-frontpage) #page header .navbar .navbar-brand img.accreditedLogo { display: none; } header .universityLogo.coloredLogo, header .navbar .navbar-brand img.accreditedLogo.coloredLogo { display: none; } header.scroll .universityLogo.coloredLogo, header.scroll .navbar .navbar-brand img.accreditedLogo.coloredLogo, header.search-open .universityLogo.coloredLogo, body:not(.path-frontpage) #page header .universityLogo.coloredLogo { display: flex; } header .navbar .navbar-brand img { object-fit: contain; width: fit-content; } header .navbar .navbar-brand img { height: 100%; width: 100%; object-fit: contain; } header .navbar .navbar-brand img.universityLogo{ display:none; } header .navbar .navbar-brand img.universityLogo.coloredLogo{ display:inline-block!important; } header .navbar .navbar-brand img.accreditedLogo { border-right: 1px solid rgba(255, 255, 255, 0.3); display: none; padding-right: 0.8rem; } header.scroll .navbar .navbar-brand img.accreditedLogo, header.search-open .navbar .navbar-brand img.accreditedLogo, body:not(.path-frontpage) #page header .navbar .navbar-brand img.accreditedLogo { border-right: 1px solid rgba(0, 0, 0, 0.2); } header .navbar .navbar-nav .nav-item .nav-link { color: rgb(255, 255, 255, 0.8); transition: var(--transition); padding: 0; } header .navbar .navbar-nav .nav-item .nav-link:hover { color: rgba(255, 255, 255) !important; } header.scroll .navbar .navbar-nav .nav-item .nav-link:hover, header.search-open .navbar .navbar-nav .nav-item .nav-link:hover, body:not(.path-frontpage) #page header .navbar .navbar-nav .nav-item .nav-link:hover { color: black !important; } header .navbar .search { height: 100%; position: relative; border: none; } header .navbar .mainmenu { margin: 0; margin-right: 0.6rem; padding: 0; padding: 1rem; display: flex; align-items: center; justify-content: center; } header .navbar .mainmenu svg { height: 1.4rem; } header .navbar .search svg { /* height: 1.7rem; */ transition: var(--transition); } header .mainmenu svg path { transition: var(--transition); } header .mainmenu:hover svg path { stroke: rgba(255, 255, 255, 0.8); } header .navbar .search svg path { transition: var(--transition); stroke: hsl(0deg 0% 0% / 80%); stroke-width: 2px; } header.scroll .search svg path, header.scroll .mainmenu svg path, header.search-open .search svg path, header.search-open .mainmenu svg path, body:not(.path-frontpage) #page header .mainmenu svg path { stroke: rgb(71, 71, 71); } header.scroll .search:hover svg path, header.scroll .mainmenu:hover svg path, header.search-open .search:hover svg path, header.search-open .mainmenu:hover svg path, body:not(.path-frontpage) #page header .search:hover svg path, body:not(.path-frontpage) #page header .mainmenu:hover svg path { stroke: black; } .closeSubMenu { transform: scaleX(1) !important; } .closeSubMenu svg polyline { stroke: var(--lightGreen); } .accessibilityMenu { border-top-left-radius: 2rem; border-top-right-radius: 2rem; position: fixed; top: 3rem; bottom: 4rem; right: -100%; height: calc(100% - 4rem); width: 100%; z-index: 5; transition: 0.6s ease-in-out; background-color: white; } .accessibilityMenu.active { opacity: 1; right: 0; z-index: 7; } .accessibilityMenu .topsection { background: url("/themes/custom/nbu/images/header.webp") center center / cover no-repeat, var(--green); border-top-left-radius: 0rem; padding: 3rem 3rem 4rem; width: 100%; } .accessibilityMenu .topsection h4 { position: relative; display: block; color: white; width: fit-content; } .accessibilityMenu .menuBody { background-color: white; border-top-left-radius: 2rem; border-top-right-radius: 2rem; height: 100%; width: 100%; padding: 2rem 2rem 0px; position: relative; bottom: 2rem; margin: auto; } .accessibilityMenu .closeMenu { position: absolute; left: 2rem; top: 2.3rem; height: 2.8rem; width: 2.8rem; padding: 1rem; border-radius: 100%; border: none; color: #ffffff; background-color: var(--green); } .accessibilityMenu .accContainer { overflow: auto; height: 100%; } .accesibilityMenu .menubodyCont { background-color: white; } .accessibilityMenu .menuBody .sectionsubTitle { margin-bottom: 2rem; } .accessibilityMenu .menuBody .sectionsubTitle .icon { height: 2.4rem; width: 2.4rem; margin-left: 1rem; } .accessibilityMenu .menuBody .sectionsubTitle .icon img { height: 100%; width: 100%; object-fit: contain; } .accessibilityMenu .menuBody .col-sm-6 .card .card-img-top { border-radius: 1rem; height: 100%; } .accessibilityMenu .menuBody .col-sm-6 .card.active::after { content: ""; background-image: url("/themes/custom/nbu/images/group 131.png"); height: 2rem; width: 2rem; position: absolute; left: 0.5rem; top: 0.5rem; background-size: 100%; background-repeat: no-repeat; background-position: left center; } .accessibilityMenu .menuBody .col-sm-6 .card .card-img-top img { height: 100%; width: 100%; object-fit: cover; transition: var(--transition); } .accessibilityMenu .menuBody .col-sm-6 .card:hover .card-img-top img { transform: scale(1.1); } .accessibilityMenu .menuBody .col-sm-6 .card .card-img-overlay { background: linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.68)); border-radius: 1rem; background: linear-gradient(180deg, transparent 30%, rgba(0 0 0 /91%)80%); } .accessibilityMenu .menuBody .col-sm-6 .card .card-img-overlay h6 { margin-bottom: 0px; color: white; } .accessibilityMenu .menuBody .col-sm-6:nth-child(2n+1) { padding-right: 0px; } .accessibilityMenu .menuBody .col-sm-6:nth-child(2n+2) { padding-left: 0px; } .accessibilityMenu .menuBody .card { margin-bottom: 1rem; height: 100%; cursor: pointer; overflow: hidden; } .fontsize .fsizeSlider { width: 100%; margin-bottom: 2rem; } .fontsize .fsizeSlider span:last-child { font-size: 1.5rem; } .shortcutContainer { height: 21rem; width: 21rem; border: 2px solid rgb(227, 227, 227); background-color: transparent; position: fixed; z-index: 6; border-radius: 100%; padding: 3rem; right: -100%; top: 8%; transition: 0.3s ease-in-out; } .shortcutContainer.visible { right: -55%; } .quicklaunchContainer { position: fixed; right: -3.5rem; top: 25%; z-index: 5; height: 5.9rem; width: 5.9rem; opacity: 0; transform: translateX(100%); animation: 1s ease 0s 1 normal forwards running fadeRight; border-radius: 100%; overflow: hidden; } .quickLanchMenu { background-color: var(--green); transition: var(--transition); height: 100%; width: 100%; } .quickLanchMenu:hover { background-color: var(--yellowGreen); } .quicklaunchContainer.active { z-index: 7; } .quicklaunchContainer.active .quickLanchMenu { background-color: var(--yellowGreen); } .quickLanchMenu svg.closeQuickLaunch { display: none; height: 1.3rem; width: 1.3rem; left: -1.5rem; } .quickLanchMenu svg { height: 3.2rem; width: 3.5rem; position: relative; left: -1.6rem; } .quickLaunchItems a.item .icon { height: 3.5rem; width: 3.5rem; padding: 0.7rem; border-radius: 100%; border: 4px solid rgb(227, 227, 227); background-color: white; position: absolute; transition: var(--transition); } .quickLaunchItems a.item { margin-bottom: 3rem; opacity: 0; transition: 1s ease-in-out 0.2s; } .quickLaunchItems a.item:hover .icon, .quickLaunchItems a.item:hover span { background-color: rgb(241, 241, 241); } .quickLaunchItems a.item:hover span { color: var(--lightGreen); } .shortcutContainer.visible .quickLaunchItems a.item:nth-child(1) { transform: translateX(-95%); opacity: 1; } .shortcutContainer.visible .quickLaunchItems a.item:nth-child(2) { transform: translateX(-108%); opacity: 1; } .shortcutContainer.visible .quickLaunchItems a.item:nth-child(3) { transform: translateX(-95%); opacity: 1; } .quickLaunchItems a.item .icon img { height: 100%; width: 100%; object-fit: contain; } .quickLaunchItems a.item span { border-radius: 2rem; padding: 0.8rem 4.7rem 0.8rem 1.7rem; background-color: rgb(247, 247, 247); color: rgb(71, 71, 71); white-space: nowrap; transition: var(--transition); } footer { overflow-x: hidden; background: #074d31; padding-top: 2rem; border-top-left-radius: 2rem; border-top-right-radius: 2rem; position: relative; } footer>div, footer .footerContainer { width: 100%; } footer .region.region-footer-updated { width: 100%; } footer .downloadApp { width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding: 0px 1rem; margin-bottom: 2rem; opacity: 0; transform: translateX(-100%); } footer .downloadApp .collapse { border: none; } footer .downloadApp .category { border: none; } footer h5.category { color: var(--white); font-family: var(--ibmBold); position: relative; margin-bottom: 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.5); padding: 1.2rem 0rem; width: 100%; white-space: nowrap; font-size: .95rem; } footer h5.category span { color: #FFFFFF; } footer h2 { color: #FFFFFF; } footer .collapse { border-bottom: 1px solid rgba(255, 255, 255, 0.3); display: block !important; } footer h5.category .icon { transition: var(--transition); height: 1rem; width: 1rem; } footer h5.category .icon svg { height: 100%; width: 100%; object-fit: contain; } footer h5.category[aria-expanded="true"] .icon { transform: rotate(180deg) translateY(-0.4rem); } footer .quickLinks .footerLink { display: block; color: rgba(255, 255, 255, 1); margin: .8rem 0px; transition: var(--transition); font-size: .9rem; } footer .quickLinks .footerLink:hover { color: rgba(255, 255, 255, .8) !important; } footer .quickLinks { width: 100%; padding: 0px 0rem; } footer .apple:hover, footer .android:hover { background-color: rgba(255, 255, 255, 0.1); } footer .apple { margin: 0.9rem 0; display: inline-block; height: auto; width: 49%; color: #FFFFFF; transition: var(--transition); } footer .android { border: 1px solid rgba(255, 255, 255, 0.2); padding: 0.6rem 0.8rem; margin-right: 0.4rem; border-radius: 0.6rem; display: inline-block; height: auto; width: 49%; color: #FFFFFF; transition: var(--transition); } footer .apple img, footer .android img { object-fit: cover; height: 100%; width: 100%; } footer .logo { width: 100%; color: #FFFFFF; padding: 0px 1rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.3); } footer .logo img { padding: 0px 0.7rem; } footer .logo img:first-child { padding-right: 0px; width: 11rem; } footer .logo img:nth-child(2) { border-right: 1px solid rgba(255, 255, 255, 0.3); height: 3rem; width: 5rem; } footer .socialIcons { margin-top: 2rem; position: absolute; bottom: 7rem; z-index: 17; right: 50%; transform: translateX(50%); } footer .socialIcons a.socialIcon { margin: 0px 0.3rem; position: relative; border-radius: 100%; padding: 0.7rem; height: 2.5rem; width: 2.5rem; display: flex; align-items: center; justify-content: center; transition: var(--transition); background-color: var(--green); } footer .socialIcons .socialIcon.facebook, footer .socialIcons .socialIcon:first-child { padding: 0.85rem; } footer .socialIcons .socialIcon.facebook:hover { background-color: rgb(11, 86, 45); } footer .socialIcons .socialIcon.instagram { background: linear-gradient(to left, rgb(12, 102, 53), rgba(101, 157, 65, 0.3)); } footer .socialIcons .socialIcon.instagram:hover { background: linear-gradient(to left, rgb(10, 79, 41), rgba(87, 137, 56, 0.3)); } footer .socialIcons .socialIcon.snapchat { background: linear-gradient(to left, rgb(12, 102, 53), rgba(101, 157, 65, 0.6)); } footer .socialIcons .socialIcon.snapchat:hover { background: linear-gradient(to left, rgb(10, 79, 41), rgba(87, 137, 56, 0.6)); } footer .socialIcons .socialIcon.linkedin { background-color: rgb(101, 157, 65); } footer .socialIcons .socialIcon.twitter-x { background-color: rgb(101, 157, 65); } footer .socialIcons .socialIcon.linkedin:hover, footer .socialIcons .socialIcon.twitter-x:hover { background-color: rgb(101, 145, 73); } footer .uniSocialIcons { width: 100%; opacity: 0; transform: translateX(-100%); } footer .copyrightSection { background-color:#074d31; padding-top: 1rem; padding-bottom: 1rem; flex-wrap: wrap; } a.visionLink { width: 5rem; margin-left:1rem; } a.visionLink img{ height:100%; width:100%; object-fit:contain; } footer .copyrightSection .stamps { color: #FFFFFF; } footer .copyrightSection .stamps img { opacity: 0; color: #ffffff; transform: translateX(-100%); } footer .copyrightSection .stamps a { color: #ffffff; } footer .copyrightSection .stamps>img { margin-left: .5rem; height: 2.5rem; width: auto; } footer .copyrightSection .copyrightText { color: white; margin: 0px; padding: 0rem 0px 1rem; text-align: center; font-size:.85rem; } .fontsize .slider { position: relative; height: 2rem; width: 100%; margin: 0px 1rem; } .fontsize .track { width: calc(100% - 14px); position: relative; padding: 0px; top: 50%; transform: translateY(-50%); } .fontsize .ticks { display: flex; justify-content: space-between; } .fontsize .tick { width: 0.7rem; height: 0.7rem; background: var(--lightGrey); border-radius: 50%; } .fontsize .groove { height: 2px; background: var(--lightGrey); position: absolute; width: calc(100% + 0px); left: 0px; top: 50%; transform: translateY(-50%); } .fontsize input { position: absolute; appearance: none; background: none; width: 100%; height: 100%; margin: 0px; padding: 0px; top: 0px; left: 0px; border: none; } .fontsize input::-webkit-slider-thumb { appearance: none; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: yellowgreen; position: relative; left: -0.6rem; transition: var(--transition); } .accessibilityTools { height: 4rem; width: 100%; } .accessibilityTools button { background-color: rgb(247, 247, 247); padding: 0.7rem 1rem; display: flex; align-items: center; border: none; font-size: 1.1rem; height: 100%; } .accessibilityTools button.active { background-color: rgb(228, 228, 228); } .accessibilityTools .accessibility { padding: 1rem; width: 20%; } .accessibilityTools .accessibility svg { height: 100%; width: 100%; } .accessibilityTools .selectedLanguage { width: 80%; border-left: 1.5px solid rgba(0, 0, 0, 0.1); } .languages-popup { position: fixed; bottom: 0px; right: 1rem; display: none; flex-direction: column; align-items: flex-start; border-radius: 0.5rem; background-color: white; margin: auto; transform: translateY(100%); opacity: 0; transition: 0.3s ease-in-out; z-index: 8; width: 80% !important; } .languages-popup.active { transform: translateY(-5rem); opacity: 1; display: flex !important; } .languages-popup .languages-popup-header { font-size: 1.3rem; padding: 1rem 2rem; border-bottom: 1px solid lightgrey; width: 100%; } .languages-popup .languages-list { padding: 1rem; width: 100%; } .languages-popup .languages-list a.language { display: flex; align-items: center; margin-bottom: 1rem; position: relative; transition: 0.3s ease-in-out; border-radius: 0.7rem; padding: 1rem; color: black; } .languages-popup .languages-list a.language.active { background-color: rgb(249, 249, 249); } .languages-popup .languages-list a.language.active::before { content: ""; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); background-image: url("/themes/custom/nbu/images/tick.svg"); background-repeat: no-repeat; background-position: center center; background-size: 100%; height: 1rem; width: 1rem; } .col-md-6, .col-lg-3, .col-lg-4 { padding: 0px 1rem; } .searchbox-container { position: absolute; top: 3.9rem; left: 0px; right: 0px; width: 100%; height: 100%; z-index: 6; display: none; border-top: none; animation: 1s ease 0s 1 normal none running dropdown-menu-anim; overflow: hidden; padding: 0; background-color: rgba(0,0,0,0.7); } .path-frontpage .searchbox-container { top: 8.5rem; } form.searchbox-container.scroll.container { margin: 0; max-width: 100%; top: 5.7rem; } .searchbox-container.show { display: flex; } .searchbox-container .search-box { display: flex; align-items: center; background-color: white; padding: 1rem; justify-content: space-between; width: 100%; height: fit-content; z-index: 1; position: relative; } .searchbox-container .search-box input { background-color: transparent; border: none; outline: none; font-size: 1rem; } .searchbox-container .search-box input:focus::placeholder { color: transparent; } .searchbox-container .search-box button, .searchbox-container .search-box .close-search { padding: 1rem; margin: 0px 1.2rem 0px 0px; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 50%; background-color: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; } .searchbox-container .search-box button span{ color: black!important; } .searchbox-container .search-box button svg, .searchbox-container .search-box .close-search svg { height: 1rem; width: 1rem; } header li.nav-item.dropdown:not(.active):hover, header .rightSectionTools li.nav-item:not(.active):hover{ background-color: var(--button-background-neutral-default); } header li.nav-item.dropdown:not(.active):hover::after, header .rightSectionTools li.nav-item:not(.active):hover::after{ content:""; height: 6px; background-color: var(--background-neutral-400); width: 100%; /* border-top-left-radius: 1rem; border-top-right-radius: 1rem; */ position: absolute; bottom: 0rem; border-radius: var(--radius-full); width: 90%; left: 50%; transform: translateX(-50%); } header .rightSectionTools li.nav-item:not(.active) a:hover, header .rightSectionTools .search svg path{ color: unset !important; stroke: unset!important; } header .rightSectionTools li.nav-item{ transition: .3s all ease; } header li.nav-item.dropdown .dropdown-menu.show .dpMenuContainer a:hover{ text-decoration: underline; } header li.nav-item.active { background-color: var(--button-background-neutral-pressed); } header li.nav-item.active::after{ background-color: var(--background-neutral-800); } @media (min-width: 375px) { .accessibilityMenu .menuBody .col-sm-6 { padding: 0px 0.5rem; height: 7rem; margin-bottom: 1rem; width: 50%; } } @media (min-width: 768px) { header .navbar .navbar-brand img.accreditedLogo { display: block; } .quicklaunchContainer { top: 20%; } .quickLanchMenu svg { height: 4.2rem; width: 2.3rem; } } @media (min-width: 992px) { header .navbar .navbar-nav .rightSectionTools .nav-item { padding: var(--spacing-3xl) var(--spacing-2xl)!important; } .searchbox-container .search-box button span{ color: white!important; } header li.nav-item.dropdown button.dropdown-toggle::after, header li.nav-item.dropdown.mega-menu .dropdown-menu .dpMenuContainer li a.dropdown-item::after{ left: unset; filter: unset; } body:not(.path-frontpage) .searchbox-container { top: 5rem; padding: 0; } .searchbox-container .search-box button{ background-color: #1B8354; color: white; height: unset; width: fit-content; border-radius: .5rem; padding: 0.5rem 2.8rem; } .searchbox-container .search-box .close-search{ position:absolute; top: 0.1rem; left: 4rem; border:none; margin: 0; padding: 0; } .searchbox-container .search-box .close-search svg path{ stroke:#161616; } .searchbox-container .search-box input{ width:100%; border:1px solid #9DA4AE; padding: .5rem 1rem; padding-right: 2.6rem; border-radius: 0.2rem; } #collapsibleNavbar{ justify-content:space-between!important; margin: 0; padding: 0; } footer .quickLinks:first-child{ padding-right: 0; } span.call-us { position: absolute; bottom: 9rem; } body:not(.path-frontpage) .region-mega-menu-updated { height: 5rem; } header li.nav-item.dropdown .dropdown-menu { box-shadow: var(--shadow-lg); position: fixed; left: 0; } body:not(.path-frontpage) header li.nav-item.dropdown button.dropdown-toggle::after { background-image: url("/themes/custom/nbu/images/header-chevron-black.svg"); } header.search-open li.nav-item.dropdown.active button.dropdown-toggle::after, body.path-frontpage header li.nav-item.dropdown.active button.dropdown-toggle::after { transform:scale(-1); top:41%; } header li.nav-item.dropdown .dropdown-menu .dpMenuContainer { padding: 2rem 0; } header li.nav-item button:not(.dropdown){ min-width: fit-content; font-size: var(--text-md); color: var(--text-default); font-family: var(--ibmRegular); } header li.nav-item.active button svg, header li.nav-item.active button img{ filter: brightness(0) saturate(100%) invert(96%) sepia(96%) saturate(0%) hue-rotate(75deg) brightness(105%) contrast(104%); } header li.nav-item::after { content: ""; height: 6px; background-color: transparent; width: 100%; position: absolute; bottom: 0rem; border-radius: var(--radius-full); width: 90%; left: 50%; transform: translateX(-50%); } header li.nav-item.dropdown.mega-menu .dropdown-menu .dpMenuContainer li a.dropdown-item::after { display: none; } header li.nav-item.dropdown.mega-menu .dropdown-menu .dpMenuContainer li a.dropdown-item, header li.nav-item.dropdown.mega-menu .dropdown-menu .dpMenuContainer li h4.dropdown-item { color: var(--text-primary); font-size: var(--text-lg); line-height: 28px; border: none; font-family: var(--ibmBold); background-color: transparent !important; padding:0 var(--spacing-xl); } header li.nav-item.dropdown .dropdown-menu .dpMenuContainer li a { padding: var(--spacing-md) var(--spacing-xl); border-radius:var(--radius-md); } .searchbox-container.scroll { top: 5.8rem; padding: 0; } /* NEW MENU START */ body.path-frontpage header li.nav-item.dropdown button.dropdown-toggle::after { background-image: url("/themes/custom/nbu/images/header-chevron-black.svg"); } header.scroll .navbar .navbar-nav .nav-item.dropdown button:after { background-image: url("/themes/custom/nbu/images/svg/navArrowGreen.svg"); } header li.nav-item.dropdown .dropdown-menu { /* border-top: 0.5px solid rgb(0 0 0 / 10%); */ height: auto; top: 4.5rem; /* border-bottom-left-radius: 2rem; border-bottom-right-radius: 2rem; */ } .headElement { padding: 0; display: none; } header li.nav-item.dropdown .dropdown-menu .dpMenuContainer { flex-direction: row; flex-wrap: wrap; } header li.nav-item.dropdown .dropdown-menu .dpMenuContainer li { width: 31%; padding: 0 1rem; } header li.nav-item.dropdown.mega-menu .dropdown-menu .dpMenuContainer li a.dropdown-item { width: fit-content; } header li.nav-item.dropdown.mega-menu .dropdown-menu .dpMenuContainer .subMenu { position: relative; height: auto; width: 100%; overflow: hidden; padding: 0; left: 0; padding-left:1rem; } header li.nav-item.dropdown.mega-menu .dropdown-menu .dpMenuContainer .subMenu li a, header li.nav-item.dropdown .dropdown-menu .dpMenuContainer li a { border: none; } header li.nav-item.dropdown { border-bottom: none; /* padding: 0; */ padding-left: calc(var(--spacing-xl) + var(--spacing-xl))!important; } header li.nav-item.dropdown button { /* color: rgb(0 0 0/ 80%); */ } header li.nav-item.dropdown button:hover { color: rgb(0 0 0 ); } header li.nav-item.dropdown button.dropdown-toggle::after { transform: translateY(50%); margin-right: var(--spacing-xs); top: 50%; transform: translateY(-50%); } header li.nav-item.dropdown.mega-menu .dropdown-menu .dpMenuContainer { display: grid; grid-template-columns: repeat(5, 1fr); padding-top: 2rem; padding-bottom: 2rem; padding: var(--spacing-4xl) 0; max-width: var(--container-max-width-desktop); margin: auto; } header li.nav-item.dropdown .dropdown-menu.show .dpMenuContainer { /* animation: 1s dropdown-menu-anim forwards; */ } header li.nav-item.dropdown.mega-menu .dropdown-menu .dpMenuContainer li { width: 100%; padding: 0; } header .mainMenu.megaMenu li.menuItem>a { background: none; } header .navbar .navbar-nav .nav-item .nav-link svg { transform: rotate(0deg); margin: 0 .3rem; height: 0.6rem; width: 0.6rem; } header .navbar .navbar-nav .nav-item .nav-link svg path { stroke: #fff; } .mainMenu ul { padding: 0; position: relative; height: fit-content; width: auto; background-color: transparent; z-index: 1; opacity: 1; transform: translateX(0); transition: none; } header .mainMenu.megaMenu li.menuItem>a { color: var(--green); font-family: var(--ibmBold); border: none; } .mainMenu.megaMenu .mainMenuContainer { display: flex; flex-wrap: wrap; flex-direction: row; width: 100%; justify-content: space-between; } .mainMenu .mainMenuContainer { display: grid; grid-template-columns: repeat(4, 1fr); } .mainMenu { position: fixed; top: 4.7rem; width: 100%; height: max-content; background-color: rgb(255 255 255 / 95%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); display: none; padding-top: 2rem; padding-bottom: 2rem; transform: none; opacity: 1; transition: none; } header .navbar .navbar-nav { padding: 0; height: auto; background-color: transparent; width: 100%; position: relative; transform: none; left: 0; overflow: unset; flex-direction: row; justify-content: space-between; align-items: center; transform: none!important; opacity: 1!important; top: unset; } header .navbar .navbar-nav .topSectionMenu>ul { display: flex; margin-bottom: 0; align-items: center; } header.scroll .universityLogo.coloredLogo, header.scroll .navbar .navbar-brand img.accreditedLogo.coloredLogo, header.search-open .universityLogo.coloredLogo, header.search-open .navbar .navbar-brand img.accreditedLogo.coloredLogo, body:not(.path-frontpage) #page header .universityLogo.coloredLogo { display: flex; } .menuHeader .icon { display: none; } header .navbar .mainmenu { margin-right: 0rem; height: 100%; width: unset; padding: 1.5rem 1.23rem; } header.scroll { padding: 0.5rem 7rem; } header .navbar .navbar-nav .nav-item .nav-link { padding: 1rem 1rem 1.6rem; border-top-left-radius: 1rem; border-top-right-radius: 1rem; position: relative; display: flex; align-items: baseline; color: rgb(255, 255, 255, 0.8); opacity: 1; border-bottom: none; } header .navbar .navbar-nav .nav-item.hovered .nav-link::after { content: ""; height: 0.35rem; width: 100%; background-color: var(--lightGreen); border-top-left-radius: .3rem; border-top-right-radius: .3rem; position: absolute; bottom: 0; left: 0; right: 0; } header .navbar { border: 1px solid rgb(255 255 255 / 25%); border-top: 0; padding: 0; gap:var(--spacing-xl); max-width:1376px; margin:auto; } /* NEW MENU END */ header.scroll .universityLogo.coloredLogo, header.scroll .navbar .navbar-brand img.accreditedLogo.coloredLogo, header.search-open .universityLogo.coloredLogo, header.search-open .navbar .navbar-brand img.accreditedLogo.coloredLogo, body:not(.path-frontpage) #page header .universityLogo.coloredLogo { display: flex; } .menuHeader .icon { display: none; } header .navbar .mainmenu { margin-right: 0rem; height: 100%; width: unset; padding: 1.5rem 1.23rem; } header.scroll { padding: 0.5rem 7rem; } header .navbar .navbar-nav .nav-item { border-radius: var(--radius-sm); display: flex; position: relative; cursor: pointer; height: 72px; min-width: 72px; gap:var(--spacing-xs); padding: var(--spacing-3xl) 16px var(--spacing-3xl) calc(2 * var(--spacing-2xl))!important; } header .navbar .navbar-nav .rightSectionTools li.nav-item button, header .navbar .navbar-nav .rightSectionTools li.nav-item button a{ gap:var(--spacing-xs); display: flex; color:rgb(33 37 41); padding:0!important; display: flex; align-items: center; } header .navbar .navbar-nav .rightSectionTools li.nav-item button{ text-transform: capitalize; } .footerQuicklinks a { font-size: .85rem; padding: 0 1rem; } .footerQuicklinks { justify-content: flex-start; width: fit-content; align-items: flex-start; } body:not(.path-frontpage) #page header .navbar .navbar-brand img.accreditedLogo.coloredLogo { display: flex; } header .navbar .search { position: relative; left: unset; top: 0rem; height: 100%; margin: 0; /* padding: 1.5rem 1.73rem; */ display: none; border: none; box-shadow: none; outline: none; } .searchbox-container { top: 7.8rem; padding: 0; } footer .apple, footer .android { width: 10rem; height: auto; display: block; margin-right: 0; border-radius: 0.45rem; } footer .collapse { border: none; } .quicklaunchContainer { height: 6.8rem; width: 6.8rem; top: 42%; } footer { padding-top: 4rem; } footer .downloadApp { width: unset; border: none; } .accessibilityMenu .topsection { padding: 3rem 3rem 5rem; } .accessibilityMenu .menuBody { bottom: 4rem; } .accessibilityMenu .menuBody { width: 86%; } .accessibilityMenu .closeMenu { left: -4rem; top: 2rem; height: 3rem; width: 3rem; } .accessibilityMenu { border-top-left-radius: 2rem; border-top-right-radius: 0px; width: 28rem; z-index: 0; height: calc(100% - 3rem); } footer .uniSocialIcons { margin-left: 2rem; width: auto; padding-right: 1rem; display: flex; flex-direction: column; justify-content: center; } .shortcutContainer { top: 27%; } .shortcutContainer.visible { right: -14%; } .accessibilityMenu { z-index: 8; } footer .socialIcons { position: relative; bottom: unset; z-index: 0; } header { top:0; border: none; } footer h5.category { pointer-events: none; } footer .quickLinks { min-width: 21%; padding: 0px 0rem; } footer .collapse:not(.show) { display: block; } footer .logo { border: none; padding: 0; } } @media (min-width: 1200px) { span.call-us { color: white; margin-bottom: 1rem; margin: 0; bottom: 8rem; padding-top:0; } .searchbox-container .search-box input { font-size: 1rem; } .ourVision { padding-top: 4rem; padding-bottom: 4rem; } .searchbox-container .search-box { padding: 3rem 4rem; } .searchbox-container.scroll .search-box { padding: 3rem 7rem; } footer .logo img:first-child { width: 14rem; padding: 0; } .footerContainer { padding: 0; margin: 0; gap: 1rem; } } @media(min-width:1440px){ .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl{ max-width: var(--container-max-width-desktop); } } @media(min-width:1600px){ header li.nav-item.dropdown .dropdown-menu { top: 4.1vw; } .path-frontpage .searchbox-container { top: 5.8vw !important; } }