:root {
      --primary-blue: #0070C0;
      --logo-magenta: #F02C58;
      --deep-magenta: #D40075;
      --accent-orange: #E68C00;
      --bg-white: #FFFFFF;
      --text-dark: #333333;
    }

        
    .pricing-table {
      width: 100%;
      max-width: 1100px;
      margin: auto;
      border-collapse: collapse;
      background: var(--bg-white);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 0 15px rgba(0,0,0,0.1);
    }

    .pricing-table thead {
      background: var(--primary-blue);
      color: white;
    }

    .pricing-table th,
    .pricing-table td {
      text-align: left;
      padding: 20px;
      font-size: 1rem;
      
    }

    .pricing-table tbody tr:nth-child(even) {
      background: #f9fbfd;
    }

    .pricing-table tbody tr:hover {
      background: #eef6ff;
      transition: background 0.3s;
    }

    .discount-badge {
      display: inline-block;
      background: var(--deep-magenta);
      color: white;
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 0.85rem;
      font-weight: 600;
    }

    .enroll-btn{
      background: var(--accent-orange);
      color: white;
      text-decoration: none;
      padding: 5px 12px;
      border-radius: 20px;
      font-weight: 500;
      transition: background 0.3s;
      display: inline-block;
    }

    .learn-btn {
      background: green;
      color: white;
      text-decoration: none;
      padding: 5px 12px;
      border-radius: 20px;
      font-weight: 500;
      transition: background 0.3s;
      display: inline-block;
    }

    .enroll-btn:hover,
    .learn-btn:hover {
      background: #000;
      color: #fff;
    }


    .course-name{
      font-size: 1.1rem;
      font-weight: 600;
    }

    .price-value{
      font-size: 1.1rem;
      font-weight: 600;
      color: #000;
    }

    .price-final{
      font-size: 1.3rem;
      font-weight: 600;
      color: green;
    }


    @media (max-width: 768px) {
      .pricing-table, .pricing-table thead, .pricing-table tbody, .pricing-table th, .pricing-table td, .pricing-table tr {
        display: block;
        width: 100%;
      }

      .pricing-table thead {
        display: none;
      }

      .pricing-table tr {
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
      }

      .pricing-table td {
        padding: 15px;
        text-align: right;
        position: relative;
      }

      .pricing-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 15px;
        top: 15px;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 0.85rem;
        color: #666;
      }
    }