$tabWidth: 20%
.bl-service
  .gray
    background-color: $gray-color
    padding: 100px 0
    .service-row
      height: 360px
      position: relative
      margin-left: -5px
      margin-right: -5px
      .item
        @extend .ease-animated
        width: $tabWidth
        height: 100%
        position: absolute
        padding: 0 15px
        bottom: 50px
        @for $i from 1 through 5
          &:nth-child(#{$i})
            left: calc(#{$tabWidth} * #{$i - 1})
        .content
          background-color: white
          display: flex
          flex-direction: column
          height: 100%
          border-radius: 30px
          overflow: hidden
          position: relative
          cursor: pointer
          -webkit-box-shadow: 0px 65px 20px -8px rgba(0, 0, 0, 0.27)
          -moz-box-shadow: 0px 65px 20px -8px rgba(0, 0, 0, 0.27)
          box-shadow: 0px 65px 20px -8px rgba(0, 0, 0, 0.27)
          .image
            flex: 1
            text-align: center
            padding: 15px
            padding-top: 30px
            max-width: 75%
            margin: auto
            width: 75%
            .image-svg
              width: 100%
              height: 100%
              margin: auto
              position: relative
              img
                width: 100%
                height: 100%
                position: absolute
                object-fit: contain
                left: 0
          .title
            display: inline-block
            font-size: 25px
            padding: 50px
            z-index: 0
            position: relative
            padding-left: 0px!important
            &:before
              @extend .ease-animated
              content: ''
              position: absolute
              width: 290px
              height: 233px
              left: -63px
              bottom: -85px
              border-radius: 50%
              background-color: $primary-color
              z-index: -1
            div:first-child
              font-size: 50px
              font-weight: bold
              padding: 0 7px
        &.fake-active
          bottom: 0
          padding-left: 5px
          padding-right: 5px
          .title:before
            width: 0
            height: 0
            left: 0
            bottom: 0
        &:hover,&.active
          bottom: 50px
          .title:before
            width: 290px
            height: 233px
            left: -63px
            bottom: -85px
  .service-tabs
    background-color: $primary-color
    .item
      padding: 50px 0
      position: relative
      &:before
        content: ''
        position: absolute
        bottom: 100%
        width: 0
        height: 0
        border-style: solid
        border-width: 76px 0 0 76px
        border-color: transparent transparent transparent $primary-color
      @for $i from 1 through 5
        &:nth-child(#{$i})
          &:before
            left: calc((#{$tabWidth} + 15px) * #{$i - 1})
      .title
        margin-bottom: 35px
      &:not(.active)
        display: none
.service-detail
  .image-svg
    max-height: 155px
    svg
      max-height: 100%
  .title
    font-size: 25px
    margin-left: -42px
    div:first-child
      font-size: 50px
      font-weight: bold
      padding: 0 7px