$tab-sidebar: 310px;
$tab-md-sidebar: 230px;
.tabing-section{
  .nav-pills {
    display: none;
  }
} 
@media (min-width: 768px) {
  .tabing-section{
    .nav-pills{
      -ms-flex: 0 0 $tab-sidebar;
      flex: 0 0 $tab-sidebar;
      max-width: $tab-sidebar;
      padding-right: 0;
      padding-left: 15px !important;
    }
    .tab-content{
      -ms-flex: 0 0 calc(100% - #{$tab-sidebar});
      flex: 0 0 calc(100% - #{$tab-sidebar});
      max-width: calc(100% - #{$tab-sidebar});
      .collapse{
        .card-body{
          padding: 0 0 0 15px;
        }
      }
      .card {
        border: none;
        .card-header{
          display: none;
        }
        .collapse {
          display: block;
        }
      }
    }
    .nav-pills {
      display: flex;
      flex-flow: column nowrap;
      .nav-item{
        margin-top: 10px;
        &:first-child{
          margin-top: 0;
        }
        .nav-link {
          transition: border-color 0.125s ease-in;
          background-color: $tab-bg;
          @include border-radius(10px);
          padding: 15px;
          font-size: 14px;
          font-family: $font-medium;
          color: $black;
          &:hover{
            background-color: $primary-color;
            color: $white;
          }
          &.active{
            background-color: $primary-color;
            color: $white;
            &:hover{
              background-color: $primary-color;
              color: $white;
            }
          }
        }
      }
    }
  }
 

  

}

@media (max-width: 767px) {
  
  .tabing-section{
    .tab-content{
      .card{
        margin-bottom: 10px;
        .card-header{
          background-color: $tab-bg;
          @include border-radius(10px);
          padding: 0;
          font-size: 14px;
          font-family: $font-medium;
          color: $black;
          border: 0;
          a{
            display: block;
            color: $black;
            font-size: 14px;
            position: relative;
            padding: 15px 40px 15px 15px;
            &:after{
              content: "";
              width: 15px;
              height: 8.76px;
              background: url(../img/icons/down-arrow.svg) no-repeat;
              background-size: 15px 8.76px;
              display: inline-block;
              transform: rotate(180deg);
              position: absolute;
              top: 19px;
              right: 15px;
            }
            &.collapsed{
              &:after{
                transform: rotate(0deg);
              }
            }
          }
        }
        .card-body{
          padding: 15px 0;
          text-align: center !important;
          .section-heading{
            text-align: center !important;
          }
        }
      }
    }
    .tab-pane {
      display: block !important;
      opacity: 1;
    }
    .tab-pane.fade:not(.show) {
      opacity: 1 !important;
    }
  }
}

@media (min-width: 768px) and (max-width: 992px){
  .tabing-section{
    .nav-pills{
      -ms-flex: 0 0 $tab-md-sidebar;
      flex: 0 0 $tab-md-sidebar;
      max-width: $tab-md-sidebar;
    }
    .tab-content{
      -ms-flex: 0 0 calc(100% - #{$tab-md-sidebar});
      flex: 0 0 calc(100% - #{$tab-md-sidebar});
      max-width: calc(100% - #{$tab-md-sidebar});
    }
  }
}