:root{
      --primary:#7657f1;
      --primary-600:#6446f0;
      --primary-700:#5136e6;
      --bg:#ffffff;
      --text:#0f1020;
      --muted:#6b7280;
      --border:#e5e7eb;
      --surface:#ffffff;
      --shadow:0 8px 24px rgba(118,87,241,0.18);
      --radius:18px;
      --radius-sm:14px;
      --gap:18px;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;line-height:1.6}
    a{color:var(--primary);text-decoration:none}
    a:hover{opacity:.9}

    /* Layout */
    .container{max-width:1120px;margin:0 auto;padding:24px}
    header.nav{
      position:sticky;top:0;background:rgba(255,255,255,.75);backdrop-filter:saturate(180%) blur(10px);
      border-bottom:1px solid var(--border);z-index:50;
    }
    .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px;max-width:1120px;margin:0 auto}
    .brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--text)}
    .brand-badge{width:34px;height:34px;border-radius:10px;background:var(--primary);display:grid;place-items:center;color:#fff;font-weight:900;box-shadow:var(--shadow)}
    .nav-links{display:flex;gap:16px;flex-wrap:wrap}
    .nav-links a{padding:8px 12px;border-radius:10px}
    .nav-cta{display:flex;gap:10px}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:8px;
      padding:12px 16px;border-radius:12px;border:1px solid transparent;font-weight:700;cursor:pointer;
      transition:transform .05s ease, box-shadow .2s ease, background .2s ease;
      text-decoration:none;
    }
    .btn:active{transform:translateY(1px)}
    .btn-primary{background:var(--primary);color:#fff;box-shadow:var(--shadow)}
    .btn-primary:hover{background:var(--primary-600)}
    .btn-ghost{background:#fff;border-color:var(--border);color:var(--text)}
    .btn-ghost:hover{border-color:#d1d5db}

    /* Hero */
    .hero{padding:56px 0}
    .hero-wrap{
      grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;
    }
    .hero-card{
      background:linear-gradient(180deg,#fff, #fafaff);
      border:1px solid var(--border); border-radius:var(--radius);
      padding:28px; box-shadow:var(--shadow)
    }
    .eyebrow{display:inline-block;font-weight:800;color:#fff;background:var(--primary);padding:6px 12px;border-radius:999px}
    h1{font-size:clamp(28px,5vw,42px);line-height:1.15;margin:14px 0 8px}
    .lead{color:#2b2f36;font-size:clamp(16px,2.2vw,18px);margin:0 0 18px}
    .muted{color:var(--muted)}
    .hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

    /* Search/URL input */
    .input-row,select{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
    .input,select{
      flex:1 1 280px;padding:14px 16px;border:1px solid var(--border);border-radius:12px;
      outline:none;font-size:16px;
    }
    .input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(118,87,241,.15)}

    /* Cards Grid */
    .grid{display:grid;gap:var(--gap)}
    .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
    @media (max-width:1024px){ .hero-wrap{grid-template-columns:1fr} .grid-4{grid-template-columns:repeat(2,1fr)} }
    @media (max-width:640px){ .grid-3{grid-template-columns:1fr} .grid-4{grid-template-columns:1fr} }

    .card{
      background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
      padding:20px;box-shadow:var(--shadow);height:100%;display:flex;flex-direction:column;gap:12px
    }
    .card h3{margin:0;font-size:20px}
    .card p{margin:0}
    .chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:#f4f3ff;color:#3b2ce6;font-weight:700;font-size:12px}
    .pill{display:inline-block;padding:6px 10px;border:1px solid var(--border);border-radius:999px;font-size:12px;color:#333;background:#fff}

    .section{padding:24px 0}
    .section h2{font-size:26px;margin:0 0 12px}
    .list{display:flex;flex-wrap:wrap;gap:8px}

    /* Footer */
    footer{border-top:1px solid var(--border);margin-top:32px}
    .footer-inner{max-width:1120px;margin:0 auto;padding:20px 24px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;color:var(--muted)}
    
    /* Small helper icons (pure CSS) */
    .icon{
      width:28px;height:28px;border-radius:8px;background:var(--primary);display:grid;place-items:center;color:#fff;font-weight:900;box-shadow:var(--shadow)
    }

    /* Accessibility */
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Hamburger Menu (Mobile) */
.menu-toggle {
  display: none;
  font-size: 1.5rem;
  background: none;
  color: var(--white);
  border: none;
  cursor: pointer;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .nav-links {
    position: absolute;
    top: 60px;
    right: 0;
    background: var(--primary);
    flex-direction: column;
    width: 200px;
    padding: 1rem;
    display: none;
    
  }
  a{
    color: #f4f3ff;
  }
  body.nav-open .nav-links {
    display: flex;
  }
}
/* All Tools Page */
.tools-section {
  padding: 2rem 1rem;
  background: #f8f8ff;
}

.page-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.page-desc {
  text-align: center;
  max-width: 500px;
  margin: 0 auto 2rem;
  color: #555;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.tool-card {
  background: var(--white);
  border: 2px solid var(--primary);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  text-decoration: none;
  color: var(--dark);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s;
}

.tool-card:hover {
  transform: translateY(-6px);
  background: var(--primary);
  color: var(--white);
  box-shadow: 0px 6px 20px rgba(0,0,0,0.15);
}

.tool-card:hover h3,
.tool-card:hover p {
  color: var(--white);
}

.tool-card .icon {
  font-size: 2.5rem;
  margin-bottom: 0.8rem;
  background: var(--primary);
  color: var(--white);
  padding: 12px;
  border-radius: 50%;
  display: inline-block;
}
/* for img tab */
.divform{
            background-color: #ffffff;
            padding: 20px;
            border-radius: 8px;
            max-width: 600px;
            margin: 0 auto;
            border-width: 1px;
        }

        label {
            display: block;
            margin-bottom: 5px;
        }

        input[type="file"],
        input[type="text"],
       

        input,
        select {
              width: 100%;
            padding: 10px;
            border-width: 1px;
            border-color: #7657f1;
            border-radius: 4px;
            margin-top: 5px;
        }

        button {
            background-color: #7657f1;
            color: #fcfcfc;
            cursor: pointer;
            font-family:'Courier New', Courier, monospace;
        }

        button:hover {
            background-color: #7657f1;
        }
  form {
            background-color: #ffffff;
            padding: 20px;
            border-radius: 8px;
            max-width: 600px;
            margin: 0 auto;
            border-width: 1px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
        }

        input[type="file"],
        input[type="text"],
        select,
        button {
            width: 100%;
            padding: 10px;
            border-width: 1px;
            border-color: #7657f1;
            border-radius: 4px;
            margin-top: 5px;
        }

        input,
        select {
            background-color: #ffffff;
            color: #000000;
        }

        button {
            background-color: #7657f1;
            color: #fcfcfc;
            cursor: pointer;
            font-family:'Courier New', Courier, monospace;
        }

        button:hover {
            background-color: #7657f1;
        }

        .preview-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 15px;
        }

        .preview-container img {
            width: 100px;
            height: 100px;
            object-fit: contain;
            border: 1px solid #7657f1;
            padding: 5px;
            border-radius: 5px;
            background: #fff;
        }

        .drop-zone {
            border: 2px dashed #7657f1;
            padding: 30px;
            text-align: center;
            cursor: pointer;
            background-color: #d7d7d7;
        }

        .drop-zone.dragover {
            background-color: #444;
        }
.headingmain{
  text-align: center;
}



   .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .drop{border:2px dashed #6d5dfc;border-radius:12px;padding:24px;text-align:center;cursor:pointer;background:#8d84e3}
    .drop.dragover{background:#8d84e3}
    .muted{color:#9aa3af;font-size:12px}
    .hint{color:#7fdc8a;font-size:12px}
    .hidden{display:none}


    input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 5px;
}