.contact__wrapper

display: flex
width: 100%
background-color: $pure-white
padding: 5rem 0
flex-direction: column

.contact–left

width: auto
padding: 0 1rem
padding-bottom: 5rem

.contact–right

//width: 100%
padding: 0 1rem

.form-instruction

padding-bottom: $font-size
padding-top: $lg-font-size

.contact-form

width: 100%
display: block

form
  background-color: $white
  border: solid 1px rgba($env-primary, .2)
  border-radius: 4px
  padding: 2rem
label
  font-size: $font-size * .8
  color: $env-secondary

.google-map

width: 100%

//padding: 0 5rem
//filter: sepia(.3)
iframe
  border-radius: 4px
  width: 100%
  height: 40vh
  border: solid 1px rgba($env-primary, .2)

.contact-details

display: flex
flex-direction: column
padding: 4rem 0
p
  padding-bottom: 2rem
.fas
  color: $env-primary
a
  color: $env-secondary
  transition: all .2s ease-in-out
  //text-decoration: none
  &:hover
    color: $env-primary
.social-media-link
  font-size: $lg-font-size
  color: $env-secondary
  padding-right: $lg-font-size

.form-element

width: 100%
height: 40px
border-radius: 4px
//font-size: 1rem
font-weight: $medium-font
margin: 2vh 0
border: none
background-color: $pure-white
padding: .1rem 0 .4rem 0
text-indent: 1rem

&::placeholder
  color: rgba($env-primary, .3)

.btn-contact

background: $env-primary
color: #ffffff
cursor: pointer
font-size: $font-size * .8
padding: 1rem 2rem
border: 0
transition: all .3s
border-radius: 4px
width: auto
position: relative

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

.contact__wrapper
  display: flex
  flex-direction: row
  width: 100%
  padding: 5rem 0

.contact--left
  width: 40%
  padding: 0 5rem

.contact--right
  width: 60%
  padding: 0 5rem

.contact-form
  width: 100%
  display: block

  form
    border: solid 1px rgba($env-primary, .2)
    border-radius: 4px
    padding: 2rem
  label
    font-size: $font-size * .8
    color: $black

.google-map
  //grid-area: googleMap
  width: 100%

  //padding: 0 5rem
  //filter: sepia(.3)
  iframe
    width: 100%
    height: 40vh
    border: solid 1px rgba($env-primary, .2)

.contact-details
  display: flex
  flex-direction: column
  padding: 4rem 0
  p
    padding-bottom: 2rem
  .fas
    color: $env-primary
  a
    transition: all .2s ease-in-out
    text-decoration: none
    &:hover
      color: $env-primary
  .social-media-link
    font-size: $font-size * 2

.form-element
  width: 100%
  height: 40px
  border-radius: 4px
  //font-size: 1rem
  font-weight: $medium-font
  margin: 2vh 0
  border: none
  background-color: $pure-white
  padding: .1rem 0 .4rem 0
  text-indent: 1rem

  &::placeholder
    color: rgba($env-primary, .3)

.btn-contact
  background: $env-primary
  color: #ffffff
  cursor: pointer
  font-size: $font-size * .8
  padding: 1rem 2rem
  border: 0
  transition: all .3s
  border-radius: 4px
  width: auto
  position: relative

  &::after
    content: "\f054"
    font-family: "Font Awesome 5 Free"
    font-weight: 900
    position: absolute
    //left: 85%
    top: 28%
    right: 5%
    bottom: 0
    opacity: 0

  &:hover
    background: rgba($env-primary, .9)
    transition: all .5s
    box-shadow: 0px 6px 15px rgba($env-primary, .3)
    padding: 1rem 3rem 1rem 2.1rem

    &::after
      opacity: 1
      transition: all 0.3s