.pricing-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1000px;
  }
  
  .card {
    flex: 1 1 30%; 
    max-width: 350px;
    margin: 1rem;
  }
  .pricename {
    height: 58px;
border: 4px solid white;
  }

  /* Or position absolute */
  .pricename {
    position: relative;
  }
  
  .pricename-content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .text-center.wow.fadeInUp a.btn.btn-outline-primary {
    background-color: blue;
    border-color: blue;
    color: white; 
  }
  
  .text-center.wow.fadeInUp a.btn.btn-outline-primary:hover {
    background: transparent;
    color: blue;
  }
/* CSS */
.table tbody td:first-child {
  background-color: #f8f9fa; 
}
.table td {
  font-weight: bold;
  font-size: 18px;
}
.table tbody tr td:nth-child(2),
.table tbody tr td:nth-child(3),  
.table tbody tr td:nth-child(4) {
  width: 30%;
}
.table tr {
margin-bottom: 5px;
padding-bottom: 5px;
}

.table td p {
  font-weight: normal;
  text-align: left;
}


  .pricing-plan-content {
    height: 505px;
    }


    
    .team-item{
      border: 1px solid navy;
      height: 650px;
    }

    .team-item a{
      border: 2px solid gold;
    }

  .tooltip {
    display: none;
    position: absolute;
    background: #fff;
    padding: 10px;
    border: 1px solid #ccc;
    /* other styles */
  }
  
  li:hover .tooltip {
    display: block;
  }

.plan-button {
  display: flex;
  align-items: center;
  height: 100px; 
}

.plan-button-button {
  margin: auto; 
}


.plan-button-button{
  border: 4px solid white !important;
}
  
  .xcourses-item::before {
    content: "Now $5!";
    position: absolute;
    /* Other styles */ 
  }

  .xdiscount {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff0000; 
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px; 
  }

  .price {
    line-height: 48px; 
    font-weight: bold;
  }
  .oldprice {
    text-decoration: line-through;
  }
  .newprice {
    position: relative;
    font-size: 26px;
  }
  


  .discount {
    position: absolute;
    top: -50px; 
    left: 50%;
    transform: translateX(-50%);
  
    animation: drop 1s ease-in-out forwards;
  }

  .swirl-in-bl-bck {
	-webkit-animation: swirl-in-bl-bck 0.65s ease-out both;
	        animation: swirl-in-bl-bck 0.65s ease-out both;
}
  
 /* ----------------------------------------------
 * Generated by Animista on 2023-7-16 21:59:2
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation swirl-in-bl-bck
 * ----------------------------------------
 */
@-webkit-keyframes swirl-in-bl-bck {
    0% {
      -webkit-transform: rotate(540deg) scale(5);
              transform: rotate(540deg) scale(5);
      -webkit-transform-origin: 0 100%;
              transform-origin: 0 100%;
      opacity: 0;
    }
    100% {
      -webkit-transform: rotate(0) scale(1);
              transform: rotate(0) scale(1);
      -webkit-transform-origin: 0 100%;
              transform-origin: 0 100%;
      opacity: 1;
    }
  }
  @keyframes swirl-in-bl-bck {
    0% {
      -webkit-transform: rotate(540deg) scale(5);
              transform: rotate(540deg) scale(5);
      -webkit-transform-origin: 0 100%;
              transform-origin: 0 100%;
      opacity: 0;
    }
    100% {
      -webkit-transform: rotate(0) scale(1);
              transform: rotate(0) scale(1);
      -webkit-transform-origin: 0 100%;
              transform-origin: 0 100%;
      opacity: 1;
    }
  }
  


  .team-item {
    --plan-text-color: gold;
    font-weight: bold;
  }
  
  .team-item:hover {
    --plan-text-color: white;
    transition-delay: 0.7s; 
  }
  
  .plan-button-button {
    color: var(--plan-text-color);
  }

  @media (max-width: 767px) {
.pricing-plan{
      margin-bottom:15px !important;
    }
  }
  
  @media (min-width: 768px) {
    .pricing-plan{
        flex: 1;  
    }
  }