:root{--primary-color: #007bff;--secondary-color: #28a745;--text-color: #333;--heading-color: #222;--background-color: #f9f9f9;--light-gray: #f0f0f0;--medium-gray: #e0e0e0;--accent-color: #ff9800}body{font-family:Open Sans,sans-serif;margin:0;padding:0;box-sizing:border-box;color:var(--text-color);background-color:var(--background-color);transition:background-color .3s ease}h1,h2,h3,h4,h5,h6{font-family:Poppins,sans-serif;color:var(--heading-color)}a{text-decoration:none;color:var(--primary-color);transition:color .3s ease}a:hover{text-decoration:underline;color:#0056b3}.container{width:90%;max-width:1200px;margin:0 auto}header{background:#fff;padding:1rem 0;box-shadow:0 2px 4px #0000001a;position:sticky;top:0;z-index:100;transition:background-color .3s ease,box-shadow .3s ease}header .container{display:flex;justify-content:space-between;align-items:center}header nav ul{list-style:none;padding:0;margin:0;display:flex}header nav ul li{margin-left:1.5rem}header nav ul li a{color:var(--text-color);font-weight:500;transition:color .3s ease;padding:.5rem 0}header nav ul li a:hover{color:var(--primary-color);text-decoration:underline}header .cta-button{background:linear-gradient(to right,var(--primary-color),#0056b3);color:#fff;padding:.75rem 1.5rem;border:none;border-radius:5px;cursor:pointer;font-weight:600;transition:transform .2s ease,box-shadow .2s ease;position:relative;overflow:hidden}header .cta-button:hover{transform:scale(1.05);box-shadow:0 4px 8px #0003}header .cta-button:before{content:">";position:absolute;right:-20px;top:50%;transform:translateY(-50%);opacity:0;transition:right .3s ease,opacity .3s ease}header .cta-button:hover:before{right:10px;opacity:1}.logo-image{height:70px;width:auto}.hero{background:linear-gradient(45deg,#f0f0f0,#e0e0e0);background-size:400% 400%;animation:gradientAnimation 15s ease infinite;padding:4rem 0;text-align:center;transition:background-color .3s ease;position:relative;overflow:hidden}@keyframes gradientAnimation{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.hero h1{font-size:3rem;margin-bottom:1rem;color:var(--heading-color);text-shadow:1px 1px 2px rgba(0,0,0,.1);font-family:Poppins,sans-serif;opacity:0}.hero p{font-size:1.2rem;color:#666;margin-bottom:2rem;opacity:0;transform:translateY(20px)}.hero .cta-button{background:linear-gradient(to right,var(--secondary-color),#1e7e34);color:#fff;padding:1.2rem 2.5rem;border:none;border-radius:5px;cursor:pointer;font-size:1.2rem;font-weight:600;transition:transform .2s ease,box-shadow .2s ease;position:relative;overflow:hidden}.hero .cta-button:hover{transform:scale(1.05);box-shadow:0 4px 8px #0003}.hero .cta-button:before{content:">";position:absolute;right:-20px;top:50%;transform:translateY(-50%);opacity:0;transition:right .3s ease,opacity .3s ease}.hero .cta-button:hover:before{right:10px;opacity:1}.hero-image-container{display:none}.hero-image{max-width:300px;height:auto;transition:transform .5s ease;border-radius:10px}.how-it-works{padding:4rem 0;text-align:center}.how-it-works h2{margin-bottom:2rem;color:var(--heading-color)}.steps-container{position:relative;padding-top:2rem}.progress-bar{position:absolute;top:50%;left:0;right:0;height:4px;background-color:#ddd;transform:translateY(-50%);z-index:0}.progress-line{position:absolute;top:0;left:0;height:100%;width:100%;background-color:var(--primary-color);transform-origin:left;transform:scaleX(1)}.how-it-works .steps{display:flex;justify-content:space-around;flex-wrap:wrap;margin-top:2rem;position:relative;z-index:1}.how-it-works .step{flex:1;padding:1rem;text-align:center;min-width:200px;transition:transform .3s ease}.how-it-works .step:hover{transform:translateY(-5px)}.how-it-works .step img{max-width:80px;margin-bottom:1rem}.step-card{background:#fff;padding:1.5rem;border-radius:8px;box-shadow:0 2px 4px #0000001a;transition:transform .3s ease,box-shadow .3s ease}.step-card:hover{transform:translateY(-5px);box-shadow:0 4px 8px #0003}.features{background:linear-gradient(135deg,var(--light-gray),var(--medium-gray));padding:4rem 0;text-align:center;transition:background-color .3s ease}.features h2{margin-bottom:2rem;color:var(--heading-color)}.features .feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-top:2rem}.features .feature{padding:1.5rem;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;transition:transform .3s ease,box-shadow .3s ease;position:relative}.features .feature:hover{transform:translateY(-5px);box-shadow:0 4px 8px #0003}.features .feature img{max-width:60px;margin-bottom:1rem}.tooltip{position:absolute;background-color:#fff;color:#333;padding:10px;border-radius:5px;box-shadow:0 2px 4px #0003;z-index:10;top:100%;left:50%;transform:translate(-50%);white-space:nowrap}#image-converter{padding:4rem 0;text-align:center}#image-converter h2{margin-bottom:2rem;color:var(--heading-color)}#image-converter input[type=file]{margin-bottom:1rem}#image-converter select{padding:.75rem;margin-bottom:1rem;border:1px solid #ccc;border-radius:5px;transition:border-color .3s ease,box-shadow .3s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem top 50%;background-size:16px;width:200px}#image-converter select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #007bff40}#image-converter select:hover{border-color:#999}#image-converter button{background:linear-gradient(to right,var(--primary-color),#0056b3);color:#fff;padding:.75rem 1.5rem;border:none;border-radius:5px;cursor:pointer;font-weight:600;transition:transform .2s ease,box-shadow .2s ease;position:relative;overflow:hidden}#image-converter button:hover{transform:scale(1.05);box-shadow:0 4px 8px #0003}#image-converter button:before{content:">";position:absolute;right:-20px;top:50%;transform:translateY(-50%);opacity:0;transition:right .3s ease,opacity .3s ease}#image-converter button:hover:before{right:10px;opacity:1}#image-converter img{max-width:300px;margin:1rem 0;border-radius:8px;box-shadow:0 2px 4px #0000001a;transition:box-shadow .3s ease}#image-converter img:hover{box-shadow:0 4px 8px #0003}#image-converter .download-button{display:inline-block;background:linear-gradient(to right,var(--secondary-color),#1e7e34);color:#fff;padding:.75rem 1.5rem;border-radius:5px;margin-top:1rem;transition:transform .2s ease,box-shadow .2s ease;position:relative;overflow:hidden;text-decoration:none}#image-converter .download-button:hover{transform:scale(1.05);box-shadow:0 4px 8px #0003}#image-converter .download-button:before{content:">";position:absolute;right:-20px;top:50%;transform:translateY(-50%);opacity:0;transition:right .3s ease,opacity .3s ease}#image-converter .download-button:hover:before{right:10px;opacity:1}footer{background:#343a40;color:#fff;padding:2rem 0;transition:background-color .3s ease}footer .container{display:flex;justify-content:space-between;flex-wrap:wrap}footer nav ul{list-style:none;padding:0;margin:0}footer nav ul li{margin-bottom:.5rem}footer nav ul li a{color:#fff;transition:color .3s ease}footer nav ul li a:hover{text-decoration:underline;color:var(--primary-color)}footer .social-icons{display:flex}footer .social-icons a{color:#fff;margin-left:1rem;font-size:1.5rem;transition:color .3s ease}footer .social-icons a:hover{color:var(--primary-color)}footer .newsletter-form{margin-top:1rem}footer .newsletter-form input{padding:.5rem;margin-right:.5rem;border:none;border-radius:5px;transition:border-color .3s ease}footer .newsletter-form input:focus{outline:none;border-color:var(--primary-color)}footer .newsletter-form button{background:linear-gradient(to right,var(--primary-color),#0056b3);color:#fff;padding:.5rem 1rem;border:none;border-radius:5px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;position:relative;overflow:hidden}footer .newsletter-form button:hover{transform:scale(1.05);box-shadow:0 4px 8px #0003}footer .newsletter-form button:before{content:">";position:absolute;right:-20px;top:50%;transform:translateY(-50%);opacity:0;transition:right .3s ease,opacity .3s ease}footer .newsletter-form button:hover:before{right:10px;opacity:1}footer .copyright{text-align:center;margin-top:2rem;width:100%;font-size:.8rem;color:#aaa}.file-upload{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:1rem;border:2px dashed #ccc;border-radius:8px;padding:2rem;cursor:pointer;transition:border-color .3s ease,background-color .3s ease}.file-upload.dragover{border-color:var(--primary-color);background-color:var(--light-gray)}.file-upload input[type=file]{position:absolute;left:0;top:0;opacity:0;width:100%;height:100%;cursor:pointer}.custom-file-label{display:inline-block;background-color:var(--light-gray);border:1px solid #ccc;padding:.75rem 1rem;border-radius:5px;cursor:pointer;transition:background-color .3s ease,transform .2s ease;box-shadow:0 1px 2px #0000001a}.custom-file-label:hover{background-color:var(--medium-gray);transform:translateY(-2px);box-shadow:0 2px 4px #0003}#file-info{display:block;margin-top:.5rem;font-size:.9rem;color:#666}.convert-button-container{margin-top:1rem}.menu-icon{display:none;flex-direction:column;cursor:pointer;padding:10px}.menu-icon .bar{width:25px;height:3px;background-color:var(--text-color);margin:3px 0;transition:.4s}.animate-fade-in{animation:fadeIn 1s ease forwards}.animate-slide-in{animation:slideIn 1s ease forwards}.animate-float{animation:float 4s ease-in-out infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-15px)}to{transform:translateY(0)}}@media (max-width: 768px){.container{width:95%}header .container{flex-direction:row;align-items:center;justify-content:space-between}header nav{display:none;position:absolute;top:100%;left:0;width:100%;background:#fff;padding:1rem;box-shadow:0 2px 4px #0000001a;z-index:100;transition:transform .3s ease;transform:translate(-100%)}header nav.nav-open{display:block;transform:translate(0)}header nav ul{flex-direction:column;margin-top:0}header nav ul li{margin-left:0;margin-bottom:.5rem}.menu-icon{display:flex}.how-it-works .steps{flex-direction:column}.how-it-works .step{margin-bottom:2rem}.features .feature-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}footer .container{flex-direction:column;align-items:center;text-align:center}footer nav,footer .social-icons,footer .newsletter-form{margin-bottom:1rem}header .cta-button{display:none}}.contact{padding:4rem 0;text-align:center}.contact h2{margin-bottom:1rem;color:var(--heading-color)}.contact p{margin-bottom:2rem;color:#666}.contact-form{display:flex;flex-direction:column;max-width:600px;margin:0 auto;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a;background-color:#fff}.form-group{display:flex;flex-direction:column;margin-bottom:1rem;text-align:left}.form-group label{margin-bottom:.5rem;font-weight:500;color:var(--text-color)}.form-group input,.form-group textarea{padding:.75rem;border:1px solid #ccc;border-radius:5px;transition:border-color .3s ease,box-shadow .3s ease}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #007bff40}.form-group textarea{resize:vertical;min-height:150px}.submit-button{background:linear-gradient(to right,var(--primary-color),#0056b3);color:#fff;padding:.75rem 1.5rem;border:none;border-radius:5px;cursor:pointer;font-weight:600;transition:transform .2s ease,box-shadow .2s ease;position:relative;overflow:hidden;align-self:center;margin-top:1rem}.submit-button:hover{transform:scale(1.05);box-shadow:0 4px 8px #0003}.submit-button:before{content:">";position:absolute;right:-20px;top:50%;transform:translateY(-50%);opacity:0;transition:right .3s ease,opacity .3s ease}.submit-button:hover:before{right:10px;opacity:1}.about{padding:4rem 0;text-align:left}.about h2{margin-bottom:1rem;color:var(--heading-color);text-align:center}.about h3{margin-top:2rem;margin-bottom:1rem;color:var(--heading-color)}.about p{margin-bottom:1rem;color:#666;line-height:1.6}.about ul{margin-bottom:2rem;padding-left:20px}.about li{margin-bottom:.5rem;color:#666;line-height:1.6}.about strong{color:var(--heading-color)}.terms{padding:4rem 0;text-align:left}.terms h2{margin-bottom:1rem;color:var(--heading-color);text-align:center}.terms h3{margin-top:2rem;margin-bottom:1rem;color:var(--heading-color)}.terms p{margin-bottom:1rem;color:#666;line-height:1.6}.terms ul{margin-bottom:2rem;padding-left:20px}.terms li{margin-bottom:.5rem;color:#666;line-height:1.6}.terms strong{color:var(--heading-color)}.privacy{padding:4rem 0;text-align:left}.privacy h2{margin-bottom:1rem;color:var(--heading-color);text-align:center}.privacy h3{margin-top:2rem;margin-bottom:1rem;color:var(--heading-color)}.privacy p{margin-bottom:1rem;color:#666;line-height:1.6}.privacy ul{margin-bottom:2rem;padding-left:20px}.privacy li{margin-bottom:.5rem;color:#666;line-height:1.6}.privacy strong{color:var(--heading-color)}
