:root {

    /* Colors */

    --primary-color: #002340;
    --primary-color-hover: #01385E;
    --primary-color-active: #004672;
    --secondary-color: #b4ff00;
    --secondary-color-active: #DADFE3;
    --navy-color: #C4DFE9;
    --white-color: #ffffff;
    --black-color: #000000;
    --color-heading: var(--black-color);
    --background-color: #fff;
    --text-color: var(--black-color);
    --link-color: var(--black-color);
  

    /* Font Sizes */

    /* Headings 1 */
    --h1-font-size: 64px;
    --h1-line-height: 72px;
    
    /* Headings 2 */
    --h2-font-size: 40px;
    --h2-line-height: 48px;
  
    /* Headings 3 */
    --h3-font-size: 32px;
    --h3-line-height: 40px;
  
    /* Headings 4 */
    --h4-font-size: 24px;
    --h4-line-height: 32px;
  
    /* Headings 5 */
    --h5-font-size: 20px;
    --h5-line-height: 28px;
  
    /* Headings 6 */
    --h6-font-size: 16px;
    --h6-line-height: 24px;
  
    /* Headings 7 */
    --h7-font-size: 14px;
    --h7-line-height: 20px;

    /* Bodycopy 1 */
    --bc1-font-size: 20px;
    --bc1-line-height: 28px;

    /* Bodycopy 2 */
    --bc2-font-size: 16px;
    --bc2-line-height: 24px;

    /* Bodycopy 3 */
    --bc3-font-size: 14px;
    --bc3-line-height: 20px;

    /* Bodycopy 4 */
    --bc4-font-size: 12px;
    --bc4-line-height: 16px;

    /* Bodycopy 5 */
    --bc5-font-size: 10px;
    --bc5-line-height: 12px;

    /* Link 1 */
    --link1-font-size: 20px;
    --link1-line-height: 32px;

    /* Link 2 */
    --link2-font-size: 16px;
    --link2-line-height: 20px;

    /* Link 3 */
    --link3-font-size: 14px;
    --link3-line-height: 20px;

    /* Link 4 */
    --link4-font-size: 12px;
    --link4-line-height: 16px;

  
    /* Font Family */
    --font-family-light: 'YettelLight', Arial, sans-serif;
    --font-family-regular: 'YettelRegular', Arial, sans-serif;
    --font-family-bold: 'YettelBold', Arial, sans-serif;


    /* Spacing */
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
  

    /* Borders */
    --border-default : 2px solid #E5E9EC;
    --border-active : 2px solid var(--primary-color);
    --border-alert : 2px solid #930C0C;
    --border-warning : 2px solid #935E04;
    --border-success : 2px solid #1C7855;
    --border-info : 2px solid #183B93;
    --border-secondary: 2px solid 00234080;


    /* Border Radius */
    --border-radius-sm: 8px;
    --border-radius-md: 16px;
    --border-radius-lg: 24px;
    --border-radius-xl: 100%;


    /* Paddings */
    --footer-padding: 65px 32px 40px;
  }

  /* Class */
  
  body {
    font-family: var(--font-family-regular);
    font-size: clamp(0.75rem, 0.25vw + 0.7rem, 1rem);
    line-height: 1.2;
    color: var(--text-color);
    background-color: var(--background-color);
  }

  .h1, h1, .text-xxl {
    font-family: var(--font-family-bold);
    font-size: clamp(3rem, 1vw + 2.8rem, 4rem);
    line-height: 1.2;
    color: var(--color-heading);
  }
  
  .h2, h2, .text-xl {
    font-family: var(--font-family-bold);
    font-size: clamp(1.875rem, 0.625vw + 1.75rem, 2.5rem);
    line-height: 1.2;
    color: var(--color-heading);
  }
  
  .h3, h3, .text-lg {
    font-family: var(--font-family-bold);
    font-size: clamp(1.5rem, 0.5vw + 1.4rem, 2rem);
    line-height: 1.2;
    color: var(--color-heading);
  }
  
  .h4, h4, .text-md {
    font-family: var(--font-family-bold);
    font-size: clamp(1.125rem, 0.375vw + 1.05rem, 1.5rem);
    line-height: 1.2;
    color: var(--color-heading);
  }
  
  .h5, h5, .text-sm {
    font-family: var(--font-family-bold);
    font-size: clamp(0.938rem, 0.313vw + 0.875rem, 1.25rem);
    line-height: 1.2;
    color: var(--color-heading);
  }
  
  .h6, h6, .text-xs {
    font-family: var(--font-family-bold);
    font-size: clamp(0.75rem, 0.25vw + 0.7rem, 1rem);
    line-height: 1.2;
    color: var(--color-heading);
  }
  
  .h7, .text-xxs {
    font-family: var(--font-family-bold);
    font-size: clamp(0.688rem, 0.188vw + 0.65rem, 0.875rem);
    line-height: 1.2;
    color: var(--color-heading);
  }

  .body-xl {
    font-family: var(--font-family-light);
    font-size: clamp(0.938rem, 0.313vw + 0.875rem, 1.25rem);
    line-height: 1.2;
    color: var(--color-heading);
  }

  .body-xl-highlighted {
    font-family: var(--font-family-regular);
    font-size: clamp(0.938rem, 0.313vw + 0.875rem, 1.25rem);
    line-height: 1.2;
    color: var(--color-heading);
  }

  .body-lg {
    font-family: var(--font-family-light);
    font-size: clamp(0.75rem, 0.25vw + 0.7rem, 1rem);
    line-height: 1.2;
    color: var(--color-heading);
  }

  .body-lg-highlighted {
    font-family: var(--font-family-regular);
    font-size: clamp(0.75rem, 0.25vw + 0.7rem, 1rem);
    line-height: 1.2;
    color: var(--color-heading);
  }

  .body-md {
    font-family: var(--font-family-light);
    font-size: clamp(0.688rem, 0.188vw + 0.65rem, 0.875rem);
    line-height: 1.2;
    color: var(--color-heading);
  }

  .body-md-highlighted {
    font-family: var(--font-family-regular);
    font-size: clamp(0.688rem, 0.188vw + 0.65rem, 0.875rem);
    line-height: 1.2;
    color: var(--color-heading);
  }

  .body-sm {
    font-family: var(--font-family-light);
    font-size: clamp(0.563rem, 0.188vw + 0.525rem, 0.75rem);
    line-height: 1.2;
    color: var(--color-heading);
  }

  .body-sm-highlighted {
    font-family: var(--font-family-regular);
    font-size: clamp(0.563rem, 0.188vw + 0.525rem, 0.75rem);
    line-height: 1.2;
    color: var(--color-heading);
  }

  .body-xs {
    font-family: var(--font-family-light);
    font-size: clamp(0.5rem, 0.125vw + 0.475rem, 0.625rem);
    line-height: 1.2;
    color: var(--color-heading);
  }

  .body-xs-highlighted {
    font-family: var(--font-family-regular);
    font-size: clamp(0.5rem, 0.125vw + 0.475rem, 0.625rem);
    line-height: 1.2;
    color: var(--color-heading);
  }

  .link-xl {
    font-family: var(--font-family-regular);
    font-size: var(--link1-font-size);
    line-height: 1.2;
    color: var(--color-heading);
    text-decoration: underline;
  }

  .link-lg {
    font-family: var(--font-family-regular);
    font-size: var(--link2-font-size);
    line-height: 1.2;
    color: var(--color-heading);
    text-decoration: underline;
  }

  .link-md {
    font-family: var(--font-family-regular);
    font-size: var(--link3-font-size);
    line-height: 1.2;
    color: var(--color-heading);
    text-decoration: underline;
  }

  .link-sm {
    font-family: var(--font-family-regular);
    font-size: var(--link4-font-size);
    line-height: var(--link4-line-height);
    color: var(--color-heading);
    text-decoration: underline;
  }

  .btn-primary {
    border: var(--border-active);
    background: var(--primary-color);
    color: var(--white-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md) 0;
  }

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

  .btn-primary:focus {
    outline: 4px solid var(--secondary-color);
    outline-offset: 1px;
  }

  .btn-primary:active {
    border: 2px solid var(--primary-color-active);
    background: var(--primary-color-active);
  }

  .btn-secondary {
    border: var(--border-secondary);
    background: var(--white-color);
    color: var(--primary-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md) 0;
  }

  .btn-secondary:hover {
    border: var(--border-active);
    background: var(--white-color);
  }

  .btn-secondary:focus {
    outline: 4px solid var(--secondary-color);
    outline-offset: 1px;
  }
  
  .btn-secondary:active {
    background: var(--secondary-color-active);
  }

  .border-radius-xl {
    border-radius: var(--border-radius-xl);
  }

  .border-radius-lg {
    border-radius: var(--border-radius-lg);
  }

  .border-radius-md {
    border-radius: var(--border-radius-md);
  }

  .border-radius-sm {
    border-radius: var(--border-radius-sm);
  }

  .border-default {
    border: var(--border-default);
  }

  .border-active {
    border: var(--border-active);
  }

  .border-alert {
    border: var(--border-alert);
  }

  .border-warning {
    border: var(--border-warning);
  }

  .border-success {
    border: var(--border-success);
  }

  .border-info {
    border: var(--border-info);
  }