@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&family=Inter:wght@400;600;700&display=swap);.avif-converter-wrapper{font-family:'Inter',sans-serif;background:linear-gradient(135deg,#eef5fe 0%,#dce9f8 100%);display:flex;justify-content:center;align-items:center;padding:20px 0;min-height:auto;width:100%;box-sizing:border-box;margin:0 auto}.converter-container{background-color:#fff;border-radius:2.5rem;box-shadow:0 20px 40px rgb(0 0 0 / .18);padding:3rem;max-width:1100px;width:95%;animation:fadeIn 0.9s ease-out;border:1px solid #e0e7ee;box-sizing:border-box}@keyframes fadeIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.avif-converter-wrapper h1,.avif-converter-wrapper h2{font-family:'Poppins',sans-serif;color:#2c3e50}.drag-area{border:4px dashed #6a0dad;border-radius:2rem;background-color:#f8f0ff;transition:all 0.5s cubic-bezier(.25,.46,.45,.94);min-height:280px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;text-align:center;color:#4a5568}.drag-area.active{background-color:#e5d1ff;border-color:indigo;transform:scale(1.03);box-shadow:0 10px 20px rgb(106 13 173 / .3)}.drag-area svg{color:#6a0dad;width:6rem;height:6rem;margin-bottom:1rem;animation:bounce-slow 2s infinite}@keyframes bounce-slow{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}.file-upload-btn,.convert-button{border-radius:9999px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;transition:all 0.3s ease-in-out;box-shadow:0 8px 15px rgb(0 0 0 / .25);border:none;cursor:pointer}.file-upload-btn{background:linear-gradient(45deg,#8a2be2,#4b0082);color:#fff;padding:.75rem 2.5rem;font-size:1.125rem}.file-upload-btn:hover{background:linear-gradient(45deg,#4b0082,#8a2be2);transform:translateY(-5px);box-shadow:0 12px 25px rgb(75 0 130 / .6)}.convert-button{background:linear-gradient(45deg,#2ecc71,#27ae60);color:#fff;padding:1rem 4rem;font-size:1.5rem}.convert-button:hover{background:linear-gradient(45deg,#27ae60,#2ecc71);transform:translateY(-5px);box-shadow:0 12px 25px rgb(46 204 113 / .6)}.convert-button:disabled{opacity:.6;cursor:not-allowed;box-shadow:none;transform:none}.conversion-option-label{background-color:#e0f7fa;color:#00796b;border:2px solid #80deea;border-radius:9999px;cursor:pointer;padding:.85rem 1.8rem;font-weight:600;transition:all 0.3s ease-in-out;box-shadow:0 3px 8px rgb(0 0 0 / .1);min-width:120px;text-align:center}.conversion-option-input:checked+.conversion-option-label{background-color:#00bcd4;color:#fff;border-color:#0097a7;box-shadow:0 6px 15px rgb(0 188 212 / .5);transform:translateY(-3px)}.conversion-option-label:hover{transform:translateY(-3px);box-shadow:0 6px 15px rgb(0 0 0 / .2)}.max-image-alert{background-color:#ffebee;color:#d32f2f;border-left:6px solid #c62828;border-radius:.75rem;padding:1.2rem;font-weight:700;animation:slideInFromTop 0.6s ease-out;box-shadow:0 5px 10px rgb(0 0 0 / .1)}@keyframes slideInFromTop{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}.preview-card,.download-card{background-color:#fdfdfd;border:1px solid #e0e7ee;border-radius:1.5rem;padding:1.5rem;box-shadow:0 8px 20px rgb(0 0 0 / .1);display:flex;flex-direction:column;align-items:center;text-align:center;transition:transform 0.3s ease-in-out,box-shadow 0.3s ease-in-out}.preview-card:hover,.download-card:hover{transform:translateY(-8px);box-shadow:0 15px 30px rgb(0 0 0 / .2)}.preview-card img,.download-card img{border-radius:1rem;object-fit:cover;width:100%;height:180px;box-shadow:0 5px 10px rgb(0 0 0 / .1)}.remove-file-btn{background-color:#ffcdd2;color:#b71c1c;font-weight:700;border-radius:9999px;padding:.5rem 1.2rem;font-size:.9rem;transition:all 0.2s ease-in-out}.remove-file-btn:hover{background-color:#ef9a9a;transform:scale(1.08);box-shadow:0 4px 8px rgb(183 28 28 / .3)}.download-card a{background:linear-gradient(45deg,#1abc9c,#16a085);color:#fff;font-weight:700;padding:.85rem 1.8rem;border-radius:9999px;text-decoration:none;transition:all 0.3s ease-in-out;box-shadow:0 5px 12px rgb(26 188 156 / .4)}.download-card a:hover{background:linear-gradient(45deg,#16a085,#1abc9c);transform:translateY(-3px);box-shadow:0 8px 18px rgb(26 188 156 / .6)}.reset-button{background-color:#cfd8dc;color:#455a64;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:9999px;padding:.85rem 2.2rem;transition:all 0.3s ease-in-out;box-shadow:0 8px 15px rgb(0 0 0 / .15)}.reset-button:hover{background-color:#90a4ae;transform:translateY(-5px);box-shadow:0 12px 25px rgb(0 0 0 / .3)}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(255 255 255 / .95);display:flex;justify-content:center;align-items:center;z-index:1000;transition:opacity 0.4s ease}.loading-overlay.hidden{opacity:0;pointer-events:none}.spinner{border:10px solid #e1f5fe;border-top:10px solid #03a9f4;border-radius:50%;width:80px;height:80px;animation:spin 1s cubic-bezier(.68,-.55,.27,1.55) infinite;box-shadow:0 0 25px rgb(3 169 244 / .6)}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media (max-width:768px){.conversion-option-label{padding:.5rem 1rem;font-size:.875rem;min-width:auto;margin-bottom:.5rem}.flex-wrap{justify-content:center;gap:.5rem}.convert-button{padding:.75rem 2rem;font-size:1.125rem;max-width:80%;box-sizing:border-box}}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.text-center{text-align:center}.hidden{display:none!important}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.gap-8{gap:2rem}.mb-4{margin-bottom:1rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-3{margin-bottom:.75rem}.mb-8{margin-bottom:2rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-12{margin-top:3rem}.mt-16{margin-top:4rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.px-16{padding-left:4rem;padding-right:4rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.w-full{width:100%}.text-purple-700{color:#6d28d9}.text-teal-600{color:#0d9488}.text-gray-700{color:#4b5563}.text-gray-600{color:#4a5568}.text-gray-500{color:#6b7280}.text-gray-800{color:#1f2937}.text-white{color:#fff}.font-extrabold{font-weight:800}.font-bold{font-weight:700}.font-semibold{font-weight:600}.font-medium{font-weight:500}.text-5xl{font-size:3rem;line-height:1}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-base{font-size:1rem;line-height:1.5rem}.text-md{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-2xl{border-radius:1rem}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inline-block{display:inline-block}