@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root {
    --primary-color: #33A1E0;
    --primary-color-hover: #2E91CA;
    --primary-color-active: #2981B3;

    --primary-color--dark: #2679A8;
    --primary-color--dark-hover : #1F6186;
    --primary-color--dark-active : #174865;

    --primary-color--light: #EBF6FC;
    --primary-color--light-hover: #E0F1FA;
    --primary-color--light-active: #C0E2F5;


    --primary-color-shadow-sm: rgba(0, 169, 144, 0.16);
    --primary-color-shadow-md: rgba(0, 169, 144, 0.24);
    --primary-color-shadow-xl: rgba(0, 169, 144, 0.38);

    --body-bg : #F8F9FA;
    --text-color: #333333;
    --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}




body{
    font-family: "DM Sans", sans-serif;
    background-color: var(--primary-color--light);
    color: var(--text-color);
    margin: 0;
    padding: 0;
}


input {
    background-color: var(--primary-color--light-hover)!important;
}


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

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

.btn-primary:active {
    background-color: var(--primary-color-active) !important;
    border-color: var(--primary-color-active) !important;
}