:root {
--primaryColor: #074D31;
--primaryTextColor: #fff;
--primaryColor-100: #1B8354;
--primaryColor-200: #067647;
--primaryColor-300: #54C08A;
--primaryColor-400: #F3FCF6;
--primaryColor-500: #e5e7eb;
--primaryColor-600: #39715a;
--borderColor: #D2D6DB;
--grayColor: #6C737F;
--grayColor-100: #F3F4F6;
--grayLightColor: #9DA4AE;
--grayDarkColor: #1F2A37;
--grayMidColor: #384250;
--darkColor: #161616;
--whiteColor: #fff;
--dangerColor: #B42318;
--cardRadius: 1rem;
--cardPadding: 1.5rem;
--sec-padding: 5rem;
--titleFont: 2.4rem ;
}
[dir=rtl] {
--titleFont: 2.25rem ;
}
/*
.dark-mode {
--primaryColor: red;
}
html[data-theme='dark'] {
--primaryColor: red;
}
:root[data-theme=dark] {
--primaryColor: red;
}
*/
:root {
/* /// Foundation styles /// */
/* Text-size styles */
/* base size: text-md--regular (16px) */
--display-2xl--medium: 4.5rem;
--display-2xl--semibold: 4.5rem;
--display-2xl--bold: 4.5rem;
--display-2xl--regular: 4.5rem;
--display-xl--regular: 3.75rem;
--display-xl--medium: 3.75rem;
--display-xl--semibold: 3.75rem;
--display-xl--bold: 3.75rem;
--display-lg--regular: 3rem;
--display-lg--medium: 3rem;
--display-lg--semibold: 3rem;
--display-lg--bold: 3rem;
--display-md--regular: 2.25rem;
--display-md--medium: 2.25rem;
--display-md--semibold: 2.25rem;
--display-md--bold: 2.25rem;
--display-sm--regular: 1.88rem;
--display-sm--medium: 1.88rem;
--display-sm--semibold: 1.88rem;
--display-sm--bold: 1.88rem;
--display-sm--medium-italic: 1.88rem;
--display-xs--regular: 1.5rem;
--display-xs--medium: 1.5rem;
--display-xs--semibold: 1.5rem;
--display-xs--bold: 1.5rem;
--display-xs--medium-italic: 1.5rem;
--text-xl--regular: 1.25rem;
--text-xl--medium: 1.25rem;
--text-xl--semibold: 1.25rem;
--text-xl--bold: 1.25rem;
--text-xl--regular-italic: 1.25rem;
--text-xl--medium-italic: 1.25rem;
--text-xl--semibold-italic: 1.25rem;
--text-xl--bold-italic: 1.25rem;
--text-xl--regular-underlined: 1.25rem;
--text-lg--regular: 1.12rem;
--text-lg--medium: 1.12rem;
--text-lg--semibold: 1.12rem;
--text-lg--bold: 1.12rem;
--text-lg--regular-italic: 1.12rem;
--text-lg--medium-italic: 1.12rem;
--text-lg--semibold-italic: 1.12rem;
--text-lg--bold-italic: 1.12rem;
--text-lg--regular-underlined: 1.12rem;
--text-lg--medium-underlined: 1.12rem;
--text-md--regular: 1rem;
--text-md--medium: 1rem;
--text-md--semibold: 1rem;
--text-md--bold: 1rem;
--text-md--regular---italic: 1rem;
--text-md--medium---italic: 1rem;
--text-md--semibold---italic: 1rem;
--text-md--bold---italic: 1rem;
--text-md--regular---underlined: 1rem;
--text-md--medium---underlined: 1rem;
--text-sm--regular: 0.88rem;
--text-sm--medium: 0.88rem;
--text-sm--semibold: 0.88rem;
--text-sm--bold: 0.88rem;
--text-sm--regular-underlined: 0.88rem;
--text-sm--medium-underlined: 0.88rem;
--text-xs--regular: 0.75rem;
--text-xs--medium: 0.75rem;
--text-xs--semibold: 0.75rem;
--text-xs--bold: 0.75rem;
--text-2xs--regular: 0.62rem;
--text-2xs--medium: 0.62rem;
--text-2xs--semi-bold: 0.62rem;
--text-2xs--bold: 0.62rem;
/* Effect styles */
/* Shadows */
--shadow-xs: 0rem 0.0625rem 0.125rem rgba(16, 24, 40, 0.05);
--shadow-sm: 0rem 0.0625rem 0.125rem rgba(16, 24, 40, 0.05),
0rem 0.0625rem 0.1875rem rgba(16, 24, 40, 0.05);
--shadow-md: 0rem 0.125rem 0.25rem rgba(16, 24, 40, 0.06),
0rem 0.25rem 0.5rem rgba(16, 24, 40, 0.1);
--shadow-lg: 0rem 0.25rem 0.375rem rgba(16, 24, 40, 0.03),
0rem 0.75rem 1rem rgba(16, 24, 40, 0.08);
--shadow-xl: 0rem 0.5rem 0.5rem rgba(16, 24, 40, 0.03),
0rem 1.25rem 1.5rem rgba(16, 24, 40, 0.08);
--shadow-2xl: 0rem 1.5rem 3rem rgba(16, 24, 40, 0.18);
--shadow-3xl: 0rem 2rem 4rem rgba(16, 24, 40, 0.14);
/* backdrop-blur */
/* --backdrop-blur-sm:;
--backdrop-blur-md:;
--backdrop-blur-lg:;
--backdrop-blur-xl:;*/
}
/* /// Foudations Varibles /// */
/* Containers - Value */
:root {
--container-max-width-desktop: var(--spacing-320);
--container-padding-desktop: var(--spacing-8);
--container-padding-mobile: var(--spacing-4);
}
/* Primitives - Values */
:root {
--colors-base-white: rgba(255, 255, 255, 1);
--colors-base-black: rgba(22, 22, 22, 1);
--colors-primary-sa-flag-25: rgba(247, 253, 249, 1);
--colors-primary-sa-flag-50: rgba(243, 252, 246, 1);
--colors-primary-sa-flag-100: rgba(223, 246, 231, 1);
--colors-primary-sa-flag-200: rgba(184, 234, 203, 1);
--colors-primary-sa-flag-300: rgba(136, 216, 173, 1);
--colors-primary-sa-flag-400: rgba(84, 192, 138, 1);
--colors-primary-sa-flag-500: rgba(37, 147, 95, 1);
--colors-primary-sa-flag-600-primary: rgba(27, 131, 84, 1);
--colors-primary-sa-flag-700: rgba(22, 106, 69, 1);
--colors-primary-sa-flag-800: rgba(20, 87, 58, 1);
--colors-primary-sa-flag-900: rgba(16, 70, 49, 1);
--colors-primary-sa-flag-950: rgba(9, 42, 30, 1);
--colors-secondary-gold-25: rgba(255, 254, 247, 1);
--colors-secondary-gold-50: rgba(255, 254, 242, 1);
--colors-secondary-gold-100: rgba(255, 252, 230, 1);
--colors-secondary-gold-200: rgba(252, 243, 189, 1);
--colors-secondary-gold-300: rgba(250, 233, 150, 1);
--colors-secondary-gold-400: rgba(247, 213, 77, 1);
--colors-secondary-gold-500: rgba(245, 189, 2, 1);
--colors-secondary-gold-600-primary: rgba(219, 161, 2, 1);
--colors-secondary-gold-700: rgba(184, 123, 2, 1);
--colors-secondary-gold-800: rgba(148, 92, 1, 1);
--colors-secondary-gold-900: rgba(110, 60, 0, 1);
--colors-secondary-gold-950: rgba(71, 36, 0, 1);
--colors-tertiary-lavendar-25: rgba(254, 252, 255, 1);
--colors-tertiary-lavendar-50: rgba(249, 245, 250, 1);
--colors-tertiary-lavendar-100: rgba(242, 233, 245, 1);
--colors-tertiary-lavendar-200: rgba(225, 204, 232, 1);
--colors-tertiary-lavendar-300: rgba(204, 173, 217, 1);
--colors-tertiary-lavendar-400: rgba(165, 123, 186, 1);
--colors-tertiary-lavendar-500-primary: rgba(128, 81, 159, 1);
--colors-tertiary-lavendar-600: rgba(109, 66, 143, 1);
--colors-tertiary-lavendar-700: rgba(83, 45, 117, 1);
--colors-tertiary-lavendar-800: rgba(61, 29, 94, 1);
--colors-tertiary-lavendar-900: rgba(40, 16, 71, 1);
--colors-tertiary-lavendar-950: rgba(22, 7, 46, 1);
--colors-neutral-25: rgba(252, 252, 253, 1);
--colors-neutral-50: rgba(249, 250, 251, 1);
--colors-neutral-100: rgba(243, 244, 246, 1);
--colors-neutral-200: rgba(229, 231, 235, 1);
--colors-neutral-300: rgba(210, 214, 219, 1);
--colors-neutral-400: rgba(157, 164, 174, 1);
--colors-neutral-500: rgba(108, 115, 127, 1);
--colors-neutral-600: rgba(77, 87, 97, 1);
--colors-neutral-700: rgba(56, 66, 80, 1);
--colors-neutral-800: rgba(31, 42, 55, 1);
--colors-neutral-900: rgba(17, 25, 39, 1);
--colors-neutral-950: rgba(13, 18, 28, 1);
--colors-green-25: rgba(246, 254, 249, 1);
--colors-blue-25: rgba(245, 250, 255, 1);
--colors-blue-50: rgba(239, 248, 255, 1);
--colors-blue-100: rgba(209, 233, 255, 1);
--colors-blue-200: rgba(178, 221, 255, 1);
--colors-blue-300: rgba(132, 202, 255, 1);
--colors-blue-400: rgba(83, 177, 253, 1);
--colors-blue-500: rgba(46, 144, 250, 1);
--colors-blue-600: rgba(21, 112, 239, 1);
--colors-blue-700: rgba(23, 92, 211, 1);
--colors-blue-800: rgba(24, 73, 169, 1);
--colors-blue-900: rgba(25, 65, 133, 1);
--colors-blue-950: rgba(16, 42, 86, 1);
--colors-green-50: rgba(236, 253, 243, 1);
--colors-green-100: rgba(220, 250, 230, 1);
--colors-green-200: rgba(171, 239, 198, 1);
--colors-green-300: rgba(117, 224, 167, 1);
--colors-green-400: rgba(71, 205, 137, 1);
--colors-green-500: rgba(23, 178, 106, 1);
--colors-green-600: rgba(7, 148, 85, 1);
--colors-green-700: rgba(6, 118, 71, 1);
--colors-green-800: rgba(8, 93, 58, 1);
--colors-green-900: rgba(7, 77, 49, 1);
--colors-green-950: rgba(5, 51, 33, 1);
--colors-yellow-25: rgba(255, 252, 245, 1);
--colors-yellow-50: rgba(255, 250, 235, 1);
--colors-yellow-100: rgba(254, 240, 199, 1);
--colors-yellow-200: rgba(254, 223, 137, 1);
--colors-yellow-300: rgba(254, 200, 75, 1);
--colors-yellow-400: rgba(253, 176, 34, 1);
--colors-yellow-500: rgba(247, 144, 9, 1);
--colors-yellow-600: rgba(220, 104, 3, 1);
--colors-yellow-700: rgba(181, 71, 8, 1);
--colors-yellow-800: rgba(147, 55, 13, 1);
--colors-yellow-900: rgba(122, 46, 14, 1);
--colors-yellow-950: rgba(78, 29, 9, 1);
--colors-red-25: rgba(255, 251, 250, 1);
--colors-red-50: rgba(254, 243, 242, 1);
--colors-red-100: rgba(254, 228, 226, 1);
--colors-red-200: rgba(254, 205, 202, 1);
--colors-red-300: rgba(253, 162, 155, 1);
--colors-red-400: rgba(249, 112, 102, 1);
--colors-red-500: rgba(240, 68, 56, 1);
--colors-red-600: rgba(217, 45, 32, 1);
--colors-red-700: rgba(180, 35, 24, 1);
--colors-red-800: rgba(145, 32, 24, 1);
--colors-red-900: rgba(122, 39, 26, 1);
--colors-red-950: rgba(85, 22, 12, 1);
--colors-alpha-alpha-white-0: rgba(255, 255, 255, 0);
--colors-alpha-alpha-white-10: rgba(255, 255, 255, 0.10000000149011612);
--colors-alpha-alpha-white-20: rgba(255, 255, 255, 0.20000000298023224);
--colors-alpha-alpha-white-30: rgba(255, 255, 255, 0.30000001192092896);
--colors-alpha-alpha-white-40: rgba(255, 255, 255, 0.4000000059604645);
--colors-alpha-alpha-white-50: rgba(255, 255, 255, 0.5);
--colors-alpha-alpha-white-60: rgba(255, 255, 255, 0.6000000238418579);
--colors-alpha-alpha-white-70: rgba(255, 255, 255, 0.699999988079071);
--colors-alpha-alpha-white-80: rgba(255, 255, 255, 0.800000011920929);
--colors-alpha-alpha-white-90: rgba(255, 255, 255, 0.8999999761581421);
--colors-alpha-alpha-white-100: rgba(255, 255, 255, 1);
--colors-alpha-alpha-black-0: rgba(22, 22, 22, 0);
--colors-alpha-alpha-black-10: rgba(22, 22, 22, 0.10000000149011612);
--colors-alpha-alpha-black-20: rgba(22, 22, 22, 0.20000000298023224);
--colors-alpha-alpha-black-30: rgba(22, 22, 22, 0.30000001192092896);
--colors-alpha-alpha-black-40: rgba(22, 22, 22, 0.4000000059604645);
--colors-alpha-alpha-black-50: rgba(22, 22, 22, 0.5);
--colors-alpha-alpha-black-60: rgba(22, 22, 22, 0.6000000238418579);
--colors-alpha-alpha-black-70: rgba(22, 22, 22, 0.699999988079071);
--colors-alpha-alpha-black-80: rgba(22, 22, 22, 0.800000011920929);
--colors-alpha-alpha-black-90: rgba(22, 22, 22, 0.8999999761581421);
--colors-alpha-alpha-black-100: rgba(22, 22, 22, 1);
--colors-alpha-alpha-600-primary-10: rgba(27, 131, 84, 0.10000000149011612);
--colors-alpha-alpha-600-primary-20: rgba(27, 131, 84, 0.20000000298023224);
--spacing-0: 0rem;
--colors-alpha-alpha-600-primary-30: rgba(27, 131, 84, 0.30000001192092896);
--colors-alpha-alpha-600-primary-40: rgba(27, 131, 84, 0.4000000059604645);
--spacing-0_5: 0.125rem;
--colors-alpha-alpha-600-primary-50: rgba(27, 131, 84, 0.5);
--colors-alpha-alpha-600-primary-60: rgba(27, 131, 84, 0.6000000238418579);
--colors-alpha-alpha-600-primary-70: rgba(27, 131, 84, 0.699999988079071);
--colors-alpha-alpha-600-primary-80: rgba(27, 131, 84, 0.800000011920929);
--colors-alpha-alpha-600-primary-90: rgba(27, 131, 84, 0.8999999761581421);
--colors-alpha-alpha-600-primary-100: var(--colors-primary-sa-flag-600-primary);
--colors-alpha-alpha-yellow-10: rgba(220, 104, 3, 0.10000000149011612);
--colors-alpha-alpha-yellow-20: rgba(220, 104, 3, 0.20000000298023224);
--colors-alpha-alpha-red-10: rgba(217, 45, 32, 0.10000000149011612);
--colors-alpha-alpha-red-20: rgba(217, 45, 32, 0.20000000298023224);
--colors-alpha-alpha-blue-10: rgba(21, 112, 239, 0.10000000149011612);
--colors-alpha-alpha-blue-20: rgba(21, 112, 239, 0.20000000298023224);
--colors-alpha-alpha-green-10: rgba(7, 148, 85, 0.10000000149011612);
--colors-alpha-alpha-green-20: rgba(7, 148, 85, 0.20000000298023224);
/* Spacing */
/* spacing are based on 4 , spacing-1 = 4px , spacing 16 = 64px ... etc */
--spacing-0: 0;
--spacing-0_5: 0.125rem;
--spacing-1: 0.25rem;
--spacing-1_5: 0.375rem;
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-5: 1.25rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-10: 2.5rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
--spacing-20: 5rem;
--spacing-24: 6rem;
--spacing-32: 8rem;
--spacing-40: 10rem;
--spacing-48: 12rem;
--spacing-56: 14rem;
--spacing-64: 16rem;
--spacing-96: 24rem;
--spacing-80: 20rem;
--spacing-120: 30rem;
--spacing-140: 35rem;
--spacing-160: 40rem;
--spacing-180: 45rem;
--spacing-192: 48rem;
--spacing-256: 64rem;
--spacing-320: 80rem;
--spacing-360: 90rem;
--spacing-400: 100rem;
--spacing-480: 120rem;
/* Radius */
--radius-0: 0rem;
--radius-2: 0.125rem;
--radius-4: 0.25rem;
--radius-8: 0.5rem;
--radius-16: 1rem;
--radius-24: 1.5rem;
--radius-9999: 624.9375rem;
}
/* Radius - Desktop */
:root {
--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);
}
/* Widths - Mode 1 */
:root {
--width-width-xxs: var(--spacing-80);
--width-width-xs: var(--spacing-96);
--width-width-sm: var(--spacing-120);
--width-width-md: var(--spacing-140);
--width-width-lg: var(--spacing-160);
--width-width-xl: var(--spacing-192);
--width-width-2xl: var(--spacing-256);
--width-width-3xl: var(--spacing-320);
--width-width-4xl: var(--spacing-360);
--width-width-5xl: var(--spacing-400);
--width-width-6xl: var(--spacing-480);
--max-width-paragraph-max-width: var(--spacing-180);
}
/* Spacing - Desktop */
:root {
--tooltip-padding: var(--spacing-2);
--tooltip-gap: var(--spacing-2);
--tab-tab-button-gap: var(--spacing-1);
--notification-notification-gap: var(--spacing-4);
--notification-notification-padding: var(--spacing-4);
--notification-notification-h-padding: var(--spacing-6);
--notification-notification-alert-v-padding: var(--spacing-2);
--notification-notification-alert-h-padding: var(--spacing-6);
--notification-notification-toast-v-padding: var(--spacing-4);
--notification-notification-toast-desktop-h-padding: var(--spacing-6);
--notification-notification-toast-mobile-h-padding: var(--spacing-4);
--tab-horizontal-tab-md-button-v-padding: var(--spacing-3);
--tab-horizontal-tab-md-button-h-padding: var(--spacing-4);
--tab-horizontal-tab-sm-button-v-padding: var(--spacing-2);
--tab-horizontal-tab-sm-button-h-padding: var(--spacing-3);
--tab-vertical-tab-md-button-v-padding: var(--spacing-1_5);
--tab-vertical-tab-md-button-h-padding: var(--spacing-3);
--tab-vertical-tab-sm-button-v-padding: var(--spacing-0_5);
--tab-vertical-tab-sm-button-h-padding: var(--spacing-1_5);
--table-cell-gap: var(--spacing-2);
--table-cell-v-padding: var(--spacing-2);
--table-cell-h-padding: var(--spacing-4);
--control-control-vertical-gap: var(--spacing-1);
--control-control-title-error-gap: var(--spacing-4);
--control-control-switch-error-icon-gap: var(--spacing-2);
--control-control-radio-error-icon-gap: var(--spacing-4);
--control-control-switch-description-padding: var(--spacing-16);
--control-control-radio-description-padding: var(--spacing-12);
--form-label-gap: var(--spacing-1);
--form-field-label-gap: var(--spacing-2);
--form-input-padding: var(--spacing-0);
--form-input-gap: var(--spacing-0);
--form-textarea-padding: var(--spacing-0);
--form-textarea-gap: var(--spacing-0);
--form-select-padding: var(--spacing-0);
--form-select-gap: var(--spacing-0);
--form-lable-container: var(--spacing-2);
--form-input-container-padding-left: var(--spacing-2);
--form-input-container-padding-right: var(--spacing-4);
--form-icon-enteredtext: var(--spacing-2);
--form-icon-helpertext: var(--spacing-2);
--form-prefix-suffix-padding-left: var(--spacing-4);
--form-prefix-suffix-padding-right: var(--spacing-4);
--form-prefix-suffix-padding-top-bottom: var(--spacing-0_5);
--form-prefix-suffix-lable-icon: var(--spacing-1);
--form-dropdown-container-padding-left-right: var(--spacing-4);
--form-dropdown-icon-content: var(--spacing-1-);
--form-textarea-container-padding-left-right: var(--spacing-4);
--form-textarea-container-padding-top-bottom: var(--spacing-3);
--accordion-accordion-lg-header-padding: var(--spacing-4);
--accordion-accordion-lg-header-gap: var(--spacing-4);
--accordion-accordion-md-header-padding: var(--spacing-3);
--accordion-accordion-md-header-gap: var(--spacing-12);
--accordion-accordion-sm-header-padding: var(--spacing-2);
--accordion-accordion-sm-header-gap: var(--spacing-2);
--card-card-lg-padding: var(--spacing-8);
--section-section-padding: var(--spacing-8);
--section-section-gap: var(--spacing-8);
--text-content-gap: var(--spacing-2);
--buttons-lg-gap: var(--spacing-1);
--icon-text-gap: var(--spacing-2);
--model-modal-padding: var(--spacing-6);
--buttons-lg-padding: var(--spacing-4);
--model-modal-gap: var(--spacing-2);
--buttons-md-gap: var(--spacing-1);
--buttons-md-padding: var(--spacing-3);
--buttons-sm-gap: var(--spacing-1);
--buttons-sm-padding: var(--spacing-2);
--model-modal-content-bottom-padding: var(--spacing-4);
--buttons-group-gap: var(--spacing-2);
--button-menu-gap: var(--spacing-2);
--button-menu-v-padding: var(--spacing-2);
--button-menu-h-padding: var(--spacing-2);
--link-md-gap: var(--spacing-2);
--link-sm-gap: var(--spacing-1);
--links-group-gap: var(--spacing-3);
--progress-indicator-progress-indicator-gap: var(--spacing-2);
--progress-indicator-progress-text-content-side-padding: var(--spacing-4);
--pagination-pagination-item-sm-padding: var(--spacing-1);
--pagination-pagination-item-md-padding: var(--spacing-1_5);
--pagination-pagination-item-lg-padding: var(--spacing-2);
--pagination-pagination-items-padding: var(--spacing-2);
--global-spacing-none: var(--spacing-0);
--global-spacing-xxs: var(--spacing-0_5);
--global-spacing-xs: var(--spacing-1);
--global-spacing-sm: var(--spacing-1_5);
--global-spacing-md: var(--spacing-2);
--global-spacing-lg: var(--spacing-3);
--global-spacing-xl: var(--spacing-4);
--global-spacing-2xl: var(--spacing-5);
--global-spacing-3xl: var(--spacing-6);
--global-spacing-4xl: var(--spacing-8);
--global-spacing-5xl: var(--spacing-10);
--global-spacing-6xl: var(--spacing-12);
--global-spacing-7xl: var(--spacing-16);
--global-spacing-8xl: var(--spacing-20);
--global-spacing-9xl: var(--spacing-24);
--global-spacing-10xl: var(--spacing-32);
--global-spacing-11xl: var(--spacing-40);
--card-card-lg-gap: var(--spacing-6);
--card-card-md-padding: var(--spacing-8);
--card-card-md-gap: var(--spacing-6);
--card-card-sm-padding: var(--spacing-8);
--card-card-sm-gap: var(--spacing-6);
}
@media (prefers-color-scheme: light) {
/* Themes - Light */
:root {
--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-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-50: var(--colors-green-50);
--background-success-25: var(--colors-green-25);
--background-info: var(--colors-blue-600);
--background-info-50: var(--colors-blue-50);
--background-info-25: var(--colors-blue-25);
--background-warning: var(--colors-yellow-600);
--background-warning-50: var(--colors-yellow-50);
--background-warning-25: var(--colors-yellow-25);
--background-error: var(--colors-red-600);
--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);
--background-nav-header: var(--colors-primary-sa-flag-800);
/*Text color */
--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);
--global-text-default-disabled: var(--colors-neutral-400);
--global-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);
--button-label-transparent-pressed-on-color: var(--colors-primary-sa-flag-300);
--border-success: var(--colors-green-700);
--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);
--border-warning: var(--colors-yellow-700);
--button-icon-transparent-hovered-on-color: var(--background-primary-400);
--border-warning-light: var(--colors-yellow-200);
--button-icon-transparent-pressed-on-color: var(--colors-primary-sa-flag-300);
--border-error: var(--colors-red-700);
--border-error-light: var(--colors-red-200);
--button-icon-transparent-selected-on-color: var(--colors-primary-sa-flag-400);
--global-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);
--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(--global-background-disabled);
--table-background-hover-selected: var(--colors-neutral-50);
--table-background-header: var(--colors-neutral-100);
--table-background-row: var(--colors-neutral-50);
--control-primary-checked: var(--colors-primary-sa-flag-600-primary);
--control-primary-hovered: var(--colors-primary-sa-flag-800);
--control-primary-pressed: var(--colors-primary-sa-flag-900);
--control-primary-focused: var(--colors-primary-sa-flag-600-primary);
--control-neutral-checked: var(--colors-neutral-950);
--control-neutral-hovered: var(--colors-neutral-600);
--control-neutral-pressed: var(--colors-neutral-500);
--control-neutral-focused: var(--colors-neutral-950);
--control-primary--readonly: var(--alpha-white-0);
--control-pressed: var(--colors-neutral-300);
--control-ripple-effect: var(--colors-neutral-100);
--control-border: var(--colors-neutral-500);
--table-background-row-selected-hovered: var(--colors-primary-sa-flag-50);
--form-text-form-paragraph: var(--text-secondary-paragraph);
--table-boarder-row-selected-hovered: var(--colors-neutral-100);
--form-field-text-label: var(--text-default);
--table-background-row-select: var(--colors-primary-sa-flag-50);
--table-background-row-hovered: var(--colors-neutral-100);
--table-background-row-alt: var(--colors-neutral-50);
--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);
--global-background-disabled: var(--colors-neutral-200);
--global-background-disabled-primary: var(--colors-primary-sa-flag-200);
--global-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: rgba(255, 255, 255, 1);
--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);
--control-icon-hovered: var(--icon-oncolor);
--alpha-primary-10: var(--colors-alpha-alpha-600-primary-10);
--icon-default-400: var(--colors-neutral-400);
--icon-primary: var(--colors-primary-sa-flag-600-primary);
--alpha-primary-20: var(--colors-alpha-alpha-600-primary-20);
--icon-primary-light: var(--colors-primary-sa-flag-50);
--alpha-warning-10: var(--colors-alpha-alpha-yellow-10);
--icon-primary-400: var(--colors-primary-sa-flag-400);
--alpha-warning-20: var(--colors-alpha-alpha-yellow-20);
--alpha-error-10: var(--colors-alpha-alpha-red-10);
--alpha-error-20: var(--colors-alpha-alpha-red-20);
--alpha-info-10: var(--colors-alpha-alpha-blue-10);
--alpha-info-20: var(--colors-alpha-alpha-blue-20);
--alpha-success-10: var(--colors-alpha-alpha-green-10);
--alpha-success-20: var(--colors-alpha-alpha-green-20);
--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);
--global-icon-default-disabled: var(--colors-neutral-400);
--background-warning-light: var(--background-warning-50);
--background-error-light: var(--background-error-50);
--global-icon-default-oncolor-disabled: var(--colors-alpha-alpha-white-40);
--background-brand-light: var(--colors-primary-sa-flag-50);
--global-control-disabled: var(--colors-neutral-400);
--background-info-light: var(--background-info-50);
--background-success-light: var(--background-success-50);
--control-icon-pressed: var(--icon-oncolor);
--control-icon-disabled: var(--colors-base-white);
--form-textarea-scrollbar-bar: var(--background-neutral-300);
--control-boarder-disabled: var(--colors-neutral-400);
--control-disabled: var(--colors-neutral-300);
--border-disabled: var(--colors-neutral-300);
--unselected-tab-icon: var(--colors-neutral-700);
}
}
@media (prefers-color-scheme: dark) {
/* Themes - Dark */
:root {
--background-white: var(--colors-neutral-950);
--background-body: var(--colors-neutral-900);
--background-menu: var(--colors-neutral-800);
--background-card: var(--colors-neutral-800);
--surface-oncolor: var(--colors-base-white);
--background-black: var(--colors-base-white);
--background-neutral-800: var(--colors-neutral-600);
--background-neutral-400: var(--colors-neutral-400);
--background-neutral-300: var(--colors-neutral-500);
--background-neutral-200: var(--colors-neutral-600);
--background-neutral-100: var(--colors-neutral-800);
--background-neutral-50: var(--colors-neutral-900);
--background-neutral-25: var(--colors-neutral-950);
--background-primary: var(--colors-primary-sa-flag-600-primary);
--background-primary-400: var(--colors-primary-sa-flag-400);
--background-primary-200: var(--colors-neutral-700);
--background-primary-50: var(--colors-alpha-alpha-600-primary-10);
--background-primary-25: var(--colors-primary-sa-flag-950);
--background-secondary: var(--colors-secondary-gold-600-primary);
--background-secondary-50: var(--colors-neutral-800);
--background-secondary-25: var(--colors-neutral-900);
--background-tertiary: var(--colors-tertiary-lavendar-600);
--background-tertiary-50: var(--colors-neutral-800);
--background-tertiary-25: var(--colors-neutral-900);
--background-success: var(--colors-green-600);
--background-success-50: var(--alpha-success-20);
--background-success-25: var(--alpha-success-10);
--background-info: var(--colors-blue-600);
--background-info-50: var(--alpha-info-20);
--background-info-25: var(--alpha-info-10);
--background-warning: var(--colors-yellow-600);
--background-warning-50: var(--alpha-warning-20);
--background-warning-25: var(--alpha-warning-10);
--background-error: var(--colors-red-600);
--background-error-50: var(--alpha-error-20);
--background-error-25: var(--alpha-error-10);
--background-sa-flag: var(--colors-primary-sa-flag-600-primary);
--background-sa-flag-50: var(--colors-neutral-800);
--background-sa-flag-25: var(--colors-neutral-900);
--background-notification-white: var(--colors-neutral-900);
--background-nav-header: var(--colors-primary-sa-flag-800);
--text-default: var(--colors-base-white);
--text-primary: var(--colors-primary-sa-flag-400);
--text-secondary: var(--colors-secondary-gold-400);
--text-tertiary: var(--colors-tertiary-lavendar-400);
--text-primary-sa-flag: var(--colors-primary-sa-flag-100);
--text-display: var(--colors-neutral-50);
--text-primary-paragraph: var(--colors-neutral-100);
--text-secondary-paragraph: var(--colors-neutral-200);
--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-400);
--text-info: var(--colors-blue-400);
--text-warning: var(--colors-yellow-400);
--text-error: var(--colors-red-400);
--text-primary-light: var(--colors-primary-sa-flag-400);
--text-secondary-light: var(--colors-secondary-gold-400);
--text-tertiary-light: var(--colors-tertiary-lavendar-400);
--global-text-default-disabled: var(--colors-neutral-400);
--global-text-default-oncolor-disabled: var(--alpha-black-40);
--border-white: var(--colors-base-black);
--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-800);
--button-background-neutral-hovered: var(--colors-neutral-700);
--button-background-neutral-pressed: var(--colors-neutral-600);
--button-background-neutral-selected: var(--colors-neutral-700);
--button-background-neutral-focused: var(--colors-neutral-800);
--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-black);
--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-white);
--border-primary: var(--colors-primary-sa-flag-600-primary);
--border-primary-light: var(--colors-green-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-500);
--border-neutral-secondary: var(--colors-neutral-700);
--border-neutral-tertiary: var(--colors-neutral-800);
--border-background-white: var(--colors-neutral-600);
--border-background-neutral: var(--colors-neutral-600);
--border-transparent-10: var(--alpha-white-10);
--border-oncolor-transparent-30: var(--colors-alpha-alpha-white-30);
--button-label-transparent-pressed-on-color: var(--colors-primary-sa-flag-300);
--border-success: var(--colors-green-500);
--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);
--border-warning: var(--colors-yellow-700);
--button-icon-transparent-hovered-on-color: var(--colors-primary-sa-flag-400);
--border-warning-light: var(--colors-yellow-200);
--button-icon-transparent-pressed-on-color: var(--colors-primary-sa-flag-300);
--border-error: var(--colors-red-700);
--border-error-light: var(--colors-red-200);
--button-icon-transparent-selected-on-color: var(--colors-primary-sa-flag-400);
--global-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-200);
--link-neutral-hovered: var(--colors-neutral-400);
--link-icon-neutral-hovered: var(--colors-neutral-400);
--link-neutral-pressed: var(--colors-neutral-500);
--link-icon-neutral-pressed: var(--colors-neutral-500);
--link-neutral-focused: var(--colors-neutral-200);
--link-icon-neutral-focused: var(--colors-neutral-200);
--link-neutral-visited: var(--colors-neutral-300);
--link-icon-neutral-visited: var(--colors-neutral-300);
--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-primary-sa-flag-600-primary);
--tag-background-neutral-light: var(--colors-neutral-800);
--tag-background-on-color: var(--colors-alpha-alpha-white-20);
--tag-text-neutral: var(--colors-neutral-100);
--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-100);
--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-300);
--tag-border-neutral-light: var(--colors-neutral-800);
--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-red-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);
--control-primary: var(--alpha-white-0);
--table-cell-border: var(--colors-neutral-600);
--table-cell-border-inverse: var(--border-black);
--table-text-head: var(--colors-neutral-300);
--table-text-body: var(--text-default);
--table-background-disabled: var(--global-background-disabled);
--table-background-hover-selected: var(--colors-neutral-900);
--table-background-header: var(--colors-neutral-900);
--table-background-row: var(--colors-neutral-900);
--control-primary-checked: var(--colors-primary-sa-flag-600-primary);
--control-primary-hovered: var(--colors-primary-sa-flag-300);
--control-primary-pressed: var(--colors-primary-sa-flag-400);
--control-primary-focused: var(--colors-primary-sa-flag-600-primary);
--control-neutral-checked: var(--colors-neutral-600);
--control-neutral-hovered: var(--colors-neutral-400);
--control-neutral-pressed: var(--colors-neutral-400);
--control-neutral-focused: var(--colors-neutral-600);
--control-primary--readonly: var(--alpha-white-0);
--control-pressed: var(--colors-neutral-600);
--control-ripple-effect: var(--colors-neutral-900);
--control-border: var(--colors-neutral-400);
--table-background-row-selected-hovered: var(--colors-primary-sa-flag-50);
--form-text-form-paragraph: var(--text-secondary-paragraph);
--table-boarder-row-selected-hovered: var(--colors-neutral-100);
--form-field-text-label: var(--text-default);
--table-background-row-select: var(--colors-primary-sa-flag-50);
--table-background-row-hovered: var(--colors-neutral-100);
--table-background-row-alt: rgba(255, 255, 255, 1);
--form-field-text-placeholder: var(--text-secondary-paragraph);
--form-field-text-hovered: var(--text-default);
--stepper-button-completed: var(--colors-green-600);
--tooltip-background-light: var(--colors-neutral-800);
--tooltip-text-heading-light: var(--text-display);
--tooltip-text-paragraph-light: var(--text-primary-paragraph);
--tooltip-background-dark: var(--colors-base-white);
--tooltip-text-heading-dark: var(--colors-neutral-800);
--tooltip-text-paragraph-dark: var(--colors-neutral-700);
--alpha-white-0: var(--colors-alpha-alpha-black-10);
--alpha-white-10: var(--colors-alpha-alpha-black-10);
--alpha-white-20: var(--colors-alpha-alpha-black-20);
--alpha-white-30: var(--colors-alpha-alpha-black-30);
--alpha-white-40: var(--colors-alpha-alpha-black-40);
--alpha-white-50: var(--colors-alpha-alpha-black-50);
--alpha-white-60: var(--colors-alpha-alpha-black-60);
--alpha-white-70: var(--colors-alpha-alpha-black-70);
--alpha-white-80: var(--colors-alpha-alpha-black-80);
--alpha-white-90: var(--colors-alpha-alpha-black-90);
--alpha-white-100: var(--colors-alpha-alpha-black-100);
--alpha-black-0: var(--colors-alpha-alpha-white-10);
--alpha-black-10: var(--colors-alpha-alpha-white-10);
--alpha-black-20: var(--colors-alpha-alpha-white-20);
--alpha-black-30: var(--colors-alpha-alpha-white-30);
--alpha-black-40: var(--colors-alpha-alpha-white-40);
--alpha-black-50: var(--colors-alpha-alpha-white-50);
--alpha-black-60: var(--colors-alpha-alpha-white-60);
--alpha-black-70: var(--colors-alpha-alpha-white-70);
--alpha-black-80: var(--colors-alpha-alpha-white-80);
--alpha-black-90: var(--colors-alpha-alpha-white-90);
--alpha-black-100: var(--colors-alpha-alpha-white-100);
--global-background-disabled: var(--colors-neutral-700);
--global-background-disabled-primary: var(--colors-primary-sa-flag-700);
--global-background-inverse-disabled: var(--colors-neutral-700);
--stepper-button-completed-hovered: var(--colors-primary-sa-flag-700);
--stepper-button-current: var(--colors-green-600);
--stepper-button-current-hovered: var(--colors-primary-sa-flag-700);
--stepper-button-upcomming: var(--colors-neutral-600);
--stepper-button-upcomming-hovered: var(--colors-neutral-600);
--stepper-button-background: var(--colors-base-white);
--stepper-text-primary: var(--text-default);
--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-700);
--stepper-line-upcomming: var(--colors-neutral-700);
--stepper-line-upcomming-hovered: var(--colors-neutral-700);
--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(--colors-neutral-800);
--form-field-background-lighter: var(--colors-neutral-600);
--form-field-background-darker: var(--colors-neutral-800);
--form-field-background-pressed: rgba(77, 87, 97, 1);
--form-field-border-default: var(--colors-neutral-500);
--form-field-border-hovered: var(--colors-neutral-200);
--form-field-border-pressed: var(--colors-neutral-25);
--form-field-border-error: var(--border-error);
--form-option-background-hover: var(--colors-neutral-500);
--form-option-background-pressed: var(--colors-neutral-700);
--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-white);
--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-700);
--form-datecell-today-background-pressed: var(--colors-neutral-600);
--icon-default-500: var(--colors-neutral-200);
--form-datecell-today-background-focused: var(--alpha-white-0);
--form-datecell-background-disabled: rgba(255, 255, 255, 1);
--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-400);
--form-datecell-background-100: var(--colors-primary-sa-flag-300);
--control-icon-hovered: var(--colors-primary-sa-flag-800);
--alpha-primary-10: rgba(22, 106, 69, 0.10000000149011612);
--icon-default-400: var(--colors-neutral-500);
--icon-primary: var(--colors-primary-sa-flag-400);
--alpha-primary-20: rgba(22, 106, 69, 0.20000000298023224);
--icon-primary-light: var(--colors-primary-sa-flag-50);
--alpha-warning-10: rgba(181, 71, 8, 0.10000000149011612);
--icon-primary-400: var(--colors-primary-sa-flag-200);
--alpha-warning-20: rgba(181, 71, 8, 0.20000000298023224);
--alpha-error-10: rgba(180, 35, 24, 0.10000000149011612);
--alpha-error-20: rgba(180, 35, 24, 0.20000000298023224);
--alpha-info-10: rgba(23, 92, 211, 0.10000000149011612);
--alpha-info-20: rgba(23, 92, 211, 0.20000000298023224);
--alpha-success-10: rgba(6, 118, 71, 0.10000000149011612);
--alpha-success-20: rgba(6, 118, 71, 0.20000000298023224);
--icon-neutral: var(--colors-neutral-400);
--icon-neutral-light: var(--colors-neutral-950);
--icon-secondary: var(--colors-secondary-gold-400);
--icon-secondary-light: var(--colors-secondary-gold-50);
--icon-tertiary: var(--colors-tertiary-lavendar-400);
--icon-tertiary-light: var(--colors-tertiary-lavendar-50);
--icon-success: var(--colors-green-400);
--icon-success-light: var(--colors-green-50);
--icon-info: var(--colors-blue-400);
--icon-info-light: var(--colors-blue-50);
--icon-warning: var(--colors-yellow-400);
--icon-warning-light: var(--colors-yellow-50);
--icon-error: var(--colors-red-400);
--icon-error-light: var(--colors-red-50);
--global-icon-default-disabled: var(--colors-base-white);
--background-warning-light: var(--alpha-warning-10);
--background-error-light: var(--alpha-error-10);
--global-icon-default-oncolor-disabled: var(--colors-base-white);
--background-brand-light: var(--alpha-primary-10);
--global-control-disabled: var(--colors-alpha-alpha-white-30);
--background-info-light: var(--alpha-info-10);
--background-success-light: var(--alpha-success-10);
--control-icon-pressed: var(--colors-primary-sa-flag-800);
--control-icon-disabled: var(--colors-neutral-400);
--form-textarea-scrollbar-bar: var(--colors-neutral-600);
--control-boarder-disabled: var(--alpha-black-30);
--control-disabled: var(--colors-neutral-300);
--border-disabled: var(--colors-neutral-500);
--unselected-tab-icon: var(--colors-neutral-100);
}
}
/* @include keyFrameanimate (pulse) {
code here
}*/
/*fontsize mixin for html*/
/*mixin classes colors*/
.text-primary {
color: #074D31 !important;
}
.border-primary {
border-color: #074D31 !important;
}
.bg-primary {
background-color: #074D31 !important;
}
.btn-primary {
background-color: var(--primaryColor-100);
border-color: var(--primaryColor-100);
box-shadow: none;
color: #fff;
}
.btn-primary:is(:hover, :focus, :active, :active:focus) {
background-color: #166a45;
border-color: #166a45;
color: #fff;
}
.btn-outline-primary {
border-color: #074D31;
color: #074D31;
box-shadow: none;
}
.btn-outline-primary:is(:hover, :focus, :active, :active:focus) {
background-color: #074D31;
color: #fff;
border-color: #074D31;
box-shadow: none;
}
.text-primaryText {
color: #fff !important;
}
.border-primaryText {
border-color: #fff !important;
}
.bg-primaryText {
background-color: #fff !important;
}
.btn-primaryText {
background-color: var(--primaryColor-100);
border-color: var(--primaryColor-100);
box-shadow: none;
color: #fff;
}
.btn-primaryText:is(:hover, :focus, :active, :active:focus) {
background-color: #166a45;
border-color: #166a45;
color: #fff;
}
.btn-outline-primaryText {
border-color: #fff;
color: #fff;
box-shadow: none;
}
.btn-outline-primaryText:is(:hover, :focus, :active, :active:focus) {
background-color: #fff;
color: #fff;
border-color: #fff;
box-shadow: none;
}
.text-primary-100 {
color: #1B8354 !important;
}
.border-primary-100 {
border-color: #1B8354 !important;
}
.bg-primary-100 {
background-color: #1B8354 !important;
}
.btn-primary-100 {
background-color: var(--primaryColor-100);
border-color: var(--primaryColor-100);
box-shadow: none;
color: #fff;
}
.btn-primary-100:is(:hover, :focus, :active, :active:focus) {
background-color: #166a45;
border-color: #166a45;
color: #fff;
}
.btn-outline-primary-100 {
border-color: #1B8354;
color: #1B8354;
box-shadow: none;
}
.btn-outline-primary-100:is(:hover, :focus, :active, :active:focus) {
background-color: #1B8354;
color: #fff;
border-color: #1B8354;
box-shadow: none;
}
.text-primary-200 {
color: #067647 !important;
}
.border-primary-200 {
border-color: #067647 !important;
}
.bg-primary-200 {
background-color: #067647 !important;
}
.btn-primary-200 {
background-color: var(--primaryColor-100);
border-color: var(--primaryColor-100);
box-shadow: none;
color: #fff;
}
.btn-primary-200:is(:hover, :focus, :active, :active:focus) {
background-color: #166a45;
border-color: #166a45;
color: #fff;
}
.btn-outline-primary-200 {
border-color: #067647;
color: #067647;
box-shadow: none;
}
.btn-outline-primary-200:is(:hover, :focus, :active, :active:focus) {
background-color: #067647;
color: #fff;
border-color: #067647;
box-shadow: none;
}
.text-primary-300 {
color: #54C08A !important;
}
.border-primary-300 {
border-color: #54C08A !important;
}
.bg-primary-300 {
background-color: #54C08A !important;
}
.btn-primary-300 {
background-color: var(--primaryColor-100);
border-color: var(--primaryColor-100);
box-shadow: none;
color: #fff;
}
.btn-primary-300:is(:hover, :focus, :active, :active:focus) {
background-color: #166a45;
border-color: #166a45;
color: #fff;
}
.btn-outline-primary-300 {
border-color: #54C08A;
color: #54C08A;
box-shadow: none;
}
.btn-outline-primary-300:is(:hover, :focus, :active, :active:focus) {
background-color: #54C08A;
color: #fff;
border-color: #54C08A;
box-shadow: none;
}
.text-primary-400 {
color: #F3FCF6 !important;
}
.border-primary-400 {
border-color: #F3FCF6 !important;
}
.bg-primary-400 {
background-color: #F3FCF6 !important;
}
.btn-primary-400 {
background-color: var(--primaryColor-100);
border-color: var(--primaryColor-100);
box-shadow: none;
color: #fff;
}
.btn-primary-400:is(:hover, :focus, :active, :active:focus) {
background-color: #166a45;
border-color: #166a45;
color: #fff;
}
.btn-outline-primary-400 {
border-color: #F3FCF6;
color: #F3FCF6;
box-shadow: none;
}
.btn-outline-primary-400:is(:hover, :focus, :active, :active:focus) {
background-color: #F3FCF6;
color: #fff;
border-color: #F3FCF6;
box-shadow: none;
}
.text-primary-500 {
color: #e5e7eb !important;
}
.border-primary-500 {
border-color: #e5e7eb !important;
}
.bg-primary-500 {
background-color: #e5e7eb !important;
}
.btn-primary-500 {
background-color: var(--primaryColor-100);
border-color: var(--primaryColor-100);
box-shadow: none;
color: #fff;
}
.btn-primary-500:is(:hover, :focus, :active, :active:focus) {
background-color: #166a45;
border-color: #166a45;
color: #fff;
}
.btn-outline-primary-500 {
border-color: #e5e7eb;
color: #e5e7eb;
box-shadow: none;
}
.btn-outline-primary-500:is(:hover, :focus, :active, :active:focus) {
background-color: #e5e7eb;
color: #fff;
border-color: #e5e7eb;
box-shadow: none;
}
.text-primary-600 {
color: #39715a !important;
}
.border-primary-600 {
border-color: #39715a !important;
}
.bg-primary-600 {
background-color: #39715a !important;
}
.btn-primary-600 {
background-color: var(--primaryColor-100);
border-color: var(--primaryColor-100);
box-shadow: none;
color: #fff;
}
.btn-primary-600:is(:hover, :focus, :active, :active:focus) {
background-color: #166a45;
border-color: #166a45;
color: #fff;
}
.btn-outline-primary-600 {
border-color: #39715a;
color: #39715a;
box-shadow: none;
}
.btn-outline-primary-600:is(:hover, :focus, :active, :active:focus) {
background-color: #39715a;
color: #fff;
border-color: #39715a;
box-shadow: none;
}
.text-borderColor {
color: #D2D6DB !important;
}
.border-borderColor {
border-color: #D2D6DB !important;
}
.bg-borderColor {
background-color: #D2D6DB !important;
}
.btn-borderColor {
background-color: var(--primaryColor-100);
border-color: var(--primaryColor-100);
box-shadow: none;
color: #fff;
}
.btn-borderColor:is(:hover, :focus, :active, :active:focus) {
background-color: #166a45;
border-color: #166a45;
color: #fff;
}
.btn-outline-borderColor {
border-color: #D2D6DB;
color: #D2D6DB;
box-shadow: none;
}
.btn-outline-borderColor:is(:hover, :focus, :active, :active:focus) {
background-color: #D2D6DB;
color: #fff;
border-color: #D2D6DB;
box-shadow: none;
}
.text-grayColor {
color: #6C737F !important;
}
.border-grayColor {
border-color: #6C737F !important;
}
.bg-grayColor {
background-color: #6C737F !important;
}
.btn-grayColor {
background-color: var(--primaryColor-100);
border-color: var(--primaryColor-100);
box-shadow: none;
color: #fff;
}
.btn-grayColor:is(:hover, :focus, :active, :active:focus) {
background-color: #166a45;
border-color: #166a45;
color: #fff;
}
.btn-outline-grayColor {
border-color: #6C737F;
color: #6C737F;
box-shadow: none;
}
.btn-outline-grayColor:is(:hover, :focus, :active, :active:focus) {
background-color: #6C737F;
color: #fff;
border-color: #6C737F;
box-shadow: none;
}
.text-grayColor-100 {
color: #F3F4F6 !important;
}
.border-grayColor-100 {
border-color: #F3F4F6 !important;
}
.bg-grayColor-100 {
background-color: #F3F4F6 !important;
}
.btn-grayColor-100 {
background-color: var(--primaryColor-100);
border-color: var(--primaryColor-100);
box-shadow: none;
color: #fff;
}
.btn-grayColor-100:is(:hover, :focus, :active, :active:focus) {
background-color: #166a45;
border-color: #166a45;
color: #fff;
}
.btn-outline-grayColor-100 {
border-color: #F3F4F6;
color: #F3F4F6;
box-shadow: none;
}
.btn-outline-grayColor-100:is(:hover, :focus, :active, :active:focus) {
background-color: #F3F4F6;
color: #fff;
border-color: #F3F4F6;
box-shadow: none;
}
.text-grayLightColor {
color: #9DA4AE !important;
}
.border-grayLightColor {
border-color: #9DA4AE !important;
}
.bg-grayLightColor {
background-color: #9DA4AE !important;
}
.btn-grayLightColor {
background-color: var(--primaryColor-100);
border-color: var(--primaryColor-100);
box-shadow: none;
color: #fff;
}
.btn-grayLightColor:is(:hover, :focus, :active, :active:focus) {
background-color: #166a45;
border-color: #166a45;
color: #fff;
}
.btn-outline-grayLightColor {
border-color: #9DA4AE;
color: #9DA4AE;
box-shadow: none;
}
.btn-outline-grayLightColor:is(:hover, :focus, :active, :active:focus) {
background-color: #9DA4AE;
color: #fff;
border-color: #9DA4AE;
box-shadow: none;
}
.text-grayDarkColor {
color: #1F2A37 !important;
}
.border-grayDarkColor {
border-color: #1F2A37 !important;
}
.bg-grayDarkColor {
background-color: #1F2A37 !important;
}
.btn-grayDarkColor {
background-color: var(--primaryColor-100);
border-color: var(--primaryColor-100);
box-shadow: none;
color: #fff;
}
.btn-grayDarkColor:is(:hover, :focus, :active, :active:focus) {
background-color: #166a45;
border-color: #166a45;
color: #fff;
}
.btn-outline-grayDarkColor {
border-color: #1F2A37;
color: #1F2A37;
box-shadow: none;
}
.btn-outline-grayDarkColor:is(:hover, :focus, :active, :active:focus) {
background-color: #1F2A37;
color: #fff;
border-color: #1F2A37;
box-shadow: none;
}
.text-grayMidColor {
color: #384250 !important;
}
.border-grayMidColor {
border-color: #384250 !important;
}
.bg-grayMidColor {
background-color: #384250 !important;
}
.btn-grayMidColor {
background-color: var(--primaryColor-100);
border-color: var(--primaryColor-100);
box-shadow: none;
color: #fff;
}
.btn-grayMidColor:is(:hover, :focus, :active, :active:focus) {
background-color: #166a45;
border-color: #166a45;
color: #fff;
}
.btn-outline-grayMidColor {
border-color: #384250;
color: #384250;
box-shadow: none;
}
.btn-outline-grayMidColor:is(:hover, :focus, :active, :active:focus) {
background-color: #384250;
color: #fff;
border-color: #384250;
box-shadow: none;
}
.text-darkColor {
color: #161616 !important;
}
.border-darkColor {
border-color: #161616 !important;
}
.bg-darkColor {
background-color: #161616 !important;
}
.btn-darkColor {
background-color: var(--primaryColor-100);
border-color: var(--primaryColor-100);
box-shadow: none;
color: #fff;
}
.btn-darkColor:is(:hover, :focus, :active, :active:focus) {
background-color: #166a45;
border-color: #166a45;
color: #fff;
}
.btn-outline-darkColor {
border-color: #161616;
color: #161616;
box-shadow: none;
}
.btn-outline-darkColor:is(:hover, :focus, :active, :active:focus) {
background-color: #161616;
color: #fff;
border-color: #161616;
box-shadow: none;
}
.text-whiteColor {
color: #fff !important;
}
.border-whiteColor {
border-color: #fff !important;
}
.bg-whiteColor {
background-color: #fff !important;
}
.btn-whiteColor {
background-color: var(--primaryColor-100);
border-color: var(--primaryColor-100);
box-shadow: none;
color: #fff;
}
.btn-whiteColor:is(:hover, :focus, :active, :active:focus) {
background-color: #166a45;
border-color: #166a45;
color: #fff;
}
.btn-outline-whiteColor {
border-color: #fff;
color: #fff;
box-shadow: none;
}
.btn-outline-whiteColor:is(:hover, :focus, :active, :active:focus) {
background-color: #fff;
color: #fff;
border-color: #fff;
box-shadow: none;
}
.text-dangerColor {
color: #B42318 !important;
}
.border-dangerColor {
border-color: #B42318 !important;
}
.bg-dangerColor {
background-color: #B42318 !important;
}
.btn-dangerColor {
background-color: var(--primaryColor-100);
border-color: var(--primaryColor-100);
box-shadow: none;
color: #fff;
}
.btn-dangerColor:is(:hover, :focus, :active, :active:focus) {
background-color: #166a45;
border-color: #166a45;
color: #fff;
}
.btn-outline-dangerColor {
border-color: #B42318;
color: #B42318;
box-shadow: none;
}
.btn-outline-dangerColor:is(:hover, :focus, :active, :active:focus) {
background-color: #B42318;
color: #fff;
border-color: #B42318;
box-shadow: none;
}
/*mixin classes line-clamp*/
.line-clamp-1 {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-2, .search-results__list__item__inner__title, .media-center__cols__card__inner__caption__title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-3, .search-results__list__item__inner__par,
.search-results__list__item__inner p, .media-center__cols__card__inner__caption__par, .video-slide__inner__des__title {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-4, .national-sec__card__inner__par, .national-sec__card__inner__title {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-5 {
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-6 {
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-7 {
display: -webkit-box;
-webkit-line-clamp: 7;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-8 {
display: -webkit-box;
-webkit-line-clamp: 8;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-9 {
display: -webkit-box;
-webkit-line-clamp: 9;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-10 {
display: -webkit-box;
-webkit-line-clamp: 10;
-webkit-box-orient: vertical;
overflow: hidden;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
}
.flex-between {
justify-content: space-between;
}
/*loader*/
@keyframes loader {
0% {
left: -100px;
}
100% {
left: 110%;
}
}
/*shadow*/
@keyframes shadow {
50% {
transform: scale(1.2, 1);
}
}
/*Sticky Header*/
@keyframes fadeInDown {
from {
zoom: 1;
filter: alpha(opacity=0);
opacity: 0;
transform: translate3d(0, -100%, 0);
}
to {
zoom: 1;
filter: alpha(opacity=100);
opacity: 1;
transform: none;
}
}
@keyframes sonarWave {
from {
opacity: 0.5;
}
to {
transform: scale(3);
-webkit-transform: scale(3);
opacity: 0;
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInLeft {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: fadeInLeft;
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInRight {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: fadeInRight;
}
@keyframes fadeOutRight {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(20px);
}
}
.fadeOutRight {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: fadeOutRight;
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInDown {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: fadeInDown;
}
@keyframes fadeOutUp {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-20px);
}
}
.fadeOutUp {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: fadeOutUp;
}
@keyframes fadeOutLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-20px);
}
}
.fadeOutLeft {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: fadeOutLeft;
}
/*animate logo*/
@keyframes pulse {
0% {
transform: scale3d(1, 1, 1);
}
50% {
transform: scale3d(1.05, 1.05, 1.05);
}
100% {
transform: scale3d(1, 1, 1);
}
}
.pulse {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: pulse;
}
@keyframes fadeOutDown {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(20px);
}
}
.fadeOutDown {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: fadeOutDown;
}
@keyframes fadeOutDown {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(20px);
}
}
.fadeOutDown {
animation-name: fadeOutDown;
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInUp {
animation-name: fadeInUp;
}
/* Icon Pop */
@keyframes hvr-icon-pop {
50% {
transform: scale(1.1);
}
}
.hvr-icon-pop {
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
transition-duration: 0.3s;
}
.hvr-icon-pop .hvr-icon {
transform: translateZ(0);
transition-duration: 0.3s;
transition-property: transform;
transition-timing-function: ease-out;
}
.hvr-icon-pop:hover .hvr-icon, .hvr-icon-pop:focus .hvr-icon, .hvr-icon-pop:active .hvr-icon {
animation-name: hvr-icon-pop;
animation-duration: 0.3s;
animation-timing-function: linear;
animation-iteration-count: 1;
}
/* KEYFRAMES */
@keyframes texteffect {
0% {
transform: translateY(50%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
/* counter */
@keyframes moveBounce {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(70px);
}
100% {
transform: translateY(0px);
}
}
@keyframes zoom-fade {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
@keyframes moveLeftBounce {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(30px);
}
100% {
transform: translateX(0px);
}
}
@keyframes rotation {
from {
transform: rotate(-25deg);
}
to {
transform: rotate(335deg);
}
}
@keyframes fadeinout {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes pulse {
0% {
transform: scale3d(1, 1, 1);
}
50% {
transform: scale3d(1.05, 1.05, 1.05);
}
100% {
transform: scale3d(1, 1, 1);
}
}
@font-face {
font-family: "IBMPlexSansArabic";
font-style: normal;
font-weight: 400;
src: url("../fonts/IBMPlexSansArabic-Regular.woff2") format("woff2"), url("../fonts/IBMPlexSansArabic-Regular.ttf") format("truetype");
font-display: swap;
size-adjust: 100%;
ascent-override: 90%;
descent-override: 10%;
}
@font-face {
font-family: "IBMPlexSansArabic";
font-style: normal;
font-weight: 500;
src: url("../fonts/IBMPlexSansArabic-Medium.woff2") format("woff2"), url("../fonts/IBMPlexSansArabic-Medium.ttf") format("truetype");
font-display: swap;
size-adjust: 100%;
ascent-override: 90%;
descent-override: 10%;
}
@font-face {
font-family: "IBMPlexSansArabic";
font-style: normal;
font-weight: 600;
src: url("../fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2"), url("../fonts/IBMPlexSansArabic-SemiBold.ttf") format("truetype");
font-display: swap;
size-adjust: 100%;
ascent-override: 90%;
descent-override: 10%;
}
@font-face {
font-family: "IBMPlexSansArabic";
font-style: normal;
font-weight: 700;
src: url("../fonts/IBMPlexSansArabic-Bold.woff2") format("woff2"), url("../fonts/IBMPlexSansArabic-Bold.ttf") format("truetype");
font-display: swap;
size-adjust: 100%;
ascent-override: 90%;
descent-override: 10%;
}
@font-face {
font-family: "SaudiWeb-Bold";
src: url("../fonts/SaudiWeb-Bold.eot");
src: url("../fonts/SaudiWeb-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/SaudiWeb-Bold.woff2") format("woff2"), url("../fonts/SaudiWeb-Bold.woff") format("woff"), url("../fonts/SaudiWeb-Bold.ttf") format("truetype"), url("../fonts/SaudiWeb-Bold.svg#SaudiWeb-Bold") format("svg");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "SaudiWeb-Regular";
src: url("../fonts/SaudiWeb-Regular.eot");
src: url("../fonts/SaudiWeb-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/SaudiWeb-Regular.woff2") format("woff2"), url("../fonts/SaudiWeb-Regular.woff") format("woff"), url("../fonts/SaudiWeb-Regular.ttf") format("truetype"), url("../fonts/SaudiWeb-Regular.svg#SaudiWeb-Regular") format("svg");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "icomoon";
src: url("../fonts/icomoon.eot?oxf15y");
src: url("../fonts/icomoon.eot?oxf15y#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?oxf15y") format("truetype"), url("../fonts/icomoon.woff?oxf15y") format("woff"), url("../fonts/icomoon.svg?oxf15y#icomoon") format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
font-display: swap;
ascent-override: 90%;
descent-override: 10%;
line-gap-override: 0%;
}
[class^=icon-],
[class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: "icomoon" !important;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-link:before {
content: "\e941";
}
.icon-copy:before {
content: "\e942";
}
.icon-sorting-table:before {
content: "\e940";
}
.icon-refresh:before {
content: "\e93f";
}
.icon-play2:before {
content: "\e93e";
}
.icon-clock:before {
content: "\e93c";
}
.icon-cloud:before {
content: "\e93d";
}
.icon-zoom-minus:before {
content: "\e93a";
}
.icon-zoom-plus:before {
content: "\e93b";
}
.icon-user-circle:before {
content: "\e938";
}
.icon-date:before {
content: "\e939";
}
.icon-close-circle:before {
content: "\e937";
}
.icon-star:before {
content: "\e936";
}
.icon-true-circle2:before {
content: "\e935";
}
.icon-betaV:before {
content: "\e934";
}
.icon-case:before {
content: "\e931";
}
.icon-buildings:before {
content: "\e932";
}
.icon-users1:before {
content: "\e933";
}
.icon-warning:before {
content: "\e92e";
}
.icon-true-thin:before {
content: "\e92f";
}
.icon-question-mark:before {
content: "\e930";
}
.icon-sorting:before {
content: "\e92c";
}
.icon-filter:before {
content: "\e92d";
}
.icon-pen-edit:before {
content: "\e929";
}
.icon-true-circle:before {
content: "\e92b";
}
.icon-upload:before {
content: "\e92a";
}
.icon-service:before {
content: "\e928";
}
.icon-location:before {
content: "\e926";
}
.icon-events:before {
content: "\e927";
}
.icon-title-ico:before {
content: "\e925";
}
.icon-message:before {
content: "\e924";
}
.icon-attach:before {
content: "\e923";
}
.icon-eye:before {
content: "\e922";
}
.icon-dislike:before {
content: "\e91d";
}
.icon-like:before {
content: "\e91e";
}
.icon-timeline:before {
content: "\e91f";
}
.icon-offers:before {
content: "\e920";
}
.icon-info:before {
content: "\e921";
}
.icon-download:before {
content: "\e91c";
}
.icon-pause:before {
content: "\e91a";
}
.icon-play:before {
content: "\e91b";
}
.icon-external:before {
content: "\e918";
}
.icon-user:before {
content: "\e919";
}
.icon-lang:before {
content: "\e917";
}
.icon-map:before {
content: "\e915";
}
.icon-statistic1:before {
content: "\e916";
}
.icon-call:before {
content: "\e913";
}
.icon-mail:before {
content: "\e914";
}
.icon-share:before {
content: "\e912";
}
.icon-true:before {
content: "\e911";
}
.icon-plus:before {
content: "\e910";
}
.icon-meetingss:before {
content: "\e90d";
}
.icon-users:before {
content: "\e90e";
}
.icon-shopping-cart:before {
content: "\e90f";
}
.icon-chevron-left:before {
content: "\e90c";
}
.icon-chevron-right:before {
content: "\e90b";
}
[dir=rtl] .icon-chevron-right:before {
transform: scaleX(-1);
display: inline-block;
}
.icon-youtube:before {
content: "\e909";
}
.icon-twitter-x:before {
content: "\e90a";
}
.icon-arrow-top:before {
content: "\e908";
}
.icon-close:before {
content: "\e907";
}
.icon-scrolldown:before {
content: "\e906";
}
.icon-linkedin:before {
content: "\e900";
}
.icon-twitter:before {
content: "\e901";
}
.icon-arrow-right:before {
content: "\e902";
}
[dir=rtl] .icon-arrow-right:before {
transform: scaleX(-1);
display: inline-block;
}
.icon-arrow-left:before {
content: "\e932";
}
[dir=rtl] .icon-arrow-left:before {
transform: scaleX(-1);
display: inline-block;
}
.icon-chevron-down:before {
content: "\e903";
}
.icon-logout:before {
content: "\e904";
}
.icon-search:before {
content: "\e905";
}
/***
====================================================================
Preloader
====================================================================
***/
.preloader {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--primaryColor);
}
.preloader__circle {
animation-play-state: running;
opacity: 1;
height: 3.4375rem;
width: 3.4375rem;
position: relative;
}
.preloader__circle::before {
animation: spinner 1s ease-in-out infinite;
-webkit-animation: spinner 1s ease-in-out infinite;
border: solid 0.25rem rgba(255, 255, 255, 0.3);
border-bottom-color: var(--primaryTextColor);
border-radius: 50%;
content: "";
height: 100%;
width: 100%;
will-change: transform;
display: block;
}
@keyframes spinner {
to {
-webkit-transform: rotate(360deg);
}
}
/**/
.page-loaded .header-wrapper,
.page-loaded .video-slide {
animation: fadeOutUp 0s cubic-bezier(0.5, 0, 0.5, 1) both;
}
.page-loaded .page-banner::before {
animation-duration: 0s;
animation-fill-mode: both;
transform: scale(1);
}
.page-loaded.animate-ready .header-wrapper {
animation: fadeInDown 0.4s cubic-bezier(0.5, 0, 0.5, 1);
}
.page-loaded.animate-ready .video-slide {
animation: fadeInUp 0.3s cubic-bezier(0.5, 0, 0.5, 1);
}
.page-loaded.animate-ready .page-banner::before {
transition: all 1s ease;
animation-duration: 0.4s;
transform: scale(1.02);
}
.main-slider__swiper__slide__image__inner {
transition: all 0.4s ease;
animation-duration: 0.4s;
animation-fill-mode: both;
transform: scale(1.03);
}
/***
====================================================================
Headings
====================================================================
***/
.main-title {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
max-width: 54.25rem;
margin-bottom: 3.75rem;
gap: 0.625rem;
}
.main-title__heading {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
position: relative;
width: 100%;
gap: 1.375rem;
}
.main-title__heading__title, .page-details__inner__caption__title--line .page-details__inner__caption__title__head {
position: relative;
font-weight: 600;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: row;
font-size: var(--titleFont);
gap: 1rem;
}
.main-title--white .main-title__heading__title, .main-title--white .page-details__inner__caption__title--line .page-details__inner__caption__title__head, .page-details__inner__caption__title--line .main-title--white .page-details__inner__caption__title__head {
color: var(--primaryTextColor);
}
[dir=rtl] .main-title__heading__title, [dir=rtl] .page-details__inner__caption__title--line .page-details__inner__caption__title__head, .page-details__inner__caption__title--line [dir=rtl] .page-details__inner__caption__title__head {
padding-bottom: 0.1875rem;
}
.main-title__heading__title::before, .page-details__inner__caption__title--line .page-details__inner__caption__title__head::before {
position: relative;
content: "";
inset-inline-start: 0;
inset-block-start: 0.7rem;
width: 0.4375rem;
height: 2.25rem;
background-color: var(--primaryColor-100);
}
[dir=rtl] .main-title__heading__title::before, [dir=rtl] .page-details__inner__caption__title--line .page-details__inner__caption__title__head::before, .page-details__inner__caption__title--line [dir=rtl] .page-details__inner__caption__title__head::before {
inset-block-start: 0.5rem;
}
.main-title__heading__forms {
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-direction: row;
gap: 0.875rem;
}
.main-title__heading__forms .form-group .form-control {
border: 0;
}
.main-title__par {
text-align: justify;
}
.main-title--fullwide {
max-width: none;
}
.main-title--mb-small {
margin-bottom: 2.8125rem;
}
.main-title .buttons-blog {
margin-top: 0 !important;
padding-top: 0 !important;
}
.main-title__list__ul {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
gap: 1rem;
}
.main-title__list__ul__item {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: row;
position: relative;
gap: 0.625rem;
}
.main-title__list__ul__item::before {
content: "";
position: relative;
width: 0.3125rem;
height: 0.3125rem;
border-radius: 100%;
overflow: hidden;
background-color: var(--darkColor);
flex: 0 0 auto;
inset-block-start: 0.625rem;
}
/***
====================================================================
Start Buttons and links
====================================================================
***/
.prgoress_indicator {
position: fixed;
inset-inline-end: 2.5rem;
bottom: 2.5rem;
height: 3.5rem;
width: 3.5rem;
cursor: pointer;
display: block;
border-radius: 50px;
z-index: 9;
opacity: 0;
visibility: hidden;
transform: translateY(15px);
transform: translateY(15px) !important;
transition: all 200ms linear !important;
}
.prgoress_indicator.active-progress {
opacity: 1;
visibility: visible;
transform: translateY(0) !important;
}
.prgoress_indicator::after {
font-family: "icomoon" !important;
position: absolute;
content: "\e908";
text-align: center;
font-size: 1.625rem;
color: var(--darkColor);
left: 0;
top: 0;
height: 100%;
width: 100%;
cursor: pointer;
z-index: 1;
transition: all 200ms linear !important;
display: flex;
justify-content: center;
align-items: center;
}
.prgoress_indicator::before {
content: "";
position: absolute;
inset: 0.15625rem;
background-color: var(--grayColor-100);
border-radius: 100%;
inset-block-start: 0.125rem;
}
.prgoress_indicator:hover svg.progress-circle path {
stroke: var(--grayColor-100);
}
.prgoress_indicator svg path {
fill: none;
}
.prgoress_indicator svg.progress-circle path {
stroke: var(--darkColor);
stroke-width: 4;
box-sizing: border-box;
transition: all 200ms linear !important;
}
/***
====================================================================
Start custom-dropdown
====================================================================
***/
.custom-dropdown-container {
position: relative;
}
.custom-dropdown-container .custom-dropdown-toggle {
cursor: pointer;
}
.custom-dropdown-container .custom-dropdown {
position: absolute;
inset-inline-end: 0;
top: calc(100% + 0.5625rem);
min-width: 11.875rem;
opacity: 1;
z-index: 9;
overflow: hidden;
visibility: hidden;
opacity: 0;
pointer-events: none;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.19);
padding: 1.25rem 1.75rem 1.75rem;
border-radius: 0;
transition: all 300ms linear;
transform: translate3d(0, 20px, 0);
}
.custom-dropdown-container.dropdown-show > .custom-dropdown {
visibility: visible;
opacity: 1;
pointer-events: unset;
transform: translate3d(0, 0, 0);
}
/***
====================================================================
End custom-dropdown
====================================================================
***/
.buttons-blog {
gap: 0.75rem;
display: flex;
padding: 1px;
}
.btn {
position: relative;
display: inline-block;
padding: 0.7rem 1.25rem 0.75rem;
transition: 300ms;
border-radius: 0.25rem;
overflow: hidden;
line-height: 1.15;
min-height: 100%;
transition-duration: 0.2s !important;
border: 0;
font-weight: 500;
}
.btn:is(:hover, :active, :focus) {
background-color: #166A45;
}
.btn.btn-link {
text-decoration: none;
padding: 0;
}
.btn span {
z-index: 1;
position: relative;
display: flex;
align-items: flex-end;
align-items: center;
white-space: nowrap;
justify-content: center;
gap: 0.5rem;
}
.btn span i {
line-height: 1;
}
.btn span i.icon-sorting {
font-size: 1.25rem;
}
.btn.btn-outline-secondary, .founding-ramadan-day .media-center .btn.btn-light {
background-color: transparent;
border: 1px solid var(--borderColor);
color: var(--darkColor);
}
.btn.btn-outline-secondary::before, .founding-ramadan-day .media-center .btn.btn-light::before {
background-color: var(--whiteColor);
}
.btn.btn-outline-secondary:focus, .founding-ramadan-day .media-center .btn.btn-light:focus, .btn.btn-outline-secondary:focus-visible, .founding-ramadan-day .media-center .btn.btn-light:focus-visible, .btn.btn-outline-secondary:active, .founding-ramadan-day .media-center .btn.btn-light:active, .btn.btn-outline-secondary:focus:not(:focus-visible) {
border-color: transparent;
outline: 0.125rem solid #161616;
box-shadow: none;
background-color: transparent;
}
.btn.btn-light {
background-color: var(--whiteColor);
color: var(--darkColor);
}
.btn.btn-light span {
color: var(--darkColor);
}
.btn.btn-light::before {
background: var(--primaryColor);
}
.btn.btn-light:hover {
background-color: var(--grayColor-100);
}
.btn.btn-light:focus, .btn.btn-light:focus-visible, .btn.btn-light:active, .btn.btn-light:focus:not(:focus-visible) {
outline: 0.125rem solid #161616;
outline-offset: 0.0625rem;
box-shadow: none;
}
.btn.btn-secondary {
background-color: var(--grayColor-100);
border-color: var(--grayColor-100);
color: var(--darkColor);
}
.btn.btn-secondary:focus, .btn.btn-secondary:focus-visible, .btn.btn-secondary:active, .btn.btn-secondary:focus:not(:focus-visible) {
outline: 0.125rem solid #161616;
box-shadow: none;
background: none;
}
.btn.btn-secondary:hover {
background: var(--primaryColor-500);
}
.btn.btn-dark {
background-color: var(--darkColor);
border-color: var(--darkColor);
color: var(--primaryTextColor);
}
.btn.btn-dark:is(:hover, :active, :focus) {
background-color: var(--grayDarkColor);
}
.btn.btn-dark:focus {
background-color: var(--grayMidColor);
}
.btn.btn-grayColor-100 {
color: var(--darkColor);
}
.btn.btn-grayColor-100:is(:hover, :active, :focus) {
color: var(--primaryTextColor);
}
.btn.btn-link {
border-color: transparent !important;
background-color: transparent;
color: var(--darkColor);
border-radius: 0;
}
.btn.btn-link::before {
display: none;
}
.btn.btn-primary:visited {
color: var(--primaryTextColor);
}
.btn.btn-primary:focus, .btn.btn-primary:focus-visible, .btn.btn-primary:active, .btn.btn-primary:focus:not(:focus-visible) {
outline: 0.125rem solid #161616;
outline-offset: 0.125rem;
box-shadow: none;
}
.btn.btn-primary-100 {
background: var(--primaryColor-100);
}
.btn.btn-primary-100:visited {
color: #FFF;
}
.btn.btn-primary-100:hover {
background: #166A45;
}
.btn.btn-primary-100:focus, .btn.btn-primary-100:focus-visible, .btn.btn-primary-100:active, .btn.btn-primary-100:focus:not(:focus-visible) {
background: var(--primaryColor-100);
outline: 0.125rem solid #161616;
outline-offset: 0.125rem;
box-shadow: none;
}
.btn:disabled {
background-color: var(--primaryColor-500);
border-color: var(--primaryColor-500);
color: var(--grayLightColor) !important;
pointer-events: none;
}
.btn.icon-only {
padding-inline: 0.8rem;
font-size: 1.25rem;
}
.btn.social-share {
overflow: visible;
}
.btn.social-share .social-share__dropdown {
line-height: 1;
}
/*--------------------------------------------------------------
# Custom Cursor
--------------------------------------------------------------*/
.custom-cursor__cursor {
width: 1.5625rem;
height: 1.5625rem;
border-radius: 100%;
border: 1px solid var(--primaryColor);
transition: all 200ms ease-out;
position: fixed;
pointer-events: none;
left: 0;
top: 0;
transform: translate(calc(-50% + 5px), -50%);
z-index: 999991;
opacity: 0.2;
display: none !important;
}
.custom-cursor__cursor-two {
width: 0.625rem;
height: 0.625rem;
border-radius: 100%;
background-color: var(--primaryColor);
opacity: 0.2;
position: fixed;
transform: translate(-50%, -50%);
pointer-events: none;
transition: width 0.3s, height 0.3s, opacity 0.3s;
z-index: 999991;
display: none !important;
}
.custom-cursor__hover {
background-color: var(--primaryColor);
opacity: 0.1;
width: 5rem;
height: 5rem;
}
.custom-cursor__innerhover {
width: 1.5625rem;
height: 1.5625rem;
opacity: 0.1;
}
/*--------------------------------------------------------------
# Custom Cursor
--------------------------------------------------------------*/
/***
====================================================================
Start social-share
====================================================================
***/
.social-share {
position: relative;
}
.social-share:not(.btn) i.icon-share {
display: flex;
height: 2.75rem;
width: 2.75rem;
align-items: center;
justify-content: center;
background: var(--primaryColor-100);
color: var(--primaryTextColor);
border-radius: 100%;
cursor: pointer;
}
.social-share__dropdown {
position: absolute;
min-width: -moz-max-content;
min-width: max-content;
display: flex;
gap: 1.25rem;
background-color: var(--primaryColor-100);
padding: 0.625rem 0.875rem !important;
border-radius: 0.3125rem;
inset-inline-start: -1rem;
inset-block-end: 100%;
opacity: 0;
pointer-events: none;
transition: all 200ms linear;
transform: translate3d(0, -0.3125rem, 0);
list-style-type: none !important;
line-height: 1.2 !important;
}
.social-share__dropdown__item a {
transition: all 200ms linear;
}
.social-share__dropdown__item a:is(:hover, :active, :focus) {
color: var(--primaryColor);
}
.social-share:is(:hover, :active, :focus) .social-share__dropdown {
opacity: 1;
pointer-events: auto;
transform: translate3d(0, 0, 0);
}
/***
====================================================================
Start Form controls inputs and selects and checkbox
====================================================================
***/
.form-group .form-label {
margin-bottom: 0.5rem;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
gap: 0.3125rem;
font-size: 1rem;
font-weight: 600;
color: var(--field-text-label, #161616);
}
.form-group .form-label.required::before {
content: "*";
color: var(--field-border-error, #B42318);
}
.form-group .form-control {
padding: 0.3125rem 1rem;
height: 2.625rem;
color: var(--grayDarkColor);
border-radius: 0.25rem;
border: 0;
background-color: var(--whiteColor);
box-shadow: none;
border: 0.0625rem solid var(--grayLightColor);
font-weight: 400;
background: linear-gradient(#0D121C, #0D121C), linear-gradient(#fff, #fff);
background-size: 0 2px, auto;
background-repeat: no-repeat;
background-position: center bottom;
transition: all 0.2s ease-out;
}
.form-group .form-control.form-select {
border: 0;
padding-inline-end: 2.5rem;
}
.form-group .form-control.form-select.nice-select {
border: 0.0625rem solid var(--grayLightColor);
float: none;
text-align: start !important;
margin: 0;
}
.form-group .form-control.form-select.nice-select .current {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.form-group .form-control::-webkit-input-placeholder {
color: var(--grayColor);
}
.form-group .form-control:-moz-placeholder {
color: var(--grayColor);
}
.form-group .form-control::-moz-placeholder {
color: var(--grayColor);
}
.form-group .form-control:-ms-input-placeholder {
color: var(--grayColor);
}
.form-group .form-control:hover {
border-color: var(--grayMidColor);
}
.form-group .form-control:is(:active, :focus) {
background-size: 100% 2px, auto;
}
.form-group .form-control.calendar {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30.698' height='30.697' viewBox='0 0 30.698 30.697'%3E%3Cpath id='Union_2' data-name='Union 2' d='M3293.6-4459.3a3.6,3.6,0,0,1-3.6-3.6V-4484a3.6,3.6,0,0,1,3.6-3.6h1.439v-2.4h2.4v2.4h15.829v-2.4h2.4v2.4h1.439a3.6,3.6,0,0,1,3.6,3.6v21.1a3.6,3.6,0,0,1-3.6,3.6Zm-1.2-3.6a1.2,1.2,0,0,0,1.2,1.2h23.5a1.2,1.2,0,0,0,1.2-1.2v-15.829h-25.9Zm0-21.1v2.878h25.9V-4484a1.2,1.2,0,0,0-1.2-1.2h-1.439v2.4h-2.4v-2.4h-15.829v2.4h-2.4v-2.4H3293.6A1.2,1.2,0,0,0,3292.4-4484Zm16.548,19.785v-2.4h2.4v2.4Zm-4.8,0v-2.4h2.4v2.4Zm-4.8,0v-2.4h2.4v2.4Zm-4.8,0v-2.4h2.4v2.4Zm19.186-4.8v-2.4h2.4v2.4Zm-4.8,0v-2.4h2.4v2.4Zm-4.8,0v-2.4h2.4v2.4Zm-4.8,0v-2.4h2.4v2.4Zm-4.8,0v-2.4h2.4v2.4Zm19.186-4.8v-2.4h2.4v2.4Zm-4.8,0v-2.4h2.4v2.4Zm-4.8,0v-2.4h2.4v2.4Zm-4.8,0v-2.4h2.4v2.4Zm-4.8,0v-2.4h2.4v2.4Z' transform='translate(-3290 4490)' fill='%231B8354'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-size: 1.25rem;
background-position: 1rem center;
}
[dir=ltr] .form-group .form-control.calendar {
background-position: calc(100% - 1rem) center;
}
.form-group .form-control.input-validation-error {
border-color: var(--dangerColor);
background: linear-gradient(#B42318, #B42318), linear-gradient(#fff, #fff);
background-size: 0 0.125rem, auto;
background-repeat: no-repeat;
background-position: center bottom;
}
.form-group .form-control.input-validation-error:is(:hover, :active, :focus) {
background-size: 100% 0.125rem, auto;
}
.form-group .form-control.input-validation-error + .nice-select::before {
background: #ff0000;
left: 0;
right: 0;
}
.contact-sec .form-group .form-control {
border-color: var(--form-field-background-darker, #F3F4F6);
background: linear-gradient(#0D121C, #0D121C), linear-gradient(#F3F4F6, #F3F4F6);
background-repeat: no-repeat;
background-position: center bottom;
background-size: 0 2px, auto;
}
.contact-sec .form-group .form-control:is(:hover) {
border-color: var(--form-field-border-default, #9DA4AE);
background: linear-gradient(#0D121C, #0D121C), linear-gradient(#F3F4F6, #F3F4F6);
background-repeat: no-repeat;
background-position: center bottom;
background-size: 0 2px, auto;
}
.contact-sec .form-group .form-control:focus, .contact-sec .form-group .form-control:focus-visible, .contact-sec .form-group .form-control:active, .contact-sec .form-group .form-control:focus:not(:focus-visible) {
border-color: var(--form-field-border-default, #9DA4AE);
background: linear-gradient(#0D121C, #0D121C), linear-gradient(#ffffff, #ffffff);
background-repeat: no-repeat;
background-position: center bottom;
background-size: 100% 2px, auto;
}
.form-group textarea.form-control {
min-height: 8.125rem;
resize: none;
}
.form-group textarea.form-control::-webkit-scrollbar {
width: 0.625rem;
height: 0.625rem;
}
.form-group textarea.form-control::-webkit-scrollbar-thumb {
background: var(--borderColor);
}
.form-group textarea.form-control::-webkit-scrollbar-track {
background: var(--grayColor-100);
}
.form-group textarea.form-control {
scrollbar-face-color: var(--borderColor);
scrollbar-track-color: var(--grayColor-100);
}
.form-group .input-group-abs {
gap: 1rem;
}
.form-group .input-group-abs > .input-group-prepend,
.form-group .input-group-abs > .input-group-append {
position: absolute;
padding: 0.3rem;
z-index: 11;
line-height: 1;
top: 0;
bottom: 0;
}
.form-group .input-group-abs > div.input-group-append {
inset-inline-end: 0;
}
.form-group .input-group-abs > div.input-group-append + .form-control {
padding-inline-end: 2.5rem;
}
.form-group .input-group-abs > div.input-group-prepend {
inset-inline-start: 0;
}
.form-group .input-group-abs > div.input-group-prepend .btn {
border: 0;
}
.form-group .input-group-abs > div.input-group-prepend + .form-control {
padding-inline-start: 2.5rem;
}
.form-group .input-group-abs > div.phone {
left: 0.0625rem;
align-content: center;
color: var(--grayColor);
padding-inline: 0.75rem;
background: #F3F4F6;
top: 0.0625rem;
bottom: 0.0625rem;
border-start-start-radius: 0.25rem !important;
border-end-start-radius: 0.25rem !important;
font-size: 0.9375rem;
margin: 0 !important;
transition: all 0.2s ease-out;
}
.form-group .input-group-abs:has(.phone) .form-control {
padding-left: 3.125rem;
}
.form-group .input-group-abs:has(.phone) .form-control:focus + .phone {
bottom: 0.1875rem;
}
.form-group .input-group-abs .form-control {
border-radius: 0.25rem !important;
}
.form-group .input-group-abs .form-control:first-child {
padding-inline-end: 2.5rem;
}
.form-group .input-group-abs .form-control:last-child {
padding-inline-start: 2.5rem;
}
.form-group .input-group-upload {
gap: 0.9375rem;
}
.form-group .input-group-upload .input-group-append .input-group-text {
padding: 0.375rem 0.9rem;
border-radius: 0.5rem !important;
}
.form-group .input-group-upload .form-control {
border-radius: 0.25rem !important;
}
.form-group .input-group-sel .input-group-prepend .input-group-text {
width: 72px;
padding: 0.375rem 0.1rem;
}
.form-group .input-group-sel .input-group-prepend .input-group-text option {
color: var(--primaryColor);
}
.form-group .input-group-prepend-append .input-group-prepend {
margin-right: 0.625rem;
}
.form-group .input-group-prepend-append .input-group-append {
margin-left: 0.625rem;
}
.form-group .input-group-prepend-append .input-group-append button {
border-radius: 0.25rem;
}
.form-group .input-group-prepend-append .input-group-prepend button,
.form-group .input-group-prepend-append .input-group-append button {
border-radius: 0.25rem;
font-weight: normal;
line-height: 1;
border-color: red;
color: red !important;
padding: 0.4rem 0.83rem;
}
.form-group .input-group-prepend-append .input-group-prepend button:hover,
.form-group .input-group-prepend-append .input-group-append button:hover {
background-color: red;
}
.form-group .input-group-prepend-append .form-control {
border-radius: 0.25rem !important;
}
.form-group .checkbox-theme {
margin-bottom: 1.5rem;
}
.form-group .checkbox-theme:last-child {
margin-bottom: 0;
}
.form-group--filter {
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
gap: 1rem;
}
.form-group--filter .form-label {
flex: 0 0 auto;
margin: 0;
color: var(--primaryColor);
font-weight: 700;
}
.form-group--filter .form-select {
width: 13.3125rem;
background-color: transparent;
color: var(--primaryColor) !important;
font-weight: 700;
}
.form-group .input-group-append .btn-primary:is(:hover, :focus, :active, :active:focus) {
border-color: var(--primaryColor);
}
/*checkbox-theme*/
.checkbox-theme {
padding-inline-start: 0;
position: relative;
}
.checkbox-theme .form-check-input {
position: absolute;
margin-inline-start: 0;
opacity: 0;
}
.checkbox-theme .form-check-label {
padding-inline-start: 2.5rem;
cursor: pointer;
font-weight: 500;
position: relative;
}
.checkbox-theme label::before {
content: "";
display: inline-block;
position: absolute;
width: 1.875rem;
height: 1.875rem;
margin-inline-start: -2.5rem;
border-radius: 0.125rem;
border: 0.0625rem solid var(--grayColor);
top: -0.25rem;
}
.checkbox-theme label.label-sm {
font-weight: 400;
padding-inline-start: 1.75rem;
}
.checkbox-theme label.label-sm::before {
width: 1.25rem;
height: 1.25rem;
margin-inline-start: -1.75rem;
font-size: 0.65rem !important;
top: 0;
}
.checkbox-theme label span {
color: var(--grayColor);
}
.checkbox-theme label:hover::before {
box-shadow: 0 0 0 0.5rem var(--grayColor-100);
background-color: var(--grayColor-100);
}
.checkbox-theme a {
color: var(--primaryColor);
text-decoration: underline;
}
.checkbox-theme input[type=checkbox]:checked + label::before {
content: "\e911";
background: var(--primaryColor-100);
border: solid 0.0625rem var(--primaryColor-100);
font-family: "icomoon";
color: var(--whiteColor);
font-size: 0.9375rem;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
line-height: 1;
}
.checkbox-theme input[type=radio] + label::before {
border-radius: 100%;
}
.checkbox-theme input[type=radio]:checked + label::before {
background: var(--primaryColor-100);
border: 1px solid var(--primaryColor-100);
box-shadow: 0 0 0 0.1875rem var(--whiteColor) inset;
}
.checkbox-theme input[type=radio]:checked:hover + label::before {
background: var(--primaryColor);
border-color: var(--primaryColor);
box-shadow: 0 0 0 0.5rem var(--grayColor-100), inset 0 0 0 0.1875rem #fff;
}
.checkbox-theme input[type=checkbox][readonly] + label::before,
.checkbox-theme input[type=radio][readonly] + label::before,
.checkbox-theme input[type=checkbox][disabled] + label::before,
.checkbox-theme input[type=radio][disabled] + label::before {
border-color: var(--grayLightColor);
}
.checkbox-theme input[type=checkbox][disabled] + label::before,
.checkbox-theme input[type=radio][disabled] + label::before {
background: var(--grayLightColor);
border: 1px solid var(--grayLightColor);
box-shadow: 0 0 0 0.1875rem var(--whiteColor) inset;
}
.checkbox-theme input[type=checkbox][readonly],
.checkbox-theme input[type=radio][readonly],
.checkbox-theme input[type=checkbox][disabled],
.checkbox-theme input[type=radio][disabled] {
pointer-events: none;
}
.checkbox-theme input[type=checkbox][readonly] + label,
.checkbox-theme input[type=radio][readonly] + label,
.checkbox-theme input[type=checkbox][disabled] + label,
.checkbox-theme input[type=radio][disabled] + label {
opacity: 1;
}
.checkbox-theme input[type=checkbox]:focus + label::after,
.checkbox-theme input[type=radio]:focus + label::after {
content: "";
display: inline-block;
position: absolute;
width: 2.375rem;
height: 2.375rem;
border-radius: 0.125rem;
border: 0.125rem solid var(--darkColor);
top: -0.5rem;
inset-inline-start: -0.25rem;
}
.checkbox-theme input[type=checkbox]:focus + label.label-sm::after,
.checkbox-theme input[type=radio]:focus + label.label-sm::after {
top: -0.25rem;
width: 1.75rem;
height: 1.75rem;
}
/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
.ms-formfieldcontainer input, .ms-formfieldcontainer select,
.ms-formfieldvaluecontainer input,
.ms-formfieldvaluecontainer select {
-webkit-appearance: auto;
-moz-appearance: auto;
appearance: auto;
}
[dir=rtl] [type=email], [dir=rtl] [type=number], [dir=rtl] [type=tel], [dir=rtl] [type=url] {
direction: rtl;
}
.nice-select .nice-select-search {
margin: 0;
}
.captcha {
display: flex;
align-items: stretch;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.captcha .captcha-frame {
width: 10.625rem;
overflow: hidden;
}
.captcha .captcha-frame img {
height: 100%;
aspect-ratio: 25/9;
}
.captcha .captcha-refresh {
background: transparent;
border: 0;
color: var(--primaryColor);
font-size: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0.25rem;
cursor: pointer;
}
.form-switch-custom {
cursor: pointer;
padding-left: 4rem;
line-height: 2;
}
.form-switch-custom .form-check-label {
position: relative;
}
.form-switch-custom .form-check-input {
width: 3.125rem;
height: 1.625rem;
border-radius: var(--radius-full, 9999px);
border: 0.0625rem solid var(--control-neutral-checked, #0D121C);
position: relative;
transition: all 0.2s ease-out;
margin-left: -4rem;
}
.form-switch-custom .form-check-input::before {
content: "";
position: absolute;
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
background-color: var(--control-neutral-checked, #0D121C);
top: 50%;
left: 0.125rem;
transform: translateY(-50%);
transition: all 0.2s ease-out;
}
.form-switch-custom .form-check-input:checked {
background-color: var(--control-primary-checked, #1B8354);
border-color: var(--control-primary-checked, #1B8354);
}
.form-switch-custom .form-check-input:checked::before {
left: calc(100% - 1.25rem - 0.125rem);
background-color: var(--Control-icon-hovered, #FFF);
}
.form-switch-custom .form-check-input:hover:not(:checked) {
box-shadow: 0 0 0 0.375rem var(--control-ripple-effect, #F3F4F6);
}
.form-switch-custom .form-check-input:hover:checked {
background-color: var(--control-primary-hovered, #14573A);
}
.form-switch-custom .form-check-input:focus, .form-switch-custom .form-check-input:focus-visible, .form-switch-custom .form-check-input:focus:not(:focus-visible) {
box-shadow: 0 0 0 0.375rem var(--control-ripple-effect, #F3F4F6);
}
.form-switch-custom .form-check-input:focus:checked::after, .form-switch-custom .form-check-input:focus-visible:checked::after, .form-switch-custom .form-check-input:focus:not(:focus-visible):checked::after {
content: "";
display: inline-block;
position: absolute;
width: 3.55rem;
height: 2.5rem;
border-radius: 0.125rem;
border: 0.125rem solid var(--border-black, #161616);
top: -0.5rem;
inset-inline-start: -0.25rem;
}
.form-switch-custom .form-check-input:disabled {
background: var(--control-disabled, #D2D6DB);
border-color: var(--control-disabled, #D2D6DB);
cursor: not-allowed;
}
.form-switch-custom .form-check-input:disabled::before {
background-color: var(--Control-icon-disabled, #FFF);
}
.form-group .form-control.form-select.nice-select.filter .current {
display: flex;
align-items: center;
gap: 0.4375rem;
}
.form-group .form-control.form-select.nice-select.filter .current::before {
font-family: "icomoon";
position: relative;
content: "\e92d";
font-size: 0.875rem;
}
/***
====================================================================
social media
====================================================================
***/
.ht-social-networks {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1.5rem;
}
.ht-social-networks li {
display: inline-block;
}
.ht-social-networks.solid-rounded-icon .social-link {
font-size: 1.5rem;
display: block;
text-align: center;
line-height: 1;
color: var(--whiteColor);
position: relative;
}
[class*=hint--] {
position: relative;
display: inline-block;
}
[class*=hint--]:before,
[class*=hint--]:after {
position: absolute;
transform: translate3d(0, 0, 0);
visibility: hidden;
opacity: 0;
z-index: 1000000;
pointer-events: none;
transition: 0.3s ease;
transition-delay: 0ms;
}
[class*=hint--]:hover:before,
[class*=hint--]:hover:after {
visibility: visible;
opacity: 1;
}
[class*=hint--]:hover:before,
[class*=hint--]:hover:after {
transition-delay: 100ms;
}
[class*=hint--]:before {
content: "";
position: absolute;
background: transparent;
border: 0.4375rem solid transparent;
z-index: 1000001;
}
[class*=hint--]:after {
background: var(--whiteColor);
color: var(--grayDarkColor);
padding: 0.55rem 1rem 0.55rem;
font-size: 1rem;
white-space: nowrap;
border-radius: 0.25rem;
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
}
[class*=hint--][aria-label]:after {
content: attr(aria-label);
}
[class*=hint--][data-hint]:after {
content: attr(data-hint);
}
[aria-label=""]:before,
[aria-label=""]:after,
[data-hint=""]:before,
[data-hint=""]:after {
display: none !important;
}
.hint--top:before {
border-top-color: var(--whiteColor);
}
.hint--top:before {
margin-bottom: -0.75rem;
}
.hint--top:before,
.hint--top:after {
bottom: 100%;
left: 50%;
}
.hint--top:before {
left: calc(50% - 0.4375rem);
}
.hint--top:after {
transform: translateX(-50%);
}
.hint--top:hover:before {
transform: translateY(-0.625rem);
}
.hint--top:hover:after {
transform: translateX(-50%) translateY(-0.625rem);
}
.hint--bottom:before {
border-bottom-color: var(--primaryColor-100);
}
.hint--bottom:before {
margin-top: -0.75rem;
}
.hint--bottom:before,
.hint--bottom:after {
top: 100%;
left: 50%;
}
.hint--bottom:before {
left: calc(50% - 0.4375rem);
}
.hint--bottom:after {
transform: translateX(-50%);
}
.hint--bottom:hover:before {
transform: translateY(0.625rem);
}
.hint--bottom:hover:after {
transform: translateX(-50%) translateY(0.625rem);
}
/***
====================================================================
Start accordion
====================================================================
***/
.accordion {
--bs-accordion-active-color:var(--primaryColor);
--bs-accordion-active-bg: transparent;
--bs-accordion-border-color: var(--borderColor);
--bs-accordion-btn-focus-border-color: none;
--bs-accordion-btn-focus-box-shadow: none;
--bs-accordion-btn-padding-x: 1rem;
--bs-accordion-body-padding-x: 1rem;
--bs-accordion-color:var(--grayDarkColor);
--bs-accordion-btn-color:var(--grayDarkColor);
--bs-accordion-bg: transparent;
--bs-accordion-border-color: var(--borderColor);
--bs-accordion-btn-icon-width: 1rem;
--bs-accordion-btn-padding-y: 1rem;
--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23080809'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
--bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23074D31'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
position: relative;
}
.dark-mode .accordion {
--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion .accordion-button {
font-size: 1.25rem;
font-weight: 600;
box-shadow: none;
border: 0.125rem solid transparent;
}
.accordion .accordion-button:focus, .accordion .accordion-button:hover {
color: inherit;
background-color: var(--grayColor-100);
}
.accordion .accordion-button:focus {
border-color: var(--darkColor);
}
.accordion .accordion-button:not(.collapsed) {
color: var(--grayDarkColor);
background-color: transparent;
}
.accordion .accordion-button:not(.collapsed):focus {
color: var(--grayDarkColor);
}
.accordion .accordion-body {
color: var(--grayMidColor);
padding-top: 1rem;
}
/***
====================================================================
Timeline
====================================================================
***/
.timeline-sec {
width: 21.875rem;
background-color: var(--primaryColor-400);
padding: 2rem;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
gap: 1.375rem;
border-radius: 1rem;
position: sticky;
top: 3.125rem;
}
@media (max-width: 991.98px) {
.timeline-sec {
width: 100%;
}
}
.timeline-sec__list {
width: 100%;
counter-reset: Number;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
}
@media (max-width: 991.98px) {
.timeline-sec__list {
flex-direction: row;
overflow: auto;
padding-bottom: 0.3125rem;
}
.timeline-sec__list::-webkit-scrollbar {
width: 0.3125rem;
height: 0.3125rem;
}
.timeline-sec__list::-webkit-scrollbar-thumb {
background: var(--primaryColor);
}
.timeline-sec__list::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
}
.timeline-sec__list {
scrollbar-face-color: var(--primaryColor);
scrollbar-track-color: rgba(255, 255, 255, 0.05);
}
.timeline-sec__list {
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
}
.timeline-sec__list__item {
counter-increment: Number;
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
gap: 0.3125rem;
color: var(--grayColor);
padding-inline-start: 2.8125rem;
padding-bottom: 3.75rem;
scroll-snap-align: start;
}
@media (max-width: 991.98px) {
.timeline-sec__list__item {
padding-bottom: 0;
padding-top: 2.8125rem;
padding-inline: 0.625rem;
align-items: center;
min-width: 13.4375rem;
text-align: center;
}
}
.timeline-sec__list__item::after {
content: counter(Number);
width: 2rem;
height: 2rem;
align-content: center;
text-align: center;
border: 0.0625rem solid var(--borderColor);
color: var(--borderColor);
border-radius: 100%;
position: absolute;
inset-inline-start: 0;
background-color: var(--primaryColor-400);
}
@media (max-width: 991.98px) {
.timeline-sec__list__item::after {
inset-inline-start: 0;
inset-inline-end: 0;
margin: auto;
top: 0;
}
}
.timeline-sec__list__item::before {
content: "";
position: absolute;
inset-inline-start: 0.9375rem;
width: 0.125rem;
top: 0;
bottom: 0;
background-color: var(--primaryColor-100);
}
@media (max-width: 991.98px) {
.timeline-sec__list__item::before {
height: 0.125rem;
width: 100%;
inset-inline-start: 0;
top: 0.9375rem;
}
}
.timeline-sec__list__item.done {
color: var(--grayDarkColor);
}
.timeline-sec__list__item.done::after {
font-family: "icomoon";
border: 0.0625rem solid var(--primaryColor-100);
background-color: var(--primaryColor-100);
color: var(--primaryTextColor);
content: "\e911";
font-size: 0.875rem;
line-height: 1;
}
.timeline-sec__list__item:last-of-type {
padding-bottom: 0;
}
@media (min-width: 992px) {
.timeline-sec__list__item:last-of-type::before {
content: none;
}
}
@media (max-width: 991.98px) {
.timeline-sec__list__item:last-of-type::before {
inset-inline-end: 50%;
width: 50%;
}
}
@media (max-width: 991.98px) {
.timeline-sec__list__item:first-of-type::before {
inset-inline-start: 50%;
width: 50%;
}
}
.aside-service {
width: 25.9375rem;
background-color: var(--whiteColor);
padding: 2rem;
border: 0.0625rem solid var(--borderColor);
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
gap: 3rem;
border-radius: 1rem;
position: sticky;
top: 5rem;
}
@media (max-width: 1199.98px) {
.aside-service {
width: 100%;
}
}
.aside-service > div {
width: 100%;
}
.aside-service__rows {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
gap: 1rem;
width: 100%;
}
.aside-service__rows::before {
content: "";
position: absolute;
inset-block-end: -1.5rem;
inset-inline: 0;
height: 0.0625rem;
background-color: var(--borderColor);
}
.aside-service__rows__inner {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: row;
gap: 0.625rem;
}
.aside-service__rows__inner__icon {
flex: 0 0 auto;
width: 1.375rem;
margin-top: 0.1875rem;
}
.aside-service__rows__inner__caption__title {
margin-bottom: 0.4375rem;
}
.aside-service__rows__inner__caption__dets {
text-align: start;
margin-bottom: 0;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: row;
flex-wrap: wrap;
gap: 0.5rem;
}
.aside-service__rows__inner__caption__dets__logo {
width: 3.875rem;
height: 2.6875rem;
border: 0.0625rem solid var(--borderColor);
border-radius: 0.375rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.aside-service__rows__inner__caption__dets__logo img {
max-width: 95%;
max-height: 95%;
}
.aside-service__rows__inner__caption__dets .link {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
gap: 0.4375rem;
color: var(--primaryColor-100);
transition: all 0.1s ease-in-out;
}
.aside-service__rows__inner__caption__dets .link:hover {
color: var(--primaryColor-300) !important;
text-decoration: underline;
}
.aside-service__rows__inner__caption__dets .link:active {
color: #88D8AD !important;
text-decoration: underline;
}
.aside-service__rows__inner__caption__dets .link:focus, .aside-service__rows__inner__caption__dets .link:focus-visible {
color: var(--primaryColor-100) !important;
outline: 0.125rem solid var(--grayDarkColor);
text-decoration: none;
}
.aside-service__rows:last-of-type::before {
display: none;
}
.pagination-main .pagination, .paginationjs-pages .pagination {
gap: 0.625rem;
margin: 0;
padding: 0;
list-style-type: none;
}
.pagination-main .pagination .page-item,
.pagination-main .pagination .page-page,
.pagination-main .pagination .page-next,
.pagination-main .pagination .page-prev, .paginationjs-pages .pagination .page-item,
.paginationjs-pages .pagination .page-page,
.paginationjs-pages .pagination .page-next,
.paginationjs-pages .pagination .page-prev {
position: relative;
color: var(--primaryColor);
}
.pagination-main .pagination .page-item .page-link,
.pagination-main .pagination .page-item a,
.pagination-main .pagination .page-page .page-link,
.pagination-main .pagination .page-page a,
.pagination-main .pagination .page-next .page-link,
.pagination-main .pagination .page-next a,
.pagination-main .pagination .page-prev .page-link,
.pagination-main .pagination .page-prev a, .paginationjs-pages .pagination .page-item .page-link,
.paginationjs-pages .pagination .page-item a,
.paginationjs-pages .pagination .page-page .page-link,
.paginationjs-pages .pagination .page-page a,
.paginationjs-pages .pagination .page-next .page-link,
.paginationjs-pages .pagination .page-next a,
.paginationjs-pages .pagination .page-prev .page-link,
.paginationjs-pages .pagination .page-prev a {
box-shadow: none;
outline: none;
min-width: 1.75rem;
text-align: center;
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
padding: 0;
color: var(--grayDarkColor);
box-shadow: none;
border: 0;
border-radius: 0;
font-size: 1.0625rem;
height: 2rem;
}
.pagination-main .pagination .page-item .page-link svg path,
.pagination-main .pagination .page-item a svg path,
.pagination-main .pagination .page-page .page-link svg path,
.pagination-main .pagination .page-page a svg path,
.pagination-main .pagination .page-next .page-link svg path,
.pagination-main .pagination .page-next a svg path,
.pagination-main .pagination .page-prev .page-link svg path,
.pagination-main .pagination .page-prev a svg path, .paginationjs-pages .pagination .page-item .page-link svg path,
.paginationjs-pages .pagination .page-item a svg path,
.paginationjs-pages .pagination .page-page .page-link svg path,
.paginationjs-pages .pagination .page-page a svg path,
.paginationjs-pages .pagination .page-next .page-link svg path,
.paginationjs-pages .pagination .page-next a svg path,
.paginationjs-pages .pagination .page-prev .page-link svg path,
.paginationjs-pages .pagination .page-prev a svg path {
stroke: var(--primaryColor);
}
.pagination-main .pagination .page-item .page-link[disabled],
.pagination-main .pagination .page-item a[disabled],
.pagination-main .pagination .page-page .page-link[disabled],
.pagination-main .pagination .page-page a[disabled],
.pagination-main .pagination .page-next .page-link[disabled],
.pagination-main .pagination .page-next a[disabled],
.pagination-main .pagination .page-prev .page-link[disabled],
.pagination-main .pagination .page-prev a[disabled], .paginationjs-pages .pagination .page-item .page-link[disabled],
.paginationjs-pages .pagination .page-item a[disabled],
.paginationjs-pages .pagination .page-page .page-link[disabled],
.paginationjs-pages .pagination .page-page a[disabled],
.paginationjs-pages .pagination .page-next .page-link[disabled],
.paginationjs-pages .pagination .page-next a[disabled],
.paginationjs-pages .pagination .page-prev .page-link[disabled],
.paginationjs-pages .pagination .page-prev a[disabled] {
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.pagination-main .pagination .page-item .page-link:is(:focus, :active:focus),
.pagination-main .pagination .page-item a:is(:focus, :active:focus),
.pagination-main .pagination .page-page .page-link:is(:focus, :active:focus),
.pagination-main .pagination .page-page a:is(:focus, :active:focus),
.pagination-main .pagination .page-next .page-link:is(:focus, :active:focus),
.pagination-main .pagination .page-next a:is(:focus, :active:focus),
.pagination-main .pagination .page-prev .page-link:is(:focus, :active:focus),
.pagination-main .pagination .page-prev a:is(:focus, :active:focus), .paginationjs-pages .pagination .page-item .page-link:is(:focus, :active:focus),
.paginationjs-pages .pagination .page-item a:is(:focus, :active:focus),
.paginationjs-pages .pagination .page-page .page-link:is(:focus, :active:focus),
.paginationjs-pages .pagination .page-page a:is(:focus, :active:focus),
.paginationjs-pages .pagination .page-next .page-link:is(:focus, :active:focus),
.paginationjs-pages .pagination .page-next a:is(:focus, :active:focus),
.paginationjs-pages .pagination .page-prev .page-link:is(:focus, :active:focus),
.paginationjs-pages .pagination .page-prev a:is(:focus, :active:focus) {
box-shadow: inset 0 0 0 0.125rem var(--darkColor);
}
.pagination-main .pagination .page-item.active .page-link::before,
.pagination-main .pagination .page-item.active a::before,
.pagination-main .pagination .page-page.active .page-link::before,
.pagination-main .pagination .page-page.active a::before,
.pagination-main .pagination .page-next.active .page-link::before,
.pagination-main .pagination .page-next.active a::before,
.pagination-main .pagination .page-prev.active .page-link::before,
.pagination-main .pagination .page-prev.active a::before, .paginationjs-pages .pagination .page-item.active .page-link::before,
.paginationjs-pages .pagination .page-item.active a::before,
.paginationjs-pages .pagination .page-page.active .page-link::before,
.paginationjs-pages .pagination .page-page.active a::before,
.paginationjs-pages .pagination .page-next.active .page-link::before,
.paginationjs-pages .pagination .page-next.active a::before,
.paginationjs-pages .pagination .page-prev.active .page-link::before,
.paginationjs-pages .pagination .page-prev.active a::before {
content: "";
position: absolute;
inset-block-end: 0;
inset-inline: 0.1875rem;
height: 0.21875rem;
background-color: var(--primaryColor-100);
border-radius: 0.75rem;
}
.pagination-main .pagination .page-item .page-link:is(.active),
.pagination-main .pagination .page-item a:is(.active),
.pagination-main .pagination .page-page .page-link:is(.active),
.pagination-main .pagination .page-page a:is(.active),
.pagination-main .pagination .page-next .page-link:is(.active),
.pagination-main .pagination .page-next a:is(.active),
.pagination-main .pagination .page-prev .page-link:is(.active),
.pagination-main .pagination .page-prev a:is(.active), .paginationjs-pages .pagination .page-item .page-link:is(.active),
.paginationjs-pages .pagination .page-item a:is(.active),
.paginationjs-pages .pagination .page-page .page-link:is(.active),
.paginationjs-pages .pagination .page-page a:is(.active),
.paginationjs-pages .pagination .page-next .page-link:is(.active),
.paginationjs-pages .pagination .page-next a:is(.active),
.paginationjs-pages .pagination .page-prev .page-link:is(.active),
.paginationjs-pages .pagination .page-prev a:is(.active) {
border-bottom: 0.1875rem solid var(--primaryColor-100);
}
.pagination-main .pagination .page-item .page-link:is(.active):is(:hover, :focus),
.pagination-main .pagination .page-item a:is(.active):is(:hover, :focus),
.pagination-main .pagination .page-page .page-link:is(.active):is(:hover, :focus),
.pagination-main .pagination .page-page a:is(.active):is(:hover, :focus),
.pagination-main .pagination .page-next .page-link:is(.active):is(:hover, :focus),
.pagination-main .pagination .page-next a:is(.active):is(:hover, :focus),
.pagination-main .pagination .page-prev .page-link:is(.active):is(:hover, :focus),
.pagination-main .pagination .page-prev a:is(.active):is(:hover, :focus), .paginationjs-pages .pagination .page-item .page-link:is(.active):is(:hover, :focus),
.paginationjs-pages .pagination .page-item a:is(.active):is(:hover, :focus),
.paginationjs-pages .pagination .page-page .page-link:is(.active):is(:hover, :focus),
.paginationjs-pages .pagination .page-page a:is(.active):is(:hover, :focus),
.paginationjs-pages .pagination .page-next .page-link:is(.active):is(:hover, :focus),
.paginationjs-pages .pagination .page-next a:is(.active):is(:hover, :focus),
.paginationjs-pages .pagination .page-prev .page-link:is(.active):is(:hover, :focus),
.paginationjs-pages .pagination .page-prev a:is(.active):is(:hover, :focus) {
background-color: var(--grayColor-100);
}
.pagination-main .pagination .page-item .page-link:is(.active) svg path,
.pagination-main .pagination .page-item a:is(.active) svg path,
.pagination-main .pagination .page-page .page-link:is(.active) svg path,
.pagination-main .pagination .page-page a:is(.active) svg path,
.pagination-main .pagination .page-next .page-link:is(.active) svg path,
.pagination-main .pagination .page-next a:is(.active) svg path,
.pagination-main .pagination .page-prev .page-link:is(.active) svg path,
.pagination-main .pagination .page-prev a:is(.active) svg path, .paginationjs-pages .pagination .page-item .page-link:is(.active) svg path,
.paginationjs-pages .pagination .page-item a:is(.active) svg path,
.paginationjs-pages .pagination .page-page .page-link:is(.active) svg path,
.paginationjs-pages .pagination .page-page a:is(.active) svg path,
.paginationjs-pages .pagination .page-next .page-link:is(.active) svg path,
.paginationjs-pages .pagination .page-next a:is(.active) svg path,
.paginationjs-pages .pagination .page-prev .page-link:is(.active) svg path,
.paginationjs-pages .pagination .page-prev a:is(.active) svg path {
stroke: var(--primaryTextColor);
}
.pagination-main .pagination .page-item .page-link:is(:hover, :focus),
.pagination-main .pagination .page-item a:is(:hover, :focus),
.pagination-main .pagination .page-page .page-link:is(:hover, :focus),
.pagination-main .pagination .page-page a:is(:hover, :focus),
.pagination-main .pagination .page-next .page-link:is(:hover, :focus),
.pagination-main .pagination .page-next a:is(:hover, :focus),
.pagination-main .pagination .page-prev .page-link:is(:hover, :focus),
.pagination-main .pagination .page-prev a:is(:hover, :focus), .paginationjs-pages .pagination .page-item .page-link:is(:hover, :focus),
.paginationjs-pages .pagination .page-item a:is(:hover, :focus),
.paginationjs-pages .pagination .page-page .page-link:is(:hover, :focus),
.paginationjs-pages .pagination .page-page a:is(:hover, :focus),
.paginationjs-pages .pagination .page-next .page-link:is(:hover, :focus),
.paginationjs-pages .pagination .page-next a:is(:hover, :focus),
.paginationjs-pages .pagination .page-prev .page-link:is(:hover, :focus),
.paginationjs-pages .pagination .page-prev a:is(:hover, :focus) {
background-color: var(--grayColor-100);
border-radius: 0.25rem;
}
.pagination-main .pagination .page-item a[rel=prev], .paginationjs-pages .pagination .page-item a[rel=prev] {
border-color: transparent;
}
.pagination-main .pagination .page-item a[rel=prev]::before, .paginationjs-pages .pagination .page-item a[rel=prev]::before {
font-family: "icomoon";
content: "\e90b";
}
[dir=ltr] .pagination-main .pagination .page-item a[rel=prev]::before, [dir=ltr] .paginationjs-pages .pagination .page-item a[rel=prev]::before {
transform: scaleX(-1);
}
.pagination-main .pagination .page-item a[rel=next], .paginationjs-pages .pagination .page-item a[rel=next] {
border-color: transparent;
}
.pagination-main .pagination .page-item a[rel=next]::before, .paginationjs-pages .pagination .page-item a[rel=next]::before {
font-family: "icomoon";
content: "\e90c";
}
[dir=ltr] .pagination-main .pagination .page-item a[rel=next]::before, [dir=ltr] .paginationjs-pages .pagination .page-item a[rel=next]::before {
transform: scaleX(-1);
}
.pagination-main .pagination .page-item.active .page-link, .paginationjs-pages .pagination .page-item.active .page-link {
border-radius: 0 !important;
}
[dir=ltr] .pagination-main .pagination .page-prev,
[dir=ltr] .pagination-main .pagination .page-next, [dir=ltr] .paginationjs-pages .pagination .page-prev,
[dir=ltr] .paginationjs-pages .pagination .page-next {
transform: scaleX(-1);
}
.pagination-main .pagination .page-prev a,
.pagination-main .pagination .page-next a, .paginationjs-pages .pagination .page-prev a,
.paginationjs-pages .pagination .page-next a {
border-color: transparent !important;
}
.ms-webpart-zone.ms-fullWidth .pagination-main, .ms-webpart-zone.ms-fullWidth .paginationjs-pages {
margin-top: 3.125rem;
margin-bottom: 0;
}
select.custom-select {
border: none;
}
.nice-select {
width: 100%;
height: unset;
line-height: 1;
background-image: none;
color: var(--grayColor);
display: flex;
align-items: center;
min-width: 15.625rem;
font-size: 1rem;
}
.nice-select::before {
content: "";
position: absolute;
z-index: -1;
left: 51%;
right: 51%;
bottom: 0;
background: #161616;
height: 2px;
transition-property: left, right;
transition-duration: 0.3s;
transition-timing-function: ease-out;
border-radius: 1px;
z-index: 99;
}
.nice-select:hover::before, .nice-select:focus::before, .nice-select:active::before {
left: 0;
right: 0;
}
.nice-select::after {
top: 50%;
right: unset;
inset-inline-end: 1rem;
width: 0.8125rem;
height: 0.8125rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12.7 6.96'%3E%3Cpath d='M6.35,7,0,.71.7,0,6.35,5.56,12,0l.7.71Z' fill='%23000'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: none;
margin-top: 0;
transform-origin: top;
transform: rotate(0deg) translateY(-50%);
transition: all 0.3s ease-in-out;
}
@media (hover: hover) {
.nice-select:hover {
border-color: #DCDCDC;
}
}
.nice-select:focus {
background-image: none;
border-color: var(--clr-light-green);
}
.nice-select .nice-select-dropdown {
inset: unset;
top: calc(100% + 0.3125rem);
inset-inline-start: 0;
min-width: 100%;
background-color: #fff;
border: 0.0625rem solid #DCDCDC;
border-radius: 0;
box-shadow: 0 1.25rem 1.5rem -0.25rem rgba(16, 24, 40, 0.08), 0 0.5rem 0.5rem -0.25rem rgba(16, 24, 40, 0.03);
padding: 0.75rem;
margin-top: 0;
max-width: 18rem;
}
.nice-select .list {
max-height: 20.9375rem;
border-radius: 0;
white-space: normal;
}
.nice-select .list::-webkit-scrollbar {
width: 0.4375rem;
height: 0.4375rem;
}
.nice-select .list::-webkit-scrollbar-thumb {
background: var(--borderColor);
}
.nice-select .list::-webkit-scrollbar-track {
background: var(--grayColor-100);
}
.nice-select .list {
scrollbar-face-color: var(--borderColor);
scrollbar-track-color: var(--grayColor-100);
}
.nice-select .list:last-child {
margin-bottom: 0;
}
.nice-select .option {
line-height: 1.5;
text-align: start;
color: var(--darkColor);
padding: 0.5rem;
padding-inline-end: 2rem;
transition: all 0.3s ease-in-out;
font-size: 1rem;
}
@media (hover: hover) {
.nice-select .option:hover {
background-color: #F3F4F6;
}
}
.nice-select .option.selected {
font-weight: normal;
background-image: url("data:image/svg+xml,%0A%3Csvg width='16' height='12' viewBox='0 0 16 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.6668 1.5L5.50016 10.6667L1.3335 6.5' stroke='%23161616' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-size: 1.1875rem;
}
[dir=rtl] .nice-select .option {
background-position: left 0.625rem center;
}
[dir=ltr] .nice-select .option {
background-position: right 0.625rem center;
}
.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected, .nice-select .option.selected.focus {
background-color: #f3f4f6;
}
.nice-select.open::after {
transform: rotateX(180deg) rotateY(180deg) translateY(-50%);
}
.filterd-dropdown .nice-select {
height: 100%;
}
.filterd-dropdown .nice-select .nice-select-search-box {
display: none;
}
.frmSearch {
margin-bottom: -3.125rem;
display: flex;
justify-content: flex-end;
position: relative;
z-index: 1;
}
.media-section {
position: relative;
margin-bottom: 1.5rem;
}
.media-section__video-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
overflow: hidden;
height: 31.25rem;
}
.media-section__video-container::after {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
pointer-events: none;
transition: opacity 0.3s ease-in-out;
}
.media-section__video-container.is-playing::after {
opacity: 0;
}
.media-section__video {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.media-section__video-ply-btn {
position: absolute;
background-color: transparent;
border: none;
z-index: 1;
padding: 0;
transition: all 0.3s ease-in-out;
}
@media (hover: hover) {
.media-section__video-ply-btn:hover {
transform: scale(1.25);
}
}
.media-section__video-ply-btn::before {
font-family: "icomoon";
content: "\e91b";
font-size: 3rem;
color: var(--primaryColor-100);
}
.is-playing .media-section__video-ply-btn::before {
content: "\e91a";
}
.media-section__video-ply-btn::after {
position: absolute;
content: "";
inset-inline: 0.625rem;
background-color: #fff;
z-index: -1;
height: 1.75rem;
margin: auto;
top: 0;
bottom: 0;
border-radius: 100%;
}
.media-section__video-ply-btn i {
font-size: 3rem;
}
.is-playing .media-section__video-ply-btn i::before {
content: "\e91a";
}
.media-section__video-ply-btn > svg {
width: 3.875rem;
height: 3.875rem;
-o-object-fit: contain;
object-fit: contain;
filter: drop-shadow(0 0.25rem 0.25rem rgba(0, 0, 0, 0.25));
}
@media (max-width: 768px) {
.media-section__video-ply-btn > svg {
width: 3rem;
height: 3rem;
}
}
.is-playing .media-section__video-ply-btn {
opacity: 0;
pointer-events: none;
}
@media (hover: hover) {
.media-section__video-container:hover .media-section__video-ply-btn {
opacity: 1;
pointer-events: auto;
}
}
.rdia-tabs {
padding: 0 !important;
list-style-type: none !important;
margin-bottom: 1.5rem;
--bs-nav-pills-border-radius: 0;
--bs-nav-pills-link-active-color: var(--darkColor);
--bs-nav-pills-link-active-bg: transparent;
--bs-link-color: #384250;
--bs-link-hover-color: var(--darkColor);
gap: 2rem;
position: relative;
padding-inline: 1rem !important;
flex: 1 0 0;
}
.rdia-tabs::after {
content: "";
position: absolute;
bottom: 0;
border-radius: var(--radius-full, 9999px);
height: 0.1875rem;
inset-inline: 0;
border-radius: var(--radius-full, 9999px);
background: var(--border-neutral-primary, #D2D6DB);
}
.rdia-tabs .nav-item .nav-link {
padding-inline: 0;
position: relative;
font-weight: 500;
padding-bottom: 1rem;
z-index: 1;
}
.rdia-tabs .nav-item .nav-link:after {
content: "";
position: absolute;
z-index: -1;
inset: -0.625rem;
inset-block-end: 0;
background: var(--button-background-neutral-hovered, #F3F4F6);
opacity: 0;
border-radius: 0.25rem;
transition: all 100ms ease;
}
.rdia-tabs .nav-item .nav-link::before {
content: "";
position: absolute;
height: 0.1875rem;
inset-inline: 0;
bottom: 0;
opacity: 0;
transition: all 100ms ease;
z-index: 1;
border-radius: var(--radius-full, 9999px);
background: var(--border-primary, #1B8354);
}
.rdia-tabs .nav-item .nav-link:is(:hover, :active, :focus)::before {
opacity: 1;
}
.rdia-tabs .nav-item .nav-link:hover:after {
opacity: 1;
}
.rdia-tabs .nav-item .nav-link:hover::before {
background: var(--border-black, #161616);
}
.rdia-tabs .nav-item .nav-link:focus::before, .rdia-tabs .nav-item .nav-link:focus-visible::before, .rdia-tabs .nav-item .nav-link:active::before, .rdia-tabs .nav-item .nav-link:focus:not(:focus-visible)::before {
background: var(--border-primary, #1B8354);
}
.rdia-tabs .nav-item .nav-link:focus:after, .rdia-tabs .nav-item .nav-link:focus-visible:after, .rdia-tabs .nav-item .nav-link:active:after, .rdia-tabs .nav-item .nav-link:focus:not(:focus-visible):after {
opacity: 1;
background-color: transparent;
outline: 0.125rem solid var(--border-black, #161616);
outline-offset: 0;
}
.rdia-tabs .nav-item .nav-link.active {
pointer-events: none;
}
.rdia-tabs .nav-item .nav-link.active::before {
opacity: 1;
}
.tab-content__inner ul {
counter-reset: list-counter;
padding-inline-start: 0 !important;
list-style-type: none !important;
line-height: 1.8;
}
.tab-content__inner ul li {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: row;
gap: 0.3125rem;
margin-bottom: 0.5rem;
}
.tab-content__inner ul li::before {
counter-increment: list-counter;
content: counter(list-counter) "- ";
}
.agenda-tabs .nav {
justify-content: flex-end;
z-index: 1;
position: relative;
}
.agenda-tabs .nav .nav-item {
overflow: hidden;
border-inline-end: 0.0625rem solid var(--borderColor);
}
.agenda-tabs .nav .nav-item:first-of-type {
border-radius: 0.5rem 0 0 0.5rem;
}
[dir=rtl] .agenda-tabs .nav .nav-item:first-of-type {
border-radius: 0 0.5rem 0.5rem 0;
}
.agenda-tabs .nav .nav-item:last-of-type {
border-radius: 0 0.5rem 0.5rem 0;
border: 0;
}
[dir=rtl] .agenda-tabs .nav .nav-item:last-of-type {
border-radius: 0.5rem 0 0 0.5rem;
}
.agenda-tabs .nav .nav-item .nav-link {
background-color: var(--whiteColor);
overflow: hidden;
border-radius: 0;
padding: 0.875rem 1.5rem;
color: var(--darkColor);
font-weight: 500;
font-size: 1.1875rem;
}
.agenda-tabs .nav .nav-item .nav-link.active {
background-color: var(--darkColor);
color: var(--whiteColor);
}
.agenda-tabs__rows {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
gap: 3.75rem;
}
@media (max-width: 767.98px) {
.agenda-tabs__rows {
margin-top: 2rem;
gap: 2rem;
}
}
.agenda-tabs__rows__date {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
gap: 0.3125rem;
margin-top: -2.1875rem;
width: 100%;
}
@media (max-width: 767.98px) {
.agenda-tabs__rows__date {
margin-top: 0;
}
}
.agenda-tabs__rows__date img {
height: 1.25rem;
}
.agenda-tabs__rows__content {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
gap: 1.5rem;
width: 100%;
}
.agenda-tabs__rows__card {
background-color: var(--whiteColor);
border-radius: var(--radius-lg);
width: 100%;
}
.agenda-tabs__rows__card__inner {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: row;
gap: 2.5rem;
padding: 2.5rem;
}
@media (max-width: 767.98px) {
.agenda-tabs__rows__card__inner {
gap: 1.5rem;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
}
}
.agenda-tabs__rows__card__date {
flex: 0 0 auto;
width: 12.5rem;
color: var(--primaryColor-100);
font-weight: 500;
}
.agenda-tabs__rows__card__caption {
flex: 1 0 0;
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
gap: 0.25rem;
}
.agenda-tabs__rows__card__par {
margin-bottom: 0;
}
.agenda-tabs__rows__card__user {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
gap: 0.875rem;
margin-top: 1.25rem;
}
.agenda-tabs__rows__card__user__thumb {
flex: 0 0 auto;
width: 4.0625rem;
height: 4.0625rem;
border-radius: 100%;
overflow: hidden;
}
.agenda-tabs__rows__card__user__thumb img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.agenda-tabs__rows__card__user__name {
font-weight: 500;
}
.agenda-tabs__rows__card__user__title {
margin: 0;
}
.page-details__inner__tabs__nav {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1.5rem;
}
.page-details__inner__tabs__nav .nav {
margin-bottom: 0;
}
/***
====================================================================
Start Alerts
====================================================================
***/
.alert {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
gap: 1rem;
border-radius: 0.5rem;
border: 0.0625rem solid #D2D6DB;
border-inline-start: 0.5rem solid transparent;
background: #fff;
}
.alert__icon {
width: 2.5rem;
height: 2.5rem;
align-content: center;
text-align: center;
border-radius: 100%;
}
.alert__caption__title {
color: var(--grayDarkColor);
}
.alert .btn-close {
opacity: 0.85;
background-size: 0.875rem;
padding: 1.25rem 1.5rem;
}
.alert.alert-success {
border-color: #ABEFC6;
border-inline-start-color: #079455;
background: #F6FEF9;
}
.alert.alert-success .alert__caption__title {
color: var(--primaryColor-200);
}
.alert.alert-success .alert__icon {
background-color: #ECFDF3;
}
.alert.alert-warning {
border-inline-start-color: #DC6803;
}
.alert.alert-warning .alert__icon {
background-color: #FFFAEB;
}
.alert.alert-info {
border-inline-start-color: #1570EF;
}
.alert.alert-info .alert__icon {
background-color: #EFF8FF;
}
.alert.alert-danger {
border-inline-start-color: #D92D20;
}
.alert.alert-danger .alert__icon {
background-color: #FEF3F2;
}
.alert.alert-light {
border: 0;
padding: 0;
gap: 0.5rem;
}
.alert.alert-light .alert__caption__title {
font-weight: 400;
}
.alert.alert-light .alert__icon {
background-color: transparent;
width: auto;
height: auto;
line-height: 1;
position: relative;
top: 0.0625rem;
color: var(--primaryColor-100);
}
.ui-datepicker {
width: -moz-fit-content;
width: fit-content;
padding: 0;
padding: 0;
background-color: transparent;
border: 0 !important;
z-index: 9 !important;
background-color: var(--whiteColor);
min-width: 20rem;
box-shadow: 0px 1.5rem 3rem -0.75rem rgba(16, 24, 40, 0.18);
border-radius: 0.5rem;
overflow: hidden;
}
.multi-calendar .ui-datepicker {
width: 100% !important;
background-color: transparent;
border: 0;
}
.multi-calendar .ui-datepicker .ui-datepicker-current {
border: 1px solid var(--primaryColor-100);
display: flex;
width: auto;
height: auto;
padding: 4px 24px 8px;
border-radius: 100px;
color: var(--primaryColor-100);
font-family: "SSTArabic-Medium";
}
.multi-calendar .ui-datepicker .ui-datepicker-current:is(:hover, :active, :focus) {
background-color: var(--primaryColor-100);
color: #fff;
}
.ui-datepicker .ui-datepicker-header {
position: relative;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 0;
padding: 1rem;
background-color: white;
}
.multi-calendar .ui-datepicker .ui-datepicker-header {
border: 0;
background-color: transparent;
color: var(--primaryColor-100);
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-next,
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
position: absolute;
top: 50%;
right: auto;
left: auto;
width: 1.875rem;
height: 1.875rem;
cursor: pointer;
border-radius: 0;
margin-top: -0.9375rem;
transition: background-color 0.3s ease-in-out;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-next::before,
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev::before {
font-family: "icomoon";
display: inline-block;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-next .ui-icon,
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev .ui-icon {
display: none;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-next.ui-state-hover,
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev.ui-state-hover {
background-color: var(--grayColor-100);
border: none;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-next {
inset-inline-end: 0.625rem;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-next::before {
content: "\e902";
transform: scaleX(1);
}
[dir=rtl] .ui-datepicker .ui-datepicker-header .ui-datepicker-next::before {
transform: scaleX(-1);
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev {
inset-inline-start: auto;
inset-inline-end: 2.5rem;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev::before {
content: "\e902";
}
[dir=ltr] .ui-datepicker .ui-datepicker-header .ui-datepicker-prev::before {
transform: scaleX(-1);
}
.ui-datepicker .ui-datepicker-header a {
color: inherit;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-title {
line-height: 1;
font-weight: 500;
font-size: 1rem;
margin: 0;
margin-inline-end: auto;
}
.multi-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-title {
color: var(--secondary);
}
.ui-datepicker .ui-datepicker-calendar {
margin-bottom: 0;
}
.ui-datepicker .ui-datepicker-calendar thead tr th {
font-weight: bold;
font-size: 0.75rem;
padding: 0.625rem 0.25rem;
color: var(--grayColor);
}
.multi-calendar .ui-datepicker .ui-datepicker-calendar thead tr th {
background-color: transparent;
}
.ui-datepicker tbody tr td {
position: relative;
vertical-align: top;
font-size: 0.875rem;
text-align: center;
background-color: var(--whiteColor);
padding: 0;
color: var(--darkColor);
}
.ui-datepicker tbody tr td.ui-state-disabled {
opacity: 1;
border: 0;
color: var(--grayColor);
}
.ui-datepicker tbody tr td.ui-state-disabled .ui-state-default {
color: var(--grayColor);
}
.multi-calendar .ui-datepicker tbody tr td {
background-color: transparent;
border: 0;
}
.ui-datepicker .ui-state-default {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
color: var(--darkColor);
background-color: transparent;
border: none;
border-radius: 100%;
margin: auto;
padding: 0;
}
.ui-datepicker .ui-state-default:hover {
background-color: var(--grayColor-100);
}
.ui-datepicker .ui-state-highlight {
background-color: var(--primaryColor-100);
color: var(--primaryTextColor);
}
.ui-datepicker .ui-state-highlight:hover {
color: var(--primaryTextColor);
background-color: var(--primaryColor-100);
}
.ui-datepicker .ui-state-active {
border: 0.0625rem solid var(--primaryColor-100);
color: var(--primaryColor-100);
}
.ui-datepicker .ui-state-active:hover {
background-color: var(--primaryColor-300);
}
.ui-datepicker-group {
position: relative;
height: 100%;
min-height: 365px;
padding-inline-end: 5px;
}
.multi-calendar .ui-datepicker-group:not(.ui-datepicker-group-last):after {
position: absolute;
inset-inline-end: 0;
top: 50%;
transform: translateY(-50%);
content: "";
margin: auto 0;
height: 200px;
width: 1px;
background-color: #c2c2c2;
}
.full-calendar .ui-datepicker {
width: 100%;
padding: 0;
background-color: transparent;
border: 0;
}
.full-calendar .ui-datepicker .ui-datepicker-header {
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
border: none;
color: #fff;
gap: 8px;
border-radius: 0;
padding: 1.157rem 1.25rem;
}
.full-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-next,
.full-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-prev {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
position: relative;
width: 1.875rem;
height: 1.875rem;
top: auto;
bottom: auto;
margin: 0;
cursor: pointer;
border-radius: 0;
transition: background-color 0.3s ease-in-out;
}
.full-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-next::before,
.full-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-prev::before {
content: "";
width: 0.75rem;
height: 0.75rem;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.full-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-next .ui-icon,
.full-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-prev .ui-icon {
display: none;
}
.full-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-next.ui-state-hover,
.full-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-prev.ui-state-hover {
background-color: var(--primaryColor-100);
}
.full-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-next.ui-state-hover::before,
.full-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-prev.ui-state-hover::before {
filter: brightness(0) invert(1);
}
.full-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-next.ui-state-hover,
.full-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-prev.ui-state-hover {
border: none;
}
.full-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-next {
order: 2;
}
.full-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-next::before {
background-image: url(../images/arrow-left-icon.svg);
}
[dir=rtl] .full-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-next::before {
background-image: url(../images/arrow-right-icon.svg);
}
.full-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-prev {
inset-inline-start: 0;
}
.full-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-prev::before {
background-image: url(../images/arrow-right-icon.svg);
}
[dir=rtl] .full-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-prev::before {
background-image: url(../images/arrow-left-icon.svg);
}
.full-calendar .ui-datepicker .ui-datepicker-header a {
color: inherit;
}
.full-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-title {
font-size: 1rem;
margin: auto 0;
height: 1.875rem;
font-family: "SSTArabic-Medium";
color: var(--secondary);
}
.full-calendar .ui-datepicker .ui-datepicker-calendar {
margin-bottom: 0;
}
.full-calendar .ui-datepicker .ui-datepicker-calendar thead tr th {
font-family: "SSTArabic-Medium", sans-serif;
background-color: transparent;
}
.full-calendar .ui-datepicker tbody tr td {
border: 0;
padding: 8px;
}
.full-calendar .ui-datepicker tbody tr td.ui-state-disabled {
display: none;
background-color: #cee7fa;
}
.full-calendar .ui-datepicker .ui-state-default {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
width: 100%;
min-height: 7.5rem;
color: var(--text-color);
font-size: 1.25rem;
font-family: "SSTArabic-Bold";
background-color: #fff;
border: none;
border-radius: 8px;
}
.full-calendar .ui-datepicker .ui-state-default:hover {
color: #fff;
background-color: var(--secondary);
}
.full-calendar .ui-datepicker .ui-state-highlight {
color: #fff;
border: 1px solid var(--primaryColor-100);
background-color: var(--primaryColor-100);
}
.full-calendar .ui-datepicker .ui-state-highlight:hover {
color: #fff;
background-color: var(--primaryColor-100);
}
.full-calendar .ui-datepicker .ui-state-active {
color: #fff;
background-color: var(--primaryColor-100);
}
.full-calendar .ui-datepicker .ui-state-active:hover {
color: #fff;
background-color: var(--primaryColor-100);
}
.events-calendar {
margin-top: -4.2rem;
}
.events-calendar .ui-datepicker {
padding-inline: 0 !important;
padding-top: 4.125rem !important;
position: relative;
}
.events-calendar .ui-datepicker::-webkit-scrollbar {
width: 12px;
height: 12px;
}
.events-calendar .ui-datepicker::-webkit-scrollbar-thumb {
background: #1B8354;
}
.events-calendar .ui-datepicker::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
}
.events-calendar .ui-datepicker {
scrollbar-face-color: #1B8354;
scrollbar-track-color: rgba(255, 255, 255, 0.05);
}
.events-calendar .ui-datepicker .ui-datepicker-header {
background-color: transparent;
right: 0;
left: auto;
gap: 0.625rem;
width: auto;
min-width: 12.1875rem;
padding: 5px 0;
}
[dir=ltr] .events-calendar .ui-datepicker .ui-datepicker-header {
right: auto;
left: 0;
}
.events-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-title {
color: var(--text-color);
}
.events-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-next::before,
.events-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-prev::before {
filter: none;
}
.events-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-next:hover,
.events-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-prev:hover {
background-color: transparent;
}
.events-calendar .ui-datepicker .ui-datepicker-calendar {
width: 100%;
}
.events-calendar .ui-datepicker .ui-datepicker-calendar thead tr th {
font-family: "SSTArabic-Medium", sans-serif;
font-weight: normal;
font-size: 1.125rem;
background-color: transparent;
padding: 0.5rem;
color: #606161;
}
.events-calendar .ui-datepicker tbody tr td {
font-size: 1.5rem;
border: 0;
}
.events-calendar .ui-datepicker tbody tr td .ui-state-default {
height: 100%;
background-color: #fff;
border: 1px solid var(--border-color);
border-radius: var(--cardRadius);
position: relative;
color: var(--text-color);
}
.events-calendar .ui-datepicker tbody tr td .ui-state-default .day-event {
color: #fff;
background-color: var(--secondary);
opacity: 1;
padding: 0.6rem;
margin-inline: 0;
}
.events-calendar .ui-datepicker tbody tr td .ui-state-default .day-event__title {
margin-bottom: 0;
color: #fff;
font-family: inherit;
}
.events-calendar .ui-datepicker tbody tr td .ui-state-default .day-events {
position: initial;
}
.events-calendar .ui-datepicker tbody tr td .ui-state-default .day-events__btn {
width: 2rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 426.6667 85.3333'%3E%3Cpath d='M213.3333,0a42.6667,42.6667,0,1,1-42.6666,42.6667A42.6667,42.6667,0,0,1,213.3333,0ZM42.6667,0A42.6667,42.6667,0,1,1,0,42.6667,42.6666,42.6666,0,0,1,42.6667,0ZM384,0a42.6667,42.6667,0,1,1-42.6667,42.6667A42.6667,42.6667,0,0,1,384,0Z' fill='%23005187'/%3E%3C/svg%3E");
background-size: 1.3125rem;
}
.events-calendar .ui-datepicker tbody tr td .ui-state-default .day-events__list {
text-align: start;
background-color: rgba(27, 131, 84, 0.75);
min-width: auto;
padding: 0.75rem;
top: 100%;
border-radius: 1rem;
min-width: 15.9375rem;
transition: all 0.3s ease-in-out;
backdrop-filter: blur(5px);
border-top: 5px solid white;
}
.events-calendar .ui-datepicker tbody tr td .ui-state-default .day-events__list__item {
display: flex;
gap: 0.375rem;
}
.events-calendar .ui-datepicker tbody tr td .ui-state-default .day-events__list__item:hover {
opacity: 0.8;
}
.events-calendar .ui-datepicker tbody tr td .ui-state-default .day-events__list__item:not(:last-child) {
margin-bottom: 0.625rem;
}
.events-calendar .ui-datepicker tbody tr td .ui-state-default .day-events__list__item::before {
padding: 0 !important;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='11' viewBox='0 0 8.123 13.338'%3E%3Cpath id='Path_69099' data-name='Path 69099' d='M-6970.353,16033.221l-6.669,7.4-6.669-7.4.72-.72,5.949,4.07,5.552-4.07Z' transform='translate(16040.624 6983.69) rotate(90)' fill='%23EBEBEB'/%3E%3C/svg%3E%0A");
height: 18px;
line-height: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
[dir=ltr] .events-calendar .ui-datepicker tbody tr td .ui-state-default .day-events__list__item::before {
transform: rotateY(180deg);
}
.events-calendar .ui-datepicker tbody tr td .ui-state-default.ui-state-active {
color: #fff;
}
.events-calendar .ui-datepicker tbody tr td .ui-state-default.ui-state-active .day-events__btn {
filter: brightness(0) invert(1);
}
.events-calendar .ui-datepicker tbody tr td .ui-state-default > * {
position: relative;
z-index: 1;
}
.events-calendar .ui-datepicker tbody tr td.events-container .ui-state-default {
background: var(--secondary);
color: white;
}
.events-calendar .ui-datepicker tbody tr td.events-container .ui-state-default .day-events__btn {
filter: brightness(0) invert(1);
}
.events-calendar .ui-datepicker tbody tr td.events-container:hover .day-events__list {
opacity: 1;
pointer-events: auto;
}
.main-header__top-bar {
background-color: var(--grayColor-100);
padding-block: 0.4375rem;
}
.main-header__top-bar__beta {
display: flex;
align-items: center;
gap: 0.3125rem;
color: var(--primaryColor-100);
font-size: 1rem;
}
.digital-stamp-note {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.3125rem;
}
@media (min-width: 576px) {
.digital-stamp-note {
gap: 0.625rem;
}
}
.digital-stamp-note__flag {
width: 1.0625rem;
height: 0.6875rem;
-o-object-fit: contain;
object-fit: contain;
}
@media (min-width: 576px) {
.digital-stamp-note__flag {
width: 1.25rem;
height: 0.875rem;
}
}
.digital-stamp-note__title {
line-height: 1.5;
font-weight: 500;
font-size: 0.75rem;
color: var(--darkColor);
margin: 0;
}
@media (min-width: 576px) {
.digital-stamp-note__title {
font-size: 0.875rem;
}
}
.digital-stamp-note__btn {
display: flex;
align-items: center;
gap: 0.125rem;
font-size: 0.75rem;
color: var(--primaryColor-100);
text-decoration: none;
background-color: transparent;
border: none;
padding: 0;
transition: all 0.3s ease-in-out;
padding-inline-end: 1rem;
position: relative;
}
@media (min-width: 576px) {
.digital-stamp-note__btn {
gap: 0.375rem;
font-size: 0.875rem;
}
}
.digital-stamp-note__btn::after {
content: "";
content: "\e903";
font-family: "icomoon" !important;
font-size: 0.75rem;
transition: all 0.3s ease-in-out;
position: absolute;
inset-inline-end: 0;
}
.digital-stamp-shown .digital-stamp-note__btn::after {
transform: rotate(180deg);
}
.digital-stamp-note__btn:focus-visible, .digital-stamp-note__btn:focus {
outline: 0.125rem solid #161616 !important;
outline-offset: 0.125rem;
}
.digital-stamp-note__btn:hover {
color: #54C08A;
text-decoration: underline;
}
.digital-stamp-note__btn:hover:focus {
text-decoration: none;
color: var(--primaryColor-100);
}
.digital-stamp-collapsible {
display: grid;
grid-template-rows: 0fr;
pointer-events: none;
opacity: 0;
transition: grid-template-rows 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
.digital-stamp-shown .digital-stamp-collapsible {
grid-template-rows: 1fr;
pointer-events: auto;
opacity: 1;
}
.digital-stamp-collapsible__inner {
display: flex;
flex-direction: column;
width: 100%;
overflow: hidden;
transition: padding 0.3s ease-in-out;
}
.digital-stamp-shown .digital-stamp-collapsible__inner {
padding-block: 2.5rem 2rem;
}
.digital-stamp-details {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.digital-stamp-details__icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border: 0.0625rem solid #067647;
border-radius: 50%;
}
.digital-stamp-details__icon > img {
width: 1rem;
height: 1rem;
-o-object-fit: contain;
object-fit: contain;
}
.digital-stamp-details__title {
line-height: 1.5;
font-weight: 700;
font-size: 1.0625rem;
color: var(--darkColor);
margin-bottom: 0.75rem;
}
.digital-stamp-details__description {
font-size: 0.9375rem;
color: var(--grayMidColor);
margin-bottom: 0;
}
.digital-stamp-number {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
font-size: 0.9375rem;
background-color: #fff;
border-radius: 0.5rem;
padding: 0.5rem 1.75rem;
}
.digital-stamp-number__logo {
width: 1.25rem;
height: 1.875rem;
-o-object-fit: contain;
object-fit: contain;
}
.digital-stamp-number__description {
color: var(--darkColor);
}
.digital-stamp-number__url {
color: var(--primaryColor-100);
text-decoration: underline;
transition: all 0.3s ease-in-out;
}
.digital-stamp-number__url:hover {
color: var(--primaryColor-300);
text-decoration: underline;
}
.digital-stamp-number__url:hover:focus {
text-decoration: underline;
color: var(--primaryColor-100);
}
.digital-stamp-number__url:focus-visible, .digital-stamp-number__url:focus {
outline: 0.125rem solid #161616 !important;
outline-offset: 0.125rem;
}
/***
====================================================================
Start Feedback
====================================================================
***/
.page-feedback {
position: relative;
padding-top: 3.4375rem;
}
.page-feedback p {
text-align: start;
}
.page-feedback__modified-date {
position: relative;
padding-block: 1rem;
}
.page-feedback__modified-date__par {
margin: 0;
font-size: 1rem;
}
.page-feedback__reviews {
position: relative;
padding-block: 1rem;
border-top: 0.125rem solid var(--primaryColor-100);
}
.page-feedback__reviews__row {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
gap: 1rem;
}
.page-feedback__reviews__row.column {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding-block: 1rem;
}
.page-feedback__reviews__col {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: row;
gap: 1rem;
flex: 1 0 0;
width: 100%;
}
.page-feedback__reviews__col__inner {
width: 100%;
flex: 1 0 0;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
gap: 0.625rem;
height: 100%;
}
.page-feedback__reviews__col__inner .page-feedback__reviews__col__stars {
margin-top: 0.4375rem;
}
.page-feedback__reviews__col__inner form {
width: 100%;
}
.page-feedback__reviews__col__par {
margin-bottom: 0;
}
.page-feedback__reviews__col__par a {
text-decoration: underline;
color: var(--primaryColor-100);
}
.page-feedback__reviews__col__par a:hover {
color: var(--primaryColor-300);
}
.column .page-feedback__reviews__col__par {
font-size: 0.875rem;
}
.page-feedback__reviews__col__par--moreinfo {
font-size: 1rem !important;
margin-top: auto;
padding-top: 1rem;
}
.page-feedback__reviews__col__stars {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
gap: 0.625rem;
}
.page-feedback__reviews__col__stars__par {
color: var(--grayColor);
font-size: 0.875rem;
}
.page-feedback__reviews__col .btn {
flex: 0 0 auto;
}
.page-feedback__reviews__col__title {
font-weight: 600;
font-size: 1rem;
}
.page-feedback__reviews__col__title span {
color: var(--grayColor);
font-weight: 400;
}
.page-feedback__reviews__col__listchecks {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
flex-wrap: wrap;
gap: 0.625rem;
font-size: 1rem;
}
.page-feedback__reviews__col__listchecks .checkbox-theme label.label-sm {
font-weight: 500;
}
.page-feedback__reviews__col__listchecksradio {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
gap: 1rem;
font-size: 1rem;
margin-top: 1rem;
}
.page-feedback__reviews__col__listchecksradio .checkbox-theme {
margin: 0;
}
.page-feedback__reviews__col__listchecksradio .checkbox-theme label.label-sm {
font-weight: 500;
}
.page-feedback__reviews__col__listchecksradio__title {
font-weight: 600;
}
.page-feedback__useful {
position: relative;
padding-block: 1rem;
border-top: 0.125rem solid var(--primaryColor-100);
}
.page-feedback__useful__header {
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
gap: 1rem;
}
.page-feedback__useful__header .buttons-blog {
flex: 1 0 0;
align-items: center;
}
.page-feedback__useful__header .buttons-blog .par-head {
margin-inline-start: auto;
margin-bottom: 0;
font-size: 0.875rem;
}
.page-feedback__useful__header .buttons-blog .closeAllBtn {
display: none;
}
.page-feedback__useful__header .buttons-blog:has([aria-expanded=true]) .closeAllBtn {
display: block;
margin-inline-start: auto;
}
.page-feedback__useful__header .buttons-blog:has([aria-expanded=true]) .par-head {
display: none;
}
.page-feedback .closeAllBtn {
font-size: 1.125rem;
}
.star-rating {
display: inline-flex;
border: none;
}
.star-rating input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.star-rating label {
display: block;
height: 2rem;
width: 1rem;
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: 0 0;
mask-position: 0 0;
-webkit-mask-size: 2rem;
mask-size: 2rem;
color: var(--primaryColor-500);
cursor: pointer;
}
.star-rating {
/* full star steps; right-handed half star */
}
.star-rating label:nth-of-type(even) {
-webkit-mask-position: -1rem 0;
mask-position: -1rem 0;
padding-inline-end: 0.25rem; /* space between stars */
}
.star-rating {
/* chosen rating */
}
.star-rating input:checked + label,
.star-rating label:has(~ input:checked) {
background-color: #1B8354;
}
.star-rating {
/* hovering over stars */
}
.star-rating label:hover,
.star-rating label:has(~ label:hover) {
background-color: #1B8354;
}
* {
margin: 0px;
padding: 0px;
border: none;
outline: none;
-webkit-touch-callout: none;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
html,
body {
height: 100%;
scroll-behavior: smooth;
}
body {
background: var(--whiteColor);
background-size: cover;
text-align: start;
line-height: 1.5;
color: var(--darkColor);
overflow-x: hidden !important;
font-size: 1.1rem;
font-family: "IBMPlexSansArabic";
}
body::-webkit-scrollbar {
width: 0.625rem;
height: 0.625rem;
}
body::-webkit-scrollbar-thumb {
background: var(--primaryColor-100);
}
body::-webkit-scrollbar-track {
background: var(--primaryColor-500);
}
body {
scrollbar-face-color: var(--primaryColor-100);
scrollbar-track-color: var(--primaryColor-500);
}
body.mobileoverflow {
overflow: hidden;
}
@media (min-width: 1200px) {
body.mobileoverflow {
overflow: auto;
}
}
html {
font-size: 73%;
}
@media screen and (min-width: 576px) {
html {
font-size: 80%;
}
}
@media screen and (min-width: 768px) {
html {
font-size: 85%;
}
}
@media screen and (min-width: 1200px) {
html {
font-size: 1vw;
}
}
@media screen and (min-width: 1400px) {
html {
font-size: 0.95vw;
}
}
@media screen and (min-width: 1920px) {
html {
font-size: 0.84vw;
}
}
.font-resize-btns button.disabled {
opacity: 0.4;
pointer-events: none;
}
.page-wrapper {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 100%;
padding-bottom: 0 !important;
}
.page-wrapper:has(.timeline-sec), .page-wrapper:has(.aside-service) {
overflow: visible;
}
@media (min-width: 992px) {
.container {
max-width: 87%;
}
}
@media (max-width: 575.98px) {
.container {
--bs-gutter-x: 3.5rem;
}
}
a,
button {
text-decoration: none;
cursor: pointer;
color: var(--primaryTextColor);
}
a:hover,
a:focus {
text-decoration: none;
outline: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
position: relative;
font-weight: normal;
margin: 0;
color: var(--darkColor);
font-weight: 700;
line-height: 1.5;
}
strong,
b {
font-weight: bold;
}
p {
position: relative;
text-transform: none;
color: var(--darkColor);
line-height: 1.8;
text-align: justify;
}
p a {
color: var(--primaryColor);
}
p a:hover {
color: var(--primaryColor-300) !important;
text-decoration: underline;
}
p a:active {
color: #88D8AD !important;
text-decoration: underline;
}
p a:focus, p a:focus-visible {
color: var(--primaryColor-100) !important;
outline: 0.125rem solid var(--grayDarkColor);
text-decoration: underline;
}
p:empty {
display: none;
}
input,
button,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
}
ul,
li {
list-style: none;
padding: 0px;
margin: 0px;
}
img, video {
display: inline-block;
max-width: 100%;
height: auto;
}
button:focus {
outline: 0;
}
.text-small {
font-size: 0.875rem;
}
.disabled {
opacity: 0.4;
pointer-events: none;
}
.theme-grayScale {
filter: grayscale(100%);
}
.primary-color {
color: var(--primaryColor);
}
.secondary-color {
color: var(--primaryColor);
}
.font-regular, .events-calendar .ui-datepicker .ui-datepicker-calendar thead tr th {
font-weight: normal;
}
.font-bold, .events-calendar .ui-datepicker tbody tr td {
font-weight: bold;
}
.mobileoverflow {
overflow: hidden;
}
.boxShadow, .members-sec__inner__item__inner:is(:hover, :active, :focus) {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.zindex, .national-sec {
position: relative;
z-index: 1;
background-color: var(--whiteColor);
}
.bg-primaryColor-400, .event-timer-sec, .national-sec {
background-color: var(--primaryColor-400);
}
.auto-line {
-webkit-line-clamp: none;
}
.border {
--bs-border-color: var(--borderColor) ;
}
.flex-height {
flex: 1 0 0%;
}
@media (max-width: 991.98px) {
.flex-height:not(.flex-height-important) {
flex: 0 0 auto;
}
}
.label-shared {
position: absolute;
padding: 0.3125rem 0.6875rem 0.4375rem;
border-radius: 1.875rem;
background-color: var(--bgLabelsColor);
color: var(--secondaryBigDarkColor);
top: 1rem;
left: 1rem;
font-size: 1rem;
}
.dark-mode .label-shared {
color: var(--primaryTextColor);
}
@media (max-width: 767.98px) {
:root {
--sec-padding: 3rem;
}
}
@media print {
.about-sec__thumb::before {
display: none;
}
.preloader, .header-wrapper, .page-banner, .footer {
display: none !important;
}
}
.anime-rotate {
perspective: 1000px;
display: block;
transform-style: preserve-3d;
transition: all 0.8s;
transform-origin: 50% 0%;
transform: translate3d(0px, 50px, -50px) rotateX(-45deg) scale(0.95);
opacity: 0;
transition-delay: 0.3s;
}
.anime-rotate.aos-animate {
transform: translate3d(0px, 0px, 0px) rotateX(0deg) scale(1);
opacity: 1;
}
.link-bg {
color: var(--primaryTextColor);
transition: all 0.3s ease;
}
.link-bg:is(:hover, :active, :focus) {
color: rgba(255, 255, 255, 0.75);
text-decoration: underline;
}
.swiper-slide {
height: auto;
}
.text-danger {
color: var(--dangerColor) !important;
font-size: 0.875rem;
}
[class^=col-]:has(.nice-select) {
position: relative;
z-index: 2;
}
.fancybox__caption {
padding: 0.875rem 0 0.25rem 0;
max-width: 100.25rem;
}
/***
====================================================================
Header
====================================================================
***/
.header-wrapper {
position: relative;
z-index: 9;
}
.header-wrapper__top {
position: relative;
padding-block: 1rem;
background-color: var(--primaryColor);
}
.header-wrapper__logo__link__img {
height: 3.375rem;
}
.header-wrapper__actions {
position: relative;
gap: 0.25rem;
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-direction: row;
}
@media (max-width: 575.98px) {
.header-wrapper__actions {
justify-content: center;
gap: 0.125rem;
margin-inline-start: auto;
}
}
.header-wrapper__actions__search__button, .header-wrapper__actions__logout__button, .header-wrapper__actions__lang__button {
color: var(--darkColor, #161616);
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
position: relative;
z-index: 1;
transition: color 200ms ease-in, background-color 200ms ease-in;
gap: 0.3125rem;
font-size: 1.125rem;
align-items: center;
height: 100%;
padding: 1.15rem 0.6rem;
border-radius: var(--radius-sm, 4px);
font-weight: 500;
}
@media (max-width: 1199.98px) {
.header-wrapper__actions__search__button, .header-wrapper__actions__logout__button, .header-wrapper__actions__lang__button {
padding: 0.3125rem 0.6rem;
}
}
.header-wrapper__actions__search__button .icon-search, .header-wrapper__actions__logout__button .icon-search, .header-wrapper__actions__lang__button .icon-search {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
position: relative;
}
.header-wrapper__actions__search__button .icon-search::before, .header-wrapper__actions__logout__button .icon-search::before, .header-wrapper__actions__lang__button .icon-search::before, .header-wrapper__actions__search__button .icon-search::after, .header-wrapper__actions__logout__button .icon-search::after, .header-wrapper__actions__lang__button .icon-search::after {
transition: all 300ms;
}
.header-wrapper__actions__search__button .icon-search::after, .header-wrapper__actions__logout__button .icon-search::after, .header-wrapper__actions__lang__button .icon-search::after {
font-family: "icomoon";
content: "\e905";
transform: scale(0);
opacity: 0;
position: absolute;
}
.header-wrapper__actions__search__button::after, .header-wrapper__actions__logout__button::after, .header-wrapper__actions__lang__button::after {
content: "";
position: absolute;
left: 0.4375rem;
right: 0.4375rem;
bottom: 0;
height: 0.375rem;
margin: 0 auto;
border-radius: var(--radius-full, 9999px);
background: var(--background-neutral-400, #9DA4AE);
z-index: 1;
transition: opacity 300ms ease-in-out;
opacity: 0;
}
.header-wrapper__actions__search__button:hover, .header-wrapper__actions__logout__button:hover, .header-wrapper__actions__lang__button:hover {
background: var(--button-background-neutral-hovered, #F3F4F6);
color: var(--darkColor, #161616);
}
.header-wrapper__actions__search__button:hover::after, .header-wrapper__actions__logout__button:hover::after, .header-wrapper__actions__lang__button:hover::after {
opacity: 1;
}
.header-wrapper__actions__search__button:focus, .header-wrapper__actions__logout__button:focus, .header-wrapper__actions__lang__button:focus, .header-wrapper__actions__search__button:focus-visible, .header-wrapper__actions__logout__button:focus-visible, .header-wrapper__actions__lang__button:focus-visible, .header-wrapper__actions__search__button:active, .header-wrapper__actions__logout__button:active, .header-wrapper__actions__lang__button:active, .header-wrapper__actions__search__button:focus:not(:focus-visible) {
background: var(--button-background-oncolor-focused, #FFF);
outline: 0.125rem solid var(--border-black, #161616);
outline-offset: 0.0625rem;
}
.header-wrapper__actions__search__button:focus::after, .header-wrapper__actions__logout__button:focus::after, .header-wrapper__actions__lang__button:focus::after, .header-wrapper__actions__search__button:focus-visible::after, .header-wrapper__actions__logout__button:focus-visible::after, .header-wrapper__actions__lang__button:focus-visible::after, .header-wrapper__actions__search__button:active::after, .header-wrapper__actions__logout__button:active::after, .header-wrapper__actions__lang__button:active::after, .header-wrapper__actions__search__button:focus:not(:focus-visible)::after {
opacity: 0;
}
.header-wrapper__actions__search__button:visited, .header-wrapper__actions__logout__button:visited, .header-wrapper__actions__lang__button:visited {
color: var(--darkColor, #161616);
}
.header-wrapper__actions__search__dropdown {
min-width: 26.4375rem !important;
position: fixed !important;
inset-inline-end: 0 !important;
inset-inline-start: 0;
box-shadow: none !important;
border-top: 0.125rem solid var(--borderColor);
padding-inline: 0 !important;
padding-block: 2.8125rem !important;
border-radius: 0 0 var(--radius-lg, 16px) var(--radius-lg, 16px);
background: var(--background-menu, #FFF);
/* Shadows/shadow-lg */
box-shadow: 0 0.75rem 1rem -0.25rem rgba(16, 24, 40, 0.08), 0 0.25rem 0.375rem -0.125rem rgba(16, 24, 40, 0.03);
}
.header-wrapper__actions__search__dropdown form .col-form-label {
font-size: 1.5rem;
padding-top: 0;
font-weight: 500;
display: none;
}
.header-wrapper__actions__search__dropdown form .input-group-prepend .btn,
.header-wrapper__actions__search__dropdown form .input-group-append .btn {
padding-inline: 0.6rem;
border-radius: 0;
font-size: 1.125rem;
background-color: transparent;
display: flex;
align-items: center;
border: 0;
color: var(--icon-default, #161616);
}
.header-wrapper__actions__search__dropdown form .form-group .form-control {
background-color: var(--form-field-background-default, #FFF);
height: 3rem;
/* Shadows/shadow-md */
box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
}
.header-wrapper__actions__search__dropdown .close-ico {
display: flex;
justify-content: flex-end;
margin-bottom: 2rem;
}
.header-wrapper__actions__search__dropdown .close-ico i {
cursor: pointer;
}
.header-wrapper__actions__search__dropdown__suggestions {
margin-top: 1.125rem;
}
.header-wrapper__actions__search__dropdown__suggestions__title {
color: var(--text-primary, #1B8354);
margin-bottom: 0.625rem;
}
.header-wrapper__actions__search__dropdown__suggestions .list-suggestions {
display: flex;
gap: 1rem;
}
.header-wrapper__actions__search__dropdown__suggestions .list-suggestions li a,
.header-wrapper__actions__search__dropdown__suggestions .list-suggestions li button {
display: flex;
align-items: center;
gap: 0.3125rem;
background: var(--button-background-neutral-default, #F3F4F6);
padding: 0.4375rem 0.875rem;
color: var(--text-default, #161616);
border-radius: var(--radius-sm, 4px);
font-size: 0.9375rem;
transition: all 300ms;
}
.header-wrapper__actions__search__dropdown__suggestions .list-suggestions li a i,
.header-wrapper__actions__search__dropdown__suggestions .list-suggestions li button i {
font-size: 0.75rem;
}
.header-wrapper__actions__search__dropdown__suggestions .list-suggestions li a:hover,
.header-wrapper__actions__search__dropdown__suggestions .list-suggestions li button:hover {
background: var(--button-background-neutral-hovered, #E5E7EB);
}
.header-wrapper__actions__search__dropdown__suggestions .list-suggestions li a:focus, .header-wrapper__actions__search__dropdown__suggestions .list-suggestions li a:focus-visible, .header-wrapper__actions__search__dropdown__suggestions .list-suggestions li a:active, .header-wrapper__actions__search__dropdown__suggestions .list-suggestions li a:focus:not(:focus-visible),
.header-wrapper__actions__search__dropdown__suggestions .list-suggestions li button:focus,
.header-wrapper__actions__search__dropdown__suggestions .list-suggestions li button:focus-visible,
.header-wrapper__actions__search__dropdown__suggestions .list-suggestions li button:active,
.header-wrapper__actions__search__dropdown__suggestions .list-suggestions li button:focus:not(:focus-visible) {
background: var(--button-background-neutral-default, #F3F4F6);
outline: 0.125rem solid var(--icon-default, #161616);
box-shadow: none;
}
.header-wrapper__actions__search.dropdown-show .header-wrapper__actions__search__button, .header-wrapper__actions__search.dropdown-show .header-wrapper__actions__logout__button, .header-wrapper__actions__search.dropdown-show .header-wrapper__actions__lang__button {
background: var(--button-background-primary-selected, #14573A);
outline: 0.125rem solid var(--border-black, #161616);
outline-offset: 0.125rem;
color: var(--text-oncolor-primary, #FFF);
}
.header-wrapper__actions__search.dropdown-show .header-wrapper__actions__search__button::after, .header-wrapper__actions__search.dropdown-show .header-wrapper__actions__logout__button::after, .header-wrapper__actions__search.dropdown-show .header-wrapper__actions__lang__button::after {
border-radius: var(--radius-full, 9999px);
background: var(--background-primary-400, #54C08A);
opacity: 1;
}
.header-wrapper__actions__search.dropdown-show .header-wrapper__actions__search__button::before, .header-wrapper__actions__search.dropdown-show .header-wrapper__actions__logout__button::before, .header-wrapper__actions__search.dropdown-show .header-wrapper__actions__lang__button::before {
top: 0;
}
.header-wrapper__actions__lang {
position: relative;
}
.header-wrapper__actions__logout {
position: relative;
}
.header-wrapper__actions__logout__button {
white-space: nowrap;
}
.main-header {
position: relative;
top: 0;
right: 0;
left: 0;
transition: all 300ms ease;
background-color: var(--whiteColor);
}
.main-header.fixed-header {
position: fixed;
zoom: 1;
filter: alpha(opacity=100);
opacity: 1;
visibility: visible;
width: 100%;
animation: fadeInDown 0.2s cubic-bezier(0.5, 0, 0.5, 1) both;
}
.main-header.fixed-header::before {
width: 100%;
backdrop-filter: blur(30px) brightness(1.12);
}
.main-header.fixed-header .navbar .navbar-brand {
display: flex;
}
.main-header.fixed-header .navbar .nav-item .nav-link {
padding: 1.25rem 1rem;
}
@media (max-width: 1199.98px) {
.main-header.fixed-header .navbar .nav-item .nav-link {
padding: 1rem;
}
}
.main-header.fixed-header .main-header__inner {
gap: 0.3125rem;
}
.main-header__inner {
position: relative;
flex: 0 0 auto;
}
.navbar {
position: relative;
gap: 0.625rem;
justify-content: space-between;
align-items: stretch;
}
@media (max-width: 1199.98px) {
.navbar {
align-items: center;
padding-block: 0.625rem !important;
}
}
@media (max-width: 575.98px) {
.navbar {
gap: 0.25rem;
}
}
.navbar .navbar-brand {
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
transition: all 300ms ease;
flex: 0 0 auto;
position: relative;
gap: 0.375rem;
margin: 0;
}
@media (max-width: 575.98px) {
.navbar .navbar-brand {
margin: 0;
}
}
.navbar .navbar-brand img {
transition: all 300ms ease;
height: 3.4375rem;
}
@media (max-width: 1399.98px) {
.navbar .navbar-brand img {
height: 3.25rem;
}
}
@media (max-width: 575.98px) {
.navbar .navbar-brand img {
height: 2.65rem;
}
}
.navbar .navbar-collapse {
flex: 1 0 0;
}
.navbar .navbar-nav {
gap: 0.25rem;
}
@media (min-width: 1400px) {
.navbar .navbar-nav {
gap: 0.375rem;
}
}
@media (max-width: 1199.98px) {
.navbar .navbar-nav {
gap: 0;
}
}
.navbar .nav-item {
position: relative;
transition: all 200ms ease-in;
}
@media (max-width: 1199.98px) {
.navbar .nav-item {
border-bottom: 0.0625rem solid var(--borderColor);
}
}
@media (max-width: 1199.98px) {
.navbar .nav-item:last-of-type {
border-bottom: 0;
}
}
.navbar .nav-item .nav-link {
text-align: center;
padding: 1.5rem 1rem;
font-weight: 500;
position: relative;
font-size: 1.0625rem;
overflow: hidden;
height: 100%;
transition: all 200ms ease-in;
z-index: 1;
color: var(--darkColor);
border-radius: 0.25rem;
}
[dir=rtl] .navbar .nav-item .nav-link {
font-size: 1.125rem;
padding: 1.25rem 1rem;
}
@media (max-width: 1199.98px) {
[dir=rtl] .navbar .nav-item .nav-link {
font-size: 1.15rem;
padding: 0.9rem 1rem;
}
}
@media (max-width: 1199.98px) {
.navbar .nav-item .nav-link {
text-align: start;
font-size: 1.15rem;
padding: 0.9rem 1rem;
display: flex;
align-items: center;
}
}
.navbar .nav-item .nav-link span.anim {
position: absolute;
display: block;
width: 0;
height: 0;
border-radius: 50%;
background-color: var(--primaryColor-100);
transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
transform: translate(-50%, -50%);
z-index: -1;
border-radius: 5px;
display: none !important;
}
.navbar .nav-item .nav-link::after {
content: "";
position: absolute;
left: 0.4375rem;
right: 0.4375rem;
bottom: 0;
height: 0.375rem;
margin: 0 auto;
border-radius: 0.5625rem;
background-color: var(--grayLightColor);
z-index: 1;
transition: opacity 300ms ease-in-out;
opacity: 0;
}
@media (max-width: 1199.98px) {
.navbar .nav-item .nav-link::after {
width: 0.5rem;
inset-inline-end: auto;
top: 0;
inset-inline-start: 0;
height: calc(100% - 16px);
margin: auto;
}
}
.navbar .nav-item .nav-link .dropdown-toggle {
cursor: pointer;
font-style: normal;
line-height: 0;
}
.navbar .nav-item .nav-link .dropdown-toggle::after {
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
margin: 0;
content: "\e903";
font-family: "icomoon" !important;
font-size: 0.85rem;
transition: all 200ms linear;
top: 0.3125rem;
position: relative;
}
@media (max-width: 1199.98px) {
.navbar .nav-item .nav-link .dropdown-toggle {
margin-inline-start: auto;
line-height: 1;
}
}
.navbar .nav-item .nav-link:hover .dropdown-toggle::after {
transform: rotate(180deg);
}
.navbar .nav-item .nav-link:focus {
background-color: transparent;
outline: 0.125rem solid var(--darkColor);
outline-offset: 0.0625rem;
}
.navbar .nav-item .nav-link:focus:hover {
background-color: transparent;
}
.navbar .nav-item .nav-link:focus:hover::after {
opacity: 0;
}
@media (max-width: 1199.98px) {
.navbar .nav-item .nav-link.show .dropdown-toggle::after {
transform: rotate(180deg) !important;
}
}
.navbar .nav-item:hover > .nav-link {
background-color: var(--grayColor-100);
}
.navbar .nav-item:hover > .nav-link span.anim {
width: 225%;
height: 562.5px;
}
.navbar .nav-item:hover > .nav-link::after {
opacity: 1;
}
.navbar .nav-item:hover > .nav-link .dropdown-toggle::after {
transform: rotate(180deg);
}
@media (max-width: 1199.98px) {
.navbar .nav-item:hover > .nav-link .dropdown-toggle::after {
transform: none;
}
}
.navbar .nav-item.active > .nav-link {
color: var(--primaryTextColor);
background-color: var(--primaryColor-100);
}
@media (max-width: 1199.98px) {
.navbar .nav-item.active > .nav-link {
color: var(--primaryColor-100);
background-color: var(--primaryColor-500) !important;
}
}
.navbar .nav-item.active > .nav-link span.anim {
width: 100% !important;
height: 100% !important;
transform: none !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
border-radius: 0 !important;
}
.navbar .nav-item.active > .nav-link::after {
background-color: var(--primaryColor-300);
opacity: 1 !important;
}
@media (max-width: 1199.98px) {
.navbar .nav-item.active > .nav-link::after {
background-color: var(--primaryColor-100);
}
}
.navbar .nav-item.active .nav-link::before {
transform: scaleX(1);
transform-origin: 0 0;
}
.navbar .nav-item.active:hover > .nav-link {
background-color: #166A45;
}
.navbar .nav-item.active:active > .nav-link, .navbar .nav-item.active:focus > .nav-link {
background-color: var(--primaryColor-100);
}
.navbar .nav-item .nav-item::after, .navbar .nav-item .nav-item::before {
content: none;
}
.navbar .nav-item .nav-item .nav-link {
padding: 0.75rem 0.25rem;
color: var(--primaryTextColor);
}
.navbar .nav-item .nav-item .dropdown-item {
padding: 0.625rem;
color: var(--primaryTextColor);
transition: all 0.3s ease;
border-radius: 0.375rem;
}
.navbar .nav-item .nav-item .dropdown-item:hover {
background-color: var(--primaryColor-600);
text-decoration: underline;
}
@media (max-width: 1199.98px) {
.navbar .nav-item .nav-item .dropdown-item:hover {
background-color: var(--grayColor-100);
text-decoration: none;
}
.navbar .nav-item .nav-item .dropdown-item:hover::before {
opacity: 1;
}
}
@media (max-width: 1199.98px) {
.navbar .nav-item .nav-item .dropdown-item:focus {
background-color: transparent;
outline: 0.125rem solid var(--darkColor);
outline-offset: 0.0625rem;
}
.navbar .nav-item .nav-item .dropdown-item:focus::before {
opacity: 0;
}
}
.navbar .nav-item .nav-item .dropdown-item.active {
background-color: var(--primaryColor-600);
text-decoration: underline;
}
@media (max-width: 1199.98px) {
.navbar .nav-item .nav-item .dropdown-item.active {
text-decoration: none;
background-color: var(--primaryColor-500);
color: var(--primaryColor-100);
}
}
.navbar .nav-item .nav-item .dropdown-item.active {
pointer-events: none;
}
.navbar .nav-item .nav-item .dropdown-item span::before {
color: var(--primaryColor);
}
@media (max-width: 1199.98px) {
.navbar .nav-item .nav-item .dropdown-item {
color: var(--darkColor);
padding: 0.9rem 1rem;
}
.navbar .nav-item .nav-item .dropdown-item::before {
content: "";
position: absolute;
inset-inline-start: 0;
bottom: 0;
top: 0;
margin: 0 auto;
border-radius: 0.5625rem;
background-color: var(--grayLightColor);
z-index: 1;
width: 0.5rem;
height: calc(100% - 16px);
margin: auto;
opacity: 0;
transition: opacity 300ms ease-in-out;
}
}
.navbar .nav-item .nav-item.active > .dropdown-item {
background-color: var(--primaryColor-600);
}
.dropdown-toggle::after {
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
margin: 0;
content: "\e903";
font-family: "icomoon" !important;
font-size: 0.7rem;
transition: all 200ms linear;
}
.dropdown-toggle.show::after {
transform: rotate(180deg);
}
.nav-item .dropdown-menu {
visibility: hidden;
opacity: 0;
max-height: 0;
display: block;
padding: 0;
inset-inline-end: auto;
inset-inline-start: 0;
text-align: start;
width: 15.9375rem;
transition: all 200ms linear;
transform: translate3d(0, 0.625rem, 0);
box-shadow: none;
border: 0;
overflow: visible;
padding: 1.25rem 0.625rem;
border-radius: 0;
background: var(--primaryColor);
margin: 0;
gap: 0.125rem;
}
@media (min-width: 1200px) {
.nav-item .dropdown-menu {
top: 100%;
}
}
@media (max-width: 1199.98px) {
.nav-item .dropdown-menu {
background-color: #f9fafb;
width: 100%;
}
}
.nav-item .dropdown-menu li a {
padding: 0;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
gap: 0.625rem;
color: var(--whiteColor);
white-space: normal;
}
.nav-item .dropdown-menu li a:is(:hover, :active, :focus) {
color: var(--whiteColor);
background-color: transparent;
}
.nav-item .dropdown-menu li a:is(:hover, :active, :focus) i {
transform: translateX(-5px);
}
[dir=rtl] .nav-item .dropdown-menu li a:is(:hover, :active, :focus) i {
transform: translateX(5px);
}
.nav-item .dropdown-menu li a i {
transition: all 200ms linear;
position: relative;
color: var(--primaryColor);
}
@media (max-width: 1199.98px) {
.nav-item .dropdown-menu li a i {
color: var(--darkColor) !important;
}
}
.nav-item .dropdown-menu .dropdown-menu > li > a {
padding: 0.5rem 0 !important;
}
.nav-item .dropdown-menu:has(.dropdown-menu-col) {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
width: 46.875rem;
inset-inline-start: -100%;
inset-inline-end: 0;
gap: 0.5rem;
}
@media (max-width: 1199.98px) {
.nav-item .dropdown-menu:has(.dropdown-menu-col) {
max-width: 100%;
}
}
.nav-item .dropdown-menu:has(.dropdown-menu-col) > .nav-item .dropdown-item {
transition: all 0.3s ease;
font-weight: Bold;
background: none;
padding: 0;
font-size: 1.25rem;
}
[dir=rtl] .nav-item .dropdown-menu:has(.dropdown-menu-col) > .nav-item .dropdown-item {
font-size: 1.125rem;
}
.nav-item .dropdown-menu:has(.dropdown-menu-col) > .nav-item .dropdown-item:is(:hover, :active, :focus), .nav-item .dropdown-menu:has(.dropdown-menu-col) > .nav-item .dropdown-item.active {
text-decoration: none;
}
@media (max-width: 1199.98px) {
.nav-item .dropdown-menu:has(.dropdown-menu-col) > .nav-item .dropdown-item {
padding: 0.75rem 0;
background-position: 0 100%;
background: none !important;
background-clip: unset;
-webkit-background-clip: unset;
-webkit-text-fill-color: inherit;
}
}
@media (max-width: 1199.98px) {
[dir=rtl] .nav-item .dropdown-menu:has(.dropdown-menu-col) > .nav-item .dropdown-item {
background-position: 100% 100%;
background-clip: unset;
-webkit-background-clip: unset;
-webkit-text-fill-color: inherit;
}
}
@media (max-width: 1199.98px) {
.nav-item .dropdown-menu:has(.dropdown-menu-col) > .nav-item .dropdown-item::before {
content: none;
}
}
@media (max-width: 767.98px) {
.nav-item .dropdown-menu .dropdown-menu-col {
min-height: 100%;
}
}
.nav-item .dropdown-menu .dropdown-menu-col > ul > li {
margin-top: 0.125rem;
}
@media (max-width: 1199.98px) {
.nav-item .dropdown-menu .dropdown-menu-col > ul > li {
margin-top: 0;
}
}
.nav-item .dropdown-menu .dropdown-menu-col .menu-title {
padding-inline: 0.625rem;
margin-bottom: 0.3125rem;
color: var(--primaryTextColor);
}
@media (max-width: 1199.98px) {
.nav-item .dropdown-menu .dropdown-menu-col .menu-title {
padding-inline: 0;
color: var(--darkColor);
}
}
.nav-item .dropdown-menu .dropdown-menu-col .menu-title a {
transition: all 0.3s ease;
font-weight: Bold;
pointer-events: none;
}
[dir=rtl] .nav-item .dropdown-menu .dropdown-menu-col .menu-title a {
font-size: 1.125rem;
}
.nav-item .dropdown-menu .dropdown-menu-col .menu-title a:is(:hover, :active, :focus), .nav-item .dropdown-menu .dropdown-menu-col .menu-title a.active {
background-position: unset;
}
[dir=rtl] .nav-item .dropdown-menu .dropdown-menu-col .menu-title a:is(:hover, :active, :focus), [dir=rtl] .nav-item .dropdown-menu .dropdown-menu-col .menu-title a.active {
background-position: unset;
}
@media (max-width: 1199.98px) {
.nav-item .dropdown-menu .dropdown-menu-col .menu-title a {
color: var(--darkColor);
}
}
.nav-item .dropdown-menu li .dropdown-menu {
padding: 0;
inset-inline-start: 100%;
top: 0;
}
.nav-item.show > .dropdown-menu {
opacity: 1;
visibility: visible;
max-height: 999px;
transform: translate3d(0, 0px, 0);
}
@media (max-width: 1199.98px) {
.nav-item > .dropdown-menu.show {
opacity: 1;
visibility: visible;
max-height: 999px;
padding: 1rem 1.5rem 0.5rem !important;
transform: translate3d(0, 0px, 0);
-o-box-shadow: none;
-ms-box-shadow: none;
box-shadow: none;
}
}
.navbar-toggler {
padding: 0;
display: none;
z-index: 99999;
box-shadow: none;
border: 0;
inset-inline-end: 0;
top: 0;
background-color: var(--primaryColor);
line-height: 0;
border-radius: 0.375rem;
}
.navbar-toggler.fixed {
position: fixed;
}
.navbar-toggler:active, .navbar-toggler:focus {
outline: none;
box-shadow: none;
}
.navbar-light .navbar-toggler-icon {
width: 24px;
height: 18px;
background-image: none;
position: relative;
transition: all 300ms linear;
}
.navbar-light .navbar-toggler-icon:after,
.navbar-light .navbar-toggler-icon:before {
width: 24px;
position: absolute;
height: 2px;
background-color: var(--primaryTextColor);
top: 0;
right: 0;
content: "";
z-index: 2;
transition: all 300ms linear;
}
.navbar-light .navbar-toggler-icon:after {
top: 8px;
}
.navbar-toggler[aria-expanded=true] .navbar-toggler-icon:after {
transform: rotate(45deg);
}
.navbar-toggler[aria-expanded=true] .navbar-toggler-icon:before {
transform: translateY(8px) rotate(-45deg);
}
.navbar-toggler[aria-expanded=true] .navbar-toggler-icon {
border-color: transparent;
}
/* #Media
================================================== */
@media (max-width: 1199.98px) {
.navbar-toggler {
display: block;
}
.fixed-header .navbar .navbar-toggler {
display: block;
}
.navbar .navbar-collapse {
position: fixed;
inset: 0;
padding: 5rem 1.5rem;
background-color: #F9FAFB;
z-index: 9999;
overflow: auto;
height: 100vh;
width: 21.875rem;
transition: all 0.3s ease-out;
transform: translate(-100%, 0);
display: block;
box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
}
[dir=rtl] .navbar .navbar-collapse {
transform: translate(100%, 0);
}
.navbar .navbar-collapse.show {
transform: translate(0, 0);
}
.nav-item {
transition: none;
}
.nav-link:hover, .nav-link:focus, .nav-link:active {
color: var(--primaryColor);
}
.dropdown-menu {
padding: 0 !important;
background-color: transparent;
-o-box-shadow: none;
-ms-box-shadow: none;
box-shadow: none;
transition: all 200ms linear;
}
.dropdown-toggle[aria-expanded=true] i {
transform: rotate(180deg);
}
}
@media (min-width: 1200px) {
.navbar-nav li:hover > div .nav-link {
color: var(--primaryColor);
}
.navbar-nav li:hover > div .nav-link .dropdown-toggle::after {
color: var(--primaryColor);
transform: rotate(180deg);
}
.navbar-nav li:hover > .dropdown-item::after {
color: var(--primaryColor);
}
.navbar-nav li:hover > .dropdown-menu {
display: grid;
opacity: 1;
visibility: visible;
max-height: 999px;
transform: translate3d(0, 0px, 0);
}
}
.menu-start svg {
fill: #fff;
width: 2.4375rem;
height: 2.4375rem;
}
.menu {
background-color: transparent;
border: none;
cursor: pointer;
display: flex;
padding: 0;
}
.line {
fill: none;
stroke: #fff;
transition: stroke-dasharray 0.6s cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.line, .line1 {
stroke-width: 3;
}
.line1 {
stroke-dasharray: 60 207;
}
.line2 {
stroke-dasharray: 60 60;
}
.line2, .line3 {
stroke-width: 3;
}
.line3 {
stroke-dasharray: 60 207;
}
.navbar-toggler[aria-expanded=true] .line1 {
stroke-dasharray: 90 207;
stroke-dashoffset: -134;
stroke-width: 3;
}
.navbar-toggler[aria-expanded=true] .line2 {
stroke-dasharray: 1 60;
stroke-dashoffset: -30;
stroke-width: 3;
}
.navbar-toggler[aria-expanded=true] .line3 {
stroke-dasharray: 90 207;
stroke-dashoffset: -134;
stroke-width: 3;
}
/***
====================================================================
Footer
====================================================================
***/
.footer {
position: relative;
background-color: var(--primaryColor);
padding-top: var(--sec-padding);
margin-top: auto;
}
@media (max-width: 991.98px) {
.footer {
padding-top: var(--sec-padding);
position: relative;
}
}
.footer__col {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
flex-wrap: wrap;
gap: 1.375rem;
}
.footer__col__title {
font-size: 1.125rem;
border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.3);
color: var(--primaryTextColor);
padding-bottom: 0.625rem;
width: 100%;
}
.footer__col__title > a {
color: var(--primaryTextColor);
transition: 300ms;
}
.footer__col__title > a:is(:hover, :active, :focus) {
color: var(--primaryColor-300);
}
.footer__col__list {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
flex-wrap: wrap;
gap: 0.8125rem;
width: 100%;
}
.footer__col__list__item__link {
color: var(--primaryTextColor);
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: row;
gap: 0.5rem;
transition: all 300ms ease;
font-size: 1rem;
}
.footer__col__list__item__link:is(:hover, :active, :focus) {
color: rgba(255, 255, 255, 0.75);
text-decoration: underline;
}
.footer__col__social {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: row;
flex-wrap: wrap;
gap: 0.625rem;
}
.footer__col__social__item {
position: relative;
}
.footer__col__social__item__link {
position: relative;
width: 2.125rem;
height: 2.125rem;
background-color: transparent;
font-size: 1.0625rem;
border-radius: 0.3125rem;
overflow: hidden;
z-index: 1;
transition: all 300ms ease-in-out;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
border: 0.0625rem solid rgba(255, 255, 255, 0.4);
z-index: 1;
}
.footer__col__social__item__link:is(:hover, :active, :focus) {
color: var(--primaryTextColor);
}
.footer__col__social__item__link img {
max-width: 1.5rem;
max-height: 1.5rem;
filter: brightness(0) invert(1);
}
.footer__col__social__item__link:is(:hover)::before {
opacity: 1;
}
.footer__col__social__item__link:is(:hover):focus::before {
opacity: 0;
}
.footer__col__social__item__link:focus {
outline: 0.125rem solid var(--primaryTextColor);
}
.footer__col__social__item__link:focus::before {
opacity: 0;
}
.footer__col__social__item__link::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.2);
transition: all 300ms ease-in-out;
inset: 0;
opacity: 0;
}
.footer__col__social__item__link i {
position: relative;
}
@media (max-width: 575.98px) {
.footer__copyright {
text-align: center;
}
}
.footer__copyright__par {
font-size: 1rem;
color: var(--primaryTextColor);
font-weight: 600;
margin: 0;
}
.footer__copyright__par a {
font-weight: 400;
}
.footer__copyright__list {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: row;
flex-wrap: wrap;
gap: 0.625rem;
margin-top: 0.625rem;
}
.footer__copyright__list__item a {
color: var(--primaryTextColor);
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: row;
gap: 0.375rem;
font-size: 1rem;
text-decoration: underline;
}
[dir=rtl] .footer__copyright__list__item a {
font-size: 1.125rem;
}
.footer__copyright__list__item a:focus {
color: var(--primaryTextColor);
outline: 0.125rem solid var(--primaryTextColor);
outline-offset: 0.0625rem;
}
.footer__copyright-logo {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
gap: 1rem;
}
.footer__copyright-logo a img {
filter: invert(1);
height: 3.125rem;
}
.footer__copyright-logo a.invertness img {
filter: invert(0);
}
.togglefooter {
display: none;
margin: 0 auto 1rem;
background-color: transparent;
font-size: 1.5rem;
color: var(--primaryTextColor) !important;
transition: all 300ms linear;
}
@media (max-width: 991.98px) {
.togglefooter {
display: none;
}
}
.togglefooter.collapsed {
transform: scaleY(-1);
}
.footer-mobile {
height: auto !important;
overflow: hidden;
transition: height 0.3s ease;
}
@media (max-width: 991.98px) {
.footer-mobile {
height: 0;
}
}
@media (min-width: 992px) {
.footer-mobile {
height: auto !important;
}
}
@media (max-width: 991.98px) {
.footer-mobile.visible {
height: auto;
}
}
/***
====================================================================
slider
====================================================================
***/
.video-slide {
position: relative;
z-index: 1;
overflow: hidden;
height: 36.25rem;
}
.video-slide::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.95) -2.81%, rgba(6, 118, 71, 0.8) 108.84%);
}
.video-slide__inner {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
padding-block: 2rem;
}
.video-slide__inner__video {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
height: 100%;
min-height: 140%;
position: absolute;
z-index: -1;
}
.video-slide__inner__image {
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
}
.video-slide__inner__image__pic {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
height: 100%;
-o-object-position: top center;
object-position: top center;
}
.video-slide__inner__des {
position: relative;
max-width: 56.25rem;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
gap: 1.5rem;
height: 100%;
padding-bottom: 3.125rem;
padding-inline-start: 0.125rem;
}
.video-slide__inner__des * {
color: var(--whiteColor);
}
.video-slide__inner__des__welcome {
font-size: 2.375rem;
opacity: 0.8;
}
@media (max-width: 991.98px) {
.video-slide__inner__des__welcome {
font-size: 2rem;
}
}
.video-slide__inner__des__title {
font-size: 3rem;
line-height: 1.6;
}
[dir=rtl] .video-slide__inner__des__title {
font-size: 3.5rem;
}
@media (max-width: 991.98px) {
[dir=rtl] .video-slide__inner__des__title {
font-size: 3.125rem;
}
}
@media (max-width: 991.98px) {
.video-slide__inner__des__title {
font-size: 2.375rem;
}
}
.video-slide__inner__scrolldown {
position: absolute;
border: 0.125rem solid var(--whiteColor);
width: 1.875rem;
height: 2.8125rem;
color: var(--whiteColor);
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: row;
text-align: center;
border-radius: 1rem;
bottom: 2.5rem;
cursor: pointer;
display: none;
}
.video-slide__inner__scrolldown i {
position: relative;
top: 0.3125rem;
animation-name: scr-pos;
-webkit-animation-name: scr-pos;
animation-duration: 2s;
-webkit-animation-duration: 2s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
.video-slide__inner__slide {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.video-slide__inner__slide > .container {
height: 100%;
}
.video-slide__inner__slide > .container .video-swiper {
height: 100%;
}
@keyframes bounceupdown {
50% {
transform: translateY(-87%);
}
}
@keyframes scr-pos {
0% {
top: 0.3125rem;
}
50% {
top: 43%;
}
100% {
top: 0.3125rem;
}
}
/***
====================================================================
Services
====================================================================
***/
.services {
position: relative;
padding-block: var(--sec-padding);
background-color: var(--primaryTextColor);
z-index: 1;
}
.services__inner {
display: grid;
position: relative;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
gap: 1.5rem;
}
@media (max-width: 575.98px) {
.services__inner {
grid-template-columns: repeat(auto-fit, minmax(21.875rem, 1fr));
}
}
.services__inner__card {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
gap: 1rem;
border: 0.0625rem solid var(--borderColor);
padding: 1.25rem;
border-radius: 0.5rem;
}
@media (max-width: 991.98px) {
.services__inner__card:last-of-type {
border-bottom: 0;
}
}
@media (max-width: 991.98px) {
.services__inner__card:nth-child(2) {
border-inline-end: 0;
}
}
@media (max-width: 991.98px) {
.services__inner__card:nth-child(3) {
border-bottom: 0;
}
}
@media (max-width: 575.98px) {
.services__inner__card:nth-child(3) {
border-bottom: 0.0625rem solid var(--borderColor);
}
}
.services__inner__card__icon {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
border-radius: 100%;
background-color: var(--primaryColor-400);
width: 3.5625rem;
height: 3.5625rem;
transition: all 0.3s ease;
z-index: 1;
}
.services__inner__card:hover .services__inner__card__icon::before {
opacity: 1;
transform: scale(1);
}
.services__inner__card__icon img {
height: 1.8125rem;
transition: all 400ms ease;
}
.services__inner__card:hover .services__inner__card__icon img {
filter: brightness(0) invert(1);
}
.services__inner__card__icon::before {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
content: "";
background-color: var(--primaryColor-300);
transform: scale(1.1);
border-radius: 50px;
opacity: 0;
z-index: -1;
transition: all 0.3s ease 0s;
}
.services__inner__card__thumb {
width: 100%;
position: relative;
border-radius: 0.5rem;
overflow: hidden;
height: 12.5rem;
}
.services__inner__card__thumb::after {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 0;
transition: all 0.3s linear 0s;
content: "";
background-image: none;
background-color: rgba(27, 131, 84, 0.5);
}
.media-center__cols__card:hover .services__inner__card__thumb::after, .media-center__cols__card:active .services__inner__card__thumb::after, .media-center__cols__card:focus .services__inner__card__thumb::after {
top: 0;
height: 100%;
}
.services__inner__card__thumb__img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: all 300ms ease-in-out;
}
.media-center__cols__card:hover .services__inner__card__thumb__img, .media-center__cols__card:active .services__inner__card__thumb__img, .media-center__cols__card:focus .services__inner__card__thumb__img {
transform: scale(1.1);
}
.services__inner__card__thumb__dates {
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-direction: row;
gap: 0.625rem;
position: absolute;
inset-inline-start: 1rem;
bottom: 1rem;
}
.services__inner__card__thumb__dates__label {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
gap: 0.4375rem;
padding: 0.5625rem 0.625rem;
position: relative;
color: var(--primaryTextColor);
z-index: 1;
min-width: 4.0625rem;
line-height: 1;
background-color: var(--primaryColor-100);
font-weight: 700;
font-size: 0.8125rem;
border-radius: 0.4375rem;
}
.services__inner__card__thumb__dates__label span {
font-size: 1.375rem;
border-bottom: 0.0625rem solid var(--borderColor);
width: 100%;
padding-bottom: 0.3125rem;
}
.services__inner__card__thumb__dates__label i {
font-style: normal;
width: 100%;
}
.services__inner__card__title {
margin-top: 0.3125rem;
}
[dir=rtl] .services__inner__card__title {
padding-bottom: 0.125rem;
}
.services__inner__card__par {
margin: 0;
}
/***
====================================================================
media-center
====================================================================
***/
.media-center {
position: relative;
padding-block: var(--sec-padding);
min-height: 50rem;
z-index: 2;
background: url(../images/media-center-bg.svg), linear-gradient(135deg, rgb(22, 22, 22) 0%, rgb(22, 22, 22) 16.17%, var(--primaryColor) 73.92%, var(--primaryColor) 100%);
background-size: 130% 153%;
background-position: center top;
}
@media (max-width: 1199.98px) {
.media-center {
background-position: center bottom !important;
background-size: cover;
}
}
.media-center__inner {
position: relative;
}
.media-center__cols {
position: relative;
}
.media-center__cols__card {
position: relative;
background-color: var(--whiteColor);
border-radius: 1rem;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 0.2s ease-in-out;
display: block;
}
.media-center__cols__card.media-card-style2 {
border: 0.0625rem solid var(--border-neutral-primary, #D2D6DB);
}
.media-center__cols__card.media-card-style2:hover {
background: var(--background-neutral-50, #F9FAFB);
}
.media-center__cols__card.media-card-style2:focus, .media-center__cols__card.media-card-style2:focus-visible, .media-center__cols__card.media-card-style2:active, .media-center__cols__card.media-card-style2:focus:not(:focus-visible) {
background: var(--background-card, #FFF);
border-color: var(--border-black, #161616);
}
.media-center__cols__card__inner {
position: relative;
padding: 1.25rem;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
gap: 1rem;
height: 100%;
}
.media-center__cols__card__inner__thumb {
width: 100%;
position: relative;
border-radius: 0.25rem;
overflow: hidden;
height: 16.875rem;
}
.media-center__cols__card__inner__thumb.small {
height: 12rem;
}
.media-center__cols__card__inner__thumb__img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: all 300ms ease-in-out;
}
.media-center__cols__card__inner__thumb__dates {
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-direction: row;
gap: 0.625rem;
position: absolute;
inset-inline-start: 1rem;
bottom: 1rem;
}
.media-center__cols__card__inner__thumb__dates__label {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
gap: 0.4375rem;
padding: 0.5625rem 0.625rem;
position: relative;
color: var(--primaryTextColor);
z-index: 1;
min-width: 4.0625rem;
line-height: 1;
background-color: var(--primaryColor-100);
font-weight: 700;
font-size: 0.8125rem;
border-radius: 0.4375rem;
}
.media-center__cols__card__inner__thumb__dates__label span {
font-size: 1.375rem;
border-bottom: 0.0625rem solid var(--borderColor);
width: 100%;
padding-bottom: 0.3125rem;
}
.media-center__cols__card__inner__thumb__dates__label i {
font-style: normal;
width: 100%;
}
.media-center__cols__card__inner__caption {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
flex: 1 0 0;
width: 100%;
gap: 0.625rem;
}
.media-center__cols__card__inner__caption__title {
position: relative;
transition: all 300ms ease-in-out;
font-size: 1.25rem;
}
.media-center__cols__card__inner__caption__par {
margin: 0;
}
.media-center__cols__card__inner__caption__location {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
gap: 0.4375rem;
}
.media-center__cols__card__inner__caption__location img {
height: 1.125rem;
}
.media-center__cols__card__inner__caption__location b {
font-weight: 500;
color: var(--grayMidColor);
}
.media-center__cols__card__inner__caption__label {
padding: 0.25rem 0.65rem;
border-radius: 0.25rem;
border: 0.0625rem solid var(--borderColor);
color: var(--grayDarkColor);
font-weight: 500;
font-size: 0.9375rem;
background-color: #F9FAFB;
}
.media-center__cols__card__inner__status {
position: relative;
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-direction: row;
gap: 0.3125rem;
}
.media-center__cols__card__inner__status span {
display: block;
padding: 0.375rem 0.75rem;
border-radius: 0.25rem;
border: 0.0625rem solid var(--borderColor);
color: var(--grayDarkColor);
font-weight: 500;
font-size: 0.9375rem;
}
.media-center__cols__card__inner__status span.status {
color: var(--primaryColor);
border-color: #ABEFC6;
background-color: #ECFDF3;
}
.media-center__cols__card__inner__status span.status-other-bg {
background-color: #F9FAFB;
}
.media-center__cols__card[data-fancybox=popvideo] .media-center__cols__card__inner__thumb,
.media-center__cols__card .popvideo .media-center__cols__card__inner__thumb {
position: relative;
}
.media-center__cols__card[data-fancybox=popvideo] .media-center__cols__card__inner__thumb::before,
.media-center__cols__card .popvideo .media-center__cols__card__inner__thumb::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='42' viewBox='0 0 60 42' fill='none'%3E%3Cpath d='M58.7427 6.5588C58.0513 3.97578 56.0213 1.94591 53.4383 1.25447C48.7614 3.75509e-07 29.9985 0 29.9985 0C29.9985 0 11.2359 3.75509e-07 6.55878 1.25447C3.97578 1.94591 1.94591 3.97578 1.25447 6.5588C3.75509e-07 11.2359 0 21 0 21C0 21 3.75509e-07 30.7642 1.25447 35.4413C1.94591 38.0243 3.97578 40.0541 6.55878 40.7455C11.2359 42 29.9985 42 29.9985 42C29.9985 42 48.7614 42 53.4383 40.7455C56.0213 40.0541 58.0513 38.0243 58.7427 35.4413C59.9972 30.7642 59.9972 21 59.9972 21C59.9972 21 59.9922 11.2359 58.7427 6.5588Z' fill='%23FF0000'/%3E%3Cpath d='M23.9941 29.9971L39.5812 20.9986L23.9941 12V29.9971Z' fill='white'/%3E%3C/svg%3E");
background-repeat: no-repeat no-repeat;
background-position: center center;
background-size: 3.75rem;
}
.media-center .swiper-wrapper {
padding-bottom: 6.25rem;
}
.media-center .swiper-slide {
display: flex;
min-height: 100%;
}
.media-center.without-bg {
padding-block: 0;
min-height: auto;
background: none;
width: 100%;
}
@media (max-width: 1199.98px) {
.media-center.without-bg .swiper {
overflow: visible;
}
}
.swiper .swiper-wrapper {
padding-block: 5rem;
padding-top: 0;
}
.video-swiper .swiper .swiper-wrapper {
padding-top: 3.125rem;
}
.partners .swiper .swiper-wrapper {
padding-block: 0;
}
.swiper:has(.swiper-pagination-lock) .swiper-wrapper {
padding-bottom: 1.875rem;
}
.swiper .swiper-pagination {
display: flex;
justify-content: center;
}
.swiper .swiper-pagination .swiper-pagination-bullet {
width: 2rem;
height: 2rem;
opacity: 1;
transition: all 300ms ease-in-out;
position: relative;
overflow: visible;
background: transparent;
border: none;
margin: 0;
padding: 0.875rem;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.swiper .swiper-pagination .swiper-pagination-bullet::after {
content: "";
position: absolute;
width: 1rem;
height: 1rem;
border-radius: 100%;
background-color: var(--primaryColor-500);
border: 1px solid var(--primaryColor-500);
transition: all 300ms ease-in-out;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.swiper .swiper-pagination .swiper-pagination-bullet::before {
content: "";
position: absolute;
width: 1rem;
height: 1rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
background-color: var(--primaryColor-100);
transition: all 300ms ease-in-out;
border-radius: 100%;
z-index: 1;
}
.swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after, .swiper .swiper-pagination .swiper-pagination-bullet:is(:hover, :focus-visible)::after {
border-color: var(--primaryColor-100);
background-color: var(--primaryColor-100);
}
.swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before, .swiper .swiper-pagination .swiper-pagination-bullet:is(:hover, :focus-visible)::before {
transform: translate(-50%, -50%) scale(1);
}
.swiper .swiper-pagination .swiper-pagination-bullet:focus-visible {
outline: 3px solid rgba(var(--primaryColor-100), 0.5);
outline-offset: 2px;
}
.swiper .swiper-pagination--darkcolor .swiper-pagination-bullet::after {
border-color: var(--primaryColor-100);
}
.swiper .swiper-pagination--darkcolor .swiper-pagination-bullet::before {
background-color: var(--primaryColor-100);
}
.swiper .swiper-pagination--darkcolor .swiper-pagination-bullet.swiper-pagination-bullet-active::after, .swiper .swiper-pagination--darkcolor .swiper-pagination-bullet:is(:hover, :focus-visible)::after {
border-color: var(--primaryColor-100);
}
.swiper-navigation {
--swiper-navigation-size: 1rem;
--swiper-theme-color: var(--darkColor);
display: flex;
align-items: center;
gap: 1rem;
}
.swiper-navigation .swiper-button-next,
.swiper-navigation .swiper-button-prev {
position: relative;
left: auto;
right: auto;
width: 2.375rem;
flex: 0 0 auto;
height: 2.375rem;
background: var(--grayColor-100);
border-radius: 0.25rem;
}
.swiper-navigation .swiper-button-next::after,
.swiper-navigation .swiper-button-prev::after {
font-family: "icomoon";
}
.swiper-navigation .swiper-button-next::after {
content: "\e90b";
}
.swiper-rtl .swiper-navigation .swiper-button-next::after {
content: "\e90c";
}
.swiper-navigation .swiper-button-prev::after {
content: "\e90c";
}
.swiper-rtl .swiper-navigation .swiper-button-prev::after {
content: "\e90b";
}
.swiper-navigation:has(.swiper-rtl) .swiper-button-next::after {
content: "\e90c";
}
.swiper-navigation:has(.swiper-rtl) .swiper-button-prev::after {
content: "\e90b";
}
/***
====================================================================
media-center
====================================================================
***/
.partners {
position: relative;
padding-block: var(--sec-padding);
background-color: var(--primaryTextColor);
z-index: 1;
}
.partners__inner {
position: relative;
}
.partners__cols {
position: relative;
}
.partners__cols__card {
position: relative;
padding: 0.0625rem;
}
.partners__cols__card__inner {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
flex-wrap: wrap;
gap: 1.375rem;
}
.partners__cols__card__inner__logo {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
position: relative;
width: 100%;
height: 6.875rem;
border-radius: 1rem;
border: 0.0625rem solid var(--borderColor);
}
.partners__cols__card__inner__logo__thumb {
position: relative;
padding: 0.3125rem;
display: flex;
}
.partners__cols__card__inner__logo img {
max-width: 85%;
max-height: 5.625rem;
margin: auto;
transition: all 300ms ease-in-out;
}
.partners__cols__card:hover .partners__cols__card__inner__logo img, .partners__cols__card:active .partners__cols__card__inner__logo img, .partners__cols__card:focus .partners__cols__card__inner__logo img {
transform: scale(1.05);
}
.partners__cols__card__title {
font-weight: 500;
font-size: 1.125rem;
background: linear-gradient(to right, var(--primaryColor-100), var(--primaryColor-100) 50%, var(--darkColor) 50%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
background-position: 100%;
transition: all 600ms ease-in-out;
text-align: center;
}
[dir=rtl] .partners__cols__card__title {
font-size: 1.25rem;
background: linear-gradient(to right, var(--darkColor) 50%, var(--primaryColor-100) 50%, var(--primaryColor-100) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
background-position: 0%;
}
.partners__cols__card:hover .partners__cols__card__title, .partners__cols__card:active .partners__cols__card__title, .partners__cols__card:focus .partners__cols__card__title {
background-position: 0 100%;
}
[dir=rtl] .partners__cols__card:hover .partners__cols__card__title, [dir=rtl] .partners__cols__card:active .partners__cols__card__title, [dir=rtl] .partners__cols__card:focus .partners__cols__card__title {
background-position: 100% 100%;
}
.partener-card {
position: relative;
height: 100%;
}
.partener-card__inner {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
flex-wrap: wrap;
gap: 0.75rem;
border-radius: 1rem;
border: 0.0625rem solid var(--borderColor);
padding: 1rem;
height: 100%;
text-align: center;
}
.partener-card__inner__thumb {
position: relative;
display: flex;
width: 100%;
height: 7.5rem;
}
.partener-card__inner__thumb img {
width: 100%;
max-width: 85%;
max-height: 85%;
margin: auto;
transition: all 300ms ease-in-out;
}
.partener-card:hover .partener-card__inner__thumb img, .partener-card:active .partener-card__inner__thumb img, .partener-card:focus .partener-card__inner__thumb img {
transform: scale(1.05);
}
.partener-card__inner__caption__title {
font-size: 1.0625rem;
color: #384250;
}
/***
====================================================================
page-banner
====================================================================
***/
.page-banner {
min-height: 14.75rem;
position: relative;
display: flex;
overflow: hidden;
z-index: 2;
align-items: center;
}
@media (max-width: 991.98px) {
.page-banner {
min-height: 21.875rem;
}
}
.page-banner__inner {
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
}
.page-banner__inner::before {
content: "";
position: absolute;
inset: 0;
background: rgba(9, 42, 30, 0.8);
}
.page-banner__inner__img {
width: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
height: 100%;
-o-object-position: center;
object-position: center;
}
.page-banner::after {
position: absolute;
inset: 0;
content: "";
background-color: #092A1E;
opacity: 0.08;
z-index: -1;
mix-blend-mode: overlay;
}
.page-banner__title-breadcramb {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
flex-wrap: wrap;
gap: 0.75rem;
}
.page-banner__title {
color: var(--primaryTextColor);
font-size: 2.25rem;
font-weight: 700;
}
.page-banner--solidcolor .page-banner__title {
color: var(--darkColor);
}
.page-banner__title span {
display: block;
}
[dir=rtl] .page-banner__title {
font-size: 2.8125rem;
}
.page-banner__nav {
margin-bottom: 0.1875rem;
--bs-breadcrumb-font-size: 1rem;
font-weight: 400;
}
.page-banner__nav__list {
--bs-breadcrumb-divider-color: var(--grayLightColor);
--bs-breadcrumb-item-active-color: #bbb;
--bs-breadcrumb-item-padding-x: 0.65rem;
margin: 0;
}
.page-banner__nav__list__item {
display: flex;
}
.page-banner__nav__list__item > a {
transition: all 0.3s ease-in-out;
}
.page-banner--solidcolor .page-banner__nav__list__item > a {
color: var(--grayMidColor);
}
.page-banner__nav__list__item > a:is(:hover, :active, :focus) {
color: var(--grayColor);
text-decoration: underline;
}
.page-banner--solidcolor .page-banner__nav__list__item > a:is(:hover, :active, :focus) {
color: var(--grayColor);
}
.page-banner__nav__list__item + .breadcrumb-item, .page-banner__nav__list__item.active {
color: var(--grayLightColor);
}
.page-banner__nav__list__item + .breadcrumb-item::before {
font-family: "icomoon";
content: "\e90b";
font-size: 0.6875rem;
display: flex;
align-items: center;
padding-top: 0.125rem;
}
.page-banner--solidcolor .page-banner__nav__list__item + .breadcrumb-item::before {
color: var(--grayMidColor);
}
[dir=rtl] .page-banner__nav__list__item + .breadcrumb-item::before {
content: "\e90c";
}
.page-banner--solidcolor {
background-color: #F7FDF9;
}
/***
====================================================================
About Page
====================================================================
***/
.middle-sec {
position: relative;
z-index: 1;
background-color: var(--whiteColor);
}
.about-page {
padding-block: var(--sec-padding);
position: relative;
background-color: var(--whiteColor);
z-index: 1;
}
.about-page__cards {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
gap: 4.375rem;
margin-bottom: 5.625rem;
}
.about-page__cards__item {
position: relative;
display: grid;
width: 100%;
grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
gap: 4.375rem;
align-items: center;
}
@media (max-width: 991.98px) {
.about-page__cards__item {
grid-template-columns: 1fr;
gap: 2rem;
}
}
.about-page__cards__item__thumb {
position: relative;
width: 100%;
height: 31.25rem;
border-radius: var(--cardRadius);
overflow: hidden;
background-color: var(--primaryColor-100);
}
@media (min-width: 992px) {
.about-page__cards__item:nth-child(even) .about-page__cards__item__thumb {
order: 2;
}
}
.about-page__cards__item__thumb__image {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: all 300ms ease-in-out;
}
.about-page__cards__item:hover .about-page__cards__item__thumb__image, .about-page__cards__item:active .about-page__cards__item__thumb__image, .about-page__cards__item:focus .about-page__cards__item__thumb__image {
transform: scale(1.05);
}
.about-page__cards__item__caption .btn {
border-radius: 0.25rem;
}
.about-page__cards__item__caption__tilte {
position: relative;
font-weight: 600;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: row;
font-size: var(--titleFont);
gap: 1.375rem;
margin-bottom: 0.625rem;
}
.about-page__cards__item__caption__tilte::before {
position: relative;
content: "";
inset-inline-start: 0;
inset-block-start: 0.625rem;
width: 0.4375rem;
height: 2.25rem;
background-color: var(--primaryColor-100);
}
[dir=rtl] .about-page__cards__item__caption__tilte::before {
inset-block-start: 0.875rem;
}
.pillars-swiper__card {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
gap: 1.5rem;
}
.pillars-swiper__card__thumb {
height: 31.25rem;
overflow: hidden;
border-radius: var(--cardRadius);
position: relative;
width: 100%;
}
@media (max-width: 767.98px) {
.pillars-swiper__card__thumb {
height: 25rem;
}
}
.pillars-swiper__card__thumb__img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: all 300ms ease-in-out;
}
.media-center__cols__card:hover .pillars-swiper__card__thumb__img, .media-center__cols__card:active .pillars-swiper__card__thumb__img, .media-center__cols__card:focus .pillars-swiper__card__thumb__img {
transform: scale(1.05);
}
.pillars-swiper__card__caption {
width: 100%;
}
.members-sec {
position: relative;
background: var(--primaryColor-400);
padding-block: var(--sec-padding);
z-index: 1;
}
.members-sec__inner {
--bs-gutter-x: 1.5rem;
position: relative;
display: flex;
justify-content: center;
align-items: stretch;
flex-direction: row;
flex-wrap: wrap;
margin-left: calc(-0.5 * var(--bs-gutter-x));
margin-right: calc(-0.5 * var(--bs-gutter-x));
}
.members-sec__inner__item {
flex: 0 0 auto;
width: 20%;
padding-left: calc(var(--bs-gutter-x) * 0.5);
padding-right: calc(var(--bs-gutter-x) * 0.5);
margin-bottom: var(--bs-gutter-x);
position: relative;
z-index: 1;
transition: 0.3s;
}
@media (max-width: 1399.98px) {
.members-sec__inner__item {
width: 25%;
}
}
@media (max-width: 1199.98px) {
.members-sec__inner__item {
width: 33.3333333333%;
}
}
@media (max-width: 767.98px) {
.members-sec__inner__item {
width: 50%;
}
}
@media (max-width: 575.98px) {
.members-sec__inner__item {
width: 100%;
}
}
.members-sec__inner__item__inner {
position: relative;
z-index: 1;
padding: 1.5rem 1.125rem;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
flex-wrap: wrap;
gap: 2rem;
min-height: 100%;
width: 100%;
transition: all 0.3s ease-in-out;
transform-style: preserve-3d;
background-color: rgba(255, 255, 255, 0.59);
border-radius: var(--cardRadius);
}
@media (max-width: 575.98px) {
.members-sec__inner__item__inner {
max-width: 25rem;
margin: auto;
}
}
.members-sec__inner__item__inner:is(:hover, :active, :focus) {
transform: rotateY(0deg) scale(1.01);
}
.members-sec__inner__item__inner__thumb {
height: 8.4375rem;
flex: 0 0 auto;
overflow: hidden;
}
.members-sec__inner__item__inner__thumb__img {
height: 100%;
transition: transform 300ms ease;
}
.members-sec__inner__item__inner__des {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
gap: 0.3125rem;
flex: 1 0 0;
width: 100%;
}
@media (max-width: 767.98px) {
.members-sec__inner__item__inner__des {
text-align: center;
align-items: center;
}
}
.members-sec__inner__item__inner__des__tag {
color: #5E5E5E;
font-size: 1.0625rem;
font-family: "IBMPlexSansArabic";
}
[dir=ltr] .members-sec__inner__item__inner__des__tag {
font-family: "IBMPlexSansArabic";
}
.members-sec__inner__item__inner__des__name {
font-size: 1.1875rem;
color: var(--secondaryColor);
width: 100%;
}
.members-sec__inner__item__inner__des__title {
color: var(--grayDarkColor);
font-size: 1rem;
font-weight: 400;
width: 100%;
}
.members-sec__inner__item:first-child {
margin-bottom: 3.75rem;
width: 100%;
}
@media (max-width: 1399.98px) {
.members-sec__inner__item:first-child {
grid-column: span 4;
}
}
@media (max-width: 1199.98px) {
.members-sec__inner__item:first-child {
grid-column: span 3;
}
}
@media (max-width: 991.98px) {
.members-sec__inner__item:first-child {
grid-column: span 2;
}
}
@media (max-width: 575.98px) {
.members-sec__inner__item:first-child {
grid-column: span 1;
}
}
.members-sec__inner__item:first-child .members-sec__inner__item__inner {
max-width: 25rem;
margin-inline: auto;
}
.members-sec__inner__item:first-child .members-sec__inner__item__inner__thumb {
height: 13.125rem;
overflow: hidden;
}
.members-sec__inner__item:first-child .members-sec__inner__item__inner__des {
text-align: start;
align-items: flex-start;
gap: 0.25rem;
}
@media (max-width: 767.98px) {
.members-sec__inner__item:first-child .members-sec__inner__item__inner__des {
text-align: center;
align-items: center;
}
}
.members-sec__inner__item:first-child .members-sec__inner__item__inner__des__name {
font-size: 1.125rem;
}
.members-sec__inner__item:first-child .members-sec__inner__item__inner__des__title {
font-size: 1.0625rem;
color: var(--grayColor);
}
/***
====================================================================
page-details
====================================================================
***/
.page-details {
position: relative;
background-color: var(--whiteColor);
padding-top: var(--sec-padding);
padding-bottom: calc(var(--sec-padding) - 2rem);
z-index: 1;
}
.page-details:has(.page-feedback) {
padding-bottom: calc(var(--sec-padding) - 4rem);
}
.page-details__inner {
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-direction: column;
flex-wrap: wrap;
gap: 2.1875rem;
}
.page-details__inner__caption {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
flex-wrap: wrap;
width: 100%;
gap: 0.625rem;
}
.page-details__inner__caption a:not(.btn) {
color: var(--primaryColor-100);
text-decoration: underline;
}
.page-details__inner__caption a:not(.btn):hover {
color: var(--primaryColor-300) !important;
text-decoration: underline;
}
.page-details__inner__caption a:not(.btn):hover:focus {
text-decoration: underline;
color: var(--primaryColor-100);
}
.page-details__inner__caption a:not(.btn):active {
color: #88D8AD !important;
text-decoration: underline;
}
.page-details__inner__caption a:not(.btn):focus {
color: var(--primaryColor-100) !important;
outline: 0.125rem solid var(--grayDarkColor);
}
.page-details__inner__caption a:not(.btn).btn {
color: var(--primaryTextColor);
}
.page-details__inner__caption a:not(.btn).btn:is(:hover, :active, :focus) {
text-decoration: none;
}
.page-details__inner__caption a:not(.btn).btn-primary-100:is(:hover, :active, :focus) {
background-color: #166a45;
border-color: #166a45;
}
.page-details__inner__caption__title {
font-weight: 700;
width: 100%;
}
.page-details__inner__caption__title__head {
font-size: var(--titleFont);
}
.page-details__inner__caption__title__head.sub-title {
font-size: 1.5rem;
color: var(--text-default, #161616);
}
.page-details__inner__caption__title--line {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-direction: row;
width: 100%;
align-items: center;
}
.page-details__inner__caption__par, .page-details__inner__caption p {
margin: 0;
}
.page-details__inner__caption ul, .page-details__inner__caption li {
list-style-type: inherit;
}
.page-details__inner__caption ul {
padding-inline-start: 2rem;
}
.page-details__inner__caption__labels {
padding-inline-start: 0 !important;
list-style-type: none !important;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: row;
flex-wrap: wrap;
gap: 0.625rem;
}
.page-details__inner__caption__labels__item {
position: relative;
}
.page-details__inner__caption__labels__text {
color: var(--grayDarkColor);
border: 0.0625rem solid var(--primaryColor-500);
border-radius: 0.25rem;
padding: 0.3125rem 0.625rem;
display: block;
font-weight: 500;
font-size: 0.9375rem;
background-color: #F9FAFB;
}
.page-details__inner__caption__labels__text.primary-color {
color: #1849A9;
border-color: #B2DDFF;
}
.page-details__inner__caption__labels__text.success-color {
color: #085D3A;
border-color: #ABEFC6;
}
.page-details__inner__caption__labels__text.gray-color {
color: var(--grayDarkColor);
border-color: var(--primaryColor-500);
}
.page-details__inner__caption__list {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
gap: 1.5rem;
margin-top: 0.5rem;
}
.page-details__inner__caption__list__labels {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
gap: 0.3125rem;
}
.page-details__inner__caption__list__labels.bg-label {
display: block;
padding: 0.375rem 0.75rem;
border-radius: 0.25rem;
border: 0.0625rem solid var(--borderColor);
color: var(--grayDarkColor);
font-weight: 500;
font-size: 0.9375rem;
background-color: #F9FAFB;
}
.page-details__inner__caption__list__labels img {
height: 1.25rem;
}
.page-details__inner__thumb {
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: row;
}
.page-details__inner__thumb__image {
border-radius: var(--cardRadius);
max-height: 41.875rem;
min-height: 25rem;
max-width: 100%;
}
.page-details__inner__thumb__image.auto-height {
max-height: none;
width: 100%;
min-height: auto;
}
.page-details__inner__forms {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: row;
gap: 0.875rem;
}
@media (max-width: 575.98px) {
.page-details__inner__forms {
flex-wrap: wrap;
}
}
.page-details__inner__forms:has(.page-details__inner__forms__groups) {
width: 100%;
}
.page-details__inner__forms__groups {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: row;
gap: 0.875rem;
}
.page-details__inner__forms .form-group {
flex: 0 0 auto;
max-width: 18.625rem;
}
.page-details__inner__forms .form-group .input-group-abs .form-control {
padding-inline-start: 2.1875rem;
}
.page-details__inner__forms .form-group .input-group-abs .btn {
display: flex;
align-items: center;
}
.page-details__inner__forms__num-services {
align-self: flex-end;
margin-inline-start: auto;
}
.page-details__inner__forms__num-services__title {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
gap: 0.4375rem;
}
.page-details__inner__forms__num-services__title span {
font-weight: 500;
border: 0.0625rem solid var(--borderColor);
background-color: #F9FAFB;
font-size: 1rem;
padding: 0.3125rem 0.625rem;
}
.page-details__inner > div {
width: 100%;
}
.page-details__footer {
position: relative;
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: row;
gap: 0.3125rem;
margin-top: 5rem;
padding-top: 1rem;
border-top: 0.0625rem solid var(--borderColor);
color: var(--grayDarkColor);
}
.page-details ul, .page-details li {
list-style-type: inherit;
}
.page-details ul {
padding-inline-start: 2rem;
line-height: 2;
}
.page-details--service-cataloge::before {
content: "";
position: absolute;
inset-inline: 0;
inset-block-start: 0;
background-color: #F7FDF9;
height: 20.625rem;
}
.national-sec {
padding-block: var(--sec-padding);
}
.national-sec__card {
position: relative;
width: 100%;
min-height: 100%;
height: 100%;
}
.national-sec__card__inner {
position: relative;
background-color: var(--whiteColor);
border-radius: var(--cardRadius);
padding: var(--cardPadding);
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
flex-wrap: wrap;
gap: 0.625rem;
transition: all 0.3s ease-in-out;
height: 100%;
}
.benefit-sec .national-sec__card__inner {
border: 1px solid var(--borderColor);
transform: none;
}
.national-sec__card__inner__icon {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
border-radius: 100%;
background-color: var(--primaryColor-400);
width: 3.5625rem;
height: 3.5625rem;
transition: all 0.3s ease;
z-index: 1;
margin-bottom: 1rem;
}
.national-sec__card:hover .national-sec__card__inner__icon::before, .national-sec__card:focus .national-sec__card__inner__icon::before, .national-sec__card:active .national-sec__card__inner__icon::before {
opacity: 1;
transform: scale(1);
}
.national-sec__card__inner__icon img, .national-sec__card__inner__icon svg {
height: 1.8125rem;
transition: all 400ms ease;
}
.national-sec__card:hover .national-sec__card__inner__icon img, .national-sec__card:hover .national-sec__card__inner__icon svg {
filter: brightness(0) invert(1);
}
.national-sec__card__inner__icon::before {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
content: "";
background-color: var(--primaryColor);
transform: scale(1.2);
border-radius: 50px;
opacity: 0;
z-index: -1;
transition: all 0.3s ease 0s;
}
.national-sec__card__inner__thumb {
width: 100%;
position: relative;
border-radius: 0.25rem;
overflow: hidden;
height: 12.5rem;
}
.national-sec__card__inner__thumb::after {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 0;
transition: all 0.3s linear 0s;
content: "";
background-image: none;
background-color: rgba(27, 131, 84, 0.5);
}
.national-sec__card:hover .national-sec__card__inner__thumb::after, .national-sec__card:active .national-sec__card__inner__thumb::after, .national-sec__card:focus .national-sec__card__inner__thumb::after {
top: 0;
height: 100%;
}
.national-sec__card__inner__thumb__img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: all 300ms ease-in-out;
}
.national-sec__card:hover .national-sec__card__inner__thumb__img, .national-sec__card:active .national-sec__card__inner__thumb__img, .national-sec__card:focus .national-sec__card__inner__thumb__img {
transform: scale(1.1);
}
.national-sec__card__inner__par {
margin: 0;
}
.national-sec__card:hover .buttons-blog .btn, .national-sec__card:focus .buttons-blog .btn, .national-sec__card:active .buttons-blog .btn, .national-sec__card:focus:not(:focus-visible) .buttons-blog .btn {
background-color: #166A45 !important;
}
.national-sec .row {
transform-style: preserve-3d;
perspective: 31.25rem;
}
.national-sec .row > div {
transition: 0.3s;
transform-style: preserve-3d;
}
.national-sec .row > div .national-sec__card {
transition: 0.3s;
transform-style: preserve-3d;
}
.national-sec .swiper-slide {
display: flex;
min-height: 100%;
}
.national-sec .buttons-blog {
margin-top: auto;
padding-top: 10px;
}
@media (max-width: 1199.98px) {
.national-sec:not(.training-sec) .swiper {
overflow: visible;
}
}
.benefit-sec {
background-color: var(--whiteColor);
}
/***
====================================================================
Workshops
====================================================================
***/
.statistics-sec .row > div:not(:first-of-type) .statistics-card {
border-inline-start: 0.0625rem solid var(--borderColor);
}
@media (max-width: 575.98px) {
.statistics-sec .row > div:not(:first-of-type) .statistics-card {
border-inline-start: 0;
border-top: 0.0625rem solid var(--borderColor);
}
}
@media (max-width: 991.98px) {
.statistics-sec .row > div:last-of-type .statistics-card {
border-inline-start: 0;
border-top: 0.0625rem solid var(--borderColor);
}
}
.statistics-card {
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: row;
position: relative;
gap: 2rem;
padding: 3.75rem 2rem;
}
@media (max-width: 1199.98px) {
.statistics-card {
gap: 1rem;
padding: 2.5rem 1rem;
}
}
.statistics-card__icon {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
border-radius: 100%;
background-color: var(--primaryColor-400);
width: 3.5625rem;
height: 3.5625rem;
transition: all 0.3s ease;
z-index: 1;
font-size: 1.5625rem;
color: var(--primaryColor-100);
flex: 0 0 auto;
}
.statistics-card__icon img, .statistics-card__icon svg {
height: 1.6875rem;
}
.statistics-card:hover .statistics-card__icon img, .statistics-sec__card:focus .statistics-card__icon img, .statistics-sec__card:active .statistics-card__icon img, .statistics-card:hover .statistics-card__icon svg, .statistics-sec__card:focus .statistics-card__icon svg, .statistics-sec__card:active .statistics-card__icon svg {
filter: brightness(0) invert(1);
}
.statistics-card:hover .statistics-card__icon, .statistics-sec__card:focus .statistics-card__icon, .statistics-sec__card:active .statistics-card__icon {
color: var(--primaryTextColor);
}
.statistics-card:hover .statistics-card__icon::before, .statistics-sec__card:focus .statistics-card__icon::before, .statistics-sec__card:active .statistics-card__icon::before {
opacity: 1;
transform: scale(1);
}
.statistics-card__icon::before {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
content: "";
background-color: var(--primaryColor-100);
transform: scale(1.15);
border-radius: 3.125rem;
opacity: 0;
z-index: -1;
transition: all 0.3s ease 0s;
}
.statistics-card__count {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
gap: 0.3125rem;
}
.statistics-card__count__num {
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
gap: 0.625rem;
color: var(--primaryColor-100);
line-height: 1;
}
.statistics-card__count__num span {
font-size: 4.5rem;
}
@media (max-width: 1199.98px) {
.statistics-card__count__num span {
font-size: 3.75rem;
}
}
.statistics-card__count__num i {
font-size: 2.5rem;
}
.statistics-card--style2 {
align-items: center;
text-align: center;
flex-direction: column;
gap: 1rem;
padding: 2rem 3rem;
border: 0 !important;
}
.statistics-card--style2 .statistics-card__count {
align-items: center;
text-align: center;
gap: 0.5rem;
}
.statistics-card--style2 .statistics-card__count__num {
color: var(--text-primary-sa-flag, #14573A);
font-weight: 400;
}
.statistics-card--style2 .statistics-card__count__num .conter-num {
font-size: 3.4375rem;
}
.statistics-card--style2 .statistics-card__count__title {
font-weight: 400;
font-size: 1.1875rem;
}
.training-swiper .swiper-slide {
display: block;
min-height: auto;
}
.training-swiper__slide {
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: row;
}
.training-swiper__slide__thumb {
position: relative;
overflow: hidden;
}
.training-swiper__slide__thumb__image {
max-height: 41.875rem;
border-radius: 1rem;
}
.card-dates {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: row;
gap: 0.625rem;
font-weight: 700;
}
.card-dates__item {
background-color: var(--primaryColor-100);
border-radius: 0.5rem;
position: relative;
padding: 0.625rem 0.5rem;
color: var(--primaryTextColor);
font-size: 0.875rem;
text-align: center;
min-width: 3.75rem;
}
.card-dates__item__num {
font-size: 1.125rem;
border-bottom: 0.0625rem solid var(--borderColor);
width: 100%;
padding-bottom: 0.3125rem;
margin-bottom: 0.3125rem;
line-height: 1;
}
.card-dates__item__date {
width: 100%;
font-size: 0.8125rem;
}
.card-dates__item__date span {
display: block;
}
.event-timer-sec {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
width: 100%;
padding: 1.5rem;
gap: 1.5rem;
border-radius: var(--cardRadius);
}
.event-counter {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: row;
}
.event-counter__item {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-end;
flex-direction: row;
flex-wrap: wrap;
padding-inline: 1.5625rem;
gap: 0.3125rem;
}
@media (max-width: 767.98px) {
.event-counter__item {
flex-direction: column;
align-items: center;
padding-inline: 1rem;
}
}
.event-counter__item__num {
color: var(--primaryColor-100);
font-size: 3rem;
font-weight: 600;
line-height: 1;
}
@media (max-width: 767.98px) {
.event-counter__item__num {
font-size: 2.1875rem;
}
}
.event-counter__item__text {
font-size: 1rem;
font-weight: 500;
font-style: normal;
}
.event-counter__item:not(:first-child) {
border-inline-start: 0.0625rem solid var(--borderColor);
}
.contact-cards {
position: relative;
display: grid;
width: 100%;
grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
gap: 1.125rem;
}
.contact-cards__item {
position: relative;
overflow: hidden;
z-index: 1;
transition: all 300ms ease-in-out;
border-radius: 1rem;
transition: all 0.3s ease-in-out;
border: 0.0625rem solid var(--borderColor);
}
.contact-cards__item:is(:hover, :active, :focus) {
background-color: var(--whiteColor);
}
.contact-cards__item__inner {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex-wrap: wrap;
padding: 2.1875rem 1.5rem;
gap: 0.8125rem;
min-height: 10rem;
overflow: hidden;
}
.contact-cards__item__inner__icon {
color: var(--primaryColor-100);
font-size: 1.75rem;
height: 3.125rem;
width: 3.125rem;
background-color: var(--primaryColor-400);
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.contact-cards__item__inner__icon img {
height: 1.6875rem;
}
.contact-cards__item__inner__title {
font-size: 1.1rem;
}
.contact-cards__item__inner__des a {
color: var(--darkColor);
}
.contact-cards__item__inner .buttons-blog {
margin-inline-start: auto;
}
.contact-map {
height: 23.65rem;
overflow: hidden;
position: relative;
box-shadow: 0px 0px 1.3908px 0px rgba(226, 255, 255, 0.1), 0px 0px 2.7816px 0px rgba(226, 255, 255, 0.1), 0px 0px 9.7356px 0px rgba(226, 255, 255, 0.1), 0px 0px 19.4712px 0px rgba(25, 214, 178, 0.1), 0px 0px 33.3792px 0px rgba(25, 214, 178, 0.1), 0px 0px 58.4136px 0px rgba(25, 214, 178, 0.1);
border-radius: 1.5rem;
}
.contact-map__overlay {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.07);
}
.contact-map__iframe {
width: 100%;
border: 0;
height: 100%;
}
.map-container {
max-width: 59.375rem;
margin: 0 auto;
position: relative;
padding-top: 6.25rem;
padding-bottom: 3.125rem;
text-align: center;
display: inline-flex;
margin-right: 15%;
}
@media (max-width: 991.98px) {
.map-container {
margin-right: 0;
display: block;
padding-top: 0;
}
}
.map-container #map {
width: 100%;
max-width: 720px;
height: auto;
position: relative;
}
.map-container #map path {
transition: all 200ms ease-out;
}
.map-container #map path.active, .map-container #map path:hover {
fill: var(--primaryColor-300, #54C08A);
stroke-width: 0.5px;
stroke: #FFF;
filter: drop-shadow(0px 12px 4px rgba(0, 0, 0, 0.25));
z-index: 9;
}
.map-container #map circle {
cursor: pointer;
transition: all 200ms ease-out;
}
.map-container #map circle.active, .map-container #map circle:is(:hover, :active, :focus) {
stroke: var(--primaryColor-400); /* Set border color to match the circle fill */
stroke-width: 4; /* Border width */
animation: stroke-pulse 1.5s infinite ease-in-out; /* Apply stroke animation */
}
.map-container #mapcard {
--tooltip-width: 24rem;
position: absolute; /* Fixed position */
background-color: var(--primaryColor-400);
width: var(--tooltip-width);
display: none; /* Initially hidden */
z-index: 2; /* Ensure it appears above other elements */
right: calc(-1 * var(--tooltip-width));
border-radius: 1rem;
bottom: 42.5531914894%;
text-align: start;
}
@media (max-width: 1199.98px) {
.map-container #mapcard {
right: calc(-1 * var(--tooltip-width) / 1.6);
}
}
@media (max-width: 991.98px) {
.map-container #mapcard {
right: 0;
position: relative;
margin: 4rem auto 0;
}
}
.map-container .tooltip {
position: absolute;
background-color: var(--primaryColor-400);
padding: 0.625rem;
border-radius: 0.625rem;
display: none;
pointer-events: none; /* Prevent mouse events */
z-index: 3; /* Ensure it appears above other elements */
opacity: 1;
white-space: nowrap;
}
@keyframes stroke-pulse {
0% {
stroke-width: 4;
}
50% {
stroke-width: 10; /* Increase stroke width */
}
100% {
stroke-width: 4; /* Return to original stroke width */
}
}
.circle-tooltip {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
padding: 1.25rem;
gap: 0.8125rem;
overflow: hidden;
}
.circle-tooltip > * {
width: 100%;
}
.circle-tooltip img {
max-height: 9.375rem;
border-radius: 0.5rem;
}
.circle-tooltip p {
margin: 0;
font-size: 0.9375rem;
}
.circle-tooltip ul {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
gap: 0.625rem;
}
.circle-tooltip ul li {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: row;
width: 100%;
gap: 0.625rem;
font-size: 0.9375rem;
}
.circle-tooltip ul li b {
font-weight: 500;
flex: 0 0 auto;
min-width: 4.375rem;
font-size: 1rem;
}
.search-results {
position: relative;
}
.search-results__filter {
position: relative;
margin-top: 5rem;
display: flex;
justify-content: space-between;
gap: 1.5rem;
}
.search-results__filter__col__par {
color: var(--grayColor);
}
.search-results__filter__actions {
position: relative;
}
.search-results__filter__actions .buttons-blog {
justify-content: flex-end;
}
.search-results__filter__actions__dropdown {
min-width: 21.875rem;
margin-top: 1rem;
border: 0.0625rem solid var(--borderColor);
border-radius: 0.25rem;
background-color: var(--whiteColor);
position: absolute;
z-index: 2;
inset-inline-end: 0;
}
.search-results__filter__actions__dropdown__inner {
padding: 1.25rem;
position: relative;
display: flex;
flex-direction: column;
gap: 1rem;
}
.search-results__filter__actions__dropdown__title {
font-weight: 600;
color: var(--grayColor);
width: 100%;
}
.search-results__filter__actions__dropdown__title span {
color: var(--darkColor);
}
.search-results__filter__actions__dropdown__list {
position: relative;
display: flex;
flex-direction: column;
gap: 0.5rem;
max-height: 12.5rem;
padding: 0.5rem;
overflow: auto;
}
.search-results__filter__actions__dropdown__more .btn {
border: 0;
font-weight: 500;
}
.search-results__filter__actions__dropdown__more .btn i {
font-size: 0.875rem;
}
.search-results__title {
margin-bottom: 1.5rem;
position: relative;
color: var(--secondaryColor);
}
.search-results__list {
position: relative;
margin-top: 2rem;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
flex-wrap: wrap;
gap: 1.5rem;
}
.search-results__list__item {
position: relative;
width: 100%;
border: 0.0625rem solid var(--borderColor);
border-radius: var(--cardRadius);
padding: var(--cardPadding);
}
.search-results__list__item__inner {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
flex-wrap: wrap;
gap: 0.625rem;
position: relative;
}
.search-results__list__item__inner__title {
color: var(--grayDarkColor);
transition: all 300ms ease;
}
.search-results__list__item__inner__par,
.search-results__list__item__inner p {
margin: 0;
color: var(--grayDarkColor);
}
.search-results__list__item__inner__wasm {
position: relative;
display: flex;
gap: 0.4375rem;
font-size: 0.9375rem;
flex-wrap: wrap;
margin-bottom: 0.625rem;
}
.search-results__list__item__inner__wasm__item {
position: relative;
border-radius: var(--radius-sm, 4px);
border: 0.0625rem solid var(--primaryColor-500);
background: #F9FAFB;
padding: 0.125rem 0.5rem 0.3125rem;
}
.categorey-card {
position: relative;
overflow: hidden;
z-index: 1;
transition: all 300ms ease-in-out;
transition: all 0.2s ease-in-out;
height: 100%;
border-radius: var(--radius-lg, 16px);
border: 0.0625rem solid var(--border-neutral-primary, #D2D6DB);
background: var(--background-card, #FFF);
}
.categorey-card:hover {
background: var(--background-neutral-50, #F9FAFB);
}
.categorey-card:hover .buttons-blog .icon-arrow-right::before {
content: "\e903";
transform: scaleY(-1);
}
.categorey-card:focus, .categorey-card:focus-visible, .categorey-card:active, .categorey-card:focus:not(:focus-visible) {
background: var(--background-card, #FFF);
border-color: var(--border-black, #161616);
}
.categorey-card__inner {
position: relative;
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-direction: column;
flex-wrap: wrap;
padding: 1.5rem;
gap: 0.8125rem;
min-height: 9.375rem;
overflow: hidden;
height: 100%;
}
.categorey-card__inner__icon {
border-radius: var(--radius-full, 9999px);
background: var(--background-brand-light, #F3FCF6);
color: var(--icon-success, #067647);
font-size: 1.75rem;
height: 3.125rem;
width: 3.125rem;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.categorey-card__inner__icon span {
line-height: 0;
}
.categorey-card__inner__icon img,
.categorey-card__inner__icon svg {
height: 1.6875rem;
}
.categorey-card__inner__num {
color: var(--text-primary-sa-flag, #14573A);
font-size: 3rem;
font-weight: 400;
line-height: 1.25;
}
.categorey-card__inner__title {
position: relative;
font-size: 1.1875rem;
}
.categorey-card__inner__des {
margin-bottom: 0;
}
.categorey-card__inner__des a {
color: var(--text-display, #1F2A37);
}
.categorey-card__inner .buttons-blog {
margin-inline-start: auto;
padding-top: 0 !important;
margin-top: auto;
}
.categorey-card__inner .buttons-blog .icon-arrow-right::before {
display: block;
}
.sub-title {
font-size: 1rem;
color: var(--text-default, #161616);
font-weight: 500;
}
.dashed-list {
list-style-type: none;
padding: 0 !important;
}
.dashed-list li {
list-style-type: none;
position: relative;
display: flex;
align-items: flex-start;
gap: 0.625rem;
}
.dashed-list li::before {
content: "";
width: 0.4375rem;
height: 0.125rem;
background-color: var(--text-default, #161616);
position: relative;
top: 1.125rem;
}
.card-services {
position: relative;
padding: 1rem;
border-radius: 1rem;
border: 0.0625rem solid var(--border-background-neutral, #D2D6DB);
display: flex;
justify-content: center;
align-items: stretch;
flex-direction: column;
gap: 1.25rem;
}
.card-services__header {
position: relative;
text-align: center;
display: flex;
align-items: stretch;
gap: 0.625rem;
justify-content: center;
}
.card-services__header .form-group {
margin-inline-start: auto;
width: 8.125rem;
}
.card-services__header .form-group .nice-select {
width: 100% !important;
min-width: auto;
background: var(--button-background-neutral-default, #F3F4F6);
font-weight: 500;
border: 0 !important;
}
.card-services__header .form-group .nice-select::before {
content: none;
}
.card-services__header__title {
font-size: 1.25rem;
font-weight: 400;
}
.card-services__header__title .small {
color: var(--text-primary-paragraph, #384250);
font-size: 0.9375rem;
}
.card-services__body {
position: relative;
}
.card-services__body:has(img) {
text-align: center;
}
.card-services__body table {
margin-bottom: 0;
border-collapse: separate;
border-spacing: 0;
border-radius: 0.5rem;
border: 0.0625rem solid var(--border-background-neutral, #D2D6DB);
overflow: hidden;
font-size: 0.875rem;
table-layout: fixed;
}
.card-services__body table thead tr th {
border-inline-end: 0.0625rem solid var(--border-background-neutral, #D2D6DB);
position: relative;
overflow: hidden;
background: var(--table-background-header, #F3F4F6);
font-weight: 500;
padding: 0.65rem;
}
.card-services__body table thead tr th:last-of-type {
border-inline-end: 0;
}
.card-services__body table tbody tr td {
padding: 0.65rem;
border: 0;
border-bottom: 0.0625rem solid var(--border-background-neutral, #D2D6DB);
}
.card-services__body table tbody tr:nth-of-type(even) {
background: var(--table-background-header, #F3F4F6);
}
.card-services__body table tbody tr:last-of-type td {
border-bottom: 0;
}
.table-responsive .table {
table-layout: inherit;
}
/***
====================================================================
Start Error Page
====================================================================
***/
.error-page {
display: flex;
flex-direction: column;
position: relative;
padding-block: var(--sec-padding);
}
.error-page .container {
flex: 1 0 0;
}
.error-page__inner {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
text-align: center;
}
.error-page__main-title {
height: 21.375rem;
background-image: url("../images/404-bg.png");
background-position: center center;
background-repeat: no-repeat;
width: 100%;
font-size: 12.5rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--secondary-100);
margin-bottom: 2rem;
}
.error-page__main-title__icon {
width: 10.625rem;
height: 10.625rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
background: var(--grayColor-100);
}
.error-page__main-title__icon svg, .error-page__main-title__icon img {
width: 4.5rem;
}
.error-page__caption {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.site-map {
position: relative;
display: flex;
flex-direction: column;
list-style: none;
padding: 0;
padding-inline-start: 0;
margin: 0 0 0.5rem;
font-size: 1rem;
}
.site-map li {
position: relative;
}
.site-map li ul {
list-style: none;
max-height: 500px;
overflow: hidden;
padding-inline-start: 2rem;
transition: max-height 0.3s ease-in-out;
}
.site-map li ul li a::before {
background-color: var(--whiteColor);
border: 0.0625rem solid var(--primaryColor-100);
}
.site-map li a {
display: inline-flex;
align-items: center;
line-height: 2.5;
text-decoration: none;
color: var(--primaryColor-100);
gap: 0.4375rem;
}
.site-map li a:is(:hover, :active, :focus) {
color: var(--primaryColor-300);
text-decoration: underline;
}
.site-map li a::before {
content: "";
flex: 0 0 auto;
width: 0.3125rem;
height: 0.3125rem;
border-radius: 50%;
background-color: var(--primaryColor-100);
}
.site-map li a > ul > li::before {
top: 1.3125rem;
}
.site-map li a > ul > li > a::before {
top: 1.3125rem;
}
.site-map > li > ul > li > a {
font-size: 0.875rem;
color: var(--primaryColor-100);
}
.site-map > li > ul > li > div span a {
font-size: 0.9375rem;
color: var(--darkColor);
}
.theme-light .site-map > li > ul > li > div span a::before {
background-color: var(--secondary);
}
/***
====================================================================
Login
====================================================================
***/
.login-wrapper {
position: relative;
min-height: 43.75rem;
background: url("../images/login-bg.png") no-repeat center center;
background-size: cover;
padding: 2.8125rem 0;
display: flex;
align-items: center;
z-index: 1;
}
.login-wrapper::before {
content: "";
position: absolute;
inset: 0;
backdrop-filter: blur(2.5px);
background: linear-gradient(to bottom, rgba(27, 131, 84, 0.59) 18.33%, rgba(6, 29, 19, 0.59) 88.62%);
z-index: -1;
}
.login-wrapper__caption {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
@media (min-width: 1200px) {
.login-wrapper__caption {
padding-inline-end: 4.0625rem;
}
}
.login-wrapper__caption * {
color: white;
}
.login-wrapper__caption__title {
font-size: 3rem;
margin-bottom: 1.75rem;
}
.login-wrapper__caption__text {
font-size: 1.5rem;
margin: 0;
}
.login-wrapper__caption__text--small {
font-size: 1.125rem;
}
.login-wrapper__accounts {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
margin: 0 auto;
}
@media (min-width: 1200px) {
.login-wrapper__accounts {
padding-inline-start: 4.0625rem;
}
}
.login-wrapper__accounts__title {
font-size: 1.5rem;
font-weight: 600;
color: #fff;
}
.login-wrapper__accounts__list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.login-wrapper__accounts__item {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem;
border-radius: 0.5rem;
border: 0.0625rem solid #D2D6DB;
background-color: #fff;
transition: all 0.3s ease-in-out;
}
.login-wrapper__accounts__item * {
transition: all 0.3s ease-in-out;
}
.login-wrapper__accounts__item:is(:hover, :active, :focus) {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
border: 0.0625rem solid #95b8b3;
background-color: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(5px);
}
.login-wrapper__accounts__item__icon {
font-size: 1.5rem;
width: 3rem;
height: 3rem;
display: flex;
justify-content: center;
align-items: center;
border-radius: 100%;
background: var(--primaryColor-400);
}
.login-wrapper__accounts__item:hover .login-wrapper__accounts__item__icon, .login-wrapper__accounts__item:active .login-wrapper__accounts__item__icon, .login-wrapper__accounts__item:focus .login-wrapper__accounts__item__icon {
background-color: var(--primaryColor-100);
}
.login-wrapper__accounts__item__icon i {
color: var(--primaryColor-100);
}
.login-wrapper__accounts__item:hover .login-wrapper__accounts__item__icon i, .login-wrapper__accounts__item:active .login-wrapper__accounts__item__icon i, .login-wrapper__accounts__item:focus .login-wrapper__accounts__item__icon i {
color: var(--primaryColor-400);
}
.login-wrapper__accounts__item__icon img, .login-wrapper__accounts__item__icon svg {
width: 1.5rem;
height: 1.5rem;
}
.login-wrapper__accounts__item:hover .login-wrapper__accounts__item__icon img, .login-wrapper__accounts__item:active .login-wrapper__accounts__item__icon img, .login-wrapper__accounts__item:focus .login-wrapper__accounts__item__icon img, .login-wrapper__accounts__item:hover .login-wrapper__accounts__item__icon svg, .login-wrapper__accounts__item:active .login-wrapper__accounts__item__icon svg, .login-wrapper__accounts__item:focus .login-wrapper__accounts__item__icon svg {
filter: brightness(0) invert(1);
}
.login-wrapper__accounts__item__caption {
position: relative;
display: flex;
flex-direction: column;
gap: 0.4375rem;
}
.login-wrapper__accounts__item__caption__title {
font-size: 1.125rem;
font-weight: 700;
}
.login-wrapper__accounts__item:hover .login-wrapper__accounts__item__caption__title, .login-wrapper__accounts__item:active .login-wrapper__accounts__item__caption__title, .login-wrapper__accounts__item:focus .login-wrapper__accounts__item__caption__title {
color: var(--primaryColor-100);
}
.login-wrapper__accounts__item__caption__text {
font-size: 1rem;
margin-bottom: 0;
}
.login-wrapper__accounts--card {
display: flex;
flex-direction: column;
gap: 2rem;
padding: 2.875rem;
border-radius: 0.5rem;
border: 0.0625rem solid #D2D6DB;
background-color: #fff;
transition: all 0.3s ease-in-out;
}
.login-wrapper__accounts__header__title {
font-size: 1.875rem;
font-weight: 600;
margin-bottom: 0.3125rem;
}
.login-wrapper__accounts__header__par {
font-size: 1.25rem;
font-weight: 400;
margin: 0;
}
.login-wrapper__accounts__inner {
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 1rem;
}
.login-wrapper__accounts__inner__caption__title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.3125rem;
}
.login-wrapper__accounts__inner__caption__par {
font-size: 1.25rem;
font-weight: 400;
margin: 0;
}
.back-icon {
position: relative;
border-radius: 0.25rem;
background-color: transparent;
border: 0.0625rem solid rgba(255, 255, 255, 0.4);
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
transition: all 0.3s ease-in-out;
}
.back-icon:is(:hover, :active, :focus) {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
border: 0.0625rem solid #95b8b3;
background-color: rgba(255, 255, 255, 0.85);
background-color: var(--primaryColor-200);
border-color: var(--primaryColor-200);
}
.filter-sec {
position: relative;
border-radius: 0.5rem;
background: #F9FAFB;
padding: 2.125rem;
}
.filter-sec__title {
padding-inline-end: 3.125rem;
}
/***
====================================================================
national-day
====================================================================
***/
.national-day .video-slide__inner__image::after {
position: absolute;
content: "";
inset: 0;
background-image: url("./../images/national-day/HeroSection-BG.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
[dir=ltr] .national-day .video-slide__inner__image::after {
transform: scaleX(-1);
}
.national-day .video-slide::before {
background: none;
}
.national-day .video-slide::after {
position: absolute;
content: "";
width: 12.5rem;
height: 5rem;
background-image: url("./../images/national-day/ND95_Logo2.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
inset-inline-end: 7%;
top: auto;
bottom: 2.5rem;
margin: auto;
z-index: 1;
}
.national-day .services::after {
position: absolute;
content: "";
background-image: url("./../images/national-day/Pattern-services.svg");
background-repeat: repeat-x;
background-position: center bottom;
background-size: contain;
opacity: 0.5;
inset-inline: 0;
inset-block-end: 0;
height: 1.5625rem;
}
.national-day .media-center::after {
position: absolute;
content: "";
background-image: url("./../images/national-day/Pattern-news-green.svg");
background-repeat: repeat-x;
background-position: center bottom;
background-size: contain;
opacity: 0.5;
inset-inline: 0;
inset-block-end: 0;
height: 1.59375rem;
}
.national-day .partners::after {
position: absolute;
content: "";
background-image: url("./../images/national-day/Pattern-parteners-edit.svg");
background-repeat: repeat-x;
background-position: center bottom;
background-size: contain;
opacity: 0.5;
inset-inline: 0;
inset-block-end: 0;
height: 1.59375rem;
}
.national-day .footer {
padding-bottom: 2.375rem;
}
.national-day .footer::before {
position: absolute;
content: "";
inset-inline: 0;
inset-block-end: 0;
background-image: url("./../images/national-day/footer-pattern.svg");
background-repeat: repeat-x;
background-position: center bottom;
background-size: contain;
opacity: 0.5;
height: 4.0625rem;
}
.national-day .footer .logo-nd-footer {
position: relative;
width: 6.625rem;
height: 2.6875rem;
}
.national-day .footer .logo-nd-footer::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
background-image: url("./../images/national-day/ND95_Logo.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: auto;
inset-inline-end: 0;
top: 0;
bottom: 0;
margin: auto;
}
/***
====================================================================
founding-ramadan-day
====================================================================
***/
.founding-ramadan-day .video-slide__inner__image::before {
position: absolute;
content: "";
background-image: url("./../images/national-day/founding-horses.svg");
background-repeat: no-repeat;
background-position: left bottom;
background-size: 645px;
z-index: 1;
inset-inline-end: 0;
inset-block-end: 0;
inset: 0;
}
[dir=ltr] .founding-ramadan-day .video-slide__inner__image::before {
transform: scaleX(-1);
}
.founding-ramadan-day .video-slide__inner__image::after {
position: absolute;
content: "";
inset: 0;
background-image: url("./../images/national-day/founding-banner.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
[dir=ltr] .founding-ramadan-day .video-slide__inner__image::after {
transform: scaleX(-1);
}
.founding-ramadan-day .video-slide::before {
background: none;
width: 10.625rem;
height: 3.4375rem;
background-image: url("./../images/national-day/SaudiFoundingDay-Logo.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
inset-inline-start: 7%;
top: 2.5rem;
bottom: auto;
z-index: 1;
}
.founding-ramadan-day .video-slide .ehsan-platform {
position: absolute;
width: 4.0625rem;
height: 4.0625rem;
background-image: url("./../images/national-day/e7san-logo.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
inset-inline-start: 7%;
top: auto;
bottom: 2.5rem;
margin: auto;
z-index: 1;
}
.founding-ramadan-day .video-slide__inner__des {
color: var(--Saudi-Founding-Day-Brown-950, #181010);
}
.founding-ramadan-day .video-slide__inner__des__welcome {
color: var(--Saudi-Founding-Day-Brown-950, #181010);
}
.founding-ramadan-day .video-slide__inner__des__title {
color: var(--Saudi-Founding-Day-Brown-800, #422E2B);
}
.founding-ramadan-day .services::after {
position: absolute;
content: "";
background-image: url("./../images/national-day/founding-pattern-1.svg");
background-repeat: repeat-x;
background-position: right -1.875rem bottom;
background-size: contain;
inset-inline: 0;
inset-block-end: 0;
height: 1.5rem;
}
[dir=ltr] .founding-ramadan-day .services::after {
transform: scaleX(-1);
}
.founding-ramadan-day .media-center {
background: url("./../images/national-day/service-pattern.svg") !important;
background-repeat: repeat;
background-position: center !important;
}
.founding-ramadan-day .media-center::before {
position: absolute;
content: "";
inset: 0;
background: linear-gradient(253deg, #F8F5F4 52.82%, rgba(248, 245, 244, 0.6) 93.02%, rgba(248, 245, 244, 0) 122.63%);
}
[dir=ltr] .founding-ramadan-day .media-center::before {
transform: scaleX(-1);
}
.founding-ramadan-day .media-center::after {
position: absolute;
content: "";
background-image: url("./../images/national-day/founding-pattern-1.svg");
background-repeat: repeat-x;
background-position: right -1.875rem bottom;
background-size: contain;
inset-inline: 0;
inset-block-end: -1.5rem;
height: 1.5rem;
}
[dir=ltr] .founding-ramadan-day .media-center::after {
transform: scaleX(-1);
}
.founding-ramadan-day .media-center .media-center__cols__card {
border: 1px solid var(--border-neutral-primary, #D2D6DB);
}
.founding-ramadan-day .media-center .main-title--white .main-title__heading__title, .founding-ramadan-day .media-center .main-title--white .page-details__inner__caption__title--line .page-details__inner__caption__title__head, .page-details__inner__caption__title--line .founding-ramadan-day .media-center .main-title--white .page-details__inner__caption__title__head {
color: var(--text-default, #161616);
}
.founding-ramadan-day .footer {
background: var(--Beige-500---Primary, #E9DFCF);
}
.founding-ramadan-day .footer::before {
position: absolute;
content: "";
inset: 0;
background-image: url("./../images/national-day/founding-pattern-footer.svg");
background-repeat: no-repeat;
background-position: left bottom;
background-size: 31.25rem;
}
[dir=ltr] .founding-ramadan-day .footer::before {
transform: scaleX(-1);
}
.founding-ramadan-day .footer .footer__copyright-logo a img {
filter: none;
}
.founding-ramadan-day .footer .logo-nd-footer {
position: relative;
width: 8.875rem;
height: 2.75rem;
}
.founding-ramadan-day .footer .logo-nd-footer::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
background-image: url("./../images/national-day/SaudiFoundingDay-Logo.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
inset-inline-end: 0;
top: 0;
bottom: 0;
margin: auto;
}
.founding-ramadan-day .footer .footer__col__title {
color: var(--text-default, #161616);
border-bottom-color: #6B4E45;
}
.founding-ramadan-day .footer .footer__col__list__item__link {
color: var(--link-neutral, #384250);
}
.founding-ramadan-day .footer .footer__col__social__item__link {
border-color: #6B4E45;
}
.founding-ramadan-day .footer .footer__col__social__item__link:focus {
outline-color: var(--border-black, #161616);
}
.founding-ramadan-day .footer .footer__col__social__item__link img {
filter: brightness(0) saturate(100%) invert(8%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(105%);
}
.founding-ramadan-day .footer .footer__copyright__par {
color: var(--text-default, #161616);
}
.founding-ramadan-day .footer .footer__copyright__list__item a {
color: var(--link-neutral, #384250);
}
.founding-ramadan-day .footer .footer__copyright__list__item a:focus {
outline-color: var(--border-black, #161616);
}
/***
====================================================================
haj-day
====================================================================
***/
.haj-day .video-slide__inner__des__welcome,
.haj-day .video-slide__inner__des__title,
.haj-day .video-slide__inner__des__par {
color: var(--text-default, #161616);
}
.haj-day .video-slide__inner__des__title {
font-family: "SaudiWeb-Bold";
font-size: 4.0625rem;
line-height: 1.2;
}
.haj-day .video-slide__inner__image::after {
content: "";
position: absolute;
top: 0;
inset-inline-end: 0;
background: #fff url(./../images/haj-day/haj-hero.jpg) no-repeat top center;
background-size: cover;
height: 100%;
z-index: 2;
width: 45%;
}
[dir=ltr] .haj-day .video-slide__inner__image::after {
transform: scaleX(-1);
}
.haj-day .video-slide::before {
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(252, 252, 253) 43%, rgb(249, 249, 250) 100%);
}
[dir=ltr] .haj-day .video-slide::before {
transform: scaleX(-1);
}
.haj-day .video-slide__inner .video-swiper {
position: relative;
}
.haj-day .video-slide__inner .video-swiper::before {
content: "";
position: relative;
display: block;
background: none;
width: 7.625rem;
height: 4.4375rem;
background-image: url("./../images/haj-day/haj-logo.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: auto;
inset-inline-start: 0;
top: 0;
}
.haj-day .partners::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 22px;
background-image: url(../images/haj-day/sections-pattern.svg);
background-repeat: repeat-x;
background-position: center;
background-size: contain;
pointer-events: none;
}
.haj-day .media-center {
position: relative;
padding-block: 100px;
background: url(./../images/haj-day/haj-media-center.svg) repeat top center;
}
.haj-day .media-center::before {
content: "" !important;
display: block !important;
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(252, 252, 253) 30%, rgb(249, 249, 250) 100%);
height: 100%;
width: 100%;
}
[dir=ltr] .haj-day .media-center::before {
transform: scaleX(-1);
}
.haj-day .media-center .media-center__cols__card {
border: 1px solid var(--border-neutral-primary, #D2D6DB);
}
.haj-day .media-center .main-title--white .main-title__heading__title, .haj-day .media-center .main-title--white .page-details__inner__caption__title--line .page-details__inner__caption__title__head, .page-details__inner__caption__title--line .haj-day .media-center .main-title--white .page-details__inner__caption__title__head {
color: var(--text-default, #161616);
}
/* Dark mode: keep header action buttons (search / language / login) visible.
The header background stays white in dark mode (--whiteColor is not flipped),
but the base color resolves to --text-default which turns white in dark mode
-> white-on-white, invisible until hover. Force the base state dark so the
icons show on the white header. (Hover keeps its own rule, which is correct
because the hover background flips dark in dark mode.) */
@media (prefers-color-scheme: dark) {
.header-wrapper__actions__search__button,
.header-wrapper__actions__logout__button,
.header-wrapper__actions__lang__button,
.header-wrapper__actions__search__button:visited,
.header-wrapper__actions__logout__button:visited,
.header-wrapper__actions__lang__button:visited {
color: var(--darkColor, #161616);
}
}
/***
====================================================================
national-day (ND96) footer — seasonal, footer-only.
Toggled by the .footer--national-day class in home/_footer.cshtml.
Remove that class after the season to disable.
====================================================================
***/
.footer.footer--national-day {
padding-bottom: 0;
}
/* "عزنا بطبعنا" mark, sitting beside the external logos (which are 3.125rem tall). */
.footer--national-day .footer-national-day__ezz {
height: 3.125rem;
width: auto;
object-fit: contain;
}
/* National Day 96 artwork spanning the full footer width (outside .container), flush to the bottom. */
.footer--national-day .footer-national-day {
margin-top: 1.25rem;
width: 100%;
}
.footer--national-day .footer-national-day__img {
display: block;
width: 100%;
height: 93px;
object-fit: cover;
object-position: center;
margin-bottom: 0;
}
.profile-card {
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.10);
}
.profile-card__image-wrapper {
overflow: hidden;
border-radius: 8px;
}
.profile-card__image {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
.profile-card__name {
margin-top: 16px;
font-size: 20px;
font-weight: 600;
color: #222;
}
.single-items {
height: auto;
width: 35%;
padding: 15px;
border: 1px solid #ddd;
border-radius: 10px;
background: #fff;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}
.single-image {
width: 100%;
height: auto; /* no fixed height */
overflow: hidden;
border-radius: 12px;
}
.single-image img {
width: 100%;
height: auto; /* image keeps its own aspect ratio */
object-fit: contain; /* now moot, but harmless */
display: block;
border-radius: 12px;
}
.single-content {
padding: 15px 5px 5px;
text-align: center;
}
.single-content .card-title {
font-size: 18px;
font-weight: 600;
}
/*# sourceMappingURL=style.css.map */