* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 
}

h1 h2 h3 {color: white;}
h4 {font-size: 32px;}

p { 
    color: white;
    font-size: 16px;
}

body {background-color: #d9dcd6;}

/* Setting general stuff above, seems ok to me. 
But further on there are multiple, multiple declarations of the same set of fonts. Imagine trying to change them consistenly over the whole page. */

header {
    padding: 20px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    /* Font family for Wordmark */
    background-color: #2a607c;
    color: #fff
}

header h1 {
    display: inline-block;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 48px;
}

.seo {
    color: #d9dcd6;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}


header nav {
    padding-top: 15px;
    margin-right: 20px;
    float: right;
    font-size: 20px;
}

nav ul {
    list-style-type: none;
}

nav ul li {
    display: inline-block;
    margin-left: 25px;
}

header a {
    color: #fff;
    text-decoration: none;
    /* This avoids default link colour and underline. Originally in whole document, not just head. Restricted its scope. */
}

.hero {
    height: 800px;
    width: 100%;
    margin-bottom: 25px;
    background-image: url("../images/digital-marketing-meeting.jpg");
    background-size: cover;
    background-position: center;
}

article {
    width: 75%;
    display: inline-block;
    margin-left: 20px;
}

.card {
    margin-bottom: 20px;
    padding: 50px;
    height: 300px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color: #0072bb;
    color: #ffffff;
    font-size: 24px; 
    image: 
}

.card  h2  { 
    margin-bottom: 20px;
    font-size: 36px;
}

.card img {
    max-height: 200px;
}

.float-left {
    float: left;
    margin-right: 25px;
}

.float-right {
    float: right;
    margin-left: 25px;
}

aside {
    margin-right: 20px;
    padding: 20px;
    clear: both;
    float: right;
    width: 20%;
    height: 100%;
    background-color: #2589bd;
    color: #fff;
    margin-bottom: 32px;
}

.benefit-card { 
    margin-bottom: 32px;
    
} 

.benefit-card h3 { 
    margin-bottom: 10px;
    text-align: center;
}

.benefit-card img {
    display: block;
    margin: 10px auto;
    max-width: 150px;
}
.benefit-card {
    margin-bottom: 32px;
    color: #ffffff;
}

footer  {
    padding: 30px;
    clear: both;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    /* Font family for footer */
    text-align: center;
}

footer p {color: black;}