/* CSS Stylesheet */


* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}


body {
    background-color: #d9dcd6;
}


a {
    color: #ffffff;
    text-decoration: none;
}


p {
    font-size: 16px;
}


/* Styling for Header and top navigation */
/* Added flex properties to the header container so that the logo and navigation links would stay centered no matter what screen size the site is being viewed on  */

.header {
    padding: 20px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background-color: #2a607c;
    color: #ffffff;
    display: flex;
    align-items: center;
}


/* Company logo styling */

.header h1 {
    display: inline-block;
    font-size: 48px;
    margin-right: 200px;
    
}


/* Top navigation styling - changed .header div to .head nav to reflect semantic html tag changes in index.html */
/* Added  margin-left: auto so that the navigation links positioning would remain responsive*/

.header nav {
    padding-top: 15px;
    margin-right: 20px;
    float: right;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 20px;
    margin-left: auto;
}


/* Styling for links in top navigation */

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


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


/* Styling for main homepage hero image - edit the url if you would like to change the main homepage image in the future. */

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


/* layout and positioning for 3 images in the services section */

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


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


/* Main page content styling - covers both the services and benefits section */
/* This class uses flex properties to make this container responsive to viewport changes and to ensure an even gap between content */
/* Added a minimum width so that the content will not look terrible if viewed on a mobile or any device with a really small screen */

.main-body{
    display: flex;
    justify-content: center;
    gap: 10px;
    min-width: 980px;
}


/* Styling for the services section of the page */

.services-content-block {
    width: 75%;
    display: inline-block;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 1px; 
    flex-wrap: wrap
}


/* css rules for the 3 services content blocks */
/*  This was previous 3 seperate css classes - they were all doing the same 
    thing so i consolidated them down into one class */
.services {
    margin-bottom: 20px;
    padding: 50px;
    height: 300px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color: #0072bb;
    color: #ffffff;
}

/*  This was previous 3 seperate css classes - they were all doing the same 
    thing so i consolidated them down into one class */
.services img {
    max-height: 200px;
}


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


/* Styling for the benefits section of the page */
/*  This was previous 3 seperate css classes - they were all doing the same 
    thing so i consolidated them down into one class */
.benefits {
    margin-right: 20px;
    padding: 50px;
    clear: both;
    float: right;
    width: 20%;
    height: 100%;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color: #2589bd;
    margin-bottom: 32px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 55px;
    flex: auto;
    text-align: center;
}

/* Styling for 3 benefit headings on the page */

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


/* Styling for 3 benefit section icon images on the page */

.benefits img {
    display: block;
    margin: 10px auto;
    max-width: 150px;
    align-items: center;
}


/* Footer styling rules - changed from class to element selector for the footer */

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


.footer h2 {
    font-size: 20px; 
}
 

/* An attempt to make the site layout fully responsive - a media query that changes layout when the site is viewed on mobile or tablet devices  */
/* set flex direction to change to column if the screen size is less than 810px, so the benefits section will move below the services and it can all be scrolled as one list */

@media screen and (max-width:810px){
    .main-body{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }   

        .benefits{
            margin-left: 20px;
            margin-right: 20px;
            padding: 20px;
            width: 735px;
            height: 100%;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            background-color: #2589bd;
            margin-bottom: 32px;
            color: #ffffff;
            display: flex;
            flex-direction: column;
            gap: 55px;
            flex: auto;
            justify-content: space-between;
            flex-wrap: wrap;
            flex-shrink: 2; 
        }
}