@font-face {
  font-family: YekanBakhFaNum;
  src: url('YekanBakhFaNum-VF.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: Pinar;
  src: url('Pinar-DS1-FD-Black.woff2') format('woff2');
  font-display: swap;
}

body {
  background: #f9fafb;
  padding: 50px;
}
.wrap {
  --bg: #f9fafb; 
  --card: #ffffff; 
  --muted: #6b7280; 
  --accent: #3b82f6; 
  --accent-2: #5025d1;
  --accent-3: #ec4899;
  --accent-4: #f59e0b;
  --accent-5: #7624d1;
  --radius: 16px; 
  --gap: 18px;
  font-family: YekanBakhFaNum, Tahoma, Arial, sans-serif;

  margin: 0 auto; 
  min-height: 100vh; 
  display: flex; 
  flex-direction: column;
  align-items: center; 
  justify-content: center; 
  background: var(--bg); 
  color: #111827;
  padding: 20px;
  width: 100%; 
  /* max-width: 1200px;  */
  box-sizing: border-box;
}

.wrap .plan {
  padding: 1px;
  margin: 1px;
  text-align:center;
}

.wrap .plandescription
       
{
    padding : 2px;
    margin-bottom: 60px;
    width:60%;
    color : #2b2c2c;

}
.wrap h1 {
  font-size: 26px;
  color: #111827;
  text-align: center;
  font-weight: 800;
}

.wrap .cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: center; /* This will properly center the cards */
}

.wrap .cards > * {
  flex: 0 1 250px; /* Don't grow, can shrink, base width 300px */
  max-width: 100%;
}

@media (max-width: 600px) {
  .wrap .cards > * {
    flex-basis: 100%; /* Full width on mobile */
  }
}

.wrap .card {
  background: var(--card); 
  padding: 25px; 
  border-radius: var(--radius); 
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  position: relative; 
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
  border: none;
}

.wrap .card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe, #ddd6fe) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  transition: all 0.3s ease;
}

.wrap .card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.wrap .card:hover::before {
  border-width: 3px;
  background: linear-gradient(135deg, #3b82f6, #6366f1, #8b5cf6) border-box;
}

.wrap .card.popular {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(147, 51, 234, 0.2);
}

.wrap .card.popular::before {
  border-width: 3px;
  background: linear-gradient(135deg, #ec4899, #8b5cf6, #6366f1) border-box;
}

.wrap .card.popular:hover {
  transform: translateY(-12px);
  box-shadow: 0 30px 60px rgba(147, 51, 234, 0.3);
}

.wrap .hdr {
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
}

.wrap .name {
  font-weight: 900; 
  font-size: 18px; 
  color: var(--accent-5); 
  letter-spacing: 5px; 
  width: fit-content;
  height: fit-content;
  border-color: black;
  border-width: 1px;
  border-bottom-style:dashed;
}

.wrap .price {
  margin-top: 14px; 
  display: flex; 
  flex-direction: column; 
  gap: 6px;
  position: relative;
  z-index: 2;
  
}

.wrap .orig {
  font-size: 11px; 
  color: var(--muted); 
  text-decoration: line-through;
}

.wrap .monthly {
  font-size: 30px; 
  font-weight: 700;
  font-family: Pinar;
}

.wrap .per {
  font-size: 12px; 
  color: var(--muted);
}

.wrap .unit 
{

  font-size: 18px; 
  color: black;
  font-family: Pinar;
 
  
}
.wrap .annual {
  font-size: 15px; 
  font-weight: 600; 
  color: var(--accent-2);
}

.wrap .annual small {
  display: block; 
  font-size: 12px; 
  color: var(--muted);
}

.wrap .discount-note {
  font-size: 11px; 
  color: #047857; 
  margin-top: 4px;
  border-width: 1px;
  border-color: black;
  background: #eaedf0;
  border-radius: 8px;
  display: inline-block;
  padding: 3px 18px;
  width: fit-content;
  height: fit-content;
  letter-spacing: -0.01em;
}

.wrap .divider {
  border-top: 1px solid #dce0ed; 
  margin: 18px 0;
  position: relative;
  z-index: 2;
}

.wrap .features {
  margin: 0;
  color: #374151;
  position: relative;
  z-index: 2;
  font-size: 12px;
}

.wrap .features ul {
  list-style: none;
  text-align: right;
  padding: 0;
}

.wrap .features li {
  line-height: 25px;
}

.wrap .features li::before {
  content: "✓";  
  color: #d19c1d;
  font-weight: bold; 
  margin-left: 8px;
}

.wrap .cta {
  display: flex; 
  gap: 10px;
  position: relative;
  z-index: 2;
}

.wrap .order {
  flex: 1; 
  padding: 12px 16px; 
  border-radius: 8px; 
  border: 1px solid var(--accent); 
  background: #cee7fc; 
  color: black;
  cursor: pointer; 
  font-weight: 400; 
  transition: all 0.2s;
  text-align: center;
  text-decoration: none;
}

.wrap .order:hover {
  background: var(--accent); 
  color: #fff;
  transform: scale(1.05);
}

.wrap .popular-badge {
  position: absolute; 
  top: 15px; 
  left: 50%; 
  transform: translateX(-50%); 
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  color: white; 
  padding: 6px 16px; 
  border-radius: 20px; 
  font-size: 13px; 
  font-weight: 700;
  z-index: 10;
  box-shadow: 0 4px 10px rgba(147, 51, 234, 0.3);
}

@media (max-width: 460px) { 
  .wrap .price {
    align-items: flex-start;
  } 
}