.service-wraper

background-image: url($baseurl + 'assets/img/content/services/services-bg.svg')
background-position: bottom
background-size: cover

.services-blurb

text-align: left

.service-blurb-wrapper

background-color: $pure-white
border-radius: 10px
box-shadow: 5px 10px 10px $box-shadow-shade
margin: 0 auto
padding: 5vh 5vw
width: 80%

.service-panel

display: flex
flex-direction: column
flex-wrap: wrap
justify-content: space-around
overflow-x: hidden
padding: 10vh 0 20px
width: 100%

.service-buttons
  justify-content: space-around

.service

flex-basis: 100%
flex-shrink: 0
padding: 20px

.service-icon

height: 40px
width: 40px

.service-title

display: inline
padding-left: 10px

.service-cto-img-wrapper

flex-basis: 100%
margin: 0 auto

.service-cto-img

width: 100%

.service-buttons

align-self: center
flex-basis: 50%

contact.btn-outline

color: $vivid-pink
//change to btn-vivd-pink class

.btn-services

box-shadow: $box-shadow $vivid-pink

@media screen and ( min-width: 768px )

.service-blurb-wrapper
  width: 60%

.service-panel
  flex-direction: row
  justify-content: space-around
  padding: 10vh 0 5vh

.service
  width: 40vw

.service-icon
  border-radius: 10px
  box-shadow: 6px 6px 16px $box-shadow-shade
  height: 65px
  padding: 15px
  width: 65px

.service-title
  display: block
  padding-left: 0

.service-cto-img-wrapper
  flex-basis: 50%
  margin: 0
  max-height: 50%
  max-width: 50%

@media screen and ( min-width: 1024px )

.services-blurb
  text-align: center

.service-icon
  transition: box-shadow .3s ease-in

.service
  border-radius: 10px
  padding: 50px
  transition-duration: .2s
  transition-property: background-color, box-shadow, transform
  transition-timing-function: ease-in
  width: 35vw

  &:hover
    background-color: $pure-white
    box-shadow: 0 5px 20px -10px $box-shadow-shade
    transform: translateY(-2px)

    .service-icon
      box-shadow: 0 0 0 $pure-white

.btn-services
  box-shadow: $box-shadow $vivid-pink

@media screen and ( min-width: 1280px )

.service-blurb-wrapper
  max-width: 600px

.service-panel
  margin: 0 auto
  max-width: 1280px
  padding: 15vh 0 20px

.service
  flex-basis: 25%
  max-width: 320px
  width: 20vw