body {
    font-family: 'Pontano Sans', sans-serif;
}

h1 {
    font-family: 'Pontano Sans';
    font-weight: 500;
    font-size: 4.4em;
    line-height: 1.1;
    background-image: linear-gradient(45deg, rgba(102,120,128,1), rgba(91,153,178,1));
}

h2 {
    font-family: 'Pontano Sans';
    font-weight: normal;
    line-height: 1;
    font-size: 3em;
}

h3 {
    font-family: 'Inter';
    font-weight: 400;
    font-size: 1.5em;
    line-height: 31px;
    color: #02475E;
}

h6 {
    font-family: 'Inter';
    font-weight: 700;
    font-size: 0.9em;
    line-height: 17px;
    text-transform: uppercase;
    color: #516870;
}

.gradient-text {
    background-size: 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
}

.cta {
    display: inline-block;
    font-family: 'Inter';
    font-weight: 700;
    line-height: 1em;
    background: #687980;
    border-radius: 2px;
    padding: 20px 32px;
    font-size: 1em;
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 0px 0px 0 rgba(104,121,128,0.00);
    transition: all cubic-bezier(.17,.67,.44,.9) 0.3s;
}

.cta span {
    margin-left: 0.5em;
}

.cta:hover {
    background: #738E99;
    box-shadow: 0 6px 24px 0 rgba(104,121,128,0.24);
}


/* Navbar with brandign styling */

header {
    text-align: center;
}

.brand {
    font-family: inter;
    font-style: italic;
    font-size: 1.2em;
    font-weight: 800;
    padding: 12px 16px;
    border-radius: 2px;
    background: hsl(195, 96%, 24%);
    background: hsl(195, 48%, 90%);
    display: inline-block;
}


/* Hero section styling */

#hero {
    width: 100%;
    max-width: 800px;
    text-align: center;
    padding: 8em 0;
    margin: 0 auto;
}

#hero h1 {
    margin: 3.5rem 0 1rem 0;
}

#hero .cta {
    margin: 3.5rem 0 0 0;
}


/* Story telling section */

#intro {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 4em 0;
}

.promises {
    display: inline-block;
    margin: 3.5em 0 1em 0;
}

.promises h2 {
    margin: 1rem 0 0 0;
}

.slashed {
    color: #869FA8;
    text-decoration: line-through;
}