/* Color variables */
  /* Primary color*/
  :root {
    --darkblue-400: #1F2034;
    --black-400: #0E0F0F;
    --white-400: #fff; 
    /* Extended color*/
    --darkblue-300: #14306B;
    --black-300: #242562;
    --white-300: #E9E9E9 ;
    --darkblue-200:#495E8C;
    --black-200: #525356;
    --white-200: #D3D3D3 ;
    --darkblue-100: #9CA7C0;
    --black-100: #747578;
    --white-100: #B7B7B7;
    /* Status colors */
    --info: #2C6ECB;
    --sucess: #007F5F;
    --warning: #F6BD4D;
    --error: #DE350B;
     /* Extended status colors  */
    --info-200: #458FFF;
    --sucess-200: #95C9B4;
    --warning-200: #F7D084;
    --error-100: #FD5749;  
    --info: #F2F7FE;
    --sucess-100: #F1F8F5;
    --warning-100: #FFF1D7;
    --error-100: #FED3D1;
  }  
  /* Type Scale (Breakpoints) */
  /* Desktop (XXXL) */
  
    .display-1 {
      font-family: Chronicle-display-roman;
      font-size: 8rem;
      letter-spacing: 0.06em;
    }
    .display-2 {
      font-family: Chronicle-display-roman;
      font-size: 4rem;
      letter-spacing: 0.06em;
    }
    .display-3 {
      font-family: Chronicle-display-roman;
      font-size: 3rem;
      letter-spacing: 0.06em;
    }
    .h1-verlag {
      font-family: Verlag-bold;
      font-size: 2rem;
      line-height: 1.15;
      letter-spacing: 0.3em;
      font-weight: bold;
      /* Only use with Capital letters */
    }
    .h2-verlag {
      font-family: Verlag-bold;
      font-size: 1.75rem;
      line-height: 1.15;
      letter-spacing: 0.05em;
      font-weight: bold;

      /* Only use with Capital letters */
    }
    .h3-verlag {
      font-family: Verlag-black;
      font-size: 1rem;
      line-height: 1.15;
      letter-spacing: 0.3em;
      font-weight: bold;

      /* Only use with Capital letters */
    }
    .h4-verlag  {
      font-family: Verlag-bold;
      font-size: 1rem;
      line-height: 1.15;
      letter-spacing: 0.05em;
      font-weight: bold;

      /* Only use with Capital letters */
    }
    .h5-verlag  {
      font-family: Verlag-bold;
      font-size: 0.875rem;
      line-height: 1.15;
      letter-spacing: 0.05em;
      font-weight: bold;

      /* Only use with Capital letters */
    }
    .h6-verlag  {
      font-family: Verlag-bold;
      font-size: 0.75rem;
      line-height: 1.15;
      letter-spacing: 0.05em;
      font-weight: bold;

      /* Only use with Capital letters */
    }
    .body-1 {
      font-family: Graphik-regular;
      font-size: 1rem;
      line-height: 1.5;
    }
    .body-1-medium {
      font-family: Graphik-medium;
      font-size: 1rem;
      line-height: 1.5;
      font-weight: 500;
    }
    .body-2 {
      font-family: Graphik-regular;
      font-size: 0.875rem;
      line-height: 1.25;
    }
    .body-2-medium {
      font-family: Graphik-medium;
      font-size: 0.875rem;
      line-height: 1.25;
      font-weight: 500;
    }
    .sm-titles {
      font-family: Graphik-regular;
      font-size: 0.75rem;
      line-height: 1.16;
    }
  /* Desktop (XXL) */
  @media screen and (max-width: 1899px){
    .display-1 {
      font-family: Chronicle-display-roman;
      font-size: 6rem;
      letter-spacing: 0.06em;
    }
    .display-2 {
      font-family: Chronicle-display-roman;
      font-size: 3rem;
      letter-spacing: 0.06em;
    }
    .display-3 {
      font-family: Chronicle-display-roman;
      font-size: 2.5rem;
      letter-spacing: 0.06em;
    }
    .h1-verlag  {
      font-family: Verlag-bold;
      font-size: 1.75rem;
      line-height: 1.15;
      letter-spacing: 0.3em;
      font-weight: bold;

      /* Only use with Capital letters */
    }
    .h2-verlag  {
      font-family: Verlag-bold;
      font-size: 1.25rem;
      line-height: 1.15;
      letter-spacing: 0.05em;
      font-weight: bold;

      /* Only use with Capital letters */
    }
    .h3-verlag  {
      font-family: Verlag-black;
      font-size: 0.875rem;
      line-height: 1.15;
      letter-spacing: 0.3em;
      font-weight: bold;

      /* Only use with Capital letters */
    }
    .h4-verlag  {
      font-family: Verlag-bold;
      font-size: 0.875rem;
      line-height: 1.15;
      letter-spacing: 0.05em;
      font-weight: bold;

      /* Only use with Capital letters */
    }
    .h5-verlag  {
      font-family: Verlag-bold;
      font-size: 0.75rem;
      line-height: 1.15;
      letter-spacing: 0.05rem;
      font-weight: bold;

      /* Only use with Capital letters */
    }
    .h6-verlag  {
      font-family: Verlag-bold;
      font-size: 0.625rem;
      line-height: 1.15;
      letter-spacing: 0.05em;
      font-weight: bold;

      /* Only use with Capital letters */
    }
    .body-1 {
      font-family: Graphik-regular;
      font-size: 0.875rem;
      line-height: 1.375;
    }
    .body-1-medium {
      font-family: Graphik-medium;
      font-size: 0.875rem;
      line-height: 1.375;
      font-weight: 500;
    }
    .body-2 {
      font-family: Graphik-regular;
      font-size: 0.75rem;
      line-height: 1.125;
    }
    .body-2-medium {
      font-family: Graphik-medium;
      font-size: 0.75rem;
      line-height: 1.125;
      font-weight: 500;
    }
    .sm-titles {
      font-family: Graphik-regular;
      font-size: 0.625rem;
      line-height: 1.16;
    }
  }
  /* Desktop (LG/XL) */
  @media screen and (max-width: 1399px){
    .display-1 {
      font-family: Chronicle-display-roman-roman;
      font-size: 4rem;
      letter-spacing: 0.06em;
    }
    .display-2 {
      font-family: Chronicle-display-roman-roman;
      font-size: 2.5rem;
      letter-spacing: 0.06em;
    }
    .display-3 {
      font-family: Chronicle-display-roman-roman;
      font-size: 2rem;
      letter-spacing: 0.06em;
    }
    .h1-verlag  {
      font-family: Verlag-bold;
      font-size: 1.75rem;
      line-height: 1.15;
      letter-spacing: 0.3em;
      font-weight: bold;

      /* Only use with Capital letters */
    }
    .h2-verlag  {
      font-family: Verlag-bold;
      font-size: 1.25rem;
      line-height: 1.15;
      letter-spacing: 0.05em;
      font-weight: bold;

      /* Only use with Capital letters */
    }
    .h3-verlag  {
      font-family: Verlag-black;
      font-size: 0.875rem;
      line-height: 1.15;
      letter-spacing: 0.3em;
      font-weight: bold;

      /* Only use with Capital letters */
    }
    .h4-verlag  {
      font-family: Verlag-bold;
      font-size: 0.875rem;
      line-height: 1.15;
      letter-spacing: 0.05em;
      font-weight: bold;

      /* Only use with Capital letters */
    }
    .h5-verlag  {
      font-family: Verlag-bold;
      font-size: 0.75rem;
      line-height: 1.15;
      letter-spacing: 0.05em;
      font-weight: bold;

      /* Only use with Capital letters */
    }
    .h6-verlag  {
      font-family: Verlag-bold;
      font-size: 0.625rem;
      line-height: 1.15;
      letter-spacing: 0.05em;
      font-weight: bold;

      /* Only use with Capital letters */
    }
    .body-1 {
      font-family: Graphik-regular;
      font-size: 0.875rem;
      line-height: 1.375;
    }
    .body-1-medium {
      font-family: Graphik-medium;
      font-size: 0.875rem;
      line-height: 1.375;
      font-weight: 500;
    }
    .body-2 {
      font-family: Graphik-regular;
      font-size: 0.75rem;
      line-height: 1.125;
    }
    .body-2-medium {
      font-family: Graphik-medium;
      font-size: 0.75rem;
      line-height: 1.125;
      font-weight: 500;
    }
    .sm-titles {
      font-family: Graphik-regular;
      font-size: 0.625rem;
      line-height: 1.16;
    }
  }
  /* Mobile & Tablet */
  @media screen and (max-width: 991px){
    .display-1 {
      font-family: Chronicle-display-roman;
      font-size: 2.5rem;
      letter-spacing: 0.06em;
    }
    .display-2 {
      font-family: Chronicle-display-roman;
      font-size: 2rem;
      letter-spacing: 0.06em;
    }
    .display-3 {
      font-family: Chronicle-display-roman;
      font-size: 1.75rem;
      letter-spacing: 0.06em;
    }
    .h1-verlag  {
      font-family: Verlag-bold;
      font-size: 1.75rem;
      line-height: 1.15;
      letter-spacing: 0.3em;
      font-weight: bold;
      /* Only use with Capital letters */
    }
    .h2-verlag  {
      font-family: Verlag-bold;
      font-size: 1.25rem;
      line-height: 1.15;
      letter-spacing: 0.05em;
      font-weight: bold;

      /* Only use with Capital letters */
    }
    .h3-verlag  {
      font-family: Verlag-black;
      font-size: 0.875rem;
      line-height: 1.15;
      letter-spacing: 0.3em;
      font-weight: bold;

      /* Only use with Capital letters */
    }
    .h4-verlag  {
      font-family: Verlag-bold;
      font-size: 0.875rem;
      line-height: 1.15;
      letter-spacing: 0.05em;
      font-weight: bold;

      /* Only use with Capital letters */
    }
    .h5-verlag  {
      font-family: Verlag-bold;
      font-size: 0.75rem;
      line-height: 1.15;
      letter-spacing: 0.05em;
      font-weight: bold;

      /* Only use with Capital letters */
    }
    .h6-verlag  {
      font-family: Verlag-bold;
      font-size: 0.625rem;
      line-height: 1.15;
      letter-spacing: 0.05em;
      font-weight: bold;

      /* Only use with Capital letters */
    }
    .body-1 {
      font-family: Graphik-regular;
      font-size: 0.875rem;
      line-height: 1.375;
    }
    .body-1-medium {
      font-family: Graphik-medium;
      font-size: 0.875rem;
      line-height: 1.375;
      font-weight: 500;
    }
    .body-2 {
      font-family: Graphik-regular;
      font-size: 0.75rem;
      line-height: 1.125;
    }
    .body-2-medium {
      font-family: Graphik-medium;
      font-size: 0.75rem;
      line-height: 1.125;
      font-weight: 500;
    }
    .sm-titles {
      font-family: Graphik-regular;
      font-size: 0.625rem;
      line-height: 1.16;
    }
  }
  
  /* Spacing Rules */
  
  .spacing-1 {
    margin: 0.125rem;
    padding: 0.125rem;
  }
  .spacing-2 {
    margin: 0.25rem;
    padding: 0.25rem;
  }
  .spacing-3 {
    margin: 0.5rem;
    padding: 0.5rem;
  }
  .spacing-4 {
    margin: 0.75rem;
    padding: 0.75rem;
  }
  .spacing-5 {
    margin: 1rem;
    padding: 1rem;
  }
  .spacing-6 {
    margin: 1.5rem;
    padding: 1.5rem;
  }
  .spacing-7 {
    margin: 2rem;
    padding: 2rem;
  }
  .spacing-8 {
    margin: 2.5rem;
    padding: 2.5rem;
  }
  .spacing-9 {
    margin: 3rem;
    padding: 3rem;
  }
  .spacing-10 {
    margin: 4rem;
    padding: 4rem;
  }
  .spacing-11 {
    margin: 5rem;
    padding: 5rem;
  }
  .spacing-12 {
    margin: 6rem;
    padding: 6rem;
  }
  .spacing-13 {
    margin: 10rem;
    padding: 10rem;
  }