/* Header Section */
 .header-section {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     padding: 100px 0;
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 .header-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
     animation: float 20s infinite linear;
 }

 @keyframes float {
     0% {
         transform: translateY(0px);
     }

     100% {
         transform: translateY(-100px);
     }
 }

 .header-section h1 {
     font-size: 3.5rem;
     margin-bottom: 20px;
     font-weight: bold;
     position: relative;
     z-index: 2;
 }

 .header-section p {
     font-size: 1.3rem;
     max-width: 700px;
     margin: 0 auto;
     opacity: 0.95;
     position: relative;
     z-index: 2;
 }

 /* Offers Section */
 .offers-section {
     padding: 100px 0;
 }

 .section-title {
     text-align: center;
     margin-bottom: 80px;
 }

 .section-title h2 {
     font-size: 3rem;
     color: #2c3e50;
     margin-bottom: 20px;
     position: relative;
 }

 .section-title h2::after {
     content: '';
     position: absolute;
     bottom: -10px;
     left: 50%;
     transform: translateX(-50%);
     width: 80px;
     height: 4px;
     background: linear-gradient(90deg, #667eea, #764ba2);
     border-radius: 2px;
 }

 .section-title p {
     font-size: 1.2rem;
     color: #666;
     max-width: 800px;
     margin: 0 auto;
 }

 .offers-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
     gap: 40px;
     margin-top: 60px;
 }

 .offer-card {
     background: white;
     border-radius: 20px;
     padding: 40px 35px;
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
     transition: all 0.4s ease;
     border-top: 6px solid;
     position: relative;
     overflow: hidden;
 }

 .offer-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 100%);
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .offer-card:hover {
     transform: translateY(-15px);
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
 }

 .offer-card:hover::before {
     opacity: 1;
 }

 .offer-card.primary {
     border-top-color: #3498db;
 }

 .offer-card.secondary {
     border-top-color: #e74c3c;
 }

 .offer-card.tertiary {
     border-top-color: #f39c12;
 }

 .offer-card.quaternary {
     border-top-color: #9b59b6;
 }

 .offer-card.quinary {
     border-top-color: #27ae60;
 }

 .offer-icon {
     width: 90px;
     height: 90px;
     margin: 0 auto 25px;
     display: block;
     border-radius: 50%;
     background: linear-gradient(135deg, #f8f9fa, #e9ecef);
     padding: 20px;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
 }

 .offer-title {
     font-size: 2rem;
     color: #2c3e50;
     margin-bottom: 15px;
     text-align: center;
     font-weight: bold;
 }

 .offer-subtitle {
     font-size: 1.2rem;
     color: #666;
     text-align: center;
     margin-bottom: 30px;
     font-style: italic;
     line-height: 1.5;
 }

 .offer-target {
     background: linear-gradient(135deg, #f8f9fa, #e9ecef);
     padding: 20px;
     border-radius: 12px;
     margin-bottom: 30px;
     border-right: 5px solid;
     position: relative;
 }

 .primary .offer-target {
     border-right-color: #3498db;
 }

 .secondary .offer-target {
     border-right-color: #e74c3c;
 }

 .tertiary .offer-target {
     border-right-color: #f39c12;
 }

 .quaternary .offer-target {
     border-right-color: #9b59b6;
 }

 .quinary .offer-target {
     border-right-color: #27ae60;
 }

 .offer-target strong {
     color: #2c3e50;
     font-size: 1.1rem;
 }

 .offer-features {
     list-style: none;
     margin-bottom: 35px;
 }

 .offer-features li {
     padding: 12px 0;
     border-bottom: 1px solid #f0f0f0;
     position: relative;
     padding-right: 30px;
     font-size: 1.05rem;
     transition: all 0.3s ease;
 }

 .offer-features li:hover {
     background: #f8f9fa;
     padding-right: 35px;
     border-radius: 8px;
 }

 .offer-features li:before {
     content: "✓";
     position: absolute;
     right: 0;
     color: #27ae60;
     font-weight: bold;
     font-size: 1.2rem;
     top: 50%;
     transform: translateY(-50%);
 }

 .offer-features li:last-child {
     border-bottom: none;
 }

 .offer-cta {
     text-align: center;
 }

 .btn-primary,
 .btn-secondary,
 .btn-tertiary,
 .btn-quaternary,
 .btn-quinary {
     display: inline-block;
     padding: 18px 35px;
     border-radius: 30px;
     text-decoration: none;
     font-weight: bold;
     transition: all 0.3s ease;
     border: none;
     cursor: pointer;
     font-size: 1.1rem;
     position: relative;
     overflow: hidden;
 }

 .btn-primary {
     background: linear-gradient(135deg, #3498db, #2980b9);
     color: white;
 }

 .btn-secondary {
     background: linear-gradient(135deg, #e74c3c, #c0392b);
     color: white;
 }

 .btn-tertiary {
     background: linear-gradient(135deg, #f39c12, #e67e22);
     color: white;
 }

 .btn-quaternary {
     background: linear-gradient(135deg, #9b59b6, #8e44ad);
     color: white;
 }

 .btn-quinary {
     background: linear-gradient(135deg, #27ae60, #229954);
     color: white;
 }

 .btn-primary:hover,
 .btn-secondary:hover,
 .btn-tertiary:hover,
 .btn-quaternary:hover,
 .btn-quinary:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
 }

 /* Contact Section */
 .contact-section {
     background: linear-gradient(135deg, #2c3e50, #34495e);
     color: white;
     padding: 80px 0;
     text-align: center;
     position: relative;
 }

 .contact-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,0 100,50 50,100 0,50" fill="rgba(255,255,255,0.03)"/></svg>') repeat;
     animation: rotate 30s infinite linear;
 }

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

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

 .contact-section h3 {
     font-size: 2.5rem;
     margin-bottom: 25px;
     position: relative;
     z-index: 2;
 }

 .contact-section p {
     font-size: 1.2rem;
     margin-bottom: 35px;
     opacity: 0.9;
     position: relative;
     z-index: 2;
 }

 .contact-section .btn-primary {
     position: relative;
     z-index: 2;
 }

 /* Responsive Design */
 @media (max-width: 768px) {
     .header-section {
         padding: 60px 0;
     }

     .header-section h1 {
         font-size: 2.5rem;
     }

     .header-section p {
         font-size: 1.1rem;
     }

     .section-title h2 {
         font-size: 2.2rem;
     }

     .offers-grid {
         grid-template-columns: 1fr;
         gap: 30px;
     }

     .offer-card {
         padding: 30px 25px;
     }

     .offer-title {
         font-size: 1.7rem;
     }

     .contact-section h3 {
         font-size: 2rem;
     }
 }

 @media (max-width: 480px) {
     .container {
         padding: 0 15px;
     }

     .header-section h1 {
         font-size: 2rem;
     }

     .section-title h2 {
         font-size: 1.8rem;
     }

     .offer-card {
         padding: 25px 20px;
     }

     .offer-title {
         font-size: 1.5rem;
     }
 }


 .subject-card:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
 }

 @media (max-width: 768px) {
     .subjects-grid {
         grid-template-columns: repeat(2, 1fr) !important;
         gap: 15px !important;
     }
 }

 @media (max-width: 480px) {
     .subjects-grid {
         grid-template-columns: 1fr !important;
     }
 }

 .course-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
 }

 .btn-continue:hover {
     background: #45a049 !important;
 }

 .btn-outline:hover {
     background: #4CAF50 !important;
     color: white !important;
 }

 .btn-preview:hover {
     background: #667eea !important;
     color: white !important;
 }

 .btn-purchase:hover {
     background: #5a6fd8 !important;
 }

 .nav-tabs .nav-link.active {
     color: #667eea !important;
     border-bottom: 2px solid #667eea !important;
 }

 .nav-tabs .nav-link:hover {
     color: #667eea !important;
 }

 @media (max-width: 768px) {

     .purchased-courses-grid,
     .available-courses-grid {
         grid-template-columns: 1fr !important;
     }

     .stats-grid {
         grid-template-columns: repeat(2, 1fr) !important;
     }

     .course-actions {
         flex-direction: column !important;
     }

     .course-actions a {
         flex: none !important;
     }
 }


 /* Enhanced Classes Section Styles */
 .classes-section {
     font-family: Vazirmatn, var(--default-font-family);
 }

 /* Learning Stats Header */
 .learning-stats-header {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     position: relative;
     overflow: hidden;
 }

 .learning-stats-header::before {
     content: '';
     position: absolute;
     top: -50%;
     right: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
     animation: float 6s ease-in-out infinite;
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0px) translateX(0px);
     }

     50% {
         transform: translateY(-10px) translateX(-5px);
     }
 }

 .stat-card {
     transition: all 0.3s ease;
     cursor: pointer;
 }

 .stat-card:hover {
     transform: translateY(-3px);
     background: rgba(255, 255, 255, 0.2) !important;
 }

 /* Navigation Tabs */
 .course-navigation .nav-tabs {
     background: #f8f9fa;
     border-radius: 15px;
     padding: 5px;
     border: none;
 }

 .course-navigation .nav-link {
     border-radius: 10px;
     transition: all 0.3s ease;
     margin: 0 5px;
 }

 .course-navigation .nav-link:hover {
     background: rgba(102, 126, 234, 0.1);
     transform: translateY(-1px);
 }

 .course-navigation .nav-link.active {
     background: #667eea;
     color: white !important;
     box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
 }

 /* Course Cards */
 .course-card {
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
 }

 .course-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: left 0.5s;
     z-index: 1;
 }

 .course-card:hover::before {
     left: 100%;
 }

 .course-card:hover {
     transform: translateY(-8px) scale(1.02);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
 }

 /* Purchased Course Cards */
 .course-card.purchased .course-header {
     background: linear-gradient(135deg, #4CAF50, #45a049);
     position: relative;
 }

 .course-card.purchased .purchased-badge {
     animation: pulse 2s infinite;
 }

 @keyframes pulse {
     0% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.05);
     }

     100% {
         transform: scale(1);
     }
 }

 /* Available Course Cards */
 .course-card.available .course-image {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     transition: all 0.3s ease;
 }

 .course-card.available:hover .course-image {
     background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
 }

 .course-price {
     animation: bounce-in 0.6s ease-out;
 }

 @keyframes bounce-in {
     0% {
         transform: scale(0);
     }

     50% {
         transform: scale(1.1);
     }

     100% {
         transform: scale(1);
     }
 }

 /* Progress Bars */
 .progress-bar {
     position: relative;
     overflow: hidden;
 }

 .progress-bar div {
     transition: width 1s ease-out;
     position: relative;
 }

 .progress-bar div::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
     animation: shine 2s infinite;
 }

 @keyframes shine {
     0% {
         transform: translateX(-100%);
     }

     100% {
         transform: translateX(100%);
     }
 }

 /* Lesson Items */
 .lesson-item {
     transition: all 0.3s ease;
     border-radius: 8px;
     padding: 12px 8px !important;
 }

 .lesson-item:hover {
     background: #f8f9fa;
     transform: translateX(-5px);
 }

 .lesson-status {
     transition: all 0.3s ease;
 }

 .lesson-item:hover .lesson-status {
     transform: scale(1.1);
 }

 /* Action Buttons */
 .btn-continue,
 .btn-outline,
 .btn-preview,
 .btn-purchase {
     position: relative;
     overflow: hidden;
     transition: all 0.3s ease;
 }

 .btn-continue::before,
 .btn-outline::before,
 .btn-preview::before,
 .btn-purchase::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: left 0.5s;
 }

 .btn-continue:hover::before,
 .btn-outline:hover::before,
 .btn-preview:hover::before,
 .btn-purchase:hover::before {
     left: 100%;
 }

 .btn-continue:hover,
 .btn-purchase:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }

 .btn-outline:hover,
 .btn-preview:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
 }

 /* Rating Stars */
 .rating-stars {
     display: inline-block;
 }

 .rating-stars span {
     transition: color 0.2s ease;
     cursor: pointer;
 }

 .rating-stars:hover span {
     color: #FFD700 !important;
 }

 /* Empty States */
 .empty-state {
     animation: fade-in-up 0.6s ease-out;
 }

 @keyframes fade-in-up {
     0% {
         opacity: 0;
         transform: translateY(20px);
     }

     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .empty-state button {
     transition: all 0.3s ease;
 }

 .empty-state button:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
 }

 /* Responsive Design */
 @media (max-width: 1200px) {

     .purchased-courses-grid,
     .available-courses-grid {
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     }
 }

 @media (max-width: 768px) {
     .learning-stats-header {
         padding: 20px !important;
     }

     .stats-grid {
         grid-template-columns: repeat(2, 1fr) !important;
         gap: 10px !important;
     }

     .stat-card {
         padding: 12px !important;
     }

     .stat-card div:first-child {
         font-size: 24px !important;
     }

     .course-card {
         margin-bottom: 20px;
     }

     .course-actions {
         flex-direction: column !important;
         gap: 8px !important;
     }

     .course-meta {
         grid-template-columns: 1fr !important;
         gap: 8px !important;
     }

     .course-navigation .nav-tabs {
         flex-direction: column;
     }

     .course-navigation .nav-link {
         margin: 2px 0;
         text-align: center;
     }
 }

 @media (max-width: 576px) {
     .learning-stats-header h3 {
         font-size: 20px !important;
     }

     .course-card {
         border-radius: 15px !important;
     }

     .course-header,
     .course-image {
         height: 120px !important;
     }

     .course-info {
         padding: 15px !important;
     }

     .course-card h4 {
         font-size: 16px !important;
     }
 }

 /* Dark Mode Support */
 @media (prefers-color-scheme: dark) {
     .course-card {
         background: #2d3748 !important;
         border-color: #4a5568 !important;
         color: #e2e8f0 !important;
     }

     .course-info p {
         color: #a0aec0 !important;
     }

     .course-meta {
         color: #718096 !important;
     }

     .lesson-item:hover {
         background: #4a5568 !important;
     }
 }

 /* Loading Animation */
 .loading-skeleton {
     background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
     background-size: 200% 100%;
     animation: loading 1.5s infinite;
 }

 @keyframes loading {
     0% {
         background-position: 200% 0;
     }

     100% {
         background-position: -200% 0;
     }
 }

 /* Accessibility Improvements */
 @media (prefers-reduced-motion: reduce) {
     * {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
     }
 }

 /* Focus States */
 .course-card:focus-within,
 .nav-link:focus,
 button:focus,
 a:focus {
     outline: 2px solid #667eea;
     outline-offset: 2px;
 }

 /* Print Styles */
 @media print {
     .course-card {
         break-inside: avoid;
         box-shadow: none !important;
         border: 1px solid #ddd !important;
     }

     .learning-stats-header {
         background: #f8f9fa !important;
         color: black !important;
     }
 }

 #test_access_button {
     width: 100%;
 }

 /* .offer-card.primary {
     background: linear-gradient(135deg, #667eea, #764ba2);
 }

 .offer-card.secondary {
     background: linear-gradient(135deg, #4CAF50, #45a049);
 }

 .offer-card.tertiary {
     background: linear-gradient(135deg, #FF9800, #FF6B35);
 }

 .offer-card.quaternary {
     background: linear-gradient(135deg, #E91E63, #C2185B);
 }

 .offer-card.quinary {
     background: linear-gradient(135deg, #9C27B0, #7B1FA2);
 } */