:root {
    --bs-primary: #ff1160;
    /* Vibrant pinkish-red */
    --primary-light: #ff4a85;
    /* Lighter variant */
    --primary-dark: #b80d48;
    /* Darker variant */
    --bs-dark: #1e1c24;
    --secondary-color: #610ddf;
    --secondary-dark: #4606a5;
    --secondary-light: #7e3dfe;
    /* Contrasting blue */
    --accent-color: #ffd700;
    /* Bright golden yellow */
    --background-color: #fdfdfd;
    /* Soft white */
    --text-color: #212121;
    /* Dark gray for high contrast */
    --muted-text-color: #757575;
    /* Muted gray for secondary text */

    --border-color: #e0e0e0;
    /* Light gray for borders */
    --hover-color: #ff3d78;
    /* Slightly lighter primary */
    --disable-color: #e8e8e8;
    /* Light gray for disabled background */
    --disable-text-color: #a0a0a0;
    /* Muted gray for disabled text */
    --shadow-color: rgba(0, 0, 0, 0.1);
    --success-color: #4CAF50;
    --success-light: #4caf4f2d;
    --error-color: rgb(255, 0, 51);
    --error-light: rgba(255, 0, 51, 0.11);
    --white-light: rgba(255, 255, 255, 0.2);
    /* Subtle shadow */
}

* {

    font-family: 'Segoe UI',
        'Roboto',
        'Helvetica Neue',
        sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    background-color: var(--background-color);
}

.btn-primary {
    background-color: var(--bs-dark);
    border: none;
    color: var(--background-color)
}

.btn-primary:hover {
    background-color: var(--bs-primary);
}

footer {
    background-color: var(--primary-dark);
}

.heading {
    font-size: clamp(22px, 3vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 20px;
}