/**
 * CSS Variables
 * -------------
 * Global CSS variables for colors, font-size, typography.
 * Adjust these to theme according to the website.
 */

:root {
    --font-family-heading: "Lora", system-ui, sans-serif;
    --font-family-text: "Barlow", system-ui, sans-serif;

    /* WIDTHS */
    --container-max: 1240px;
    --container-padding: 0 20px;
    --gutter-x: 16px;
    --gutter-y: 16px;

    /* FONT WEIGHTS */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* COLORS */
    --brand-primary: #0537A4;
    --brand-secondary: #39892F;
    --brand-additional: #00338E;
    --text-header-main: #222222;
    --text-header-secondary: var(--brand-secondary);
    --text-body: #212121;
    --text-link: var(--brand-primary);
    --border-primary: #d5d5d5;
    --border-dark: #285E22;

    /* COLORS-NEUTRALS */
    --black: #000000;
    --white: #ffffff;
    --neutrals-gray-1: #212121;
    --neutrals-gray-2: #4F4F4F;
    --neutrals-gray-3: #A3A3A3;
    --neutrals-gray-4: #8a8b90;
    --neutrals-gray-5: #aaadb1;
    --neutrals-gray-6: #d5d5d5;
    --neutrals-gray-7: #e1e3e6;
    --neutrals-gray-8: #f6f7f8;

    /* FONT-SIZES (1rem = 16px) */
    --text-xs: clamp(0.75rem, calc(0vw + 0.75rem), 0.75rem); /* 12px */
    --text-sm: clamp(0.875rem, calc(0vw + 0.875rem), 0.875rem); /* 14px */
    --text-md: clamp(1rem, calc(0vw + 1rem), 1rem); /* 16px */
    --text-lg: clamp(1.25rem, calc(0vw + 1.25rem), 1.25rem); /* 20px */
    --text-xl: clamp(1.5rem, calc(0vw + 1.5rem), 1.5rem); /* 24px */
    --text-2xl: clamp(1.75rem, calc(0vw + 1.75rem), 1.75rem); /* 28px */
    --text-3xl: clamp(1.75rem, calc(0.45vw + 1.66rem), 2rem); /* up to 32px */
    --text-4xl: clamp(2rem, calc(0.45vw + 1.91rem), 2.25rem); /* up to 36px */
    --text-5xl: clamp(2.25rem, calc(0.45vw + 2.16rem), 2.5rem); /* up to 40px */
    --text-6xl: clamp(2.5rem, calc(0.91vw + 2.32rem), 3rem); /* up to 48px */
    --text-7xl: clamp(3rem, calc(0.91vw + 2.82rem), 3.5rem); /* up to 56px */
    --text-8xl: clamp(3.5rem, calc(1.82vw + 3.14rem), 4.5rem); /* up to 72px */

    /* LINE-HEIGHTS (unitless; comments show typical px at base size) */
    --line-height-sm: 1.4; /* 14px × 1.43 ≈ 20px */
    --line-height-md: 1.5; /* 16px × 1.5  = 24px */
    --line-height-lg: 1.4; /* 20px × 1.4  = 28px */
    --line-height-xl: 1.3; /* 24px × 1.33 ≈ 32px */
    --line-height-2xl: 1.2; /* 28px × 1.29 ≈ 36px */
    --line-height-3xl: 1.2; /* 32px × 1.25 = 40px */
    --line-height-4xl: 1.2; /* 36px × 1.22 ≈ 44px */
    --line-height-5xl: 1.2; /* 40px × 1.2  = 48px */
    --line-height-6xl: 1.1; /* 48px × 1.17 ≈ 56px */
    --line-height-7xl: 1.1; /* 56px × 1.14 ≈ 64px */
    --line-height-8xl: 1.1; /* 72px × 1.11 ≈ 80px */

    --list-line-height-md: 1.7;
}

/**
 * General/Common CSS for all websites
 * -------------
 * These CSS are necessary for all websites to start with. Tweak it as per need.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}
* {
    margin: 0;
    padding: 0;
}
@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

/* Body */
body {
    -webkit-font-smoothing: antialiased;
    font-family: var(--font-family-sans-primary);
    font-size: var(--text-md);
    line-height: var(--line-height-md);
    color: var(--text-body);
    font-family: var(--font-family-text);
}

/* Container */
.container {
    max-width: var(--container-max);
    width: 100%;
    padding: var(--container-padding);
    margin: 0 auto;
}

/* Image/Assets */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

/* Input/Fields */
input, button, textarea, select {
    font: inherit;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    color: var(--text-header-main);
    font-weight: var(--font-weight-bold);
    margin-bottom: 32px;
}
h1, h2, h3 {
    font-family: var(--font-family-heading);
}
h4, h5, h6 {
    font-family: var(--font-family-text);
}
h1 {
    font-size: var(--text-5xl);
    line-height: var(--line-height-5xl);
}
h2 {
    font-size: var(--text-4xl);
    line-height: var(--line-height-4xl);
}
h3 {
    font-size: var(--text-3xl);
    line-height: var(--line-height-3xl);
}
h4 {
    font-size: var(--text-2xl);
    line-height: var(--line-height-2xl);
}
h5 {
    font-size: var(--text-xl);
    line-height: var(--line-height-xl);
}
h6 {
    font-size: var(--text-lg);
    line-height: var(--line-height-lg);
}

/* Paragraphs */
p {
    margin-bottom: 24px;
}
p.sm {
    font-size: var(--text-sm);
    line-height: var(--line-height-sm);
    margin-bottom: 1.5rem;
}
p.lg {
    font-size: var(--text-lg);
    line-height: var(--line-height-lg);
    margin-bottom: 1.5rem;
}

/* Lists */
ul, ol {
    line-height: var(--list-line-height-md);
    margin-bottom: 16px;
}
ul ul, ol ol {
    margin: 0;
    padding-left: 32px;
}
ol ol {
    list-style: lower-alpha;
}

/* Blockquote */
blockquote {
    font-style: italic;
    margin: 24px 0 24px 20px;
    padding-left: 16px;
    border-left: 2px solid var(--brand-primary);
}

/* Links */
a {
  color: var(--text-link);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
}

/* HR */
hr {
  border: none;
  border-top: 1px solid var(--border-primary);
  margin: 32px 0;
}

/* Others */
small {
  color: var(--neutrals-gray-5);
  font-size: var(--text-xs);
  line-height: var(--line-height-sm);
  display: block;
  margin-bottom: 1.5rem;
  position: relative;
  padding-left: 0.5rem;
}
small > sup {
  position: absolute;
  left: 0;
  top: 0.4em;
  line-height: 1;
}
sub, sup {
  font-size: 65%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
  margin-left: 0.1em;
}


/**
 * Column Structure
 * -------------
 * The structure has been created using Flexbox.
 */


.d-flex {
    display: flex;
}
.justify-center {
    justify-content: center;
    text-align: center;
}
.align-center {
    align-items: center;
}
.d-flex-full {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Breakpoints */
@media (min-width: 480px){ :root{ --sm:1 } }
@media (min-width: 768px){ :root{ --md:1 } }
@media (min-width:1024px){ :root{ --lg:1 } }
@media (min-width:1280px){ :root{ --xl:1 } }

/* Row */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(-1 * var(--gutter-x));
  margin-right: calc(-1 * var(--gutter-x));
  column-gap: var(--gutter-x);
  row-gap: var(--gutter-y);
}

/* Columns */
.row > [class*="col"] {
  padding-left: var(--gutter-x);
  padding-right: var(--gutter-x);
}

.col { flex: 1 1 0; min-width: 0; }

/* Base (mobile-first) fixed spans */
.col-1  { flex: 0 0 calc(8.3333% - var(--gutter-x));  max-width: calc(8.3333% - var(--gutter-x));  }
.col-2  { flex: 0 0 calc(16.6667% - var(--gutter-x)); max-width: calc(16.6667% - var(--gutter-x)); }
.col-3  { flex: 0 0 calc(25% - var(--gutter-x));      max-width: calc(25% - var(--gutter-x));      }
.col-4  { flex: 0 0 calc(33.3333% - var(--gutter-x)); max-width: calc(33.3333% - var(--gutter-x)); }
.col-5  { flex: 0 0 calc(41.6667% - var(--gutter-x)); max-width: calc(41.6667% - var(--gutter-x)); }
.col-6  { flex: 0 0 calc(50% - var(--gutter-x));      max-width: calc(50% - var(--gutter-x));      }
.col-7  { flex: 0 0 calc(58.3333% - var(--gutter-x)); max-width: calc(58.3333% - var(--gutter-x)); }
.col-8  { flex: 0 0 calc(66.6667% - var(--gutter-x)); max-width: calc(66.6667% - var(--gutter-x)); }
.col-9  { flex: 0 0 calc(75% - var(--gutter-x));      max-width: calc(75% - var(--gutter-x));      }
.col-10 { flex: 0 0 calc(83.3333% - var(--gutter-x)); max-width: calc(83.3333% - var(--gutter-x)); }
.col-11 { flex: 0 0 calc(91.6667% - var(--gutter-x)); max-width: calc(91.6667% - var(--gutter-x)); }
.col-12 { flex: 0 0 calc(100% - var(--gutter-x));     max-width: calc(100% - var(--gutter-x));     }

/* sm ≥ 480px */
@media (min-width: 480px){
  .col-sm-1  { flex: 0 0 calc(8.3333% - var(--gutter-x));  max-width: calc(8.3333% - var(--gutter-x));  }
  .col-sm-2  { flex: 0 0 calc(16.6667% - var(--gutter-x)); max-width: calc(16.6667% - var(--gutter-x)); }
  .col-sm-3  { flex: 0 0 calc(25% - var(--gutter-x));      max-width: calc(25% - var(--gutter-x));      }
  .col-sm-4  { flex: 0 0 calc(33.3333% - var(--gutter-x)); max-width: calc(33.3333% - var(--gutter-x)); }
  .col-sm-5  { flex: 0 0 calc(41.6667% - var(--gutter-x)); max-width: calc(41.6667% - var(--gutter-x)); }
  .col-sm-6  { flex: 0 0 calc(50% - var(--gutter-x));      max-width: calc(50% - var(--gutter-x));      }
  .col-sm-7  { flex: 0 0 calc(58.3333% - var(--gutter-x)); max-width: calc(58.3333% - var(--gutter-x)); }
  .col-sm-8  { flex: 0 0 calc(66.6667% - var(--gutter-x)); max-width: calc(66.6667% - var(--gutter-x)); }
  .col-sm-9  { flex: 0 0 calc(75% - var(--gutter-x));      max-width: calc(75% - var(--gutter-x));      }
  .col-sm-10 { flex: 0 0 calc(83.3333% - var(--gutter-x)); max-width: calc(83.3333% - var(--gutter-x)); }
  .col-sm-11 { flex: 0 0 calc(91.6667% - var(--gutter-x)); max-width: calc(91.6667% - var(--gutter-x)); }
  .col-sm-12 { flex: 0 0 calc(100% - var(--gutter-x));     max-width: calc(100% - var(--gutter-x));     }
}

/* md ≥ 768px */
@media (min-width: 768px){
  .col-md-1  { flex: 0 0 calc(8.3333% - var(--gutter-x));  max-width: calc(8.3333% - var(--gutter-x));  }
  .col-md-2  { flex: 0 0 calc(16.6667% - var(--gutter-x)); max-width: calc(16.6667% - var(--gutter-x)); }
  .col-md-3  { flex: 0 0 calc(25% - var(--gutter-x));      max-width: calc(25% - var(--gutter-x));      }
  .col-md-4  { flex: 0 0 calc(33.3333% - var(--gutter-x)); max-width: calc(33.3333% - var(--gutter-x)); }
  .col-md-5  { flex: 0 0 calc(41.6667% - var(--gutter-x)); max-width: calc(41.6667% - var(--gutter-x)); }
  .col-md-6  { flex: 0 0 calc(50% - var(--gutter-x));      max-width: calc(50% - var(--gutter-x));      }
  .col-md-7  { flex: 0 0 calc(58.3333% - var(--gutter-x)); max-width: calc(58.3333% - var(--gutter-x)); }
  .col-md-8  { flex: 0 0 calc(66.6667% - var(--gutter-x)); max-width: calc(66.6667% - var(--gutter-x)); }
  .col-md-9  { flex: 0 0 calc(75% - var(--gutter-x));      max-width: calc(75% - var(--gutter-x));      }
  .col-md-10 { flex: 0 0 calc(83.3333% - var(--gutter-x)); max-width: calc(83.3333% - var(--gutter-x)); }
  .col-md-11 { flex: 0 0 calc(91.6667% - var(--gutter-x)); max-width: calc(91.6667% - var(--gutter-x)); }
  .col-md-12 { flex: 0 0 calc(100% - var(--gutter-x));     max-width: calc(100% - var(--gutter-x));     }
}

/* lg ≥ 1024px */
@media (min-width: 1024px){
  .col-lg-1  { flex: 0 0 calc(8.3333% - var(--gutter-x));  max-width: calc(8.3333% - var(--gutter-x));  }
  .col-lg-2  { flex: 0 0 calc(16.6667% - var(--gutter-x)); max-width: calc(16.6667% - var(--gutter-x)); }
  .col-lg-3  { flex: 0 0 calc(25% - var(--gutter-x));      max-width: calc(25% - var(--gutter-x));      }
  .col-lg-4  { flex: 0 0 calc(33.3333% - var(--gutter-x)); max-width: calc(33.3333% - var(--gutter-x)); }
  .col-lg-5  { flex: 0 0 calc(41.6667% - var(--gutter-x)); max-width: calc(41.6667% - var(--gutter-x)); }
  .col-lg-6  { flex: 0 0 calc(50% - var(--gutter-x));      max-width: calc(50% - var(--gutter-x));      }
  .col-lg-7  { flex: 0 0 calc(58.3333% - var(--gutter-x)); max-width: calc(58.3333% - var(--gutter-x)); }
  .col-lg-8  { flex: 0 0 calc(66.6667% - var(--gutter-x)); max-width: calc(66.6667% - var(--gutter-x)); }
  .col-lg-9  { flex: 0 0 calc(75% - var(--gutter-x));      max-width: calc(75% - var(--gutter-x));      }
  .col-lg-10 { flex: 0 0 calc(83.3333% - var(--gutter-x)); max-width: calc(83.3333% - var(--gutter-x)); }
  .col-lg-11 { flex: 0 0 calc(91.6667% - var(--gutter-x)); max-width: calc(91.6667% - var(--gutter-x)); }
  .col-lg-12 { flex: 0 0 calc(100% - var(--gutter-x));     max-width: calc(100% - var(--gutter-x));     }
}

/* xl ≥ 1280px */
@media (min-width: 1280px){
  .col-xl-1  { flex: 0 0 calc(8.3333% - var(--gutter-x));  max-width: calc(8.3333% - var(--gutter-x));  }
  .col-xl-2  { flex: 0 0 calc(16.6667% - var(--gutter-x)); max-width: calc(16.6667% - var(--gutter-x)); }
  .col-xl-3  { flex: 0 0 calc(25% - var(--gutter-x));      max-width: calc(25% - var(--gutter-x));      }
  .col-xl-4  { flex: 0 0 calc(33.3333% - var(--gutter-x)); max-width: calc(33.3333% - var(--gutter-x)); }
  .col-xl-5  { flex: 0 0 calc(41.6667% - var(--gutter-x)); max-width: calc(41.6667% - var(--gutter-x)); }
  .col-xl-6  { flex: 0 0 calc(50% - var(--gutter-x));      max-width: calc(50% - var(--gutter-x));      }
  .col-xl-7  { flex: 0 0 calc(58.3333% - var(--gutter-x)); max-width: calc(58.3333% - var(--gutter-x)); }
  .col-xl-8  { flex: 0 0 calc(66.6667% - var(--gutter-x)); max-width: calc(66.6667% - var(--gutter-x)); }
  .col-xl-9  { flex: 0 0 calc(75% - var(--gutter-x));      max-width: calc(75% - var(--gutter-x));      }
  .col-xl-10 { flex: 0 0 calc(83.3333% - var(--gutter-x)); max-width: calc(83.3333% - var(--gutter-x)); }
  .col-xl-11 { flex: 0 0 calc(91.6667% - var(--gutter-x)); max-width: calc(91.6667% - var(--gutter-x)); }
  .col-xl-12 { flex: 0 0 calc(100% - var(--gutter-x));     max-width: calc(100% - var(--gutter-x));     }
}



/** 
 * Responsive CSS
 */

@media (max-width: 600px) {
  p {
    line-height: 1.6;
  }
}