:root {
    /******************* Fonts *******************/
    --main-font: "Barlow Semi Condensed", sans-serif;
    --secondary-font: "Barlow", sans-serif;

    /*************** Fonts weight ***************/
    --light: 300;
    --regular: 400;
    --medium: 500;
    --semibold: 600;
    --bold: 700;
    --extrabold: 800;

    /*************** Fonts size ***************/
    --h1-size: 40px;
    --h1-size-lg: 64px;
    --h2-size: 30px;
    --h2-size-lg: 40px;
    --h3-size: 20px;
    --h3-size-lg: 32px;
    --h4-size: 18px;
    --h4-size-lg: 20px;
    --h5-size: 18px;
    --p-size: 14px;

    /***************** Colors *******************/
    --dark: #050a25;
    
    /* White & grey */
    --white: #fff;
    --grey: #f0f2f5;
    --dark-grey: #d4dce0;
    
    /* Blue */
    --light-blue: #518de4;
    --blue: #0f398f;
    --dark-blue: #0a1f45;

    /* Green */
    --green: #1bc661;

    /* Purple */
    --light-purple: #9a5cff;
    --purple: #683ecd;
    --purple-opacity-33: rgba(104, 62, 205, 0.33);
    --dark-purple: #48299b;

    /* Red */
    --orange: #f88f00;
    --red: #be1414;

    /* Linear-gradient */
    --gradient: linear-gradient(90deg,rgba(81, 141, 228, 1) 0%, rgba(15, 57, 143, 1) 100%);

    /****************** Others ******************/
    --border-radius: 8px;
    --border-radius-cta: 100px;
    --transition: all 0.3s ease;

    /****************** Containers ******************/
    /* Devices < 576px */
    --container-sm: 540px;
    /* Devices < 768px */
    --container-md: 720px;
    /* Devices  < 992px */
    --container-lg: 960px;
    /* Devices < 1200px */
    --container-xl: 1140px;
    /* Devices < 1400px */
    --container-xxl: 1320px;
        /* Devices < 1600px */
    --container-xxxl: 1480px;

    /* Gutter des containers */
    --gutter-x: 1.5rem;
    --gutter-y: 0;
}