:root {
  --tbi-colpal-1: #134b86;
  --tbi-colpal-2: #00a280;
}
#tbi-wrapper {
  font-size: 14px;
  .text-small {
    font-size: 12px;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .fw-normal {
    font-weight: normal;
  }
  .fw-700,
  .fw700 {
    font-weight: 700;
  }
  .strick {
    text-decoration: line-through;
  }
  ul.lns {
    margin: 0;
    padding: 0;
    list-style: none;
    padding-inline-start: 0;
    &.ideal-list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 5px;
      li {
        background-color: var(--tbi-colpal-1);
        color: #f5f5f5;
        font-size: 10px;
        padding: 3px 6px;
        border-radius: 5px;
        &:hover {
          background-color: var(--tbi-colpal-2);
        }
      }
    }
  }
  width: 100%;
  #tbi-containter {
    width: 100%;
    #tbi-cards {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      @media (max-width: 991px) {
        grid-template-columns: repeat(2, 1fr);
      }
      @media (max-width: 540px) {
        grid-template-columns: 1fr;
        gap: 40px 0;
      }
      .card {
        display: flex;
        flex-direction: column;
        border-radius: 10px 10px;
        overflow: hidden;
        transition: 0.3s ease-in-out all;
        box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.3);

        &:hover {
          transform: translateY(-5px);
        }

        .row-1,
        .row-2,
        .row-3,
        .row-4,
        .row-5,
        .row-6 {
          padding: 0 20px;
        }
        &:nth-child(1) {
          .indicator {
            background: linear-gradient(
              to right,
              var(--tbi-colpal-2) 0%-20%,
              var(--tbi-colpal-1) 20%-30%,
              #f5f5f5 30%-100%
            );
          }
        }
        &:nth-child(2) {
          .indicator {
            background: linear-gradient(
              to right,
              var(--tbi-colpal-2) 0%-30%,
              var(--tbi-colpal-1) 30%-40%,
              #f5f5f5 40%-100%
            );
          }
        }
        &:nth-child(3) {
          .indicator {
            background: linear-gradient(
              to right,
              var(--tbi-colpal-2) 0%-40%,
              var(--tbi-colpal-1) 40%-50%,
              #f5f5f5 50%-100%
            );
          }
        }
        &:nth-child(4) {
          .indicator {
            background: linear-gradient(
              to right,
              var(--tbi-colpal-2) 0%-50%,
              var(--tbi-colpal-1) 50%-60%,
              rgba(255, 255, 255, 0.8) 60%-100%
            );
          }
        }
        &:nth-child(5) {
          .indicator {
            background: linear-gradient(
              to right,
              var(--tbi-colpal-2) 0%-60%,
              var(--tbi-colpal-1) 60%-70%,
              rgba(255, 255, 255, 0.8) 70%-100%
            );
          }
        }
        &:nth-child(6) {
          .indicator {
            background: linear-gradient(
              to right,
              var(--tbi-colpal-2) 0%-70%,
              var(--tbi-colpal-1) 70%-80%,
              rgba(255, 255, 255, 0.8) 80%-100%
            );
          }
        }
        &:nth-child(7) {
          .indicator {
            background: linear-gradient(
              to right,
              var(--tbi-colpal-2) 0%-80%,
              var(--tbi-colpal-1) 80%-90%,
              rgba(255, 255, 255, 0.8) 90%-100%
            );
          }
        }
        &:nth-child(8) {
          .indicator {
            background: linear-gradient(
              to right,
              var(--tbi-colpal-2) 0%-50%,
              var(--tbi-colpal-1) 50%-100%
            );
          }
        }

        .row-1 {
          position: relative;
          height: 60px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          background: linear-gradient(
            to right,
            var(--tbi-colpal-2),
            var(--tbi-colpal-1)
          );
          h3 {
            color: #f5f5f5;
            font-size: 20px;
            margin: 0;
          }
          &:after {
            content: "";
            position: absolute;
            top: 5px;
            right: 5px;
            width: 75%;
            height: 100%;
            opacity: 0.1;
            background-image: -webkit-radial-gradient(
                circle,
                #dddddd88 50%,
                transparent 50%
              ),
              -webkit-radial-gradient(circle, transparent 50%, rgba(0, 0, 0, 0)
                    50%);
            background-size: 10px 10px;
          }
        }
        .indicator {
          margin-top: 20px;
          margin-bottom: 20px;
          position: relative;
          left: 50%;
          transform: translateX(-50%);
          width: calc(100% - 20px);
          height: 10px;
          border-radius: 5px;
        }
        .row-2 {
          width: 100%;
          .speed {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            .label {
              font-size: 12px;
              font-weight: 700;
            }
            .tbi-kecepatan {
              .tbi-kecepatan-val {
                color: var(--tbi-colpal-1);
                font-size: 28px;
                font-weight: 700;
                line-height: 1;
              }
              .sub {
                font-size: 10px;
              }
            }
          }
        }
        .row-3 {
          margin-top: 10px;
          margin-bottom: 10px;
          padding-top: 20px;
          padding-bottom: 20px;
          border-top: 2px solid rgba(0, 0, 0, 0.1);
          border-bottom: 2px solid rgba(0, 0, 0, 0.1);
          display: flex;
          flex-direction: column;
          row-gap: 10px;
        }
        .row-4 {
          padding-top: 10px;
          padding-bottom: 10px;
          width: 100%;
          margin: 10px 0;
          border-bottom: 2px solid rgba(0, 0, 0, 0.1);
          ul {
            li {
              column-gap: 10px;
              display: flex;
              flex-direction: row;
            }
          }
        }
        .row-5 {
          width: 100%;
          .item {
            display: flex;
            flex-direction: row;
            column-gap: 5px;
            &.harga {
              font-size: 20px;
              color: var(--tbi-colpal-1);
              @media (max-width: 991px) {
                font-size: 18px;
              }
            }
          }
        }

        .row-6 {
          margin-top: 10px;
          margin-bottom: 10px;
          padding-top: 20px;
          padding-bottom: 20px;
          a.tbi-btn-whatsapp {
            width: max-content;
            background-color: var(--tbi-colpal-2);
            color: #f5f5f5;
            padding: 5px 10px;
            text-decoration: none;
            border-radius: 5px;
            align-items: center;
            justify-content: center;
            display: flex;
            line-height: 1;
            box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.3);
            transition: 0.3s linear all;

            &:hover {
              transform: translateY(-3px);
            }

            box-sizing: border-box;
            i {
              margin-right: 5px;
              box-sizing: border-box;
              width: 24px;
              display: block;
              fill: #f5f5f5;
            }
          }
        }
      }
    }
  }
}