:root { --perodua-red: #E31937; --perodua-dark: #333333; --light-bg: #F9F9F9; --border-color: #DDDDDD; } body .elementor-widget-container { font-family: 'Arial', sans-serif; color: #222222; } /* Header Styles - Mobile First Approach */ .header { display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 5px; flex-wrap: wrap; padding: 10px; } /* Car Display Section */ .car-display { text-align: center; margin: 25px 0; transition: all 0.3s ease; } .car-image { max-width: 100%; height: 250px; object-fit: contain; margin-bottom: 15px; border-radius: 5px; border: 1px solid var(--border-color); } .car-model { color: var(--perodua-dark); margin: 10px 0 5px; } .car-price { font-size: 18px; font-weight: bold; color: var(--perodua-red); } /* Form Styles */ .form-group { margin-bottom: 20px; } label { display: block; margin-bottom: 8px; font-weight: bold; color: var(--perodua-dark); } select, input { width: 100%; padding: 12px; border: 1px solid var(--border-color); border-radius: 5px; font-size: 16px; transition: border 0.3s; } select:focus, input:focus { outline: none; border-color: var(--perodua-red); } /* Quick Term Buttons */ .term-buttons { display: flex; gap: 10px; margin-bottom: 15px; } .term-btn { flex: 1; background: white; border: 1px solid var(--border-color); padding: 10px; border-radius: 5px; cursor: pointer; transition: all 0.3s; } .term-btn:hover, .term-btn.active { background: var(--perodua-red); color: white; border-color: var(--perodua-red); } /* Calculate Button */ #calculateBtn { background-color: var(--perodua-red); color: white; border: none; padding: 14px; border-radius: 5px; cursor: pointer; font-size: 17px; width: 100%; transition: background-color 0.3s; font-weight: bold; margin-top: 10px; } #calculateBtn:hover { background-color: #C0102C; } /* Results Section */ #result { margin-top: 25px; padding: 20px; background-color: #F5F5F5; border-radius: 5px; display: none; border: 1px solid var(--border-color); } .result h3 { margin-top: 0; color: var(--perodua-dark); border-bottom: 2px solid var(--perodua-red); padding-bottom: 8px; } .car-info { display: flex; justify-content: space-between; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed #DDD; } .car-info:last-child { border-bottom: none; } .monthly-payment { font-size: 22px; color: var(--perodua-red); font-weight: bold; } /* Amortization Table */ #amortizationTable { width: 100%; border-collapse: collapse; margin-top: 20px; display: none; } #amortizationTable th, #amortizationTable td { padding: 10px; text-align: center; border: 1px solid #DDD; } #amortizationTable th { background-color: var(--perodua-dark); color: white; } #amortizationTable tr:nth-child(even) { background-color: #F9F9F9; } .toggle-amortization { color: var(--perodua-red); text-decoration: underline; cursor: pointer; display: inline-block; margin-top: 15px; font-size: 14px; } /* Floating Contact Button */ .floating-contact { position: fixed; bottom: 20px; right: 20px; z-index: 100; transition: all 0.3s ease; } .contact-btn { background-color: #25D366; /* WhatsApp green */ color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.2); cursor: pointer; border: none; transition: all 0.3s ease; } .contact-btn:hover { background-color: #128C7E; transform: scale(1.1); } .contact-btn i { font-size: 30px; } .contact-text { position: absolute; right: 70px; background: var(--perodua-red); color: white; padding: 8px 15px; border-radius: 30px; font-size: 14px; white-space: nowrap; opacity: 0; transition: opacity 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .contact-btn:hover + .contact-text { opacity: 1; } /* Mobile Responsiveness */ @media (min-width: 768px) { /* Desktop Styles */ .brand-title { order: 0; flex: initial; margin-top: 0; } } @media (max-width: 480px) { /* Mobile Small Screens */ .header img { max-height: 120px; max-width: none; } .salesman-image img { max-height: 200px; } }
Car Image

Select a Perodua model :

Price: RM0

Loan Summary

Car Model:
Car Price:
Loan Amount:
Interest Rate:
Loan Term:
Down Payment:
Total Interest:
Total Payment:
Monthly Payment:
Show Payment Schedule
Month Payment Principal Interest Balance