.compare-content {
  .compare-content__wrapper {
    .narrow-container-width {
      max-width:85.3rem;
      margin:0 auto;
      .compare-content__header {
        .compare-content__heading {
          margin-top:0;
          margin-bottom:5.62rem;
          @media(max-width:991px){
            margin-bottom:2rem;
          }
        }
      }
      .compare-inner-wrapper {
        padding-bottom:25px;
        .tab-wrapper {
          max-width:245px;
          @media(max-width:991px){
            margin:0 auto 14rem;
          }
          @media(max-width:749px){
            margin:0 auto 12rem;
          }
          .tab-header {
            color: #304E55;
            text-align: center;
            font-family: 'Ubuntu';
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            margin-bottom:10px;
            
          }
          .tab-list {
            border-radius: 7px;
            background: #FFF;
            box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16) inset;
            padding:5px;
            margin:0; list-style-type:none;
            display:flex; align-items:center;
            gap:0; position:relative;
            .tab-item {
              flex:0 0 50%;
              display:flex; align-items:center; justify-content:center;
              padding:10px 20px;
              color: #304E55;
              text-align: center;
              font-family: 'Ubuntu';
              font-size: 12px;
              font-style: normal;
              font-weight: 500;
              line-height: 14px;
              letter-spacing: 0.55px;
              text-transform: uppercase;
              /*background:#fff;*/ border-radius: 5px;
              position:relative; z-index:1;
              cursor:pointer; transition:all 0.3s;
              &.active {
                color:#fff;
                /*background: #85ACA6;*/
              }
            }
            
            .active-tab-item {
              position:absolute;
              top:5px; bottom:5px;
              left:5px; width:calc(50% - 5px);
              background-color:#85ACA6;
              border-radius:5px;
              z-index:0; transition:all 0.2s;
            }
            .tab-item.active + .active-tab-item { left:50%; }
          }
        }
        .tab-detail-wrapper {
          margin-top:25px;
          .tab-detail-inner {
            border-radius: 20px;
            background: #6D98BA;
            /*box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.16);*/
            padding:0px 45px;
            @media(max-width:991px){ padding:0 30px; }
            @media(max-width:749px){ padding:0 15px; }
            @media(max-width:420px){ padding:0 10px; }
            .content-wrapper{
              position:relative;
              &:before {
                content:'';
                width:26%; position:absolute;
                bottom:100%; height:81px;
                left:50%; transform:translateX(-50%);
                background-color:#fff; border-radius:7px 7px 0 0;
                box-shadow: 0px -2px 2px 0px rgba(0, 0, 0, 0.16);
                @media(max-width:991px){
                  height:61px;
                }
                @media(max-width:749px){
                  width:30%;
                }
                @media(max-width:600px){
                  width:38%;
                }
              }
              &:after {
                content:'';
                width:26%; position:absolute;
                top:100%; height:22px;
                left:50%; transform:translateX(-50%);
                background-color:#fff; border-radius:0 0 7px 7px;
                box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.16);
                @media(max-width:749px){
                  width:30%;
                }
                @media(max-width:600px){
                  width:38%;
                }
              }
              .tab-image {
                position:absolute;
                bottom:calc(100% + 14px);
                left:50%; transform:translateX(-50%);
                font-size:0; line-height:0;
                @media(max-width:991px){
                  bottom:calc(100% + 10px);
                }
                .img-fluid {
                  max-width:125px; width:100%;
                  @media(max-width:991px) {
                    max-width:100px;
                  }
                  @media(max-width:749px) {
                    max-width:85px;
                  }
                }
              }
              .tab-details {
                .detail-table {
                  td *, th * {
                    opacity:0; transition:all 0.3s;
                  }
                }
                &.active {
                  .detail-table {
                    td *, th * {
                      opacity:1;
                    }
                  }
                }
              }
              .detail-table {
                width:100%; padding:0; border:0 none;
                margin:0; border-collapse: collapse;
                thead tr {
                  .head {
                    color: #FFF;
                    text-align: center;
                    font-family: 'Ubuntu';
                    font-size: 18px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 21px;
                    padding:11px 10px; width: 37%;
                    border-bottom:1px solid #fff;
                    @media(max-width:749px){
                      font-size: 14px; line-height:16px;
                      padding-left:10px; padding-right:10px;
                    }
                    &.first, &.third {
                      @media(max-width:749px){
                        width:35%;
                      }
                      @media(max-width:600px){
                        width:31%;
                      }
                    }
                    &.third {
                      @media(min-width:750px){
                        text-align:right;
                        padding-right:30px;
                      }
                    }
                    
                    &.second {
                      width:26%;
                      color:#304E55;
                      background-color:#fff;
                      box-shadow:0px 4px 4px 2px rgba(0, 0, 0, 0.16);
                      @media(max-width:749px){
                        width:30%;
                      }
                      @media(max-width:600px){
                        width:38%;
                      }
                    }
                  }
                }
                tbody tr {
                  .detail {
                    border-bottom:1px solid #fff;
                    padding: 12px 10px;
                    color: #FFF;
                    font-family: "CommutersSans";
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 15px;
                    text-transform: capitalize;
                    @media(max-width:749px) {
                      padding:10px 5px; font-size: 10px; line-height:13px;
                      > svg { width:20px; height:20px; }
                    }
                    &.first { padding-left:0 !important; }
                    &.second {
                      background-color:#fff;
                      box-shadow:0px 4px 4px 2px rgba(0, 0, 0, 0.16);
                      > span { line-height:0; display:inline-block; }
                    }
                    &.third {
                      > span { line-height:0; display:inline-block; }
                      @media(min-width:750px){
                        text-align:right;
                        > span { margin-right:70px; }
                      }
                    }
                  }
                  &:last-child {
                    .detail { border-bottom:0 none; padding-bottom:30px; }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}