*body{
    font-family:"Lato", sans-serif;
    background-color: white;

}


/* header */
header{
    display: flex;
    width:100%;
    justify-content: space-around; /* spaces the items in the header */
    align-items: center;
}
ul{
    display: flex;
    justify-content: space-around; /* spaces the list items*/
    align-items: center;
}

nav{
    flex-basis: 50%;
 
}
nav li {
    list-style: none;
}
header h1{
    color:#F2B061;
}
#hire-btn{
    background-color: #171567;
    color: white;
    padding:10px 20px;
    border-radius: 10px;
}
/* main */
main{
    padding: 60px;
    padding-top: 10px;
}
main h1{
    font-size: 90px;
    width:60%;
}
main h1 span{
    color:#171567;
}
.side-img{
    width:100%;
    border-radius: 10px;
  
}
#services-section{
    display: flex;
    justify-content: space-around;

}
.service-component{
    display: flex; /*items appear on the side*/
    justify-content: space-around;
}
.service-component img{
    width:50%;
    border-radius: 10px;

}
.service-component h1 {
    font-size: 30px;
}
.service-component div{
    width:40%;

}
.hero-section{
    display:flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
}
.hero-section div{
    
    flex-basis: 40%; /*increases the sie of the image basing on the parent width */

    
}
/* footer */
footer{
    text-align: center;
    /* align-items: center; */
    background-color: #F2B061;
}
/*Media queries */
/* mobile screens  = 320px - 480px*/
/*Making it general leave out screen */
 @media  (max-width: 480px) {
    body{
        background-color: #F2B061;
    }
    main h1{
        font-size: 2.0rem;
        width:100%;
    }
    main{
        padding: 1rem;
    }
    #services-section{
        flex-direction: column;

    }
    .service-component{
        flex-direction: column;

    }
    .service-component div{
        width:100%;
    }
    .service-component img {
        width: 100%;
    }

 }