.logo-text { color: #243865 !important; font-size: 3rem !important; font-weight: bold; } .nav-items>a { color: #ADB4C5 !important; } .navbar .navbar-brand { font-size: 30px; } .navbar .nav-item { padding: 10px 20px; } .navbar .nav-link { font-size: 20px; margin-left: 10px; } .fa-bars { color: #007bff; font-size: 30px; } .top-coloumn { background-color: #243865; padding: 3rem 8rem 3rem 8rem; } .title-sub-head { font-size: 1.5rem; } .title-head { font-size: 2rem; } .title-sub-head, .title-head { color: #E7AD4A; } .title-sub-pay { color: #0954b6; font-size: 19px; font-weight: 500; } .title-para { font-size: 12px; color: #ffffff; } .bottom-coloumn { background-color: #E6E6E6 !important; } .follow-text{ color: black; font-size: 1.3rem; } .fb-circle{ background-color: #3A5B9F; padding: 2px; width: 19px; display: flex; align-items: center; justify-content: center; } .btn-bc{ background-color: #E7AD4A; color: #ffffff; } .top-left-coloumn{ background-image: url(/static/data/img/banner1.png); background-repeat: no-repeat; background-size: cover; } @media screen and (max-width:768px) { .top-coloumn { padding: 3rem 1rem 3rem 2rem; } } /* ===== UNIFIED PAYMENT SYSTEM STYLES ===== */ /* Payment Method Selection Styles */ .payment-methods-container { padding: 2rem 0; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); min-height: 80vh; } .payment-header { margin-bottom: 3rem; } .payment-header h1 { color: #243865; font-weight: 700; } .payment-summary { margin-top: 2rem; } .summary-card { background: white; padding: 1.5rem; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); text-align: center; transition: transform 0.3s ease; } .summary-card:hover { transform: translateY(-5px); } .summary-label { color: #6c757d; font-size: 0.9rem; margin-bottom: 0.5rem; } .summary-value { color: #243865; font-size: 1.5rem; font-weight: 700; } .payment-method-card { background: white; border-radius: 20px; box-shadow: 0 8px 25px rgba(0,0,0,0.1); overflow: hidden; transition: all 0.3s ease; height: 100%; border: none; } .payment-method-card:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(0,0,0,0.15); } .payment-method-card .card-header { background: linear-gradient(135deg, #243865 0%, #1e3a5f 100%); color: white; padding: 2rem 1.5rem; text-align: center; } .method-icon { font-size: 3rem; margin-bottom: 1rem; color: #E7AD4A; } .method-name { margin: 0; font-weight: 600; } .payment-method-card .card-body { padding: 2rem 1.5rem; } .method-description { color: #6c757d; margin-bottom: 1.5rem; line-height: 1.6; } .method-details { margin-bottom: 1rem; } .detail-item { display: flex; align-items: center; margin-bottom: 0.5rem; color: #495057; font-size: 0.9rem; } .payment-method-card .card-footer { padding: 1.5rem; background: #f8f9fa; border-top: 1px solid #e9ecef; } .btn-primary { background: linear-gradient(135deg, #243865 0%, #1e3a5f 100%); border: none; border-radius: 10px; padding: 0.75rem 1.5rem; font-weight: 600; transition: all 0.3s ease; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(36, 56, 101, 0.3); } .payment-info { margin-top: 3rem; } .info-card { background: white; padding: 1.5rem; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); text-align: center; height: 100%; } .info-card h6 { color: #243865; margin-bottom: 0.5rem; } /* MPESA Payment Styles */ .mpesa-payment-container { padding: 2rem 0; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); min-height: 80vh; } .mpesa-header { margin-bottom: 3rem; } .mpesa-header h1 { color: #243865; font-weight: 700; } .mpesa-logo i { color: #28a745; } .payment-form-container { margin-top: 2rem; } .payment-form-card { background: white; border-radius: 20px; box-shadow: 0 8px 25px rgba(0,0,0,0.1); overflow: hidden; border: none; } .payment-form-card .card-header { background: linear-gradient(135deg, #28a745 0%, #20c997 100%); color: white; padding: 1.5rem; border-bottom: none; } .payment-form-card .card-header h4, .payment-form-card .card-header h5 { margin: 0; font-weight: 600; } .payment-form-card .card-body { padding: 2rem; } .amount-display { text-align: center; padding: 2rem; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 15px; } .amount-label { color: #6c757d; font-size: 1rem; margin-bottom: 0.5rem; } .amount-value { color: #243865; font-size: 2.5rem; font-weight: 700; } .form-label { color: #495057; font-weight: 600; margin-bottom: 0.5rem; } .form-control { border: 2px solid #e9ecef; border-radius: 10px; transition: all 0.3s ease; } .form-control:focus { border-color: #28a745; box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); } .form-text { color: #6c757d; font-size: 0.9rem; } .form-actions { margin-top: 2rem; } .btn-success { background: linear-gradient(135deg, #28a745 0%, #20c997 100%); border: none; border-radius: 10px; padding: 1rem 2rem; font-weight: 600; transition: all 0.3s ease; } .btn-success:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3); } .instructions-card, .benefits-card { background: white; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); border: none; margin-bottom: 1rem; } .step-item { display: flex; align-items: flex-start; margin-bottom: 1.5rem; } .step-number { background: linear-gradient(135deg, #28a745 0%, #20c997 100%); color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; margin-right: 1rem; flex-shrink: 0; } .step-content h6 { color: #243865; margin-bottom: 0.25rem; font-weight: 600; } .step-content p { color: #6c757d; font-size: 0.9rem; margin: 0; } .benefits-list { list-style: none; padding: 0; margin: 0; } .benefits-list li { padding: 0.5rem 0; color: #495057; } /* PayPal Payment Styles */ .paypal-payment-container { padding: 2rem 0; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); min-height: 80vh; } .paypal-header { margin-bottom: 3rem; } .paypal-header h1 { color: #243865; font-weight: 700; } .paypal-logo i { color: #0070ba; } /* Success and Failure Page Styles */ .payment-result-container { padding: 2rem 0; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); min-height: 80vh; } .success-header, .failure-header { text-align: center; margin-bottom: 3rem; } .success-icon { font-size: 4rem; color: #28a745; margin-bottom: 1rem; } .failure-icon { font-size: 4rem; color: #dc3545; margin-bottom: 1rem; } .payment-details { background: white; border-radius: 20px; padding: 2rem; box-shadow: 0 8px 25px rgba(0,0,0,0.1); margin-bottom: 2rem; } .next-steps { background: #f8f9fa; border-radius: 15px; padding: 1.5rem; margin-top: 1.5rem; } .action-buttons { margin: 2rem 0; } .btn-action { margin: 0.5rem; border-radius: 10px; padding: 0.75rem 1.5rem; font-weight: 600; transition: all 0.3s ease; } .btn-action:hover { transform: translateY(-2px); } /* Responsive Design */ @media (max-width: 768px) { .payment-methods-container, .mpesa-payment-container, .paypal-payment-container, .payment-result-container { padding: 1rem 0; } .payment-header h1, .mpesa-header h1, .paypal-header h1 { font-size: 2rem; } .summary-card { margin-bottom: 1rem; } .amount-value { font-size: 2rem; } .payment-form-card .card-body { padding: 1.5rem; } .method-icon { font-size: 2.5rem; } } /* MPESA OTP Confirmation Styles */ .mpesa-otp-container { padding: 2rem 0; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); min-height: 80vh; } .otp-header { margin-bottom: 3rem; } .otp-header h1 { color: #243865; font-weight: 700; } .otp-icon i { color: #007bff; } .otp-form-container { margin-top: 2rem; } .otp-form-card { background: white; border-radius: 20px; box-shadow: 0 8px 25px rgba(0,0,0,0.1); overflow: hidden; border: none; } .otp-form-card .card-header { background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); color: white; padding: 1.5rem; border-bottom: none; } .otp-form-card .card-header h4 { margin: 0; font-weight: 600; } .otp-form-card .card-body { padding: 2rem; } .payment-summary { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); padding: 1.5rem; border-radius: 15px; margin-bottom: 2rem; } .summary-item { text-align: center; margin-bottom: 1rem; } .summary-label { color: #6c757d; font-size: 0.9rem; margin-bottom: 0.5rem; display: block; } .summary-value { color: #243865; font-size: 1.5rem; font-weight: 700; } .resend-otp { border-top: 1px solid #e9ecef; padding-top: 1.5rem; } .instructions-card { background: white; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); border: none; } .instructions-card .card-header { background: linear-gradient(135deg, #6c757d 0%, #495057 100%); color: white; padding: 1rem 1.5rem; border-bottom: none; border-radius: 15px 15px 0 0; } .instructions-card .card-header h5 { margin: 0; font-weight: 600; } .instructions-card .card-body { padding: 1.5rem; } .instructions-list { list-style: none; padding: 0; margin: 0; } .instructions-list li { padding: 0.5rem 0; border-bottom: 1px solid #f8f9fa; display: flex; align-items: center; } .instructions-list li:last-child { border-bottom: none; } .instructions-list i { margin-right: 0.75rem; width: 20px; text-align: center; } /* Form validation styles */ .form-control.is-invalid { border-color: #dc3545; box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); } .invalid-feedback { display: block; width: 100%; margin-top: 0.25rem; font-size: 0.875rem; color: #dc3545; } /* Responsive adjustments */ @media (max-width: 768px) { .otp-form-card .card-body { padding: 1.5rem; } .payment-summary { padding: 1rem; } .summary-value { font-size: 1.25rem; } }