:root {
    /* colors*/
    --color-yellow: #FFD100;
    --color-blue: #103366;
    --color-gray: #D9D9D9;
    --color-grey: #8E9091;
    --color-black: #1A1A18;
    --color-white: #FFFFFF;
    --background-color-blue: var(--color-blue);
    --background-color-gray: #F8F9FA;
    --background-color-grey: #707070;
    --background-color-grey-dark: #45565C;
    --btn-hover-color: #6f96c2;

    --font-size-h1: clamp(2rem, 5vw, 3rem);
    --font-size-h2: clamp(1.75rem, 4vw, 2.25rem);
    --font-size-h3: clamp(1.125rem, 2vw, 1.25rem);
    --font-size-paragraph: clamp(0.9rem, 1.5vw, 1rem);
    --font-size-legend: clamp(0.8rem, 1vw, 0.875rem);

    --border-left-yellow: 3px solid var(--color-yellow);
    --border-radius: 5px;
}

@font-face {
    font-family: 'Fira';
    src: url('../fonts/fira_sans/fira_sans-thin.woff2');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Fira';
    src: url('../fonts/fira_sans/fira_sans-extralight.woff2');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Fira';
    src: url('../fonts/fira_sans/fira_sans-light.woff2');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Fira';
    src: url('../fonts/fira_sans/fira_sans-regular.woff2');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Fira';
    src: url('../fonts/fira_sans/fira_sans-medium.woff2');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Fira';
    src: url('../fonts/fira_sans/fira_sans-semibold.woff2');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Fira';
    src: url('../fonts/fira_sans/fira_sans-bold.woff2');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Fira';
    src: url('../fonts/fira_sans/fira_sans-extrabold.woff2');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Fira';
    src: url('../fonts/fira_sans/fira_sans-black.woff2');
    font-weight: 900;
    font-style: normal;
}

* {
    font-family: 'Fira', Arial, Helvetica, sans-serif;
}

h1, h2, h3 {
    font-weight: 700;
    line-height: 1.2;
}

h1 {
    font-size: var(--font-size-h1);
}

h2 {
    font-size: var(--font-size-h2); 
    margin-bottom: 3.75rem;
}

h3 {
    font-size: var(--font-size-h3);
}

/****************

    MAIN

***************/

main {
    /* opacity: 0;
    transition: all 300ms ease-in; */
}

/**************** Hero ***************/

.hero {
    text-align: left;
    color: var(--color-white);
    background-image: url('../img/hero.jpg');
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

.hero .tag {
    display: inline-block;
    font-size: var(--font-size-legend);
    color: var(--color-blue);
    background-color: var(--color-yellow);
}

.hero .title span {
    color: var(--color-yellow);
}

.hero .hero-content li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: .25rem;
}

.hero .hero-content li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(25%, -50%);
  width: 1em;
  height: 1em;
  background: url('../img/check.svg') no-repeat center center;
  background-size: contain;
}

.hero .kpi > div {
    width: 45%;
    padding: 1rem 1.5rem;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    border-left: var(--border-left-yellow);
    background-color: var(--background-color-grey-dark);
}

.hero .kpi > div p:first-of-type {
    margin-bottom: .25rem;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-yellow);
}

.hero .kpi > div p:last-of-type {
    font-size: 1rem;
    color: var(--color-gray);
    text-transform: uppercase;
}

.hero .form h2 {
    margin-bottom: 0;
    color: var(--color-blue);
}

.hero .form p {
    color: var(--color-grey);
}

.hero .confirmation {
    color: var(--color-blue);
}

.hero .confirmation h2 {
    margin-bottom: 2.25rem !important;
}


/**************** Sections ***************/

section {
    text-align: center;
}

section:nth-child(even) {
    color: var(--color-blue);
    background-color: var(--background-color-gray);
}

section:nth-child(odd) {
    color: var(--color-white);
    background-color: var(--background-color-blue);
}

.solutions img {
    margin: 0 auto 1rem;
}

.cards .card {
    width: 100%;
    background-color: var(--color-white);
}

.solutions .cards .card {
    padding: 1.5rem 2.25rem;
    border: 1px solid var(--color-blue);
}

.info .cards .card {
    padding: 1rem 1.25rem;
    text-align: left;
    border-left: var(--border-left-yellow);
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}

.cards {
    gap: 1.25rem;
}

.cards .card h3 {
    margin-bottom: .5rem;
    color: var(--color-blue);
}

.cards .card p {
    color: var(--color-grey);
}

.info a {
    color: var(--color-blue);
}


/****************

    FOOTER

***************/

.footer {
    color: var(--color-white);
    background-color: var(--background-color-grey);
}

.footer .baseline {
    color: var(--color-yellow);
}

.footer address div img,
.footer address div p {
    display: inline-block;
}

.footer .copyright {
    border-top: 1px solid var(--color-white)
}