/* 🔥 RESET */
*,
*::before,
*::after{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* BODY */
body{
  font-family: system-ui, -apple-system, sans-serif;
  background: linear-gradient(135deg,#eef2ff,#f8fafc);
  color:#111827;
  line-height:1.6;
}

/* CONTAINER */
.container{
  max-width:1100px;
  margin:auto;
  padding:20px;
}

/* 🔥 HEADER */
.header{
  background: linear-gradient(135deg,#2563eb,#1e3a8a);
  color:#fff;
  text-align:center;
  padding:40px 20px;
  border-radius:0 0 20px 20px;
}

.header h1{
  font-size:32px;
  margin-bottom:10px;
}

.header p{
  opacity:0.9;
}

/* 🔍 SEARCH */
#search{
  width:100%;
  padding:12px;
  border-radius:10px;
  border:1px solid #ddd;
  margin:20px 0;
  font-size:16px;
  outline:none;
}

/* 🔥 TOOLS GRID */
.tools{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:15px;
  margin-top:20px;
}

/* 🔥 CARD DESIGN */
.card{
  display:block;
  background:#fff;
  padding:20px;
  border-radius:14px;
  text-align:center;
  text-decoration:none;
  color:#111;
  font-weight:600;
  box-shadow:0 5px 15px rgba(0,0,0,0.08);
  transition:all 0.3s ease;
}

.card:hover{
  transform:translateY(-5px);
  box-shadow:0 10px 25px rgba(0,0,0,0.15);
  color:#2563eb;
}

/* 🔥 BUTTON */
button{
  width:100%;
  background: linear-gradient(135deg,#2563eb,#1d4ed8);
  color:#fff;
  padding:12px 18px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  font-size:15px;
  font-weight:600;
  transition:all 0.3s ease;
}

button:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(37,99,235,0.3);
}

/* 🔥 UPLOAD BUTTON */
.upload-btn{
  display:block;
  background:#2563eb;
  color:#fff;
  padding:12px;
  border-radius:10px;
  text-align:center;
  cursor:pointer;
  margin-bottom:10px;
  transition:all 0.3s ease;
}

.upload-btn:hover{
  background:#1e40af;
}

/* 🔥 INPUT */
input, textarea{
  width:100%;
  padding:10px;
  border-radius:8px;
  border:1px solid #ccc;
  font-size:15px;
  outline:none;
}

/* 🔥 TOOL BOX */
.tool-box{
  background:#fff;
  padding:20px;
  border-radius:14px;
  box-shadow:0 5px 15px rgba(0,0,0,0.08);
  margin-top:20px;
}

/* 🔥 IMAGE */
img{
  max-width:100%;
  height:auto; /* 🔥 IMPORTANT FIX */
  border-radius:10px;
  margin-top:15px;
}

/* 🔥 DOWNLOAD BUTTON */
#download{
  display:inline-block;
  margin-top:10px;
  background:#16a34a;
  color:#fff;
  padding:10px 15px;
  border-radius:8px;
  text-decoration:none;
  transition:all 0.3s ease;
}

#download:hover{
  background:#15803d;
}

/* 🔗 TOOL LINKS */
.tool-list a{
  display:inline-block;
  margin:5px;
  padding:8px 12px;
  background:#e0ecff;
  border-radius:8px;
  text-decoration:none;
  color:#1e40af;
  font-size:14px;
  transition:all 0.3s ease;
}

.tool-list a:hover{
  background:#2563eb;
  color:#fff;
}

/* 🔗 RELATED TOOLS */
#related-tools a{
  display:inline-block;
  margin:5px;
  padding:8px 12px;
  background:#e0ecff;
  border-radius:8px;
  text-decoration:none;
  color:#1e40af;
  transition:0.3s;
}

#related-tools a:hover{
  background:#2563eb;
  color:#fff;
}

/* 🔥 HEADINGS */
h1, h2, h3{
  margin-top:20px;
  margin-bottom:10px;
  line-height:1.3;
}

/* TEXT */
p{
  margin-bottom:12px;
}

ul, ol{
  margin-left:20px;
  margin-bottom:15px;
}

/* 🔥 CTA BUTTON */
.cta{
  display:inline-block;
  background:#f59e0b;
  color:#fff;
  padding:12px 18px;
  border-radius:10px;
  text-decoration:none;
  font-weight:bold;
  margin-top:10px;
  transition:0.3s;
}

.cta:hover{
  background:#d97706;
}

/* 🔻 FOOTER */
.footer{
  text-align:center;
  padding:20px;
  margin-top:40px;
  background:#111827;
  color:#fff;
}

/* 📱 MOBILE RESPONSIVE */
@media(max-width:768px){

  .header h1{
    font-size:24px;
  }

  .container{
    padding:15px;
  }

  .tools{
    grid-template-columns:1fr;
  }

}