.card {
    perspective: 150rem;
    -moz-perspective: 150rem;
    position: relative;
    height: 56rem;
  line-height: 1.7; 
  max-width: 320px;
  width: 100%;
}

.card__side {
    height: 56rem;
    transition: all 0.8s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    backface-visibility: hidden;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15); }
      .card__side--front {
        background-color: white; }
      .card__side--back {
        transform: rotateY(180deg); }
        .card__side--back-1 {
          background-image: linear-gradient(to right bottom, rgba(255, 185, 0, 0.8), rgba(255, 119, 48, 0.75)), url(../Assets/note.jpg);
          background-size: cover; }
        .card__side--back-2 {
          background-image: linear-gradient(to right, rgba(52, 158, 140, 0.2), rgba(17, 119, 102, 0.7)), url(../Assets/map_work.jpg);
          background-size: cover;
          background-position: center; }
        .card__side--back-3 {
          background-image: linear-gradient(to right bottom, rgba(41, 152, 255, 0.2), rgba(86, 67, 250, 0.75)), url(../Assets/truck_afar.jpg);
          background-size: cover; }
    .card:hover .card__side--front {
      transform: rotateY(-180deg); }
    .card:hover .card__side--back {
      transform: rotateY(0); }
    .card__picture {
      height: 23rem;
      background-blend-mode: color;
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
      clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
      border-top-left-radius: 3px;
      border-top-right-radius: 3px; }
      .card__picture-1 {
        background-image: linear-gradient(to right bottom, rgba(255, 185, 0, 0.8), rgba(255, 119, 48, 0.75)), url(../Assets/chess.jpg);
        background-size: cover; }
      .card__picture-2 {
        background-image: linear-gradient(to right, rgba(51, 54, 59, 0.3), rgba(120, 224, 143, 0.5)), url(../Assets/handshake.jpeg);
        background-size: cover; }
      .card__picture-3 {
        background-image: linear-gradient(to right bottom, rgba(41, 152, 255, 0.8), rgba(86, 67, 250, 0.75)), url(../Assets/truck.jpg);
        background-size: cover;
        background-position: center; }
    .card__heading {
      font-size: 2.8rem;
      font-weight: 300;
      text-transform: uppercase;
      text-align: right;
      color: #eaeaea;
      position: absolute;
      top: 12rem;
      right: 2rem;
      margin-top: 2.5rem;
      z-index: 5000; }
    .card__heading-span {
      padding: 1.2rem 1.5rem;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone; }
      .card__heading-span--1 {
        background-image: linear-gradient(to right bottom, rgba(255, 185, 0, 0.95), rgba(255, 119, 48, 0.95)); }
      .card__heading-span--2 {
        background-image: linear-gradient(to right bottom, rgba(51, 54, 59, 0.95), rgba(120, 224, 143, 0.95)); }
      .card__heading-span--3 {
        background-image: linear-gradient(to right bottom, rgba(41, 152, 255, 0.95), rgba(86, 67, 250, 0.95)); }
    .card__details {
      padding: 1rem; }
      .card__details ul {
        list-style: none;
        width: 80%;
        margin: 0 auto; }
        .card__details ul li {
          text-align: center;
          font-size: 1.6rem;
          padding: 1rem;
          color: #000; }
          .card__details ul li:not(:last-child) {
            border-bottom: 1px solid rgba(0, 0, 0, 0.15); }
    .card__cta {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      /* width: 90%; */
      width: 100%;
      text-align: center; }
    .card__offer-box {
      color: #eaeaea;
      margin-bottom: 8rem; }
    .card__offer-knowmore {
      font-size: 1.4rem;
      text-transform: uppercase;
      margin-bottom: 1rem; }
    .card__offer-rfq {
      font-size: 4rem;
      font-weight: 100; }

.prices{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-price{
  /* display: inline-block; */
  margin-bottom: 1.4rem;
  font-size: 2.1rem;
  font-weight: 500;
  color: #eaeaea;
  padding: 1.6rem 1.4rem;
  /* border: 1px solid orangered; */
  border-radius: 6px;
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.05);
}

.price-tax{
  font-size: 1.2rem;
  font-weight: 400;
}

/* // BACK STYLING */
.card__cta{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card__price-box{
  text-align: center;
  margin-bottom: 8rem;
  color: #fff;
}

.card__price-only{
  font-size: 1.4rem;
  text-transform: uppercase;
}

.card__price-value{
  font-size: 4.8rem;
  font-weight: 300;
}

.cta-btns{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-btn,
.cta-btn:link,
.cta-btn:active{
  padding: 1.2rem 2.4rem;
  border-radius: 6px;
  font-weight: 400;
  text-transform: uppercase;
}

.cta-btn--white{
  background-color: #fff;
  color: #343A40;
  box-shadow: 0 1rem 1.6rem rgba(255, 255, 255, 0.15);
}

.cta-btn--reverse{
  color: rgba(255, 255, 255, 0.847);
  font-size: 1.2rem;
}


.card-flex-right{
  display: flex;
  justify-content: flex-end;
}

.card-flex-left{
  display: flex;
  justify-content: flex-start;
}