:root {
    font-size: 16px; /* Default root font size */

    /* Define font sizes in px */
    --font-size-lg: 16px;   /* Large screens */
    --font-size-md: 14px;   /* Medium screens */
    --font-size-sm: 12px;   /* Small screens */
    --font-size-xs: 10px;   /* Extra small screens */

    /* Header Sizes */
    --h1-size: 32px;
    --h2-size: 28px;
    --h3-size: 24px;
    --h4-size: 20px;
    --h5-size: 16px;
    --h6-size: 14px;

    /* Form Elements */
    --label-size: 14px;
    --input-size: 15px;
    --button-size: 16px;
}

body {
    font-family: Verdana, sans-serif; /* Force Verdana */
    font-size: var(--font-size-lg);
}

/* Header Sizes */
h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }
h5 { font-size: var(--h5-size); }
h6 { font-size: var(--h6-size); }

/* Form Elements */
label {
    font-size: var(--label-size);
    font-weight: bold;
}

input, textarea, select {
    font-size: var(--input-size);
    font-family: Verdana, sans-serif;
}

button {
    font-size: var(--button-size);
    font-family: Verdana, sans-serif;
}

@media (max-width: 1024px) {
    body {
        font-size: var(--font-size-md);
    }

    :root {
        font-size: 14px;

        --h1-size: 28px;
        --h2-size: 24px;
        --h3-size: 20px;
        --h4-size: 18px;
        --h5-size: 14px;
        --h6-size: 12px;

        --label-size: 13px;
        --input-size: 14px;
        --button-size: 14px;
    }
}

@media (max-width: 768px) {
    body {
        font-size: var(--font-size-md);
    }

    :root {
        font-size: 14px;

        --h1-size: 24px;
        --h2-size: 20px;
        --h3-size: 18px;
        --h4-size: 16px;
        --h5-size: 13px;
        --h6-size: 12px;

        --label-size: 13px;
        --input-size: 14px;
        --button-size: 14px;
    }
}

@media (max-width: 480px) {
    body {
        font-size: var(--font-size-md);
    }

    :root {
        font-size: 14px;

        --h1-size: 20px;
        --h2-size: 18px;
        --h3-size: 16px;
        --h4-size: 14px;
        --h5-size: 12px;
        --h6-size: 11px;

        --label-size: 13px;
        --input-size: 14px;
        --button-size: 14px;
    }
}

/* Ensure Select2 Dropdown follows font size rules */
.select2-container .select2-selection--single {
    font-size: var(--input-size) !important; /* Match other inputs */
    font-family: Verdana, sans-serif;
    height: auto; /* Allow auto height based on font size */
}

/* Ensure dropdown list items match the font size */
.select2-container .select2-results__option {
    font-size: var(--input-size) !important;
    font-family: Verdana, sans-serif;
}

/* Adjust for responsive font sizes */
@media (max-width: 1024px) {
    :root {
        --input-size: 14px; /* Medium screens */
    }
}

@media (max-width: 768px) {
    :root {
        --input-size: 13px; /* Tablets */
    }
}

@media (max-width: 480px) {
    :root {
        --input-size: 12px; /* Mobile */
    }
}

/* Ensure outer container doesn't scroll horizontally */
body {
    overflow-x: hidden;
}