.tab-content{
  display: none;
  &.current{
    display: block;
  }
}

ul.tabs{
      margin: 0px;
      padding: 0px;
      list-style: none;
    }
    ul.tabs li{
      // background: $theme-silver;
      // line-height: 60px;
      // color: $theme-primary;
      // letter-spacing: 0.5px;
      // text-transform: capitalize;
      font-size: 20px;
     position:relative;
      padding:12px 15px 8px 15px;
      // border-bottom:3px solid transparent;
      display: inline-block;
      color:$theme-secondary;
      font-weight: 500;
      cursor: pointer;
      @media (max-width: 768px) {
        // padding: 4px;
      }
      &:before{
        position: absolute;
        content: '';
        width: calc(100% - 30px);
        margin:auto;
        left: 0;
        right: 0;
        bottom:4px;
        transition: 0.5s;
        height: 0px;
        background:$theme-primary;
      }
      &:first-child{
        &:after{
          display: none;
        }
      }
      &:after{
        position: absolute;
        content: '';
       width: 2.5px;
    margin: auto;
    left: -3px;
    display: table;
    top: 17px;
    transition: 0.5s;
    max-height: 18px;
    height: calc(100% - 30px);
        background:$theme-secondary; 
      }
      &:hover{
        &:before{

          height: 2.5px;
        }
      }
      
    }

    ul.tabs li.current{
      // color: $theme-primary;
      // border-bottom:3px solid $theme-primary;
      &:before{
        height: 2.5px;
      }

      // border: 1px solid $theme-primary;
      // border-left: 30px solid transparent;
      // height: 0px;
      // background: $theme-lg-grey;

    }

    .tab-content{
      display: none;
      // background: $theme-sp-blue;
      /* padding: 20px; */
    }

    .tab-content.current{
      display: inherit;
    }