/*  Last full read through 28/12/2020
 *
 *##############################################
 *# clinician landing  /_sass/env/clinician.sass
 *##############################################
 *
 */

.hero
  height: 65vh
  height: calc(var(--vh, 1vh) * 65)

.hero__overlay
  background-color: $env-primary

.hero__strap
  align-self: flex-end
  background-color: $env-primary
  color: $white
  padding-bottom: 5.5vh
  width: 100vw

.hero__follow
  background-color: $env-primary
  top: 59.5vh

.segment__keywords
  align-items: center
  display: flex
  flex-direction: column
  height: 100%
  justify-content: center

  & > *
    padding: 5rem 0
    width: 50%

// This is basically a button and should to be centralised
.action__call
  bottom: 0
  font-size: $font-size * .8
  margin: -100px auto
  padding: 2rem
  position: relative
  text-decoration: none
  transition: .2s ease

  &:before
    background-color: rgba($env-secondary, .2)
    border-radius: 3rem
    content: ''
    display: block
    height: 6rem
    left: 0
    position: absolute
    top: 0
    transition: .2s ease
    width: 6rem

  span
    color: $env-primary
    font-weight: 900
    position: relative

  svg
    fill: none
    margin-left: 10px
    position: relative
    stroke: $env-primary
    stroke-linecap: round
    stroke-linejoin: round
    stroke-width: 2
    top: 0
    transform: translateX(-10px)
    transition: .2s ease

  &:hover
    &::before
      background-color: rgba($env-secondary, 1)
      width: 100%

    svg
      stroke: $white
      transform: translateX(0)

    span
      color: $white