#hero
  // height: 500px
  padding: 50px 0
  background-image: -webkit-linear-gradient( 90deg, rgb(79,214,167) 0%, rgb(123,1,233) 100%)
  box-shadow: 0px 4px 20px 0px rgba(79, 214, 167, 0.64)
  #HeroVideo
    .content
      margin-top: 100px
      .title
        text-transform: capitalize
        color: #fff
        font-weight: 700
      .paragraph
        color: #fff
        letter-spacing: 2px
        margin-right: 50px
        margin-top: 20px
        font-size: 13px
      .text
        color: #fff
        letter-spacing: 2px
        font-size: 12px
        a
          color: $color1
          margin: 0 5px
          text-transform: capitalize
    .img
      margin-left: 100px
      height: 500px
      position: relative
      .fa-play
        color: $color1
        background-color: #fff
        box-shadow: 0px 4px 100px 10px rgba(0, 0, 0, 1)
        padding: 30px
        border-radius: 100px
        position: absolute
        top: 40%
        left: 30%
        transition: all 0.4s
        transform: scale(1)
      img
        margin-top: 50px
        box-shadow: 0px 3px 70px 0px rgba(0, 0, 0, 1)
        border-radius: 10px
        width: 250px
        height: 400px
      &:hover
        .fa-play
          transform: scale(1.3)
    .actorsAndRate
      margin: 30px 0
      .line-black
        width: 1px
        height: 60px
        margin: 0 10px 0 30px
      .actors
        .act
          transition: all 0.4s
          position: absolute
          float: left
          width: 60px
          height: 60px
          overflow: hidden
          border-radius: 100px
          box-shadow: 0px 3px 70px 0px rgba(0, 0, 0, 0.2)
          &:first-of-type
            margin: 0
          &:nth-child(2)
            margin-left: 20px
          &:nth-child(3)
            margin-left: 40px
          &:nth-child(4)
            margin-left: 60px
          &:hover
            &:first-child
              transform: scale(1.2)
              z-index: 1
            &:nth-child(2)
              transform: scale(1.2)
              z-index: 1
            &:nth-child(3)
              transform: scale(1.2)
              z-index: 1
            &:nth-child(4)
              transform: scale(1.2)
              z-index: 1
          img
            width: 100%
            border-radius: 100px
            box-shadow: 0px 3px 70px 0px rgba(0, 0, 0, 0.2)
        .number
          margin-left: 140px
          margin-top: 10px
          background-color: rgba(250,250,250,0.2)
          border-radius: 5px
          position: relative
          &:before
            position: absolute
            content: ''
            width: 0
            height: 0
            border-top: 8px solid transparent
            border-bottom: 8px solid transparent
            border-right: 8px solid rgba(250,250,250,0.2)
            top: 34%
            left: -8px
            // transform: rotate(45deg)
          p
            color: #fff
            padding: 10px 20px
            text-transform: capitalize
            font-weight: 700
      .rate
        margin-left: 20px
        margin-top: 20px
        span
          border-radius: 100px
          border: 2px solid $color1
          padding: 16px 15px
          font-size: 20px
          font-weight: 700
          color: $color1
        .number
          margin-left: 80px
          margin-top: -35px
          background-color: rgba(250,250,250,0.2)
          border-radius: 5px
          position: relative
          &:before
            position: absolute
            content: ''
            width: 0
            height: 0
            border-top: 8px solid transparent
            border-bottom: 8px solid transparent
            border-right: 8px solid rgba(250,250,250,0.2)
            top: 34%
            left: -8px
          p
            color: #fff
            padding: 10px 20px
            text-transform: capitalize
            font-weight: 700
@media (max-width: 992px)
  #HeroVideo
    .content
      display: flex
      flex-direction: column
      margin: 0 !important
    .actorsAndRate
      display: flex
      flex-direction: column
    .img
      margin: 0 !important
      display: flex
      justify-content: center
      .fa-play
        left: 46% !important
        transition: all 0.4s
        transform: scale(1)
