/* =====================================================================
   BD Materials – Tools Premium Theme  v2.0
   Scoped to /tools/*.  Keeps all original class names & markup intact.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Merriweather:wght@700;900&display=swap');

:root{
  --bdm-navy:#0b1020;
  --bdm-navy-2:#141a34;
  --bdm-ink:#1a1f2e;
  --bdm-muted:#5b6478;
  --bdm-soft:#f5f7fb;
  --bdm-line:rgba(16,24,40,.08);
  --bdm-teal:#17a99a;
  --bdm-teal-2:#2dd4a8;
  --bdm-violet:#8b5cf6;
  --bdm-violet-2:#a78bfa;
  --bdm-grad:linear-gradient(135deg,#2dd4a8 0%,#17a99a 45%,#8b5cf6 100%);
  --bdm-grad-soft:linear-gradient(135deg,rgba(45,212,168,.12),rgba(139,92,246,.12));
  --bdm-shadow-sm:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.08);
  --bdm-shadow-md:0 10px 30px -12px rgba(15,23,42,.25);
  --bdm-shadow-lg:0 25px 60px -20px rgba(15,23,42,.35);
  --bdm-radius:16px;
}

html{scroll-behavior:smooth;}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--bdm-ink);
  background:
    radial-gradient(1200px 600px at 85% -10%,rgba(139,92,246,.10),transparent 60%),
    radial-gradient(900px 500px at -10% 10%,rgba(45,212,168,.10),transparent 60%),
    #fafbff;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- Navbar ---------- */
nav{
  background:rgba(255,255,255,.85)!important;
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  box-shadow:0 1px 0 rgba(16,24,40,.06),0 8px 24px -12px rgba(16,24,40,.15);
  border-bottom:1px solid rgba(16,24,40,.06)!important;
}
nav a{font-weight:500;color:#334155;}
nav a:hover{color:var(--bdm-teal);}

/* ---------- Hero / Tool section ---------- */
.toolsection{
  min-height:70vh;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  padding-block:64px 40px;
}

.half-section{
  width:78%;
  max-width:1100px;
  background:linear-gradient(180deg,#ffffff 0%,#fbfcff 100%);
  border:1px solid var(--bdm-line);
  box-shadow:var(--bdm-shadow-lg);
  padding:44px 40px 56px;
  border-radius:24px;
  position:relative;
  overflow:hidden;
}
.half-section::before{
  content:"";
  position:absolute;inset:0 0 auto 0;height:5px;
  background:var(--bdm-grad);
}
.half-section::after{
  content:"";
  position:absolute;right:-120px;top:-120px;
  width:320px;height:320px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(139,92,246,.18),transparent);
  pointer-events:none;
}

.toolheading{
  font-family:'Merriweather',Georgia,serif;
  font-size:clamp(1.75rem,3.4vw,2.75rem);
  font-weight:800;
  text-align:center;
  letter-spacing:-.02em;
  background:linear-gradient(90deg,#0b1020 0%,#17a99a 55%,#8b5cf6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:10px;
}
.description{
  width:78%;
  text-align:center;
  margin:0 auto 6px;
  color:var(--bdm-muted);
  font-size:1rem;
  line-height:1.65;
}

/* ---------- Toolbox (dropzone / action area) ---------- */
.toolbox{
  padding:40px 24px;
  width:70%;
  margin:32px auto 0;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:22px;
  min-height:220px;
  border-radius:20px;
  flex-wrap:wrap;
  background:var(--bdm-grad-soft);
  border:1.5px dashed rgba(23,169,154,.45);
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.toolbox:hover{
  border-color:var(--bdm-violet);
  box-shadow:var(--bdm-shadow-md);
  transform:translateY(-2px);
}

/* Buttons */
.downloadbutton,
.herobutton a,
button[type="submit"],
.toolbox button,
.toolbox a{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 26px;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
  color:#fff!important;
  background:var(--bdm-grad);
  border:0;
  box-shadow:0 10px 24px -12px rgba(23,169,154,.6),0 6px 14px -8px rgba(139,92,246,.5);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
  cursor:pointer;
}
.downloadbutton:hover,
.herobutton a:hover,
button[type="submit"]:hover,
.toolbox button:hover,
.toolbox a:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
  box-shadow:0 16px 30px -12px rgba(23,169,154,.7),0 10px 20px -10px rgba(139,92,246,.55);
}

/* ---------- Category dropdown (index page pill nav) ---------- */
.mydrop{width:100%!important;padding:32px 24px;}
.mydrop ul{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
}
.mydrop ul li a{
  padding:10px 22px;
  border-radius:999px;
  color:var(--bdm-ink);
  background:#fff;
  border:1px solid var(--bdm-line);
  box-shadow:var(--bdm-shadow-sm);
  font-weight:500;font-size:.9rem;
  transition:all .2s ease;
}
.mydrop ul li a:hover{
  color:#fff;
  background:var(--bdm-grad);
  border-color:transparent;
  transform:translateY(-1px);
  box-shadow:var(--bdm-shadow-md);
}

/* ---------- Tool grid (index page) ---------- */
.toollist{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:22px;
  padding:32px 5% 80px;
  max-width:1400px;
  margin:0 auto;
}
@media (min-width:1068px){
  .toollist{grid-template-columns:repeat(5,minmax(230px,1fr));}
}

.singletools{
  position:relative;
  min-height:230px;
  background:#fff;
  border:1px solid var(--bdm-line);
  border-radius:var(--bdm-radius);
  padding:26px 22px;
  box-shadow:var(--bdm-shadow-sm);
  overflow:hidden;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
  isolation:isolate;
}
.singletools::before{
  content:"";
  position:absolute;inset:0;
  background:var(--bdm-grad);
  opacity:0;transition:opacity .28s ease;
  z-index:-1;
}
.singletools::after{
  content:"";
  position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--bdm-grad);
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s ease;
}
.singletools:hover{
  transform:translateY(-6px);
  border-color:transparent;
  box-shadow:var(--bdm-shadow-lg);
}
.singletools:hover::after{transform:scaleX(1);}

.singletools a{
  height:100%;width:100%;display:inline-block;z-index:5;cursor:pointer;
  text-decoration:none;
}
.singletools a img{
  height:46px;width:auto;
  padding:8px;
  border-radius:12px;
  background:var(--bdm-grad-soft);
  transition:transform .3s ease;
}
.singletools:hover a img{transform:scale(1.08) rotate(-3deg);}
.singletools a h2{
  font-size:1.05rem;
  margin-top:18px;
  font-weight:700;
  line-height:1.4;
  color:var(--bdm-ink);
  margin-bottom:6px;
  letter-spacing:-.01em;
}
.singletools a p{
  margin-top:6px;
  font-size:.82rem;
  line-height:1.55;
  color:var(--bdm-muted);
  font-weight:400;
  letter-spacing:.1px;
}

.imgbox{display:flex;justify-content:flex-start;align-items:center;gap:16px;}

/* ---------- Features / marketing sections ---------- */
#features{margin-top:0;padding-block:96px;}
#features h2,#features h3{
  font-family:'Merriweather',Georgia,serif;
  letter-spacing:-.01em;
}

/* ---------- Animations ---------- */
.myanime{animation:animate 5s alternate infinite;}
@keyframes animate{100%{transform:rotate(360deg);}}

@keyframes bdm-fade-up{
  from{opacity:0;transform:translateY(14px);}
  to  {opacity:1;transform:translateY(0);}
}
.half-section,.singletools,.toolbox{
  animation:bdm-fade-up .6s ease both;
}

/* ---------- Forms / inputs inside toolbox ---------- */
.toolbox input[type="file"],
.toolbox input[type="text"],
.toolbox input[type="number"],
.toolbox select,
.toolbox textarea{
  border:1px solid var(--bdm-line);
  background:#fff;
  border-radius:12px;
  padding:10px 14px;
  font:inherit;
  color:var(--bdm-ink);
  box-shadow:var(--bdm-shadow-sm);
  transition:border-color .2s,box-shadow .2s;
}
.toolbox input:focus,.toolbox select:focus,.toolbox textarea:focus{
  outline:none;
  border-color:var(--bdm-teal);
  box-shadow:0 0 0 4px rgba(23,169,154,.15);
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .half-section{width:88%;padding:36px 28px 44px;}
  .toolbox{width:88%;}
  .description{width:92%;}
}
@media (max-width:710px){
  .toolsection{gap:32px;padding-block:40px 24px;}
  .half-section{width:94%;padding:28px 20px 36px;border-radius:20px;}
  .toolbox{width:96%;padding:28px 16px;gap:14px;}
  .description{width:96%;font-size:.95rem;}
  #features{padding-block:56px;}
  .herobutton{width:100%;display:flex;flex-flow:column!important;gap:16px;}
  .herobutton a{width:80%;margin:0 auto;}
}
@media (max-width:567px){
  .mydrop{padding:16px 8px;}
  #dropdownNavbar{transform:translate3d(0,80px,0)!important;}
  .mydrop ul{padding-inline:8px;}
  .mydrop ul li a{padding:8px 16px;font-size:.82rem;}
  .MYIMG{width:100%!important;}
  .toollist{padding:20px 4% 60px;gap:16px;}
  .singletools{min-height:auto;padding:22px 18px;}
  .singletools a img{height:40px;}
  .singletools a h2{font-size:1rem;margin-top:14px;}
}

/* ---------- Utility niceties ---------- */
::selection{background:rgba(45,212,168,.28);color:#0b1020;}
img{max-width:100%;height:auto;}
a{transition:color .2s ease;}