@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800&display=swap");

:root{
  --bg-color:#000;
  --text-color:#fff;
  --accent-color:#b36bff;   /* purple */
  --hover-color:#e26d6d;    /* red */
}

*{ box-sizing:border-box; }

body{
  margin:0; padding:0;
  background:var(--bg-color); color:var(--text-color);
  font-family:'Poppins',sans-serif;
  transition:background-color .3s ease,color .3s ease;
}

/* ===== Section ===== */
.skills-section{
  text-align:center;
  padding:24px 12px 64px;
  max-width:1200px;
  margin-inline:auto;
}
.section-title{
  font-size:3rem; line-height:1.1; margin:0 0 8px 0; font-weight:800;
  color:var(--text-color);
}
.section-title span{ color:#e26d6d !important; }

/* use html for theme detection (class is on <html>) */
html:not(.dark-theme) .section-title{ color:#000 !important; }
html:not(.dark-theme) .section-title span{ color:#b36bff !important; }

/* Instruction text color per theme */
html.dark-theme .section-subtitle{ color:#fff; }
html:not(.dark-theme) .section-subtitle{ color:#000; }

.section-subtitle{
  font-size:1.1rem; margin:0 0 22px 0; color:#cfcfcf;
}

/* ===== Grid (fully responsive) ===== */
.skills-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap:18px;
  margin-top:10px;
  padding:0 4px;
}

/* ===== Card ===== */
.skill-card{
  background:#111;
  border-radius:18px;
  padding:22px 12px;
  aspect-ratio: 1 / 1.05;                    /* একটু লম্বা look */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; position:relative; overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,0.04), 0 8px 18px rgba(0,0,0,0.28);
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease;
}

/* পুরো কার্ডে hover effect */
.skill-card:hover,
.skill-card:focus-visible{
  transform: translateY(-8px) scale(1.02);
  background:#161616;
  box-shadow:0 8px 22px rgba(226,109,109,0.25), 0 14px 30px rgba(0,0,0,0.38);
  outline: 0;
}

/* ===== Icon (bigger + nice container) ===== */
.skill-card img{
  width: 110px;                 /* bigger icon */
  height: 110px;
  object-fit: contain;
  background:#fff;              /* white bubble */
  padding:16px;
  border-radius:18px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.28);
  transition: transform .25s ease, box-shadow .25s ease;
  margin-bottom: 20px;          /* text নিচে নামানোর gap */
}

/* কার্ড hover করলে image-ও animate হবে */
.skill-card:hover img,
.skill-card:focus-visible img{
  transform: scale(1.08);
  box-shadow: 0 0 18px var(--hover-color), 0 0 28px rgba(179,107,255,0.55);
}

/* ===== Label ===== */
.skill-card p{
  font-size:1.12rem;            /* একটু বড় */
  line-height:1.1;
  margin: 6px 0 0;              /* আরও নিচে */
  color:var(--accent-color);
  font-weight:800;
  letter-spacing:.2px;
  transition: color .2s ease;
}
.skill-card:hover p,
.skill-card:focus-visible p{
  color: var(--hover-color);
}

/* ===== Breakpoints ===== */
@media (min-width: 768px){
  .skills-grid{ gap:20px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}
@media (max-width: 575.98px){
  .skills-grid{ grid-template-columns: repeat(2, 1fr); gap:14px; }
  .skill-card{ padding:18px 10px; border-radius:16px; }
  .skill-card img{ width: 96px; height:96px; padding:14px; border-radius:16px; margin-bottom:16px; }
  .section-title{ font-size:2.4rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}