/** * Course Management System - Frontend Styles v2.7.0 * Premium Mobile-First Design * Colors: Deep Black, Navy Blue, Rich Gold * By WEBAPP.LK */  .cms-registration-wrapper *, .cms-certificate-verify * { box-sizing: border-box; margin: 0; padding: 0; } .cms-registration-wrapper, .cms-certificate-verify { --cms-gold: #D4AF37; --cms-gold-dark: #B8960C; --cms-gold-light: #E8D48A; --cms-navy: #1a237e; --cms-navy-dark: #0d1642; --cms-navy-light: #3949ab; --cms-black: #000000; --cms-black-soft: #1a1a1a; --cms-white: #ffffff; --cms-gray: #6c757d; --cms-gray-light: #f8f9fa; --cms-success: #28a745; --cms-danger: #dc3545; --cms-warning: #ffc107; --cms-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); --cms-shadow-hover: 0 20px 50px rgba(0, 0, 0, 0.2); --cms-radius: 20px; --cms-radius-sm: 15px; --cms-radius-xs: 10px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif !important; max-width: 1000px !important; margin: 0 auto !important; padding: 20px !important; color: var(--cms-black) !important; line-height: 1.6 !important; }  .cms-registration-wrapper h2 { background: linear-gradient(135deg, var(--cms-navy) 0%, var(--cms-navy-dark) 100%) !important; border-radius: var(--cms-radius) !important; padding: 40px 30px !important; text-align: center !important; margin: 0 0 30px 0 !important; box-shadow: var(--cms-shadow) !important; position: relative !important; overflow: hidden !important; color: var(--cms-gold) !important; font-size: 28px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 2px !important; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) !important; } .cms-registration-wrapper h2::before { content: '' !important; position: absolute !important; top: -50% !important; right: -50% !important; width: 100% !important; height: 100% !important; background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%) !important; pointer-events: none !important; }  .cms-registration-wrapper h3 { color: var(--cms-navy) !important; font-size: 20px !important; font-weight: 800 !important; margin: 0 0 25px 0 !important; padding: 0 0 15px 0 !important; border-bottom: 4px solid var(--cms-gold) !important; text-transform: none !important; letter-spacing: 0.5px !important; } .cms-registration-wrapper h4 { color: var(--cms-black) !important; font-size: 18px !important; font-weight: 700 !important; margin: 0 0 15px 0 !important; } .cms-registration-wrapper h5 { color: var(--cms-black-soft) !important; font-size: 14px !important; font-weight: 700 !important; margin: 0 0 10px 0 !important; } .cms-registration-wrapper p { color: var(--cms-black-soft) !important; font-size: 15px !important; margin: 0 0 12px 0 !important; line-height: 1.7 !important; }  .cms-alert, .cms-alert-info, .cms-alert-warning { background: linear-gradient(135deg, var(--cms-navy) 0%, var(--cms-navy-dark) 100%) !important; border-radius: var(--cms-radius) !important; padding: 30px 25px !important; text-align: center !important; color: var(--cms-white) !important; box-shadow: var(--cms-shadow) !important; margin-bottom: 25px !important; border: none !important; } .cms-alert p, .cms-alert-info p, .cms-alert-warning p { font-size: 16px !important; color: var(--cms-white) !important; margin: 0 !important; line-height: 1.7 !important; } .cms-alert a, .cms-alert-info a, .cms-alert-warning a { color: var(--cms-gold) !important; font-weight: 700 !important; text-decoration: none !important; border-bottom: 2px solid var(--cms-gold) !important; transition: all 0.3s ease !important; } .cms-alert a:hover, .cms-alert-info a:hover, .cms-alert-warning a:hover { color: var(--cms-gold-light) !important; border-color: var(--cms-gold-light) !important; }  .cms-step { background: var(--cms-white) !important; padding: 35px 30px !important; border-radius: var(--cms-radius) !important; box-shadow: var(--cms-shadow) !important; margin-bottom: 25px !important; border: none !important; animation: fadeInUp 0.6s ease forwards !important; }  .cms-course-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 20px !important; margin-bottom: 25px !important; }  .cms-course-card { background: var(--cms-white) !important; border-radius: var(--cms-radius) !important; overflow: hidden !important; box-shadow: var(--cms-shadow) !important; border: 3px solid transparent !important; transition: all 0.4s ease !important; cursor: pointer !important; position: relative !important; } .cms-course-card::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 5px !important; background: linear-gradient(90deg, var(--cms-gold) 0%, var(--cms-gold-dark) 100%) !important; } .cms-course-card:hover { border-color: var(--cms-gold) !important; transform: translateY(-8px) !important; box-shadow: var(--cms-shadow-hover) !important; } .cms-course-card.selected { border-color: var(--cms-gold) !important; background: linear-gradient(135deg, #fffdf5 0%, #fff9e6 100%) !important; box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.3), var(--cms-shadow) !important; } .cms-course-card.already-purchased { opacity: 0.75 !important; } .cms-course-card h4 { background: linear-gradient(135deg, var(--cms-black) 0%, var(--cms-black-soft) 100%) !important; color: var(--cms-white) !important; padding: 20px !important; margin: 0 !important; font-size: 17px !important; font-weight: 700 !important; border-bottom: 4px solid var(--cms-gold) !important; padding-right: 90px !important; } .cms-course-type { position: absolute !important; top: 25px !important; right: 15px !important; background: linear-gradient(135deg, var(--cms-gold) 0%, var(--cms-gold-dark) 100%) !important; color: var(--cms-black) !important; padding: 6px 14px !important; border-radius: 25px !important; font-size: 10px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 1px !important; box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4) !important; } .cms-course-type.online { background: linear-gradient(135deg, var(--cms-navy) 0%, var(--cms-navy-dark) 100%) !important; color: var(--cms-white) !important; } .cms-course-type.physical { background: linear-gradient(135deg, var(--cms-success) 0%, #1e7e34 100%) !important; color: var(--cms-white) !important; } .cms-course-price { font-size: 28px !important; font-weight: 900 !important; color: var(--cms-gold-dark) !important; margin: 20px 20px 10px 20px !important; text-shadow: 1px 1px 2px rgba(0,0,0,0.1) !important; } .cms-course-duration { font-size: 14px !important; color: var(--cms-gray) !important; margin: 0 20px 15px 20px !important; font-weight: 600 !important; }  .select-course-btn { display: block !important; width: calc(100% - 40px) !important; margin: 0 20px 20px 20px !important; padding: 15px 25px !important; background: linear-gradient(135deg, var(--cms-navy) 0%, var(--cms-navy-dark) 100%) !important; color: var(--cms-white) !important; border: none !important; border-radius: var(--cms-radius-sm) !important; font-size: 15px !important; font-weight: 700 !important; text-align: center !important; text-decoration: none !important; cursor: pointer !important; transition: all 0.3s ease !important; text-transform: uppercase !important; letter-spacing: 1px !important; } .select-course-btn:hover { background: linear-gradient(135deg, var(--cms-gold) 0%, var(--cms-gold-dark) 100%) !important; color: var(--cms-black) !important; transform: translateY(-3px) !important; box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4) !important; }  .cms-btn { display: inline-block !important; padding: 15px 30px !important; border-radius: var(--cms-radius-sm) !important; font-size: 15px !important; font-weight: 700 !important; text-decoration: none !important; cursor: pointer !important; transition: all 0.3s ease !important; border: none !important; text-align: center !important; text-transform: uppercase !important; letter-spacing: 1px !important; } .cms-btn-primary { background: linear-gradient(135deg, var(--cms-gold) 0%, var(--cms-gold-dark) 100%) !important; color: var(--cms-black) !important; box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4) !important; } .cms-btn-primary:hover { background: linear-gradient(135deg, var(--cms-gold-light) 0%, var(--cms-gold) 100%) !important; transform: translateY(-3px) !important; box-shadow: 0 8px 25px rgba(212, 175, 55, 0.5) !important; } .cms-btn-secondary { background: linear-gradient(135deg, var(--cms-navy) 0%, var(--cms-navy-dark) 100%) !important; color: var(--cms-white) !important; } .cms-btn-secondary:hover { background: linear-gradient(135deg, var(--cms-navy-light) 0%, var(--cms-navy) 100%) !important; transform: translateY(-3px) !important; }  .cms-payment-options { display: flex !important; flex-direction: column !important; gap: 15px !important; margin: 25px 0 !important; } .cms-payment-option { background: var(--cms-white) !important; border: 3px solid #e9ecef !important; border-radius: var(--cms-radius-sm) !important; padding: 20px !important; cursor: pointer !important; transition: all 0.3s ease !important; position: relative !important; } .cms-payment-option:hover { border-color: var(--cms-gold) !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important; } .cms-payment-option.selected { border-color: var(--cms-gold) !important; background: linear-gradient(135deg, #fffdf5 0%, #fff9e6 100%) !important; box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.2) !important; } .cms-payment-option input[type="radio"] { position: absolute !important; opacity: 0 !important; } .cms-payment-option label { display: flex !important; justify-content: space-between !important; align-items: center !important; cursor: pointer !important; margin: 0 !important; padding: 0 !important; width: 100% !important; flex-wrap: wrap !important; gap: 10px !important; } .cms-payment-label { font-weight: 700 !important; color: var(--cms-black) !important; font-size: 15px !important; } .cms-amount { font-size: 22px !important; font-weight: 900 !important; color: var(--cms-gold-dark) !important; } .cms-discount { background: var(--cms-success) !important; color: var(--cms-white) !important; padding: 4px 12px !important; border-radius: 20px !important; font-size: 11px !important; font-weight: 700 !important; }  .cms-payment-methods { display: grid !important; grid-template-columns: 1fr !important; gap: 20px !important; margin: 25px 0 !important; } .cms-method-card { background: var(--cms-white) !important; border: 3px solid #e9ecef !important; border-radius: var(--cms-radius) !important; padding: 30px 20px !important; text-align: center !important; cursor: pointer !important; transition: all 0.4s ease !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important; } .cms-method-card:hover { border-color: var(--cms-gold) !important; transform: translateY(-5px) !important; box-shadow: var(--cms-shadow) !important; } .cms-method-icon { font-size: 50px !important; margin-bottom: 15px !important; display: block !important; } .cms-method-card h4 { color: var(--cms-navy) !important; font-size: 18px !important; margin: 0 0 10px 0 !important; background: none !important; padding: 0 !important; border: none !important; } .cms-method-card p { color: var(--cms-gray) !important; font-size: 14px !important; margin: 0 0 20px 0 !important; } .select-method-btn { width: 100% !important; padding: 15px !important; background: linear-gradient(135deg, var(--cms-gold) 0%, var(--cms-gold-dark) 100%) !important; color: var(--cms-black) !important; border: none !important; border-radius: var(--cms-radius-xs) !important; font-weight: 700 !important; font-size: 14px !important; cursor: pointer !important; transition: all 0.3s ease !important; text-transform: uppercase !important; letter-spacing: 1px !important; } .select-method-btn:hover { background: linear-gradient(135deg, var(--cms-gold-light) 0%, var(--cms-gold) 100%) !important; box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4) !important; }  .cms-bank-list { display: grid !important; grid-template-columns: 1fr !important; gap: 15px !important; margin: 20px 0 !important; } .cms-bank-card { background: var(--cms-white) !important; border-radius: var(--cms-radius-sm) !important; padding: 20px !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important; border-left: 5px solid var(--cms-gold) !important; transition: all 0.3s ease !important; } .cms-bank-card:hover { transform: translateX(5px) !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important; } .cms-bank-card h5 { color: var(--cms-navy) !important; font-size: 17px !important; margin: 0 0 15px 0 !important; font-weight: 800 !important; } .cms-bank-card p { margin: 8px 0 !important; font-size: 14px !important; color: var(--cms-black-soft) !important; } .cms-bank-card strong { color: var(--cms-black) !important; }  .cms-file-upload { position: relative !important; margin: 25px 0 !important; } .cms-file-upload input[type="file"] { position: absolute !important; width: 100% !important; height: 100% !important; opacity: 0 !important; cursor: pointer !important; z-index: 10 !important; } .cms-file-upload label { display: flex !important; flex-direction: column !important; align-items: center !important; padding: 40px 25px !important; background: linear-gradient(135deg, var(--cms-gray-light) 0%, #e9ecef 100%) !important; border: 3px dashed var(--cms-gold) !important; border-radius: var(--cms-radius) !important; cursor: pointer !important; transition: all 0.3s ease !important; } .cms-file-upload label:hover { background: #fff9e6 !important; border-color: var(--cms-gold-dark) !important; } .upload-icon { font-size: 50px !important; margin-bottom: 15px !important; }  .cms-user-dashboard { background: linear-gradient(135deg, var(--cms-navy) 0%, var(--cms-navy-dark) 100%) !important; border-radius: var(--cms-radius) !important; padding: 30px 25px !important; margin-bottom: 30px !important; color: var(--cms-white) !important; box-shadow: var(--cms-shadow) !important; position: relative !important; overflow: hidden !important; } .cms-user-dashboard::before { content: '' !important; position: absolute !important; top: -50% !important; right: -50% !important; width: 100% !important; height: 100% !important; background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%) !important; pointer-events: none !important; } .cms-user-info { display: flex !important; align-items: center !important; gap: 20px !important; position: relative !important; z-index: 1 !important; } .cms-user-avatar { width: 80px !important; height: 80px !important; border-radius: 50% !important; background: linear-gradient(135deg, var(--cms-gold) 0%, var(--cms-gold-dark) 100%) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 32px !important; font-weight: 800 !important; color: var(--cms-black) !important; flex-shrink: 0 !important; position: relative !important; overflow: hidden !important; border: 4px solid var(--cms-gold) !important; box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4) !important; } .cms-user-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50% !important; } .cms-user-details { flex: 1 !important; min-width: 0 !important; } .cms-user-details h4 { margin: 0 0 8px 0 !important; color: var(--cms-gold) !important; font-size: 22px !important; font-weight: 800 !important; word-break: break-word !important; background: none !important; padding: 0 !important; border: none !important; } .cms-user-details p { margin: 5px 0 !important; color: rgba(255, 255, 255, 0.85) !important; font-size: 14px !important; word-break: break-word !important; }  .cms-enrolled-course { background: var(--cms-white) !important; border-radius: var(--cms-radius) !important; overflow: hidden !important; margin-bottom: 25px !important; box-shadow: var(--cms-shadow) !important; border: 3px solid transparent !important; transition: all 0.4s ease !important; } .cms-enrolled-course:hover { border-color: var(--cms-gold) !important; transform: translateY(-5px) !important; }  .cms-access-buttons { display: flex !important; flex-direction: column !important; gap: 12px !important; margin-top: 20px !important; } .cms-access-buttons a, .cms-btn-lms, .cms-btn-zoom, .cms-btn-exam { display: block !important; width: 100% !important; padding: 15px 20px !important; text-align: center !important; border-radius: var(--cms-radius-sm) !important; font-size: 14px !important; font-weight: 700 !important; text-decoration: none !important; transition: all 0.3s ease !important; text-transform: uppercase !important; letter-spacing: 1px !important; }  .cms-payment-status { display: inline-block !important; padding: 6px 16px !important; border-radius: 25px !important; font-size: 11px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 1px !important; } .cms-status-verified { background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%) !important; color: #155724 !important; } .cms-status-pending { background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%) !important; color: #856404 !important; } .cms-status-rejected { background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%) !important; color: #721c24 !important; }  .cms-nic-field { margin: 25px 0 !important; padding: 25px !important; border-radius: var(--cms-radius-sm) !important; } .cms-nic-field input { width: 100% !important; padding: 15px 20px !important; border: 3px solid #dee2e6 !important; border-radius: var(--cms-radius-xs) !important; font-size: 16px !important; transition: all 0.3s ease !important; font-weight: 600 !important; } .cms-nic-field input:focus { outline: none !important; border-color: var(--cms-gold) !important; box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.2) !important; }  #selected-payment-summary { background: linear-gradient(135deg, var(--cms-black) 0%, var(--cms-black-soft) 100%) !important; color: var(--cms-white) !important; padding: 25px !important; border-radius: var(--cms-radius) !important; margin-bottom: 25px !important; border-bottom: 5px solid var(--cms-gold) !important; box-shadow: var(--cms-shadow) !important; } #selected-payment-summary h4, #selected-payment-summary h3 { color: var(--cms-white) !important; border: none !important; padding: 0 !important; background: none !important; } #selected-payment-summary #summary-amount { color: var(--cms-gold) !important; font-size: 32px !important; font-weight: 900 !important; }  #step-success { background: linear-gradient(135deg, var(--cms-success) 0%, #1e7e34 100%) !important; color: var(--cms-white) !important; padding: 50px 30px !important; border-radius: var(--cms-radius) !important; text-align: center !important; box-shadow: var(--cms-shadow) !important; } #step-success h3 { color: var(--cms-white) !important; border: none !important; margin: 0 0 15px 0 !important; padding: 0 !important; font-size: 26px !important; background: none !important; } #step-success p { color: rgba(255, 255, 255, 0.9) !important; font-size: 16px !important; margin: 0 !important; }  .cms-locked-msg { background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%) !important; border: none !important; border-left: 5px solid var(--cms-danger) !important; padding: 15px 20px !important; border-radius: var(--cms-radius-xs) !important; color: #721c24 !important; font-size: 14px !important; margin-top: 15px !important; font-weight: 600 !important; }  .cms-certificate-verify { max-width: 600px !important; margin: 0 auto !important; padding: 20px !important; } .cms-certificate-verify h3 { background: linear-gradient(135deg, var(--cms-navy) 0%, var(--cms-navy-dark) 100%) !important; color: var(--cms-gold) !important; padding: 30px !important; border-radius: var(--cms-radius) !important; text-align: center !important; margin: 0 0 25px 0 !important; border: none !important; font-size: 22px !important; box-shadow: var(--cms-shadow) !important; } .cms-certificate-verify input[type="text"] { width: 100% !important; padding: 18px 20px !important; border: 3px solid #dee2e6 !important; border-radius: var(--cms-radius-sm) !important; font-size: 16px !important; margin-bottom: 20px !important; transition: all 0.3s ease !important; font-weight: 600 !important; } .cms-certificate-verify input[type="text"]:focus { border-color: var(--cms-gold) !important; box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.2) !important; outline: none !important; } .cms-certificate-verify button { width: 100% !important; padding: 18px !important; background: linear-gradient(135deg, var(--cms-gold) 0%, var(--cms-gold-dark) 100%) !important; color: var(--cms-black) !important; border: none !important; border-radius: var(--cms-radius-sm) !important; font-size: 16px !important; font-weight: 700 !important; cursor: pointer !important; transition: all 0.3s ease !important; text-transform: uppercase !important; letter-spacing: 1px !important; box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4) !important; } .cms-certificate-verify button:hover { background: linear-gradient(135deg, var(--cms-gold-light) 0%, var(--cms-gold) 100%) !important; transform: translateY(-3px) !important; box-shadow: 0 8px 25px rgba(212, 175, 55, 0.5) !important; }  .back-btn { margin-right: 10px !important; margin-bottom: 15px !important; }  @media screen and (max-width: 768px) { .cms-registration-wrapper, .cms-certificate-verify { padding: 15px !important; } .cms-registration-wrapper h2 { font-size: 22px !important; padding: 30px 20px !important; letter-spacing: 1px !important; } .cms-registration-wrapper h3 { font-size: 18px !important; } .cms-step { padding: 25px 20px !important; border-radius: var(--cms-radius-sm) !important; } .cms-course-grid { gap: 15px !important; } .cms-course-card h4 { font-size: 15px !important; padding: 18px !important; padding-right: 80px !important; } .cms-course-type { top: 22px !important; right: 12px !important; font-size: 9px !important; padding: 5px 10px !important; } .cms-course-price { font-size: 24px !important; margin: 15px 18px 8px 18px !important; } .cms-course-duration { margin: 0 18px 12px 18px !important; } .select-course-btn { width: calc(100% - 36px) !important; margin: 0 18px 18px 18px !important; padding: 14px 20px !important; font-size: 13px !important; } .cms-user-dashboard { padding: 25px 20px !important; } .cms-user-avatar { width: 70px !important; height: 70px !important; font-size: 28px !important; } .cms-user-details h4 { font-size: 18px !important; } .cms-method-card { padding: 25px 18px !important; } .cms-method-icon { font-size: 40px !important; } .cms-payment-methods { gap: 15px !important; } .cms-btn { padding: 14px 25px !important; font-size: 14px !important; } }  @media screen and (max-width: 480px) { .cms-registration-wrapper, .cms-certificate-verify { padding: 12px !important; } .cms-registration-wrapper h2 { font-size: 18px !important; padding: 25px 15px !important; margin-bottom: 20px !important; border-radius: var(--cms-radius-sm) !important; } .cms-registration-wrapper h3 { font-size: 16px !important; margin-bottom: 20px !important; padding-bottom: 12px !important; } .cms-step { padding: 20px 15px !important; border-radius: var(--cms-radius-xs) !important; margin-bottom: 15px !important; } .cms-course-card { border-radius: var(--cms-radius-sm) !important; } .cms-course-card h4 { font-size: 14px !important; padding: 15px !important; padding-right: 75px !important; } .cms-course-type { top: 18px !important; right: 10px !important; font-size: 8px !important; padding: 4px 8px !important; } .cms-course-price { font-size: 22px !important; margin: 12px 15px 6px 15px !important; } .cms-course-duration { font-size: 13px !important; margin: 0 15px 10px 15px !important; } .select-course-btn { width: calc(100% - 30px) !important; margin: 0 15px 15px 15px !important; padding: 12px 18px !important; font-size: 12px !important; border-radius: var(--cms-radius-xs) !important; } .cms-user-dashboard { padding: 20px 15px !important; border-radius: var(--cms-radius-sm) !important; margin-bottom: 20px !important; } .cms-user-info { gap: 15px !important; } .cms-user-avatar { width: 60px !important; height: 60px !important; font-size: 24px !important; border-width: 3px !important; } .cms-user-details h4 { font-size: 16px !important; } .cms-user-details p { font-size: 13px !important; } .cms-alert, .cms-alert-info, .cms-alert-warning { padding: 25px 18px !important; border-radius: var(--cms-radius-sm) !important; } .cms-alert p, .cms-alert-info p, .cms-alert-warning p { font-size: 14px !important; } .cms-payment-option { padding: 18px 15px !important; } .cms-payment-label { font-size: 14px !important; } .cms-amount { font-size: 20px !important; } .cms-method-card { padding: 22px 15px !important; border-radius: var(--cms-radius-sm) !important; } .cms-method-icon { font-size: 36px !important; margin-bottom: 12px !important; } .cms-method-card h4 { font-size: 16px !important; } .cms-method-card p { font-size: 13px !important; } .select-method-btn { padding: 14px !important; font-size: 13px !important; } .cms-bank-card { padding: 18px 15px !important; border-radius: var(--cms-radius-xs) !important; } .cms-bank-card h5 { font-size: 15px !important; } .cms-bank-card p { font-size: 13px !important; } .cms-file-upload label { padding: 30px 20px !important; border-radius: var(--cms-radius-sm) !important; } .upload-icon { font-size: 40px !important; } .cms-btn { padding: 14px 22px !important; font-size: 13px !important; width: 100% !important; margin-bottom: 10px !important; } .cms-nic-field { padding: 20px 15px !important; } .cms-nic-field input { padding: 14px 15px !important; font-size: 15px !important; } #selected-payment-summary { padding: 20px 15px !important; border-radius: var(--cms-radius-sm) !important; } #selected-payment-summary #summary-amount { font-size: 26px !important; } #step-success { padding: 40px 20px !important; border-radius: var(--cms-radius-sm) !important; } #step-success h3 { font-size: 20px !important; } .cms-certificate-verify h3 { font-size: 18px !important; padding: 25px 20px !important; } .cms-certificate-verify input[type="text"] { padding: 15px !important; font-size: 15px !important; } .cms-certificate-verify button { padding: 15px !important; font-size: 14px !important; } .cms-access-buttons a { padding: 14px 18px !important; font-size: 13px !important; } }  @media screen and (max-width: 360px) { .cms-registration-wrapper, .cms-certificate-verify { padding: 10px !important; } .cms-registration-wrapper h2 { font-size: 16px !important; padding: 20px 12px !important; } .cms-registration-wrapper h3 { font-size: 15px !important; } .cms-step { padding: 15px 12px !important; } .cms-course-card h4 { font-size: 13px !important; padding: 12px !important; padding-right: 65px !important; } .cms-course-type { font-size: 7px !important; padding: 3px 6px !important; top: 15px !important; } .cms-course-price { font-size: 20px !important; margin: 10px 12px 5px 12px !important; } .cms-course-duration { font-size: 12px !important; margin: 0 12px 8px 12px !important; } .select-course-btn { width: calc(100% - 24px) !important; margin: 0 12px 12px 12px !important; padding: 10px 15px !important; font-size: 11px !important; } .cms-user-avatar { width: 50px !important; height: 50px !important; font-size: 20px !important; } .cms-user-details h4 { font-size: 14px !important; } .cms-user-details p { font-size: 12px !important; } .cms-amount { font-size: 18px !important; } #selected-payment-summary #summary-amount { font-size: 22px !important; } }  @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .cms-course-card { animation: fadeInUp 0.5s ease forwards; } .cms-course-card:nth-child(2) { animation-delay: 0.1s; } .cms-course-card:nth-child(3) { animation-delay: 0.2s; } .cms-course-card:nth-child(4) { animation-delay: 0.3s; } .cms-course-card:nth-child(5) { animation-delay: 0.4s; } .cms-course-card:nth-child(6) { animation-delay: 0.5s; }  @media print { .cms-registration-wrapper { padding: 0 !important; } .cms-course-card, .cms-step { box-shadow: none !important; border: 1px solid #000 !important; page-break-inside: avoid !important; } .select-course-btn, .cms-btn, .select-method-btn { display: none !important; } }  .cms-registration-wrapper ::-webkit-scrollbar { width: 8px !important; height: 8px !important; } .cms-registration-wrapper ::-webkit-scrollbar-track { background: #f1f1f1 !important; border-radius: 4px !important; } .cms-registration-wrapper ::-webkit-scrollbar-thumb { background: var(--cms-gold) !important; border-radius: 4px !important; } .cms-registration-wrapper ::-webkit-scrollbar-thumb:hover { background: var(--cms-gold-dark) !important; }