:root {
    /* ------------------------- Font family --------------------------*/

    --inter-font-family: "Inter", sans-serif;

    /* ------------------------- Font Styles --------------------------*/

    --main-heading: 35px;

    --heading-a-font-size: 22px;
    --heading-a-font-weight: 600;

    --heading-b-font-size: 18px;
    --heading-b-font-weight: 500;

    --sub-heading-a-font-size: 16px;
    --sub-heading-a-font-weight: 500;

    --text-a-font-size: 16px;
    --text-a-font-weight: 400;

    --text-b-font-size: 14px;
    --text-b-font-weight: 500;

    --text-c-font-size: 12px;
    --text-c-font-weight: 400;

    /* ------------------------- Text Colors --------------------------- */

    --black-color: #000000;
    --black-dark: #444444;
    --black-light: #4e4e4e;

    --grey-color: #8c8c8c;
    --grey-light: #aaaaaa;
    --grey-dark: #848484;
    --grey-very-light: #ccc;

    --blue-color: #0059ff;
    --light-blue-color: #ebf2ff;
    --dark-blue-color: #dbe0f4;

    --light-green-color: rgb(31, 155, 100, 0.1);
    --green-color: #1f9b64;

    --red-color: #ff0000;

    --linear-border-color: linear-gradient(white, white),
        linear-gradient(to right, #ca88a3 0%, #af7190 50%, #0059ff 100%);

    /*-------------------------- Background Colors ----------------------*/

    --grey-bg: #f3f3f3;
    --grey-dark-bg: rgb(237, 237, 237, 0.67);
    --blue-bg: #e5eeff;

    /* ------------------------- Spacing ------------------------------- */

    --padding-a: 30px;
    --padding-b: 20px 30px;

    --btn-padding: 10px 15px;

    --letter-spacing-a: -0.05em;

    /*------------------------ Hard Coded Heights -------------------------*/

    --height-1: 400px;
    --height-2: 500px;

    /* ------------------------- Border radius ----------------------------*/

    --border-radius-a: 10px;
    --border-radius-b: 20px;
    --border-radius-c: 5px;

    /* -------------------------- Icons Size ------------------------------*/

    --icon-size-a: 20px;
    --icon-size-b: 15px;

    /* ------------------------- Input elemnets ---------------------------*/

    --input-border-color: #ededed;
    --input-bg-color: #ffffff;
    --input-placeholder-color: #b3b3b3;
    --input-border-radius: 5px;
    --input-text-color: #000000;
    --input-font-size: 14px;
    --input-font-weight: 400;
    --input-padding: 10px 15px;

    --border-color-a: #dedede;

    /* Patient profile */
}

/* -------------------------------------------- Responsive ------------------------------- */

/* Small devices (≥ 576px) */
@media (min-width: 576px) and (max-width: 767px) {
    :root {
        --heading-a-font-size: 18px;
        --padding-a: 25px;
        --icon-size-a: 15px;
        --main-heading: 22px;
        --text-b-font-size: 12px;
        --text-c-font-size: 10px;
        --btn-padding: 5px 25px;
        --input-padding: 7px 10px;
        --input-font-size: 12px;
    }
}

/* Tablets (≥ 768px)*/
@media (min-width: 768px) and (max-width: 991px) {
    :root {
        --heading-a-font-size: 20px;
        --heading-b-font-size: 16px;
        --sub-heading-a-font-size: 14px;
        --text-a-font-size: 14px;
        --text-b-font-size: 12px;
        --text-c-font-size: 10px;

        --padding-a: 25px;
        --icon-size-a: 15px;

        --border-radius-a: 8px;
        --border-radius-b: 18px;
        --border-radius-c: 3px;

        --main-heading: 24px;

        --btn-padding: 5px 25px;
        --input-padding: 7px 10px;
        --input-font-size: 12px;
    }
}

/* Small laptops (≥ 992px) */
@media (min-width: 992px) and (max-width: 1199px) {
    :root {
        --heading-a-font-size: 16px;
        --heading-b-font-size: 12px;
        --sub-heading-a-font-size: 10px;
        --text-a-font-size: 11px;
        --text-b-font-size: 9px;
        --text-c-font-size: 9px;
        --padding-a: 15px;
        --icon-size-a: 15px;
        --icon-size-b: 10px;
        --border-radius-a: 6px;
        --border-radius-b: 16px;
        --border-radius-c: 3px;
        --main-heading: 26px;

        --btn-padding: 5px 25px;
        --input-padding: 7px 10px;
        --input-font-size: 12px;
    }
}

/* Desktops (≥ 1200px) */
@media (min-width: 1200px) and (max-width: 1399px) {
    :root {
        --heading-a-font-size: 18px;
        --heading-b-font-size: 14px;
        --sub-heading-a-font-size: 14px;
        --text-a-font-size: 12px;
        --text-b-font-size: 10px;
        --text-c-font-size: 9px;
        --padding-a: 18px;
        --icon-size-a: 18px;
        --icon-size-b: 12px;
        --border-radius-a: 8px;
        --border-radius-b: 18px;
        --border-radius-c: 5px;
        --main-heading: 28px;

        --btn-padding: 5px 25px;
        --input-padding: 7px 10px;
        --input-font-size: 12px;

        --height-2: 400px;
    }
}
/*Large sktops (≥ 1400px) */
@media (min-width: 1400px) and (max-width: 1599px) {
    :root {
        --heading-a-font-size: 20px;
        --heading-b-font-size: 16px;
        --sub-heading-a-font-size: 14px;
        --text-a-font-size: 14px;
        --text-b-font-size: 12px;
        --text-c-font-size: 10px;
        --padding-a: 25px;
        --icon-size-a: 18px;
        --icon-size-b: 13px;
        --border-radius-a: 10px;
        --border-radius-b: 20px;
        --border-radius-c: 5px;
        --main-heading: 30px;

        --btn-padding: 5px 25px;
        --input-padding: 7px 10px;
        --input-font-size: 12px;
    }
}

/* Extra large screens (≥ 1600px)*/
@media (min-width: 1600px) and (max-width: 1919px) {
    :root {
        --heading-a-font-size: 22px;
        --heading-b-font-size: 18px;
        --sub-heading-a-font-size: 16px;
        --text-a-font-size: 16px;
        --text-b-font-size: 14px;
        --text-c-font-size: 12px;

        --padding-a: 30px;
        --padding-b: 20px 30px;

        --btn-padding: 10px 15px;

        --letter-spacing-a: -0.05em;

        --height-1: 400px;
        --height-2: 500px;

        --border-radius-a: 10px;
        --border-radius-b: 20px;
        --border-radius-c: 5px;

        --icon-size-a: 20px;
        --icon-size-b: 15px;

        --input-border-radius: 5px;
        --input-font-size: 14px;
        --input-padding: 10px 15px;

        --main-heading: 32px;

        --height-2: 500px;

        --icon-size-a: 20px;
        --icon-size-b: 15px;
    }
}

/*  Full HD / 2K (≥ 1920px) */
@media (min-width: 1920px) and (max-width: 2299px) {
    :root {
        --heading-a-font-size: 24px;
        --heading-b-font-size: 20px;
        --sub-heading-a-font-size: 18px;
        --text-a-font-size: 18px;
        --text-b-font-size: 16px;
        --text-c-font-size: 14px;
        --padding-a: 32px;
        --icon-size-a: 22px;
        --border-radius-a: 12px;
        --border-radius-b: 22px;
        --border-radius-c: 7px;

        --main-heading: 34px;

        --btn-padding: 15px 15px;
        --input-font-size: 16px;
        --input-padding: 15px 15px;

        --height-2: 500px;

        --icon-size-a: 28px;
        --icon-size-b: 21px;
    }
}

@media (min-width: 2300px) and (max-width: 2499px) {
    :root {
        --heading-a-font-size: 26px;
        --heading-b-font-size: 22px;
        --sub-heading-a-font-size: 20px;
        --text-a-font-size: 20px;
        --text-b-font-size: 18px;
        --text-c-font-size: 16px;
        --padding-a: 35px;
        --icon-size-a: 25px;
        --border-radius-a: 15px;
        --border-radius-b: 25px;
        --border-radius-c: 10px;

        --main-heading: 36px;

        --btn-padding: 20px 30px;
        --input-font-size: 18px;
        --input-padding: 15px 15px;

        --height-2: 600px;

        --icon-size-a: 30px;
        --icon-size-b: 21px;
    }
}

/*  Ultra-wide / 4K (≥ 2560px) */
@media (min-width: 2499px) and (max-width: 2999px) {
    :root {
        --heading-a-font-size: 28px;
        --heading-b-font-size: 24px;
        --sub-heading-a-font-size: 22px;
        --text-a-font-size: 22px;
        --text-b-font-size: 20px;
        --text-c-font-size: 18px;
        --padding-a: 40px;
        --icon-size-a: 27px;
        --border-radius-a: 18px;
        --border-radius-b: 28px;
        --border-radius-c: 12px;

        --main-heading: 50px;

        --btn-padding: 20px 30px;
        --input-font-size: 20px;
        --input-padding: 15px 15px;

        --height-2: 700px;

        --icon-size-a: 35px;
        --icon-size-b: 30px;
    }
}

/*Ultra-large custom (≥ 3000px) */
@media (min-width: 3000px) {
    :root {
        --heading-a-font-size: 30px;
        --heading-b-font-size: 26px;
        --sub-heading-a-font-size: 24px;
        --text-a-font-size: 24px;
        --text-b-font-size: 22px;
        --text-c-font-size: 20px;
        --padding-a: 45px;
        --icon-size-a: 30px;
        --border-radius-a: 20px;
        --border-radius-b: 30px;
        --border-radius-c: 15px;
        --main-heading: 65px;

        --btn-padding: 25px 35px;
        --input-font-size: 22px;
        --input-padding: 20px 35px;

        --height-2: 700px;

        --icon-size-a: 35px;
        --icon-size-b: 30px;
    }
}

/*  Extreme screens (≥ 3500px) */
@media (min-width: 3500px) {
    :root {
        --heading-a-font-size: 32px;
        --heading-b-font-size: 28px;
        --sub-heading-a-font-size: 26px;
        --text-a-font-size: 26px;
        --text-b-font-size: 24px;
        --text-c-font-size: 22px;
        --padding-a: 48px;
        --icon-size-a: 32px;
        --border-radius-a: 22px;
        --border-radius-b: 32px;
        --border-radius-c: 17px;

        --main-heading: 80px;

        --btn-padding: 30px 40px;
        --input-font-size: 24px;
        --input-padding: 25px 35px;

        --height-2: 800px;

        --icon-size-a: 35px;
        --icon-size-b: 30px;
    }
}