@import url("./header.css");
@import url("./footer.css");
@import url("./bot.css");
@import url("https://fonts.googleapis.com/css2?family=Anta&display=swap");

body {
  background: rgb(15 23 42);
  color: rgb(2, 8, 23);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
  /* border: 1px solid rgb(226, 232, 240); */
}

/* --- Global Container & Spacing --- */
.section-padding {
  padding-top: 5rem; /* py-20 */
  padding-bottom: 5rem; /* py-20 */
}

.max-width-container {
  max-width: 80rem; /* max-w-7xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem; /* px-4 */
}

.text-center-wrapper {
  text-align: center;
}

/* --- Hero Section --- */
.hero-section {
  background-image: linear-gradient(
    to bottom right,
    #0f172a,
    #1e293b,
    #0f172a
  ); /* bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 */
  position: relative;
  overflow: hidden;
}

.hero-background-effects {
  position: absolute;
  inset: 0;
}

.hero-blob-emerald {
  position: absolute;
  top: 25%; /* top-1/4 */
  left: 25%; /* left-1/4 */
  width: 24rem; /* w-96 */
  height: 24rem; /* h-96 */
  background-color: rgba(16, 185, 129, 0.1); /* bg-emerald-500/10 */
  border-radius: 50%;
  filter: blur(48px); /* blur-3xl */
}

.hero-blob-blue {
  position: absolute;
  bottom: 25%; /* bottom-1/4 */
  right: 25%; /* right-1/4 */
  width: 24rem; /* w-96 */
  height: 24rem; /* h-96 */
  background-color: rgba(59, 130, 246, 0.1); /* bg-blue-500/10 */
  border-radius: 50%;
  filter: blur(48px); /* blur-3xl */
}

.hero-content {
  position: relative; /* relative */
  max-width: 64rem; /* max-w-7xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem; /* px-4 */
  text-align: center; /* text-center */
  z-index: 1; /* Ensure content is above blobs */
}

.hero-title {
  font-family: "Anta", sans-serif;
  font-size: 3rem; /* text-5xl */
  line-height: 1.2;
  font-weight: 700; /* font-bold */
  color: #ffffff; /* text-white */
  margin-bottom: 1.5rem; /* mb-6 */
}

.hero-title-gradient {
  background-image: linear-gradient(
    to right,
    #34d399,
    #60a5fa
  ); /* from-emerald-400 to-blue-400 */
  -webkit-background-clip: text; /* bg-clip-text */
  -webkit-text-fill-color: transparent; /* text-transparent */
  background-clip: text; /* Fallback */
  color: transparent; /* Fallback */
}

.hero-description {
  font-size: 1.25rem; /* text-xl */
  line-height: 1.625; /* leading-relaxed */
  color: #d1d5db; /* text-gray-300 */
  max-width: 48rem; /* max-w-3xl */
  margin-left: auto;
  margin-right: auto;
}

/* --- Filter Section --- */
.filter-section {
  padding-top: 3rem; /* py-12 */
  padding-bottom: 3rem; /* py-12 */
  background-color: rgba(30, 41, 59, 0.3); /* bg-slate-800/30 */
}

.filter-group {
  display: flex; /* flex */
  flex-wrap: wrap; /* flex-wrap */
  justify-content: center; /* justify-center */
  gap: 1rem; /* gap-4 */
}

.filter-label-wrapper {
  display: flex; /* flex */
  align-items: center; /* items-center */
  color: #9ca3af; /* text-gray-400 */
  margin-right: 1rem; /* mr-4 */
}

.filter-label-wrapper svg {
  margin-right: 0.5rem; /* mr-2 */
  width: 1.25rem; /* size={20} */
  height: 1.25rem; /* size={20} */
}

.filter-button {
  padding-left: 1.5rem; /* px-6 */
  padding-right: 1.5rem; /* px-6 */
  padding-top: 0.5rem; /* py-2 */
  padding-bottom: 0.5rem; /* py-2 */
  border-radius: 9999px; /* rounded-full */
  font-weight: 500; /* font-medium */
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-all duration-200 */
  cursor: pointer;
  border: none; /* remove default button border */
}

.filter-button.active {
  background-color: #10b981; /* bg-emerald-500 */
  color: #ffffff; /* text-white */
}

.filter-button.inactive {
  background-color: #1e293b; /* bg-slate-800 */
  color: #d1d5db; /* text-gray-300 */
}

.filter-button.inactive:hover {
  background-color: #334155; /* hover:bg-slate-700 */
  color: #ffffff; /* hover:text-white */
}

/* --- Projects Grid Section --- */
.projects-section {
  background-color: rgba(15, 23, 42, 0.5); /* bg-slate-900/50 */
}

.projects-grid {
  display: grid; /* grid */
  grid-template-columns: repeat(1, minmax(0, 1fr)); /* grid-cols-1 */
  gap: 2rem; /* gap-8 */
}

.project-card {
  background-color: rgba(15, 23, 42, 0.5); /* bg-slate-900/50 */
  border: 1px solid #334155; /* border border-slate-700 */
  border-radius: 0.75rem; /* rounded-xl */
  overflow: hidden; /* overflow-hidden */
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-all duration-300 */
}

.project-card:hover {
  border-color: rgba(16, 185, 129, 0.5); /* hover:border-emerald-500/50 */
  transform: scale(1.05); /* hover:transform hover:scale-105 */
}

.project-card.hidden {
  display: none;
}

.project-image-wrapper {
  position: relative; /* relative */
  overflow: hidden; /* overflow-hidden */
}

.project-image {
  width: 100%; /* w-full */
  height: 12rem; /* h-48 */
  object-fit: cover; /* object-cover */
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-transform duration-300 */
}

.project-card:hover .project-image {
  transform: scale(1.1); /* group-hover:scale-110 */
}

.project-category-badge {
  position: absolute; /* absolute */
  top: 1rem; /* top-4 */
  left: 1rem; /* left-4 */
  padding-left: 0.75rem; /* px-3 */
  padding-right: 0.75rem; /* px-3 */
  padding-top: 0.25rem; /* py-1 */
  padding-bottom: 0.25rem; /* py-1 */
  background-color: #10b981; /* bg-emerald-500 */
  color: #ffffff; /* text-white */
  font-size: 0.75rem; /* text-xs */
  font-weight: 600; /* font-semibold */
  border-radius: 9999px; /* rounded-full */
}

.project-featured-badge {
  position: absolute; /* absolute */
  top: 1rem; /* top-4 */
  right: 1rem; /* right-4 */
  padding-left: 0.75rem; /* px-3 */
  padding-right: 0.75rem; /* px-3 */
  padding-top: 0.25rem; /* py-1 */
  padding-bottom: 0.25rem; /* py-1 */
  background-color: #f59e0b; /* bg-yellow-500 */
  color: #ffffff; /* text-white */
  font-size: 0.75rem; /* text-xs */
  font-weight: 600; /* font-semibold */
  border-radius: 9999px; /* rounded-full */
}

.project-overlay {
  position: absolute; /* absolute */
  inset: 0; /* inset-0 */
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.5),
    transparent
  ); /* bg-gradient-to-t from-black/50 to-transparent */
  opacity: 0; /* opacity-0 */
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-opacity duration-300 */
}

.project-card:hover .project-overlay {
  opacity: 1; /* group-hover:opacity-100 */
}

.project-links {
  position: absolute; /* absolute */
  bottom: 1rem; /* bottom-4 */
  left: 1rem; /* left-4 */
  right: 1rem; /* right-4 */
  display: flex; /* flex */
  gap: 0.5rem; /* space-x-2 */
}

.project-link-button {
  flex: 1; /* flex-1 */
  padding-top: 0.5rem; /* py-2 */
  padding-bottom: 0.5rem; /* py-2 */
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem; /* px-4 */
  border-radius: 0.5rem; /* rounded-lg */
  text-align: center; /* text-center */
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-colors */
  display: flex; /* flex */
  align-items: center; /* items-center */
  justify-content: center; /* justify-center */
}

.project-link-button svg {
  margin-right: 0.25rem; /* mr-1 */
  width: 1rem; /* size={16} */
  height: 1rem; /* size={16} */
}

.project-link-live {
  background-color: #10b981; /* bg-emerald-500 */
  color: #ffffff; /* text-white */
}

.project-link-live:hover {
  background-color: #059669; /* hover:bg-emerald-600 */
}

.project-link-github {
  background-color: #334155; /* bg-slate-700 */
  color: #ffffff; /* text-white */
}

.project-link-github:hover {
  background-color: #475569; /* hover:bg-slate-600 */
}

.project-content {
  padding: 1.5rem; /* p-6 */
}

.project-title {
  font-size: 1.25rem; /* text-xl */
  line-height: 1.75rem;
  font-weight: 700; /* font-bold */
  color: #ffffff; /* text-white */
  margin-bottom: 0.75rem; /* mb-3 */
}

.project-description {
  color: #9ca3af; /* text-gray-400 */
  margin-bottom: 1rem; /* mb-4 */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.5rem; /* leading-relaxed */
}

.project-tech-tags {
  display: flex; /* flex */
  flex-wrap: wrap; /* flex-wrap */
  gap: 0.5rem; /* gap-2 */
}

.project-tech-tag {
  padding-left: 0.5rem; /* px-2 */
  padding-right: 0.5rem; /* px-2 */
  padding-top: 0.25rem; /* py-1 */
  padding-bottom: 0.25rem; /* py-1 */
  background-color: #1e293b; /* bg-slate-800 */
  color: #d1d5db; /* text-gray-300 */
  font-size: 0.75rem; /* text-xs */
  border-radius: 0.375rem; /* rounded-md */
}

/* --- Stats Section --- */
.stats-section {
  background-color: rgba(30, 41, 59, 0.3); /* bg-slate-800/30 */
}

.stats-grid {
  display: grid; /* grid */
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* grid-cols-2 */
  gap: 2rem; /* gap-8 */
  text-align: center; /* text-center */
}

.stat-value {
  font-size: 2.25rem; /* text-4xl */
  line-height: 2.5rem;
  font-weight: 700; /* font-bold */
  color: #34d399; /* text-emerald-400 */
  margin-bottom: 0.5rem; /* mb-2 */
}

.stat-label {
  color: #9ca3af; /* text-gray-400 */
}

/* --- Responsive Adjustments --- */
@media (min-width: 640px) {
  /* sm breakpoint */
  .max-width-container {
    padding-left: 1.5rem; /* sm:px-6 */
    padding-right: 1.5rem; /* sm:px-6 */
  }
}

@media (min-width: 768px) {
  /* md breakpoint */
  .projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* md:grid-cols-2 */
  }
  .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* md:grid-cols-4 */
  }
}

@media (min-width: 1024px) {
  /* lg breakpoint */
  .max-width-container {
    padding-left: 2rem; /* lg:px-8 */
    padding-right: 2rem; /* lg:px-8 */
  }
  .hero-title {
    font-size: 4.5rem; /* lg:text-7xl */
  }
  .projects-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* lg:grid-cols-3 */
  }
}