:root {
    --font-12-size: 12px;
    --font-14-size: 14px;
    --font-16-size: 16px;
    --font-18-size: 18px;
    --font-20-size: 20px;
    --font-24-size: 24px;
    --font-28-size: 28px;
    --font-30-size: 30px;
    --font-36-size: 36px;
    --font-38-size: 38px;
    --font-40-size: 40px; 
    --font-60-size: 60px;
    --font-400-weight: 400;
    --font-500-weight: 500;
    --font-600-weight: 600;
    --font-700-weight: 700;
    --font-800-weight: 800;
    --font-900-weight: 900;     

    /* New background gradients */
    --background-deep-blue: linear-gradient(to right, #011053, #0546A7); /* Added gradient for deep blue */
    --background-light-blue: linear-gradient(#F2F7FF); /* Added background color */
    --color-dark-black: #474747;
    --color-white: #ffffff;
    --background-color-blue: #0546A7;
    /* Hover background color */
    --hover-bg-color: #FFCC28;
    --text-transform: uppercase;
    /* Font family variables */
    --font-family-primary: 'Roboto';
}

:root {
    --font-12-size: 12px;
    --font-14-size: 14px;
    --font-16-size: 16px;
    --font-18-size: 18px;
    --font-20-size: 20px;
    --font-24-size: 24px;
    --font-28-size: 28px;
    --font-30-size: 30px;
    --font-36-size: 36px;
    --font-38-size: 38px;
    --font-40-size: 40px; 
    --font-60-size: 60px;
    --font-400-weight: 400;
    --font-500-weight: 500;
    --font-600-weight: 600;
    --font-700-weight: 700;
    --font-800-weight: 800;
    --font-900-weight: 900;     

    /* New background gradients */
    --background-deep-blue: linear-gradient(to right, #011053, #0546A7); /* Added gradient for deep blue */
    --background-light-blue: linear-gradient(#F2F7FF); /* Added background color */
    --color-dark-black: #474747;
    --color-white: #ffffff;
    --background-color-blue: #0546A7;
    /* Hover background color */
    --hover-bg-color: #FFCC28;
    --text-transform: uppercase;
    /* Font family variables */
    --font-family-primary: 'Roboto';
}

:root {
    --font-12-size: 12px;
    --font-14-size: 14px;
    --font-16-size: 16px;
    --font-18-size: 18px;
    --font-20-size: 20px;
    --font-24-size: 24px;
    --font-28-size: 28px;
    --font-30-size: 30px;
    --font-36-size: 36px;
    --font-38-size: 38px;
    --font-40-size: 40px; 
    --font-60-size: 60px;
    --font-400-weight: 400;
    --font-500-weight: 500;
    --font-600-weight: 600;
    --font-700-weight: 700;
    --font-800-weight: 800;
    --font-900-weight: 900;     

    /* New background gradients */
    --background-deep-blue: linear-gradient(to right, #011053, #0546A7); /* Added gradient for deep blue */
    --background-light-blue: linear-gradient(#F2F7FF); /* Added background color */
    --color-dark-black: #474747;
    --color-white: #ffffff;
    --background-color-blue: #0546A7;
    /* Hover background color */
    --hover-bg-color: #FFCC28;
    --text-transform: uppercase;
    /* Font family variables */
    --font-family-primary: 'Roboto';
}

:root {
    --font-12-size: 12px;
    --font-14-size: 14px;
    --font-16-size: 16px;
    --font-18-size: 18px;
    --font-20-size: 20px;
    --font-24-size: 24px;
    --font-28-size: 28px;
    --font-30-size: 30px;
    --font-36-size: 36px;
    --font-38-size: 38px;
    --font-40-size: 40px; 
    --font-60-size: 60px;
    --font-400-weight: 400;
    --font-500-weight: 500;
    --font-600-weight: 600;
    --font-700-weight: 700;
    --font-800-weight: 800;
    --font-900-weight: 900;     

    /* New background gradients */
    --background-deep-blue: linear-gradient(to right, #011053, #0546A7); /* Added gradient for deep blue */
    --background-light-blue: linear-gradient(#F2F7FF); /* Added background color */
    --color-dark-black: #474747;
    --color-white: #ffffff;
    --background-color-blue: #0546A7;
    /* Hover background color */
    --hover-bg-color: #FFCC28;
    --text-transform: uppercase;
    /* Font family variables */
    --font-family-primary: 'Roboto';
}

:root {
    --font-12-size: 12px;
    --font-14-size: 14px;
    --font-16-size: 16px;
    --font-18-size: 18px;
    --font-20-size: 20px;
    --font-24-size: 24px;
    --font-28-size: 28px;
    --font-30-size: 30px;
    --font-36-size: 36px;
    --font-38-size: 38px;
    --font-40-size: 40px; 
    --font-60-size: 60px;
    --font-400-weight: 400;
    --font-500-weight: 500;
    --font-600-weight: 600;
    --font-700-weight: 700;
    --font-800-weight: 800;
    --font-900-weight: 900;     

    /* New background gradients */
    --background-deep-blue: linear-gradient(to right, #011053, #0546A7); /* Added gradient for deep blue */
    --background-light-blue: linear-gradient(#F2F7FF); /* Added background color */
    --color-dark-black: #474747;
    --color-white: #ffffff;
    --background-color-blue: #0546A7;
    /* Hover background color */
    --hover-bg-color: #FFCC28;
    --text-transform: uppercase;
    /* Font family variables */
    --font-family-primary: 'Roboto';
}