@font-face {
    font-family: 'UBA Sans';
    src: url('/wp-content/themes/uba/assets/fonts/encode-sans/EncodeSans-Black.woff2') format('woff2'),
        url('/wp-content/themes/uba/assets/fonts/encode-sans/EncodeSans-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'UBA Sans';
    src: url('/wp-content/themes/uba/assets/fonts/encode-sans/EncodeSans-Bold.woff2') format('woff2'),
        url('/wp-content/themes/uba/assets/fonts/encode-sans/EncodeSans-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'UBA Sans';
    src: url('/wp-content/themes/uba/assets/fonts/encode-sans/EncodeSans-ExtraBold.woff2') format('woff2'),
        url('/wp-content/themes/uba/assets/fonts/encode-sans/EncodeSans-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'UBA Sans';
    src: url('/wp-content/themes/uba/assets/fonts/encode-sans/EncodeSans-ExtraLight.woff2') format('woff2'),
        url('/wp-content/themes/uba/assets/fonts/encode-sans/EncodeSans-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'UBA Sans';
    src: url('/wp-content/themes/uba/assets/fonts/encode-sans/EncodeSans-Light.woff2') format('woff2'),
        url('/wp-content/themes/uba/assets/fonts/encode-sans/EncodeSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'UBA Sans';
    src: url('/wp-content/themes/uba/assets/fonts/encode-sans/EncodeSans-Medium.woff2') format('woff2'),
        url('/wp-content/themes/uba/assets/fonts/encode-sans/EncodeSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'UBA Sans';
    src: url('/wp-content/themes/uba/assets/fonts/encode-sans/EncodeSans-Regular.woff2') format('woff2'),
        url('/wp-content/themes/uba/assets/fonts/encode-sans/EncodeSans-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'UBA Sans';
    src: url('/wp-content/themes/uba/assets/fonts/encode-sans/EncodeSans-SemiBold.woff2') format('woff2'),
        url('/wp-content/themes/uba/assets/fonts/encode-sans/EncodeSans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'UBA Sans';
    src: url('/wp-content/themes/uba/assets/fonts/encode-sans/EncodeSans-Thin.woff2') format('woff2'),
        url('/wp-content/themes/uba/assets/fonts/encode-sans/EncodeSans-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

*,*::after,*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    list-style-type: none;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

textarea {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    overflow: hidden;
    resize: none;
}

a, button {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    color: var(--text-brand-secondary, #d51709);
}

html,body {
    height: 100%
}

html {
    scroll-behavior: smooth;
}

html * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}


/* Global Default Set */
:root {
    --background-color: #ffffff;
    --text-color: #000000;
    --text-primary: #171717;
    --text-primary-alt: #fff;
    --text-secondary: #404040;
    --text-secondary-hover: #262626;
    --text-secondary-brand: #ffc8c4;
    --text-tertiary: #525252;
    --text-tertiary-hover: #404040;
    --text-tertiary-brand: #ffc8c4;
    --text-quatenary: #737373;
    --text-quatenary-brand: #ffa19a;
    --text-brand-primary: #8b1911;
    --text-brand-secondary: #d51709;
    --text-brand-tertiary: #f22010;
    --text-brand-quatenary: #171717;
    --text-brand-tertiary-alt: #f22010;
    --text-error-primary: #d92d20;
    --btn-secondary: #d51709;
    --header-color: #333333;
    --link-color: #1a0dab;
    --footer-bg: #1d1d1d;
    --btn-text-color: #ffffff;
    --btn-bg-brand: #f22010;
    --radius-md: 8px;
    --container-bx: #f7f7f7;
    --bg-primary: #fff;
    --bg-primary-alt: #ffffff;
    --bg-primary-new-alt: #0a0a0a;
    --bg-primary-hover: #fafafa;
    --bg-primary-solid: #0a0a0a;
    --bg-secondary: #fafafa;
    --bg-secondary-alt: #fafafa;
    --bg-secondary-hover: #f5f5f5;
    --bg-secondary-subtle: #fdfcfc;
    --bg-secondary-solid: #262626;
    --bg-tertiary: #f5f5f5;
    --bg-quatenary: #e5e5e5;
    --bg-active: #fafafa;
    --bg-disabled: #f5f5f5;
    --bg-disabled-subtle: #fafafa;
    --bg-overlay: #0a0a0a;
    --bg-brand-primary: #fff2f1;
    --bg-brand-primary-alt: #fff2f1;
    --bg-brand-secondary: #ffe1df;
    --bg-brand-solid: #f22010;
    --bg-brand-solid-hover: #d51709;
    --bg-brand-section: #aa0000;
    --bg-brand-section-subtle: #d51709;
    --fg-primary: #171717;
    --fg-tertiary: #525252;
    --fg-secondary: #404040;
    --fg-senary: #d4d4d4;
    --fg-quatenary: #737373;
    --border-primary: #d4d4d4;
    --border-brand: #ffa19a;
    --border-secondary: #e5e5e5;
    --fit-line-red: #F22010;

    /* Font Base */
    --font-family-base: "Roboto";
    --base-size-xxs: 0.625rem; /* 10px */
    --base-lh-xxs: 0.75rem; /* 12px */
    --base-size-xs: 0.75rem; /* 12px */
    --base-lh-xs: 1.125rem; /* 18px */
    --base-size-sm: 0.875rem; /* 14px */
    --base-lh-sm: 1.25rem; /* 20px */
    --base-size-md: 1rem; /* 16px */
    --base-lh-md: 1.5rem; /* 24px */
    --base-size-lg: 1.125rem; /* 18px */
    --base-lh-lg: 1.75rem; /* 28px */
    --base-size-xl: 1.25rem; /* 20px */
    --base-lh-xl: 1.875rem; /* 30px */

    /* Font Encode Sans */
    --font-family-display: "UBA Sans", "Roboto", sans-serif;
    --display-size-2xl: 3rem; /* 48px */
    --display-lh-2xl: 3.75rem; /* 60px */
    --display-size-xl: 2.25rem; /* 36px */
    --display-lh-xl: 2.75rem;  /* 44px */
    --display-size-lg: 1.875rem;  /* 30px */
    --display-lh-lg: 2.25rem;  /* 36px */
    --display-size-md: 1.5rem; /* 24px */
    --display-lh-md: 2rem; /* 32px */
    --display-size-sm: 1.25rem;  /* 20px */
    --display-lh-sm: 1.75rem;  /* 28px */
    --display-size-xs: 1rem; /* 16px */
    --display-lh-xs: 1.5rem; /* 24px */
    --display-size-xxs: 0.875rem;  /* 14px */
    --display-lh-xxs: 1.25rem;  /* 20px */


    /* Font Weights */
    --font-weight-100: 100;
    --font-weight-200: 200;
    --font-weight-300: 300;
    --font-weight-400: 400;
    --font-weight-500: 500;
    --font-weight-600: 600;
    --font-weight-700: 700;
    --font-weight-800: 800;
    --font-weight-900: 900;
}

[data-theme="dark"] {
    --background-color: #1d1d1d;
    --text-color: #ffffff;
    --text-primary: #fafafa;
    --text-primary-alt: #0a0a0a;
    --text-secondary: #d4d4d4;
    --text-secondary-hover: #e5e5e5;
    --text-secondary-brand: #d4d4d4;
    --text-tertiary: #a3a3a3;
    --text-tertiary-hover: #d4d4d4;
    --text-tertiary-brand: #a3a3a3;
    --text-quatenary: #a3a3a3;
    --text-quatenary-brand: #a3a3a3;
    --text-brand-primary: #fafafa;
    --text-brand-secondary: #d4d4d4;
    --text-brand-tertiary: #a3a3a3;
    --text-brand-quatenary: #d51709;
    --text-brand-tertiary-alt: #fafafa;
    --text-error-primary: #f97066;
    --btn-secondary: #d2d2d2;
    --header-color: #dddddd;
    --link-color: #4e9dff;
    --footer-bg: #2f2f2f;
    --container-bx: #2f2f2f;
    --bg-primary: #0a0a0a;
    --bg-primary-alt: #171717;
    --bg-primary-new-alt: #fff;
    --bg-primary-hover: #262626;
    --bg-primary-solid: #171717;
    --bg-secondary: #171717;
    --bg-secondary-alt: #0a0a0a;
    --bg-secondary-hover: #262626;
    --bg-secondary-subtle: #171717;
    --bg-secondary-solid: #262626;
    --bg-tertiary: #262626;
    --bg-quatenary: #404040;
    --bg-active: #262626;
    --bg-disabled: #262626;
    --bg-disabled-subtle: #171717;
    --bg-overlay: #2f2f2f;
    --bg-brand-primary: #ff3d2f;
    --bg-brand-primary-alt: #171717;
    --bg-brand-secondary: #f22010;
    --bg-brand-solid: #f22010;
    --bg-brand-solid-hover: #ff3d2f;
    --bg-brand-section: #171717;
    --bg-brand-section-subtle: #0a0a0a;
    --fg-primary: #ffffff;
    --fg-tertiary: #a3a3a3;
    --fg-secondary: #d4d4d4;
    --fg-senary: #525252;
    --fg-quatenary: #a3a3a3;
    --border-primary: #404040;
    --border-brand: #ff6b60;
    --border-secondary: #262626;
    --fit-line-red: #c79d9a;
}

/* Apply dark theme based on user preference immediately */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --background-color: #1d1d1d;
        --text-color: #ffffff;
        --text-primary: #fafafa;
        --text-primary-alt: #0a0a0a;
        --text-secondary: #d4d4d4;
        --text-secondary-hover: #e5e5e5;
        --text-secondary-brand: #d4d4d4;
        --text-tertiary: #a3a3a3;
        --text-tertiary-hover: #d4d4d4;
        --text-tertiary-brand: #a3a3a3;
        --text-quatenary: #a3a3a3;
        --text-quatenary-brand: #a3a3a3;
        --text-brand-primary: #fafafa;
        --text-brand-secondary: #d4d4d4;
        --text-brand-tertiary: #a3a3a3;
        --text-brand-quatenary: #d51709;
        --text-brand-tertiary-alt: #fafafa;
        --text-error-primary: #f97066;
        --btn-secondary: #d2d2d2;
        --header-color: #dddddd;
        --link-color: #4e9dff;
        --footer-bg: #2f2f2f;
        --container-bx: #2f2f2f;
        --bg-primary: #0a0a0a;
        --bg-primary-alt: #171717;
        --bg-primary-new-alt: #fff;
        --bg-primary-hover: #262626;
        --bg-primary-solid: #171717;
        --bg-secondary: #171717;
        --bg-secondary-alt: #0a0a0a;
        --bg-secondary-hover: #262626;
        --bg-secondary-subtle: #171717;
        --bg-secondary-solid: #262626;
        --bg-tertiary: #262626;
        --bg-quatenary: #404040;
        --bg-active: #262626;
        --bg-disabled: #262626;
        --bg-disabled-subtle: #171717;
        --bg-overlay: #2f2f2f;
        --bg-brand-primary: #ff3d2f;
        --bg-brand-primary-alt: #171717;
        --bg-brand-secondary: #f22010;
        --bg-brand-solid: #f22010;
        --bg-brand-solid-hover: #ff3d2f;
        --bg-brand-section: #171717;
        --bg-brand-section-subtle: #0a0a0a;
        --fg-primary: #ffffff;
        --fg-tertiary: #a3a3a3;
        --fg-secondary: #d4d4d4;
        --fg-senary: #525252;
        --fg-quatenary: #a3a3a3;
        --border-primary: #404040;
        --border-brand: #ff6b60;
        --border-secondary: #262626;
        --fit-line-red: #c79d9a;
    }
}


/* Add more styles as needed */
body {
    color: var(--text-color);
    font-size: var(--base-size-lg);
    line-height: var(--base-lh-lg);
    margin: 0;
    padding: 0;
    background-color: var(--bg-primary, #fff);
    transition: background-color var(--animation-duration), color var(--animation-duration);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-color);
    font-family: var(--font-family-display);
}

h1,
h1.elementor-heading-title {
    color: var(--text-color);
    font-size: var(--display-size-2xl);
    line-height: var(--display-lh-2xl);
    font-weight: var(--font-weight-700);
}

h2 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-800);
}

h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-700);
}

h4 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-600);
}

h5 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-500);
}

h6 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-500);
}

p,
p.elementor-heading-title {
    color: var(--text-color);
    font-size: var(--base-size-lg);
    line-height: var(--base-lh-lg);
    font-family: var(--font-family-base, "Roboto");
    font-weight: var(--font-weight-400, 400);
    margin: 0;
}

.elementor-button-wrapper a {
    color: var(--btn-text-color);
    font-size: var(--base-size-md);
    line-height: var(--base-lh-md);
    background-color: var(--btn-bg-brand);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-600);
    padding: 10px 16px;
    width: max-content;
    height: 44px;
    border: none;
    border-radius: var(--radius-md);
}