@import 'cta.css'; 
@import 'progress-steps.css';
@import 'page.css';
@import 'popup.css';
@import 'radio-button.css';
@import 'form.css';
@import 'table.css';
@import 'custom.css';

:root {
    --color-primary: #F5F5F5;
    --color-secondary: #4A637D; /* dark blue-gray */
    --color-secondary-focus: #000; /* black */
    --color-text: #4A637D; /* dark blue-gray */
    --color-sub-title: #4A637D; /* dark blue-gray */
    --footer-text-size: 0.85vw;
    --invert-percentage: 20%;
    --sepia-percentage: 50%;
    --saturate-percentage: 2200%;
    --hue-rotate-angle: 220deg;
    --brightness-percentage: 1%;
    --contrast-percentage: 87%;
    --color-gray: #CECECE;
    --color-l-gray: #FBFBFB;
    --color-white: #fff;
    --color-a2: #A2A7AB;
    --color-fc: #FCFCFC;
    --color-black: #000;
    --btn-bg: #4D78FF;
    --btn-s-bg: #2F57CD;
    --color-d9: #D9D9D9;
    --color-53: #535353;
    --color-9d: #9D9393;
    --color-f4: #F41717;
    --color-91: #919191;
    --color-do: #D0D0D0;
    --color-0b: #0BC408;
    --color-ed: #EDE8DE;
    --color-60: #606060;
    --color-f7: #F7EDDA;
    --color-1c: #1CB518;
    --color-db: #DBDBDB;
    --color-c3: #C3C3C3;
    --color-d3: #D3D6D8;
    --color-ff: #FF0000;
    --color-b1: #B1B1B1;
    --color-e7: #E7F0FF;
    --color-cb: #CBC5C5;
    --color-fe: #FEFBFB;
    --color-e8: #E8E8E8;
    --color-ip: #FF4C00;
    --color-ap: #5DD200;
    --color-re: #FF0000;
    --color-t-bg: #F9F9F9;
    --color-warning-orange: #FFA500;
    --font-light: 'ReadexPro-Light';
    --font-medium: 'ReadexPro-Medium';
    --font-semibold: 'ReadexPro-SemiBold';
    --font-bold: 'ReadexPro-Bold';
    --font-size-072: 0.72vw;
    --font-size-078: 0.78vw;
    --font-size-083: 0.83vw;
    --font-size-085: 0.85vw;
    --font-size-093: 0.93vw;
    --font-size-098: 0.98vw;
    --font-size-100: 1vw;
    --font-size-104: 1.04vw;
    --font-size-114: 1.14vw;
    --font-size-125: 1.25vw;
    --font-size-135: 1.35vw;
    --font-size-156: 1.56vw;
    --font-size-166: 1.66vw;
    --font-size-170: 1.7vw;
}
[data-theme="default"] {
    --color-primary: #243D89;
    --color-secondary: #2F57CD; /* Light blue-gray for main backgrounds */
    --color-secondary-focus: #243D89; /* Light blue-gray for main backgrounds */
    --color-text: #fff;
    --color-sub-title: #333333;
    --footer-text-size: 0.78vw;
    --invert-percentage: 16%;
    --sepia-percentage: 62%;
    --saturate-percentage: 2493%;
    --hue-rotate-angle: 216deg;
    --brightness-percentage: 94%;
    --contrast-percentage: 89%;
    --color-gray: #CECECE;
    --color-l-gray: #FBFBFB;
    --color-white: #fff;
    --color-a2: #A2A7AB;
    --color-fc: #FCFCFC;
    --color-black: #000;
    --btn-bg: #4D78FF;
    --btn-s-bg: #2F57CD;
    --color-d9: #D9D9D9;
    --color-53: #535353;
    --color-9d: #9D9393;
    --color-f4: #F41717;
    --color-91: #919191;
    --color-do: #D0D0D0;
    --color-0b: #0BC408;
    --color-ed: #EDE8DE;
    --color-60: #606060;
    --color-f7: #F7EDDA;
    --color-1c: #1CB518;
    --color-db: #DBDBDB;
    --color-c3: #C3C3C3;
    --color-d3: #D3D6D8;
    --color-ff: #FF0000;
    --color-b1: #B1B1B1;
    --color-e7: #E7F0FF;
    --color-cb: #CBC5C5;
    --color-fe: #FEFBFB;
    --color-e8: #E8E8E8;
    --color-ip: #FF4C00;
    --color-ap: #5DD200;
    --color-re: #FF0000;
    --color-t-bg: #F9F9F9;
    --color-warning-orange: #FFA500;
    --font-light: 'ReadexPro-Light';
    --font-medium: 'ReadexPro-Medium';
    --font-semibold: 'ReadexPro-SemiBold';
    --font-bold: 'ReadexPro-Bold';
    --font-size-072: 0.72vw;
    --font-size-078: 0.78vw;
    --font-size-083: 0.83vw;
    --font-size-085: 0.85vw;
    --font-size-093: 0.93vw;
    --font-size-098: 0.98vw;
    --font-size-100: 1vw;
    --font-size-104: 1.04vw;
    --font-size-114: 1.14vw;
    --font-size-125: 1.25vw;
    --font-size-135: 1.35vw;
    --font-size-156: 1.56vw;
    --font-size-166: 1.66vw;
    --font-size-170: 1.7vw;
}
[data-theme="government"] {
    --color-primary: #BEC8DA; /* Light blue-gray for main backgrounds */
    --color-secondary: #4A637D; /* dark blue-gray */
    --color-secondary-focus: #000;/* black */
    --color-text: #4A637D; /* dark blue-gray */
    --color-sub-title: #4A637D; /* dark blue-gray */
    --footer-text-size: 0.85vw;
    --invert-percentage: 20%;
    --sepia-percentage: 50%;
    --saturate-percentage: 2200%;
    --hue-rotate-angle: 220deg;
    --brightness-percentage: 1%;
    --contrast-percentage: 87%;
    --color-gray: #CECECE;
    --color-l-gray: #FBFBFB;
    --color-white: #fff;
    --color-a2: #A2A7AB;
    --color-fc: #FCFCFC;
    --color-black: #000;
    --btn-bg: #4D78FF;
    --btn-s-bg: #2F57CD;
    --color-d9: #D9D9D9;
    --color-53: #535353;
    --color-9d: #9D9393;
    --color-f4: #F41717;
    --color-91: #919191;
    --color-do: #D0D0D0;
    --color-0b: #0BC408;
    --color-ed: #EDE8DE;
    --color-60: #606060;
    --color-f7: #F7EDDA;
    --color-1c: #1CB518;
    --color-db: #DBDBDB;
    --color-c3: #C3C3C3;
    --color-d3: #D3D6D8;
    --color-ff: #FF0000;
    --color-b1: #B1B1B1;
    --color-e7: #E7F0FF;
    --color-cb: #CBC5C5;
    --color-fe: #FEFBFB;
    --color-e8: #E8E8E8;
    --color-ip: #FF4C00;
    --color-ap: #5DD200;
    --color-re: #FF0000;
    --color-t-bg: #F9F9F9;
    --color-warning-orange: #FFA500;
    --font-light: 'ReadexPro-Light';
    --font-medium: 'ReadexPro-Medium';
    --font-semibold: 'ReadexPro-SemiBold';
    --font-bold: 'ReadexPro-Bold';
    --font-size-072: 0.72vw;
    --font-size-078: 0.78vw;
    --font-size-083: 0.83vw;
    --font-size-085: 0.85vw;
    --font-size-093: 0.93vw;
    --font-size-098: 0.98vw;
    --font-size-100: 1vw;
    --font-size-104: 1.04vw;
    --font-size-114: 1.14vw;
    --font-size-125: 1.25vw;
    --font-size-135: 1.35vw;
    --font-size-156: 1.56vw;
    --font-size-166: 1.66vw;
    --font-size-170: 1.7vw;
}


[data-theme="commercial"] {
    --color-primary: #1E1E2E; /* Deep slate */
    --color-secondary: #4A5568; /* Muted steel gray  */
    --color-secondary-focus: #2D3748; /* Dark slate gray  */
    --color-text: #fff; /* Pure white  */
    --color-sub-title: #4A5568; /* Muted steel gray */
    --footer-text-size: 0.85vw;
    --invert-percentage: 25%;
    --sepia-percentage: 40%;
    --saturate-percentage: 2000%;
    --hue-rotate-angle: 230deg;
    --brightness-percentage: 60%;
    --contrast-percentage: 95%;
    --color-gray: #CECECE;
    --color-l-gray: #FBFBFB;
    --color-white: #fff;
    --color-a2: #A2A7AB;
    --color-fc: #FCFCFC;
    --color-black: #000;
    --btn-bg: #4D78FF;
    --btn-s-bg: #2F57CD;
    --color-d9: #D9D9D9;
    --color-53: #535353;
    --color-9d: #9D9393;
    --color-f4: #F41717;
    --color-91: #919191;
    --color-do: #D0D0D0;
    --color-0b: #0BC408;
    --color-ed: #EDE8DE;
    --color-60: #606060;
    --color-f7: #F7EDDA;
    --color-1c: #1CB518;
    --color-db: #DBDBDB;
    --color-c3: #C3C3C3;
    --color-d3: #D3D6D8;
    --color-ff: #FF0000;
    --color-b1: #B1B1B1;
    --color-e7: #E7F0FF;
    --color-cb: #CBC5C5;
    --color-fe: #FEFBFB;
    --color-e8: #E8E8E8;
    --color-ip: #FF4C00;
    --color-ap: #5DD200;
    --color-re: #FF0000;
    --color-t-bg: #F9F9F9;
    --color-warning-orange: #FFA500;
    --font-light: 'ReadexPro-Light';
    --font-medium: 'ReadexPro-Medium';
    --font-semibold: 'ReadexPro-SemiBold';
    --font-bold: 'ReadexPro-Bold';
    --font-size-072: 0.72vw;
    --font-size-078: 0.78vw;
    --font-size-083: 0.83vw;
    --font-size-085: 0.85vw;
    --font-size-093: 0.93vw;
    --font-size-098: 0.98vw;
    --font-size-100: 1vw;
    --font-size-104: 1.04vw;
    --font-size-114: 1.14vw;
    --font-size-125: 1.25vw;
    --font-size-135: 1.35vw;
    --font-size-156: 1.56vw;
    --font-size-166: 1.66vw;
    --font-size-170: 1.7vw;
}
body {
    margin: 0;
    padding: 0;
    font-family: 'ReadexPro', sans-serif;
    color: #000;
    overflow-x: hidden;
}

@font-face {
    font-family: 'ReadexPro-Light';
    src: url('../fonts/ReadexPro-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ReadexPro';
    src: url('../fonts/ReadexPro-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ReadexPro-Medium';
    src: url('../fonts/ReadexPro-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ReadexPro-SemiBold';
    src: url('../fonts/ReadexPro-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ReadexPro-Bold';
    src: url('../fonts/ReadexPro-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}



@media(min-width: 768px) {
    .container {
        max-width: 96%;
    }
}

@media(max-width: 992px) {
    :root {
        --font-size-072: 12px;
        --font-size-078: 12px;
        --font-size-083: 15.5px;
        --font-size-085: 16px;
        --font-size-093: 13px;
        --font-size-098: 14px;
        --font-size-100: 15px;
        --font-size-104: 10.5px;
        --font-size-114: 16px;
        --font-size-125: 16px;
        --font-size-135: 18px;
        --font-size-156: 21px;
        --font-size-166: 24px;
        --font-size-170: 24px;
    }
}