/* General Reset */
* { margin:0; padding:0; box-sizing:border-box; font-family: 'Inter', sans-serif; }
body { background:#0f172a; color:#fff; line-height:1.6; }
a { text-decoration:none; color:inherit; }

/* Container */
.container { width:90%; max-width:1200px; margin:0 auto; }

/* Header */
header { padding:30px 0; text-align:center; background:#1e293b; }
header h1 { font-size:2.5rem; color:#22c55e; }
header p { font-size:1rem; margin-top:5px; color:#cbd5e1; }

/* Hero Section */
.hero { text-align:center; padding:60px 20px; background:#111827; }
.hero h2 { font-size:2rem; margin-bottom:10px; color:#22c55e; }
.hero p { color:#94a3b8; margin-bottom:20px; }
.btn-primary { background:#22c55e; padding:12px 25px; border-radius:6px; color:#fff; font-weight:600; transition:0.3s; }
.btn-primary:hover { background:#16a34a; }

/* Tools Grid */
.tools { padding:50px 0; }
.grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap:25px; }

/* Tool Card */
.tool-card { background:#1e293b; border-radius:12px; padding:20px; text-align:center; transition:0.3s; }
.tool-card:hover { transform:translateY(-5px); box-shadow:0 10px 20px rgba(0,0,0,0.3); }
.tool-card img { width:80px; margin-bottom:15px; }
.tool-card h3 { font-size:1.2rem; margin-bottom:10px; color:#22c55e; }
.tool-card p { font-size:0.9rem; color:#cbd5e1; margin-bottom:15px; }
.btn-secondary { display:inline-block; padding:8px 18px; border-radius:6px; background:#22c55e; color:#fff; font-weight:500; transition:0.3s; }
.btn-secondary:hover { background:#16a34a; }

/* Footer */
footer { padding:20px 0; background:#1e293b; text-align:center; color:#94a3b8; font-size:0.9rem; }
footer a { color:#22c55e; }

/* TOOL PAGE LAYOUT */

.tool{
display:flex;
justify-content:center;
align-items:flex-start;
margin-top:40px;
}

.tool-box{
background:#1e2a3a;
padding:40px;
border-radius:12px;
text-align:center;
width:420px;
box-shadow:0 10px 25px rgba(0,0,0,0.4);
}

.tool-box input{
margin-top:15px;
margin-bottom:20px;
}

.tool-box button{
background:#22c55e;
border:none;
padding:10px 18px;
border-radius:6px;
cursor:pointer;
color:white;
font-weight:600;
}

.tool-box button:hover{
opacity:0.9;
}

.preview{
margin-top:25px;
}

.preview img{
max-width:100%;
border-radius:10px;
}

.info{
max-width:700px;
margin:60px auto;
text-align:center;
line-height:1.6;
}

.tool-box textarea{
width:100%;
margin-top:15px;
margin-bottom:20px;
padding:10px;
border-radius:6px;
border:none;
}

.json-output{
background:#1e1e1e;
color:#00ff9d;
padding:20px;
border-radius:8px;
margin-top:15px;
overflow:auto;
white-space:pre-wrap;
font-family:monospace;
font-size:14px;
}

button{
padding:10px 16px;
border:none;
border-radius:6px;
background:#4f7cff;
color:white;
font-weight:600;
cursor:pointer;
margin-right:8px;
}

button:hover{
background:#3a63d8;
}

.output-title{
margin-top:20px;
color:#0f0303;
font-size:20px;
font-weight:600;
}

/* Info section under tools */

.info{
margin-top:60px;
padding:40px;
background:#111;
border-radius:10px;
line-height:1.7;
}

.info h2{
margin-bottom:15px;
font-size:24px;
}

.info p{
margin-bottom:15px;
color:#ddd;
}

/* Small spacing fix for tool pages */

.tool.container{
max-width:700px;
margin:30px auto;
padding:20px;
}

/* input spacing */

.tool input,
.tool select,
.tool textarea{
width:100%;
padding:10px;
margin-top:8px;
margin-bottom:12px;
}

/* button spacing */

.tool button{
margin-top:8px;
margin-right:8px;
padding:8px 14px;
}

/* result text */

.tool p{
margin-top:12px;
}

/* TOOL CARD LUXURY STYLE */

.tool-card{
background: linear-gradient(145deg,#161616,#0e0e0e);
border-radius:12px;
padding:25px;
text-align:center;
transition: all 0.3s ease;
border:1px solid rgba(255,255,255,0.05);
}

.tool-card:hover{
transform: translateY(-6px);
box-shadow:0 10px 25px rgba(0,0,0,0.6);
border:1px solid #00ff9d;
}

.tool-card img{
width:50px;
margin-bottom:10px;
}

.tool-card h3{
margin:10px 0;
font-weight:600;
}

.tool-card p{
font-size:14px;
color:#aaa;
}

/* PREMIUM BUTTON */

.btn-secondary{
background:#00ff9d;
color:#000;
padding:10px 18px;
border-radius:6px;
font-weight:600;
text-decoration:none;
transition:0.3s;
display:inline-block;
}

.btn-secondary:hover{
background:#00d784;
transform:scale(1.05);
}


header{
background:#0d0d0d;
border-bottom:1px solid rgba(255,255,255,0.05);
}

header h1{
color:#00ff9d;
letter-spacing:1px;
}

body{
font-family:'Inter',sans-serif;
background:#0b0b0b;
color:#fff;
animation:fadeIn 0.6s ease;
}

@keyframes fadeIn{
from{
opacity:0;
transform:translateY(10px);
}
to{
opacity:1;
transform:translateY(0);
}
}

.tool{
background:linear-gradient(145deg,#141414,#0c0c0c);
border-radius:12px;
padding:25px;
border:1px solid rgba(255,255,255,0.05);
box-shadow:0 5px 20px rgba(0,0,0,0.5);
}

input:focus,
textarea:focus,
select:focus{
outline:none;
border:1px solid #00ff9d;
box-shadow:0 0 6px #00ff9d55;
}

/* Icon style improvement */

.tool-card img{
width:48px;
margin-bottom:12px;
filter: brightness(1.8) contrast(1.2);
transition:0.3s;
}

.tool-card:hover img{
transform:scale(1.1);
filter: brightness(2);
}



/* Accent color glow for all tool cards */

.tool-card:nth-child(1){border-top:3px solid #00ff9d;}
.tool-card:nth-child(2){border-top:3px solid #00c3ff;}
.tool-card:nth-child(3){border-top:3px solid #ffb300;}
.tool-card:nth-child(4){border-top:3px solid #ff4d6d;}
.tool-card:nth-child(5){border-top:3px solid #7c4dff;}
.tool-card:nth-child(6){border-top:3px solid #00ff9d;}
.tool-card:nth-child(7){border-top:3px solid #00c3ff;}
.tool-card:nth-child(8){border-top:3px solid #ffb300;}
.tool-card:nth-child(9){border-top:3px solid #ff4d6d;}
.tool-card:nth-child(10){border-top:3px solid #7c4dff;}
.tool-card:nth-child(11){border-top:3px solid #00ff9d;}
.tool-card:nth-child(12){border-top:3px solid #00c3ff;}
.tool-card:nth-child(13){border-top:3px solid #ffb300;}
.tool-card:nth-child(14){border-top:3px solid #ff4d6d;}
.tool-card:nth-child(15){border-top:3px solid #7c4dff;}
.tool-card:nth-child(16){border-top:3px solid #00ff9d;}
.tool-card:nth-child(17){border-top:3px solid #00c3ff;}
.tool-card:nth-child(18){border-top:3px solid #ffb300;}
.tool-card:nth-child(19){border-top:3px solid #ff4d6d;}
.tool-card:nth-child(20){border-top:3px solid #7c4dff;}

/* Accent colors for cards */

.tool-card{
border-radius:12px;
transition:0.3s;
}

.tool-card:hover{
transform:translateY(-6px);
box-shadow:0 10px 25px rgba(0,0,0,0.6);
}

body{
background: radial-gradient(circle at top,#111,#070707 60%);
color:#fff;
}

.tool-card img{
background:#353434;
padding:10px;
border-radius:10px;
}


/* Hero upgrade */

.hero{
background: linear-gradient(135deg,#0f2027,#203a43,#2c5364);
padding:80px 20px;
text-align:center;
}

.hero h2{
font-size:36px;
margin-bottom:15px;
}

.hero p{
color:#d6d6d6;
margin-bottom:25px;
}

.tool-card{
background:#111;
padding:25px;
border-radius:12px;
transition:all 0.3s ease;
}

.tool-card:hover{
transform:translateY(-8px);
box-shadow:0 15px 30px rgba(0,0,0,0.6);
}

.tool-card img{
width:48px;
margin-bottom:12px;
filter:brightness(1.4);
transition:0.3s;
}

.tool-card:hover img{
transform:scale(1.1);
}

.btn-secondary{
background:linear-gradient(135deg,#00ff9d,#00c3ff);
color:#000;
padding:10px 18px;
border-radius:8px;
font-weight:600;
text-decoration:none;
transition:0.3s;
}

.btn-secondary:hover{
transform:scale(1.05);
box-shadow:0 5px 15px rgba(0,255,157,0.4);
}

/* Info pages style */

.info{
background:#111;
padding:40px;
border-radius:10px;
margin-top:40px;
}

.info h2{
margin-top:20px;
margin-bottom:10px;
color:#00ff9d;
}

.info p{
line-height:1.7;
color:#ddd;
}

.tool{
max-width:600px;
margin:40px auto;
text-align:center;
}

.tool input{
margin-top:20px;
}

.tool button{
margin-top:15px;
}

.info{
margin-top:40px;
line-height:1.7;
}

/* Tool spacing fix */

.tool input,
.tool select,
.tool textarea,
.tool button {
margin-top:12px;
margin-bottom:12px;
}

.tool button{
margin-right:10px;
}

input[type="file"]{
margin-top:10px;
margin-bottom:15px;
}

.tool label{
display:block;
margin-top:15px;
font-weight:600;
}

.tool input,
.tool select,
.tool textarea{
padding:10px;
border-radius:6px;
border:1px solid #444;
background:#1a1a1a;
color:#fff;
}

.tool{
padding:30px;
border-radius:12px;
}

.tool{
padding:30px;
border-radius:12px;
}

.tool-card:nth-child(1){border-top:3px solid #00ff9d;}
.tool-card:nth-child(2){border-top:3px solid #00c3ff;}
.tool-card:nth-child(3){border-top:3px solid #ffb300;}
.tool-card:nth-child(4){border-top:3px solid #ff4d6d;}
.tool-card:nth-child(5){border-top:3px solid #7c4dff;}

.tool-card:nth-child(6){border-top:3px solid #00ff9d;}
.tool-card:nth-child(7){border-top:3px solid #00c3ff;}
.tool-card:nth-child(8){border-top:3px solid #ffb300;}
.tool-card:nth-child(9){border-top:3px solid #ff4d6d;}
.tool-card:nth-child(10){border-top:3px solid #7c4dff;}

.tool-card:nth-child(11){border-top:3px solid #00ff9d;}
.tool-card:nth-child(12){border-top:3px solid #00c3ff;}
.tool-card:nth-child(13){border-top:3px solid #ffb300;}
.tool-card:nth-child(14){border-top:3px solid #ff4d6d;}
.tool-card:nth-child(15){border-top:3px solid #7c4dff;}

.tool-card:nth-child(16){border-top:3px solid #00ff9d;}
.tool-card:nth-child(17){border-top:3px solid #00c3ff;}
.tool-card:nth-child(18){border-top:3px solid #ffb300;}
.tool-card:nth-child(19){border-top:3px solid #ff4d6d;}
.tool-card:nth-child(20){border-top:3px solid #7c4dff;}

/* new two */

.tool-card:nth-child(21){border-top:3px solid #ff4d6d;}
.tool-card:nth-child(22){border-top:3px solid #7c4dff;}


.tool{
padding:30px;
margin-top:30px;
background:#141414;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.4);
}

.tools-list{
list-style:none;
padding:0;
}

.tools-list li{
margin:10px 0;
}

.tools-list a{
color:#00ff9d;
text-decoration:none;
font-weight:600;
}

.tools-list a:hover{
text-decoration:underline;
}

.tool{
max-width:700px;
margin:40px auto;
padding:30px;
background:#111;
border-radius:12px;
box-shadow:0 0 15px rgba(0,0,0,0.6);
text-align:left;
}

.tool label{
display:block;
margin-top:15px;
margin-bottom:6px;
font-weight:600;
}

.tool input,
.tool select,
.tool button{
width:100%;
max-width:100%;
padding:10px;
margin-bottom:15px;
border-radius:6px;
border:1px solid #444;
}

.tool button{
width:auto;
padding:10px 20px;
cursor:pointer;
}

input[type="file"]{
padding:8px;
background:#1a1a1a;
color:white;
border:1px solid #444;
border-radius:6px;
}

button{
background:#3b82f6;
color:white;
border:none;
font-weight:600;
transition:0.2s;
}

button:hover{
background:#2563eb;
}

/* Tool layout fix */
.tool{
max-width:700px;
margin:40px auto;
padding:30px;
background:#111;
border-radius:12px;
box-shadow:0 0 15px rgba(0,0,0,0.6);
display:flex;
flex-direction:column;
gap:14px;
}

/* Labels */
.tool label{
font-weight:600;
margin-top:5px;
}

/* Inputs */
.tool input,
.tool select,
.tool textarea{
width:100%;
padding:10px;
border-radius:6px;
border:1px solid #444;
background:#1a1a1a;
color:#fff;
}

/* File input fix */
.tool input[type="file"]{
padding:6px;
background:#1a1a1a;
}

/* Buttons */
.tool button{
width:fit-content;
padding:10px 18px;
border:none;
border-radius:6px;
background:#3b82f6;
color:white;
font-weight:600;
cursor:pointer;
margin-top:6px;
}

.tool button:hover{
background:#2563eb;
}



/* Canvas spacing */
.tool canvas{
margin-top:10px;
border-radius:8px;
}

/* Download button */
#downloadLink{
margin-top:10px;
display:inline-block;
}


/* TOOL PAGE ONLY (not homepage) */

.tool-box{
max-width:600px;
margin:40px auto;
padding:30px;
background:#111;
border-radius:12px;
box-shadow:0 0 15px rgba(0,0,0,0.6);
text-align:center;
}


/* Inputs */

.tool-box input{
display:block;
margin:15px auto;
padding:10px;
border-radius:6px;
border:1px solid #444;
background:#1a1a1a;
color:#fff;
}


/* Buttons */

.tool-box button{
display:block;
margin:15px auto;
padding:10px 20px;
border:none;
border-radius:6px;
background:#3b82f6;
color:#fff;
font-weight:600;
cursor:pointer;
}

.tool-box button:hover{
background:#2563eb;
}


.tool input[type="file"]{
display:block;
margin:15px auto;
text-align:center;
}

/* Center tools section */
.tools .container #PDF {
max-width:600px;
margin:40px auto;
padding:30px;
background:#111;
border-radius:12px;
box-shadow:0 0 15px rgba(0,0,0,0.6);
text-align:center;
}

/* Input styling */
.tools input{
display:block;
margin:15px auto;
padding:10px;
border-radius:6px;
border:1px solid #444;
background:#1a1a1a;
color:#fff;
}

/* Button styling */
.tools button{
display:block;
margin:15px auto;
padding:10px 20px;
border:none;
border-radius:6px;
background:#3b82f6;
color:#fff;
font-weight:600;
cursor:pointer;
}

.tools button:hover{
background:#2563eb;
}

/* Tools.html Page Section */

.tools-list{
max-width:900px;
margin:40px auto;
padding:20px;
font-family:'Inter', sans-serif;
}

.tools-list h1{
font-size:36px;
margin-bottom:10px;
text-align:center;
color:#222;
}

.tools-list p{
text-align:center;
color:#555;
margin-bottom:30px;
font-size:16px;
}

.tools-list h2{
margin-top:30px;
margin-bottom:15px;
color:#333;
border-left:4px solid #4CAF50;
padding-left:10px;
font-size:22px;
}

.tools-list ul{
list-style:none;
padding:0;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:10px;
}

.tools-list li{
background:#f5f5f5;
padding:12px;
border-radius:8px;
transition:0.2s;
}

.tools-list li:hover{
background:#e9f7ef;
transform:translateY(-2px);
}

.tools-list a{
text-decoration:none;
color:#333;
font-weight:500;
}

.tools-list a:hover{
color:#2e7d32;
}

#canvas {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
}

.tool-box {
    max-width: 500px; /* or 600px */
    margin: auto;
    overflow: hidden;
}

.preview-box {
    background: #222;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
}


/* for other tools now */
.info {
    margin-top: 60px;
    padding: 25px;
    background: #111;
    border-radius: 12px;
    line-height: 1.7;
}

.info h2 {
    margin-top: 20px;
    font-size: 1.4rem;
    color: #00ff9d;
}

.info p {
    color: #ccc;
}

.info ol {
    margin-left: 20px;
    color: #ddd;
}

.home-content {
  max-width: 900px;
  margin: 60px auto;
  padding: 20px;
  background: #0f172a;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  color: #e5e7eb;
}

.home-content h2 {
  color: #22c55e;
}

.home-page .content-section {
  background: #0f172a;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}