body {
  background-color: #121212;
  background-image: linear-gradient(315deg, #121212 0%, #2c2c2c 74%);
  margin: 0;
  font-family: 'Poppins', sans-serif; /* Ensuring Poppins is used globally */
  color: #e0e0e0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Main container for plans */
.pricingTable-container {
  display: flex;
  flex-wrap: wrap; /* Enable wrapping for small screens */
  justify-content: space-between; /* Align plans horizontally with space between */
  gap: 20px; /* Add consistent spacing between cards */
  max-width: 1200px;
  padding: 20px;
  box-sizing: border-box;
  margin: 0 auto; /* Center the container */
}

/* Individual pricing table */
.pricingTable {
  flex: 1 1 calc(25% - 20px); /* Each plan gets 25% width minus the gap */
  max-width: calc(25% - 20px); /* Ensure plans don't exceed 25% width */
  min-width: 220px; /* Prevent cards from shrinking too small */
  background: #1f1f1f;
  border-radius: 10px;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.6);
  text-align: center;
  padding: 20px;
  transition: transform 0.3s, box-shadow 0.3s;
  box-sizing: border-box;
  display: flex;
  flex-direction: column; /* Stack content vertically */
  justify-content: space-between; /* Push content up and button down */
  font-family: 'Poppins', sans-serif; /* Ensure Poppins is applied here too */
}

.pricingTable:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.8);
}

.pricingTable-header {
  background: linear-gradient(345deg, #ffd700 0%, #625304 50%, #ffd700 100%);
  padding: 5px 0;
  border-radius: 10px 10px 0 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}

.title {
  font-size: 35px;
  font-weight: 700;
  margin: 0;
}

.price-value {
  font-size: 30px;
  margin: 0px;
}

.amount {
  font-weight: bold;
  color: #333;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7), 0 0 25px rgba(255, 255, 255, 0.3), 0 0 5px rgba(255, 255, 255, 0.3);
}

.duration {
  font-size: 14px;
  color: #333;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7), 0 0 25px rgba(255, 255, 255, 0.3), 0 0 5px rgba(255, 255, 255, 0.3);
}

.pricing-content {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-bottom: 20px;
  flex-grow: 1; /* Allow content to take remaining space */
  text-align: left;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
}

.pricing-content li {
  font-size: 16px;
  margin: 10px 0;
  color: #fff;
}

.pricingTable-signup {
  margin-top: 20px; /* Ensure space between content and button */
}

.pricingTable-signup a {
  display: inline-block;
  text-decoration: none;
  color: #fff; /* Text color */
  background: linear-gradient(345deg, #dd0000 0%, #4b0d0d 50%, #dd0000 100%);
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
  font-size: 18px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}

.pricingTable-signup a:hover {
  background: linear-gradient(345deg, #dd0000 0%, #4b0d0d 50%, #dd0000 100%);
  opacity: 50%;
  color: #fff; /* Text color */
  transform: scale(0.8);
}
/* Disabled button styles */
.pricingTable-signup a:disabled,
.pricingTable-signup a[disabled] {
  background: #888; /* Gray background to indicate it's disabled */
  color: #ccc; /* Lighter text color */
  cursor: not-allowed; /* Change cursor to indicate it's not clickable */
  opacity: 0.5; /* Reduce opacity to make it appear inactive */
  box-shadow: none; /* Remove box shadow */
  text-shadow: none; /* Remove text shadow */
  -webkit-text-stroke: none; /* Remove text stroke */
  pointer-events: none; /* Disable all pointer events */
}

/* Disabled button hover effect (no change on hover) */
.pricingTable-signup a:disabled:hover,
.pricingTable-signup a[disabled]:hover {
  background: #888; /* Keep the background gray even on hover */
  box-shadow: none; /* Ensure no hover effect is applied */
  transform: none; /* Prevent scaling or other hover transformations */
}


/* Responsive Design */
@media (max-width: 1200px) {
  .pricingTable {
    flex: 1 1 calc(33.33% - 20px); /* 3 plans per row */
    max-width: calc(33.33% - 20px);
  }
}

@media (max-width: 768px) {
  .pricingTable {
    flex: 1 1 calc(50% - 20px); /* 2 plans per row */
    max-width: calc(50% - 20px);
  }
}

@media (max-width: 480px) {
  .pricingTable {
    flex: 1 1 100%; /* Full-width for mobile */
    max-width: 100%;
  }
}