@import"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,serif}body{margin:0;font-family:Arial,sans-serif;background-color:#f4f4f4;color:#000;text-align:center}body:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(https://www.transparenttextures.com/patterns/carbon-fibre.png);opacity:.1;z-index:-1}body:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:40px 40px;opacity:.2;z-index:-1}.header{position:relative;width:100%;height:60px;display:flex;align-items:center;overflow:hidden}.car{position:absolute;left:-150px;width:120px;animation:moveCar 5s linear infinite}@keyframes moveCar{0%{left:-150px}to{left:100%}}.problemCheck{padding:30px;margin:20px auto;width:100%;border-radius:0;box-shadow:0 4px 10px #0003;background-color:#000}.problemCheck label{font-size:18px;font-weight:700;color:gold;display:block;margin-bottom:10px}.problemCheck textarea{width:100%;height:250px;padding:10px 40px 10px 10px;font-size:16px;border:2px solid black;border-radius:5px;resize:none;outline:none;transition:.3s ease-in-out}textarea::-webkit-scrollbar{width:5px}textarea::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}textarea::-webkit-scrollbar-thumb{background:#ff0;border-radius:10px}textarea::-webkit-scrollbar-thumb:hover{background:linear-gradient(45deg,#555,#222)}.suggestions{background:#8a2be2;border:1px solid #ccc;padding:10px;margin-top:5px;font-size:14px;border-radius:5px;text-align:left;max-height:120px;overflow-y:auto}.suggestions.visible{display:block}.problemCheck button{background:gold;color:#000;border:none;padding:12px 20px;font-size:16px;margin-top:10px;border-radius:5px;cursor:pointer;transition:background .3s}.problemCheck button:hover{background:red}button.listening{background:red;color:#fff;animation:pulse 1s infinite}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.textareaContainer{position:relative;width:100%;display:flex;align-items:center}#microphone{position:absolute;bottom:10px;right:10px;background:#0003;border:none;color:#fff;font-size:18px;padding:5px;border-radius:50%;cursor:pointer;transition:.3s;opacity:.9}#microphone:hover{background:#0006;opacity:1}#microphone:active{background:red}.solutionDisplay{background:linear-gradient(135deg,#fff,#f8f9fa);padding:25px;border-radius:12px;box-shadow:0 8px 20px #00000026;max-width:800px;margin:20px auto;font-family:Poppins,sans-serif;color:#333;line-height:1.6}.solutionDisplay h2{color:#0056b3;font-size:24px;border-bottom:3px solid #007bff;padding-bottom:8px;margin-bottom:15px;text-align:center}.solutionDisplay h3{color:#333;font-size:20px;margin-top:20px;text-decoration:underline}.solutionDisplay ul,.solutionDisplay ol{padding-left:25px}.solutionDisplay li{margin-bottom:10px;font-size:16px}.solutionDisplay p{font-size:17px;margin-bottom:12px}.solutionDisplay .critical{background-color:#dc3545;color:#fff;padding:12px;font-weight:700;text-align:center;border-radius:6px;margin:15px 0}.solutionDisplay .attention{background-color:#ffc107;color:#333;padding:12px;font-weight:700;text-align:center;border-radius:6px;margin:15px 0}.solutionDisplay .cost{background:#007bff;color:#fff;padding:12px;border-radius:6px;font-size:16px;font-weight:700;text-align:center;margin:15px 0}.solutionDisplay ul{list-style:none}.solutionDisplay ul li:before{content:"✔ ";color:#28a745;font-weight:700}.solutionDisplay ol{counter-reset:step-counter}.solutionDisplay ol li{counter-increment:step-counter;position:relative;padding-left:30px}.solutionDisplay ol li:before{content:counter(step-counter);position:absolute;left:0;background:#007bff;color:#fff;font-size:14px;font-weight:700;width:24px;height:24px;display:flex;justify-content:center;align-items:center;border-radius:50%}.solutionDisplay .prevention{background-color:#17a2b8;color:#fff;padding:12px;border-radius:6px;font-weight:700;text-align:center;margin-top:20px}.knowYourCar{background:#fff;padding:30px;width:80%;margin:20px auto;border-radius:0;box-shadow:0 4px 10px #0003}.knowYourCar input{width:80%;padding:10px;font-size:16px;border:2px solid yellow;border-radius:5px;margin-bottom:10px;background:#fff;color:#000}.knowYourCar button{background:#000;color:#fff;border:none;padding:12px 20px;font-size:16px;border-radius:5px;cursor:pointer;transition:background .3s}.knowYourCar button:hover{background:#ff0;color:#000}.vehicle-info{background:#f8f9fa;padding:20px;width:80%;margin:20px auto;border-radius:12px;box-shadow:0 4px 10px #0003;font-family:Poppins,sans-serif;color:#333;text-align:left;line-height:1.6}.vehicle-info div{background:#fff;padding:15px;border-radius:8px;margin-bottom:15px;box-shadow:0 2px 8px #0000001a}.vehicle-info b{font-size:18px;color:#0056b3}.vehicle-info ul{padding-left:20px}.vehicle-info li{margin-bottom:8px;font-size:16px}.vehicle-info li:before{content:"✔ ";color:#28a745;font-weight:700}.vehicle-info .critical{background-color:#dc3545;color:#fff;padding:12px;font-weight:700;text-align:center;border-radius:6px;margin:15px 0}.vehicle-info .attention{background-color:#ffc107;color:#333;padding:12px;font-weight:700;text-align:center;border-radius:6px;margin:15px 0}.vehicle-info .cost{background:#007bff;color:#fff;padding:12px;border-radius:6px;font-size:16px;font-weight:700;text-align:center;margin:15px 0}.vehicle-info .prevention{background-color:#17a2b8;color:#fff;padding:12px;border-radius:6px;font-weight:700;text-align:center;margin-top:20px}.footer-container{background-color:#000;color:#fff;display:flex;justify-content:center;align-items:center;gap:10px;padding:20px}.copyright-icon{color:#ff0;font-size:24px}.footer-text{font-size:18px;text-align:center}#icon-box{background-color:#ff0;color:#000;padding:12px;border-radius:50%;position:fixed;bottom:24px;right:24px;cursor:pointer;transition:background .3s,color .3s}#icon-box:hover{background-color:#000;color:#fff}.arrow-icon{font-size:24px}@media (max-width: 480px){.problemCheck label{font-size:16px}.problemCheck button{padding:10px 16px;font-size:14px}.knowYourCar input{width:90%;font-size:14px}.knowYourCar button{padding:10px 16px;font-size:14px}.vehicle-info{width:95%;padding:15px}.footer-container{flex-direction:column;text-align:center;padding:15px}}
