:root {
    /* color scheme */
    --dark-blue: #2D3DBB; /* Primary color */
    --dark-blue-2: #002A7B; /* Darker shade of primary color */
    --light-grey: #F0F4F7; /* Background color */
    --light-grey-2: #E6E6E6;  /* Secondary background color */
    --dark-grey: #2D2E3C; /* Dark grey color */
    --white: #FFFFFF; /* White color */
    --black: #000000; /* Text color */
    --footer-bg: #2D2E3C; /* Footer background color */
    --gradient: linear-gradient(to right, #FFFFFF, #CEC2FF); /* Gradient color */
    --highlight-blue: #03C1DA; /* highlight - blue */
    --highlight-pink: #F652A0; /* highlight - pink */
    --text-grey: #8D8D8D; /* Text grey color */
    --border-grey: #C7C7C7; /* Border grey color */

    /* border radius */
    --border-radius: 13px; /* General border radius */
    --lg-border-radius: 13px; /* Large border radius */

    /* shadow */
    --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    /* spacing */
    --spacing-xs: 5px; /* Extra small spacing */
    --spacing-sm: 10px; /* Small spacing */
    --spacing-md: 20px; /* Medium spacing */
    --spacing-lg: 30px; /* Large spacing */
    --spacing-xl: 50px; /* Extra large spacing */
    --spacing-xxl: 100px; /* Extra extra large spacing */
    --footer-spacing: 100px; /* Footer spacing */
}