css

/*************************
    General Assets
**************************/
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td, article { margin: auto 0; padding: 0; }

body, nav, article, #hero {
    width: 100%;
}

body {
    font: normal 300 1em 'Lora', serif;
}


header {
    background-size: cover;
    height: 500px;
}
@media screen and (min-width: 500px){
    header {  height: 550px;  }
}
@media screen and (min-width: 875px) {
    header {  height: 650px;  }
}


/*************************
    Navigation
**************************/
nav {
    background: #8BC34A;
    height: 55px;
    position: fixed;
}
@media screen and (min-width: 875px) {
    nav {
        height: 0px;
        position: fixed;
    }
}

nav #logo {
    float: left;
    padding: 10px 0px 0px 20px;
    width: 90px;
}
@media screen and (min-width: 875px) {
    nav #logo {
        padding-left: 8vw;
        padding-top: 110px;
        width: 130px;
    }
}

nav #hamburger {
    float: right;
    padding: 15px 16px 0px 0px;
    width: 25px;
}
@media screen and (min-width: 875px) {
    nav #hamburger {
        padding-right: 8vw;
        padding-top: 123px;
        width: 40px;
    }
}

/*  Sidebar  */
.sidenav {
    background-color: #04019a;
    height: 100%;
    padding-top: 60px;
    overflow-x: hidden;
    position: fixed;
    right: 0;
    top: 0;
    transition: 0.5s;
    width: 0;
    z-index: 10;
}

.sidenav a {
    color: #ffffff;
    display: block;
    font: normal 1.5em'Raleway', sans-serif;
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav .closebtn {
    font-size: 36px;
    margin-left: 50px;
    position: absolute;
    right: 25px;
    top: 0;
}
/*  EO Sidebare  */



/*************************
    Index
**************************/

#hero {
    color: #fff;
    padding-top: 145px;
    text-align: center;
}
@media screen and (min-width: 875px) {
    #hero {  padding-top: 225px;  }
}

/*  Hero  */
#hero h1 {
    font: normal 30px 'Raleway', sans-serif;
}
@media screen and (min-width: 500px){
    #hero h1 {  font-size: 48px;  }
}
@media screen and (min-width: 875px) {
    #hero h1 {  font-size: 58px;  }
}

#hero p {
    margin-top: 10px;
}

#hero h5 {
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    margin-top: 10px;
}
@media screen and (min-width: 500px){
    #hero h5 {  font-size: 12px;  }
}

#play-button {
    animation: pulse 2s ease infinite;
    height: 60px;
    padding-top: 29px;
}
@media screen and (min-width: 500px) {
    #play-button {
        height: 70px;
        margin-top: 35px; 
    }
}

#video-background {
    background: #000 url(../images/Agile.jpg) no-repeat;
    background-size: cover;
    height: auto;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    position: fixed;
    top: 50%;
    width: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
/*  EO Hero */

#description {
    line-height: 25px;
    margin: auto;
    padding: 40px 0px 40px 0px;
    text-align: center;
    width: 95%;
}
@media screen and (min-width: 500px) {
    #description {  width: 77%;  }
}
@media screen and (min-width: 875px) {
    #description {  width: 42%;  }
}

/*  Offerings Section  */
#offers {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    width: 60%;
}
@media screen and (min-width: 500px){
    #offers {  width: 75%;  }
}
@media screen and (min-width: 875px) {
    #offers {  width: 60%;  }
}

#offers article {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 215px;
    justify-content: center;
    margin: auto;
    max-width: 300px;
    text-align: center;
}
@media screen and (min-width: 500px){
    #offers article {
        margin-bottom: 43px;
        height: 145px;
        width: 50%;
    }
}
@media screen and (min-width: 875px) {
    #offers article {
        height: 170px;
        width: 25%;
    }
}

#offers article h1 {
    font: normal 300 18px 'Raleway', sans-serif;
    color: #4c4c4c;
}

#offers article p {
    margin-top: 7px;
    line-height: 22px;
    width: 85%;
}

#offers article img {
    height: 100px;
    margin-bottom: 23px;
}
/*  EO Offerings Section  */

.item-section {
    align-items: center;
    background: #fff;
    display: flex;
    height: 200px;
    justify-content: center;
    text-align:  center;
}
@media screen and (min-width: 500px){
    .item-section {
        background: #000 no-repeat center;
        background-size: contain;
        height: 300px;
    }
}
@media screen and (min-width: 875px) {
    .item-section {  height: 400px;  }
}

.item-section h1 {
    font: normal 900 30px 'Raleway', sans-serif;
    text-decoration: none;
}
@media screen and (min-width: 875px) {
    .item-section h1 {  font-size: 40px;  }
}

.item-section h5 {
    font: normal 400 15px 'Lora', serif;
}

#our-approach {
    background-color: #8BC34A;
    color: #fff;
}
@media screen and (min-width: 500px) {
    #our-approach {
        background: #fff url(../images/our-approach4.jpg) no-repeat center;
        background-size: contain;
        color: #000;
    }
}

#contact-us {
    background-color: #a9d27a;
    color: #fff;
}

#wrapper {
    background: #fff;
}

/*****************************
Animations below
*****************************/
@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}