/**********************************************************
    Page styling
 *********************************************************/
main section.hero div.hero-img.home {
    background: url('../img/thomas-lefebvre-gp8BLyaTaA0-unsplash.jpg'); /* [interchangeable image] */
    background-size: cover;
    background-position: center;
}

main section.services .service-image-section.img-1 {
    background-image: url(../img/nordwood-themes-yyMJNPgQ-X8-unsplash.jpg); /* [interchangeable image] */
}

main section.services .service-image-section.img-2 {
    background-image: url(../img/scott-graham-5fNmWej4tAA-unsplash.jpg); /* [interchangeable image] */
}

main section.services .service-image-section.img-3 {
    background-image: url(../img/thomas-lefebvre-gp8BLyaTaA0-unsplash.jpg); /* [interchangeable image] */
}

main section.services .service-card.card-1 .service-text-section ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: left;
} 

main section.services .service-card.card-2 .service-text-section {
    padding-bottom: 0;
} 

main section.services .service-card.card-2 .service-text-section h4 {
    color: #424242;
    margin: 0;
} 

main section.services .service-card.card-2 .service-text-section dl {
    text-align: left;
} 

main section.services .service-card.card-2 .service-text-section dl div {
    padding: 0.5em 0.2em;
    margin-top: 0.8em;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}


/*-----------------------------------------------------------------------------------------------------------------------------*/

/**********************************************************
    css based animation code
 *********************************************************/
 @keyframes bounceArrow {
    0% {
        transform: translateX(0) translateY(0);
    }
    50% {
        transform: translateX(1em) translateY(-1em);
    }
    100% {
        transform: translateX(0) translateY(0);
    }
}

@keyframes moveArrow {
    0% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(1.6em);
    }
    100% {
        transform: translateX(8.5em) translateY(-2.5em);
    }
}
