*{
    margin: 0;
    padding: 0;
}

.banner
{
    background-color: aqua;
    height: 80vh;
    min-height: 600px;
    background-image:url("sunnyside-agency-landing-page-main/sunnyside-agency-landing-page-main/images/desktop/image-header.jpg");
    background-position: center center;
    background-size: cover;
    display: flex;
    flex-direction: column;
}

/*display flex makes content go from left to right*/
.header 
{
    height: 60px;
    padding-left: 20px;
    padding-right: 20px;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.menu
{
    display: flex;
    font-size: 20px;
    color: white;
    align-items: center;
}

/*this code means (target the span items in the .menu class)*/

.menu span
{
/*To give the content of the menu spalces between them*/
    margin-right: 30px;
    cursor: pointer;
    
}

.contact
{
    background-color: white;
    color: black;
/*padding shortcut below 4px for the vertical (top and bottom) and 15px for the horizontal (left and right)*/   
    
padding: 8px 30px;

/*To curve the edges of the rectangle*/

    border-radius: 20px;
/*Makes the cursor interactive when it is placed on the contact button - - it changes to a finger*/
    cursor: pointer;

    transition: 0.2s all ease-in-out;
   
    
}

/*Improves the interactivity of the contact button. It makes the background colour to change when the cursor is hovered on it*/
.contact:hover
{
    background-color: antiquewhite;
}

/* align content is used for top to bottom (vertical), justify content is used for right to left (horizontal)
When you flip the flex direction from row to column, you interchange the meaning of align and justify content*/

.main
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    flex-grow: 1;
    color: white;
    font-weight: bold;
    margin-bottom: 30px;
}

.arrow
{
    margin-top: 60px;
}

.section1, .section2, .section3
{
    display: flex;
    height: 350px;
}


.right1
{
    display: flex;
    align-items: center;
    justify-content: center;
}

.left1
{
    display: flex;
    align-items: center;
    justify-content: center;
}

.right2
{
    display: flex;
    align-items: center;
    justify-content: center;
}

.textcontainer
{
    width: 70%;
}

/* Download colour slurp*/
.left1 h1, .right2 h1
{
    font-size: 40px;
    margin-bottom: 30px;

}

.left1 p, .right2 p
{
    color: #848391;
    line-height: 1.3;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 30px;
}

.learnmorebutton
{
    width: 150px;
    cursor: pointer;
}

.left1,.right1
{
    flex: 1;
}

.left2,.right2
{
    flex: 1;
}

.left3,.right3
{
    flex: 1;
}

.section1 img, .section3 img, .section2 img
{
    width: 100%;
    height: 100%;
    object-fit:cover;
}

/*.client1img
{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
}*/

.client1img img
{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 30px;
}

.section4testimonials
{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fffbf8;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-right: 50px;
    padding-left: 50px;

}

.section4testimonials h1
{
    color: #a0a1a2;
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 40px;
}

.clients
{
    display: flex;
    justify-content: space-between;
}

.client
{
    display: flex;
    flex-direction: column;
    flex: 30%;
    align-items: center;
    padding-left: 15px;
}

.client p
{
    text-align:center;
    color: #848391;
    line-height: 1.3;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 30px;
}

.detail
{
    text-align: center;
}

.client h4
{
    color: #a0a1a2;
    margin-top: 8px;
}

.section5
{
    display: flex;
    width: 100%;
}

.section5 img
{
flex: 0.25;
width: 100%;
height: 100%;
}

.footer
{
    background-color: #90d4c5;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 50px;
    padding-top: 50px;
}

.logofooter
{
    color: #207465;
}

.footernav
{
    color: #4f9485;
    margin-top: 30px;
    font-weight: bold;
}

.footernav span
{
    padding: 8px;
    cursor: pointer;
}

.footernav span:hover
{
    color: #207465;
}

.socialmedia
{
    margin-top: 40px;
    cursor: pointer;
}

.socialmedia img
{
    padding: 4px;
}

/*make your site using netlify, create an account and then drag and drop the folder into netlify. Also 
use media queries to improve the responsiveness of the website to fit other screens getbootstrap.com*/

@media (max-width: 575.98px)
{
    .section1
    {
        flex-direction: column;
        height: auto;
    }

    .left1
    {
        padding-bottom: 20px;
        padding-top: 20px;
    }

    .right1
    {
        display: none;
    }

    .clients
    {
        flex-direction: column;
    }

    .client
    {
        margin-top: 50px;
    }
}