/* ==========================================================
   DJJ Healthcare
   variables.css
========================================================== */

:root {
    /* Colours */
    --primary: #424771;
    --primary-transparent: #424771ed;
    --primary-dark: #2b2c58;
    --secondary: #39b7c9;
    --secondary-dark: #328b92;
    --secondary-light: #74d8e4;
    --accent: #ffb84d;
    --white: #ffffff;
    --light: #f8fafc;
    --grey: #eef2f5;
    --dark: #262626;
    --text: #4d4d4d;
    --text-light: #757575;

    /* Menu */
    --menu-height: 74px;
    --menu-radius: 999px;
    --logo-size: 74px;

    /* Width */
    --container-width: 1320px;

    /* Radius */
    --radius-small: 12px;
    --radius: 24px;
    --radius-large: 36px;

    /* Shadows */
    --shadow-small: 0 8px 20px rgba(0,0,0,.08);
    --shadow: 0 15px 40px rgba(0,0,0,.12);
    --shadow-large: 0 30px 70px rgba(0,0,0,.18);

        /* Animation */
    --transition: .35s cubic-bezier(.4,0,.2,1);
    --transition-slow: .7s cubic-bezier(.23,1,.32,1);

    /* Spacing */
    --section-space: 140px;
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 48px;
    --space-xl: 80px;
}