.pricing-table-wrapper {
     background: #fff;
     border-radius: 24px;
     overflow: hidden;

     box-shadow: 0 15px 40px rgba(0, 0, 0, .06);
 }

 .pricing-table {
     margin: 0;
 }

 .pricing-table thead {
     background: var(--gradient-main);
 }

 .pricing-table thead th {
     color: var(--primary);
     padding: 20px;
     font-weight: 600;
     border: none;
     background: #dae7f6;
 }

 .pricing-table tbody td {
     padding: 20px;
     vertical-align: middle;
 }

 .pricing-table tbody tr {
     transition: .3s;
 }

 .pricing-table tbody tr:hover {
     background: rgba(23, 144, 168, .03);
 }

 .pricing-table h6 {
     margin-bottom: 8px;
     font-weight: 600;
     color: var(--primary);
 }

 .our-price {
     color: #198754;
     font-weight: 700;
     font-size: 18px;
 }

 .level-badge {
     display: inline-block;
     padding: 5px 12px;
     border-radius: 50px;
     font-size: 12px;
     font-weight: 600;
 }

 .foundational {
     background: #e3fcef;
     color: #198754;
 }

 .associate {
     background: #e8f4ff;
     color: #0d6efd;
 }

 .professional {
     background: #fff4e5;
     color: #fd7e14;
 }

 .specialty {
     background: #f3e8ff;
     color: #7c3aed;
 }

 .btn-voucher {
     display: inline-block;
     padding: 10px 20px;

     background: var(--gradient-main);
     color: #fff;

     text-decoration: none;
     border-radius: 10px;

     font-weight: 600;
     transition: .3s;
 }

 .btn-voucher:hover {
     color: #fff;
     transform: translateY(-2px);
 }




 .learn-box-premium {
     display: flex;
     /* align-items: center; */
     gap: 15px;
     padding: 22px;
     background: #fcfcfc;
     border: 1px solid #d3d5d8;
     border-radius: 10px;
     height: 100%;
     transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
 }

 .learn-box-premium:hover {
     /* transform: translateY(-4px); */
     background: #fff;
     box-shadow: 0 12px 25px rgba(0, 0, 0, 0.05);
     border-color: rgba(35, 98, 104, 1);
 }

 .learn-icon {
     font-size: 20px;
     color: var(--primary);
     /* margin-top: 2px; */
 }

 .learn-box-premium h6 {
     font-family: 'Montserrat', sans-serif;
     font-weight: 800;
     font-size: 0.98rem;
     color: var(--dark-text);
     margin-bottom: 6px;
 }

 .certification-card {
     background: var(--white);
     border-radius: 24px;
     overflow: hidden;
     /* box-shadow: 0 15px 40px rgba(0, 0, 0, .08); */
     border: 1px solid rgb(79 103 116 / 20%);
     transition: .35s ease;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     justify-content: start;
 }

 .certification-card:hover {
     box-shadow: 0 25px 50px rgba(23, 144, 168, .15);
 }

 .certification-header {
     position: relative;
     /* background: var(--gradient-main); */
     /* min-height: 180px; */
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 10px 20px;
     background: rgb(245, 245, 242);
     border-bottom: 3px solid var(--primary);
     overflow: hidden;
 }

 .certification-card .certification-header img {
     max-width: 160px;
 }

 .certification-body {
     padding: 25px 25px 0 25px;
 }

 .card-actions {
     padding: 0px 0px 25px 0px;
 }

 .certification-body h4 {
     color: var(--primary-dark);
     font-size: 22px;
     font-weight: 700;
     margin-bottom: 25px;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     display: -webkit-box;
 }

 .certification-list {
     list-style: none;
     padding: 0;
     margin: 0 0 30px;
 }

 .certification-list li {
     display: flex;
     gap: 6px;
     font-size: 14px;
     margin-bottom: 8px;
     color: var(--gray-text);
     font-weight: 500;
 }

 .certification-list i {
     color: var(--primary);
     margin-top: 4px;
 }

 .pricing-box {
     display: flex;
     justify-content: space-between;
     margin-bottom: 20px;
     color: var(--gray-text);
 }

 .offer-price span {
     font-size: 18px;
     color: var(--primary-dark);
     font-weight: 800;
 }

 .offer-price span:first-child {
     font-size: 18px;
     color: var(--gray-text);
     font-weight: 800;
 }

 .actual-price span {
     font-size: 16px;
     color: rgb(172, 172, 172);
     text-decoration: line-through;
     font-weight: 500;
 }

 .card-actions {
     display: flex;
     gap: 12px;
     justify-content: space-between;
 }

 .btn-buy,
 .btn-details {
     flex: 1;
     text-align: center;
     text-decoration: none;
     padding: 10px;
     border-radius: 12px;
     font-weight: 700;
     transition: .3s;
 }

 .btn-buy {
     background: var(--gradient-main);
     color: #fff;
     border: transparent;
 }



 .btn-details {
     border: 2px solid var(--primary);
     color: var(--primary);
 }

 .btn-details:hover {
     background: var(--gradient-main);
     color: #fff;
 }

 @media(max-width:576px) {

     .card-actions {
         flex-direction: column;
     }

     .pricing-box {
         flex-direction: column;
         gap: 15px;
         text-align: center;
     }
 }

 .voucher-hero-right {
     background-color: white;
     border-radius: 30px 8px;
     max-width: 200px;
     opacity: 0.4;
 }

 /* Remove all default popover styling */
 [popover] {
     margin: auto;
     padding: 0;
     border: none;
     outline: none;
     background: transparent;
     max-width: 500px;
     width: auto;
     height: auto;
     overflow: visible;
     box-shadow: none;
 }

 /* Optional custom backdrop */
 [popover]::backdrop {
     background: rgba(0, 0, 0, .6);
     backdrop-filter: blur(4px);
 }



 button.close-voucher-button {
     background: transparent;
     border: 0;
     cursor: pointer;
 }

 .voucher-card-shape-top {
     position: absolute;
     top: -130px;
     left: -130px;
     width: 220px;
     height: 220px;
     background: rgb(212, 215, 255);
     border-radius: 50%;
     opacity: 0.3;
 }

 .voucher-card-shape-bottom {
     position: absolute;
     bottom: -155px;
     right: -155px;
     width: 220px;
     height: 220px;
     background: rgb(212, 215, 255);
     border-radius: 50%;
     opacity: 0.2;
 }

 @media screen and (width >=1024px) {
     .certification-card {
         max-width: 450px;
     }

 }