/* plane  page css start  */
 body {
     background: #000000;
     min-height: 100vh;
     font-family: 'Poppins', sans-serif;
     margin: 0;
     padding: 0;
 }

 .logo-container {
     padding: 20px 0;
 }

 .logo {
     color: white;
     font-size: 2rem;
     font-weight: bold;
     text-decoration: none;
 }

 .logo img {
     height: 40px;
     margin-right: 10px;
 }

 .hero-section {
     text-align: center;
     color: white;
     padding: 40px 0;
 }

 .hero-title {
     font-size: 3rem;
     font-weight: bold;
     margin-bottom: 20px;
 }

 .hero-subtitle {
     font-size: 1.2rem;
     opacity: 0.9;
     max-width: 600px;
     margin: 0 auto;
 }

 .pricing-container {
     background: rgb(0, 0, 0);
     border-radius: 20px;
     padding: 40px;
     margin: 40px auto;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
     max-width: 1200px;
 }

 .features-column {
     padding-right: 30px;
     border-right: 2px solid #f0f0f0;
     background-color: white;
     border-radius: 20px;
     padding-left: 30px;
 }

 .table-content-heading {
     font-size: 17.5px;
     margin-top: 10px;
 }

 .plans-column {
     padding-left: 30px;
 }

 .table-container {
     width: 92%;
     border-collapse: separate !important;
     border-spacing: 20px 0;
     border-radius: 10px;
     /* 20px gap ONLY between columns */
     background-color: transparent !important;
 }

 .price-badge {
     width: 100%;
     padding: 18px 0 30px;
     background-image: url("/assets/img/shape-blue.png");
     background-repeat: no-repeat;
     background-size: 100% 100%;
     background-position: center;
     color: #ffffff;
     font-family: Arial, sans-serif;
     text-align: center;
     clip-path: polygon(5% 0%, 95% 0%,
             100% 0%, 100% 55%,
             72% 83%, 46% 109%, 50% 106%,
             27% 84%,
             0% 58%, 0% 0%);
     border-radius: 18px;
 }
 .price-badge1 {
  width: 100%;
  padding: 32px 0 50px;
  background-image: url("/assets/img/shape-blue.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  color: #ffffff;
  font-family: Arial, sans-serif;
  text-align: center;
  /* clip-path: polygon(5% 0%, 95% 0%,
      100% 0%, 100% 55%,
      72% 83%, 46% 109%, 50% 106%,
      27% 84%,
      0% 58%, 0% 0%);
  border-radius: 18px; */
}
.price-badge-recommended {
  width: 100%;
  padding: 18px 0 30px;
  background-image: url("/assets/img/shape-green.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  color: #ffffff;
  font-family: Arial, sans-serif;
  text-align: center;
  clip-path: polygon(5% 0%, 95% 0%,
      100% 0%, 100% 55%,
      72% 83%, 46% 109%, 50% 106%,
      27% 84%,
      0% 58%, 0% 0%);
  border-radius: 18px;
}

.ribbon-cut {
  /* Main ribbon styles */
  background-color: #ff0080;
  /* Pink color */
  color: white;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  padding: 8px 38px;
  display: inline-block;
  position: relative;
  top: -38px;
  left: 0px;
  clip-path: polygon(0% 0%,
      /* Top-Left Corner */
      100% 0%,
      /* Top-Right Corner */
      90% 50%,
      /* Right V-cut point */
      100% 100%,
      /* Bottom-Right Corner */
      0% 100%,
      /* Bottom-Left Corner */
      10% 50%
      /* Left V-cut point */
    );
}

.ribbon-cut-for-mobile {
  display: none;
}

.ribbon-cut-for-large-screen {
  display: block;
}


 /* Apply card look only to columns, not rows */
 .table-container th {
     background: white;
     padding: 0px 1px;
     margin-bottom: 20px;
 }

 .table-container td {
     background: white;
     padding: 0px 15px;
 }


 .table-container th {
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     padding-top: 20px;
 }

 .last-table-row td {
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
     padding-bottom: 50px;
 }

 /* Remove spacing on rows — forces them to touch */
 .table-container tr {
     border-spacing: 0 !important;
 }

 .feature-list {
     list-style: none;
     padding: 0;
     margin: 0;
     border: 1px solid #dedada;
     border-radius: 20px;
     padding-left: 30px;
     padding-top: 0px;
     padding-bottom: 30px;
 }

 .feature-item {
     padding: 25px 0;
     /* border-bottom: 1px solid #f0f0f0; */
     display: flex;
     align-items: center;
     font-size: 1.1rem;
     font-weight: 500;
     color: #333;
 }

 .feature-item:last-child {
     border-bottom: none;
 }

 .feature-icon {
     margin-right: 15px;
     font-size: 1.2rem;
     color: #667eea;
     margin-top: 10px;
 }

 .pricing-header {
     text-align: center;
     margin-bottom: 30px;
 }

 .plan-title {
     font-size: 1.2rem;
     font-weight: bold;
     color: #ffffff;
     margin-bottom: 0px;
     text-align: center;
 }

 @media screen and (max-width: 900px) {
     .plan-title {
         font-size: 0.9rem;
     }
 }

 /* .plan-price {
            font-size: 5px;
            font-weight: bold;
            color: #667eea;
            margin-bottom: 5px;
        } */
 .plan-period {
     color: #666;
     font-size: 1rem;
 }

 .plan-card {
     background: #f8f9fa;
     border-radius: 15px;
     padding: 20px;
     margin-bottom: 20px;
     border: 2px solid transparent;
     transition: all 0.3s ease;
 }

 .plan-card:hover {
     border-color: #667eea;
     transform: translateY(-5px);
 }

 .plan-features {
     list-style: none;
     padding: 0;
     margin: 20px 0;
     border: 1px solid #dedada;
     border-radius: 10px;
 }

 .plan-feature {
     padding: 12px 0;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1rem;
     color: #555;
     border-left: 1px solid #dedada;
     border-right: 1px solid #dedada;
 }

 .border-class-top {
     border-top: 1px solid #dedada !important;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
 }

 .border-class-bottom {
     border-bottom: 1px solid #dedada !important;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
 }


 .feature-check {
     color: #28a745;
     /* margin-right: 10px; */
     font-size: 2.1rem;
     margin-top: 5px;
 }

 .feature-cross {
     color: #dc3545;
     /* margin-right: 10px; */
     font-size: 2.1rem;
     margin-top: 5px;
 }

 .btn-get-started {
     background: #F43E39;
     color: white;
     border: none;
     padding: 10px 40px;
     border-radius: 5px;
     font-weight: bold;
     width: 100%;
     transition: all 0.3s ease;
     font-size: 13px;
 }

 .btn-get-started:hover {
     transform: translateY(-2px);
     /* box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3); */
     background: #e42620;
     color: white;
 }

 .section-title {
     font-size: 2rem;
     font-weight: bold;
     color: #333;
     margin-bottom: 30px;
     text-align: center;
 }

 .content-badge {
     background: #28a745;
     color: white;
     padding: 5px 12px;
     border-radius: 15px;
     font-size: 0.9rem;
     font-weight: bold;
     margin-left: 10px;
 }

 /* plane  page css end  */



 /* Checkout Container */
 .checkout-container {
     display: flex;
     max-width: 1200px;
     margin: 20px auto;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
     border-radius: 8px;
     overflow: hidden;
     min-height: 80vh;
 }

 /* Left Panel - Black Background */
 .checkout-left {
     flex: 1;
     background-color: #000;
     color: #fff;
     padding: 40px;
 }

 .checkout-header {
     margin-bottom: 30px;
 }

 .checkout-title {
     font-size: 2rem;
     font-weight: 700;
     margin-bottom: 10px;
 }

 .checkout-subtitle {
     color: #ccc;
     font-size: 1rem;
 }

 /* Form Sections */
 .form-section {
     margin-bottom: 30px;
     padding: 20px;
     background-color: #111;
     border-radius: 8px;
 }

 .section-title {
     font-size: 1.3rem;
     font-weight: 600;
     margin-bottom: 20px;
     color: #fff;
 }

 .form-group {
     margin-bottom: 20px;
 }

 .form-label {
     display: block;
     margin-bottom: 8px;
     font-size: 0.9rem;
     color: #ccc;
     font-weight: 500;
 }

 .form-control {
     width: 100%;
     padding: 12px 15px;
     border: 1px solid #444;
     border-radius: 6px;
     background-color: #222;
     color: #fff;
     font-size: 1rem;
     transition: border-color 0.3s;
 }

 .form-control:focus {
     outline: none;
     border-color: #667eea;
 }

 .form-row {
     display: flex;
     gap: 15px;
 }

 .form-row .form-group {
     flex: 1;
 }

 /* Checkout Button */
 .btn-checkout {
     background-color: #ff3333;
     color: white;
     border: none;
     padding: 15px 30px;
     border-radius: 6px;
     width: 100%;
     font-size: 1.1rem;
     font-weight: 600;
     cursor: pointer;
     transition: background-color 0.3s;
     margin: 20px 0;
 }

 .btn-checkout:hover {
     background-color: #e60000;
 }

 /* Security Badges */
 .security-badges {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-top: 20px;
 }

 .security-badge {
     display: flex;
     align-items: center;
     gap: 5px;
     font-size: 0.8rem;
     color: #ccc;
 }

 /* Right Panel - Gray Background */
 .checkout-right {
     flex: 1;
     background-color: rgb(196, 196, 196);
     padding: 40px;
 }

 .ribbon {
     /* Main ribbon styles */
     background-color: #ff0080;
     /* Pink color similar to the image */
     color: white;
     font-family: sans-serif;
     font-size: 14px;
     font-weight: bold;
     text-align: center;
     padding: 10px 20px;
     position: relative;
     /* Essential for positioning the pseudo-elements */
     display: inline-block;
     margin: 20px 0;
     /* Add some margin for visibility */
     /* Optional: Add a slight shadow for depth */
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }

 /* Creating the left and right angled ends */
 .ribbon::before,
 .ribbon::after {
     content: '';
     position: absolute;
     border-style: solid;
     /* Use a slightly darker shade of pink for the "folded" effect */
     border-color: #e60073 transparent transparent transparent;
     bottom: -10px;
     /* Position the "fold" below the main ribbon */
 }

 .ribbon::before {
     left: 0;
     border-width: 10px 0 0 10px;
     /* Skew or rotate to create the angled cut */
     transform: skewX(-20deg);
     transform-origin: bottom left;
 }

 .ribbon::after {
     right: 0;
     border-width: 10px 10px 0 0;
     /* Skew or rotate to create the angled cut */
     transform: skewX(20deg);
     transform-origin: bottom right;
 }

 .price-badge-recommended {
     margin-top: -30px;
     background-image: url("/assets/img/shape-green.png");
     background-repeat: no-repeat;
     background-size: 100% 100%;
     background-position: center;
 }

 .ribbon-cut {
     /* Main ribbon styles */
     background-color: #ff0080;
     /* Pink color */
     color: white;
     font-family: sans-serif;
     font-size: 13px;
     font-weight: bold;
     text-align: center;
     padding: 8px 38px;
     display: inline-block;
     position: relative;
     top: -38px;
     left: 0px;
     clip-path: polygon(0% 0%,
             /* Top-Left Corner */
             100% 0%,
             /* Top-Right Corner */
             90% 50%,
             /* Right V-cut point */
             100% 100%,
             /* Bottom-Right Corner */
             0% 100%,
             /* Bottom-Left Corner */
             10% 50%
             /* Left V-cut point */
         );
 }

 .ribbon-cut-for-mobile {
     display: none;
 }

 .ribbon-cut-for-large-screen {
     display: block;
 }

 @media screen and (max-width: 1100px) {
     .ribbon-cut {
         /* Main ribbon styles */
         top: -34px;
         left: 2px;
     }
 }

 @media screen and (max-width: 900px) {
     .ribbon-cut {
         /* Main ribbon styles */
         top: -34px;
         left: 0px;
         padding: 5px 9px;
     }

     .table-container {
         border-spacing: 15px 0;
     }
 }

 @media screen and (max-width: 480px) {
     .ribbon-cut {
         top: -54px;
         left: -8px;
         padding: 10px 100px;
         font-size: 21px;
     }

     .pricing-cards-mobile {
         display: block;
         padding: 0px 20px 50px 20px;
         margin-top: -35px;
     }


     .feature-check {
         margin-top: 30px;
     }

     .feature-cross {
         margin-top: 30px;
     }

     .price-badge-recommended {
         margin-top: 0px;
     }

     .ribbon-cut-for-mobile {
         display: none;
     }

     .ribbon-cut-for-large-screen {
         display: none;
     }

 }

 @media screen and (max-width: 420px) {
    .ribbon-cut {
         top: -54px;
         left: -17px;
         padding: 10px 100px;
         font-size: 21px;
     }
 }

 @media screen and (max-width: 400px) {
    .ribbon-cut {
         top: -54px;
         left: -17px;
         padding: 10px 90px;
         font-size: 21px;
     }
 }

 @media screen and (max-width: 400px) {
    .ribbon-cut {
         top: -54px;
         left: -7px;
         padding: 10px 70px;
         font-size: 21px;
     }
 }

 .product-banner {
     /* Color and Font Styles (Example styles) */
     background-color: #283044;
     /* Dark blue color */
     color: white;
     font-family: sans-serif;
     font-weight: bold;
     text-align: center;
     padding: 20px 30px;
     display: inline-block;

     /* Shape definition */
     /* NOTE: border-radius will only apply to the original corners (top-left/top-right) 
       that are not heavily clipped by the polygon points below. 
       The V-cut points will remain sharp. */
     border-radius: 20px;

     /* The custom shape */
     clip-path: polygon(0% 20.5%,
             /* Top-Left */
             100% 21%,
             /* Top-Right */
             100% 53%,
             /* Bottom-Right */
             49% 75%,
             /* The point of the V-cut */
             0% 49%
             /* Bottom-Left */
         );
 }


 /* Order Summary */
 .order-summary {
     background-color: #fff;
     border-radius: 8px;
     padding: 30px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 }

 .table-parent-container {
     display: flex;
     justify-content: center;
     padding-bottom: 50px;
 }

 @media screen and (max-width: 1024px) {
     .feature-item {
         padding: 12px 0px 12px 20px !important;
     }

     .btn-get-started-hidden {
         padding: 10px 170px;
     }
 }

 @media screen and (max-width: 900px) {
     .btn-get-started-hidden {
         padding: 10px 115px;
     }

     .btn-get-started {
         padding: 10px 35px;
     }
 }

 @media screen and (max-width: 800px) {
     .btn-get-started-hidden {
         padding: 10px 90px;
     }

     .btn-get-started {
         padding: 10px 35px;
     }
 }

 @media screen and (max-width: 480px) {
     .table-parent-container {
         /* display: block;
         overflow: scroll;
         padding-left: 50px;
         margin-right: 20px; */
         padding-bottom: 0px;
     }

     .feature-item {
         padding: 12px 20px 12px 20px !important;
     }

     .border-class-top {
         border-top: none;
         border-top-left-radius: 10px;
         border-top-right-radius: 10px;
     }

     .border-class-bottom {
         border-bottom: none;
         border-bottom-left-radius: 10px;
         border-bottom-right-radius: 10px;
     }

     #card-tier1 button {
         width: 280px;
         padding: 20px 32px;
         background: #1E263D;
         color: white;
         border-radius: 10px;
         border: none;
         font-size: 18px;
         margin-top: 20px;
     }

     #card-tier2 button {
         width: 280px;
         padding: 20px 32px;
         background: #1E263D;
         color: white;
         border-radius: 10px;
         border: none;
         font-size: 18px;
         margin-top: 20px;
     }

     #card-agency button {
         width: 280px;
         padding: 20px 32px;
         background: #1E263D;
         color: white;
         border-radius: 10px;
         border: none;
         font-size: 18px;
         margin-top: 20px;
     }


     .plan-feature {
         border-left: none;
         border-right: none;
     }

     .feature-check {
         margin-top: 0px;
         font-size: 23px;
     }

     .feature-cross {
         margin-top: 0px;
         font-size: 23px;
     }

     .table-content-heading {
         font-size: 23px;
         margin-top: 10px;
     }

     .btn-get-started {
         padding: 10px 40px;
     }

     .btn-get-started-hidden {
         padding: 10px 90px;
         border-radius: 10px;
         font-weight: bold;
         text-transform: uppercase;
         letter-spacing: 1px;
         /* width: 100%; */
         margin-top: 20px;
         transition: all 0.3s ease;
         font-size: 11px;
     }
 }

 .plan-badge {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     padding: 8px 16px;
     border-radius: 20px;
     font-size: 0.8rem;
     font-weight: 600;
     display: inline-block;
     margin-bottom: 20px;
 }

 /* .plan-price {
    font-size: 3rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
} */

 .plan-period {
     color: #666;
     margin-bottom: 30px;
     font-size: 0.9rem;
 }

 /* Features List */
 .features-list {
     list-style: none;
     margin: 30px 0;
 }

 .button-row {
     position: relative;
     top: 20px;
 }

 .feature-item {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     padding: 12px 0px 12px 30px;
     /* border-bottom: 1px solid #f0f0f0; */
     color: #333;
     border-left: 1px solid #dedada;
     border-right: 1px solid #dedada;
 }

 .feature-item:last-child {
     border-bottom: none;
 }

 .content-badge {
     background-color: #667eea;
     color: white;
     padding: 2px 8px;
     border-radius: 12px;
     font-size: 0.7rem;
     font-weight: 600;
     margin-left: 10px;
 }

 /* Back Link */
 .back-link {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     color: #667eea;
     text-decoration: none;
     font-weight: 500;
     margin-top: 20px;
 }

 .back-link:hover {
     text-decoration: underline;
 }

 /* Responsive Design */
 @media (max-width: 768px) {
     .checkout-container {
         flex-direction: column;
     }

     .form-row {
         flex-direction: column;
         gap: 0;
     }

     .checkout-left,
     .checkout-right {
         padding: 20px;
     }

     .security-badges {
         flex-direction: column;
         align-items: center;
         gap: 10px;
     }
 }

 /* Spinner Animation */
 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 .spinner {
     animation: spin 1s linear infinite;
     display: inline-block;
 }

 /* Order Items Breakdown */
 .order-items {
     margin: 25px 0;
     border-top: 1px solid #eee;
     border-bottom: 1px solid #eee;
     padding: 20px 0;
 }

 .order-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 12px 0;
     border-bottom: 1px solid #f5f5f5;
 }

 .order-item:last-child {
     border-bottom: none;
 }

 .order-item.total {
     border-top: 2px solid #333;
     padding-top: 15px;
     margin-top: 10px;
     font-weight: bold;
 }

 .item-label {
     color: #333;
     font-size: 0.95rem;
 }

 .item-price {
     color: #333;
     font-weight: 500;
 }

 .order-item.total .item-label {
     font-size: 1.1rem;
     font-weight: 700;
 }

 .order-item.total .item-price {
     font-size: 1.3rem;
     font-weight: 700;
     color: #000;
 }

 /* Discount Code Section */
 .discount-section {
     margin: 15px 0;
     padding: 15px;
     background-color: #f8f9fa;
     border-radius: 6px;
     border: 1px solid #e9ecef;
 }

 .discount-input-group {
     display: flex;
     gap: 10px;
     margin-bottom: 8px;
 }

 .discount-code-input {
     flex: 1;
     padding: 10px 12px;
     border: 1px solid #ddd;
     border-radius: 4px;
     font-size: 0.9rem;
     background-color: white;
 }

 .discount-code-input:focus {
     outline: none;
     border-color: #667eea;
 }

 .apply-discount-btn {
     background-color: #333;
     color: white;
     border: none;
     padding: 10px 20px;
     border-radius: 4px;
     cursor: pointer;
     font-size: 0.9rem;
     font-weight: 500;
     transition: background-color 0.3s;
 }

 .apply-discount-btn:hover {
     background-color: #555;
 }

 .discount-message {
     font-size: 0.8rem;
     min-height: 16px;
 }

 .discount-message.success {
     color: #28a745;
 }

 .discount-message.error {
     color: #dc3545;
 }

 /* Plan Badge and Price Adjustments */
 .plan-badge {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     padding: 8px 16px;
     border-radius: 20px;
     font-size: 0.8rem;
     font-weight: 600;
     display: inline-block;
     margin-bottom: 15px;
 }

 .plan-price {
     font-size: 1.2rem;
     font-weight: 700;
     color: #ffffff;
     margin-bottom: 5px;
     text-align: center;
 }

 @media screen and (max-width: 900px) {
     .plan-price {
         font-size: 0.9rem;
     }
 }

 .plan-period {
     color: #666;
     margin: 15px 0 25px 0;
     font-size: 0.9rem;
     text-align: center;
 }

 /* Back Link */
 .back-link {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     color: #667eea;
     text-decoration: none;
     font-weight: 500;
     margin-top: 20px;
     padding: 10px 0;
     transition: color 0.3s;
 }

 .back-link:hover {
     color: #5a67d8;
     text-decoration: underline;
 }

 /* Additional styles for validation */
 .form-control.error {
     border-color: #e74c3c;
     box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2);
 }

 .error-message {
     color: #e74c3c;
     font-size: 12px;
     margin-top: 5px;
     display: none;
 }

 .discount-message.success {
     color: #27ae60;
 }

 .discount-message.error {
     color: #e74c3c;
 }

 .spinner {
     animation: spin 1s linear infinite;
     margin-right: 8px;
 }

 @keyframes spin {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 .discount {
     color: #27ae60;
 }
 .pricing-cards-mobile {
  display: none;
}
@media screen and (max-width: 480px) {
   .table-container {
    display: none;
  }
.pricing-cards-mobile {
         display: block;
         padding: 0px 20px 50px 20px;
         margin-top: -35px;
     }
   
  .ribbon-cut-for-mobile {
    display: none;
  }

  .ribbon-cut-for-large-screen {
    display: none;
  }
  .pricing-card {
    background: white;
    border-radius: 12px;
    padding: 60px 20px 40px 20px;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .pricing-card-agency {
    background: white;
    border-radius: 12px;
    padding: 30px 20px 40px 20px;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .pricing-card h3,
  .pricing-card-agency h3 {
    font-size: 22px;
    font-weight: 900;
    margin-bottom: 5px;
    text-align: center;
  }

  .pricing-card .price,
  .pricing-card-agency .price {
    font-size: 40px;
    font-weight: bolder;
    margin-bottom: 15px;
    text-align: center;
  }

  .pricing-card ul,
  .pricing-card-agency ul {
    list-style: none;
    padding: 30px 20px 30px 0px;
    margin: 40px 0px 15px 0px;
    border: 1px solid #dedada;
    border-radius: 20px;
  }

  .pricing-card ul li,
  .pricing-card-agency ul li {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
  }

  #card-tier1 button {
    width: 100%;
    padding: 12px;
    background: #1E263D;
    color: white;
    border-radius: 10px;
    border: none;
    margin-left: 25%;
    font-size: 18px;
  }

  #card-tier2 button {
    width: 100%;
    padding: 20px 22px;
    background: #1E263D;
    color: white;
    border-radius: 10px;
    border: none;
    margin-left: 16%;
    font-size: 18px;
  }

  #card-agency button {
    width: 100%;
    padding: 20px 22px;
    background: #1E263D;
    color: white;
    border-radius: 10px;
    border: none;
    margin-left: 18%;
    font-size: 18px;
  }
  .card-icon-text-alignment {
    display: flex;
    column-gap: 30px;
  }

.table-content-heading {
    font-size: 23px;
    margin-top: 10px;
  }
   .ribbon-cut-for-large-screen {
    display: none;
  }
  #card-tier1 button {
         width: 280px;
         padding: 20px 32px;
         background: #1E263D;
         color: white;
         border-radius: 10px;
         border: none;
         font-size: 18px;
         margin-top: 20px;
     }

     #card-tier2 button {
         width: 280px;
         padding: 20px 32px;
         background: #1E263D;
         color: white;
         border-radius: 10px;
         border: none;
         font-size: 18px;
         margin-top: 20px;
     }

     #card-agency button {
         width: 280px;
         padding: 20px 32px;
         background: #1E263D;
         color: white;
         border-radius: 10px;
         border: none;
         font-size: 18px;
         margin-top: 20px;
     }
     .hero-section {
        padding-bottom: 60px;
    }

}