:root{--primary-color:#7000ac;--primary-light:#e6f0ff;--secondary-color:#3f37c9;--accent-color:#4895ef;--success-color:#4cc9f0;--warning-color:#f72585;--light-color:#f8f9fa;--dark-color:#212529;--text-color:#000000;--text-light:#363636;--shadow-sm:0 1px 3px rgba(0,0,0,0.1);--shadow-md:0 4px 6px rgba(0,0,0,0.1);--shadow-lg:0 10px 15px rgba(0,0,0,0.1);--transition:all 0.3s cubic-bezier(0.25,0.8,0.25,1);--border-radius:12px;--border-radius-sm:8px;--gradient-primary:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 100%);--gradient-accent:linear-gradient(135deg,var(--accent-color) 0%,var(--success-color) 100%);--accent-color-pdf:#d9534f;--accent-color-jpg:#ff9800;--accent-color-png:#2ecc71;}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Poppins',sans-serif;line-height:1.7;color:var(--text-light);background-color:var(--light-color);overflow-x:hidden;}
h1,h2,h3,h4,h5,h6{font-weight:600;color:var(--dark-color);line-height:1.3;}
a{text-decoration:none;transition:var(--transition);}
.container{max-width:1200px;margin:0 auto;padding:0 20px;}
.cta-button{background:var(--gradient-primary);color:white;padding:10px 20px;border-radius:var(--border-radius-sm);font-weight:600;transition:var(--transition);border:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:var(--shadow-sm);}
.cta-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);color:white;}
.hero{padding:100px 0;text-align:center;background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);position:relative;overflow:hidden;border-radius:10px;}
.hero::before{content:'';position:absolute;top:-50px;right:-50px;width:200px;height:200px;background-color:rgba(72,149,239,0.1);border-radius:50%;z-index:0;}
.hero::after{content:'';position:absolute;bottom:-100px;left:-100px;width:300px;height:300px;background-color:rgba(76,201,240,0.1);border-radius:50%;z-index:0;}
.hero-content{position:relative;z-index:1;}
.hero h1{font-size:3rem;margin-bottom:20px;color:var(--dark-color);line-height:1.2;}
.hero h1 .highlight{color:var(--primary-color);position:relative;display:inline-block;}
.hero h1 .highlight::after{content:'';position:absolute;bottom:5px;left:0;width:100%;height:10px;background-color:rgba(72,149,239,0.3);z-index:-1;border-radius:4px;}
.hero-icon{font-size:40px;color:var(--primary-color);margin-bottom:20px;display:inline-block;}
.hero p{font-size:1.2rem;max-width:700px;margin:0 auto 30px;color:var(--text-light);}
.hero .cta-button{padding:12px 30px;font-size:1.1rem;}
.tool-section{padding:80px 0;background-color:white;position:relative;}
.section-title{text-align:center;margin-bottom:50px;}
.section-title h2{font-size:2.2rem;color:var(--dark-color);margin-bottom:15px;position:relative;display:inline-block;}
.section-title h2::after{content:'';position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);width:60px;height:3px;background:var(--gradient-primary);border-radius:3px;}
.section-title p{color:var(--text-light);max-width:700px;margin:0 auto;font-size:1.1rem;}
.section-icon{font-size:32px;color:var(--primary-color);margin-bottom:15px;display:inline-block;}
.features{padding:80px 0;background-color:var(--light-color);}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin-top:40px;}
.feature-card{background:white;border-radius:var(--border-radius);padding:30px;box-shadow:var(--shadow-md);transition:var(--transition);text-align:center;border-top:4px solid var(--primary-color);position:relative;overflow:hidden;}
.feature-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg);}
.feature-icon{font-size:48px;margin-bottom:20px;color:var(--primary-color);position:relative;z-index:1;}
.feature-card h3{font-size:1.4rem;margin-bottom:15px;color:var(--dark-color);position:relative;z-index:1;}
.feature-card p{color:var(--text-light);position:relative;z-index:1;}
.privacy-article-section{background-color:var(--light-color);padding:80px 0;}
.article-content{max-width:800px;margin:0 auto;background:white;padding:40px;border-radius:var(--border-radius);box-shadow:var(--shadow-md);}
.article-content h3{color:var(--dark-color);margin-top:40px;margin-bottom:20px;font-size:1.5rem;position:relative;padding-left:20px;}
.article-content h3::before{content:'';position:absolute;left:0;top:8px;height:60%;width:4px;background:var(--gradient-primary);border-radius:2px;}
.article-content p{margin-bottom:20px;color:var(--text-light);}
.article-content ul{list-style:none;padding-left:0;margin-bottom:25px;}
.article-content ul li{padding-left:30px;position:relative;margin-bottom:12px;color:var(--text-light);}
.article-content ul li::before{content:'\f058';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;left:0;top:2px;color:var(--primary-color);}
.faq{padding:80px 0;background-color:white;}
.faq-item{background:white;border-radius:var(--border-radius);margin-bottom:15px;box-shadow:var(--shadow-md);overflow:hidden;transition:var(--transition);}
.faq-question{padding:20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600;color:var(--dark-color);background-color:var(--light-color);transition:var(--transition);}
.faq-question > span > i{margin-right:10px;color:var(--primary-color);width:20px;display:inline-block;text-align:center;}
.faq-answer{padding:0 20px;max-height:0;overflow:hidden;transition:max-height 0.3s ease,padding 0.3s ease;}
.faq-answer.show{padding:20px;max-height:500px;}
.faq-item.active .faq-question > .fa-chevron-down{transform:rotate(180deg);}
.cta-section{padding:100px 0;background:var(--gradient-primary);color:white;text-align:center;position:relative;overflow:hidden;}
.cta-content{position:relative;z-index:1;}
.cta-section h2{font-size:2.5rem;margin-bottom:20px;color:white;}
.cta-section p{max-width:700px;margin:0 auto 30px;font-size:1.1rem;opacity:0.9;}
.cta-button.large{padding:16px 40px;font-size:1.1rem;display:inline-flex;background-color:white;color:white;border-radius:var(--border-radius);}
@media (max-width:992px){.hero h1{font-size:2.5rem;}}
@media (max-width:768px){.hero{padding:80px 0;}.hero h1{font-size:2rem;}.hero p{font-size:1rem;}.section-title h2{font-size:1.8rem;}#fileConverterToolWrapper{padding:20px;}.feature-card{padding:25px;}.article-content{padding:25px;}}
@media (max-width:576px){.hero h1{font-size:1.8rem;}.hero .cta-button{width:100%;justify-content:center;}}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
.fade-in{animation:fadeIn 0.6s ease forwards;opacity:0;}
.delay-1{animation-delay:0.2s;}
.delay-2{animation-delay:0.4s;}
.delay-3{animation-delay:0.6s;}
@keyframes float{0%{transform:translateY(0px);}50%{transform:translateY(-10px);}100%{transform:translateY(0px);}}
.floating{animation:float 3s ease-in-out infinite;}
#fileConverterToolWrapper{font-family:'Poppins',sans-serif;line-height:1.6;color:var(--text-light);background-color:white;border-radius:var(--border-radius);box-shadow:var(--shadow-md);overflow:hidden;margin-top:30px;}
#fileConverterToolWrapper *,#fileConverterToolWrapper *::before,#fileConverterToolWrapper *::after{box-sizing:border-box;}
#fileConverterHeader{background-color:white;padding:25px 30px;text-align:center;border-bottom:1px solid var(--primary-light);}
#fileConverterToolWrapper .logo-container{margin-bottom:15px;display:flex;justify-content:center;align-items:center;gap:10px;}
#fileConverterToolWrapper .logo-type{font-size:2.2em;font-weight:700;}
#fileConverterToolWrapper .logo-pdf{color:var(--accent-color-pdf);}
#fileConverterToolWrapper .logo-jpg{color:var(--accent-color-jpg);}
#fileConverterToolWrapper .logo-png{color:var(--accent-color-png);}
#fileConverterToolWrapper .logo-to{color:var(--text-light);font-size:1.8em;margin:0 5px;}
#fileConverterToolWrapper .site-title{font-size:1.8em;font-weight:600;color:var(--dark-color);margin-bottom:5px;}
#fileConverterToolWrapper .description{font-size:1em;color:var(--text-light);max-width:700px;margin:0 auto;}
#fileConverterMain{padding:25px 30px;background-color:white;}
#fileConverterToolWrapper .converter-tabs{display:flex;margin-bottom:25px;border-bottom:2px solid var(--primary-light);overflow-x:auto;white-space:nowrap;}
#fileConverterToolWrapper .tab-button{padding:10px 15px;border:none;background-color:transparent;cursor:pointer;font-size:1em;color:var(--text-light);border-bottom:3px solid transparent;transition:var(--transition);font-weight:500;flex-shrink:0;}
#fileConverterToolWrapper .tab-button.active{color:var(--primary-color);border-bottom-color:var(--primary-color);font-weight:600;}
#fileConverterToolWrapper .tab-button:hover:not(.active){color:var(--primary-color);background-color:var(--primary-light);}
#fileConverterToolWrapper .upload-section{display:flex;flex-direction:column;gap:20px;}
#fileConverterToolWrapper .action-buttons{display:flex;gap:15px;justify-content:center;flex-wrap:wrap;}
#fileConverterToolWrapper .btn{padding:10px 20px;border:none;border-radius:var(--border-radius-sm);cursor:pointer;font-size:0.95em;font-weight:500;transition:var(--transition);display:inline-flex;align-items:center;gap:8px;box-shadow:var(--shadow-sm);text-decoration:none;}
#fileConverterToolWrapper .btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
#fileConverterToolWrapper .btn-upload{background:var(--gradient-primary);color:white;}
#fileConverterToolWrapper .btn-clear{background-color:var(--warning-color);color:white;}
#fileConverterToolWrapper .btn-download-all{background-color:var(--secondary-color);color:white;}
#fileConverterToolWrapper .btn:disabled{background:var(--primary-light);color:var(--text-light);opacity:0.6;cursor:not-allowed;box-shadow:none;transform:none;}
#fileConverterToolWrapper #fileInput{display:none;}
#fileConverterToolWrapper .drop-zone{border:2px dashed var(--primary-color);border-radius:var(--border-radius-sm);padding:30px;text-align:center;background-color:var(--primary-light);min-height:180px;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;transition:var(--transition);}
#fileConverterToolWrapper .drop-zone.dragover{border-color:var(--secondary-color);background-color:#d4e3ff;box-shadow:0 0 0 3px rgba(67,97,238,0.2);}
#fileConverterToolWrapper #dropZoneMessage{color:var(--primary-color);display:flex;flex-direction:column;align-items:center;gap:10px;}
#fileConverterToolWrapper #dropZoneMessage p{margin-top:0;font-size:1.1em;font-weight:500;color:var(--dark-color);}
#fileConverterToolWrapper #dropZoneMessage .browse-link{color:var(--primary-color);font-weight:600;cursor:pointer;text-decoration:underline;}
#fileConverterToolWrapper #dropZoneHint{font-size:0.85em;color:var(--text-light);margin-top:5px;}
#fileConverterToolWrapper .file-list{list-style:none;padding:0;margin-top:0;max-height:280px;overflow-y:auto;width:100%;}
#fileConverterToolWrapper .file-list:not(:empty){margin-top:15px;}
#fileConverterToolWrapper .file-list:not(:empty) + #dropZoneMessage{display:none;}
#fileConverterToolWrapper .file-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid var(--primary-light);border-radius:var(--border-radius-sm);margin-bottom:8px;background-color:white;box-shadow:var(--shadow-sm);transition:box-shadow 0.2s ease,transform 0.2s ease;}
#fileConverterToolWrapper .file-item:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);}
#fileConverterToolWrapper .file-info{flex-grow:1;display:flex;align-items:center;gap:10px;min-width:0;}
#fileConverterToolWrapper .file-icon{flex-shrink:0;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;}
#fileConverterToolWrapper .file-details{display:flex;flex-direction:column;min-width:0;flex-grow:1;}
#fileConverterToolWrapper .file-name{font-weight:500;color:var(--dark-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:98%;}
#fileConverterToolWrapper .file-status{font-size:0.8em;color:var(--text-light);display:flex;align-items:center;gap:5px;}
#fileConverterToolWrapper .file-status.converting{color:var(--accent-color);}
#fileConverterToolWrapper .file-status.completed{color:var(--success-color);}
#fileConverterToolWrapper .file-status.error{color:var(--warning-color);}
#fileConverterToolWrapper .spinner{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:fc-spinner-border .75s linear infinite;}
@keyframes fc-spinner-border{to{transform:rotate(360deg);}}
#fileConverterToolWrapper .file-actions{display:flex;gap:8px;margin-left:15px;flex-shrink:0;}
#fileConverterToolWrapper .btn-file-action{background:none;border:none;cursor:pointer;padding:5px;color:var(--text-light);border-radius:50%;transition:var(--transition);display:inline-flex;align-items:center;justify-content:center;}
#fileConverterToolWrapper .btn-file-action:hover{color:var(--primary-color);background-color:var(--primary-light);}
#fileConverterToolWrapper .btn-file-action:disabled{color:#bdc3c7;cursor:not-allowed;background-color:transparent;}
#fileConverterToolWrapper .btn-remove-file:hover{color:var(--warning-color);background-color:#fde7f0;}
#fileConverterToolWrapper .download-all-container{text-align:center;margin-top:20px;}
@media (max-width:768px){#fileConverterToolWrapper .file-item{flex-direction:column;align-items:flex-start;gap:10px;}#fileConverterToolWrapper .file-actions{align-self:flex-end;}}
#openBtn{padding:10px 20px;cursor:pointer;}
#overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);display:none;z-index:1000;}
#codeBox{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#111;color:#0f0;padding:20px;width:80%;max-width:600px;border-radius:10px;display:none;z-index:1001;}
#copyBtn{position:absolute;top:10px;right:10px;background:#00ff88;border:none;padding:5px 10px;cursor:pointer;border-radius:5px;}
.sur{position:absolute;top:10px;right:65px;background:linear-gradient(to right,orange,green);under-line:none;border:none;padding:5px 10px;cursor:pointer;border-radius:5px;}
pre{overflow:auto;max-height:300px;margin-top:30px;white-space:pre-wrap;}