/* Toggle switch style */
    .toggle, .toggler {
      display: inline-block;
      vertical-align: middle;
      margin: 10px;
    }
    .toggler {
      color: #ddd;
      transition: .2s;
      font-weight: bold;
    }
    .toggler--is-active {
      color: #5B9BD5;
    }
    .toggle {
      position: relative;
      width: 80px;
      height: 35px;
      border-radius: 100px;
      background-color: #7BB3E0;
      overflow: hidden;
      box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.05);
    }
    .check {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      z-index: 6;
      cursor: pointer;
    }
    .check:checked ~ .switch {
      right: 2px;
      left: 57.5%;
      transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
      transition-property: left, right;
      transition-delay: .08s, 0s;
    }
    .switch {
      position: absolute;
      left: 2px;
      top: 2px;
      bottom: 2px;
      right: 57.5%;
      background-color: #fff;
      border-radius: 36px;
      z-index: 1;
      transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
      transition-property: left, right;
      transition-delay: 0s, .08s;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }
    /* Toggle style end */
    
    /* Additional styles... */
  
  /* Container for the pricing cards */
.pricing-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px; /* Space between cards */
  padding: 20px 0;
}

/* Individual pricing cards */
.pricing-card {
  background-color: #f7f7f7; /* Soft grey background for a sleek look */
  border-radius: 15px; /* Rounded corners for the card */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); /* Lighter shadow for subtlety */
  width: calc(33.333% - 20px); /* Three cards per row with gap adjustment */
  max-width: 350px; /* Maximum width of each card */
  min-width: 250px; /* Minimum width of each card for responsiveness */
  overflow: hidden; /* Ensures nothing spills out of the card's rounded corners */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions for hover effects */
  color: #333; /* Darker grey for text, provides good contrast */
}

.pricing-card:hover {
  transform: translateY(-5px); /* Slightly lift the card on hover */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); /* Enhanced shadow on hover for depth */
}

/* Pricing details and "Buy Now" button */
.pricing-card .price {
  color: #333; /* Dark grey for price to make it stand out */
}

/* Style for the "Buy Now" button */
.btn-buy {
  background-color: #5B9BD5; /* Soft sky blue for the button */
  color: #ffffff; /* White text for contrast and readability */
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.btn-buy:hover {
  background-color: #4A8BC4; /* Slightly deeper blue on hover */
}

.pricing-card ul {
  list-style: none; /* Remove default list styling */
  padding: 20px; /* Padding inside the card */
  margin: 0; /* Remove default margin */
}

.pricing-card li {
  margin-bottom: 10px; /* Space between list items */
  text-align: center; /* Center-align the text */
  font-size: 16px; /* Font size for the list items */
}

.pricing-card li.pack {
  font-size: 20px; /* Larger font size for the plan name */
  font-weight: bold; /* Make the plan name bold */
}

.pricing-card li.price {
  font-size: 24px; /* Larger font size for the price */
  font-weight: bold; /* Make the price bold */
  color: #333; /* Color for the price */
}

/* Style for the bottom bar (features list, etc.) */
.bottom-bar {
  border-top: 1px solid #eee; /* Add a subtle line to separate the features/prices */
  padding-top: 10px; /* Space above the line */
}

/* Buy Now button styling */
.btn-container {
  text-align: center; /* Center-align the button */
  padding: 20px; /* Padding around the button */
}

.btn-buy {
  background-color: #6ECFB8; /* Soft mint button background */
  color: #ffffff; /* Button text color */
  text-decoration: none; /* Remove underline from links */
  padding: 10px 20px; /* Padding inside the button */
  border-radius: 5px; /* Rounded corners for the button */
  transition: background-color 0.3s ease; /* Smooth background color transition on hover */
}

.btn-buy:hover {
  background-color: #5BC4AA; /* Slightly deeper mint on hover */
}