.modern-dashboard {background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);min-height:100vh;padding-top:0;display:block;position:relative} .hero-dashboard {background:#1e3a8a;position:relative;padding:2rem 0 2rem;overflow:hidden;min-height:auto;width:100%;z-index:2} .hero-bg-animation {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"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat;animation:float 20s ease-in-out infinite} @keyframes float {0%,100% {transform:translateY(0px)} 50% {transform:translateY(-20px)} } .welcome-content {position:relative;z-index:2} .hero-title {font-size:3rem;font-weight:800;color:white;margin-bottom:1rem;line-height:1.2} .text-gradient {background:linear-gradient(45deg,#ffd700,#ffb347);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .hero-subtitle {font-size:1.25rem;color:rgba(255,255,255,0.9);margin-bottom:2rem} .quick-stats {display:flex;gap:2rem;margin-top:2rem} .stat-item {text-align:center} .stat-number {font-size:2.5rem;font-weight:700;color:#ffd700;line-height:1} .stat-label {font-size:0.9rem;color:rgba(255,255,255,0.8);margin-top:0.5rem} .profile-card-modern {background:rgba(255,255,255,0.15);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.2);border-radius:20px;padding:2rem;text-align:center;position:relative;overflow:hidden} .profile-card-modern::before {content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.5),transparent)} .profile-avatar {position:relative;width:120px;height:120px;margin:0 auto 1.5rem} .profile-avatar img,.avatar-placeholder {width:100%;height:100%;border-radius:50%;object-fit:cover} .avatar-placeholder {background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;font-size:3rem;color:white} .premium-badge {position:absolute;top:-5px;right:-5px;width:40px;height:40px;background:linear-gradient(135deg,#ffd700,#ffed4e);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#333;font-size:1.2rem;box-shadow:0 4px 15px rgba(255,215,0,0.4)} .profile-name {font-size:1.5rem;font-weight:700;color:white;margin-bottom:0.5rem} .profile-email {color:rgba(255,255,255,0.8);margin-bottom:1.5rem} .profile-actions {display:flex;justify-content:center;gap:1rem} .dashboard-content {padding:3rem 0;position:relative;z-index:1;background:transparent;margin-top:0;width:100%;clear:both} .modern-dashboard>* {position:relative} .modern-dashboard::after {content:"";display:table;clear:both} .modern-card {background:white;border-radius:20px;box-shadow:0 10px 40px rgba(0,0,0,0.1);overflow:hidden;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);margin-bottom:2rem} .modern-card:hover {transform:translateY(-5px);box-shadow:0 20px 60px rgba(0,0,0,0.15)} .card-header-modern {padding:2rem 2rem 1rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f0f0f0} .card-title-modern {font-size:1.5rem;font-weight:700;color:#333;display:flex;align-items:center;gap:0.75rem;margin:0} .card-title-modern i {color:#1e3a8a;font-size:1.25rem} .view-all-btn {color:#1e3a8a;text-decoration:none;font-weight:600;display:flex;align-items:center;gap:0.5rem;transition:all 0.3s ease} .view-all-btn:hover {color:#dc2626;transform:translateX(5px)} .card-content {padding:1rem 2rem 2rem} .subscription-card {background:#1e3a8a;color:white} .subscription-card .card-header-modern {border-bottom-color:rgba(255,255,255,0.2)} .subscription-card .card-title-modern,.subscription-card .view-all-btn {color:white} .subscription-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem} .subscription-item {background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);border-radius:15px;padding:1.5rem;border:1px solid rgba(255,255,255,0.2)} .subscription-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem} .subscription-header h3 {font-size:1.25rem;font-weight:700;margin:0} .premium-badge-small {width:30px;height:30px;background:linear-gradient(135deg,#ffd700,#ffb347);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#333} .expiry-date {display:flex;align-items:center;gap:0.5rem;margin-bottom:1rem;opacity:0.9} .progress-modern {background:rgba(255,255,255,0.2);border-radius:10px;height:8px;margin-bottom:0.75rem;overflow:hidden} .progress-bar-modern {background:linear-gradient(90deg,#ffd700,#ffb347);height:100%;border-radius:10px;transition:width 0.3s ease} .days-remaining {font-size:0.9rem;opacity:0.9;margin:0} .video-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem} .video-card {background:#f8f9fa;border-radius:15px;overflow:hidden;transition:all 0.3s cubic-bezier(0.4,0,0.2,1)} .video-card:hover {transform:translateY(-3px);box-shadow:0 15px 35px rgba(0,0,0,0.1)} .video-thumbnail {position:relative;aspect-ratio:16/9;overflow:hidden} .video-thumbnail img {width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease} .video-card:hover .video-thumbnail img {transform:scale(1.05)} .play-overlay {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity 0.3s ease} .video-card:hover .play-overlay {opacity:1} .play-btn {width:60px;height:60px;background:rgba(255,255,255,0.95);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#1e3a8a;font-size:1.5rem;text-decoration:none;transition:all 0.3s ease;box-shadow:0 8px 25px rgba(0,0,0,0.2)} .play-btn:hover {background:white;transform:scale(1.1);color:#dc2626} .progress-overlay {position:absolute;bottom:0;left:0;right:0;height:4px;background:rgba(0,0,0,0.3)} .progress-bar-video {height:100%;background:linear-gradient(90deg,#1e3a8a,#dc2626);transition:width 0.3s ease} .video-info {padding:1.5rem} .video-title {font-size:1.1rem;font-weight:700;color:#333;margin-bottom:0.5rem;line-height:1.3} .lesson-title {color:#666;font-size:0.9rem;margin-bottom:1rem;line-height:1.4} .video-meta {display:flex;justify-content:space-between;align-items:center} .progress-text {font-size:0.85rem;color:#1e3a8a;font-weight:600} .classes-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem} .class-card {background:white;border-radius:15px;overflow:hidden;box-shadow:0 5px 20px rgba(0,0,0,0.08);transition:all 0.3s cubic-bezier(0.4,0,0.2,1)} .class-card:hover {transform:translateY(-5px);box-shadow:0 15px 40px rgba(0,0,0,0.15)} .class-thumbnail {position:relative;aspect-ratio:16/9;overflow:hidden} .class-thumbnail img {width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease} .class-card:hover .class-thumbnail img {transform:scale(1.05)} .class-overlay {position:absolute;top:1rem;right:1rem;background:rgba(0,0,0,0.8);color:white;padding:0.5rem 0.75rem;border-radius:20px;font-size:0.8rem;display:flex;align-items:center;gap:0.25rem} .class-info {padding:1.5rem} .class-title {font-size:1.1rem;font-weight:700;color:#333;margin-bottom:0.75rem;line-height:1.3} .instructor-name {color:#666;font-size:0.9rem;margin-bottom:1rem;display:flex;align-items:center;gap:0.5rem} .class-progress {margin-bottom:1rem} .progress-info {display:flex;justify-content:space-between;align-items:center;font-size:0.85rem;color:#1e3a8a;margin-bottom:0.5rem} .mini-progress {background:#e9ecef;height:4px;border-radius:2px;overflow:hidden} .mini-progress-bar {background:linear-gradient(90deg,#1e3a8a,#dc2626);height:100%;transition:width 0.3s ease} .upgrade-card {background:linear-gradient(135deg,#ffd700 0%,#ffb347 100%);border-radius:20px;padding:3rem;text-align:center;position:relative;overflow:hidden;margin-bottom:2rem} .upgrade-card::before {content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,0.1) 0%,transparent 70%);animation:shimmer 3s ease-in-out infinite} @keyframes shimmer {0%,100% {transform:rotate(0deg)} 50% {transform:rotate(180deg)} } .upgrade-content {position:relative;z-index:2} .upgrade-icon {font-size:4rem;color:#333;margin-bottom:1.5rem} .upgrade-card h2 {font-size:2.5rem;font-weight:800;color:#333;margin-bottom:1rem} .upgrade-card p {font-size:1.2rem;color:#555;margin-bottom:2rem;max-width:600px;margin-left:auto;margin-right:auto} .upgrade-features {display:flex;justify-content:center;gap:2rem;margin-bottom:2rem;flex-wrap:wrap} .feature-item {display:flex;align-items:center;gap:0.5rem;color:#333;font-weight:600} .feature-item i {color:#28a745;font-size:1.2rem} .btn-modern {background:#dc2626;border:none;color:white;padding:0.75rem 1.5rem;border-radius:8px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:0.5rem;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow:0 4px 15px rgba(220,38,38,0.3);cursor:pointer;font-size:0.9rem} .btn-modern.btn-outline {background:#ffd700;color:#333;border:1px solid #ffd700;font-weight:700} .btn-modern.btn-outline:hover {background:#ffed4e;transform:translateY(-2px);box-shadow:0 8px 25px rgba(255,215,0,0.4)} .btn-modern.btn-primary {background:#dc2626;color:white} .btn-modern.btn-primary:hover {transform:translateY(-2px);box-shadow:0 8px 25px rgba(220,38,38,0.4)} .btn-modern.btn-lg {padding:1rem 2rem;font-size:1.1rem} .btn-modern.btn-sm {padding:0.5rem 1rem;font-size:0.85rem} .modern-card {background:white;border-radius:20px;box-shadow:0 10px 40px rgba(0,0,0,0.1);overflow:hidden;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);margin-bottom:2rem} .modern-card:hover {transform:translateY(-5px);box-shadow:0 20px 60px rgba(0,0,0,0.15)} .card-header-modern {padding:2rem 2rem 1rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f0f0f0} .card-title-modern {font-size:1.5rem;font-weight:700;color:#333;display:flex;align-items:center;gap:0.75rem;margin:0} .card-title-modern i {color:#667eea;font-size:1.25rem} .view-all-btn {color:#667eea;text-decoration:none;font-weight:600;display:flex;align-items:center;gap:0.5rem;transition:all 0.3s ease} .view-all-btn:hover {color:#764ba2;transform:translateX(5px)} .card-content {padding:1rem 2rem 2rem} .subscription-card {background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white} .subscription-card .card-header-modern {border-bottom-color:rgba(255,255,255,0.2)} .subscription-card .card-title-modern,.subscription-card .view-all-btn {color:white} .subscription-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem} .subscription-item {background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);border-radius:15px;padding:1.5rem;border:1px solid rgba(255,255,255,0.2)} .subscription-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem} .subscription-header h3 {font-size:1.25rem;font-weight:700;margin:0} .premium-badge-small {width:30px;height:30px;background:linear-gradient(135deg,#ffd700,#ffed4e);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#333} .expiry-date {display:flex;align-items:center;gap:0.5rem;margin-bottom:1rem;opacity:0.9} .progress-modern {background:rgba(255,255,255,0.2);border-radius:10px;height:8px;margin-bottom:0.75rem;overflow:hidden} .progress-bar-modern {background:linear-gradient(90deg,#ffd700,#ffed4e);height:100%;border-radius:10px;transition:width 0.3s ease} .days-remaining {font-size:0.9rem;opacity:0.9;margin:0} .video-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem} .video-card {background:#f8f9fa;border-radius:15px;overflow:hidden;transition:all 0.3s cubic-bezier(0.4,0,0.2,1)} .video-card:hover {transform:translateY(-3px);box-shadow:0 15px 35px rgba(0,0,0,0.1)} .video-thumbnail {position:relative;aspect-ratio:16/9;overflow:hidden} .video-thumbnail img {width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease} .video-card:hover .video-thumbnail img {transform:scale(1.05)} .play-overlay {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity 0.3s ease} .video-card:hover .play-overlay {opacity:1} .play-btn {width:60px;height:60px;background:rgba(255,255,255,0.95);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#667eea;font-size:1.5rem;text-decoration:none;transition:all 0.3s ease;box-shadow:0 8px 25px rgba(0,0,0,0.2)} .play-btn:hover {background:white;transform:scale(1.1)} .progress-overlay {position:absolute;bottom:0;left:0;right:0;height:4px;background:rgba(0,0,0,0.3)} .progress-bar-video {height:100%;background:linear-gradient(90deg,#667eea,#764ba2);transition:width 0.3s ease} .video-info {padding:1.5rem} .video-title {font-size:1.1rem;font-weight:700;color:#333;margin-bottom:0.5rem;line-height:1.3} .lesson-title {color:#666;font-size:0.9rem;margin-bottom:1rem;line-height:1.4} .video-meta {display:flex;justify-content:space-between;align-items:center} .progress-text {font-size:0.85rem;color:#667eea;font-weight:600} .classes-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem} .class-card {background:white;border-radius:15px;overflow:hidden;box-shadow:0 5px 20px rgba(0,0,0,0.08);transition:all 0.3s cubic-bezier(0.4,0,0.2,1)} .class-card:hover {transform:translateY(-5px);box-shadow:0 15px 40px rgba(0,0,0,0.15)} .class-thumbnail {position:relative;aspect-ratio:16/9;overflow:hidden} .class-thumbnail img {width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease} .class-card:hover .class-thumbnail img {transform:scale(1.05)} .class-overlay {position:absolute;top:1rem;right:1rem;background:rgba(0,0,0,0.8);color:white;padding:0.5rem 0.75rem;border-radius:20px;font-size:0.8rem;display:flex;align-items:center;gap:0.25rem} .class-info {padding:1.5rem} .class-title {font-size:1.1rem;font-weight:700;color:#333;margin-bottom:0.75rem;line-height:1.3} .instructor-name {color:#666;font-size:0.9rem;margin-bottom:1rem;display:flex;align-items:center;gap:0.5rem} .class-progress {margin-bottom:1rem} .progress-info {display:flex;justify-content:space-between;align-items:center;font-size:0.85rem;color:#667eea;margin-bottom:0.5rem} .mini-progress {background:#e9ecef;height:4px;border-radius:2px;overflow:hidden} .mini-progress-bar {background:linear-gradient(90deg,#667eea,#764ba2);height:100%;transition:width 0.3s ease} .upgrade-card {background:linear-gradient(135deg,#ffd700 0%,#ffed4e 100%);border-radius:20px;padding:3rem;text-align:center;position:relative;overflow:hidden;margin-bottom:2rem} .upgrade-card::before {content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,0.1) 0%,transparent 70%);animation:shimmer 3s ease-in-out infinite} @keyframes shimmer {0%,100% {transform:rotate(0deg)} 50% {transform:rotate(180deg)} } .upgrade-content {position:relative;z-index:2} .upgrade-icon {font-size:4rem;color:#333;margin-bottom:1.5rem} .upgrade-card h2 {font-size:2.5rem;font-weight:800;color:#333;margin-bottom:1rem} .upgrade-card p {font-size:1.2rem;color:#555;margin-bottom:2rem;max-width:600px;margin-left:auto;margin-right:auto} .upgrade-features {display:flex;justify-content:center;gap:2rem;margin-bottom:2rem;flex-wrap:wrap} .feature-item {display:flex;align-items:center;gap:0.5rem;color:#333;font-weight:600} .feature-item i {color:#28a745;font-size:1.2rem} .auth-container {background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh} .modern-alert {border:none;border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,0.1);margin-bottom:20px} .alert-icon {flex-shrink:0} .alert-title {font-size:14px;margin-bottom:2px} .alert-message {font-size:13px;opacity:0.9} .alert-link {color:inherit !important;text-decoration:underline !important} .alert-link:hover {opacity:0.8} .form-control:focus {border-color:#667eea;box-shadow:0 0 0 0.2rem rgba(102,126,234,0.25)} .btn-primary {background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:8px;transition:all 0.3s ease} .btn-primary:hover {transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.2)} .btn-outline-primary {border-radius:8px;transition:all 0.3s ease} .btn-outline-primary:hover {transform:translateY(-1px)} .card {border-radius:16px;overflow:hidden} .card-header {border-radius:16px 16px 0 0 !important} .input-group-text {background:#f8f9fa;border-color:#dee2e6} .form-control {border-radius:0 8px 8px 0} .input-group-text {border-radius:8px 0 0 8px} .alert {animation:slideInDown 0.5s ease-out} @keyframes slideInDown {from {opacity:0;transform:translateY(-20px)} to {opacity:1;transform:translateY(0)} } .bg-gradient-primary {background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)} .bg-gradient-warning {background:linear-gradient(135deg,#ffc107 0%,#ff8c00 100%)} .class-card {transition:transform 0.2s ease-in-out} .class-card:hover {transform:translateY(-5px)} .list-view .class-item {width:100%} .list-view .class-card {flex-direction:row} .list-view .class-card img {width:200px;height:150px;object-fit:cover} .list-view .card-body {flex:1} .subscription-page {background:linear-gradient(135deg,#1e3a8a 0%,#1e40af 50%,#1d4ed8 100%);min-height:100vh;position:relative;overflow-x:hidden} .subscription-page::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="20" cy="20" r="2" fill="white" opacity="0.1"><animate attributeName="opacity" values="0.1;0.3;0.1" dur="3s" repeatCount="indefinite"/></circle><circle cx="80" cy="30" r="1.5" fill="white" opacity="0.15"><animate attributeName="opacity" values="0.15;0.4;0.15" dur="4s" repeatCount="indefinite"/></circle><circle cx="40" cy="70" r="1" fill="white" opacity="0.2"><animate attributeName="opacity" values="0.2;0.5;0.2" dur="2s" repeatCount="indefinite"/></circle></svg>') repeat;pointer-events:none} .subscription-page .hero-section {padding:6rem 0 4rem;position:relative;z-index:2} .subscription-page .hero-content {text-align:center;color:white;max-width:800px;margin:0 auto} .subscription-page .hero-badge {display:inline-block;background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);padding:0.75rem 2rem;border-radius:50px;border:1px solid rgba(255,255,255,0.2);margin-bottom:2rem;font-weight:600;font-size:0.9rem} .subscription-page .hero-title {font-size:3.5rem;font-weight:900;margin-bottom:1.5rem;line-height:1.2} .subscription-page .hero-subtitle {font-size:1.3rem;opacity:0.9;margin-bottom:3rem;line-height:1.6} .subscription-page .hero-stats {display:flex;justify-content:center;gap:3rem;margin-top:3rem} .subscription-page .stat-item {text-align:center} .subscription-page .stat-number {font-size:2.5rem;font-weight:800;color:#ffd700;display:block} .subscription-page .stat-label {font-size:0.9rem;opacity:0.8;margin-top:0.5rem} .subscription-page .pricing-section {background:white;padding:6rem 0;position:relative;z-index:2} .subscription-page .section-header {text-align:center;margin-bottom:4rem} .subscription-page .section-title {font-size:2.5rem;font-weight:800;color:#1a1a1a;margin-bottom:1rem} .subscription-page .section-subtitle {font-size:1.1rem;color:#666;max-width:600px;margin:0 auto} .subscription-page .pricing-toggle {display:flex;justify-content:center;margin-bottom:4rem} .subscription-page .toggle-container {background:#f8f9fa;padding:0.5rem;border-radius:50px;display:flex;align-items:center;gap:1rem;border:1px solid #e9ecef} .subscription-page .toggle-label {font-weight:600;color:#666;font-size:0.9rem;padding:0.5rem 1rem} .subscription-page .toggle-switch {position:relative} .subscription-page .toggle-switch input {opacity:0;width:0;height:0} .subscription-page .toggle-slider {position:relative;display:inline-block;width:50px;height:24px;background:#ccc;border-radius:24px;cursor:pointer;transition:0.3s} .subscription-page .toggle-slider:before {position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background:white;border-radius:50%;transition:0.3s} .subscription-page input:checked+.toggle-slider {background:#dc2626} .subscription-page input:checked+.toggle-slider:before {transform:translateX(26px)} .subscription-page .save-badge {background:linear-gradient(135deg,#ffd700,#ffb347);color:#333;padding:0.25rem 0.75rem;border-radius:15px;font-size:0.75rem;font-weight:700;margin-left:0.5rem} .subscription-page .pricing-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;max-width:1200px;margin:0 auto;padding:0 1rem} .subscription-page .pricing-card {background:white;border-radius:24px;padding:3rem 2rem;position:relative;box-shadow:0 10px 40px rgba(0,0,0,0.1);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);border:2px solid transparent;overflow:hidden} .subscription-page .pricing-card:hover {transform:translateY(-8px);box-shadow:0 20px 60px rgba(0,0,0,0.15)} .subscription-page .pricing-card.popular {border-color:#dc2626;transform:scale(1.05);background:linear-gradient(135deg,#fff5f5 0%,#ffffff 100%)} .subscription-page .pricing-card.popular::before {content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#dc2626,#ffd700)} .subscription-page .popular-badge {position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#dc2626,#b91c1c);color:white;padding:0.5rem 1.5rem;border-radius:20px;font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;box-shadow:0 4px 15px rgba(220,38,38,0.3)} .subscription-page .plan-header {text-align:center;margin-bottom:2rem} .subscription-page .plan-icon {width:80px;height:80px;background:linear-gradient(135deg,#dc2626,#b91c1c);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;font-size:2rem;color:white;box-shadow:0 8px 25px rgba(220,38,38,0.3)} .subscription-page .plan-name {font-size:1.5rem;font-weight:700;color:#1a1a1a;margin-bottom:0.5rem} .subscription-page .plan-description {color:#666;font-size:0.9rem;line-height:1.5} .subscription-page .plan-pricing {text-align:center;margin:2rem 0;padding:1.5rem 0;border-top:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0} .subscription-page .price-display {display:flex;align-items:baseline;justify-content:center;gap:0.25rem;margin-bottom:0.5rem} .subscription-page .currency {font-size:1.2rem;font-weight:600;color:#dc2626} .subscription-page .price {font-size:3rem;font-weight:900;color:#1a1a1a;line-height:1} .subscription-page .period {font-size:1rem;color:#666;font-weight:500} .subscription-page .usd-price {color:#999;font-size:0.85rem} .subscription-page .plan-features {margin-bottom:2rem} .subscription-page .feature-item {display:flex;align-items:center;gap:0.75rem;margin-bottom:0.75rem} .subscription-page .feature-check {width:20px;height:20px;background:linear-gradient(135deg,#28a745,#20c997);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:0.7rem;flex-shrink:0} .subscription-page .feature-text {color:#555;font-size:0.9rem;line-height:1.4} .subscription-page .plan-cta {text-align:center} .subscription-page .cta-button {width:100%;padding:1rem 2rem;border-radius:16px;font-weight:700;font-size:1rem;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);border:none;cursor:pointer;margin-bottom:1rem} .subscription-page .cta-button.primary {background:linear-gradient(135deg,#dc2626,#b91c1c);color:white;box-shadow:0 8px 25px rgba(220,38,38,0.3)} .subscription-page .cta-button.primary:hover {transform:translateY(-2px);box-shadow:0 12px 35px rgba(220,38,38,0.4)} .subscription-page .cta-button.secondary {background:transparent;color:#dc2626;border:2px solid #dc2626} .subscription-page .cta-button.secondary:hover {background:#dc2626;color:white;transform:translateY(-2px)} .subscription-page .guarantee {color:#28a745;font-size:0.8rem;font-weight:600;display:flex;align-items:center;justify-content:center;gap:0.5rem} .subscription-page .faq-section {background:#f8f9fa;padding:6rem 0} .subscription-page .faq-container {max-width:800px;margin:0 auto} .subscription-page .faq-item {background:white;border-radius:12px;margin-bottom:1rem;box-shadow:0 2px 10px rgba(0,0,0,0.05);overflow:hidden} .subscription-page .faq-question {padding:1.5rem;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:background 0.3s ease} .subscription-page .faq-question:hover {background:#f8f9fa} .subscription-page .faq-question h3 {font-size:1rem;font-weight:600;color:#333;margin:0} .subscription-page .faq-toggle {width:24px;height:24px;background:#dc2626;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:0.8rem;transition:transform 0.3s ease} .subscription-page .faq-item.active .faq-toggle {transform:rotate(45deg)} .subscription-page .faq-answer {padding:0 1.5rem 1.5rem;color:#666;line-height:1.6;display:none} .subscription-page .faq-item.active .faq-answer {display:block} @media (max-width:768px) {.subscription-page .hero-title {font-size:2.5rem} .subscription-page .hero-stats {flex-direction:column;gap:1.5rem} .subscription-page .pricing-grid {grid-template-columns:1fr;gap:1.5rem} .subscription-page .pricing-card.popular {transform:none} .subscription-page .toggle-container {flex-direction:column;gap:0.5rem;padding:1rem} } @media (max-width:576px) {.subscription-page .hero-section {padding:4rem 0 2rem} .subscription-page .hero-title {font-size:2rem} .subscription-page .pricing-card {padding:2rem 1.5rem} .subscription-page .price {font-size:2.5rem} } .featured-courses {padding:6rem 0;background:#f8f9fa} .courses-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem} .course-card {background:white;border-radius:20px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,0.1);transition:all 0.3s cubic-bezier(0.4,0,0.2,1)} .course-card:hover {transform:translateY(-8px);box-shadow:0 20px 50px rgba(0,0,0,0.15)} .course-image {position:relative;aspect-ratio:16/9;overflow:hidden} .course-image img {width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease} .course-card:hover .course-image img {transform:scale(1.05)} .course-overlay {position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom,rgba(0,0,0,0.3) 0%,transparent 50%,rgba(0,0,0,0.7) 100%);display:flex;flex-direction:column;justify-content:space-between;padding:1.5rem;opacity:0;transition:opacity 0.3s ease} .course-card:hover .course-overlay {opacity:1} .course-badges {display:flex;gap:0.75rem;align-self:flex-start} .featured-badge,.duration-badge {padding:0.5rem 1rem;border-radius:20px;font-size:0.8rem;font-weight:600} .featured-badge {background:linear-gradient(135deg,#ffd700,#ffb347);color:#333} .duration-badge {background:rgba(0,0,0,0.7);color:white} .course-preview {align-self:center} .preview-btn {width:60px;height:60px;background:rgba(255,255,255,0.95);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#dc2626;font-size:1.5rem;cursor:pointer;transition:all 0.3s ease;box-shadow:0 8px 25px rgba(0,0,0,0.2)} .preview-btn:hover {background:white;transform:scale(1.1)} .course-content {padding:2rem} .course-meta {display:flex;gap:0.75rem;margin-bottom:1rem} .category-tag,.difficulty-tag {padding:0.25rem 0.75rem;border-radius:12px;font-size:0.8rem;font-weight:600} .category-tag {background:#e3f2fd;color:#1976d2} .difficulty-tag {background:#f3e5f5;color:#7b1fa2} .difficulty-tag.beginner {background:#e8f5e8;color:#2e7d32} .difficulty-tag.intermediate {background:#fff3e0;color:#f57c00} .difficulty-tag.advanced {background:#ffebee;color:#d32f2f} .course-title {font-size:1.25rem;font-weight:700;color:#333;margin-bottom:0.75rem;line-height:1.3} .course-description {color:#666;line-height:1.6;margin-bottom:1.5rem} .course-stats {display:flex;justify-content:space-between;align-items:center} .stat-item {display:flex;align-items:center;gap:0.5rem;color:#666;font-size:0.9rem} .stat-item i {color:#dc2626} .faq-section {padding:6rem 0;background:white} .faq-container {max-width:800px;margin:0 auto} .faq-item {background:white;border-radius:16px;margin-bottom:1rem;box-shadow:0 4px 20px rgba(0,0,0,0.08);overflow:hidden;transition:all 0.3s ease} .faq-item:hover {box-shadow:0 8px 30px rgba(0,0,0,0.12)} .faq-question {padding:2rem;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:all 0.3s ease} .faq-question:hover {background:#f8f9fa} .faq-question h3 {font-size:1.1rem;font-weight:600;color:#333;margin:0;line-height:1.4} .faq-toggle {width:32px;height:32px;background:#dc2626;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:0.9rem;transition:all 0.3s ease;flex-shrink:0} .faq-item.active .faq-toggle {transform:rotate(45deg)} .faq-answer {padding:0 2rem 2rem;color:#666;line-height:1.7;max-height:0;overflow:hidden;transition:all 0.3s ease} .faq-item.active .faq-answer {max-height:200px;padding-top:0} .hero-gradient-overlay {position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,rgba(102,126,234,0.1),rgba(118,75,162,0.1))} .auth-container {background:#1e3a8a;min-height:100vh} .modern-alert {border:none;border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,0.1);margin-bottom:20px} .alert-icon {flex-shrink:0} .alert-title {font-size:14px;margin-bottom:2px} .alert-message {font-size:13px;opacity:0.9} .alert-link {color:inherit !important;text-decoration:underline !important} .alert-link:hover {opacity:0.8} .form-control:focus {border-color:#1e3a8a;box-shadow:0 0 0 0.2rem rgba(30,58,138,0.25)} .form-select:focus {border-color:#1e3a8a;box-shadow:0 0 0 0.2rem rgba(30,58,138,0.25)} .btn-primary {background:#dc2626;border:none;border-radius:8px;transition:all 0.3s ease} .btn-primary:hover {transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.2)} .btn-outline-primary {border-radius:8px;transition:all 0.3s ease} .btn-outline-primary:hover {transform:translateY(-1px)} .card {border-radius:16px;overflow:hidden;transition:transform 0.2s ease-in-out} .card:hover {transform:translateY(-2px)} .card-header {border-radius:16px 16px 0 0 !important} .input-group-text {background:#f8f9fa;border-color:#dee2e6;border-radius:8px 0 0 8px} .form-control {border-radius:0 8px 8px 0} .alert {animation:slideInDown 0.5s ease-out} @keyframes slideInDown {from {opacity:0;transform:translateY(-20px)} to {opacity:1;transform:translateY(0)} } .verification-icon {animation:pulse 2s infinite} @keyframes pulse {0% {transform:scale(1)} 50% {transform:scale(1.05)} 100% {transform:scale(1)} } .email-display {background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border-radius:12px;padding:20px;border:2px dashed #dee2e6} .email-icon {opacity:0.7} .otp-input-container {position:relative} .otp-input {font-family:'Courier New',monospace;font-size:24px;font-weight:bold;letter-spacing:8px;border-radius:12px;border:2px solid #dee2e6;transition:all 0.3s ease} .otp-input:focus {border-color:#1e3a8a;box-shadow:0 0 0 0.2rem rgba(30,58,138,0.25);transform:scale(1.02)} .verify-btn {border-radius:12px;padding:12px;font-weight:600;transition:all 0.3s ease} .verify-btn:hover {transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.2)} .resend-section {background:#f8f9fa;border-radius:12px;padding:20px;margin:20px -20px -20px -20px} .help-section {background:#e9ecef;border-radius:12px;padding:20px;margin:20px -20px -20px -20px} .verify-btn.loading {position:relative;color:transparent} .verify-btn.loading::after {content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;border:2px solid #ffffff;border-top:2px solid transparent;border-radius:50%;animation:spin 1s linear infinite} @keyframes spin {0% {transform:translate(-50%,-50%) rotate(0deg)} 100% {transform:translate(-50%,-50%) rotate(360deg)} } @media (max-width:768px) {.hero-dashboard {padding:1.5rem 0;position:relative;z-index:2} .hero-title {font-size:2rem} .quick-stats {flex-direction:column;gap:1rem} .profile-actions {flex-direction:column} .card-header-modern {flex-direction:column;gap:1rem;align-items:flex-start} .dashboard-content {padding:2rem 0;position:relative;z-index:1} .card-content,.card-header-modern {padding-left:1rem;padding-right:1rem} .video-grid,.subscription-grid {grid-template-columns:1fr} .modern-dashboard {display:block;position:relative} } @media (max-width:576px) {.hero-dashboard {padding:1rem 0} .dashboard-content {padding:1.5rem 0} .modern-card {margin-bottom:1.5rem} } .container,.container-fluid,.row,.col-12,.col-md-6,.col-lg-4,.col-lg-6,.col-lg-8,.col-lg-10 {max-width:100%;overflow-x:hidden} .insights-card-image,.blog-featured-image,.insights-illustration {max-width:100%;height:auto;object-fit:cover} .post-content img {max-width:100%;height:auto;object-fit:cover} .form-check-lg .form-check-input {width:1.25rem;height:1.25rem;margin-top:0.125rem} .form-check-lg .form-check-label {font-size:1.1rem;margin-left:0.5rem} .benefit-icon,.program-icon {width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;margin-bottom:1rem} .certificate-hero {background:linear-gradient(135deg,#1e3a8a 0%,#3b82f6 100%);color:white;padding:4rem 0} .page-stats {text-align:center;padding:2rem 0;background:#f8f9fa;border-radius:10px;margin:2rem 0} .filter-badge {font-size:0.85rem !important;font-weight:500 !important;padding:0.5rem 1rem !important;border-radius:20px !important;transition:all 0.3s ease !important} .filter-badge:hover {transform:translateY(-2px) !important;box-shadow:0 4px 12px rgba(0,0,0,0.15) !important} .text-decoration-none {text-decoration:none !important} .fw-bold {font-weight:700 !important} .fw-semibold {font-weight:600 !important} .rounded-pill {border-radius:50rem !important} .shadow-sm {box-shadow:0 0.125rem 0.25rem rgba(0,0,0,0.075) !important} .shadow {box-shadow:0 0.5rem 1rem rgba(0,0,0,0.15) !important} .shadow-lg {box-shadow:0 1rem 3rem rgba(0,0,0,0.175) !important}