/*  ============= WEB BROWSER RESETS ============ */
* { margin: 0; padding: 0; border: none }
*, *::before, *::after { box-sizing: border-box }
html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline;
scroll-behavior: smooth; scroll-padding-top: 20px }
body { line-height: 1.5; min-height: 100vh }
@media (max-width: 767px ) { body { text-rendering: optimizeSpeed } }
@media (min-width: 768px ) { body { text-rendering: optimizeLegibility } }
img { width: 100%; height: auto; display: block }


/* ============ CUSTOM PROPERTIES ============  */

:root {
    /* Alternatives to default sans-serif font */
    --font-sans: -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Fira Sans, Ubuntu, Oxygen, Oxygen Sans, Cantarell, Droid Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Emoji, Segoe UI Symbol, Lucida Grande, Helvetica, Arial, sans-serif;

     /* Alternatives to default serif font */
    --font-serif: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

     /* Alternatives to default monospace font */
    --font-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --global-font: var(--font-sans);

    /* Color variables */
    --black-000: #000000;
    --white-000: #ffffff;
    --trans-000: transparent;

    --slate-050: #ECEFF1;
    --slate-100: #CFD8DC;
    --slate-200: #B0BEC5;
    --slate-300: #90A4AE;
    --slate-400: #78909C;
    --slate-500: #607D8B;
    --slate-600: #546E7A;
    --slate-700: #455A64;
    --slate-800: #37474F;
    --slate-900: #263238;

    --gray-050: #F9FAFB;
    --gray-100: #f7fafc;
    --gray-200: #edf2f7;
    --gray-300: #e2e8f0;
    --gray-400: #cbd5e0;
    --gray-500: #a0aec0;
    --gray-600: #718096;
    --gray-700: #4a5568;
    --gray-800: #2d3748;
    --gray-900: #1a202c;

    --red-050: #FEF2F2;
    --red-100: #fff5f5;
    --red-200: #fed7d7;
    --red-300: #feb2b2;
    --red-400: #fc8181;
    --red-500: #f56565;
    --red-600: #e53e3e;
    --red-700: #c53030;
    --red-800: #9b2c2c;
    --red-900: #742a2a;

    --orange-050: #FFF7ED;
    --orange-100: #fffaf0;
    --orange-200: #feebc8;
    --orange-300: #fbd38d;
    --orange-400: #f6ad55;
    --orange-500: #ed8936;
    --orange-600: #dd6b20;
    --orange-700: #c05621;
    --orange-800: #9c4221;
    --orange-900: #7b341e;

    --amber-050: #FFFBEB;
    --amber-100: #FEF3C7;
    --amber-200: #FDE68A;
    --amber-300: #FCD34D;
    --amber-400: #FBBF24;
    --amber-500: #F59E0B;
    --amber-600: #D97706;
    --amber-700: #B45309;
    --amber-800: #92400E;
    --amber-900: #78350F;

    --yellow-050: #FEFCE8;
    --yellow-100: #fffff0;
    --yellow-200: #fefcbf;
    --yellow-300: #faf089;
    --yellow-400: #f6e05e;
    --yellow-500: #ecc94b;
    --yellow-600: #d69e2e;
    --yellow-700: #b7791f;
    --yellow-800: #975a16;
    --yellow-900: #744210;

    --lime-050: #F7FEE7;
    --lime-100: #ECFCCB;
    --lime-200: #D9F99D;
    --lime-300: #BEF264;
    --lime-400: #A3E635;
    --lime-500: #84CC16;
    --lime-600: #65A30D;
    --lime-700: #4D7C0F;
    --lime-800: #3F6212;
    --lime-900: #365314;

    --green-050: #F0FDF4;
    --green-100: #f0fff4;
    --green-200: #c6f6d5;
    --green-300: #9ae6b4;
    --green-400: #14f195;
    --green-500: #48bb78;
    --green-600: #38a169;
    --green-700: #2f855a;
    --green-800: #276749;
    --green-900: #22543d;

    --teal-050: #F0FDFA;
    --teal-100: #CCFBF1;
    --teal-200: #99F6E4;
    --teal-300: #5EEAD4;
    --teal-400: #2DD4BF;
    --teal-500: #14B8A6;
    --teal-600: #0D9488;
    --teal-700: #0F766E;
    --teal-800: #115E59;
    --teal-900: #134E4A;

    --cyan-050: #ECFEFF;
    --cyan-100: #CFFAFE;
    --cyan-200: #A5F3FC;
    --cyan-300: #67E8F9;
    --cyan-400: #22D3EE;
    --cyan-500: #06B6D4;
    --cyan-600: #0891B2;
    --cyan-700: #0E7490;
    --cyan-800: #155E75;
    --cyan-900: #164E63;

    --sky-050: #F0F9FF;
    --sky-100: #E0F2FE;
    --sky-200: #BAE6FD;
    --sky-300: #7DD3FC;
    --sky-400: #38BDF8;
    --sky-500: #0EA5E9;
    --sky-600: #0284C7;
    --sky-700: #0369A1;
    --sky-800: #075985;
    --sky-900: #0C4A6E;

    --blue-050: #EFF6FF;
    --blue-100: #DBEAFE;
    --blue-200: #BFDBFE;
    --blue-300: #93C5FD;
    --blue-400: #60A5FA;
    --blue-500: #3B82F6;
    --blue-600: #2563EB;
    --blue-700: #1D4ED8;
    --blue-800: #1E40AF;
    --blue-900: #1E3A8A;

    --indigo-050: #EEF2FF;
    --indigo-100: #E0E7FF;
    --indigo-200: #C7D2FE;
    --indigo-300: #A5B4FC;
    --indigo-400: #818CF8;
    --indigo-500: #6366F1;
    --indigo-600: #4F46E5;
    --indigo-700: #4338CA;
    --indigo-800: #3730A3;
    --indigo-900: #312E81;

    --purple-050: #FAF5FF;
    --purple-100: #F3E8FF;
    --purple-200: #E9D5FF;
    --purple-300: #D8B4FE;
    --purple-400: #C084FC;
    --purple-500: #A855F7;
    --purple-600: #9333EA;
    --purple-700: #7E22CE;
    --purple-800: #6B21A8;
    --purple-900: #581C87;

    --fuchsia-050: #FDF4FF;
    --fuchsia-100: #FAE8FF;
    --fuchsia-200: #F5D0FE;
    --fuchsia-300: #F0ABFC;
    --fuchsia-400: #E879F9;
    --fuchsia-500: #D946EF;
    --fuchsia-600: #C026D3;
    --fuchsia-700: #A21CAF;
    --fuchsia-800: #86198F;
    --fuchsia-900: #701A75;

    --pink-050: #FDF2F8;
    --pink-100: #FCE7F3;
    --pink-200: #FBCFE8;
    --pink-300: #F9A8D4;
    --pink-400: #F472B6;
    --pink-500: #EC4899;
    --pink-600: #DB2777;
    --pink-700: #BE185D;
    --pink-800: #9D174D;
    --pink-900: #831843;

    --rose-050: #FFF1F2;
    --rose-100: #FFE4E6;
    --rose-200: #FECDD3;
    --rose-300: #FDA4AF;
    --rose-400: #FB7185;
    --rose-500: #F43F5E;
    --rose-600: #E11D48;
    --rose-700: #BE123C;
    --rose-800: #9F1239;
    --rose-900: #881337;

    --brown-050: #EFEBE9;
    --brown-100: #D7CCC8;
    --brown-200: #BCAAA4;
    --brown-300: #A1887F;
    --brown-400: #8D6E63;
    --brown-500: #795548;
    --brown-600: #6D4C41;
    --brown-700: #5D4037;
    --brown-800: #4E342E;
    --brown-900: #3E2723;

    --trend-050: #fff4d9;
    --trend-100: #fdd0bb;
    --trend-200: #fea8b3;
    --trend-300: #d4eee6;
    --trend-400: #bde5fe;
    --trend-500: #0000fe;
    --trend-600: #400c3e;
    --trend-700: #2c4763;
    --trend-800: #1f364d;
    --trend-900: #0e2439;

    --overlay-opacity: 0.3;
    --overlay-color: rgba(255, 0, 0, var(--overlay-opacity));
    --overlay-trans: transparent;

    /* Fluid font scale */
	--font-size-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
	--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.29rem);
	--font-size-md: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
	--font-size-lg: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
	--font-size-xl: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem);
	--font-size-xxl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
	--font-size-xxxl: clamp(3.05rem, 3.54vw + 2.17rem, 5rem);
}

/* Global font */
body { font-family: var(--global-font) }

/* Content containers */
nav, header, section, figure, footer { position: relative; display: block }
header, section, footer { margin-left: auto; margin-right: auto; overflow: hidden }
/* Under last content item, zero the bottom margin */
section:not(.container-flexbox) > *:last-child, footer > *:last-child { margin-bottom: 0 !important }


/*  ====================== SECTIONS ======================== */

/* Padding around content: desktops / laptops */
@media (min-width: 1025px) { section { padding: 60px 4% } }
/* Padding around content: tablets */
@media (min-width: 768px) and (max-width: 1024px) { section { padding: 50px 6% } }
/* Padding around content: mobiles */
@media (max-width: 767px) { section { padding: 42px 9% 42px 9% } }

/* When content width < viewport width, equalise spacing at left and right */
section > * { max-width: 1600px; margin-left: auto; margin-right: auto }

/* Max content widths: classes for narrow content */
section.w-820px >  * { max-width: 820px }
section.w-1024px > * { max-width: 1024px }
section.w-1140px > * { max-width: 1140px }
section.w-1356px > * { max-width: 1356px }

/* ============= SINGLE COLUMN LAYOUT ============ */

/* Typography */
section > h2, section > h3 { line-height: 1.2 }
section > h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
	letter-spacing: -1px;
}

@media (min-width: 768px) {
    section > h2 { margin-bottom: 32px }
    section > h2.bigger-desktop { font-size: var(--font-size-xxl) }
}

@media (max-width: 768px) {
    section > h2 { margin-bottom: 18px }
    section > h2.bigger-mobile { font-size: var(--font-size-xxl) }
}

section > h2 span.highlight { color: var(--gray-600); }

/* H2 heading underlines */
section > h2.heading-underline { position: relative }

section > h2.heading-underline:after {
    content:''; position: absolute; top: 100%;
    width: 6ch; height: 6px; background-color: var(--gray-600);
}

@media (min-width: 768px) {
    section > h2.heading-underline { margin-bottom: 72px }
    section > h2.heading-underline:after { margin-top: 24px; margin-bottom: 24px }
}

@media (max-width: 767px) {
    section > h2.heading-underline { margin-bottom: 52px }
    section > h2.heading-underline:after { margin-top: 18px; margin-bottom: 24px }
}

@media (min-width: 768px) {
    section:not(.text-center-desktop) > h2.heading-underline:after,
    section:not(.text-center) > h2.heading-underline:after {
        left: 0%;
        right: 0%;
    }
    section.text-center-desktop > h2.heading-underline:after,
    section.text-center > h2.heading-underline:after {
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

@media (max-width: 767px) {
    section:not(.text-center-mobile) > h2.heading-underline:after { left: 0; right: 0 }
    section.text-center-mobile > h2.heading-underline:after {
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

section > h3 {
    font-size: var(--font-size-md);
    font-weight: 700;
}

@media (min-width: 768px) { section > h3 { margin-top: 48px; margin-bottom: 4px } }
@media (max-width: 768px) { section > h3 { margin-top: 32px; margin-bottom: 2px } }

section > p {
	font-size: var(--font-size-base);
    line-height: 1.7;
	margin-bottom: 1em;
}

@media (min-width: 768px) {
    section > p.bigger-desktop { font-size: var(--font-size-md); }
}

@media (max-width: 767px) {
    section > p.bigger-mobile { font-size: var(--font-size-md) }
}

/* Lists */
section > ul { margin-bottom: 18px }
section > ul li {
	font-size: var(--font-size-base);
    margin-bottom: 1em;
}

@media (min-width: 768px ) {
    section > ul li { margin-left: 20px; padding-left: 20px }
    section > ul li.bigger-desktop { font-size: var(--font-size-md); }
}

@media (max-width: 767px) {
    section > ul li { margin-left: 16px; padding-left: 8px; margin-bottom: 10px }
    section > ul li.bigger-mobile { font-size: var(--font-size-md) }
}

/* Lists: Font Awesome icons */
section > ul.fa-ul { margin-left: auto }

@media (min-width: 768px) { section > ul.fa-ul li { margin-left: 28px; padding-left: 20px } }
@media (max-width: 767px) { section > ul.fa-ul li { margin-left: 22px; padding-left: 8px } }

/* Badges */
section > .badge span {
	display: inline-block;
	padding: 2px 10px;
	font-weight: 700;
	font-size: var(--font-size-sm);
	letter-spacing: 2px;
}

@media (min-width: 768px) { section > .badge { margin-bottom: 42px } }
@media (max-width: 767px) { section > .badge { margin-bottom: 24px } }

section > .badge.corners-soft span { border-radius: 16px; padding-left: 14px; padding-right: 14px }

section > .badge.bg-trans { padding: 4px 0 4px 0 }

@media (min-width: 768px) {
    section > .badge.bigger-desktop span { font-size: var(--font-size-base); }
}

@media (max-width: 767px) {
    section > .badge.bigger-mobile span { font-size: var(--font-size-base) }
}

/* Illustrations */
@media (min-width: 768px) {
    section > figure { margin-bottom: 38px }
    section > figure.figure-desktop-width-80 { width: 80% }
    section > figure.figure-desktop-width-50 { width: 50% }

}
@media (max-width: 768px) {
    section > figure { margin-bottom: 24px }
    section > figure.figure-mobile-width-80 { width: 80% }
    section > figure.figure-mobile-width-50 { width: 50% }
}

section.fig-shadow > figure { overflow: visible }

section > figure.img-circle img { border-radius: 50% }

@media (min-width: 768px) {
    section > figure > .cols-img-textbox { left: 36px }
    section > figure > .cols-img-h4 {
        bottom: 20px; left: 36px;
        line-height: 1.2;
        font-size: calc(28px + (36 - 28) * ((100vw - 320px) / (1140 - 320)))
    }
}

@media (min-width: 768px) {
    section:not(.text-center-desktop) > figure:not(.text-center-desktop),
    section:not(.text-center) > figure:not(.text-center-desktop) { text-align: left }
    section.text-center > figure,
    section.text-center-desktop > figure,
    section.text-center-desktop > figure.text-center-desktop {
        text-align: center; margin-left: auto; margin-right: auto
    }
}

@media (max-width: 767px) {
    section:not(.text-center-mobile) > figure:not(.text-center-mobile),
    section:not(.text-center) > figure:not(.text-center-mobile) { text-align: left }
    section.text-center-mobile > figure,
    section.text-center-mobile > figure.text-center-mobile {
        text-align: center; margin-left: auto; margin-right: auto
    }
}

/* Buttons */
@media (min-width: 768px) {
    section > .container-btn { margin-top: 40px }
    section:not(.text-center-desktop) > .container-btn.text-center-desktop,
    section.text-center-desktop .container-btn.text-center-desktop {
        justify-content: center
    }
    section.text-center-desktop .container-btn { justify-content: center }
    section:not(.text-center-desktop) .container-btn { justify-content: flex-start }
}

@media (max-width: 767px) {
    section > .container-btn { margin-top: 32px }
    section:not(.text-center-mobile) .container-btn.text-center-mobile,
    section.text-center-mobile .container-btn.text-center-mobile {
        justify-content: center
    }
    section:not(.text-center-mobile) .container-btn { justify-content: flex-start }
    section.text-center-mobile .container-btn { justify-content: center }
}


/* ============ UTILITY CLASSES ============== */

/* Horozontal alignment */
.text-center { text-align: center; margin-left: auto; margin-right: auto }

@media (min-width: 768px) { .text-center-desktop {
   text-align: center; margin-left: auto; margin-right: auto  }
}
@media (max-width: 767px) { .text-center-mobile  {
    text-align: center; margin-left: auto; margin-right: auto }
}