@import "variables";
@import "mixins";

.component-packages-list {
  padding: $space-lg 0;
  .row-head {
    text-align: center;
    max-width: 830px;
    margin: 0 auto $space-md;
    @include bp("md") {
      text-align: left;
    }
    h2 {
      color: $col-sec;
    }
    p {
      margin-top: $space-xs;
      color: $gray700;
    }
  }
  .row-btn {
    text-align: center;
    a {
      @include bp("md") {
        width: 100%;
      }
    }
  }
  h3.vbclistheadt {
    display: none;
  }
  .vbo-pkglist-pkg {
    background-color: $col-sec;
    border-radius: $border-radius;
    margin-bottom: $space-md;
    box-shadow: 0px 0px 0px 0px rgba(18, 38, 13, 0.15), 0px 9px 19px 0px rgba(18, 38, 13, 0.15), 0px 34px 34px 0px rgba(18, 38, 13, 0.13), 0px 77px 46px 0px rgba(18, 38, 13, 0.08),
      0px 137px 55px 0px rgba(18, 38, 13, 0.02), 0px 213px 60px 0px rgba(18, 38, 13, 0);
    border: none;
    align-items: center;
    @include bp("xl") {
      flex-wrap: wrap;
    }
    .vbo-pkglist-pkg-bone {
      width: auto;
      @include bp("xl") {
        flex-basis: 100%;
      }
      .vbo-pkglist-pkg-img {
        img {
          border-radius: $border-radius 0 0 $border-radius;
          object-fit: cover;
          aspect-ratio: 1/1;
          max-height: 320px;
          @include bp("xl") {
            border-radius: $border-radius $border-radius 0 0;
          }
        }
      }
    }
    .vbo-pkglist-pkg-btwo {
      padding: 0 $space-md;
      justify-content: center;
      border-right-width: 1px;
      margin: $space-xs 0;
      @include bp("md") {
        padding: 0 4rem;
      }
      .vbo-pkglist-pkg-name {
        h4 {
          color: $white;
          font-size: $fs-h3;
          margin-bottom: $space-xs;
          font-weight: $fw-bold;
        }
      }
      .vbo-pkglist-pkg-shortdescr {
        color: $white;
      }
      .vbo-pkglist-pkg-dates-cont {
        margin-top: $space-md;
        @include bp("md") {
          margin-top: $space-xs;
        }
        .vbo-pkglist-pkg-dates,
        .vbo-pkgdet-dates {
          margin-top: 0;
          padding: 0.8rem 3.2rem;
          background: $col-bg;
          font-size: $fs-p;
          border-radius: 100px;
          color: $col-sec;
          .fa-clock:before {
            content: url(theme-url("/assets/icons/time.svg"));
            display: block;
            transform: translate(0px, 4px);
          }
        }
      }
    }
    .vbo-pkglist-pkg-bthree {
      border-left: none;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      padding: 0;
      @include bp("xl") {
        flex-basis: 30%;
      }
      @include bp("md") {
        flex-basis: 100%;
        text-align: left;
      }
      .vbo-pkglist-pkg-cost {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        margin-bottom: 1rem;
        .vbo-pkglist-pkg-price,
        .vbo-pkglist-pkg-priceper {
          color: $white;
        }
        .vbo-pkglist-pkg-price {
          font-size: $fs-h3;
          margin-right: 1rem;
          font-family: $font-family-headings;
        }
        .vbo-pkglist-pkg-priceper {
        }
      }
      .vbo-pkglist-pkg-details {
        order: 100;
        @include bp("xl") {
          width: calc(100% - 8rem);
          margin-bottom: $space-xs;
        }
      }
      .vbo-pkglist-pkg-details a {
        @include button;
        margin: $space-xs 0 0;
        @include bp("lg") {
          width: 100%;
        }
      }
      .vbo-pkglist-pkg-benefits {
        padding: 5px 3rem;
        margin: 0 auto;
        font-size: $fs-p;
        border: none;
        border-radius: 100px;
        background-color: #d2d4bc;
        text-align: center;
        width: max-content;
      }
    }
  }
  .pagination {
    display: none;
  }
}
